:root { color-scheme: light; --ink:#333; --muted:#777; --line:#ddd; --blue:#4682b4; --green:green; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; }
body { margin:0; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.4; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid #4176a6; outline-offset:4px; }
.navbar { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; background:#f8f8f8; border:1px solid #e7e7e7; border-radius:0 0 4px 4px; }
.brand { color:#777; text-decoration:none; font-size:18px; line-height:20px; }
.nav-tools { display:flex; align-items:center; gap:28px; }
.languages { display:flex; align-items:center; gap:3px; font-size:13px; color:#888; }
.languages button { padding:7px 1px; border:0; color:#777; background:transparent; }
.languages button[aria-pressed="true"] { color:#222; font-weight:700; }
.menu-button { display:grid; place-items:center; width:42px; height:33px; border:1px solid #ddd; border-radius:4px; background:transparent; color:#888; }
.menu-button:hover { background:#eee; }
#player { min-height:calc(100svh - 50px); display:flex; flex-direction:column; align-items:center; }
.scene-wrap { width:min(1040px,94vw); flex:1; min-height:325px; display:flex; align-items:center; justify-content:center; padding:35px 0; }
.scene-wrap svg { width:100%; height:auto; overflow:visible; display:block; }
.scene-wrap[hidden] { display:none; }
#player[data-view="transition"] { justify-content:center; }
#player[data-view="transition"] .narrative { margin:auto; transform:translateY(-9svh); max-width:900px; }
#transitionTitle { font-size:clamp(28px,3vw,40px); line-height:1.2; font-weight:500; margin:0 0 20px; text-wrap:balance; }
#player[data-view="transition"] #explanation { max-width:780px; font-size:clamp(20px,2vw,26px); line-height:1.4; margin-bottom:24px; }
.scene-wrap .mobile-description { display:none; }
.narrative { width:min(1100px,94%); text-align:center; padding:14px 12px 30px; }
#explanation { font-size:clamp(23px,2.2vw,30px); line-height:1.15; font-weight:500; margin:0 auto 16px; max-width:1100px; text-wrap:pretty; }
.player-controls { display:inline-flex; align-items:center; justify-content:center; min-height:34px; }
.player-controls .button { border-radius:0; min-height:34px; padding:6px 12px; }
.player-controls .button:disabled { opacity:1; }
.player-controls .button:first-child {border-radius:4px 0 0 4px;}
.player-controls .button:last-child {border-radius:0 4px 4px 0;border-left:0;}
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; min-height:38px; border:1px solid #ccc; border-radius:4px; color:#333; background:#fff; font-size:14px; line-height:1.2; text-decoration:none; }
.button:hover:not(:disabled) { background:#ebebeb; border-color:#adadad; }
.icon-button { width:36px; padding:6px 10px; }
.button svg { flex-shrink:0; }
.continue { min-width:95px; font-size:14px; }
.text-button { border:0; background:transparent; color:#777; padding:6px 0; text-decoration:none; font-size:13px; }
.text-button:hover { color:#333; text-decoration:underline; }
.skip-link { position:fixed; top:-90px; left:15px; z-index:20; padding:12px; background:#fff; border:2px solid var(--blue); }
.skip-link:focus { top:7px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { padding:26px; width:min(940px,calc(100% - 32px)); max-height:88svh; border:1px solid #ccc; border-radius:5px; color:#333; background:#fff; }
dialog::backdrop { background:rgb(0 0 0 / .18); }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-tools { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.dialog-head h2 { font-size:23px; font-weight:500; margin:0 0 18px; line-height:1.3; min-width:0; overflow-wrap:anywhere; }
.close-dialog { min-width:36px; min-height:34px; padding:7px; flex-shrink:0; }
dialog p { font-size:16px; line-height:1.65; }
dialog h3 { font-size:16px; margin:25px 0 12px; font-weight:600; }
.muted { color:#707070; }
.contents-dialog { width:min(740px,calc(100% - 32px)); }
#chapterCount { margin:0 0 20px; font-size:14px; }
.contents-meta { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.chapter-group { border-top:1px solid #eee; margin-top:16px; padding-top:5px; }
.chapter-group h3 { color:#777; font-size:13px; font-weight:400; margin:15px 0 6px; }
.chapter-link { display:flex; align-items:baseline; gap:15px; padding:10px 6px; color:#444; font-size:16px; text-decoration:none; border-left:3px solid transparent; }
.chapter-link:hover { background:#f7f7f7; }
.chapter-link[aria-current] { color:#275c86; border-left-color:var(--blue); background:#f4f7fa; }
.chapter-link span { font-size:12px; color:#888; width:22px; flex-shrink:0; }
pre,code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
pre { font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; background:#f7f7f7; padding:16px; border-left:3px solid var(--blue); }
.source-list { padding-left:20px; }
.source-list li { margin:10px 0; line-height:1.5; }
.source-list a { color:#275c86; overflow-wrap:anywhere; }
.noscript { padding:30px; text-align:center; }
.message-dot { pointer-events:none; }
[data-ghost] {pointer-events:none;}
@media(max-width:680px) {
  .navbar { padding:0 11px; }
  .brand { font-size:14px; max-width:60%; }
  .nav-tools { gap:14px; }
  .scene-wrap { min-height:280px; padding:20px 0; width:96vw; }
  .scene-wrap svg { height:auto; min-height:200px; }
  #explanation { font-size:21px; line-height:1.4; margin-bottom:18px; }
  .narrative { width:100%; padding:0 20px 24px; }
  .contents-meta { flex-wrap:wrap; gap:0 16px; }
  dialog { padding:20px; max-height:90svh; }
  .dialog-head h2 { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .message-dot { display:none; }
}