.rotation-walkthrough{--wrapper-open:var(--incoming);--wrapper-change:var(--process);--dek-change:0;--payload-change:0}.rotation-walkthrough[data-kind=rotate]{--wrapper-open:0;--wrapper-change:0}.rotation-walkthrough[data-kind=reencrypt]{--dek-change:var(--process);--payload-change:var(--reveal)}.rotation-walkthrough .walkthrough-heading h3{max-width:28ch;margin-top:.65rem;font-size:1.625rem;font-weight:500;line-height:1.3}.rotation-scene{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);align-items:center;margin:0 0 1.5rem;padding-block:1rem;display:grid}.rotation-scene-zone{border-block:1px solid #526568;grid-template-rows:44px 168px minmax(46px,auto);align-items:center;gap:12px;min-width:0;padding-block:12px;display:grid}.rotation-scene h4{align-items:center;gap:8px;font-size:.8125rem;font-weight:500;line-height:1.5;display:flex}.rotation-scene h4 svg{color:#bac8ca;flex:none}.rotation-scene-zone>p{color:#bac8ca;font-size:.75rem;line-height:1.7}.rotation-key-roles{grid-template-rows:76px 76px;grid-template-columns:1fr;gap:8px;padding-left:18px;display:grid;position:relative}.rotation-key-roles>div{align-content:center;gap:8px;display:grid}.rotation-key-roles span{color:#bac8ca;font-size:.6875rem}.rotation-key-roles strong{font:.9375rem var(--font-mono);align-items:center;gap:10px;display:flex}.rotation-key-roles>div:first-child{opacity:calc(1 - var(--process) * .18)}.rotation-key-roles>div:nth-child(2){color:#d8f0bd}.rotation-key-marker{background:var(--acid);width:3px;height:76px;transform:translateY(calc(84px * var(--process)));position:absolute;top:0;left:0}.rotation-wrapper{place-items:center;height:168px;display:grid;position:relative}.rotation-wrapper-before,.rotation-wrapper-after{font:.6875rem var(--font-mono);color:#bac8ca;border:1px solid #708183;border-radius:6px;padding:13px;position:absolute;inset:0}.rotation-wrapper-before{opacity:calc(1 - var(--wrapper-open));transform:translateY(calc(-10px * var(--wrapper-open)))}.rotation-wrapper-after{color:#d8f0bd;opacity:var(--wrapper-change);transform:scale(calc(.96 + var(--wrapper-change) * .04));border-color:#b1d68e}.rotation-dek{color:#e8edee;justify-items:center;gap:10px;padding-top:20px;display:grid}.rotation-value-pair{justify-items:center;min-width:0;display:grid}.rotation-value-pair>*{grid-area:1/1}.rotation-value-pair strong{font:.8125rem var(--font-mono)}.rotation-value-before{opacity:calc(1 - var(--dek-change))}.rotation-value-after{opacity:var(--dek-change);color:#d8f0bd;transform:translateY(calc(6px * (1 - var(--dek-change))))}.rotation-flow-lane{color:#bac8ca;place-items:center;height:32px;display:grid;position:relative}.rotation-flow-lane[data-moving=false]{color:#708183}.rotation-flow-lane i{width:26px;height:32px;color:var(--acid);background:#101719;place-items:center;display:grid;position:absolute;inset:0 auto auto 0}.rotation-flow-return{opacity:var(--incomingOpacity);transform:translateX(calc(22px * (1 - var(--incoming))))}.rotation-flow-forward{opacity:var(--outgoingOpacity);transform:translateX(calc(22px * var(--outgoing)))}.rotation-payload{align-content:center;justify-items:center;gap:18px;min-width:0;display:grid}.rotation-payload>svg{color:#bac8ca}.rotation-cipher-pair{--dek-change:var(--payload-change);width:100%}.rotation-cipher-pair code{font:.6875rem/1.6 var(--font-mono);overflow-wrap:anywhere;text-align:center;min-width:0;max-width:100%}.rotation-payload>span{color:#d8f0bd;text-align:center;font-size:.6875rem;line-height:1.6}.rotation-flow-explanation{grid-template-columns:minmax(0,1fr);min-height:150px}.rotation-flow-explanation h4{margin-bottom:.6rem;font-size:1.125rem;font-weight:500;line-height:1.4}.rotation-flow-explanation p{max-width:86ch}.rotation-result{border-block:1px solid #435356;padding-block:1.5rem}.rotation-result h4{margin-bottom:1.25rem;font-size:.875rem;font-weight:500}.rotation-result dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1rem;display:grid}.rotation-result dt{color:#bac8ca;font-size:.75rem;line-height:1.5}.rotation-result dd{margin:8px 0 0;font-size:.8125rem}.rotation-result dd[data-changed=true]{color:#c6e6ac}.rotation-trace-bytes{margin-top:.5rem}.rotation-trace-bytes summary{font-size:.8125rem}.rotation-trace-bytes section{border-top:1px solid #354245;padding-block:1rem}.rotation-trace-bytes h4{margin-bottom:1rem;font-size:.8125rem;font-weight:500}.rotation-trace-bytes dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;display:grid}.rotation-trace-bytes dt{color:#bac8ca;font-size:.6875rem}.rotation-trace-bytes dd{overflow-wrap:anywhere;font:.75rem/1.8 var(--font-mono);margin:8px 0 0}@media (max-width:899px){.rotation-scene{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr)}.rotation-flow-lane i{width:22px}.rotation-flow-return{transform:translateX(calc(6px * (1 - var(--incoming))))}.rotation-flow-forward{transform:translateX(calc(6px * var(--outgoing)))}}@media (max-width:699px){.rotation-walkthrough .walkthrough-heading h3{font-size:1.375rem}.rotation-scene{grid-template-columns:minmax(0,1fr);padding-top:0}.rotation-scene-zone{grid-template-rows:auto 150px auto;gap:10px}.rotation-key-roles{grid-template-rows:76px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0 0 18px}.rotation-key-roles>div{padding-inline:12px}.rotation-key-marker{width:50%;height:3px;transform:translateX(calc(100% * var(--process)));top:auto;bottom:0}.rotation-wrapper{justify-self:center;width:min(100%,260px);height:150px}.rotation-flow-lane{justify-self:center;width:32px;height:40px}.rotation-flow-lane>svg{transform:rotate(90deg)}.rotation-flow-lane i{width:32px;height:26px}.rotation-flow-return{transform:translateY(calc(14px * (1 - var(--incoming))))}.rotation-flow-forward{transform:translateY(calc(14px * var(--outgoing)))}.rotation-result dl{grid-template-columns:repeat(2,minmax(0,1fr))}.rotation-trace-bytes dl{grid-template-columns:minmax(0,1fr);gap:1rem}.rotation-flow-explanation{min-height:210px}}