*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#263c35;background:#c9cec3;transition:background .6s,color .6s}button,a{-webkit-tap-highlight-color:transparent}button{min-height:44px;border:1px solid #304d3933;border-radius:10px;padding:10px 14px;background:#f7f4eaa6;color:inherit;font:600 13px system-ui;cursor:pointer}button:hover:enabled{background:#faf6e9}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #93621e;outline-offset:3px}header{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 32px;z-index:2}.back{color:inherit;text-decoration:none;font-size:13px}.brand{text-align:center;font-size:20px;font-weight:850;letter-spacing:.21em}.brand span{color:#886033}.brand small{font-size:9px;font-weight:600;letter-spacing:.23em;display:block;margin-top:5px}#scene{position:absolute;top:90px;left:0;right:350px;bottom:55px}canvas{display:block;touch-action:none}#hud{position:fixed;right:32px;top:50%;transform:translateY(-45%);width:290px}.eyebrow{font-size:9px;font-weight:750;letter-spacing:.14em;color:#5f715c}h1{font-family:Georgia,serif;font-weight:400;font-size:36px;line-height:1.12;letter-spacing:-.035em;margin:17px 0}#status{font-size:14px;line-height:1.65;min-height:70px;color:#4b6054}#progress{font-size:10px;font-weight:750;letter-spacing:.12em;margin:24px 0 12px;color:#78603b}.actions{display:grid;gap:10px}.actions button{text-align:left;background:#315846;color:#f8f1df;border:0;padding:15px 17px}.actions button:hover:enabled{background:#244735}.actions button:disabled{background:#64776b}.tools{display:flex;gap:6px;margin-top:17px}.tools button{font-size:11px;padding:8px 10px}.tools button[aria-pressed=true]{border-color:#486d4e;background:#dde6d4}.note{font:italic 15px/1.65 Georgia,serif;color:#5f715c;margin-top:30px}.complete #progress{color:#315846}#camera-tools{position:absolute;bottom:28px;left:calc((100% - 350px)/2);transform:translateX(-50%);display:flex;gap:6px}#camera-tools button{width:44px;font-size:20px;padding:5px}#hint{position:absolute;bottom:9px;left:20px;font-size:8px;letter-spacing:.1em;color:#4d6658}#loading{position:fixed;inset:0;z-index:10;display:grid;place-items:center;text-align:center;background:#c9cec3;transition:opacity .5s}#loading.hidden{opacity:0;pointer-events:none}.loading-mark{font:italic 56px Georgia,serif}#loading-text{font-size:14px}.night{background:#182c3b;color:#e6e5d5}.night .brand span{color:#e3b67b}.night #status,.night .eyebrow,.night .note,.night #hint{color:#c0c9c4}.night button{background:#263e49;color:#f1e6cf;border-color:#78908588}.night button:hover:enabled{background:#3a535b}.night .tools button[aria-pressed=true]{background:#42605a}.night #progress{color:#e7bd82}
@media(max-width:760px){header{padding:14px 16px;height:72px}.brand{font-size:16px}.brand small{font-size:8px}.back{font-size:11px}header button{font-size:11px;padding:8px}#scene{top:72px;right:0;bottom:267px}#hud{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;height:244px;padding:16px 20px max(14px,env(safe-area-inset-bottom));background:#ececdfed;border-radius:22px 22px 0 0}.eyebrow,.note{display:none}h1{font-size:24px;margin:0 0 7px}h1 br{display:none}#status{font-size:12px;line-height:1.5;min-height:36px;margin:0 0 9px}#progress{font-size:9px;margin:4px 0 9px}.actions{grid-template-columns:1fr 1fr;gap:8px}.actions button{font-size:11px;padding:12px 9px;text-align:center}.tools{margin-top:10px;justify-content:center}.tools button{font-size:11px}#camera-tools{left:auto;right:12px;bottom:252px;transform:none}#camera-tools button{min-height:36px;height:36px;width:38px}#hint{display:none}.night #hud{background:#1a303bed}}
@media(max-height:540px) and (min-width:600px){header{height:58px;padding:8px 18px}.brand{font-size:15px}#scene{top:58px;right:290px;bottom:32px}#hud{left:auto;right:16px;top:68px;bottom:auto;transform:none;width:255px;height:auto;padding:0;background:none}h1{font-size:25px;margin:0 0 8px}h1 br{display:none}#status{font-size:12px;min-height:50px;margin:0}.eyebrow,.note{display:none}#progress{margin:9px 0}.actions{display:grid;grid-template-columns:1fr;gap:6px}.actions button{padding:10px;min-height:40px}.tools{margin-top:8px}#camera-tools{left:calc((100% - 290px)/2);right:auto;bottom:6px;transform:translateX(-50%)}#hint{display:none}.night #hud{background:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* A warm studio horizon keeps the silhouette clear while giving the miniature depth. */
body{background:radial-gradient(ellipse at 36% 35%,#e2dfca 0%,#c6ceba 48%,#a4b8a5 100%)}
body.night{background:radial-gradient(ellipse at 37% 39%,#314958 0%,#192d3a 58%,#10222e 100%)}