.b-tag{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--c)}.bento h3,.hub b{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,1.9vw,25px);line-height:1.1;margin:0}.bento p,.hub p{margin:0;color:var(--fg-2);font-size:14.5px;max-width:46ch}.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;grid-template-areas:"see see see see tempo tempo" "loop loop path path tempo tempo" "free free free log log log"}.bento .tile{padding:26px;gap:10px}.b-see{grid-area:see;--c: var(--r)}.b-tempo{grid-area:tempo;--c: var(--amber);--c2: 40px;display:flex;flex-direction:column}.b-tempo .ramp{margin-top:auto;padding-top:18px}.b-loop{grid-area:loop;--c: var(--violet)}.b-path{grid-area:path;--c: var(--l);--fill: #1a1834}.b-free{grid-area:free;--c: var(--l);margin-right:clamp(0px,4vw,56px)}.b-log{grid-area:log;--c: var(--accent);margin-top:28px}.seq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:12px}.seq span{--d: 2.4s;aspect-ratio:1 / 1.35;display:grid;place-items:end center;padding-bottom:6px;position:relative;background:var(--panel-3);color:var(--hand);font-family:var(--f-display);font-weight:700;font-size:clamp(13px,1.5vw,19px);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);animation:seqHit var(--d) linear infinite;animation-delay:calc(var(--i) * var(--d) / 12)}.seq span.acc:before{content:">";position:absolute;top:5px;font-size:12px;color:var(--fg)}@keyframes seqHit{0%,7%{background:var(--hand);color:var(--accent-ink);transform:translateY(-3px)}8.4%,to{background:var(--panel-3);color:var(--hand);transform:none}}.ramp{display:flex;align-items:flex-end;gap:6px;height:190px;margin-top:18px}.ramp i{flex:1;height:var(--h);position:relative;background:var(--panel-3);clip-path:polygon(0 8px,100% 0,100% 100%,0 100%);transition:background .3s}.ramp i span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--f-display);font-size:12px;font-weight:700;color:var(--fg-2)}.ramp i:last-child{background:var(--amber)}.ramp i:last-child span{color:var(--accent-ink)}.b-tempo:hover .ramp i{background:color-mix(in srgb,var(--amber) 40%,var(--panel-3))}.b-tempo:hover .ramp i:last-child{background:var(--amber)}.loop{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:14px;position:relative;padding-top:12px}.loop:before{content:"";position:absolute;top:0;left:calc(25% + 1px);width:calc(50% - 4px);height:7px;border:2px solid var(--sel-line);border-bottom:0}.loop span{--d: 1.6s;display:grid;place-items:center;height:40px;background:var(--panel-3);font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--muted);opacity:.55;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}.loop span.in{opacity:1;color:var(--fg);background:var(--sel);box-shadow:inset 0 -2px 0 var(--sel-line);animation:loopHit var(--d) linear infinite}.loop span.in:nth-child(4){animation-delay:calc(var(--d) / 4)}.loop span.in:nth-child(5){animation-delay:calc(var(--d) / 2)}.loop span.in:nth-child(6){animation-delay:calc(var(--d) * 3 / 4)}@keyframes loopHit{0%,22%{background:var(--violet);color:var(--accent-ink)}25%,to{background:var(--sel);color:var(--fg)}}.big-n{display:flex;align-items:baseline;gap:10px;margin-top:auto}.big-n b{font-family:var(--f-display);font-weight:900;font-size:clamp(64px,7vw,96px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--l);transition:color .3s}.b-path:hover .big-n b{color:var(--l)}.big-n span{font-family:var(--f-display);color:var(--muted);font-size:14px}.mini-heat{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;margin-top:12px;max-width:520px}.mini-heat i{aspect-ratio:1;background:var(--panel-3);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}.mini-heat .m1{background:#ff2d3d40}.mini-heat .m2{background:#ff2d3d80}.mini-heat .m3{background:#ff2d3dc7}.mini-heat .m4{background:var(--accent)}.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}.step{--c: var(--accent);margin-top:calc((5 - var(--lv)) * 34px);min-height:calc(200px + var(--lv) * 34px);padding:22px 20px;align-content:space-between;gap:10px}.step .lv{justify-self:start;font-family:var(--f-display);font-size:12.5px;font-weight:700;color:var(--accent-ink);background:var(--c);padding:4px 12px 4px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}.step b{font-family:var(--f-display);font-size:19px}.step .meta{font-size:13px;color:var(--muted)}.step-prog{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:12.5px;color:var(--fg-2);font-variant-numeric:tabular-nums}.step-prog .bar{flex:1}.step .go,.hub .go{justify-self:start;font-family:var(--f-display);font-size:13.5px;font-weight:700;color:var(--c)}.step .go:after,.hub .go:after{content:"";display:inline-block;width:18px;height:2px;background:currentColor;margin-left:8px;vertical-align:middle;transition:width .3s var(--ease)}a.step:hover .go:after,.hub a:hover .go:after{width:36px}.step.done{--edge: color-mix(in srgb, var(--accent) 55%, var(--line))}.step.done:after{background:linear-gradient(160deg,rgba(255,45,61,.14),transparent 60%),var(--panel)}.hub{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;grid-template-areas:"main main main main cat cat cat" "main main main main dm dm dm" "j j j a a a a"}.hub .tile{padding:26px;gap:10px;align-content:start}.hub-main{grid-area:main;--c: var(--accent);--c1: 34px;--c2: 34px;align-content:space-between!important;min-height:380px;overflow:hidden}.hub-main:after{background:radial-gradient(circle at 85% 20%,rgba(255,45,61,.32),transparent 55%),var(--fill)}.hub-main b{font-size:clamp(40px,5.6vw,76px);line-height:.95}.hub-main p{font-size:16px}.hub-main .go{font-size:15px}.hub-cat{grid-area:cat;--c: var(--l)}.hub-cat .hub-link{color:var(--fg);text-decoration:none;justify-self:start}.hub-cat .hub-link:hover b{color:var(--l)}.hub-cat .chip small{font-family:var(--f-display);color:var(--c);margin-left:6px;font-size:12px}.hub-dm{grid-area:dm;--c: var(--amber)}.hub-j{grid-area:j;--c: var(--violet);margin-right:clamp(0px,3vw,40px)}.hub-a{grid-area:a;--c: #f2b732;margin-top:24px}.count-in{margin-top:120px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px clamp(24px,5vw,64px);align-items:center;padding:clamp(32px,5vw,60px) clamp(24px,5vw,64px);background:var(--accent);color:var(--accent-ink);clip-path:polygon(0 10%,100% 0,100% 86%,96% 100%,0 100%)}.ci-beats{display:flex;gap:clamp(6px,1.4vw,16px)}.ci-beats span{--d: 2.5s;font-family:var(--f-display);font-weight:900;font-size:clamp(56px,8vw,116px);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--accent-ink);animation:ciBeat var(--d) steps(1) infinite}.ci-beats span:nth-child(2){animation-delay:calc(var(--d) / 4)}.ci-beats span:nth-child(3){animation-delay:calc(var(--d) / 2)}.ci-beats span:nth-child(4){animation-delay:calc(var(--d) * 3 / 4)}@keyframes ciBeat{0%{color:var(--accent-ink);transform:translateY(-4px)}25%,to{color:transparent;transform:none}}.ci-text{display:grid;gap:22px;justify-items:start}.count-in h2{margin:0;max-width:18ch;font-size:clamp(26px,3.2vw,42px)}.count-in .cta{background:var(--accent-ink);color:var(--fg);box-shadow:none}.count-in .cta:hover{background:#2a0a12}.count-in .cta .arr{background:var(--accent);color:var(--accent-ink)}@media(max-width:960px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"see see" "tempo loop" "tempo path" "free free" "log log"}.b-free{margin-right:0}.b-log{margin-top:0}.ladder{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.step{margin-top:0;min-height:0}.step:nth-child(2n){margin-top:28px}.step:last-child{grid-column:1 / -1}.hub{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"main main" "cat dm" "j a"}.hub-main{min-height:300px}.hub-j{margin-right:0}.hub-a{margin-top:0}.count-in{grid-template-columns:1fr}}@media(max-width:560px){.bento,.hub{grid-template-columns:1fr;grid-template-areas:none}.bento .tile,.hub .tile{grid-area:auto}.bento .tile:nth-child(2n),.hub .tile:nth-child(2n){margin-left:18px}.ramp{height:130px}.ladder{grid-template-columns:1fr}.step:nth-child(n){margin-top:0;grid-column:auto;margin-left:calc((var(--lv) - 1) * 6px)}.hub-main{min-height:0}.seq{grid-template-columns:repeat(6,minmax(0,1fr))}.count-in{clip-path:polygon(0 4%,100% 0,100% 94%,92% 100%,0 100%)}}