:root{--bg-top:#1a1d2b;--bg-bottom:#0b0c12;--accent:#4ea0ff;--text:#eef2ff;--text-dim:#8b93ad}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100dvh;overflow:hidden}body{background:radial-gradient(circle at 50% 30%, var(--bg-top) 0%, var(--bg-bottom) 80%);color:var(--text);-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.app{width:100%;height:100%;position:relative}.canvas-wrap{position:absolute;inset:0}.title{top:max(env(safe-area-inset-top), 18px);text-align:center;pointer-events:none;z-index:2;position:absolute;left:0;right:0}.title h1{letter-spacing:.02em;font-size:clamp(1.1rem,4.5vmin,1.8rem);font-weight:700}.title p{color:var(--text-dim);margin-top:4px;font-size:clamp(.72rem,2.6vmin,.95rem)}.tabs{top:calc(max(env(safe-area-inset-top), 18px) + 64px);z-index:3;pointer-events:none;justify-content:center;gap:8px;display:flex;position:absolute;left:0;right:0}.tab{pointer-events:auto;appearance:none;color:var(--text-dim);letter-spacing:.02em;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;padding:8px 16px;font-size:clamp(.75rem,2.6vmin,.9rem);font-weight:600;transition:background .14s,color .14s,border-color .14s}.sound-picker{bottom:calc(max(env(safe-area-inset-bottom), 28px) + 52px);z-index:3;pointer-events:none;flex-direction:column-reverse;align-items:flex-start;gap:10px;display:flex;position:absolute;left:16px}.sound-panel{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0c0e16c7;border:1px solid #ffffff1a;border-radius:18px;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(92vw,420px);padding:12px;display:flex}.tab:hover{color:var(--text)}.tab.active{background:var(--accent);border-color:var(--accent);color:#0b0c12}.counter{bottom:max(env(safe-area-inset-bottom), 28px);text-align:center;pointer-events:none;z-index:2;position:absolute;left:0;right:0}.counter .count{font-variant-numeric:tabular-nums;text-shadow:0 2px 24px #4ea0ff59;font-size:clamp(2.8rem,16vmin,6rem);font-weight:800;line-height:1}.counter .label{letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-top:6px;font-size:clamp(.7rem,2.6vmin,.9rem)}.counter .count.bump{animation:.16s ease-out bump}@keyframes bump{0%{transform:scale(1)}40%{color:var(--accent);transform:scale(1.12)}to{transform:scale(1)}}.share-btn{bottom:max(env(safe-area-inset-bottom), 28px);z-index:3;pointer-events:auto;appearance:none;border:1px solid var(--accent);color:var(--text);letter-spacing:.02em;cursor:pointer;background:#4ea0ff24;border-radius:999px;padding:10px 18px;font-size:clamp(.78rem,2.8vmin,.95rem);font-weight:600;transition:background .14s;position:absolute;right:16px}.share-btn:hover{background:#4ea0ff42}.share-btn:active{background:var(--accent);color:#0b0c12}.lock-btn{bottom:max(env(safe-area-inset-bottom), 28px);z-index:3;pointer-events:auto;appearance:none;color:var(--text);letter-spacing:.02em;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:999px;padding:10px 18px;font-size:clamp(.78rem,2.8vmin,.95rem);font-weight:600;transition:background .14s,border-color .14s;position:absolute;left:16px}.lock-btn:hover{background:#ffffff1f}.lock-btn.active{background:var(--accent);border-color:var(--accent);color:#0b0c12}.toast{left:50%;bottom:max(env(safe-area-inset-bottom), 80px);z-index:5;pointer-events:none;color:var(--text);letter-spacing:.02em;white-space:nowrap;background:#0b0c12eb;border:1px solid #ffffff24;border-radius:999px;padding:10px 18px;font-size:clamp(.78rem,2.8vmin,.92rem);font-weight:600;animation:.18s toast-in;position:absolute;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.hint{bottom:max(env(safe-area-inset-bottom), 28px);color:var(--text-dim);opacity:.7;pointer-events:none;z-index:2;font-size:.72rem;position:absolute;right:16px}.loader{color:var(--text-dim);letter-spacing:.1em;place-items:center;font-size:.9rem;display:grid;position:absolute;inset:0}.reco-line{pointer-events:auto;flex-direction:column;align-items:flex-start;gap:4px;max-width:min(72vw,280px);display:flex}.reco-chip{border:1px solid var(--accent);color:var(--text);letter-spacing:.02em;background:#4ea0ff24;border-radius:999px;padding:7px 14px;font-size:clamp(.72rem,2.4vmin,.85rem);font-weight:600;text-decoration:none;transition:background .14s;display:inline-block}.reco-chip:hover{background:#4ea0ff42}.reco-disclosure{color:var(--text-dim);font-size:.62rem;line-height:1.3}.reco-modal{z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#08090e8c;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.reco-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#0c0e16eb;border:1px solid #ffffff1a;border-radius:18px;width:min(88vw,320px);padding:24px 22px 18px;position:relative}.reco-close{appearance:none;color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1rem;line-height:1;position:absolute;top:10px;right:12px}.reco-close:hover{color:var(--text)}.reco-blurb{color:var(--text-dim);margin-bottom:6px;font-size:.85rem}.reco-name{margin-bottom:16px;font-size:1.05rem;font-weight:700}.reco-cta{border:1px solid var(--accent);background:var(--accent);color:#0b0c12;letter-spacing:.02em;border-radius:999px;padding:11px 22px;font-size:.92rem;font-weight:700;text-decoration:none;transition:opacity .14s;display:inline-block}.reco-cta:hover{opacity:.88}.reco-card .reco-disclosure{margin-top:14px}