:root{color-scheme:dark;--bg-deep: #0a0b0d;--bg-panel: #12151a;--bg-card: #181c24;--bg-card-hover: #1e232e;--border: #2a3140;--border-glow: #c45c26;--text: #e8eaef;--text-muted: #8b93a5;--accent: #e8732d;--accent-dim: #9a4a1a;--success: #3d9a6a;--warning: #c9a227;--danger: #c94a4a;--fret-wire: #4a5568;--string: #6b7280;--dot: #f0e6d8;--root-dot: #d63b3b;--root-dot-glow: rgba(214, 59, 59, .4);--root-dot-stroke: #ff8a8a;--font-display: "Bebas Neue", "Impact", sans-serif;--font-body: "Outfit", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text);line-height:1.5;background-image:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(232,115,45,.12),transparent 55%),radial-gradient(ellipse 80% 50% at 100% 100%,rgba(196,92,38,.08),transparent 45%),linear-gradient(180deg,#0c0d10 0%,var(--bg-deep) 40%);background-attachment:fixed}.app{min-height:100%;padding:clamp(1rem,3vw,2rem);max-width:1200px;margin:0 auto}.app__header{text-align:center;margin-bottom:1.75rem}.app__title{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.25rem);letter-spacing:.12em;margin:0 0 .35rem;color:var(--text);text-shadow:0 0 40px rgba(232,115,45,.35)}.app__subtitle{margin:0;font-size:.95rem;color:var(--text-muted);font-weight:500}.app__controls{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.75rem}.app__btn{font-family:var(--font-body);font-weight:600;font-size:.875rem;padding:.55rem 1.1rem;border-radius:6px;border:1px solid var(--border);background:linear-gradient(180deg,#252a35,#1a1f28);color:var(--text);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}.app__btn:hover:not(:disabled){border-color:var(--accent-dim);box-shadow:0 0 0 1px #e8732d33}.app__btn:active:not(:disabled){transform:translateY(1px)}.app__btn:disabled{opacity:.38;cursor:not-allowed}.app__btn--primary{border-color:var(--accent-dim);background:linear-gradient(180deg,#b85a24,#8f4218);color:#fff}.app__btn--primary:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 20px #e8732d59}.app__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.25rem)}.app__grid--five{grid-template-columns:repeat(6,1fr)}.app__grid--five>.card{grid-column:span 2}.app__grid--five>.card:nth-child(4){grid-column:2 / span 2}.app__grid--five>.card:nth-child(5){grid-column:4 / span 2}@media(max-width:900px){.app__grid,.app__grid--five{grid-template-columns:repeat(2,1fr)}.app__grid--five>.card{grid-column:auto}.app__grid--five>.card:nth-child(4),.app__grid--five>.card:nth-child(5){grid-column:auto}}@media(max-width:520px){.app__grid,.app__grid--five{grid-template-columns:1fr}.app__grid--five>.card{grid-column:auto}.app__grid--five>.card:nth-child(4),.app__grid--five>.card:nth-child(5){grid-column:auto}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}.card:hover{background:var(--bg-card-hover);border-color:#3a4255}.card--current{border-color:var(--accent-dim);box-shadow:0 0 0 1px #e8732d26,0 8px 32px #00000073}.card--running{border-color:var(--accent);box-shadow:0 0 24px #e8732d33}.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.card__label{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.08em;color:var(--text-muted);margin:0}.card__badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .45rem;border-radius:4px;border:1px solid var(--border);white-space:nowrap}.card__badge--idle{color:var(--text-muted)}.card__badge--running{color:#fff;background:#e8732d40;border-color:var(--accent)}.card__badge--paused{color:var(--warning);border-color:#c9a22780}.card__badge--complete{color:var(--success);border-color:#3d9a6a80}.card__timer{font-family:var(--font-mono);font-size:clamp(1.75rem,4vw,2.25rem);font-weight:600;letter-spacing:.04em;text-align:center;color:var(--text)}.card__timer-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);text-align:center;margin:-.25rem 0 0}.card__progress{height:6px;background:#0d0f12;border-radius:3px;overflow:hidden;border:1px solid #252830}.card__progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .3s ease}.card--complete .card__progress-fill{background:linear-gradient(90deg,#2a6b4d,var(--success))}.diagram{width:100%;aspect-ratio:220 / 112;border-radius:6px;background:linear-gradient(180deg,#141820,#0e1116);border:1px solid #252a35}.diagram svg{display:block;width:100%;height:100%}.diagram svg .diagram__fret-label{fill:var(--text-muted);font-family:var(--font-body);font-size:5.25px;font-weight:600;letter-spacing:-.02em}.diagram svg .diagram__note{font-family:var(--font-mono);font-weight:600;pointer-events:none}.diagram svg .diagram__note--root{fill:#fff}.diagram svg .diagram__note--plain{fill:#2a241c}.app__hint{text-align:center;margin-top:1.25rem;font-size:.8rem;color:var(--text-muted)}