:root{font-family:Arial,sans-serif;color:#f7f4ed;background:#e9e4da;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #cbb991;outline-offset:5px}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#welcome,#tour,#cover,.shade,#canvas{position:fixed;inset:0;width:100%;height:100%}#cover{object-fit:cover}.shade{background:linear-gradient(90deg,#1a1f1ad4,#1a1f1a29 85%)}.intro{position:absolute;left:7vw;top:50%;transform:translateY(-50%);max-width:470px}.eyebrow{font-size:10px;letter-spacing:.2em;line-height:1.5}h1{font:clamp(48px,6vw,86px)/1.03 Georgia,serif;letter-spacing:-.045em;font-weight:400;margin:28px 0}p.description{font-size:16px;line-height:1.7;max-width:350px;color:#e7e8df}#start{margin-top:20px;background:#f0ebdf;color:#303b31;border:0;border-radius:3px;padding:19px 24px;min-width:240px;text-align:left}#start span{float:right}#status{font-size:12px;line-height:1.6;max-width:360px;min-height:40px;color:#d4d9cc}progress{width:240px;height:4px;accent-color:#eee6ce}.original{display:inline-block;margin-top:18px;color:#f5f0df;font-size:12px;text-underline-offset:5px}#canvas{touch-action:none;outline:none}header,footer{position:absolute;left:0;right:0;padding:28px 36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;text-shadow:0 1px 6px #0008}header{top:0;background:linear-gradient(#0004,transparent)}footer{bottom:0;background:linear-gradient(transparent,#0005)}header a{font-size:11px;letter-spacing:.15em;color:#fff;text-decoration:none}header div,nav{display:flex;gap:8px;align-items:center}header button,header div a,nav button{pointer-events:auto;border:1px solid #fff5;color:#fff;background:#27382a80;border-radius:30px;padding:10px 15px;font-size:12px;backdrop-filter:blur(12px)}header>a{pointer-events:auto}h2{font:32px Georgia,serif;font-weight:400;margin:5px 0}nav button[aria-pressed=true]{color:#2b392d;background:#eeeadd;text-shadow:none}#joystick{display:none;position:absolute;left:26px;bottom:145px;width:100px;height:100px;border:1px solid #fffa;border-radius:50%;background:#263a3026;touch-action:none}#stick{position:absolute;left:32px;top:32px;width:34px;height:34px;border-radius:50%;background:#fff9;pointer-events:none}#notice{position:absolute;top:100px;left:50%;transform:translate(-50%);background:#26382be6;padding:12px 20px;border-radius:5px;font-size:13px}dialog{border:0;border-radius:12px;padding:32px;max-width:450px;color:#2a382c;background:#f5f0e6}dialog p{font-size:14px;line-height:1.7}dialog button{padding:12px 20px;background:#304534;color:#fff;border:0;border-radius:5px}dialog::backdrop{background:#0006;backdrop-filter:blur(5px)}@media(pointer:coarse){#joystick{display:block}}@media(max-width:600px){.intro{left:8vw;right:8vw;max-width:none}h1{font-size:56px}.description{max-width:290px!important}.shade{background:linear-gradient(90deg,#19251de0,#19251d60)}header{padding:20px 14px;gap:10px}header>a{font-size:9px;letter-spacing:.1em}header button,header div a{padding:9px 10px;font-size:10px}header div{gap:5px}footer{padding:22px;align-items:flex-start;flex-direction:column;gap:16px}footer h2{font-size:27px}nav{align-self:flex-end}nav button{font-size:11px;padding:10px 16px}#joystick{bottom:165px}dialog{max-width:calc(100vw - 36px);padding:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}#benchmark{margin:12px 0 0 8px;background:#e2e7dc;color:#2e412f}#benchmark-result{display:block;font-size:12px;line-height:1.7;margin-top:16px;color:#344a35}@supports (padding:max(0px)){header{padding-top:calc(28px + env(safe-area-inset-top))}footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}@media(max-width:600px){header{padding-top:calc(20px + env(safe-area-inset-top))}footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}#joystick{bottom:calc(165px + env(safe-area-inset-bottom))}}@media(orientation:landscape)and (max-height:500px){.intro{left:6vw;max-width:620px}.intro h1{font-size:40px;margin:10px 0}.intro .eyebrow{margin:0}.intro p.description{font-size:13px;line-height:1.4;margin:8px 0;max-width:460px}.intro #start{margin-top:6px;padding:12px 20px}.intro #status{margin:7px 0;min-height:0;max-width:520px;font-size:11px}.intro .original{margin-top:6px}header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}footer{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}#joystick{bottom:100px;left:max(26px,env(safe-area-inset-left))}}.edition-link{display:block;margin-top:14px;color:#e8d3a6}@media(orientation:landscape)and (max-height:500px){.edition-link{display:inline-block;margin-left:20px;margin-top:4px}}}
