.lab-walkthrough{--progress:0;--incoming:0;--outgoing:0;--incomingOpacity:0;--outgoingOpacity:0;--process:0;--reveal:0;letter-spacing:0;border-top:1px solid #435356;margin-top:3.5rem;padding-top:2rem}.walkthrough-heading{justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.75rem;display:flex}.walkthrough-heading span{font:.6875rem/1.7 var(--font-mono);color:#bac8ca}.walkthrough-heading h2{margin-top:.65rem;font-size:2rem;font-weight:500;line-height:1.25}.walkthrough-heading p{color:#b5c2c5;max-width:24rem;font-size:.8125rem;line-height:1.7}.lab-walkthrough .walkthrough-tabs{background:0 0;border-bottom:1px solid #435356;border-radius:0;flex-wrap:wrap;justify-content:start;width:100%;height:auto;padding:0}.lab-walkthrough .walkthrough-tabs button{color:#bac8ca;background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;flex:0 auto;min-height:48px;padding:.8rem 1.2rem;font-size:.875rem}.lab-walkthrough .walkthrough-tabs button[data-active]{border-bottom-color:var(--acid);color:var(--acid);box-shadow:none}.walkthrough-transport{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.25rem;display:flex}.walkthrough-transport>span{font:.6875rem/1.7 var(--font-mono);color:#bac8ca}.walkthrough-controls{gap:8px;display:flex}.walkthrough-controls button,.walkthrough-recovery button{color:#e8edee;cursor:pointer;background:0 0;border:1px solid #708183;border-radius:4px;justify-content:center;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:10px;font-size:.8125rem;transition:background .18s,border-color .18s;display:inline-flex}.walkthrough-controls .walkthrough-play{background:var(--acid);color:#10160b;border-color:var(--acid);min-width:112px;padding-inline:16px}.lab-walkthrough button:disabled{cursor:not-allowed}.lab-walkthrough button:not(:disabled):active{background:#354342}.walkthrough-controls .walkthrough-play:not(:disabled):active{background:#d8ff92}.transformation-scene{grid-template-columns:minmax(0,1fr) 52px minmax(0,1.25fr) 52px minmax(0,1fr);align-items:center;margin:0;padding:1rem 0 2rem;display:grid}.transformation-node{border-block:1px solid #435356;flex-direction:column;justify-content:center;gap:14px;min-width:0;min-height:274px;padding:16px;transition:border-color .4s;display:flex}.transformation-node[data-active=true]{border-top-color:#b1d68e}.transformation-node-heading{color:#e8edee;align-items:center;gap:9px;font-size:.875rem;display:flex}.transformation-node-heading svg{color:#b5c2c5;flex:none}.transformation-value-stack{align-items:center;min-height:6rem;display:grid}.transformation-value-stack>*{grid-area:1/1}.transformation-scene code{font:.875rem/1.75 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.transformation-node small{color:#bac8ca;font-size:.75rem;line-height:1.6}.transformation-node-caption{color:#bac8ca;min-height:2.4em;font-size:.75rem;line-height:1.6}.transformation-pending{color:#b5c2c5;opacity:calc(1 - var(--reveal));font-size:.8125rem}.transformation-output{color:#d8f0bd;opacity:var(--reveal);transform:translateY(calc(8px * (1 - var(--reveal))))}.transformation-process{background:#101719;border:1px solid #526568;border-radius:6px;flex-direction:column;justify-content:center;gap:14px;min-width:0;min-height:274px;padding:20px;transition:border-color .4s;display:flex}.transformation-process[data-active=true]{border-color:#b1d68e}.transformation-process-heading{color:#e8edee;justify-content:center;align-items:center;gap:10px;min-height:32px;display:flex}.transformation-process-heading svg{color:#b1d68e;flex:none}.transformation-process-heading strong{font-size:.9375rem;font-weight:500}.transformation-process>p{color:#b5c2c5;text-align:center;min-height:2.4em;font-size:.75rem;line-height:1.6}.transformation-vault{align-content:center;min-height:124px;display:grid}.transformation-vault>div:not(.transformation-association){grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;display:grid}.transformation-vault span{color:#bac8ca;font-size:.6875rem}.transformation-vault code{font-size:.8125rem;line-height:1.5}.transformation-association{background:#435356;height:3px}.transformation-association>span{height:100%;transform:scaleX(var(--process));transform-origin:0;background:#b1d68e;display:block}.transformation-vault[data-available=false] .transformation-association{background:repeating-linear-gradient(90deg,#a98c83 0 8px,#0000 8px 14px)}.transformation-vault[data-available=false] .transformation-association>span{visibility:hidden}.transformation-mask{grid-template-columns:repeat(var(--columns), minmax(0, 1.35em));place-content:center;gap:4px;min-height:88px;font-size:.9375rem;display:grid}.transformation-character{text-align:center;width:100%;height:1.8em;font:.9375rem/1.8 var(--font-mono);background:#202b2c;border-bottom:1px solid #708183;display:inline-grid}.transformation-character>span{white-space:pre;grid-area:1/1}.transformation-character>span:last-child{opacity:0}.transformation-character[data-hidden=true]{--cover:clamp(0, calc(var(--process) * 2.2 - var(--order) * .065), 1)}.transformation-character[data-hidden=true]>span:first-child{opacity:calc(1 - var(--cover));transform:translateY(calc(-5px * var(--cover)))}.transformation-character[data-hidden=true]>span:last-child{opacity:var(--cover);transform:translateY(calc(5px * (1 - var(--cover))));color:#d8f0bd}.transformation-mask-legend{color:#bac8ca;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.75rem;display:flex}.transformation-crypto-inputs{color:#bac8ca;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;font-size:.75rem;display:flex}.transformation-crypto-inputs span,.transformation-envelope span{align-items:center;gap:6px;display:inline-flex}.transformation-crypto-core{text-align:center;isolation:isolate;background:#202b2c;padding:12px 8px;position:relative}.transformation-crypto-core>span{z-index:-1;transform:scaleX(var(--process));transform-origin:0;background:#34452c;position:absolute;inset:0}.transformation-crypto-core strong{color:#e8edee;font-size:.8125rem;font-weight:400}.transformation-envelope{color:#bac8ca;flex-wrap:wrap;justify-content:center;gap:8px 12px;font-size:.6875rem;display:flex}.transformation-lane{--travel:var(--outgoing);--packetOpacity:var(--outgoingOpacity);width:100%;height:28px;position:relative}.transformation-lane[data-incoming=true]{--travel:var(--incoming);--packetOpacity:var(--incomingOpacity)}.transformation-lane[data-reverse=true]{--travel:calc(1 - var(--outgoing))}.transformation-lane[data-reverse=true][data-incoming=true]{--travel:calc(1 - var(--incoming))}.transformation-track{background:#708183;width:100%;height:2px;position:absolute;top:calc(50% - 1px)}.transformation-packet{width:100%;height:28px;opacity:var(--packetOpacity);transform:translateX(calc(var(--travel) * 100%));align-items:center;display:flex;position:absolute;left:-14px}.transformation-packet svg{box-sizing:border-box;color:#10160b;background:var(--acid);border-radius:4px;flex:none;width:28px;height:28px;padding:6px;transform:rotate(-90deg)}.transformation-lane[data-reverse=true] .transformation-packet svg{transform:rotate(90deg)}.walkthrough-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.walkthrough-steps button{text-align:left;color:#bac8ca;cursor:pointer;background:0 0;border:0;border-top:2px solid #708183;border-radius:0;align-items:start;gap:9px;width:100%;min-height:76px;padding:12px 8px;font-size:.8125rem;line-height:1.6;transition:color .2s,border-color .2s,background .2s;display:flex}.walkthrough-steps button>span{height:20px;font:.75rem var(--font-mono);flex:0 0 18px;place-items:center;display:grid}.walkthrough-steps button[aria-current=step]{color:#d8f0bd;border-color:var(--acid)}.walkthrough-steps li[data-complete=true] button{border-color:#b1d68e}.walkthrough-progress{background:#354245;height:2px;margin-top:8px}.walkthrough-progress>span{height:100%;transform:scaleX(var(--progress));transform-origin:0;background:#b1d68e;display:block}.walkthrough-explanation{grid-template-columns:minmax(0,1fr) 240px;gap:2rem;min-height:160px;padding-block:1.5rem;display:grid}.walkthrough-copy{opacity:0;visibility:hidden;grid-area:1/1;transition:opacity .35s,transform .35s,visibility 0s .35s;transform:translateY(5px)}.walkthrough-copy[data-active=true]{visibility:visible;opacity:1;transition-delay:0s;transform:none}.walkthrough-copy h3{margin-bottom:.6rem;font-size:1.125rem;font-weight:500;line-height:1.4}.walkthrough-copy p{color:#b5c2c5;font-size:.875rem;line-height:1.8}.walkthrough-recovery{flex-direction:column;grid-area:1/2;justify-content:start;align-items:start;gap:10px;display:flex}.walkthrough-recovery button{padding-inline:14px}.walkthrough-recovery small{color:#bac8ca;font-size:.75rem;line-height:1.7}.walkthrough-recovery p{color:#bac8ca;font-size:.8125rem;line-height:1.8}.walkthrough-details{border-top:1px solid #435356}.walkthrough-details summary{cursor:pointer;color:#e8edee;padding-block:16px;font-size:.8125rem}.walkthrough-details dl{grid-template-columns:160px minmax(0,1fr);gap:14px 20px;padding-block:12px 24px;font-size:.8125rem;line-height:1.8;display:grid}.walkthrough-details dt{color:#bac8ca}.walkthrough-details dd{min-width:0;margin:0}.walkthrough-details code{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono)}.walkthrough-error{color:#f0b0a2;margin-bottom:1.5rem;font-size:.875rem;line-height:1.7}.walkthrough-note{color:#bac8ca;margin-top:.5rem;font-size:.75rem;line-height:1.7}@media (hover:hover) and (pointer:fine){.walkthrough-steps button:not(:disabled):hover,.walkthrough-controls button:not(:disabled):not(.walkthrough-play):hover,.walkthrough-recovery button:not(:disabled):hover{background:#263432}.walkthrough-controls .walkthrough-play:not(:disabled):hover{background:#d8ff92}.walkthrough-details summary:hover{color:var(--acid)}}@media (max-width:1050px){.walkthrough-steps button{min-height:96px}.transformation-scene{grid-template-columns:minmax(0,1fr) 28px minmax(0,1.35fr) 28px minmax(0,1fr)}.transformation-node{padding-inline:8px}.transformation-process{padding:16px 12px}.transformation-scene code{font-size:.8125rem}.transformation-node-heading{flex-wrap:wrap;gap:6px;font-size:.8125rem}.walkthrough-heading{display:block}.walkthrough-heading p{max-width:none;margin-top:1rem}.walkthrough-explanation{grid-template-columns:minmax(0,1fr) 210px;gap:1.5rem}}@media (max-width:699px){.lab-walkthrough{margin-top:2.5rem}.walkthrough-heading h2{font-size:1.6rem}.lab-walkthrough .walkthrough-tabs button{flex:1;padding:.8rem .65rem;font-size:.8125rem}.walkthrough-transport{gap:12px}.transformation-scene{grid-template-columns:minmax(0,1fr);padding-block:.5rem 1.5rem}.transformation-node{gap:8px;min-height:160px;padding:16px 12px}.transformation-node-heading{gap:9px;font-size:.875rem}.transformation-value-stack{min-height:3.5rem}.transformation-node-caption{min-height:0}.transformation-process{min-height:242px;padding:18px}.transformation-lane{height:40px}.transformation-track{width:2px;height:100%;top:0;left:calc(50% - 1px)}.transformation-packet{width:28px;height:100%;transform:translateY(calc(var(--travel) * 100%));align-items:start;top:-14px;left:calc(50% - 14px)}.transformation-packet svg{transform:none}.transformation-lane[data-reverse=true] .transformation-packet svg{transform:rotate(180deg)}.walkthrough-steps{grid-template-columns:1fr 1fr;gap:8px 12px}.walkthrough-steps button{min-height:96px;padding-inline:4px}.walkthrough-explanation{grid-template-columns:minmax(0,1fr);gap:1.25rem}.walkthrough-copy{min-height:150px}.walkthrough-recovery{grid-area:2/1;min-height:84px}.walkthrough-details dl{grid-template-columns:minmax(0,1fr);gap:6px}.walkthrough-details dd{margin-bottom:12px}}.lab-walkthrough[data-motion=false] *{transition:none!important}@media (prefers-reduced-motion:reduce){.lab-walkthrough *{transition:none!important}}