.experience-dialog {
  color:var(--ink);font-family:var(--serif);width:min(460px,calc(100vw - 36px));max-height:calc(100dvh - 36px);overflow:auto;
  border:1px solid #aa8a6877;border-radius:3px 7px 4px 6px;padding:30px 32px 22px;
  background:#f1e9d8 var(--paper-art) center/700px auto;box-shadow:0 20px 80px #251f194d,inset 0 0 0 5px #f2e8d5,inset 0 0 0 6px #ad856833;
  text-align:center;font-size:18px;line-height:1.8;
}
.experience-dialog::backdrop { background:#383c32a6;backdrop-filter:blur(5px); }
.experience-dialog[open] { animation:experience-unfold .36s ease-out; }
.experience-dialog h2 { font-size:34px;line-height:1.45;letter-spacing:6px;margin:4px 0 18px; }
.experience-dialog .dialog-kicker { font-size:13px;letter-spacing:4px;color:#947a59; }
.experience-dialog .primary,.experience-dialog .secondary { min-height:46px;padding:9px 20px;font-size:18px;letter-spacing:2px; }
.experience-dialog .secondary { border:1px solid var(--red);color:var(--red); }
.experience-dialog .primary { border-radius:2px 4px 2px 3px; }
.guide-illustration { width:200px;height:112px;margin:3px auto 14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.guide-mountains { stroke:#829074;stroke-width:1.2;opacity:.45; }
.guide-phone { stroke:#745f44;fill:#eee6d4d9;transform-origin:120px 64px;animation:guide-rotate 4.8s ease-in-out infinite; }
.guide-turn { stroke:var(--red);stroke-width:1.6; }
.browser-guide strong { color:var(--red);font-weight:400; }
.guide-lock-note { font-size:13px;color:#8b7b63;line-height:1.8;margin-top:14px; }
.guide-copy { display:flex;width:100%;margin-top:24px; }
.guide-enter { display:flex;width:100%;margin-top:18px; }
.guide-continue { display:block;min-height:44px;width:100%;font-size:16px;margin-top:8px;color:#88765d; }
.guide-status { min-height:24px;font-size:13px;color:var(--red);line-height:1.6;margin-top:6px; }
.guide-link { width:100%;font-size:13px;background:#e5dac4;border:1px solid #ab9474;padding:8px; }
.guide-menu-hint { color:var(--red);font-size:14px;text-align:right;letter-spacing:1px;margin-bottom:8px; }
/* The lower menu has just two independent sound switches. */
.inside-heading .scroll-options .audio-toggle { display:flex;align-items:center;gap:13px; }
.audio-toggle .audio-state { margin-left:auto;font-size:.68em;letter-spacing:0;color:#9b8a72; }
.audio-toggle .audio-switch { position:relative;width:32px;height:16px;border:1px solid #a29379;border-radius:8px;background:#a495791a;transition:background .25s,border-color .25s; }
.audio-toggle .audio-switch::after { content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:2px;top:2px;background:#9b8a72;transition:transform .25s,background .25s; }
.audio-toggle[aria-pressed=true] .audio-switch { border-color:var(--red);background:#9c3f2d20; }
.audio-toggle[aria-pressed=true] .audio-switch::after { transform:translateX(16px);background:var(--red); }
.audio-toggle[aria-pressed=true] .audio-state { color:var(--red); }
.is-writing-pending { visibility:hidden; }
.ink-writing-letter { display:inline-block;opacity:0;transform:translateY(3px);transition:opacity .10s,transform .10s;white-space:pre; }
.ink-writing-letter.is-visible { opacity:1;transform:translateY(0); }
@keyframes guide-rotate { 0%,15%{transform:rotate(0)}45%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)} }
@keyframes experience-unfold { from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none} }
@media (max-height:500px) { .experience-dialog { padding:18px 28px; }.guide-illustration { height:72px;margin:0 auto; }.experience-dialog h2 { margin-bottom:10px;font-size:28px; }.guide-copy{margin-top:14px;} }
@media (max-width:370px) { .experience-dialog { padding:24px 22px 18px;font-size:16px; }.experience-dialog h2{font-size:30px;} }
@media (prefers-reduced-motion:reduce) { .experience-dialog,.guide-phone { animation:none!important; } .guide-phone { transform:rotate(-90deg); } }
