:root{--bg: #f9f5e3;--panel: #fffdf4;--panel-edge: #4122341f;--ink: #412234;--ink-dim: #41223473;--accent: #8f52f7;--accent-soft: #8f52f71f;--pink: #eea9d7;--green: #ccf5ac;--alarm: #eea9d7;--btn: #f2ecd8;--font-display: "Shantell Sans", "Comic Sans MS", system-ui, sans-serif;--font-label: "Shantell Sans", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-label);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{background-image:radial-gradient(600px at 88% -8%,#8f52f714,transparent 70%),radial-gradient(700px at -8% 108%,#ccf5ac4d,transparent 70%),radial-gradient(#4122340f 1.2px,transparent 1.2px);background-size:auto,auto,26px 26px}#board{position:fixed;inset:0;display:grid;gap:clamp(6px,1vmin,14px);padding:clamp(6px,1vmin,14px);padding-bottom:calc(clamp(6px,1vmin,14px) + env(safe-area-inset-bottom))}.card{container-type:size;position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:clamp(12px,2vmin,22px);background:var(--panel);border:1.5px solid var(--panel-edge);box-shadow:0 2px #4122341a,0 8px 28px #41223414}.face{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqh;border:none;background:transparent;color:inherit;cursor:pointer;font-family:inherit}.time{font-family:var(--font-display);font-weight:800;font-size:min(30cqw,50cqh);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink-dim);transition:color .2s}.sub{font-family:var(--font-display);font-weight:700;font-size:min(7cqw,10cqh);font-variant-numeric:tabular-nums;color:var(--ink-dim);line-height:1}.sub:empty{display:none}.hint{font-weight:500;font-size:min(3.2cqw,5.5cqh);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);opacity:.8}.alias{position:absolute;top:clamp(8px,3.5cqh,16px);left:50%;transform:translate(-50%);z-index:2;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;border-radius:999px;background:#4122340d;color:var(--ink-dim);font-family:var(--font-display);font-weight:700;font-size:min(4cqw,6.5cqh);line-height:1;padding:clamp(4px,1.5cqh,8px) clamp(10px,3cqw,18px);cursor:pointer}.alias.alias-empty{opacity:.35}.alias:active{background:var(--accent-soft);color:var(--accent)}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-edge);border-top:1px solid var(--panel-edge);height:clamp(56px,22cqh,110px);flex-shrink:0}.preset{border:none;background:var(--btn);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:min(clamp(18px,8cqh,36px),5cqw);cursor:pointer;transition:background .1s;min-width:0;padding:0 2px;overflow:hidden}.preset:active{background:var(--accent);color:#fff}.progress{position:absolute;left:0;right:0;top:0;height:clamp(4px,1.2cqh,8px);pointer-events:none}.progress-fill{height:100%;width:0%;background:var(--accent);box-shadow:0 0 12px #8f52f766}.card[data-state=running] .time{color:var(--accent)}.card[data-state=running] .hint{opacity:.4}.card[data-state=running]{border-color:#8f52f766;background:linear-gradient(180deg,#f6f0ff,var(--panel))}.card[data-state=finished]{border-color:var(--pink);animation:alarm-flash .6s steps(2,jump-none) infinite}.card[data-state=finished]:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#eea9d74d 0 24px,transparent 24px 48px);animation:hazard-slide 1.2s linear infinite;pointer-events:none}.card[data-state=finished] .time{color:var(--ink)}.card[data-state=finished] .hint{visibility:visible}.card[data-state=finished] .progress-fill{background:var(--pink);width:100%!important}@keyframes alarm-flash{0%{background:#fbdff0}to{background:var(--panel)}}@keyframes hazard-slide{to{background-position:68px 0}}#settings-btn{position:fixed;left:clamp(8px,1.5vmin,18px);top:calc(clamp(8px,1.5vmin,18px) + env(safe-area-inset-top));width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--panel-edge);background:#fffdf4d9;color:var(--ink-dim);backdrop-filter:blur(8px);cursor:pointer;opacity:.55;transition:opacity .2s;z-index:10}#settings-btn:hover,#settings-btn:active{opacity:1;color:var(--ink)}#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#41223466;backdrop-filter:blur(6px);z-index:20}#modal[hidden]{display:none}.modal-wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;max-width:100%;max-height:100%}.modal-panel{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:clamp(20px,4vmin,32px);border-radius:20px;background:var(--panel);border:1.5px solid var(--panel-edge);box-shadow:0 2px #4122341a,0 16px 48px #41223440}.modal-panel h2{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--accent);margin-bottom:18px}.counter{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.counter-fs{margin-left:auto}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:stretch;border:1.5px solid var(--panel-edge);border-radius:12px;overflow:hidden;background:var(--btn)}.chip-main{border:none;background:transparent;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:18px;padding:10px 12px;cursor:pointer;white-space:nowrap}.chip-del{border:none;border-left:1.5px solid var(--panel-edge);background:transparent;color:var(--ink-dim);font-size:16px;padding:0 10px;cursor:pointer}.chip-del:active{background:var(--pink);color:var(--ink)}.chip.chip-default{border-color:var(--accent);background:#f3ecff}.chip.chip-default .chip-main{color:var(--accent)}.chip-add{border:1.5px dashed #41223447;border-radius:12px;background:transparent;color:var(--ink-dim);font-family:var(--font-display);font-weight:700;font-size:18px;padding:10px 16px;cursor:pointer}.chip-add:active{border-color:var(--accent);color:var(--accent)}.mini-keypad{padding:14px;border-radius:20px;background:var(--panel);border:1.5px solid var(--panel-edge);box-shadow:0 2px #4122341a,0 16px 48px #41223440}.mini-keypad[hidden]{display:none}.mk-display{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--accent);text-align:center;background:#fff;border:1.5px solid var(--panel-edge);border-radius:10px;padding:6px 10px;margin-bottom:10px;font-variant-numeric:tabular-nums}.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mk-ok{background:var(--accent);border-color:var(--accent);color:#fff;font-size:clamp(15px,3.5vmin,22px)}.counter-btn{width:52px;height:52px;border-radius:14px;border:1.5px solid var(--panel-edge);background:var(--btn);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;cursor:pointer}.counter-btn:active{background:var(--accent);color:#fff}.counter-num{min-width:40px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--ink)}.field{display:block;margin-bottom:16px}.field-label{display:block;font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--ink-dim);margin-bottom:6px}.field-label small{opacity:.85;font-size:11px}.field input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--panel-edge);background:#fff;color:var(--ink);font-family:var(--font-label);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;outline:none}.field input:focus{border-color:var(--accent)}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.modal-btn{padding:12px 22px;border-radius:12px;border:1.5px solid var(--panel-edge);background:var(--btn);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:18px;cursor:pointer}.modal-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.modal-btn:active{filter:brightness(1.1)}#keypad-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#41223466;backdrop-filter:blur(6px);z-index:20}#keypad-modal[hidden]{display:none}.keypad-panel{display:grid;grid-template-columns:1fr auto;grid-template-areas:"display keypad" "actions actions";gap:18px;width:min(560px,100%)}.kp-display{grid-area:display;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:14px;border:1.5px solid var(--panel-edge);background:#fff;padding:12px;min-width:0;overflow:hidden}#kp-entry{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,9vmin,64px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}#kp-total{font-family:var(--font-display);font-weight:700;font-size:clamp(16px,4vmin,24px);color:var(--ink-dim);font-variant-numeric:tabular-nums}#kp-total:empty{display:none}.kp-grid{grid-area:keypad;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kp-key{width:clamp(56px,9vmin,76px);height:clamp(48px,8vmin,64px);border-radius:12px;border:1.5px solid var(--panel-edge);background:var(--btn);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:clamp(20px,4.5vmin,30px);line-height:1;cursor:pointer}.kp-key:active{background:var(--accent);color:#fff}.kp-alt{background:#fff;color:var(--accent);font-size:clamp(15px,3.5vmin,22px)}.kp-actions{grid-area:actions;display:flex;gap:10px;justify-content:flex-end}#alias-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#41223466;backdrop-filter:blur(6px);z-index:20}#alias-modal[hidden]{display:none}.alias-panel{width:min(420px,100%)}#alias-input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--panel-edge);background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:20px;outline:none;-webkit-user-select:text;user-select:text}#alias-input:focus{border-color:var(--accent)}@media(max-width:480px){.keypad-panel{grid-template-columns:1fr;grid-template-areas:"display" "keypad" "actions";justify-items:center}}