.st{border-radius:16px;background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:20px}.st-eras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.st-era{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:0 16px 12px 0;position:relative;transition:opacity .3s var(--ease-settle)}.st-era b{font:500 28px/32px var(--font-display);letter-spacing:-.02em}.st-era>span{font:400 12px/16px var(--font-mono);color:var(--ink-2);letter-spacing:.02em}.st-era:after{content:"";position:absolute;left:0;right:8px;bottom:0;height:2px;background:var(--line)}.st-era[aria-pressed=true]:after{background:var(--ink)}.st-era.now[aria-pressed=true]:after{background:var(--accent)}.st-era.now>span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--accent);margin-right:6px;vertical-align:1px}.st-era:not([aria-pressed=true]){opacity:.45}.st-era:hover{opacity:1}.st-era:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}.st-stack{position:relative;display:flex;flex-direction:column-reverse;gap:4px}.st-l{position:relative;height:44px}.st-b{position:absolute;top:0;bottom:0;right:0;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:10px;padding:0 16px;box-sizing:border-box;white-space:nowrap;overflow:hidden}.st-b b{font:500 14px/20px var(--font-text)}.st-b>span{font:400 12px/16px var(--font-mono);opacity:.6}.st-l.mus .st-b{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.st-l.mus svg{position:absolute;left:150px;right:16px;top:2px;height:40px;width:calc(100% - 166px);fill:var(--ink-2);opacity:.5}.st-veil{position:absolute;top:-4px;bottom:-4px;background:var(--surface);opacity:.7;pointer-events:none;transition:left .4s var(--ease-move),right .4s var(--ease-move)}.st-grid{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr)}.st-grid i{border-left:1px dashed var(--line)}.st-grid i:first-child{border-left:0}.st-out{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:start;padding-top:8px;border-top:1px solid var(--line)}.st-out .a{grid-column:1 / span 6;display:flex;flex-direction:column;gap:6px}.st-out .a>span{font:400 12px/16px var(--font-mono);color:var(--ink-2)}.st-out .a>b{font:500 30px/34px var(--font-display);letter-spacing:-.015em}.st-out .a p{margin:0;font:400 14px/20px var(--font-text);color:var(--ink-2);max-width:56ch}.st-out .b{grid-column:8 / span 5;display:flex;flex-direction:column;gap:6px}.st-out .b>span{font:400 12px/16px var(--font-mono);color:var(--ink-2)}.st-out .b p{margin:0;font:400 14px/20px var(--font-text);color:var(--ink)}.stm{display:none}@media(prefers-reduced-motion:reduce){.st *,.stm-i{transition:none!important}}@media(max-width:767px){.st{padding:16px;gap:16px}.st .st-eras,.st .st-stack,.st .st-out{display:none!important}.stm{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.stm-k{font:400 13px/18px var(--font-text);color:var(--ink-2);margin:0 0 6px}.stm-i{border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease-settle)}.stm-i.open{box-shadow:inset 0 0 0 1px var(--ink)}.stm-i.now.open{box-shadow:inset 0 0 0 1.5px var(--accent)}.stm-h{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.stm-h:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:12px}.stm-y{display:flex;flex-direction:column;gap:2px}.stm-y>b{font:500 20px/24px var(--font-display);letter-spacing:-.015em}.stm-y>span{font:400 11px/16px var(--font-mono);color:var(--ink-2)}.now .stm-y>span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--accent);margin-right:6px;vertical-align:1px}.stm-p{display:flex;gap:3px;align-items:flex-end}.stm-p i{display:block;width:10px;height:28px;border-radius:3px;background:var(--line)}.stm-p i.on{background:var(--ink)}.stm-p i.mus.on{background:var(--ink-2)}.stm-b{display:none;padding:0 16px 16px;flex-direction:column;gap:8px}.stm-i.open .stm-b{display:flex}.stm-b>b{font:500 22px/26px var(--font-display);letter-spacing:-.015em}.stm-b>p{margin:0;font:400 14px/20px var(--font-text);color:var(--ink-2)}.stm-b>span{font:400 13px/20px var(--font-text);color:var(--ink);padding-top:8px;border-top:1px solid var(--line)}.stm-b>span i{display:block;font:400 11px/16px var(--font-mono);font-style:normal;color:var(--ink-2)}}.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-size:22px}.div{display:flex;align-items:center;gap:8px;color:var(--ink-2);font:400 12px/16px var(--font-text)}.div i{flex:1;height:1px;background:var(--line)}.div b{font-weight:400}.roleline{font:500 min(112px,8vw)/.88 var(--font-display);letter-spacing:-.04em;white-space:nowrap;margin:0}.rc-sm{display:none}.roleline span{display:inline-block}.ra{animation:rwa .8s var(--ease-settle) both}.rb{animation:rwb .8s var(--ease-settle) both}@keyframes rwa{0%{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}@keyframes rwb{0%{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}.roles{display:flex;gap:4px;flex-wrap:wrap}.rolebtn{position:relative;overflow:hidden;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--surface);color:var(--ink-2);font:500 14px/20px var(--font-text);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .15s var(--ease-settle)}.rolebtn:active{transform:scale(.97)}.rolebtn[aria-pressed=true]{background:var(--inverse);color:var(--on-inverse)}.rolebtn .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}.rolebtn[aria-pressed=true] .bar.run{animation:fillbar 5s linear forwards}@keyframes fillbar{to{width:100%}}.rolebtn:focus-visible,.pbtn:focus-visible,.tok:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.mus-h{line-height:.92}.plist{display:flex;flex-direction:column;border-top:1px solid var(--ink)}.pbtn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:40px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink-2);transition:color .15s var(--ease-settle)}.pbtn .t-s{transition:transform .3s var(--ease-settle)}.pbtn:hover,.pbtn[aria-pressed=true]{color:var(--ink)}.pbtn[aria-pressed=true] .t-s{transform:translate(8px)}.stage{border-radius:24px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:16px;min-height:560px}.labx{flex:1;border-radius:16px;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:40px;position:relative;overflow:hidden;min-height:360px}.abcap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:8px 8px 4px}.ctrl{display:flex;gap:4px;flex-wrap:wrap}.tok{height:32px;padding:0 12px;border-radius:999px;border:0;background:var(--paper);color:var(--ink);font:500 12px/16px var(--font-mono);cursor:pointer;font-variant-numeric:tabular-nums}.tok[aria-pressed=true]{background:var(--inverse);color:var(--on-inverse)}.mini{width:340px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:8px;transition:border-radius .3s var(--ease-settle)}.mini .in{height:44px;background:var(--paper);display:flex;align-items:center;padding:0 14px;color:var(--ink-2);transition:border-radius .3s var(--ease-settle)}.mini .cta{height:44px;display:flex;align-items:center;justify-content:center;font-weight:500;transition:border-radius .3s var(--ease-settle),background-color .3s var(--ease-settle),color .3s var(--ease-settle)}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%;max-width:560px}.pair>div{display:flex;flex-direction:column;align-items:center;gap:16px}.sbtn{width:180px;height:44px;border-radius:999px;border:0;background:var(--inverse);color:var(--on-inverse);font:500 14px/20px var(--font-text);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .15s var(--ease-settle),background-color .3s var(--ease-settle)}.sbtn:active{transform:scale(.97)}.sbtn.ok{background:var(--signal-ok);color:#fff}.spin{width:14px;height:14px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.track{width:100%;max-width:560px;height:72px;border-radius:999px;background:var(--surface);position:relative}.ball{position:absolute;top:8px;left:8px;width:56px;height:56px;border-radius:999px;background:var(--inverse);transition-property:left;transition-timing-function:cubic-bezier(.87,0,.13,1)}.ball.end{left:calc(100% - 64px)}.ms{font:500 64px/.9 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.sq{display:block;width:120px;height:120px;border-radius:24px;background:var(--inverse)}.zero-a{animation:z0a .6s var(--ease-settle) both}.zero-b{animation:z0b .6s var(--ease-settle) both}.near-a{animation:n9a .6s var(--ease-settle) both}.near-b{animation:n9b .6s var(--ease-settle) both}@keyframes z0a{0%{transform:scale(0)}to{transform:none}}@keyframes z0b{0%{transform:scale(0)}to{transform:none}}@keyframes n9a{0%{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}@keyframes n9b{0%{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}.nest{display:block;padding:8px;background:var(--inverse);width:220px}.nest i{display:block;height:140px;background:var(--surface)}.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}.node{border-radius:16px;padding:16px;min-height:120px;background:var(--surface);color:var(--ink-2);display:flex;flex-direction:column;justify-content:space-between;transition:background-color .3s var(--ease-settle),color .3s var(--ease-settle)}.node.on{background:var(--inverse);color:var(--on-inverse)}@media(prefers-reduced-motion:reduce){.ra,.rb,.zero-a,.zero-b,.near-a,.near-b,.spin{animation:none}.rolebtn .bar{display:none}.ball,.mini,.mini *{transition:none}}@media(max-width:767px){.tok,a.mno{position:relative}.tok:before{content:"";position:absolute;inset:-6px}a.mno:before{content:"";position:absolute;inset:-12px -4px}.roleline{font-size:40px;white-space:normal}.rc-lg{display:none}.rc-sm{display:inline}.g12{grid-template-columns:minmax(0,1fr)}.g12>*{grid-column:1 / -1!important}.hero-ph{max-width:200px}.mus-h{font-size:64px}.plist{flex-direction:row;overflow-x:auto;border-top:0;gap:4px;scrollbar-width:none}.plist::-webkit-scrollbar{display:none}.pbtn{flex:none;display:block;padding:0 14px;height:44px;line-height:44px;white-space:nowrap;border:0;border-radius:999px;background:var(--surface)}.pbtn>.mut{padding-top:0!important;margin-right:6px}.pbtn .t-s{font-size:14px}.pbtn[aria-pressed=true]{background:var(--inverse);color:var(--on-inverse)}.pbtn[aria-pressed=true] .t-s{transform:none}.stage{min-height:0}.labx{padding:20px;min-height:300px}.abcap{gap:16px}.abcap>div:last-child{align-items:flex-start!important;width:100%}.abcap .ctrl{flex-wrap:nowrap;overflow-x:auto;gap:8px;width:100%;padding-bottom:2px;scrollbar-width:none}.abcap .ctrl::-webkit-scrollbar{display:none}.abcap .ctrl .tok{flex:none}.mini{width:100%}.pair{gap:16px}.sbtn{width:100%}.chain{grid-template-columns:repeat(2,minmax(0,1fr))}.ms{font-size:40px}.abcap{flex-direction:column;align-items:flex-start}.ab-close-cta{justify-content:flex-start!important;margin-top:24px}}
