.htw-stage{aspect-ratio:820/660;width:100%;position:relative;overflow:hidden}.htw-tracks{gap:12px;display:flex;position:absolute;inset:14px}.htw-track{border-radius:var(--radius-lg);background:color-mix(in srgb, var(--accent) 3%, var(--white));border:1.5px solid var(--line);flex:1;min-width:0;transition:border-color .4s,box-shadow .4s;position:relative;overflow:hidden}.htw-tiles{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0,#000 12% 88%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 12% 88%,#0000 100%)}.htw-col-inner{animation:htw-drift var(--htw-spd,48s) linear infinite;flex-direction:column;gap:12px;padding:10px;display:flex}.htw-track:nth-child(2n) .htw-col-inner{animation-direction:reverse}@keyframes htw-drift{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.htw-tile{aspect-ratio:1;filter:grayscale(.95);opacity:.4;border-radius:24%;transition:filter .5s,opacity .5s,transform .5s cubic-bezier(.34,1.5,.64,1);overflow:hidden;transform:scale(.96)}.htw-tile img{object-fit:cover;width:100%;height:100%;display:block}.htw-track.htw-unlocked{animation:.5s cubic-bezier(.34,1.6,.64,1) htw-punch}@keyframes htw-punch{0%{transform:scale(1)}35%{transform:scale(1.035)}to{transform:scale(1)}}.htw-track.htw-unlocked .htw-tile{filter:grayscale(0);opacity:1;transform:scale(1)}.htw-track.htw-unlocked .htw-tile:first-child{transition-delay:20ms}.htw-track.htw-unlocked .htw-tile:nth-child(2){transition-delay:70ms}.htw-track.htw-unlocked .htw-tile:nth-child(3){transition-delay:.12s}.htw-track.htw-unlocked .htw-tile:nth-child(4){transition-delay:.17s}.htw-track.htw-unlocked .htw-tile:nth-child(5){transition-delay:.22s}.htw-track.htw-unlocked .htw-tile:nth-child(6){transition-delay:.27s}.htw-track.htw-unlocked .htw-tile:nth-child(7){transition-delay:.32s}.htw-track.htw-unlocked .htw-tile:nth-child(8){transition-delay:.37s}.htw-track:after{content:"";pointer-events:none;background:linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--white) 85%, transparent) 50%, transparent 70%);position:absolute;inset:0;transform:translate(-130%)}.htw-track.htw-unlocked:after{animation:.7s 80ms forwards htw-sheen}@keyframes htw-sheen{to{transform:translate(130%)}}.htw-milestones{z-index:6;pointer-events:none;position:absolute;inset:0}.htw-cp{opacity:1;width:26px;height:26px;transition:opacity .35s;position:absolute;transform:translate(-50%,-50%)}.htw-cp.htw-fade{opacity:0}.htw-cp i{box-shadow:0 2px 6px color-mix(in srgb, var(--ink) 14%, transparent);border-radius:50%;place-items:center;transition:opacity .3s,transform .45s cubic-bezier(.34,1.5,.64,1);display:grid;position:absolute;inset:0}.htw-cp .htw-lock{background:var(--white);opacity:1;transform:scale(1)}.htw-cp .htw-check{background:var(--accent);opacity:0;transform:scale(.5)}.htw-cp.htw-done .htw-lock{opacity:0;transform:scale(.5)}.htw-cp.htw-done .htw-check{opacity:1;transform:scale(1)}.htw-cp svg{fill:none;stroke-linecap:round;stroke-linejoin:round;width:13px;height:13px}.htw-cp .htw-lock svg{stroke:var(--ink-faint);stroke-width:1.8px}.htw-cp .htw-check svg{stroke:var(--white);stroke-width:2.6px}.htw-cp-label{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);white-space:nowrap;background:color-mix(in srgb, var(--white) 72%, transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--radius-pill);box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);opacity:0;padding:3px 9px;font-size:10px;font-weight:700;transition:opacity .3s;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.htw-cp.htw-done .htw-cp-label{opacity:1}.htw-cp:before{content:"";border:2px solid color-mix(in srgb, var(--accent) 60%, transparent);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:-3px}.htw-cp.htw-done:before{animation:.7s 50ms forwards htw-ring}@keyframes htw-ring{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.85)}}.htw-focus{z-index:3;pointer-events:none;opacity:0;background:radial-gradient(46% 46% at 50% 50%, var(--white) 0%, var(--white) 30%, color-mix(in srgb, var(--white) 82%, transparent) 52%, transparent 74%);transition:opacity .4s;position:absolute;inset:0}.htw-focus.htw-on{opacity:1}.htw-scene{pointer-events:none;z-index:4;width:100%;height:100%;position:absolute;inset:0}.htw-live{fill:none}.htw-charwrap{transform-origin:50%;pointer-events:none;z-index:5;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.htw-col-inner,.htw-track.htw-unlocked,.htw-track.htw-unlocked:after,.htw-cp.htw-done:before{animation:none}}
