*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #141414;--border: #272727;--amber: #f59e0b;--amber-glow: rgba(245, 158, 11, .45);--green: #22c55e;--red: #ef4444;--blue: #60a5fa;--pink: #f472b6;--text: #e5e7eb;--text-muted: #6b7280;--mono: "Courier New", "Lucida Console", monospace}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;justify-content:center}.app{width:100%;max-width:680px;padding:2.5rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:2rem}header{width:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem}.title{font-size:3.75rem;font-weight:900;letter-spacing:-3px;background:linear-gradient(135deg,#f59e0b,#ef4444 60%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;line-height:1}.now-playing{display:flex;align-items:center;gap:.45rem;color:var(--green);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}.start-screen{display:flex;flex-direction:column;align-items:center;gap:3rem;margin-top:5rem}.tagline{color:var(--text-muted);font-size:1.05rem;text-align:center}.jam-screen{width:100%;display:flex;flex-direction:column;align-items:center;gap:2rem}.lick-info{text-align:center}.lick-name{font-size:1.75rem;font-weight:800;color:var(--amber);letter-spacing:-.5px}.dir-badge{display:inline-block;margin-left:.5rem;font-size:1.1rem;vertical-align:middle;animation:popIn .25s cubic-bezier(.34,1.56,.64,1) both}.dir-badge--up{color:var(--blue)}.dir-badge--down{color:var(--pink)}.dir-badge--resolve{color:var(--green)}@keyframes popIn{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.lick-flavor{color:var(--text-muted);font-style:italic;margin-top:.3rem;font-size:.95rem}.tab-container{width:100%;background:#080808;border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:12px;padding:1.5rem 1.75rem;overflow-x:auto;animation:fadeInTab .18s ease-out both}@keyframes fadeInTab{0%{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tab-text{font-family:var(--mono);font-size:1.1rem;line-height:1.85;color:var(--green);white-space:pre;text-shadow:0 0 10px rgba(34,197,94,.35)}.controls{display:flex;gap:.875rem;flex-wrap:wrap;justify-content:center}.btn-start{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none;border-radius:50px;padding:1.1rem 3.25rem;font-size:1.3rem;font-weight:700;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease;box-shadow:0 0 35px var(--amber-glow);letter-spacing:.02em}.btn-start:hover{transform:scale(1.06);box-shadow:0 0 55px var(--amber-glow)}.btn-start:active{transform:scale(.96)}.btn-direction{border-radius:10px;padding:.875rem 1.6rem;font-size:1rem;font-weight:600;cursor:pointer;border:1px solid transparent;min-width:140px;transition:background .12s ease,transform .08s ease,box-shadow .15s ease;letter-spacing:.01em}.btn-direction:active{transform:scale(.94)}.btn-up{background:#0f2341;color:var(--blue);border-color:#1d4ed8}.btn-up:hover{background:#1d4ed8;color:#fff;box-shadow:0 0 20px #60a5fa4d}.btn-resolve{background:#0a2218;color:var(--green);border-color:#15803d}.btn-resolve:hover{background:#15803d;color:#fff;box-shadow:0 0 20px #22c55e4d}.btn-down{background:#2a0f1e;color:var(--pink);border-color:#db2777}.btn-down:hover{background:#be185d;color:#fff;box-shadow:0 0 20px #f472b64d}.btn-stop{background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:.5rem 1.25rem;font-size:.85rem;cursor:pointer;transition:color .2s,border-color .2s;margin-top:.25rem}.btn-stop:hover{color:var(--red);border-color:var(--red)}.count-in{display:flex;align-items:center;justify-content:center;height:120px}.count-number{font-size:9rem;font-weight:900;line-height:1;color:var(--amber);text-shadow:0 0 60px var(--amber-glow);animation:countPop .25s cubic-bezier(.34,1.56,.64,1) both;display:block}@keyframes countPop{0%{transform:scale(.4);opacity:.2}to{transform:scale(1);opacity:1}}.auto-settings{display:flex;flex-direction:column;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.75rem;min-width:260px}.auto-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:1rem;font-weight:600;color:var(--text);-webkit-user-select:none;user-select:none}.auto-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--amber);cursor:pointer}.repeats-control{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.repeats-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-muted)}.repeats-value{font-size:1.1rem;font-weight:700;color:var(--amber);min-width:2ch;text-align:right}.repeats-slider{width:100%;accent-color:var(--amber);cursor:pointer}.repeats-hint{font-size:.78rem;color:var(--text-muted)}.progress-wrap{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:-.75rem}.progress-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--amber),#ef4444);border-radius:2px;transform-origin:left;animation:deplete var(--dur) linear forwards}@keyframes deplete{0%{width:100%}to{width:0%}}@media (max-width: 480px){.title{font-size:2.75rem}.tab-text{font-size:.88rem}.btn-direction{min-width:120px;padding:.75rem 1rem}.btn-start{padding:.9rem 2.5rem;font-size:1.15rem}}
