@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Spectral:wght@500;600;700&display=swap";:root{color:#f4eedb;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-display:"Spectral", serif;--color-accent:#e7a444;--color-accent-soft:#f4c17b;--color-success:#67ab9d;--color-text-strong:#fff7df;--color-text-muted:#c8c0ad;--color-text-subtle:#9d9788;background:radial-gradient(circle at 0 0,#e7a44433,#0000 34%),radial-gradient(circle at 100% 0,#67ab9d2e,#0000 26%),linear-gradient(#12151c 0%,#090b11 100%);font-family:Manrope,sans-serif;font-weight:500;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:0 0;min-width:320px;min-height:100vh;margin:0}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 15%,#e7a4441c,#0000 18%),radial-gradient(circle at 80% 12%,#67ab9d1a,#0000 16%),linear-gradient(135deg,#ffffff05,#0000 25%);position:fixed;inset:0}#root{min-height:100vh}a{color:inherit}img,svg{display:block}.app-shell{z-index:1;width:min(1240px,100vw - 2rem);margin:0 auto;padding:2rem 0 3rem;position:relative}.hero-panel{grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);gap:1.25rem;margin-bottom:1.5rem;animation:.5s both rise-in;display:grid}.hero-panel__copy,.hero-panel__status{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(#21232ce0,#0f1219f5),radial-gradient(circle at 0 0,#e7a44438,#0000 42%);border:1px solid #fff4d614;border-radius:28px;padding:1.5rem;box-shadow:0 18px 60px #00000052}.hero-panel__eyebrow,.section-card__eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-soft);margin:0 0 .55rem;font-size:.78rem}.hero-panel h1{font-family:var(--font-display);color:var(--color-text-strong);margin:0 0 .95rem;font-size:clamp(2.4rem,6vw,4.45rem);line-height:.96}.hero-panel__lead{max-width:56ch;color:var(--color-text-muted);margin:0;font-size:1.03rem}.hero-panel__status{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.95rem;display:grid}.hero-metric{background:#ffffff0a;border-radius:18px;padding:1rem}.hero-metric span,.tempo-panel__display span,.stat-label{text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-subtle);margin-bottom:.25rem;font-size:.78rem;display:block}.hero-metric strong{color:var(--color-text-strong);font-size:1.22rem;font-weight:700;line-height:1.3}.hero-metric--wide{grid-column:1/-1}.hero-badges{flex-wrap:wrap;grid-column:1/-1;gap:.75rem;display:flex}.hero-badge{color:var(--color-text-strong);background:#e7a44429;border-radius:999px;align-items:center;gap:.45rem;padding:.7rem .95rem;font-size:.92rem;display:inline-flex}.hero-badge--secondary{background:#67ab9d24}.app-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.82fr);gap:1.25rem;display:grid}.app-grid__primary,.app-grid__secondary{gap:1.25rem;display:grid}.section-card{background:linear-gradient(#1e2129f0,#101218fa),radial-gradient(circle at 100% 0,#67ab9d24,#0000 48%);border:1px solid #fff4d614;border-radius:26px;padding:1.25rem;animation:.52s both rise-in;box-shadow:0 18px 48px #00000047}.section-card__header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.section-card__header h2{color:var(--color-text-strong);margin:0;font-size:1.48rem}.section-card__aside{flex-shrink:0}.cycle-card{overflow:hidden}.cycle-aside{color:var(--color-text-muted);align-items:center;gap:.55rem;font-size:.94rem;display:inline-flex}.status-dot{background:#ffffff3d;border-radius:999px;width:.75rem;height:.75rem}.status-dot[data-state=playing]{background:var(--color-success);box-shadow:0 0 0 8px #67ab9d29}.status-dot[data-state=paused]{background:#d8a945}.status-dot[data-state=stopped]{background:#bb6161}.cycle-summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem;margin-bottom:1rem;display:grid}.cycle-summary>div{background:#ffffff0a;border-radius:18px;padding:.95rem 1rem}.cycle-summary strong,.tempo-panel__display strong{color:var(--color-text-strong);font-size:1.7rem}.cycle-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;display:grid}.vibhag-card{background:#ffffff08;border:1px solid #ffffff0a;border-radius:20px;padding:.95rem}.vibhag-card__header{color:var(--color-text-muted);justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.85rem;font-size:.9rem;display:flex}.vibhag-card__header strong{color:var(--color-text-strong)}.vibhag-card__beats{grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:.65rem;display:grid}.beat-chip{background:#0b0e14e6;border:1px solid #0000;border-radius:16px;gap:.18rem;min-height:78px;padding:.75rem .8rem;transition:transform .18s,border-color .18s,background .18s;display:grid;position:relative}.beat-chip--sam{background:linear-gradient(#e7a4442e,#0b0e14f0),#0b0e14eb;border-color:#e7a4447a;box-shadow:inset 0 0 0 1px #e7a4442e}.beat-chip--khali{background:linear-gradient(#67ab9d24,#0b0e14f0),#0b0e14eb;border-color:#67ab9d61;box-shadow:inset 0 0 0 1px #67ab9d24}.beat-chip--vibhag-start{border-color:#fff4d61f;transform:translateY(-1px)}.beat-chip--active{background:linear-gradient(#e7a44438,#0b0e14eb),#0b0e14eb;transform:translateY(-2px);box-shadow:0 14px 30px #e7a4442e}.beat-chip__number{color:var(--color-text-subtle);font-size:.92rem}.beat-chip--sam .beat-chip__number,.beat-chip--khali .beat-chip__number{color:var(--color-text-strong);font-size:1.08rem;font-weight:700}.beat-chip__bol{font-family:var(--font-display);color:var(--color-text-strong);font-size:clamp(1.02rem,2.8vw,1.35rem);line-height:1.12}.transport-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1rem;display:grid}.transport-controls{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.75rem;display:grid}button,select{color:var(--color-text-strong);font:inherit;background:#ffffff0f;border:1px solid #fff4d61a;border-radius:16px;transition:transform .15s,border-color .15s,background-color .15s,opacity .15s}button{cursor:pointer;min-height:52px;padding:.9rem 1rem}button:hover:enabled,.note-button:hover,select:hover{background:#ffffff17;border-color:#e7a44461}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #e7a444c7}.transport-button--primary{color:#180f04;background:linear-gradient(135deg,#e7a444f0,#ad6f22f5);font-weight:700}.tempo-panel{background:#ffffff0a;border-radius:20px;gap:1rem;padding:1rem;display:grid}.tempo-panel__display{gap:.2rem;display:grid}.tempo-panel__display small{color:var(--color-text-muted)}.selected-note{min-width:62px;min-height:62px;font-family:var(--font-display);color:var(--color-text-strong);background:linear-gradient(#67ab9d38,#67ab9d14);border-radius:20px;place-items:center;padding:.65rem;font-size:1.9rem;display:grid}.note-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1rem;display:grid}.note-button{min-height:54px}.note-button--active{background:#e7a4442e;border-color:#e7a44480}.slider-field{gap:.65rem;display:grid}.slider-field__meta{color:var(--color-text-muted);justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.slider-field__meta strong{color:var(--color-text-strong)}input[type=range]{width:100%;accent-color:var(--color-accent)}.taal-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1rem;display:grid}.select-field{gap:.55rem;display:grid}.select-field span{color:var(--color-text-muted)}.select-field select{min-height:52px;padding:0 .95rem}.taal-summary{flex-wrap:wrap;grid-column:1/-1;gap:.6rem;display:flex}.taal-summary span,.theka-strip{color:var(--color-text-strong);background:#ffffff0d;border-radius:999px;align-items:center;padding:.65rem .85rem;display:inline-flex}.support-copy{color:var(--color-text-muted);margin:1rem 0 .8rem}.support-copy--tight{margin-top:-.2rem}.theka-strip{background:#ffffff0a;border-radius:20px;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem;line-height:1.45;display:flex}.help-panel{background:#ffffff08;border-radius:20px}.help-panel summary{cursor:pointer;color:var(--color-text-strong);padding:1rem 1rem 0}.help-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;padding:1rem;display:grid}.help-grid strong{color:var(--color-text-strong);margin-bottom:.25rem;display:block}.help-grid p{color:var(--color-text-muted);margin:0}@keyframes rise-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.layer-toggle-row{flex-wrap:wrap;align-items:center;gap:.9rem;display:flex}.layer-toggle{border-radius:999px;align-items:center;gap:.55rem;min-width:138px;padding:.55rem 1rem;font-weight:600;display:inline-flex}.layer-toggle__dot{background:#ffffff47;border-radius:50%;width:10px;height:10px;transition:background .16s,box-shadow .16s}.layer-toggle--on{background:#e7a4442e;border-color:#e7a44480}.layer-toggle--on .layer-toggle__dot{background:#e7a444f2;box-shadow:0 0 10px #e7a444a6}.layer-toggle-hint{min-width:200px;color:var(--color-text-muted);flex:1;margin:0;font-size:.85rem}.tempo-hint{background:#e7a4441a;border-color:#e7a44466;border-radius:999px;place-self:start;padding:.45rem .95rem;font-size:.85rem;font-weight:600}.tempo-hint:hover{background:#e7a44433}@media (width<=1040px){.hero-panel,.app-grid,.transport-grid,.taal-grid{grid-template-columns:1fr}}@media (width<=720px){.app-shell{width:min(100vw - 1rem,100%);padding-top:.75rem}.hero-panel__status,.cycle-summary,.note-grid,.transport-controls{grid-template-columns:1fr 1fr}.vibhag-card__beats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.hero-panel__status,.cycle-summary,.note-grid,.transport-controls{grid-template-columns:1fr}.hero-panel__copy,.hero-panel__status,.section-card{padding:1rem}.beat-chip{min-height:72px}}