:root{--night: #180f14;--ink: #fff8f1;--lilac: #e9bcf5;--muted: #d3bddf;--gold: #ffd58a;--orange: #ff6707;--line: rgba(255, 176, 96, .34);--safe-bottom: env(safe-area-inset-bottom)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;background:var(--night);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hero{position:relative;background:radial-gradient(circle at 78% 28%,rgba(255,213,138,.45),transparent 22%),radial-gradient(circle at 18% 78%,rgba(255,103,7,.35),transparent 24%),linear-gradient(180deg,#3e3b72,#2a1848 55%,#180f14);padding-top:env(safe-area-inset-top)}.hero img{display:block;width:100%;height:auto;position:relative;z-index:1}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(to bottom,transparent,var(--night));z-index:2;pointer-events:none}.hero-fallback{display:none;min-height:210px;place-items:center;align-content:center;text-align:center;padding:28px 16px 36px}.hero.no-art .hero-fallback{display:grid}.hero.no-art img{display:none}.brand{margin:0;font-size:clamp(3.4rem,18vw,5.4rem);font-weight:900;letter-spacing:.04em;line-height:.8;background:linear-gradient(180deg,#ffe7a8,#ffb03a 28%,#ff6707 62%,#c83b00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #6a2408)}.brand-sub{margin:8px 0 0;font-size:clamp(1.5rem,7vw,2.3rem);font-weight:800;color:#f3d7ff;text-shadow:0 3px 0 #4a1868,0 0 18px rgba(210,150,255,.45)}main{width:min(560px,100%);margin:0 auto;padding:4px 12px 0}.panel{padding:2px 2px 12px}.kicker{display:flex;align-items:center;gap:12px;margin:0 0 6px;color:var(--gold);font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.kicker:before,.kicker:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,213,138,.75),transparent)}.hint{margin:0 0 12px;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.35}.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#2a1638e6;color:var(--ink);font-weight:700;font-size:.92rem;touch-action:manipulation;display:inline-grid;place-items:center}.chip-primary{background:linear-gradient(180deg,#ffb347,#ff6707);color:#3a1404;border-color:#ffd7a1;box-shadow:0 4px #8a3208}.chip-primary:active{transform:translateY(2px);box-shadow:0 2px #8a3208}.chip[aria-pressed=true]{background:#6d28a8;border-color:#e9bcf5;color:#fff}.chip:disabled{opacity:.45}.count{margin-left:auto;min-height:44px;display:grid;place-items:center;padding:0 12px;border-radius:999px;border:1px solid rgba(255,213,138,.4);background:#00000047;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}.vol{flex:1 1 150px;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.vol input{flex:1;width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:8px;border-radius:99px;background:linear-gradient(90deg,#ff6707,#e9bcf5);accent-color:var(--orange)}.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--gold);border:2px solid #ff6707;box-shadow:0 0 0 4px #ff670740}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.pad{position:relative;min-width:0}.pad-hit{width:100%;min-height:124px;text-align:left;border-radius:18px;padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;touch-action:manipulation;background:radial-gradient(120% 90% at 50% 130%,rgba(255,103,7,.28),transparent 58%),linear-gradient(180deg,#3c244e,#241230);border:1px dashed rgba(233,188,245,.38);box-shadow:0 6px #0c060e,0 12px 20px #00000047}.pad.has-clip .pad-hit{border-style:solid;border-color:#ffb0608c;box-shadow:inset 4px 0 #ff7a18,0 6px #0c060e,0 12px 20px #00000047}.pad-hit:active:not(:disabled){transform:translateY(4px)}.pad.playing .pad-hit{color:#3d1606;border-style:solid;border-color:#ffe1ae;background:radial-gradient(90% 80% at 50% 120%,rgba(255,236,190,.7),transparent 55%),linear-gradient(180deg,#ffc56a,#ff8a1e 48%,#f15a07);box-shadow:0 0 22px #ff8c288c,0 6px #8a3208;animation:glow 1.5s ease-in-out infinite}.pad-hit:disabled{opacity:.72}.pad-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}.pad-num{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--gold);font-size:.78rem}.pad.playing .pad-num{color:#6a2c08}.pad-title{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pad-meta{margin-top:auto;color:#f0d7b4;font-size:.75rem;font-weight:700}.pad.playing .pad-meta{color:#6a2c08}.eq{display:none;align-items:flex-end;gap:2px;height:12px}.pad.playing .eq{display:inline-flex}.eq i{display:block;width:3px;height:4px;border-radius:1px;background:currentColor;animation:eq .8s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.pad.is-secret .pad-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.pad.is-secret .pad-hit{justify-content:center;align-items:center}.pad.is-secret .pad-top{width:100%;justify-content:center}.pad.is-secret .pad-num{font-size:2.15rem;letter-spacing:0}.pad.is-secret.playing .eq{position:absolute;top:12px;right:12px}.pad-progress,.bar{display:block;height:4px;margin-top:6px;border-radius:99px;background:#ffffff29;overflow:hidden}.pad:not(.playing) .pad-progress{visibility:hidden}.pad-progress>span,.bar>span{display:block;height:100%;width:0;border-radius:inherit;background:#3d1606}.bar{height:6px;margin-top:8px}.bar>span{background:linear-gradient(90deg,#ff6707,#ffd58a)}.spacer{height:calc(148px + var(--safe-bottom))}.spacer-quiet{height:calc(28px + var(--safe-bottom))}.dock{position:fixed;z-index:5;left:50%;transform:translate(-50%);width:min(536px,calc(100% - 20px));bottom:calc(10px + var(--safe-bottom));display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;padding:10px;border-radius:18px;background:linear-gradient(180deg,#3e241cf5,#180c10f5);border:1px solid rgba(255,154,46,.55);box-shadow:0 12px 40px #00000073,inset 0 1px #ffdcaa2e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stop{height:64px;border-radius:14px;border:1px solid rgba(255,213,138,.35);background:#ffffff0a;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;touch-action:manipulation}.stop:disabled{opacity:.55}.stop.is-live{background:linear-gradient(180deg,#ffc56a,#ff6707);color:#3d1606;border-color:#ffe1ae;box-shadow:0 0 16px #ff7a1880;opacity:1}.dock-row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.dock-title{margin:0;font-weight:800;font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-time{margin:0;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;min-width:2.5rem;text-align:right}.master-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}.master-card{padding:12px;border-radius:18px;background:radial-gradient(120% 90% at 50% 130%,rgba(255,103,7,.18),transparent 58%),linear-gradient(180deg,#3c244e,#241230);border:1px solid rgba(233,188,245,.28);box-shadow:0 6px #0c060e}.master-card.revealed{border-color:#ffb060b3}.master-card.playing{box-shadow:0 0 18px #ff8c2866,0 6px #0c060e}.master-top,.master-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.master-top{justify-content:space-between;margin-bottom:8px}.master-actions{margin-top:8px}.title-input{width:100%;min-height:44px;border-radius:12px;border:1px solid rgba(255,176,96,.45);background:#00000047;padding:0 12px;font-weight:800}.clip-name{margin:8px 0 0;color:var(--muted);font-size:.82rem}.reveal-btn{min-width:88px}.text-btn{min-height:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,170,170,.4);background:#5a121c73;color:#ffd4d4;font-weight:700}@keyframes glow{0%,to{box-shadow:0 0 12px #ff8c2859,0 6px #8a3208}50%{box-shadow:0 0 26px #ffaa3cb3,0 6px #8a3208}}@keyframes eq{0%,to{height:3px}50%{height:12px}}@media(prefers-reduced-motion:reduce){.pad.playing .pad-hit,.eq i{animation:none}.eq i{height:8px}}