@font-face { font-family: 'Chamber Serif'; src: local('Iowan Old Style'); font-display: swap; }
:root { color-scheme: dark; --bg:#071016; --cream:#f0e9d9; --muted:#829b9d; --aqua:#8fe4dc; --gold:#e9c78a; --line:rgba(156,212,211,.16); --sans:'Avenir Next',Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif:'Chamber Serif','Palatino Linotype',Palatino,Georgia,serif; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--cream); font-family:var(--sans); font-size:13px; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button,canvas { outline:none; }
button:focus-visible { outline:2px solid var(--aqua); outline-offset:5px; }
canvas:focus-visible { outline:none; }
button:disabled { cursor:default; opacity:.4; }
button:hover { filter:brightness(1.16); }
button:active { transform:translateY(1px); }
button svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none !important; }
.game-shell { isolation:isolate; display:flex; flex-direction:column; height:100dvh; min-height:460px; width:100%; padding:25px 38px 17px; background:radial-gradient(ellipse at 52% 46%,#102128 0%,#0a171e 40%,#060e14 80%); }
.game-shell::after { position:fixed; inset:0; content:''; pointer-events:none; z-index:10; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.topbar { display:flex; position:relative; align-items:center; justify-content:space-between; gap:28px; min-height:46px; z-index:3; }
.wordmark { display:flex; align-items:center; gap:13px; user-select:none; }
.brand-mark { width:39px; height:39px; fill:none; stroke:var(--aqua); stroke-width:1; }
.brand-mark path { stroke:var(--gold); stroke-width:1.35; }
.brand-name { display:block; font-size:22px; letter-spacing:.14em; font-weight:550; line-height:1.2; }
.brand-name>span { font-weight:400; color:var(--aqua); }
.brand-note { display:block; font-size:7.5px; letter-spacing:.23em; margin-top:7px; color:#98a9a8; }
.chapters { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:25px; }
.chapter-line { position:absolute; height:1px; width:calc(100% - 22px); left:11px; background:var(--line); }
.chapter-button { width:34px; height:34px; border-radius:50%; border:1px solid #294148; background:#0a151c; font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:.04em; color:#92a7a7; position:relative; }
.chapter-button.active { border-color:var(--gold); color:var(--gold); box-shadow:0 0 22px #dec18510; background:#172025; }
.chapter-button.completed::after { position:absolute; content:'✓'; background:var(--aqua); color:#092022; border:3px solid #08131a; font-size:8px; line-height:12px; height:18px; width:18px; border-radius:50%; right:-6px; top:-5px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.watch-button { background:#17272c66; border:1px solid #37535999; border-radius:6px; padding:10px 15px 10px 12px; display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.015em; }
.watch-button svg { width:15px; height:15px; fill:var(--cream); stroke:none; }
.watch-button.watching { color:var(--aqua); border-color:#629b9a; }
.icon-button { display:grid; place-items:center; width:34px; height:34px; border:0; background:transparent; color:#a1b4b3; font-size:18px; font-weight:350; border-radius:5px; }
.icon-button:hover { background:#ffffff09; color:var(--cream); }
.sound-button .sound-on { display:none; }
.sound-button[aria-pressed=true] .sound-on { display:block; }
.sound-button[aria-pressed=true] .sound-off { display:none; }
.sound-button[aria-pressed=true] { color:var(--aqua); }
.stage { position:relative; flex:1; width:100%; min-height:0; margin-top:20px; }
#world { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.chapter-heading { position:absolute; top:2px; left:0; z-index:1; pointer-events:none; }
.eyebrow { font-size:8px; font-weight:500; letter-spacing:.2em; line-height:1.8; color:var(--aqua); margin:0 0 8px; text-transform:uppercase; }
.eyebrow-divider { color:#516c71; padding:0 8px; }
h1,h2,p { margin-top:0; }
.chapter-heading h1 { font:400 40px/1.1 var(--serif); letter-spacing:-.02em; margin:0 0 8px; }
.chapter-heading>p:last-child { color:#9caca9; font-size:11px; letter-spacing:.025em; line-height:1.6; margin:0; max-width:220px; }
.field-note { position:absolute; right:0; top:21px; display:flex; gap:9px; color:#688186; font:8px/1.7 var(--sans); letter-spacing:.12em; pointer-events:none; }
.tiny-cross { font-size:16px; color:#92b6b6; line-height:1; }
.world-legend { position:absolute; display:flex; gap:18px; bottom:24px; right:1px; font-size:8px; letter-spacing:.15em; color:#92aaa9; pointer-events:none; }
.world-legend span { display:flex; align-items:center; gap:7px; }
.swatch { display:inline-block; width:5px; height:5px; border-radius:50%; }
.swatch.present { background:var(--gold); box-shadow:0 0 9px var(--gold); }
.swatch.past { background:var(--aqua); box-shadow:0 0 9px var(--aqua); }
.instruction { display:flex; gap:12px; align-items:center; position:absolute; bottom:21px; left:0; z-index:2; pointer-events:none; }
.instruction-mark { display:grid; place-items:center; width:29px; height:29px; border:1px solid #5975775e; color:var(--gold); border-radius:50%; font-size:10px; font-variant-numeric:tabular-nums; }
.instruction strong { display:block; font-size:12px; letter-spacing:.015em; font-weight:450; margin:0 0 4px; }
.instruction div>span { font-size:10px; color:#8aa29f; }
.guide-banner { position:absolute; top:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; border:1px solid #56797b; background:#0a1c22ee; padding:8px 10px; border-radius:20px; font-size:8px; letter-spacing:.13em; z-index:4; white-space:nowrap; box-shadow:0 5px 30px #0005; }
.guide-dot { width:5px; height:5px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
.guide-banner button { border:0; border-left:1px solid #43585a; background:transparent; padding:2px 3px 2px 10px; color:var(--cream); font-size:10px; letter-spacing:0; }
.guide-banner button>span { color:var(--aqua); margin-left:6px; }
.toast { position:absolute; bottom:78px; left:50%; transform:translateX(-50%); z-index:6; padding:11px 18px; background:#10282ef2; border:1px solid #62919080; border-radius:7px; color:#dceee6; font-size:11px; box-shadow:0 5px 28px #0005; text-align:center; max-width:90%; width:max-content; }
.console { position:relative; z-index:3; border-top:1px solid var(--line); padding:15px 0 0; }
.timeline-heading { display:flex; align-items:center; gap:20px; justify-content:space-between; font-size:8px; letter-spacing:.16em; }
.recording-state { color:var(--gold); display:flex; align-items:center; gap:8px; min-width:178px; }
.record-dot { height:5px; width:5px; background:var(--gold); border-radius:50%; box-shadow:0 0 9px #e9c78a70; }
.echo-chips { display:flex; flex:1; align-items:center; gap:17px; color:#687f82; }
.echo-chip { color:var(--aqua); font-size:8px; letter-spacing:.1em; display:flex; gap:6px; align-items:center; }
.echo-chip.violet { color:#b3a6f5; }
.echo-chip::before { content:''; width:5px; height:5px; border:1px solid currentColor; transform:rotate(45deg); }
.time-code { font-size:13px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.time-limit { color:#71888a; font-size:10px; }
.timeline { margin:11px 0 9px; }
.timeline-track { position:relative; background:#1c353b77; height:13px; border-left:1px solid #677c77; border-right:1px solid #677c77; background-image:repeating-linear-gradient(90deg,transparent,transparent calc(12.5% - 1px),#294449 calc(12.5% - 1px),#294449 12.5%); }
.timeline-progress { position:absolute; top:0; left:0; bottom:0; width:0; background:linear-gradient(90deg,#9b7e4555,#e9c78a9c); will-change:width; }
.playhead { position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--gold); box-shadow:0 0 7px #f3d6a2; left:0; }
.playhead::before { position:absolute; content:''; width:5px; height:5px; top:-1px; left:-2px; transform:rotate(45deg); background:var(--gold); }
.echo-tracks { position:absolute; inset:0; }
.echo-track { height:2px; position:absolute; top:3px; background:#92e8e0b0; left:0; box-shadow:0 0 9px #8cdbde30; }
.echo-track:nth-child(2) { top:8px; background:#bda7f3; }
.time-markers { display:flex; justify-content:space-between; color:#617d82; font-size:7px; margin-top:4px; letter-spacing:.05em; font-variant-numeric:tabular-nums; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:51px; }
.desktop-movement { display:flex; align-items:center; gap:13px; color:#c2ceca; font-size:11px; }
.desktop-movement>div>span { display:block; color:#728c8e; font-size:9px; margin-top:5px; }
.key-group { display:flex; flex-direction:column; align-items:center; gap:3px; }
.key-group>span { display:flex; gap:3px; }
kbd { display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:8px; line-height:1; border:1px solid #53676966; border-radius:3px; height:17px; min-width:18px; padding:0 4px; background:#9aafad09; color:#aebfbc; }
.loop-note { display:flex; align-items:center; gap:12px; color:#8ca3a2; font-size:10px; letter-spacing:.01em; }
.loop-glyph { font-family:var(--serif); font-size:29px; line-height:1; color:#5b8588; }
.control-actions { display:flex; align-items:center; gap:22px; }
.restart-button { display:flex; align-items:center; gap:6px; background:none; border:none; color:#9eafac; padding:9px 0; font-size:10px; }
.restart-button svg { width:17px; height:17px; }
.restart-button kbd { margin-left:3px; }
.rewind-button { display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(120deg,#e8cf9f,#c9ab75); color:#162124; font-weight:550; font-size:12px; padding:13px 16px; min-width:178px; border:1px solid #ecd6b1; border-radius:5px; box-shadow:0 3px 20px #dac79510,inset 0 1px 0 #fff3; transition:box-shadow .2s; }
.rewind-button:hover { box-shadow:0 0 24px #e8c58e26; }
.rewind-button svg { fill:#17262a; stroke:none; width:18px; height:18px; }
.rewind-button kbd { border-color:#1825243d; background:#1322230d; color:#2f3936; height:19px; margin-left:5px; font-size:7px; }
.bottom-note { display:flex; justify-content:space-between; padding-top:15px; color:#506d73; font-size:6.5px; letter-spacing:.14em; }
.bottom-note strong { color:#859c9c; font-weight:500; padding-left:6px; }
.bottom-separator { padding:0 7px; color:#486168; }
.touch-pad { display:none; }
.outcome { position:absolute; inset:0; z-index:5; display:flex; justify-content:center; align-items:center; background:radial-gradient(ellipse at center,#051218d9 4%,#07171ba1 37%,#07101630 77%); backdrop-filter:blur(3px); }
.outcome-card { width:min(520px,94%); text-align:center; padding:24px 30px 28px; }
.outcome-symbol { color:var(--aqua); font-size:38px; line-height:1; text-shadow:0 0 30px #8eede885; margin-bottom:12px; }
.outcome h2 { font-family:var(--serif); font-size:51px; font-weight:400; line-height:1.1; letter-spacing:-.03em; margin:10px 0 17px; }
.outcome-card>p:not(.eyebrow) { color:#acc2bb; font-size:12px; line-height:1.8; max-width:340px; margin:0 auto; }
.outcome-stats { margin:18px auto 23px; font-size:8px; letter-spacing:.18em; color:var(--aqua); }
.outcome-actions { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
.primary-button { background:#d9c18f; color:#13272a; border:1px solid #eddbb4; font-size:11px; font-weight:550; padding:12px 20px; border-radius:5px; display:inline-flex; justify-content:center; align-items:center; gap:24px; }
.primary-button>span { font-size:18px; }
.text-button { background:none; border:0; font-size:10px; color:#a5bdb9; padding:4px; }
dialog { width:min(490px,calc(100% - 30px)); border:1px solid #486869; background:linear-gradient(135deg,#14272f,#0b1921); color:var(--cream); border-radius:10px; padding:34px; box-shadow:0 25px 90px #0008; max-height:calc(100dvh - 24px); }
dialog::backdrop { background:#01090ecc; backdrop-filter:blur(9px); }
dialog h2 { font:400 36px/1.15 var(--serif); letter-spacing:-.03em; margin-bottom:26px; }
dialog>p:not(.eyebrow) { color:#99b3af; }
.dialog-close { position:absolute; top:9px; right:9px; font-size:24px; }
.help-step { display:flex; gap:18px; padding:0 0 19px; }
.help-step>span { color:var(--gold); font-size:10px; padding-top:3px; }
.help-step h3 { margin:0 0 6px; font-weight:500; font-size:13px; }
.help-step p { margin:0; color:#a0b6b3; font-size:11px; line-height:1.8; }
.help-footnote { margin:0 0 22px; border-top:1px solid var(--line); padding-top:13px; color:#94aca8; font-size:10px; line-height:1.9; }
.help-footnote p { margin:0 0 10px; }
#pause-dialog { text-align:center; padding:50px 32px; }
#pause-dialog h2 { margin-bottom:12px; }
#pause-dialog .primary-button { margin-top:20px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.no-script { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:30px; background:#071016; }
@media (min-width:1600px) { .game-shell { padding:32px 55px 20px; } .stage { margin-top:32px; } .chapter-heading h1 { font-size:48px; } .brand-name { font-size:25px; } }
@media (max-width:1100px) { .chapters { position:relative; left:auto; transform:none; gap:18px; } .topbar { gap:20px; } .brand-name { font-size:19px; } .brand-note { font-size:6px; } .watch-button { font-size:10px; padding:9px 10px; } .loop-note { max-width:270px; } .game-shell { padding:22px 27px 16px; } }
@media (max-width:850px) { .topbar { gap:10px; } .brand-mark { width:29px; height:29px; } .brand-name { font-size:16px; } .brand-note { font-size:5.5px; } .wordmark { gap:8px; } .chapters { gap:12px; } .chapter-button { width:29px; height:29px; font-size:9px; } .top-actions { gap:1px; } .icon-button { width:30px; } .help-button { display:none; } .loop-note { display:none; } .chapter-heading h1 { font-size:36px; } .field-note { font-size:6px; } .controls { gap:12px; } .recording-state { min-width:140px; } }
@media (pointer:coarse), (max-width:650px) { .desktop-movement { display:none; } .touch-pad { display:grid; grid-template-columns:37px 37px 37px; grid-template-rows:32px 32px 32px; gap:3px; user-select:none; touch-action:none; } .touch-pad button { padding:0; border:1px solid #526a6b60; border-radius:6px; background:#233a3e72; color:#dae6de; font-size:17px; touch-action:none; user-select:none; -webkit-user-select:none; } .touch-pad button[data-direction=up] { grid-column:2; grid-row:1; } .touch-pad button[data-direction=left] { grid-column:1; grid-row:2; } .touch-pad button[data-direction=right] { grid-column:3; grid-row:2; } .touch-pad button[data-direction=down] { grid-column:2; grid-row:3; } .touch-center { grid-column:2; grid-row:2; display:grid; place-items:center; color:#587a7d; font-size:19px; } .touch-pad button.held { background:#69959060; border-color:var(--aqua); } .control-actions { gap:12px; } .controls { min-height:102px; } .rewind-button kbd,.restart-button kbd { display:none; } .rewind-button { min-width:143px; padding:14px; } }
@media (max-width:650px) { .game-shell { padding:18px 18px 14px; } .topbar { flex-wrap:wrap; min-height:78px; align-content:space-between; } .wordmark { order:1; } .brand-name { font-size:20px; } .brand-mark { width:33px; height:33px; } .brand-note { font-size:6px; } .top-actions { order:2; margin-left:auto; } .chapters { order:3; gap:17px; } .watch-button { position:absolute; right:0; bottom:1px; padding:6px 10px; } .chapter-button { width:25px; height:25px; font-size:8px; } .stage { margin-top:10px; min-height:0; } .chapter-heading { top:12px; } .chapter-heading h1 { font-size:32px; margin-bottom:5px; } .chapter-heading .eyebrow { font-size:6px; margin-bottom:6px; letter-spacing:.14em; } .chapter-heading>p:last-child { font-size:9px; } .field-note { display:none; } .world-legend { right:0; bottom:75px; font-size:6px; gap:12px; } .instruction { bottom:15px; gap:9px; } .instruction strong { font-size:11px; } .instruction div>span { font-size:9px; max-width:285px; display:block; line-height:1.5; } .instruction-mark { width:25px; height:25px; font-size:9px; flex-shrink:0; } .console { padding-top:12px; } .timeline-heading { font-size:6.5px; gap:5px; letter-spacing:.08em; } .recording-state { min-width:121px; gap:6px; } .time-code { font-size:11px; } .time-limit { font-size:8px; } .echo-chips { justify-content:center; gap:8px; } .echo-chip { font-size:6px; letter-spacing:0; gap:3px; } .echo-chip::before { height:4px; width:4px; } .timeline { margin:8px 0; } .timeline-track { height:11px; } .time-markers { font-size:6px; } .control-actions { flex-direction:column-reverse; gap:5px; align-items:stretch; } .restart-button { justify-content:center; font-size:9px; padding:7px; } .bottom-note { padding-top:8px; font-size:5px; letter-spacing:.08em; } #save-note { max-width:100px; text-align:right; line-height:1.5; } .guide-banner { top:97px; font-size:6px; padding:6px 8px; gap:5px; } .guide-banner button { font-size:8px; } .outcome h2 { font-size:36px; } .outcome-card { padding:16px 8px; } .outcome-symbol { font-size:26px; margin-bottom:8px; } .outcome-stats { margin:13px auto 16px; font-size:7px; } .outcome-card>p:not(.eyebrow) { font-size:10px; } .outcome h2 { margin:6px 0 11px; } .outcome-actions { gap:7px; } .primary-button { padding:10px 14px; font-size:10px; } .outcome { backdrop-filter:blur(4px); } .toast { font-size:10px; bottom:78px; } }
@media (max-height:650px) and (min-width:651px) { .game-shell { padding:14px 24px 10px; min-height:400px; } .brand-name { font-size:18px; } .brand-note { display:none; } .stage { margin-top:6px; } .chapter-heading { top:8px; } .chapter-heading h1 { font-size:28px; } .chapter-heading>p:last-child { display:none; } .chapter-heading .eyebrow { font-size:6px; margin-bottom:4px; } .console { padding-top:8px; } .timeline { margin:7px 0 4px; } .controls { min-height:42px; } .bottom-note { padding-top:6px; } .rewind-button { padding:10px 13px; } .instruction { bottom:8px; } .instruction div>span { display:none; } .world-legend { bottom:12px; } .field-note { top:10px; } .touch-pad { grid-template-columns:29px 29px 29px; grid-template-rows:24px 24px 24px; gap:2px; } .outcome h2 { font-size:33px; } .outcome-symbol { font-size:22px; margin-bottom:4px; } .outcome-card { padding:12px; } .outcome-stats { margin:10px 0; } .outcome h2 { margin:4px 0 8px; } .outcome-card>p:not(.eyebrow) { font-size:10px; } .outcome-actions { gap:6px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (pointer:coarse), (max-width:650px) { .touch-pad { grid-template-columns:44px 44px 44px; grid-template-rows:44px 44px 44px; } .controls { min-height:138px; } }
@media (max-height:650px) and (min-width:651px) and (pointer:coarse) { .touch-pad { grid-template-columns:36px 36px 36px; grid-template-rows:32px 32px 32px; } .controls { min-height:102px; } }