@font-face{font-family:Fredoka;src:url(/fonts/fredoka-latin-wght-normal.woff2)format("woff2");font-weight:300 700;font-display:swap}:root{--green:#1f4d3a;--green-deep:#143528;--green-soft:#3e6e58;--cream:#f3ebdd;--cream-2:#e6dac4;--paper:#fbf7ef;--wood:#c8925a;--wood-dark:#8a5a30;--ink:#24302a;--ink-2:#55615a;--orange:#ff7928;--orange-deep:#e35d10;--good:#2bb673;--bad:#b23a48;--font:"Chiron Hei HK", "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif;--font-num:"Fredoka", "Baloo 2", var(--font);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body,#root,.app{height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--ink);background:var(--green-deep);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.55}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700}.muted{color:var(--ink-2)}.small{font-size:12px}.stage{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.loading{color:var(--cream);font:700 28px var(--font-num);background:var(--green-deep);place-items:center;display:grid;position:fixed;inset:0}.mock-flag,.fps{right:6px;bottom:calc(6px + var(--safe-b));z-index:50;color:#fff;font:700 11px/1.4 var(--font-num);pointer-events:none;background:#0000008c;border-radius:6px;padding:2px 8px;position:fixed}.fps{left:6px;right:auto}.card{background:var(--cream);box-shadow:0 0 0 3px var(--green), 0 12px 32px #00000059;border-radius:20px}.cta{background:var(--orange);color:#fff;min-height:48px;box-shadow:0 4px 0 var(--orange-deep);border:0;border-radius:999px;padding:12px 22px;font-size:18px;font-weight:900}.cta:active:not(:disabled){box-shadow:0 2px 0 var(--orange-deep);transform:translateY(2px)}.cta.big{min-height:56px;font-size:22px}.chip{background:var(--cream);min-height:34px;color:var(--green);box-shadow:inset 0 0 0 2px var(--green);border:0;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}.chip.big{min-height:56px;padding:10px 22px;font-size:18px}.link{color:var(--green);background:0 0;border:0;padding:8px;font-weight:700;text-decoration:underline}.x{background:var(--cream-2);color:var(--ink);border:0;border-radius:50%;flex:none;width:36px;height:36px;font-size:22px;line-height:1}.err{color:var(--bad);margin:6px 0 0;font-weight:700}.brand{color:var(--cream);filter:drop-shadow(0 2px 6px #00000080);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.brand img{object-fit:contain;width:30px;height:34px}.brand span{font:700 22px/1 var(--font-num);letter-spacing:-.5px}.brand b{color:var(--orange);font-weight:inherit}.mascot-says{align-items:flex-end;gap:8px;display:flex}.mascot-face{object-fit:contain;filter:drop-shadow(0 2px 6px #00000059);flex:none;width:48px;height:54px}.mascot-says.cheer .mascot-face{animation:.9s ease-in-out 2 mascot-hop}.mascot-bubble{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--orange);border-radius:16px;margin:0 0 10px;padding:9px 13px;font-size:14px;font-weight:700;line-height:1.45;position:relative}.mascot-bubble:before{content:"";background:var(--paper);width:12px;height:12px;box-shadow:-2px 2px 0 0 var(--orange);position:absolute;bottom:10px;left:-7px;transform:rotate(45deg)}.bubble-x{background:var(--cream-2);vertical-align:middle;border:0;border-radius:50%;width:24px;height:24px;margin-left:8px;font-size:16px;line-height:1}@keyframes mascot-hop{0%,to{transform:translateY(0)}40%{transform:translateY(-8px)rotate(-4deg)}}@media (prefers-reduced-motion:reduce){.mascot-says.cheer .mascot-face{animation:none}}.cookie-notice{z-index:40;left:50%;top:calc(8px + var(--safe-t));background:var(--cream);width:calc(100% - 20px);max-width:560px;color:var(--ink);box-shadow:0 0 0 2px var(--green);border-radius:12px;align-items:center;gap:8px;padding:8px 10px 8px 14px;font-size:13px;line-height:1.45;display:flex;position:fixed;transform:translate(-50%)}.cookie-notice a{color:var(--green);font-weight:700}.cookie-notice button{min-height:36px;font:700 14px/1 var(--font);background:var(--cream-2);color:var(--ink);border:0;border-radius:999px;flex:none;padding:4px 14px}.cookie-notice button.on{background:var(--green);color:var(--cream)}@media (max-width:640px){.cookie-notice{flex-wrap:wrap;justify-content:flex-end}.cookie-notice span{flex:100%}}.title-screen,.result-screen{touch-action:pan-y;padding:calc(10px + var(--safe-t)) 12px calc(14px + var(--safe-b));flex-direction:column;align-items:center;gap:10px;display:flex;position:fixed;inset:0;overflow-y:auto}.title-top{justify-content:space-between;align-items:center;width:100%;max-width:980px;display:flex}.title-top-r{gap:6px;display:flex}.title-hero{flex-direction:column;align-items:center;gap:2px;margin-top:4vh;display:flex}.logo svg{filter:drop-shadow(0 6px 16px #00000073);width:min(78vw,360px);height:auto;display:block}.title-sub{color:var(--cream);text-align:center;text-shadow:0 2px 6px #000000b3;margin:4px 0 0;font-size:15px;font-weight:700}.title-card{flex-direction:column;gap:10px;width:100%;max-width:420px;margin-top:auto;padding:14px 16px 12px;display:flex}.who{align-items:center;gap:10px;display:flex}.who-dot{width:34px;height:34px;box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--orange);border-radius:50%}.who-name{flex-direction:column;display:flex}.who-name small{color:var(--ink-2);font-size:12px}.who-name b{font-size:20px}.swatches{grid-template-columns:repeat(12,1fr);gap:5px;display:grid}.swatch{aspect-ratio:1;border:0;border-radius:50%;padding:0;box-shadow:inset 0 0 0 2px #00000026}.swatch.on{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--green)}.tops{gap:6px;display:flex}.top{background:var(--paper);min-height:36px;box-shadow:inset 0 0 0 2px var(--cream-2);border:0;border-radius:10px;flex:1;font-size:18px}.top.on{box-shadow:inset 0 0 0 3px var(--green)}.branch-pick{color:var(--green);align-items:center;gap:8px;font-weight:700;display:flex}.branch-pick select{border:2px solid var(--green);background:var(--paper);min-height:38px;color:var(--ink);font:700 15px var(--font);border-radius:10px;flex:1;padding:0 8px}.title-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.seg{align-items:center;gap:4px;display:inline-flex}.seg small{color:var(--ink-2);margin-right:2px}.seg button{background:var(--paper);min-width:38px;min-height:34px;box-shadow:inset 0 0 0 2px var(--cream-2);border:0;border-radius:10px;font-weight:800}.seg button.on{background:var(--green);color:var(--cream);box-shadow:none}.music-toggle{color:var(--green);align-items:center;gap:6px;font-weight:700;display:flex}.music-toggle input{width:18px;height:18px;accent-color:var(--green)}.sign-in{color:var(--green);text-align:center;font-weight:800}.signed-in{text-align:center;color:var(--green);margin:0;font-weight:700}.board h3{color:var(--green);margin:0 0 4px;font-size:15px}.board ol{margin:0;padding-left:22px;font-size:14px}.board li{justify-content:space-between;gap:8px;padding:1px 0;display:flex}.board li.me{color:var(--orange-deep);font-weight:800}.board p{margin:2px 0;font-size:13px}.ai-note{color:var(--ink-2);text-align:center;margin:0;font-size:12px}.title-tip{width:100%;max-width:420px}.title-tabs{gap:6px;display:flex}.title-tabs .chip{flex:1;min-height:32px;padding:4px 10px;font-size:13px}.title-tabs .chip.on{background:var(--green);color:var(--cream)}.title-more{flex-direction:column;gap:8px;display:none}.title-more.open{display:flex}@media (orientation:portrait){.title-screen{gap:8px}.title-hero{margin-top:auto}.title-screen .title-card{margin-top:0}.title-hero .logo{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.title-sub{margin-top:0;font-size:13px}.title-card{gap:8px;padding:12px 14px 10px}.title-card .who-dot{width:28px;height:28px}.title-card .who-name b{font-size:17px}.title-card .top{min-height:32px;font-size:16px}.title-card .branch-pick select{min-height:34px}.title-card .cta.big{min-height:48px}.title-tip .mascot-bubble{font-size:13px}}.hud{pointer-events:none;position:fixed;inset:0}.hud button,.hud .notes,.hud .panel,.hud .joy-zone,.hud .emote-pick{pointer-events:auto}.hud-top{top:calc(8px + var(--safe-t));justify-content:space-between;align-items:flex-start;gap:6px;display:flex;position:absolute;left:8px;right:8px}.timer{background:var(--green);color:var(--cream);border-radius:14px;flex-direction:column;padding:4px 12px;display:flex;box-shadow:0 3px 10px #0000004d}.timer b{font-size:28px;line-height:1.1}.timer .pen{color:#ffb3a8;font-size:12px;font-weight:700}.zone-pill,.branch-pill{background:var(--cream);color:var(--green);box-shadow:0 0 0 2px var(--green), 0 3px 10px #00000040;white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:15px;font-weight:900}.branch-pill{border-radius:12px;flex-direction:column;align-items:flex-end;padding:4px 10px;font-size:13px;display:flex}.branch-pill small{color:var(--ink-2);font-weight:700}.progress{top:calc(64px + var(--safe-t));height:8px;box-shadow:0 0 0 2px var(--green);background:#f3ebdd99;border-radius:99px;position:absolute;left:12px;right:12px}.progress i{background:var(--green);border-radius:99px;transition:width .3s;position:absolute;inset:0 auto 0 0}.progress-you{background:var(--orange);width:14px;height:14px;box-shadow:0 0 0 2px var(--paper);border-radius:50%;margin:-7px 0 0 -7px;transition:left .3s;position:absolute;top:50%}.start-pill{top:calc(84px + var(--safe-t));color:var(--cream);white-space:nowrap;background:#143528d9;border-radius:16px;flex-direction:column;align-items:center;padding:4px 14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.start-pill small{font-size:13px;font-weight:700}.start-pill b{font-size:17px;font-weight:900;line-height:1.25}.start-pill.with-heat{background:var(--cream);color:var(--green);box-shadow:0 0 0 3px var(--green)}.start-pill.big b{font-size:32px;line-height:1.1}.toasts{top:calc(150px + var(--safe-t));flex-direction:column;align-items:center;gap:6px;width:min(92vw,440px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.toast{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--green), 0 4px 12px #00000040;text-align:center;border-radius:12px;padding:7px 14px;font-size:15px;font-weight:800;animation:.25s ease-out toast-in}.toast.good{background:var(--green);color:var(--cream)}.toast.bad{box-shadow:0 0 0 2px var(--bad), 0 4px 12px #00000040;color:var(--bad)}.toast.finish{background:var(--cream)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}.side-buttons{right:8px;top:calc(92px + var(--safe-t));flex-direction:column;gap:8px;display:flex;position:absolute}.hud-btn{background:var(--cream);min-width:76px;min-height:48px;color:var(--green);box-shadow:0 0 0 2px var(--green), 0 3px 10px #00000040;border:0;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;padding:4px 10px;font-size:14px;font-weight:900;display:flex}.hud-btn.cam-btn{opacity:.85;border-radius:99px;align-self:flex-end;min-width:0;min-height:34px;padding:2px 9px;font-size:12px}.hud-btn small{color:var(--bad);font-size:11px;font-weight:800}.emote-pick{right:92px;top:calc(150px + var(--safe-t));background:var(--cream);box-shadow:0 0 0 2px var(--green);border-radius:14px;grid-template-columns:repeat(2,auto);gap:6px;padding:8px;display:grid;position:absolute}.emote-pick button{background:var(--paper);min-height:40px;box-shadow:inset 0 0 0 2px var(--cream-2);border:0;border-radius:10px;padding:4px 10px;font-size:15px;font-weight:800}.look-zone{pointer-events:auto;touch-action:none;position:absolute;inset:0}.joy-zone{touch-action:none;width:55%;height:46%;position:absolute;bottom:0;left:0}.joy-base{pointer-events:none;background:#f3ebdd59;border-radius:50%;place-items:center;display:grid;position:fixed;box-shadow:inset 0 0 0 3px #1f4d3a99}.joy-knob{background:var(--cream);width:52px;height:52px;box-shadow:0 0 0 3px var(--green), 0 3px 8px #0000004d;border-radius:50%}.interact{right:16px;bottom:calc(26px + var(--safe-b));border-radius:24px;flex-direction:column;justify-content:center;align-items:center;min-width:120px;min-height:72px;font-size:20px;display:flex;position:absolute}.interact small{font-size:12px;font-weight:700}.subtitle{left:50%;bottom:calc(110px + var(--safe-b));width:min(92vw,640px);color:var(--cream);text-align:center;background:#143528e0;border-radius:12px;padding:8px 14px;font-size:15px;font-weight:700;line-height:1.5;position:absolute;transform:translate(-50%)}.tip{left:10px;right:100px;top:calc(150px + var(--safe-t));pointer-events:none;max-width:420px;position:absolute}.tip button{pointer-events:auto}@media (orientation:portrait){.tip{top:auto;right:10px;bottom:calc(24px + var(--safe-b))}}.conn{background:var(--cream);box-shadow:0 0 0 3px var(--green);pointer-events:auto;border-radius:14px;align-items:center;gap:8px;padding:10px 16px;font-weight:800;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%)}.skip-fly{background:0 0;border:0;position:fixed;inset:0}.notes{right:92px;top:calc(150px + var(--safe-t));background:var(--paper);width:min(64vw,280px);box-shadow:0 0 0 2px var(--wood), 0 8px 18px #0000004d;border-radius:6px;padding:8px 10px 10px;position:absolute;transform:rotate(-1.2deg)}.notes-tools{align-items:center;gap:8px;display:flex}.notes-tools .x{width:30px;height:30px;margin-left:auto}.icon-pencil{width:56px}.icon-tape{width:84px}.slip{background:repeating-linear-gradient(#fbf7ef 0 23px,#e6dac4 23px 24px);margin-top:6px;padding:6px 8px}.hand{font-family:"Chiron Hei HK", var(--font);color:#4a4f4c;margin:0;padding:0;font-size:15px;line-height:24px;list-style:none}.hand b{color:var(--ink);font-size:17px}.hand .aisle{color:var(--ink);font-size:18px;font-weight:800;transform:rotate(-2deg)}.panel{left:50%;bottom:calc(8px + var(--safe-b));background:var(--cream);width:min(96vw,520px);max-height:78vh;box-shadow:0 0 0 3px var(--green), 0 12px 32px #0006;border-radius:20px;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px 14px;display:flex;position:absolute;overflow-y:auto;transform:translate(-50%)}.panel header{align-items:center;gap:8px;display:flex}.panel h2{color:var(--green);flex:1;margin:0;font-size:18px}.panel-icon{font-size:22px}.panel-help{color:var(--ink-2);margin:0;font-size:13px}.panel-help.good{color:var(--green);font-size:16px;font-weight:800}.panel-msg{text-align:center;min-height:20px;font-weight:800}.panel-msg .bad{color:var(--bad)}.panel-msg .good{color:var(--green)}.panel>.cta{align-self:center;min-width:160px}.wheels{justify-content:center;gap:10px;display:flex}.wheel{background:var(--green);border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:6px;display:flex}.wheel.focus{box-shadow:0 0 0 3px var(--orange)}.wheel-icon{font-size:22px}.wheel button{background:var(--cream);width:54px;height:40px;color:var(--green);border:0;border-radius:10px;font-size:18px}.wheel b{background:var(--paper);width:54px;height:54px;color:var(--ink);border-radius:10px;place-items:center;font-size:36px;display:grid}.mini-notes{flex-wrap:wrap;justify-content:center;gap:10px;font-size:15px;font-weight:800;display:flex}.mini-notes small{color:var(--ink-2);text-align:center;width:100%;font-weight:700}.manual{box-shadow:inset 0 0 0 2px var(--cream-2);background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:8px;display:flex}.manual-steps{gap:6px;display:flex}.manual-steps span{width:24px;height:24px;font:700 13px var(--font-num);background:var(--cream-2);border-radius:50%;place-items:center;display:grid}.manual-steps .done{background:var(--green);color:var(--cream)}.manual-steps .now{box-shadow:0 0 0 2px var(--green)}.manual-page{align-items:center;gap:8px;display:flex}.manual-n{font-size:28px}.manual-x{font:700 22px var(--font-num)}.part .hole,.part.solid .hole{fill:#fff}.part .thread,.part .slot{fill:none}.part.solid .thread,.part.solid .slot{stroke:#fff}.part-options{justify-content:center;gap:8px;display:flex}.part-options button{background:var(--paper);box-shadow:inset 0 0 0 2px var(--cream-2);border:0;border-radius:14px;padding:8px}.part-options button:active:not(:disabled){box-shadow:inset 0 0 0 3px var(--green)}.kiosk-screen{background:var(--green);color:var(--cream);text-align:center;border-radius:12px;padding:8px 12px}.kiosk-say{margin:0;font-size:14px;font-weight:700}.kiosk-target{margin:2px 0 0;font-size:26px}.kiosk-items{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.kiosk-item{background:var(--paper);min-height:52px;box-shadow:inset 0 0 0 2px var(--cream-2);border:0;border-radius:12px;justify-content:space-between;align-items:center;padding:6px 10px;font-weight:800;display:flex}.kiosk-item.on{background:var(--green);color:var(--cream)}.kiosk-item.hinted{box-shadow:inset 0 0 0 3px var(--wood)}.kiosk-bag{text-align:center;margin:0;font-size:20px}.result{text-align:center;flex-direction:column;gap:8px;width:100%;max-width:420px;margin-top:auto;margin-bottom:auto;padding:16px;display:flex}.result h1{color:var(--green);margin:0;font-size:22px}.result-time{color:var(--ink);margin:0;font-size:64px;line-height:1}.result-pct{color:var(--green);margin:0;font-size:18px;font-weight:900}.result-heat{margin:0;font-weight:800}.result-stats{justify-content:center;gap:18px;margin:4px 0;display:flex}.result-stats dt{color:var(--ink-2);font-size:12px}.result-stats dd{margin:0;font-weight:800}.result .board,.result .mascot-says{text-align:left}.result-actions{justify-content:center;gap:10px;display:flex}.result-actions>*{flex:1}.modal-back{z-index:30;background:#0a191299;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.about{flex-direction:column;gap:8px;max-width:420px;padding:18px;display:flex}.about h2{color:var(--green);margin:0}.about p{margin:0;line-height:1.6}@media (min-width:900px) and (min-height:600px){.title-screen{align-items:flex-start;padding-left:5vw}.title-hero{width:420px;margin-top:0}.logo svg{width:300px}.title-card{margin-top:0}.title-tabs{display:none}.title-more{display:flex}.title-tip{width:360px;position:fixed;bottom:24px;right:24px}}@media (orientation:landscape) and (max-height:500px){.title-hero{margin-top:0}.logo svg{width:220px}.joy-zone{width:45%;height:70%}.side-buttons{top:calc(78px + var(--safe-t))}.tip{top:calc(90px + var(--safe-t))}}