/* An illustrated tribute to Dreams to Reality. Game-derived artwork is packaged from out/. */
:root {
  --paper:#fafaf8; --ink:#222321; --ink-dim:#62645e; --rule:#d9dad4;
  --sand:var(--paper); --sand-hi:#f0f0eb; --text:var(--ink); --text-dim:var(--ink-dim);
  --link:#343d33; --book:Georgia,"Times New Roman",serif;
  --ui:"Segoe UI",Arial,sans-serif; --mono:Consolas,monospace;
  --dusk:#141613; --dusk-ink:#f5f5ef; --dusk-dim:#b6bcb1; --dusk-line:#3a3e36;
  --sky:#c5d0bc; --jade-hi:#d5ddce; --ember:#e8eddf; --ember-hi:#fff; --life:#b94b45;
  --ok:#bbcfaa; --bad:#ffb7aa;
  --key-bg:#f0f0eb; --key-ink:#222321; --key-edge:#a7aaa1;
  --header-h:72px; --bezel:0px; --tool-h:60px; --chrome:210px;
  --gutter:clamp(22px,5.4vw,88px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--ui)}
a{color:inherit;text-underline-offset:5px}
a:hover{text-decoration-thickness:2px}
button,input{font:inherit}
img{display:block;max-width:100%;height:auto}
figure,p,dl{margin:0}
h1,h2,h3{font-family:var(--book);font-weight:400}
h2{font-size:clamp(38px,4.8vw,66px);letter-spacing:-.055em;line-height:1.08;margin:0}
h3{font-size:28px;letter-spacing:-.035em;line-height:1.2;margin:0 0 20px}
:focus-visible{outline:2px solid #5a7152;outline-offset:5px}
.wrap{max-width:1480px;padding-inline:var(--gutter);margin-inline:auto}
.eyebrow{font:600 10px/1.6 var(--ui);text-transform:uppercase;letter-spacing:.19em;margin-bottom:28px}
.section-heading{margin-bottom:58px}
.section-intro{max-width:520px;margin-top:22px;color:var(--ink-dim)}
.source-note{font:12px/1.8 var(--ui);color:var(--ink-dim);margin-top:28px;max-width:760px}
.source-note a{display:inline-block;margin-right:16px}
.skip{position:fixed;left:20px;top:-80px;background:white;padding:12px;z-index:100}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.top{position:sticky;top:0;z-index:30;height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--paper);border-bottom:1px solid var(--rule)}
.brand{font:600 21px/1 var(--book);text-decoration:none;white-space:nowrap;letter-spacing:-.03em}
.brand em{font-weight:400;font-size:.8em}
.brand-note{font:10px var(--ui);text-transform:uppercase;letter-spacing:.13em;border-left:1px solid var(--rule);padding-left:20px;margin-left:20px;color:var(--ink-dim)}
.top nav{display:flex;align-items:center;gap:30px;font-size:12px}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline}
.top .nav-play{border:1px solid var(--ink);padding:9px 16px}
.nav-play span{margin-left:18px}
.hero{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:6%;padding-top:90px;padding-bottom:76px;min-height:620px}
.hero h1{font-size:clamp(50px,5.5vw,80px);line-height:1.02;letter-spacing:-.065em;margin:0 0 30px}
.hero h1 em{font-weight:400;color:#545d4e}
.hero-intro{font:20px/1.6 var(--book);margin-bottom:18px}
.hero-description{font-size:14px;line-height:1.85;color:var(--ink-dim);max-width:360px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:34px;font-size:12px}
.button-dark{display:inline-flex;gap:32px;align-items:center;background:var(--ink);color:var(--paper);text-decoration:none;padding:15px 20px}
.button-dark:hover{background:#434a3f}
.text-link{display:inline-flex;gap:28px;align-items:center;font-size:13px}
.cover{margin-top:8px}
.cover img{width:100%;aspect-ratio:1.836;object-fit:cover}
figcaption{display:flex;justify-content:space-between;gap:16px;font:11px/1.6 var(--ui);color:var(--ink-dim);margin-top:15px}
.edition-line{display:flex;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;border-block:1px solid var(--rule);font:10px/1.5 var(--ui);text-transform:uppercase;letter-spacing:.15em}
.story-section{padding-top:105px;padding-bottom:100px}
.story-layout{display:grid;grid-template-columns:1fr .85fr;gap:12%;align-items:start}
.story-text{max-width:640px}
.chapter{position:relative;padding:0 0 34px 34px;border-left:1px solid var(--rule)}
.chapter::before{content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:#555e50}
.chapter:last-of-type{padding-bottom:0}
.chapter-date{font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:#555e50}
.chapter h3{font-size:31px;margin-bottom:18px}
.chapter p:not(.chapter-date){font:18px/1.85 var(--book);margin-bottom:16px}
.chapter .story-ending{font-style:italic;font-size:27px!important}
.story-art{padding-top:0}
.manual-art a{display:block}
.manual-art img{width:100%}
.duncan-art{width:69%;margin:0 auto 56px}
.child-art{width:47%;margin:0 0 0 auto}
.story-art img{mix-blend-mode:multiply}
.story-art figcaption{justify-content:center;font-size:10px}
.world-section{padding:86px 0 76px;background:#eeefea}
.split-heading{display:grid;grid-template-columns:1fr .85fr;gap:12%;align-items:end}
.split-heading>p{color:var(--ink-dim);max-width:460px;font:18px/1.8 var(--book);margin-bottom:5px}
.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 30px}
.art-wide{grid-column:1/-1}
.art-wide img{aspect-ratio:2.15;object-fit:cover}
.art-grid img{background:#fff}
.art-grid a{overflow:hidden}
.art-grid img{transition:opacity .2s}
.art-grid a:hover img{opacity:.9}
.play{padding:90px var(--gutter) 38px;background:var(--dusk);color:var(--dusk-ink);--text:var(--dusk-ink);--text-dim:var(--dusk-dim);--rule:var(--dusk-line);--key-bg:#30332e;--key-ink:var(--dusk-ink);--key-edge:#626a5c}
.game-heading{text-align:center}
.game-heading>p:last-child{font:18px/1.7 var(--book);color:var(--dusk-dim);margin-top:22px}
.play-grid{max-width:1160px;margin:auto}
.player{container-type:inline-size;min-width:0;outline:none;--stage-w:min(100cqw,max(280px,calc((100svh - var(--chrome))*4/3)))}
.bezel{width:var(--stage-w);max-width:100%;margin:auto}
.screen{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden;container-type:inline-size}
#canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;background:#000;outline:none;touch-action:none}
body[data-phase="running"] #canvas{cursor:none}
body.pixel #canvas{image-rendering:pixelated}
.side{display:none}
.game-note{text-align:center;font:12px/2 var(--ui);color:var(--dusk-dim);margin:18px auto 0}
.play-reference{padding-top:24px;padding-bottom:50px}
.reference-fold{border-bottom:1px solid var(--rule);padding:22px 0}
.reference-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font:27px var(--book)}
.reference-fold>summary::after{content:"+";font:22px var(--ui)}
.reference-fold[open]>summary::after{content:"−"}
.reference-fold>summary>span{margin-left:auto;color:var(--ink-dim);font:11px var(--ui)}
.reference-fold>summary::-webkit-details-marker{display:none}
.reference-fold>.section-intro{margin-bottom:30px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 60px;padding:34px 0}
.help-grid h3{font-size:22px;margin-bottom:12px}
.help-grid p{font-size:14px;color:var(--ink-dim)}
.data-settings{font-size:13px}
.data-settings p{margin:20px 0 12px}
.data-settings summary{cursor:pointer}
.credits-section{padding-top:90px;padding-bottom:95px}
.team-photo{max-width:1040px;margin:0 auto 64px}
.team-photo img{mix-blend-mode:multiply}
.credits-intro{display:flex;gap:40px;justify-content:space-between;align-items:baseline;padding-top:28px;border-top:1px solid var(--rule);margin-bottom:35px}
.credits-intro h3{font-size:30px;white-space:nowrap}
.credits-intro p{font:12px/1.8 var(--ui);color:var(--ink-dim);max-width:340px}
.credits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 32px}
.credit dt{font:600 10px/1.6 var(--ui);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;color:var(--ink-dim)}
.credit dd{font:17px/1.75 var(--book);margin:0}
.preservation-section{padding:90px 0;background:#eeefea}
.preservation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.preservation-copy>p:not(.source-note){font:18px/1.85 var(--book);margin-bottom:24px}
.technical-note{margin-top:28px;font:12px/1.8 var(--ui);color:var(--ink-dim)}
.technical-note summary{cursor:pointer}
.technical-note p{margin-top:14px}
.foot{display:grid;grid-template-columns:1fr 1.3fr auto;gap:40px;align-items:start;padding-top:45px;padding-bottom:45px}
.foot p{font:11px/1.9 var(--ui);color:var(--ink-dim)}
.back-top{font:11px var(--ui)}
.notice{padding:18px var(--gutter);font:13px/1.8 var(--ui);background:#e9ebe3;color:var(--ink)}
.notice.phone{display:none}
code{font: .85em var(--mono)}
.fine{font:12px/1.8 var(--ui);color:var(--text-dim);margin-top:24px}
#log{display:none;position:fixed;inset:auto 0 0;max-height:32vh;overflow:auto;z-index:90;margin:0;padding:12px;font:11px/1.4 var(--mono);background:#000e;color:#eee;white-space:pre-wrap}
body.debug #log{display:block}

/* The retail box is a complete object beside the controls, never a cropped backdrop. */
#overlay { position:absolute; inset:0; z-index:10; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#f3f2ee; color:#29282b; transition:opacity .45s ease, visibility 0s; font:clamp(12px,1.95cqw,17px)/1.45 var(--ui); --key-bg:#e9e8e3; --key-ink:#343137; --key-edge:#c0beb7; }
#overlay.hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.letter { margin:0; padding:1.15em 2em; display:flex; justify-content:space-between; gap:1em; color:#646067; font-size:.7em; letter-spacing:.045em; border-bottom:1px solid #dcdad4; }
.start-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6%; min-height:0; padding:4.5% 6%; }
.start-art { display:flex; flex-direction:column; min-height:0; margin:0; }
.poster { flex:1; min-height:0; width:100%; background:var(--poster,url("manual/box-front.jpg")) center/contain no-repeat; filter:drop-shadow(0 8px 9px #26202e25); }
.box-caption { display:block; text-align:center; margin:1em 0 0; font-size:.6em; color:#736e75; letter-spacing:.05em; }
.start-info { display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:0; }
.title-block { margin-bottom:1.7em; text-shadow:none; }
.start-eyebrow { font-size:.6em; text-transform:uppercase; letter-spacing:.14em; line-height:1.7; color:#746b77; margin-bottom:1.4em; }
#title { margin:0; font:400 5.8cqw/1.02 var(--book); letter-spacing:-.045em; }
#title em { font-weight:400; color:#554860; }
.sub { margin:1em 0 0; font-size:.85em; line-height:1.7; color:#68636b; }
.panel { display:flex; flex-direction:column; align-items:stretch; gap:.65em; min-width:0; }
#bar { height:3px; background:#ddd9df; overflow:hidden; }
#bar > i { display:block; height:100%; width:0; background:#655471; transition:width .15s linear; }
#bar.done > i { background:#54624e; }
#progress-text { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4em; color:#736c76; font-size:.68em; font-variant-numeric:tabular-nums; }
#status { margin:0; font-size:.8em; color:#5e6258; line-height:1.5; }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:.8em; align-self:flex-start; width:100%; max-width:16em; min-height:44px; padding:1em 1.4em; margin:.35em 0 0; font:600 .95em/1.1 var(--ui); cursor:pointer; border:1px solid #39313f; border-radius:0; color:#fff; background:#39313f; transition:background .15s; }
.cta:hover:not(:disabled) { background:#53485d; }
.cta:disabled { background:#dedbe0; border-color:#dedbe0; color:#6d6870; cursor:default; }
#hint { display:flex; justify-content:center; flex-wrap:wrap; gap:.4em 1.4em; margin:0; padding:1.1em 1.6em; border-top:1px solid #dcdad4; font-size:.7em; color:#69636c; }
#hint:empty { display: none; }
#hint span { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.soundnote { margin:.65em 0 0; font-size:.65em; line-height:1.8; color:#716b75; }
.tip { display:none; }
.tip:empty { display: none; }
.tip.fade { animation: fadein .8s ease; }
@keyframes fadein { from { opacity: 0; } }
details#filebox { display:none; margin-top:.5em; color:#69636c; font-size:.75em; }
body.debug details#filebox:not([hidden]) { display:block; }
body.debug .start-info { overflow:auto; justify-content:flex-start; }
details#filebox summary { cursor: pointer; }
#files { margin: .4em 0 0; padding: 0; list-style: none; max-height: 5.6em; overflow: auto; font: .95em var(--mono); font-variant-numeric: tabular-nums; }
#files li { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
#files li.ok { color:#49414f; }
#files li.ok::before { content:"\2713"; color:#54624e; margin-right:.5em; }
#files li > span:first-child { margin-right: auto; }
#error { display: none; }
#error.show { display: block; }
#error h2 { margin:0 0 .6em; font:600 1.3em/1.3 var(--ui); color:#843e3b; }
#error-help { font-size: .92em; }
#error-help p { margin: .3em 0; }
#error-help ul { margin: .3em 0 .5em; padding-left: 1.3em; }
#error-text { margin:.8em 0; padding:.8em; max-height:6.5em; overflow:auto; font:.8em/1.4 var(--mono); white-space:pre-wrap; word-break:break-word; background:#e9e1e0; border-left:3px solid #843e3b; color:#542d2b; }
.error-actions { display: flex; flex-wrap: wrap; gap: .5em; }
/* what the control strip shows in each state */
body[data-phase="checking"] #hint, body[data-phase="manifest"] #hint,
body[data-phase="ready"] #bar, body[data-phase="ended"] #bar, body[data-phase="ended"] #progress-text, body[data-phase="ended"] #filebox,
body[data-phase="starting"] .soundnote, body[data-phase="running"] .soundnote, body[data-phase="ended"] .soundnote,
body[data-phase="error"] .soundnote, body[data-phase="error"] .tip, body[data-phase="error"] .cta, body[data-phase="error"] #filebox,
body[data-phase="error"] #bar, body[data-phase="error"] #progress-text, body[data-phase="error"] #status, body[data-phase="error"] #hint { display: none; }
body[data-phase="error"] .title-block { display: none; }
body[data-phase="ready"] #progress-text { display:none; }
body[data-phase="error"] .start-art { display:none; }
body[data-phase="error"] .start-body { grid-template-columns:minmax(0,1fr); }
body[data-phase="error"] .start-info { overflow:auto; justify-content:flex-start; }

.btn, .tool { font: inherit; font-family: var(--ui); color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 3px; padding: .45em .9em; cursor: pointer; transition: background .15s, border-color .15s; }
.btn { font-size: .9em; font-weight: 600; border-color: currentColor; }
.btn:hover, .tool:hover { background: rgba(128, 128, 128, .2); }
#error .btn:first-child { background: var(--ember); border-color: var(--ember); color: #24100a; }

kbd {
  display: inline-block; min-width: 1.8em; padding: .1em .45em .16em; margin: 0 .1em; text-align: center; vertical-align: .08em;
  font: 600 .76em/1.3 var(--ui); color: var(--key-ink); background: var(--key-bg);
  border: 1px solid var(--key-edge); border-bottom-width: 2px; border-radius: 3px; white-space: nowrap;
}
kbd.pb { border-radius: 99px; }
#overlay kbd { --key-bg:#e9e8e3; --key-ink:#343137; --key-edge:#c0beb7; }

/* veil: the game runs but the keyboard is elsewhere */
#veil { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; font: clamp(12px, 2.2cqw, 20px) var(--ui); color: #fff; cursor: pointer; border: 0; background: rgba(5, 8, 22, .72); }
#veil[hidden] { display: none; }
#veil .ico { width: 2.2em; height: 2.2em; margin-bottom: .3em; }
#veil .v-title { font: 400 1.7em/1.2 var(--book); }
#veil .v-sub { font-size: .85em; color: var(--dusk-dim); max-width: 26em; text-align: center; }
.keyhint { position: absolute; right: 10px; bottom: 10px; z-index: 6; margin: 0; padding: 4px 10px; font: 12px var(--ui); color: var(--dusk-ink); background: rgba(5, 8, 22, .7); opacity: 0; pointer-events: none; transition: opacity .5s; }
.keyhint.show { opacity: 1; }
.keyhint kbd { --key-bg: #262d52; --key-ink: var(--dusk-ink); --key-edge: rgba(190, 205, 255, .4); }

/* toolbar under the stage */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tool-h); padding: 8px 0; font: .86rem var(--ui); }
.state { flex: 1 1 0; display: flex; align-items: center; gap: .6em; margin: 0; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.state .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
body[data-phase="downloading"] .state .dot, body[data-phase="manifest"] .state .dot, body[data-phase="starting"] .state .dot { background: var(--sky); animation: blink 1.1s ease-in-out infinite; }
body[data-phase="ready"] .state .dot { background: var(--ember); }
body[data-phase="running"] .state .dot { background: var(--ok); }
body[data-phase="error"] .state .dot { background: var(--bad); }
@keyframes blink { 50% { opacity: .25; } }
.tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tool { display: inline-flex; align-items: center; gap: .45em; padding: .4em .7em; font-size: .85rem; }
.tool .ico, .cta .ico, .notice .ico, #veil .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cta .ico { width: 1.05em; height: 1.05em; }
.tool[aria-pressed="true"] { border-color: var(--jade-hi); color: var(--jade-hi); }
#mute[aria-pressed="true"] { border-color: var(--life); color: #ffc9cb; }
#mute .i-off, #mute[aria-pressed="true"] .i-on { display: none; }
#mute[aria-pressed="true"] .i-off { display: block; }
[data-needs-game] { opacity: .45; }
body[data-phase="running"] [data-needs-game] { opacity: 1; }
.vol { display: inline-flex; align-items: center; gap: 4px; }
.vol input { width: 84px; accent-color: var(--jade-hi); }
body:not([data-phase="running"]) #reload { display: none; }

/* fullscreen: the stage fills the screen, the toolbar floats and hides when idle */
.player:fullscreen { display: grid; place-items: center; background: #000; --stage-w: min(100vw, 133.333vh); }
.player:fullscreen .bezel { width: var(--stage-w); position: relative; }
.player:fullscreen .screen { box-shadow: none; }
.player:fullscreen .toolbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); transition: opacity .3s; }
.player:fullscreen.idle .toolbar { opacity: 0; pointer-events: none; }
.player:fullscreen.idle #canvas { cursor: none; }

/* quick controls beside the stage (wide screens): only what fits beside it, never a clipped
 * scrolling box. Moving and fighting are shown; the ? key has the whole list. */
.side { font-size: .92rem; min-width: 0; }
.side h2 { margin: 0 0 4px; font: 400 1.5rem/1.2 var(--book); }
.side .controls-grid { display: block; columns: auto; }
.side .kgroup { margin-bottom: 14px; }
.side .kgroup:nth-of-type(n+3) { display: none; }
.side .krow { padding: 3px 0; font-size: .9rem; }
.side .fine { margin: 0; }

/* controls dialog: a page of the booklet over the game */
dialog { width: min(1000px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 22px 28px 26px; color: var(--ink); border: 0; border-radius: 2px; background: var(--sand); box-shadow: 0 40px 120px rgba(0, 0, 0, .7); }
dialog::backdrop { background: rgba(6, 8, 20, .8); }
.dlg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dlg-head h2 { margin: 0; font: 400 2rem/1.2 var(--book); }
.dlg-note { margin: 2px 0 16px; color: var(--ink-dim); font-size: .95rem; }

/* controls: one source (#controls-src), cloned to the side panel and the dialog */
.controls-grid { columns: 3 250px; column-gap: 40px; }
.kgroup { margin: 0 0 22px; break-inside: avoid; }
.kgroup h3 { margin: 0 0 2px; font: italic 400 1.25rem/1.3 var(--book); }
.kgroup h3 small { font: .8rem var(--ui); color: var(--text-dim); margin-left: .4em; }
.kgroup dl { margin: 0; }
.krow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 5px 0; border-top: 1px solid var(--rule); font-size: .95rem; }
.krow dt { color: var(--text); }
.krow dd { margin: 0 0 0 auto; text-align: right; color: var(--text-dim); font: .86rem var(--ui); }
.krow dd s { text-decoration: none; margin: 0 .05em; }


.side{display:none}
.keyhint kbd{--key-bg:#30332e;--key-edge:#626a5c}
.toolbar{flex-wrap:wrap}
.toolbar .state{flex-basis:100%;font-size:11px}
body:not([data-phase="running"]):not([data-phase="error"]) .toolbar .state{display:none}
.toolbar .tools{flex:1;justify-content:center}
dialog{--text:var(--ink);--text-dim:var(--ink-dim);--rule:#d9dad4;--key-bg:#f0f0eb;--key-ink:#222321;--key-edge:#a7aaa1;font-family:var(--ui)}
.dlg-note{margin:12px 0 24px}
.tool .lbl{font-size:11px}
.player:fullscreen .toolbar{--text-dim:#eee}
@media(min-width:1700px){.hero{min-height:760px}}
@media(max-width:1100px){
  .hero{gap:5%;padding-top:65px;min-height:540px}.hero h1{font-size:58px}
  .top nav{gap:22px}.brand-note{display:none}.credits-grid{grid-template-columns:repeat(3,1fr)}
  .hero-intro{font-size:18px}.hero-actions{gap:18px}
  .story-layout,.split-heading{gap:8%}.tool .lbl{display:none}.vol input{width:60px}
}
@media(max-width:760px){
  :root{--header-h:64px;--gutter:24px;--chrome:200px}
  .top nav a:not(.nav-play){display:none}.top .nav-play{font-size:11px;padding:8px 12px}
  .nav-play span{margin-left:10px}.brand{font-size:19px}
  .hero{grid-template-columns:1fr;gap:42px;padding-top:48px;padding-bottom:40px}
  .hero h1{font-size:clamp(49px,10vw,72px)}.hero .eyebrow{margin-bottom:22px}
  .hero-description{max-width:420px}.hero-actions{margin-top:25px}
  .cover{margin:0}.edition-line{font-size:9px;letter-spacing:.06em}
  .edition-line>span:last-child{white-space:nowrap}
  .story-section,.credits-section{padding-top:62px;padding-bottom:60px}
  .section-heading{margin-bottom:36px}.section-intro{font-size:15px}
  .story-layout{grid-template-columns:1fr;gap:40px}.chapter{padding-left:23px}
  .story-art{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
  .duncan-art,.child-art{width:100%;margin:0}.child-art{width:90%;justify-self:end}
  .world-section{padding:60px 0}.split-heading{grid-template-columns:1fr;gap:24px}
  .art-grid{gap:30px 16px}.art-wide img{aspect-ratio:1.836}
  figcaption{font-size:10px;gap:8px}
  .play{padding-top:56px}.game-heading{margin-bottom:34px}
  .tools{gap:4px}.tool{padding:.5em .65em}.vol input{display:none}
  .notice.phone{display:block}.play-reference{padding-bottom:0}
  .reference-fold>summary{font-size:22px}.reference-fold>summary>span{font-size:10px}
  .help-grid{grid-template-columns:1fr;gap:26px}
  .credits-grid{grid-template-columns:1fr 1fr;gap:30px 22px}.credit dd{font-size:16px}
  .credits-intro{display:block;margin-bottom:30px}.credits-intro h3{margin-bottom:12px}
  .team-photo{margin-bottom:35px}.credits-intro p{max-width:none}
  .preservation-section{padding:58px 0}.preservation-grid{grid-template-columns:1fr;gap:34px}
  .foot{grid-template-columns:1fr;gap:22px}
}
@media(max-width:380px){.hero-actions{gap:16px}.button-dark{gap:20px}.edition-line{flex-wrap:wrap}.art-grid{grid-template-columns:1fr}.credit dd{font-size:15px}}
@container (max-width:520px) {
  .start-body{gap:7%;padding:5% 6%;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .start-eyebrow,.box-caption,.sub,.soundnote{display:none}
  .title-block{margin-bottom:1em}
  #title{font-size:7.3cqw}
  .letter{padding:.8em 1.5em;font-size:.65em}
  #hint{display:none}
  .panel{gap:.45em}
  .cta{min-height:40px;padding:.85em .65em;font-size:.9em}
  #status{font-size:.75em}
}
body.touch .notice.phone{display:block}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.button-dark,.cta,.btn,.tool{border:1px solid ButtonText}#bar>i{background:Highlight}}