:root{--ink:#3b2a22;--cream:#fff6e6;--coral:#ff6f4f;--teal:#1f9c93}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#e9cfa6;font-family:ui-rounded,SF Pro Rounded,Nunito,Varela Round,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}canvas#c{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;outline:none}.card{background:#fff6e6e6;border-radius:18px;box-shadow:0 3px #5a371e40,0 10px 24px #5a371e2e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:10px}.title{padding:10px 16px}.title h1{margin:0;font-size:26px;letter-spacing:.06em;font-weight:900;line-height:1;color:var(--coral);text-shadow:0 2px 0 #b8472f}.title h1 span{color:var(--teal);text-shadow:0 2px 0 #12615b;margin-left:.18em}.title p{margin:5px 0 0;font-size:13px;font-weight:700;opacity:.75}.counter{padding:8px 14px;display:flex;align-items:baseline;gap:3px;font-weight:900;font-variant-numeric:tabular-nums}.counter b{font-size:28px;color:var(--coral)}.counter i{font-style:normal;opacity:.4;font-size:20px}.counter span{font-size:18px;opacity:.7}.counter small{font-size:11px;font-weight:800;opacity:.55;margin-left:6px;text-transform:uppercase;letter-spacing:.06em}.counter.bump b{animation:bump .25s ease-out;display:inline-block}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}#bar{position:fixed;left:50%;transform:translate(-50%);bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;width:min(560px,calc(100% - 20px))}.slider{display:flex;align-items:center;gap:10px;flex:1;font-weight:800;font-size:14px;min-width:0}.slider input{flex:1;min-width:60px;accent-color:var(--coral);height:28px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:6px;background:linear-gradient(#e4cba4,#f1dfc2);box-shadow:inset 0 2px 2px #5a371e40}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-8px;background:radial-gradient(circle at 35% 30%,#ffb199,var(--coral) 60%,#c94b31);box-shadow:0 2px #9c3a25,0 3px 6px #00000040;border:none}input[type=range]::-moz-range-track{height:10px;border-radius:6px;background:#ead5b2}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--coral);border:none;box-shadow:0 2px #9c3a25}.btn{font:inherit;font-weight:900;border:none;border-radius:14px;padding:10px 14px;cursor:pointer;color:var(--ink);background:#f1dfc2;box-shadow:0 3px #c9a77a;transition:transform .08s,box-shadow .08s,opacity .2s;white-space:nowrap}.btn:active{transform:translateY(3px);box-shadow:0 0 #c9a77a}.btn.primary{background:var(--teal);color:#fff;box-shadow:0 3px #12615b}.btn.primary:active{box-shadow:0 0 #12615b}.btn.icon{width:42px;padding:10px 0;font-size:18px}.btn.icon.on{background:#ffd166;box-shadow:0 3px #c9982f}.btn:disabled{opacity:.45;cursor:default}#tip{position:fixed;pointer-events:none;padding:7px 11px;border-radius:12px;background:var(--ink);color:#fff6e6;font-size:13px;font-weight:800;white-space:nowrap;transform:translate(-50%,calc(-100% - 16px));opacity:0;transition:opacity .15s;z-index:5}#tip.show{opacity:1}#tip.locked{background:#c94b31}#tip:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:inherit}#tip.locked:after{border-top-color:#c94b31}#tip:after{border-top-color:var(--ink)}#toast{position:fixed;left:50%;top:22%;transform:translate(-50%,-10px) scale(.9);padding:12px 20px;border-radius:16px;background:var(--cream);font-weight:900;font-size:18px;box-shadow:0 4px #5a371e40,0 12px 30px #5a371e40;opacity:0;transition:all .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}#toast.show{opacity:1;transform:translate(-50%) scale(1)}@media(max-width:520px){.title h1{font-size:21px}.title p{font-size:12px}.title{padding:8px 12px}.counter b{font-size:22px}.counter small{display:none}#bar{gap:6px;padding:6px 6px 6px 12px}.slider span{display:none}.btn{padding:10px 11px}.btn.icon{width:38px}}