:root{--ink:#5a3e2b;--ink-soft:#8a6a52;--cream:#fff8ef;--glass:#fff9f1bd;--glass-edge:#ffffffb3;--orange:#ef9a52;--orange-deep:#d4783d;--coral:#ff6a55;--sage:#a9bb98;--shadow:0 10px 30px #6e462424, 0 2px 6px #6e462414;--ease:cubic-bezier(.22, 1, .36, 1);color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f6e2cc;font-family:ui-rounded,SF Pro Rounded,PingFang SC,HarmonyOS Sans SC,Hiragino Maru Gothic ProN,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app,#stage{width:100%;height:100%;min-height:100dvh;margin:0}body{background:#f3d7bc;overflow:hidden}#app{z-index:2;pointer-events:none;position:fixed;inset:0}#stage{position:fixed;inset:0}#stage canvas{touch-action:none;width:100%;height:100%;display:block}html[data-laser=on] #stage canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='10' fill='none' stroke='%23ff6a55' stroke-opacity='.55' stroke-width='1.5' stroke-dasharray='3 3'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='%23ff4a3d'/%3E%3Ccircle cx='14' cy='14' r='1.4' fill='%23fff2ea'/%3E%3C/svg%3E") 14 14,crosshair}h1,p{margin:0}.hud{z-index:2;pointer-events:none;padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0}.vignette{z-index:-1;background:radial-gradient(120% 90% at 50% 45%,#0000 58%,#5c381c29 100%),linear-gradient(#ffecd61a,#0000 30%);position:fixed;inset:0}.card{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px)saturate(1.3);backdrop-filter:blur(16px)saturate(1.3)}.top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.lead{justify-items:start;gap:8px;display:grid}.brand{border-radius:20px;align-items:center;gap:10px;padding:9px 16px 9px 10px;display:flex}.mark{filter:drop-shadow(0 2px 3px #c8652a40);flex:none;width:38px;height:38px}.needs{pointer-events:auto;border-radius:18px;gap:7px;padding:11px 15px 12px 13px;display:grid}.need-row{color:var(--ink-soft);letter-spacing:.1em;grid-template-columns:4.4em 1fr;align-items:center;gap:10px;font-size:12.5px;display:grid}.need-label{white-space:nowrap;align-items:center;gap:4px;display:inline-flex}.need-icon{flex:none;width:18px;height:12px}.track{background:#8a6a5224;border-radius:99px;width:108px;height:7px;overflow:hidden;box-shadow:inset 0 1px 1.5px #6a432829}.fill{transform-origin:0;width:100%;height:100%;transition:transform .4s var(--ease);will-change:transform;background:linear-gradient(90deg,#c9d8b4,#8faf8a);transform:scaleX(.5)}.fill.low{background:linear-gradient(90deg,#f9d3bb,#f4b393)}h1{letter-spacing:.14em;color:#6a4328;font-family:Iowan Old Style,Palatino Linotype,Palatino,Songti SC,Noto Serif SC,serif;font-size:22px;font-weight:700;line-height:1.1}.brand p{letter-spacing:.04em;color:var(--ink-soft);margin-top:3px;font-size:12.5px}.status{color:#6a4328;border-radius:999px;align-items:center;gap:9px;max-width:min(300px,58vw);padding:9px 15px 9px 12px;font-size:14px;line-height:1.3;display:flex}.status .dot{background:var(--orange);border-radius:50%;flex:none;width:8px;height:8px;animation:2.6s ease-in-out infinite breathe;box-shadow:0 0 #ef9a528c}.status.is-error .dot{background:#d9786a;animation:none}.status-text{animation:rise .5s var(--ease)}.veil{z-index:3;color:#7a573c;letter-spacing:.12em;transition:opacity .9s var(--ease), visibility 0s linear .9s;background:radial-gradient(70% 60% at 50% 42%,#fff6ea 0%,#f8e6d1 55%,#f1d6ba 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;font-size:15px;display:flex;position:fixed;inset:0}.veil.is-gone{opacity:0;visibility:hidden}.paws{gap:14px;display:flex;transform:rotate(-8deg)}.paws svg{width:26px;height:26px;fill:var(--orange);opacity:0;animation:pad 1.8s var(--ease) infinite;animation-delay:calc(var(--i) * .22s)}.paws svg:nth-child(2n){transform:translateY(10px)rotate(8deg)}.error{color:#7b3f30;background:#faded2e6;border-radius:18px;align-self:center;margin-top:16vh;padding:14px 20px;font-size:15px}.tip{left:var(--tip-x,-100px);top:var(--tip-y,-100px);color:#fff6ec;letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .18s ease, transform .25s var(--ease);background:#5a3e2bd1;border-radius:999px;padding:6px 12px;font-size:13px;position:fixed;transform:translate(16px,-140%)scale(.92);box-shadow:0 6px 16px #3c241438}.tip.is-on{opacity:1;transform:translate(16px,-150%)scale(1)}.dock{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.laser-wrap{align-items:center;gap:10px;display:flex}button{color:#6a4328;min-width:44px;min-height:44px;font:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;font-size:15px}button:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px}.laser,.qualities{pointer-events:auto}.laser{letter-spacing:.06em;transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);border-radius:999px;align-items:center;gap:9px;padding:10px 18px 10px 14px;display:inline-flex}.laser:active{transform:scale(.96)}.laser .beam{background:var(--coral);width:10px;height:10px;transition:box-shadow .3s var(--ease);border-radius:50%;box-shadow:0 0 0 3px #ff6a552e}.laser.on{color:#fff8f2;background:linear-gradient(135deg,#ff8a6b,#f2665a);border-color:#ffc8bab3}.laser.on .beam{background:#fff4ee;animation:1.4s ease-in-out infinite blink;box-shadow:0 0 0 3px #ffffff47,0 0 12px 3px #fff0e6d9}.hint{color:#fff3e8;letter-spacing:.04em;opacity:0;transition:opacity .3s ease, transform .4s var(--ease);background:#5a3e2bb8;border-radius:999px;padding:7px 12px;font-size:13px;transform:translate(-6px)}.hint.is-on{opacity:1;transform:none}.qualities{--pad:4px;padding:var(--pad);border-radius:999px;grid-template-columns:repeat(3,1fr);display:grid;position:relative}.qualities:before{content:"";top:var(--pad);bottom:var(--pad);left:var(--pad);width:calc((100% - var(--pad) * 2) / 3);background:linear-gradient(135deg, #f6ab68, var(--orange-deep));transform:translateX(calc(var(--i,1) * 100%));transition:transform .45s var(--ease);border-radius:999px;position:absolute;box-shadow:0 4px 12px #d4783d59}.qualities button{letter-spacing:.08em;min-width:62px;transition:color .3s var(--ease);background:0 0;border-radius:999px;padding:8px 14px;position:relative}.qualities button.on{color:#fff8f2}.hud.is-loading .top,.hud.is-loading .dock{opacity:0}.top,.dock{transition:opacity .8s var(--ease) .2s}@keyframes breathe{0%,to{box-shadow:0 0 #ef9a5280}50%{box-shadow:0 0 0 6px #ef9a5200}}@keyframes rise{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes pad{0%{opacity:0;scale:.6}25%{opacity:1;scale:1}70%{opacity:1}to{opacity:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:.55}}@media (width<=720px) and (orientation:landscape){.brand p{display:none}.mark{width:30px;height:30px}h1{font-size:19px}}@media (width<=520px) and (orientation:portrait){.top{flex-direction:column;align-items:stretch}.brand{align-self:flex-start}.needs{width:min(240px,100%)}.track{width:100%}.status{max-width:none}.dock{flex-direction:column;align-items:stretch}.laser-wrap{justify-content:space-between}.qualities button{min-width:0}}@media (prefers-reduced-motion:reduce){*,:before{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
