:root{color-scheme:dark;--bg:#080b0f;--line:#303b43;--ink:#e8e5da;--muted:#a8b4b9;--accent:#e4b4c3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 system-ui,-apple-system,"Hiragino Sans",sans-serif}header{max-width:1240px;margin:auto;padding:24px 32px 12px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--muted);margin:0}h1{font-weight:450;font-size:28px;letter-spacing:.12em;margin:0}main{max-width:1240px;margin:auto;padding:0 32px 32px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#111a20;border-radius:25px;padding:9px 18px;min-height:44px}button:hover,button[aria-pressed=true]{background:#293139;border-color:#8498a2}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.4;cursor:default}.chapters{display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 0}.chapters button{border:none;background:transparent;border-radius:0;color:var(--muted);padding:6px 8px;font-size:14px}.chapters button[aria-current=step]{color:var(--ink);border-bottom:2px solid var(--accent)}.chapters span{color:#52616a}.intro{text-align:center;min-height:96px;padding:10px 0 0}.intro h2{font-size:22px;font-weight:450;letter-spacing:.06em;margin:0 0 3px}.intro p{color:var(--muted);font-size:13px;margin:0}.scene{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}figure{margin:0;min-width:0;position:relative}#room-canvas{display:block;width:100%;aspect-ratio:1}iframe{display:block;width:100%;aspect-ratio:1;border:0;background:#050607}figcaption{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding:7px 2px}figcaption span+span,.mirror-pane figcaption span{color:#758992}.console{padding-top:23px}.primary-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.primary{background:#33232c;border-color:#856472}.next{border-color:#7d8c81}.turn-controls{display:flex;gap:6px}.turn-controls button{touch-action:none;user-select:none}.gesture-note{font-size:12px;color:var(--muted);text-align:center;margin:9px 0}.tuning-intro h3{font-size:18px;font-weight:450;margin:0}.tuning-intro p{font-size:13px;max-width:380px;color:var(--muted);margin:6px 0}#tuning-area:not([hidden]){display:flex;gap:40px;align-items:center;justify-content:center;margin:20px 0;padding:22px;border-top:1px solid var(--line)}#tuning{width:min(100%,440px)}.tuning{width:100%;background:#10181e;border-radius:14px}.tuning__ratio{font-size:12px}.tuning button{min-height:40px}#status{font-size:12px;text-align:center;color:var(--muted);min-height:20px}#error{color:#ffb7a7;font-size:13px;white-space:pre-wrap}details{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:#9eafb7;font-size:12px}summary{cursor:pointer}details p{max-width:860px}.verification-controls{display:flex;gap:8px;flex-wrap:wrap}details button{font-size:12px}pre{max-height:280px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}a{color:#baddd0;text-underline-offset:4px}#return{display:none;position:fixed;right:16px;top:16px;z-index:10}body.immersed header,body.immersed nav,body.immersed .intro,body.immersed .console,body.immersed #status,body.immersed details{display:none}body.immersed main{max-width:none;padding:0 22px}body.immersed .scene{min-height:100svh;max-width:1400px;margin:auto}body.immersed #return{display:block}body.transitioning iframe,body.auditing iframe{pointer-events:none}@media(min-width:1100px) and (max-height:900px){.scene{max-width:930px;margin:auto}.intro{min-height:84px}header{padding-top:14px}.console{padding-top:14px}}@media(max-width:700px){header{padding:18px 16px 10px}h1{font-size:22px}header button{font-size:12px;padding:5px 12px}main{padding:0 14px 24px}.chapters{gap:8px}.chapters button{font-size:13px}.intro{min-height:106px}.intro h2{font-size:20px}.intro p{max-width:350px;margin:auto}.scene{gap:10px}figcaption{font-size:10px;display:block;min-height:49px}figcaption span{display:block}.console{padding-top:14px}.primary-controls button{font-size:13px;padding:8px 13px}.gesture-note{max-width:360px;margin:10px auto}#tuning-area:not([hidden]){display:block;padding:16px 0}.tuning-intro{margin-bottom:12px}body.immersed .scene{grid-template-columns:1fr;gap:14px;max-width:430px;padding:38px 0}body.immersed #room-canvas,body.immersed iframe{max-height:42svh;object-fit:contain}body.immersed figcaption{min-height:0}}

/* Keep the scene and its first action together on ordinary laptop displays. */
@media(min-width:701px) and (max-height:900px){header{padding-top:10px;padding-bottom:2px}h1{font-size:25px}.chapters{padding:3px 0}.intro{min-height:72px;padding-top:5px}.scene{max-width:min(930px,calc((100svh - 290px)*2));margin:auto}.console{padding-top:10px}.gesture-note{margin:6px 0}#status{margin:6px 0}#tuning-area:not([hidden]){margin:10px 0;padding:12px}body.immersed .scene{max-width:1400px}}

@media(min-width:701px) and (max-height:900px){body[data-stage=tuning] header,body[data-stage=tuning] .intro{display:none}body[data-stage=tuning] main{padding-top:8px}.tuning-intro{display:none}#tuning{width:min(900px,100%)}.tuning{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-items:center}.tuning__slider-label,.tuning__presets,.tuning__audio{margin:0}.tuning__audio{width:100%}.tuning__status{grid-column:1/-1}#tuning-area:not([hidden]){padding:8px 0;margin:6px 0}}

#immersive{position:absolute;right:max(16px,calc((100vw - 1176px)/2));top:18px;z-index:5}body.immersed #immersive{display:none}

/* Keep the named intervals, listening controls and image together. */
.tuning .tuning__preset{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;font-size:11px;min-height:38px;line-height:1.25}
.tuning__preset small{font-size:10px;color:#afc6cf}
.tuning__tour-status:empty{display:none}
@media(min-width:701px) and (max-height:900px){
  body[data-stage=tuning] .scene{max-width:min(930px,calc((100svh - 340px)*2))}
  body[data-stage=tuning] .gesture-note{display:none}
  .tuning{grid-template-columns:1fr 1.3fr;grid-template-areas:'headline slider' 'strings presets' 'geometry actions' 'tour tour';gap:7px 18px;padding:9px 12px}
  .tuning__headline{grid-area:headline}.tuning__strings{grid-area:strings;margin:0}.tuning__geometry{grid-area:geometry;margin:0;line-height:1.5}
  .tuning__slider-label{grid-area:slider}.tuning__presets{grid-area:presets;grid-template-columns:repeat(7,minmax(0,1fr))}
  .tuning__actions{grid-area:actions;margin:0}.tuning__tour-status{grid-area:tour;margin:0;min-height:14px}
  .tuning__actions button{min-height:34px;margin:0;padding:3px 8px;font-size:12px}
}

.turn-controls button.is-turning{background:#496071;border-color:#dae5e9;box-shadow:0 0 0 2px #a5c2d033}

/* Give the thin room enough screen area to read its real edges. */
.scene{grid-template-columns:1.35fr 1fr}
.room-pane{background:#0c1015}
@media(max-width:700px){
  .scene{grid-template-columns:1fr;gap:18px}
  .mirror-pane{width:72%;justify-self:center}
  .console{position:sticky;bottom:0;z-index:4;padding:10px 8px 4px;background:#080b0ff5;border-top:1px solid var(--line);border-radius:16px 16px 0 0}
  body.immersed .room-pane,body.immersed .mirror-pane{width:100%}
}

.room-viewport{position:relative;overflow:hidden;aspect-ratio:1}
.room-viewport #room-canvas{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:auto}
body.immersed .room-viewport #room-canvas{max-height:none}

/* Tuning needs the two views and the interval controls together, even on a
   narrow panel. The enlarged room belongs to the preceding viewing chapters. */
@media(max-width:700px){
  body[data-stage=mirror] .scene{grid-template-columns:1fr 1fr;gap:10px}
  body[data-stage=mirror] .mirror-pane{width:100%}
  body[data-stage=tuning] header,body[data-stage=tuning] .intro{display:none}
  body[data-stage=tuning] main{padding-top:8px}
  body[data-stage=tuning] .scene{grid-template-columns:1fr 1fr;gap:10px}
  body[data-stage=tuning] .mirror-pane{width:100%}
  body[data-stage=tuning] .console{position:static;border:0;border-radius:0;padding:6px 0 0}
  body[data-stage=tuning] .gesture-note,body[data-stage=tuning] .tuning-intro{display:none}
  body[data-stage=tuning] #tuning-area:not([hidden]){margin:6px 0;padding:0;border:0}
  body[data-stage=tuning] .tuning{padding:10px}
  body[data-stage=tuning] .tuning__presets{grid-template-columns:repeat(7,minmax(0,1fr))}
  body[data-stage=tuning] .tuning__strings{margin:5px 0}
}

/* The two readings share one layout and one neutral treatment. */
.reading-entry{text-align:center;margin-top:10px}
#reading-panel{text-align:center;padding:18px 0 14px}
#reading-panel[hidden]{display:none}
#reading-progress{font-size:12px;color:var(--muted);margin:0 0 7px}
#reading-title{font-size:23px;font-weight:450;letter-spacing:.12em;margin:0}
#reading-note{font-size:13px;color:var(--ink);margin:6px 0 12px;min-height:23px}
#reading-busy{display:block;min-height:24px;font-size:12px;color:var(--muted)}
body.reading header,body.reading .chapters,body.reading .intro,body.reading .console,body.reading #immersive,body.reading #return{display:none}
body.reading main{max-width:1240px;padding:0 28px 28px}
body.reading .scene{grid-template-columns:1.15fr 1fr;max-width:min(1080px,calc((100svh - 245px)*2));min-height:0;margin:auto;gap:24px}
body.reading .mirror-pane{width:100%;opacity:1;transition:opacity .45s ease}
body.reading[data-reading-phase=room] .mirror-pane,body.reading[data-reading-phase=returned] .mirror-pane{opacity:0;visibility:hidden}
body.reading iframe{pointer-events:none}
body.reading #mirror-gesture{display:none}
body.reading .mirror-pane figcaption span:first-child{color:var(--muted)}
body.reading #status{display:none}
@media(max-width:700px){
  body.reading main{padding:0 14px 20px}
  body.reading .scene{max-width:100%;gap:12px;grid-template-columns:1.15fr 1fr}
  #reading-panel{padding-top:14px}
  #reading-progress{font-size:11px}
  #reading-note{font-size:12px}
}


body.reading{overflow-anchor:none}

#material-examples{margin:20px 0;color:var(--muted)}#material-links{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}#material-links a{display:block;border:1px solid #405054;border-radius:9px;padding:10px 12px;color:inherit;text-decoration:none;min-width:120px}#material-links a[aria-current=true]{border-color:#cad4b7;color:#f4f1dc}.material-swatches{display:block;height:8px;border-radius:5px;margin-bottom:8px}body.reading #material-examples{display:none}