@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=VT323&display=swap');
:root{--ink:#333548;--muted:#777586;--lavender:#e8e2f5;--purple:#9d83ca;--line:#d3cddd;--paper:#f9f6ff}*{box-sizing:border-box}body{margin:0;background:#eeeaf5;color:var(--ink);font-family:'Space Mono',monospace;font-size:16px;background-image:radial-gradient(#bcb2ce66 .7px,transparent .7px);background-size:8px 8px}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:transparent}button:focus-visible,a:focus-visible{outline:3px solid #8660b2;outline-offset:5px}.app{max-width:1440px;margin:auto;padding:0 5.5%}header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-1px}.mark{display:inline-flex;align-items:center;background:#c8b9e7;box-shadow:3px 3px 0 #66597c;width:34px;height:32px;justify-content:center;font-size:26px;font-family:'VT323',monospace}.mark span{color:#faf6ff}.edition{font-size:12px;font-weight:400;letter-spacing:0;margin-left:14px;color:var(--muted)}.quiet{font-size:12px}.quiet span{margin-left:10px;color:#9179af}main{max-width:1030px;margin:60px auto 0;text-align:center}.eyebrow{font-size:11px;letter-spacing:2px;color:#7c6b95;display:flex;justify-content:center;align-items:center;gap:9px}.square{width:6px;height:6px;background:#a78bc8}h1{font-size:clamp(48px,6vw,76px);line-height:1.1;letter-spacing:-5px;margin:18px 0 12px;font-weight:400}h1 span{font-family:'VT323',monospace;font-size:1.32em;color:#a18abb;text-shadow:2px 2px 0 #e5dbf0,4px 4px 0 #b6a2cc;letter-spacing:-2px}.intro{font-size:13px;color:var(--muted);margin:0 0 38px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px;font-size:13px}.modes{display:flex;align-items:center;gap:9px}.tiny{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.modes .tiny{margin-right:12px}.modes button{padding:7px 13px;font-size:13px}.modes button.selected{background:#d9ccec;box-shadow:3px 3px 0 #b7a5cf}.language{color:#8c769f;display:flex;gap:14px}.language span{color:var(--muted)}.playground{position:relative;text-align:left;background:var(--paper);border:2px solid #b9abc9;box-shadow:7px 7px 0 #d7cce5;min-height:300px;padding:22px 30px 18px;cursor:text}.topline,.bottomline{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.3px;color:#8a8097}.live{display:flex;align-items:center;gap:7px}.live i{width:5px;height:5px;background:#a8bea9}.perspective{perspective:1000px;overflow:hidden;height:196px;padding:21px 2px}#words{font-family:'VT323','Courier New',monospace;font-size:35px;line-height:1.5;letter-spacing:1px;word-spacing:8px;transform-style:preserve-3d;animation:float 7s ease-in-out infinite;transition:translate .18s;color:#ada1be;text-shadow:1px 1px 0 #e4dbea,2px 2px 0 #d8cde1,3px 3px 0 #d8cde155}#words span{position:relative}#words .correct{color:#668b83;text-shadow:1px 1px #cce0d7,2px 2px #cce0d7}#words .wrong{color:#b35d7a;background:#f5dce5;text-shadow:none}#words .current:before{content:'';position:absolute;left:-2px;top:4px;width:2px;height:30px;background:#8b66ae;box-shadow:2px 0 #d7c7e5;animation:blink 1s step-end infinite}.bottomline{letter-spacing:0;font-size:11px;margin-top:5px}#hint{color:#8a729e}.keyhint{color:#aaa0b4}#input{position:absolute;inset:45px 0 35px;width:100%;resize:none;opacity:0;cursor:text;font-size:16px}#result{position:absolute;inset:0;background:#f9f6fff5;text-align:center;padding:38px 16px;z-index:3}#result h2{font-family:'VT323',monospace;font-size:47px;font-weight:400;margin:15px 0}#result p{font-size:14px;color:#786b89}#again{background:#d4c4eb;box-shadow:4px 4px 0 #aa93c8;padding:10px 22px;font-size:13px}.dashboard{margin-top:35px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;text-align:left;padding:0 25px}.stat{border-right:1px solid var(--line);padding-left:28px}.stat:first-child{padding-left:0}.stat>div{display:flex;align-items:baseline;gap:9px;margin-top:3px}.stat strong{font-family:'VT323',monospace;font-size:43px;font-weight:400}.stat>div>span{font-size:12px;color:var(--muted)}#restart{display:flex;justify-content:center;align-items:center;gap:13px;font-size:31px}#restart>span{font-size:12px}kbd{font-family:inherit;font-size:10px;border:1px solid #c9bfd6;padding:2px 5px;box-shadow:0 2px 0 #d8cee2;color:#8e819c}#restart kbd{margin-left:7px}.tip{font-size:11px;color:#9b8fa7;margin:43px 0 55px}.tip>span{margin:0 12px}footer{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#9b8fa7}.swatches{display:flex;gap:5px}.swatches i{width:9px;height:9px;background:#c7b7df}.swatches i:nth-child(2){background:#bad4c8}.swatches i:nth-child(3){background:#ebc3c9}.swatches i:nth-child(4){background:#e5d7a9}.no-motion #words{animation:none}@keyframes float{0%,100%{transform:translateY(1px) rotateX(3deg) rotateY(-1deg)}50%{transform:translateY(-5px) rotateX(-1deg) rotateY(1deg)}}@keyframes blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){#words{animation:none;transition:none}}@media(min-width:1500px){main{margin-top:85px}}@media(max-width:650px){.app{padding:0 6%}header{height:78px}.edition{display:none}main{margin-top:38px}h1{letter-spacing:-3px}.intro{font-size:11px;margin-bottom:30px}.playground{padding:18px 17px;min-height:294px}.perspective{height:205px}#words{font-size:29px;word-spacing:4px}.keyhint{display:none}.dashboard{padding:0;grid-template-columns:1fr 1fr 1fr}.stat{padding-left:15px}.stat:nth-child(3){border:0}#restart{grid-column:1/-1;margin-top:17px;font-size:25px}.tip{margin:20px 0 34px;font-size:9px}.tip>span{margin:0 5px}.live{font-size:8px}.topline{font-size:8px}.language{gap:6px;font-size:11px}.modes{gap:4px}.modes button{padding:7px 9px}.modes .tiny{margin-right:3px}footer{font-size:7px;gap:10px}.swatches{display:none}}
.runway{margin:2px -12px 15px;border-top:1px dashed #ded3e8;padding-top:10px}.gamehud{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#9b8aa9;padding:0 5px}.gamehud #health{font-size:21px;letter-spacing:4px;color:#b48dba;line-height:1.1}.gamehud #health.low{color:#bf6479}#runner{display:block;width:100%;height:115px;image-rendering:pixelated}#input{bottom:auto;height:205px}.playground:focus-within{border-color:#a58abf}#result{background:#f9f6ffeb}#result h2{margin-top:32px}@media(max-width:650px){.gamehud{font-size:7px;letter-spacing:0}.gamehud #health{font-size:18px;letter-spacing:2px}#runner{height:105px}}

/* Words are the running surface; the whole scene floats together. */
.playground{min-height:300px}.gamehud{margin-top:18px}.perspective{position:relative;height:215px;padding:0;overflow:hidden}.wordworld{position:relative;width:100%;height:100%;animation:float 7s ease-in-out infinite;transform-style:preserve-3d}#words{position:absolute;top:124px;left:0;display:flex;width:max-content;white-space:pre;font-size:44px;line-height:1;letter-spacing:0;word-spacing:0;animation:none;transform:none;transition:none;will-change:translate}#words span{display:inline-block;flex:none;width:27px;letter-spacing:4px}#words span.gap{width:52px}#words .current:before{top:5px;height:36px}#runner{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}.no-motion .wordworld{animation:none}#input{top:75px;height:220px}.bottomline{margin-top:0}@media(prefers-reduced-motion:reduce){.wordworld{animation:none}}@media(max-width:650px){.perspective{height:205px}.gamehud{margin-top:17px}#words{font-size:38px;top:124px}#words span{width:25px}#words span.gap{width:45px}#runner{height:100%}.playground{min-height:300px}}
/* Distant landscape advances more slowly than the word platforms. */
.perspective{height:290px;margin:14px -20px 14px;border:1px solid #cfc4dc;background:#e8edf5}#scenery{position:absolute;inset:0;background-image:url('landscape.png');background-repeat:repeat-x;background-size:auto 100%;image-rendering:pixelated;pointer-events:none;will-change:background-position}.wordworld{z-index:1}#words{top:116px;color:#736185;text-shadow:1px 1px 0 #f4edf9,2px 2px 0 #d0badf,3px 3px 0 #bba4cf}#words .correct{color:#356f64;text-shadow:1px 1px 0 #e1f4e8,2px 2px 0 #abd0be}#words .wrong{color:#a83861;background:#f9d8e5}#input{height:315px}.no-motion #scenery{background-position-x:0!important}@media(prefers-reduced-motion:reduce){#scenery{background-position-x:0!important}}@media(max-width:650px){.perspective{height:265px;margin-left:-10px;margin-right:-10px}#words{top:106px}#input{height:290px}}
#scenery{background:none;overflow:hidden}.landscape-strip{display:flex;height:100%;width:max-content;will-change:translate}.landscape-strip img{height:100%;width:auto;max-width:none;flex:none;image-rendering:pixelated}.landscape-strip img:nth-child(even){transform:scaleX(-1)}#words{top:88px}.no-motion .landscape-strip{translate:0 0!important}@media(prefers-reduced-motion:reduce){.landscape-strip{translate:0 0!important}}@media(max-width:650px){#words{top:78px}}
.landscape-strip img{width:var(--panorama-width,200vw);height:100%;object-fit:cover;object-position:center 55%;flex:none}
#scenery:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(239,234,255,.76),rgba(239,234,255,.72) 42%,rgba(239,234,255,.12) 65%,transparent 82%)}

:root{--gold:#ebc66e;--gold-edge:#bb9340}.modes button.selected,.setting.selected,#again{background:var(--gold);color:#514126;box-shadow:3px 3px 0 var(--gold-edge)}.options{display:flex;gap:10px}.setting{font-size:11px;padding:7px 10px;border:1px solid #cbbdd8}.gamehud #health{font-size:17px}.setting:hover,#again:hover{filter:brightness(1.04)}button:focus-visible{outline-color:#a77c27}@media(max-width:650px){.toolbar{flex-wrap:wrap;gap:15px}.options{order:3;width:100%;justify-content:center}.setting{font-size:12px}.gamehud #health{font-size:14px}}
body,button,textarea{font-family:"VT323","Courier New",monospace}.brand{font-size:25px}.edition{font-size:16px}.modes button,.setting{font-size:17px}

.wanderer-mark{display:inline-block;width:27px;height:30px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}.brand-pixel{display:inline-flex;align-items:center}.quiet .wanderer-mark{width:20px;height:24px}

@media(max-width:650px){html{-webkit-text-size-adjust:100%}.app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}header{height:auto;min-height:76px;gap:10px;flex-wrap:wrap;padding:12px 0}.brand{font-size:23px;gap:8px}.edition{display:none}header button{min-height:44px}.toolbar{gap:12px}.modes button,.setting{min-height:44px;min-width:44px}.options{flex-wrap:wrap}.playground{padding:16px 14px}.topline,.bottomline,.gamehud{gap:8px;flex-wrap:wrap}.gamehud{font-size:11px}.perspective{margin-left:0;margin-right:0}.dashboard{gap:8px}.stat{padding-left:10px}.stat strong{font-size:36px}#restart,#again{min-height:44px}footer{flex-wrap:wrap;font-size:12px}.intro{font-size:18px}.tip{font-size:14px}.keyhint{display:none}}

.toolbar{flex-wrap:wrap;gap:16px}.modes{flex-wrap:wrap}.custom-duration{display:inline-flex;align-items:center;gap:10px;padding:3px 8px 3px 13px;border-left:1px solid #cbbdd8;min-height:44px}.custom-duration input{width:125px;height:28px;accent-color:#b38b36;cursor:pointer}.custom-duration output{min-width:56px;font:19px 'VT323',monospace;color:#82718f;white-space:nowrap}.custom-duration.selected{background:#f1dfb488;box-shadow:2px 2px #c4a569}.custom-duration.selected output{color:#675024}.custom-duration input:focus-visible{outline:2px solid #a77c27;outline-offset:3px}@media(max-width:650px){.modes{width:100%;gap:5px}.custom-duration{padding-left:7px;gap:5px}.custom-duration input{width:clamp(70px,20vw,110px)}.custom-duration output{min-width:48px;font-size:17px}}

header{height:auto;min-height:108px;padding:18px 0;gap:18px;flex-wrap:wrap}.brand{flex-wrap:wrap}.edition{font-size:16px;line-height:1.3}@media(max-width:650px){header{min-height:76px}.brand{gap:8px}}

.landscape-strip img:nth-child(even){transform:none}

/* The panorama retains its original 3:1 proportions at full height. */
.perspective{height:auto;aspect-ratio:3/2;min-height:360px}.landscape-strip img{object-fit:contain;object-position:center}#scenery:after{background:linear-gradient(to bottom,#efeaff80, #efeaff70 125px,transparent 220px)}#input{height:calc(100% - 110px)}#result{display:flex;flex-direction:column;align-items:center;justify-content:center}#result[hidden]{display:none}@media(max-width:650px){.perspective{height:auto;min-height:360px;aspect-ratio:3/2}#words{top:88px}}