:root{--ink:#243f4c;--cream:#fff8e9;--gold:#efd18d;--teal:#377a83}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#192f42;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:var(--ink)}body{position:fixed;inset:0;height:100dvh}button,a,input{font:inherit}button{cursor:pointer;border:0}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #db9943;outline-offset:4px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}#stage{position:absolute;inset:0;overflow:hidden}#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#hitLayer{position:absolute;inset:0;pointer-events:none}.scene-hit{position:absolute;background:transparent;border:0;border-radius:18px;padding:0;min-width:48px;min-height:48px;pointer-events:auto;color:transparent;touch-action:none}.scene-hit:focus-visible{background:#ffe4a533;outline:3px solid #cb9245;outline-offset:0}.hud{position:absolute;inset:0;pointer-events:none;z-index:10}.hud>*{pointer-events:auto}.icon-btn{position:absolute;top:max(12px,env(safe-area-inset-top));width:48px;height:48px;border-radius:15px;background:#fff8eaeF;color:var(--ink);display:grid;place-items:center;text-decoration:none;font-size:23px;box-shadow:0 3px 16px #1d3c4920}.exit{left:max(12px,env(safe-area-inset-left))}#fullscreen{left:calc(max(12px,env(safe-area-inset-left)) + 56px)}#menuButton{right:max(12px,env(safe-area-inset-right))}#helpButton{right:calc(max(12px,env(safe-area-inset-right)) + 56px)}#cue{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100% - 250px);width:max-content;border-radius:16px;background:#213f4deb;color:#fff9e9;padding:12px 18px;font-size:14px;line-height:1.4;text-align:center;margin:0;min-height:48px;display:grid;place-content:center;pointer-events:none}.companion{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(15px,env(safe-area-inset-bottom));width:29%;max-width:320px;padding:12px 15px;background:#fff9eaeF;border-radius:17px 17px 17px 4px;box-shadow:0 6px 24px #213f4925;font-size:14px;line-height:1.5;pointer-events:none}.companion b{display:block;font-size:11px;color:var(--teal);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}#next{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right));background:#234c58;color:#fff8e9;min-height:48px;padding:12px 18px;border-radius:16px;font-weight:700;font-size:14px;box-shadow:0 4px 18px #183e4930}#tools{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:35%;right:125px;display:flex;justify-content:center;gap:7px;align-items:center;min-height:48px}#tools button{min-height:48px;min-width:48px;border-radius:13px;background:#fff9eaeF;padding:10px 13px;box-shadow:0 3px 12px #213f4920;color:var(--ink);font-size:13px;font-weight:700}#tools button.active{background:#efcf8a;box-shadow:inset 0 0 0 2px #ba9146}#tools input[type=range]{width:100%;min-height:48px;accent-color:#377a83;touch-action:none}#tools label{background:#fff9eaeF;border-radius:13px;padding:4px 12px;display:flex;align-items:center;gap:8px;font-size:12px;min-height:48px}.tool-label{white-space:nowrap}body[data-kind=arcoiris].painting #tools{right:max(16px,env(safe-area-inset-right));left:35%;gap:6px}.painting #next{display:none}#palette{position:absolute;right:16px;bottom:76px;z-index:12;background:#fff8e9;border:1px solid #e8d5b0;padding:12px;display:flex;gap:7px;flex-wrap:wrap;max-width:410px;border-radius:19px;box-shadow:0 8px 40px #183c4935}#palette button{min-width:48px;min-height:48px;border-radius:13px;border:2px solid #fff;color:#244450;font-size:20px}#toast{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);background:#fff9eaf2;border-radius:15px;max-width:57%;width:max-content;margin:0;padding:9px 15px;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:0 4px 20px #213f4920}#toast:empty{display:none}dialog{border:1px solid #f6e2b8;border-radius:25px;background:#fff8e9;color:var(--ink);padding:28px;width:min(600px,calc(100vw - 40px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 15px 70px #102d4950}dialog::backdrop{background:#18344388;backdrop-filter:blur(5px)}dialog h2{font-size:25px;letter-spacing:-.03em;line-height:1.15;margin:0 40px 16px 0}dialog p{font-size:15px;line-height:1.7}dialog button{min-height:48px;border-radius:13px;background:#e4eee9;color:var(--ink);padding:10px 16px}dialog .close{position:absolute;right:14px;top:12px;width:48px;background:transparent;font-size:26px;padding:0}dialog .menu-actions{display:grid;gap:9px}dialog .menu-actions button{background:#fff;border:1px solid #e1dbc9;text-align:left}dialog a{color:#326f7d}#intro{width:min(560px,calc(100vw - 40px));padding:30px;background:#fff8e9}#intro .eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#397982;font-weight:800}#intro button.primary,#finish button.primary{background:#234c58;color:#fff8e9;width:100%;font-size:16px;font-weight:700}#finish a{display:inline-flex;align-items:center;min-height:48px;padding:10px 16px;background:#e4eee9;border-radius:13px;text-decoration:none;margin:8px 4px 0 0;font-size:14px}.finish-actions{display:flex;gap:8px;flex-wrap:wrap}#loading{position:absolute;inset:0;background:#203d4e;color:#fff8e9;z-index:40;display:grid;place-content:center;text-align:center;gap:16px;padding:24px}#loading .mark{font-size:50px}#retry{min-height:48px;border-radius:14px;background:#f1d69e;color:#213f4d;padding:12px 20px}#rotate{display:none;position:absolute;inset:0;z-index:100;background:#203d4e;color:#fff8e9;place-content:center;text-align:center;padding:24px}#rotate p{max-width:330px;line-height:1.6}#rotate span{font-size:60px;color:#f1d69e}#rotate a{min-height:48px;color:#f1d69e;display:grid;place-content:center;text-decoration:none}body.is-portrait #rotate{display:grid}body.is-portrait dialog{visibility:hidden}#live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:740px){#cue{max-width:calc(100% - 260px);font-size:12px;padding:8px 11px}.companion{font-size:12px;padding:9px 11px;width:29%;line-height:1.4}.companion b{font-size:10px;margin-bottom:3px}#next{font-size:12px;padding:10px 13px}#tools{gap:5px;left:35%;right:115px}#tools button{font-size:12px;padding:8px 9px}#toast{font-size:11px;max-width:58%}dialog{padding:21px}dialog h2{font-size:22px}dialog p{font-size:14px}.painting #tools button{font-size:19px;width:48px;padding:0}.painting #tools .label{display:none}#palette{max-width:310px;gap:5px;padding:9px}}@media(max-height:380px){.companion{max-height:84px;overflow:hidden}#intro{padding:22px}#intro p{margin:8px 0 14px;font-size:14px}#intro h2{margin-bottom:9px;font-size:24px}#toast{bottom:72px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#tools label{flex:1;min-width:0}#tools input[type=range]{flex:1;min-width:30px;width:100%}.painting .scene-hit{border-radius:0}

.intro-exit{display:flex;justify-content:center;align-items:center;min-height:48px;color:#507580;font-size:13px;text-decoration:none;margin-top:6px}