.hero-title{letter-spacing:-.035em;margin:0;font-size:clamp(3rem,5.6vw + 1rem,5.5rem);font-weight:800;font-stretch:125%;line-height:.95}.sec-title{letter-spacing:-.025em;text-wrap:balance;margin:0;font-size:clamp(2.125rem,2.6vw + 1rem,3rem);font-weight:800;font-stretch:112%;line-height:1.04}.lede{max-width:32em;color:var(--color-text-secondary);margin:0;font-size:clamp(1.125rem,.4vw + 1rem,1.3125rem);line-height:1.5}.body{max-width:34em;color:var(--color-text-secondary);margin:0;font-size:clamp(1.0625rem,.2vw + 1rem,1.125rem);line-height:1.6}.body b{color:var(--color-text)}.ctas{flex-wrap:wrap;align-items:center;gap:14px 24px;display:flex}.ctas.centred{justify-content:center}.hear,.pause{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;transition:transform .16s var(--ease-enter), background-color var(--duration-base) ease, color var(--duration-base) ease}.hear:active,.pause:active{transform:scale(.97)}.hear{border-radius:var(--radius-full);align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;font-size:15px;font-weight:700;display:inline-flex}.hear .icon{width:20px;height:20px}.hear .mute,.hear[hidden]{display:none}.hear[aria-pressed=true]{background:var(--color-text);color:var(--color-canvas);border-color:var(--color-text)}.hear[aria-pressed=true] .waves{display:none}.hear[aria-pressed=true] .mute{display:inline}.pause{border-color:var(--color-border);width:32px;height:32px;color:var(--color-text-secondary);border-radius:50%;flex:none;place-items:center;padding:0;display:grid;position:relative}.pause svg{fill:currentColor;width:12px;height:12px}.pause:before{content:"";position:absolute;inset:-6px}@media (hover:hover) and (pointer:fine){.pause:hover{color:var(--color-text)}}.demo>.pause,.closing-inner>.pause{position:absolute;top:12px;right:12px}.hero{padding-block:var(--space-6) var(--space-12)}@media (width>=1024px){.hero{padding-block:var(--space-12) var(--space-20)}}.tempo-row{--num:clamp(144px, 20vw, 300px);margin-top:var(--space-6);grid-template-columns:auto auto 1fr;align-items:end;column-gap:12px;display:grid;position:relative}@media (width>=1024px){.tempo-row{margin-top:var(--space-10)}}.strings{left:0;right:0;top:calc(var(--num) * .25);height:calc(var(--num) * .54 + 1.5px);pointer-events:none;background:repeating-linear-gradient(to bottom, var(--color-border) 0 1.5px, transparent 1.5px calc(var(--num) * .108));position:absolute}.tempo-num{font-size:var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;justify-items:end;font-weight:700;font-stretch:62.5%;line-height:.78;display:inline-grid;position:relative}.roll>span{grid-area:1/1}.ghost{visibility:hidden}.tempo-unit{padding-bottom:calc(var(--num) * .02);color:var(--color-text-secondary);font-size:max(18px, var(--num) * .095);font-weight:700;font-stretch:87.5%;position:relative}.nello-slot{width:calc(var(--num) * .72);height:calc(var(--num) * .72);justify-self:center;position:relative}.nello-slot .nello{width:100%;height:100%}.rungs{margin-top:var(--space-6);flex-wrap:wrap;align-items:center;gap:8px;display:flex}.rung{border-radius:var(--radius-full);background:var(--color-surface-sunken);height:34px;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;transition:background-color var(--duration-base) ease, color var(--duration-base) ease;align-items:center;padding:0 12px;font-size:15px;font-weight:700;font-stretch:87.5%;display:inline-flex}.rung.done{background:var(--color-progress-subtle);color:var(--color-progress-text)}.rung.now{background:var(--color-accent-graphic);color:var(--color-on-accent)}@media (width>=600px){.rung{height:38px;padding:0 16px;font-size:17px}}.rung-cap{color:var(--color-text-secondary);margin-left:4px;font-size:14px}.hero-low{gap:var(--space-6);margin-top:var(--space-6);flex-direction:column;display:flex}@media (width>=1024px){.hero-low{gap:var(--space-8);margin-top:var(--space-8)}}.sec{padding-block:var(--space-12);border-top:1px solid var(--color-border)}@media (width>=1024px){.sec{padding-block:104px}}.two{gap:var(--space-8);align-items:center;display:grid}.two.flip>.copy{order:-1}@media (width>=1024px){.two{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}.two.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.two.flip>.copy{order:0}}.copy{align-items:flex-start;gap:var(--space-5);flex-direction:column;display:flex}.steps{margin:var(--space-1) 0 0;counter-reset:step;flex-direction:column;gap:14px;padding:0;list-style:none;display:flex}.steps li{counter-increment:step;color:var(--color-text-secondary);grid-template-columns:34px 1fr;align-items:baseline;gap:14px;font-size:1.0625rem;line-height:1.5;display:grid}.steps li:before{content:counter(step);background:var(--color-surface-sunken);width:34px;height:34px;color:var(--color-text);border-radius:50%;place-items:center;font-size:15px;font-weight:800;display:grid}.steps b{color:var(--color-text)}.card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:20px;flex-direction:column;gap:18px;min-width:0;margin:0;padding:20px;display:flex;position:relative}@media (width>=600px){.card{border-radius:24px;padding:28px}}.card-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding-right:40px;display:flex}.card-title{font-size:1.0625rem;font-weight:700}.ladder{align-items:flex-end;gap:var(--ladder-gap);height:110px;display:flex}@media (width>=600px){.ladder{height:150px}}.lb{border-radius:var(--ladder-radius) var(--ladder-radius) 2px 2px;background:var(--ladder-upcoming);transition:background-color var(--duration-base) ease;flex:3;position:relative;overflow:hidden}.lb.done{background:var(--ladder-done)}.lb.current{background:var(--ladder-current-remaining);box-shadow:inset 0 0 0 2px var(--ladder-current)}.lr{background:var(--ladder-rest);border-radius:2px;flex:1;height:4px;position:relative;overflow:hidden}.lr.current{background:var(--ladder-current-remaining);height:6px;box-shadow:inset 0 0 0 1px var(--ladder-current)}.fill{background:var(--ladder-current);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.lb:not(.current) .fill,.lr:not(.current) .fill{opacity:0}.laxis{gap:var(--ladder-gap);color:var(--color-text-secondary);text-align:center;font-variant-numeric:tabular-nums;font-size:13px;display:flex}.laxis .lx{flex:3}.laxis .lgap{flex:1}.tabview{border:1px solid var(--color-border);background:var(--color-surface);border-radius:12px;height:130px;position:relative;overflow:hidden}.strip{will-change:transform;display:block}.tab-line{stroke:var(--color-border-strong);stroke-width:1px}.tab-bar{stroke:var(--color-border-strong);stroke-width:1.5px}.tab-string{fill:var(--color-text-muted);text-anchor:middle;font-size:11px;font-weight:600}.tab-fret{fill:var(--color-text);text-anchor:middle;stroke:var(--color-surface);stroke-width:5px;paint-order:stroke;font-size:13px;font-weight:600}.playhead{background:var(--color-accent-graphic);border-radius:1px;width:2px;position:absolute;top:8px;bottom:8px;left:min(120px,25%)}.pips{align-items:center;gap:12px;display:flex}.pips i{background:var(--beat-normal);width:12px;height:12px;transition:transform .1s var(--ease-enter), background-color .1s ease;border-radius:50%}.pips i.accent{background:var(--beat-accent);width:16px;height:16px}.pips i.on{background:var(--beat-active);transform:scale(var(--beat-active-scale))}.tile{align-items:baseline;gap:8px;display:inline-flex}.tile-n{font-variant-numeric:tabular-nums;font-size:48px;font-weight:700;font-stretch:62.5%;line-height:.85;display:inline-grid}.chart{width:100%;height:auto;display:block;overflow:visible}.chart .grid{stroke:var(--color-border)}.chart .axis{fill:var(--color-text-secondary);text-anchor:end;font-size:12px}.chart .clean-line{stroke:var(--color-progress);stroke-width:2px;stroke-dasharray:5 4}.chart .trend{fill:none;stroke:var(--color-text-secondary);stroke-width:2px;stroke-linejoin:round}.chart .stem{stroke:var(--color-text-muted);stroke-width:1.5px;stroke-dasharray:3 3}.chart .dot circle{stroke-width:2px;transition:fill var(--duration-base) ease, stroke var(--duration-base) ease}.chart .c-clean circle{fill:var(--color-progress);stroke:var(--color-progress)}.chart .c-mostly circle{fill:var(--color-progress-subtle);stroke:var(--color-progress)}.chart .c-sloppy circle,.chart .c-tried circle{fill:var(--color-surface);stroke:var(--color-text-muted)}.chart .c-now circle{fill:var(--color-accent-graphic);stroke:var(--color-accent-graphic)}.chart .label{fill:var(--color-text);text-anchor:middle;font-size:12px;font-weight:700}@media (width<=599.98px){.chart .axis{font-size:22px}.chart .label{font-size:20px}}.ratings{background:var(--color-surface-sunken);border-radius:12px;gap:4px;padding:4px;display:flex}.ratings button{min-height:44px;color:var(--color-text-secondary);font:inherit;cursor:pointer;transition:background-color var(--duration-base) ease, color var(--duration-base) ease, transform .16s var(--ease-enter);background:0 0;border:0;border-radius:9px;flex:1;font-size:15px;font-weight:600}.ratings button:active:not(:disabled){transform:scale(.97)}.ratings button:disabled{cursor:default}.ratings button[aria-pressed=true]{background:var(--color-surface);color:var(--color-text);box-shadow:var(--elevation-1)}@media (width<=599.98px){.ratings button{white-space:nowrap;padding:0 4px;font-size:14px}}.explain{min-height:3em;color:var(--color-text-secondary);margin:0;font-size:.9375rem;line-height:1.5}.explain b{color:var(--color-text)}.card-top{align-items:flex-start}.streak-n{font-variant-numeric:tabular-nums;justify-items:start;font-size:64px;font-weight:700;font-stretch:62.5%;line-height:.85;display:grid}.breaks{text-align:right}.tokens{justify-content:flex-end;gap:6px;min-height:18px;margin-top:6px;display:flex}.tokens i,.flying{background:var(--color-progress-subtle);width:18px;height:18px;box-shadow:inset 0 0 0 2px var(--color-progress);border-radius:50%;display:block}.flying{z-index:2;pointer-events:none;position:absolute;top:0;left:0}.week{text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.week span{color:var(--color-text-secondary);font-size:13px;font-weight:600}.week i{aspect-ratio:1;background:var(--color-surface-sunken);width:min(34px,100%);transition:background-color var(--duration-moderate) ease, box-shadow var(--duration-moderate) ease;border-radius:50%;margin:8px auto 0;display:block}.week i.practiced{background:var(--color-progress)}.week i.missed{box-shadow:inset 0 0 0 2px var(--color-border-strong);background:0 0}.week i.break{background:var(--color-progress-subtle);box-shadow:inset 0 0 0 2px var(--color-progress)}.week i.today{box-shadow:inset 0 0 0 3px var(--color-accent-graphic);background:0 0}.plans{margin-top:var(--space-8);gap:14px;display:grid}@media (width>=600px){.plans{margin-top:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}.plan{border:1px solid var(--color-border);background:var(--color-surface);border-radius:24px;flex-direction:column;gap:18px;padding:24px;display:flex}@media (width>=600px){.plan{padding:36px}}.plan h3{letter-spacing:-.02em;margin:0;font-size:1.75rem;font-weight:800;font-stretch:112%}.plan ul{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.plan li{grid-template-columns:24px 1fr;gap:10px;font-size:1.0625rem;line-height:1.45;display:grid}.plan li:before{content:"";border-left:2.5px solid var(--color-progress-text);border-bottom:2.5px solid var(--color-progress-text);width:13px;height:7px;margin:6px 0 0 4px;transform:rotate(-45deg)}.plan-premium{border:2px solid var(--color-text)}.price{border-top:1px solid var(--color-border);color:var(--color-text-secondary);margin:auto 0 0;padding-top:16px;font-size:15px;font-weight:600}.who{gap:var(--space-5);display:grid}.who .who-avatar{width:112px}@media (width>=600px){.who{align-items:center;gap:var(--space-12);grid-template-columns:auto minmax(0,1fr)}.who .who-avatar{width:160px}}.faq{margin-top:var(--space-8);border-top:1px solid var(--color-border)}.faq details{border-bottom:1px solid var(--color-border)}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:20px 0;font-size:1.1875rem;font-weight:700;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary .icon{color:var(--color-text-secondary);transition:transform .2s var(--ease-enter);flex:none}.faq details[open] summary .icon{transform:rotate(45deg)}.faq p{max-width:46em;color:var(--color-text-secondary);margin:0 0 22px;font-size:1.0625rem;line-height:1.6}.closing-inner{align-items:center;gap:var(--space-6);text-align:center;flex-direction:column;display:flex;position:relative}.closing-nello{width:120px;height:120px}@media (width>=600px){.closing-nello{width:150px;height:150px}}
