:root{--bg-0:#04070d;--bg-1:#0a111c;--panel:#0d1726;--line:#17324a;--cyan:#00e5ff;--cyan-dim:#0b6f85;--amber:#ffb000;--amber-dim:#7a5400;--red:#ff3b5c;--green:#39ff88;--text:#d7ecf5;--text-dim:#7f9bb0;--font-ui:"Trebuchet MS", "Segoe UI", sans-serif;--font-mono:"Courier New", Consolas, monospace;--glow-cyan:0 0 6px #00e5ff8c, 0 0 18px #00e5ff40;--glow-amber:0 0 6px #ffb00099, 0 0 18px #ffb0004d;--radius:6px;--gap:1rem;--ease:cubic-bezier(.2, .8, .2, 1);--cell-gap:.35rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{font-size:16px}body{min-height:100vh;color:var(--text);font-family:var(--font-ui);background-color:var(--bg-0);background-image:repeating-linear-gradient(0deg,#00e5ff0a 0 1px,#0000 1px 32px),repeating-linear-gradient(90deg,#00e5ff0a 0 1px,#0000 1px 32px);margin:0;line-height:1.45}h1,h2,h3,p{margin:0}a{color:var(--cyan)}.mono{font-family:var(--font-mono)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button,input{font:inherit;color:var(--text)}button{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:border-color .2s var(--ease), box-shadow .2s var(--ease);padding:.4rem .8rem}button:hover:not(:disabled){border-color:var(--cyan-dim)}button:disabled{cursor:default;color:var(--text-dim)}button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan)}input{background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius);min-width:0;padding:.4rem .6rem}input:focus-visible{border-color:var(--cyan)}input[aria-invalid=true],input.is-invalid{border-color:var(--red)}input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(.8)}.button-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.button-row.is-centred{justify-content:center}.segmented{border:0;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0;padding:0;display:inline-flex}.segmented legend{float:left;margin-right:.5rem;padding:0}.field{gap:.25rem;display:grid}.field-label{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.hint{color:var(--text-dim);font-size:.9rem}.error-note{color:var(--red);font-size:.95rem}.pass-note{color:var(--green)}.warning-line{color:var(--text-dim);border-left:2px solid var(--amber-dim);padding-left:.5rem;font-size:.85rem}.info-note{color:var(--text-dim);text-align:center;font-size:.85rem}.amber{color:var(--amber)}.app{gap:var(--gap);min-height:100vh;padding:.75rem var(--gap) 4.5rem;flex-direction:column;display:flex}.topbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.4rem .9rem;display:flex}.brand{letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);text-shadow:var(--glow-cyan);align-items:center;gap:.6rem;font-size:1.1rem;font-weight:400;display:flex}.brand-logo{width:auto;height:1.75rem;display:block}.topbar-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.layout{gap:var(--gap);grid-template-columns:minmax(22rem,32%) minmax(0,1fr);grid-template-areas:"ring teach""ring pipeline""verify verify";align-items:start;display:grid}.ring-column{gap:var(--gap);grid-area:ring;display:grid;position:sticky;top:.75rem}.teaching-card{grid-area:teach}.pipeline{grid-area:pipeline;gap:.75rem;min-width:0;display:grid}.verification-row{grid-area:verify;min-width:0}.footer{color:var(--text-dim);flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:auto;font-size:.85rem;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:opacity .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);padding:.75rem 1rem}.pipeline-panel{gap:.6rem;min-width:0;display:grid}.panel-title{letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-size:.8rem;font-weight:400}.stage-number{color:var(--cyan);margin-right:.4em}.sub-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;font-weight:400}.pipeline-panel.is-active{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.pipeline-panel.is-dimmed{opacity:.35}.is-pending .byte-row,.is-pending .digest-grid,.is-pending .truncation-steps,.is-pending .final-code,.window-cards.is-pending{opacity:.6}.formula{gap:.15rem;font-size:1rem;display:grid}.formula-result{color:var(--cyan);font-weight:400}.byte-row{gap:var(--cell-gap);flex-wrap:wrap;display:flex}.byte-cell{background:var(--bg-1);border:1px solid var(--cyan-dim);border-radius:var(--radius);min-width:2.9rem;font-family:var(--font-mono);justify-items:center;gap:.1rem;padding:.2rem .3rem .3rem;display:grid}.byte-index{color:var(--text-dim);font-size:.7rem}.byte-value{color:var(--cyan);white-space:nowrap;font-size:1rem}.byte-cell.dim{border-style:dashed;border-color:var(--line)}.byte-cell.dim .byte-value{color:var(--text-dim)}.byte-cell.is-offset-source{border-color:var(--amber-dim)}.nibble{color:var(--amber);text-underline-offset:3px;text-decoration:underline}.byte-cell.in-window{border-color:var(--amber)}.byte-cell.in-window .byte-value{color:var(--amber)}.byte-cell.is-masked .byte-value{color:var(--red)}.byte-cell.changed{animation:byte-flip .5s var(--ease)}@keyframes byte-flip{0%{opacity:.2;transform:rotateX(90deg)}to{opacity:1;transform:none}}.byte-row.is-bracketed{border:2px solid var(--amber);border-radius:var(--radius);box-shadow:var(--glow-amber);padding:.25rem;display:inline-flex}.secret-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;display:grid}.secret-row .field-label{grid-column:1/-1}.secret-input{letter-spacing:.06em;font-size:1.1rem}.secret-echo{font-family:var(--font-mono);letter-spacing:.06em;word-break:break-all;font-size:1.1rem}.bad-char{color:var(--red);-webkit-text-decoration:underline wavy var(--red);text-decoration:underline wavy var(--red);text-underline-offset:4px;background:0 0}.text-convert{flex-wrap:wrap;align-items:end;gap:.5rem;display:flex}.text-convert label{flex:16rem;gap:.25rem;display:grid}.explainer summary{cursor:pointer;color:var(--text-dim);font-size:.9rem}.explainer[open]{gap:.5rem;display:grid}.explainer-note{color:var(--text-dim);font-size:.9rem}.b32-chars,.b32-bytes{font-family:var(--font-mono);flex-wrap:wrap;gap:.3rem;display:flex}.b32-char,.b32-byte{border:1px solid var(--line);border-radius:var(--radius);justify-items:center;padding:.15rem .3rem;display:grid}.b32-letter,.b32-value{color:var(--cyan)}.b32-bits{font-size:.9rem}.b32-byte.is-discarded{border-style:dashed}.b32-byte.is-discarded .b32-bits,.b32-byte.is-discarded .b32-value{color:var(--text-dim);text-decoration:line-through}.ring-panel{justify-items:center;gap:.75rem;display:grid}.clock-ring{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;width:100%;max-width:30rem;height:auto}.clock-ring.is-dragging{cursor:grabbing}.ring-face{fill:var(--bg-1)}.ring-track{fill:none;stroke:var(--cyan-dim);stroke-opacity:.45;stroke-width:12px}.ring-progress{fill:none;stroke:var(--cyan);stroke-width:12px;stroke-linecap:round;filter:drop-shadow(0 0 4px #00e5ffb3)}.clock-ring.is-ending .ring-progress{stroke:var(--amber);filter:drop-shadow(0 0 4px #ffb000b3)}.ring-flash{fill:none;stroke:var(--cyan);stroke-width:28px;opacity:0;animation:ring-flash .7s var(--ease)}@keyframes ring-flash{0%{opacity:.6}to{opacity:0}}.ring-tick{stroke:var(--line);stroke-width:2px}.ring-tick.is-major{stroke:var(--cyan-dim)}.ring-handle{fill:var(--bg-0);stroke:var(--cyan);stroke-width:4px;filter:drop-shadow(0 0 6px #00e5ffcc)}.clock-ring.is-ending .ring-handle{stroke:var(--amber);filter:drop-shadow(0 0 6px #ffb000cc)}.ring-code{font-family:var(--font-mono);fill:var(--amber);filter:drop-shadow(0 0 6px #ffb00099);font-weight:700}.ring-code.digits-6{font-size:58px}.ring-code.digits-7{font-size:50px}.ring-code.digits-8{font-size:44px}.ring-code.is-pending{fill:var(--amber-dim);filter:none}.ring-remaining{fill:var(--text-dim);font-size:18px}.ring-counter{font-family:var(--font-mono);fill:var(--text-dim);font-size:15px}.scrub-controls{gap:.6rem;width:100%;display:grid}.status-chip{font-family:var(--font-mono);letter-spacing:.05em;border:1px solid;border-radius:999px;padding:.2rem .7rem;font-size:.9rem;display:inline-block}.status-chip.is-live{color:var(--green)}.status-chip.is-scrubbed{color:var(--amber)}.return-live{border-color:var(--amber);color:var(--amber);animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #ffb00000}50%{box-shadow:var(--glow-amber)}}.jump-form{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;display:grid}.jump-form .field-label{grid-column:1/-1}.time-readout{flex-wrap:wrap;gap:.25rem 2rem;margin:0;display:flex}.time-readout dt{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}.time-readout dd{margin:0}.digest-grid{gap:var(--cell-gap);grid-template-columns:repeat(20,minmax(0,1fr));padding-block:.3rem;display:grid;position:relative}.digest-grid .byte-cell{min-width:0}.window-bracket{--at:0;top:0;bottom:0;left:calc(var(--at) * ((100% - 19 * var(--cell-gap)) / 20 + var(--cell-gap)) - 3px);width:calc(4 * (100% - 19 * var(--cell-gap)) / 20 + 3 * var(--cell-gap) + 6px);border:2px solid var(--amber);border-radius:var(--radius);box-shadow:var(--glow-amber);pointer-events:none;transition:left .45s var(--ease);position:absolute}.at-1{--at:1}.at-2{--at:2}.at-3{--at:3}.at-4{--at:4}.at-5{--at:5}.at-6{--at:6}.at-7{--at:7}.at-8{--at:8}.at-9{--at:9}.at-10{--at:10}.at-11{--at:11}.at-12{--at:12}.at-13{--at:13}.at-14{--at:14}.at-15{--at:15}.digest-grid.radix-bin{grid-template-columns:repeat(10,minmax(0,1fr))}.digest-grid.radix-bin .window-bracket{display:none}.digest-grid.radix-bin .in-window{outline:2px solid var(--amber);outline-offset:1px}.truncation-steps{gap:.5rem;margin:0;padding-left:1.5rem;display:grid}.truncation-steps li::marker{color:var(--cyan)}.truncation-steps h3{color:var(--text-dim);font-size:.9rem;font-weight:400}.bits{font-size:1.05rem}.bit-cleared{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}.mod-digits{letter-spacing:.08em;font-size:1.6rem}.mod-digits .dropped{color:var(--text-dim)}.mod-digits .kept{color:var(--amber);text-underline-offset:6px;text-decoration:underline}.final-code{color:var(--amber);text-shadow:var(--glow-amber);letter-spacing:.08em;font-size:2.6rem}.verification{gap:.6rem;display:grid}.verification-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.window-cards{grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;align-items:center;gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.window-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);transition:opacity .3s var(--ease), border-color .3s var(--ease);justify-items:center;gap:.1rem;padding:.5rem;display:grid}.window-card.is-rejected{opacity:.55;border-style:dashed}.window-card.is-accepted{border-color:var(--green)}.window-card.is-current{padding-block:.9rem}.window-card.is-match{box-shadow:var(--glow-amber);border-color:var(--amber);opacity:1}.window-label{font-family:var(--font-mono);color:var(--text-dim)}.window-code{color:var(--cyan);font-size:1.4rem}.window-card.is-current .window-code{color:var(--amber);font-size:1.9rem}.window-meta{color:var(--text-dim);font-size:.8rem}.window-verdict{font-size:.85rem}.window-card.is-accepted .window-verdict{color:var(--green)}.window-card.is-rejected .window-verdict{color:var(--text-dim)}.verify-row{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.verify-input{letter-spacing:.1em;width:9rem;font-size:1.1rem}.verify-result.is-ok{color:var(--green)}.verify-result.is-bad{color:var(--red)}.teaching-card{border-color:var(--cyan-dim);gap:.9rem;min-width:0;font-size:1.02rem;display:grid}.overview{border-bottom:1px solid var(--line);gap:.5rem;padding-bottom:.9rem;display:grid}.overview summary{cursor:pointer;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-size:.8rem}.overview[open] summary{margin-bottom:.25rem}.overview .formula{color:var(--amber);overflow-wrap:anywhere}.caption-title{color:var(--text);font-size:1.2rem;font-weight:400}.stage-lesson{gap:.75rem;display:grid}.lesson-columns{gap:1rem 2rem;display:grid}.lesson-main,.lesson-side{align-content:start;gap:.75rem;min-width:0;display:grid}.lesson-what{gap:.4rem;margin:.25rem 0 0;padding-left:1.4rem;display:grid}.lesson-what li::marker{color:var(--cyan)}.teaching-card .field-label{margin-bottom:.15rem;display:block}.lesson-look{border-left:3px solid var(--cyan);background:var(--bg-1);padding:.6rem .8rem}.lesson-terms{gap:.35rem;margin:0;display:grid}.lesson-terms dt{color:var(--cyan);font-family:var(--font-mono);display:inline}.lesson-terms dt:after{content:": "}.lesson-terms dd{color:var(--text-dim);margin:0;display:inline}.caption-question{color:var(--amber)}.step-nav{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.stage-tabs{gap:.35rem;margin:0 .25rem;padding:0;list-style:none;display:flex}.stage-tab{min-width:2.1rem;font-family:var(--font-mono);padding:.3rem .5rem}@media (width>=1400px){.lesson-columns{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}.drawer{z-index:10;background:var(--bg-1);border-left:1px solid var(--cyan-dim);visibility:hidden;width:min(34rem,100vw);transition:transform .35s var(--ease), visibility 0s linear .35s;align-content:start;gap:1.25rem;padding:1rem 1.25rem 5rem;display:grid;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-12px 0 32px #0009}.drawer.is-open{visibility:visible;transition:transform .35s var(--ease), visibility 0s;transform:none}.drawer-backdrop{z-index:9;position:fixed;inset:0}.drawer-head{justify-content:space-between;align-items:center;display:flex}.drawer-section{border-top:1px solid var(--line);gap:.6rem;padding-top:1rem;display:grid}.table-scroll{overflow-x:auto}.vectors{border-collapse:collapse;width:100%;font-size:.85rem}.vectors th{text-align:left;color:var(--text-dim);font-weight:400}.vectors th,.vectors td{border-bottom:1px solid var(--line);white-space:nowrap;padding:.3rem .4rem}.vectors .is-pass{color:var(--green)}.vectors .is-fail{color:var(--red)}.copy-row{grid-template-columns:minmax(0,1fr) auto;gap:.5rem;display:grid}.qr-frame{border-radius:var(--radius);background:#fff;justify-self:start;padding:.5rem;line-height:0}.secure-notice{background:var(--panel);border:1px solid var(--red);border-radius:var(--radius);gap:1rem;max-width:40rem;margin:15vh auto;padding:2rem;display:grid}@media (width<=1100px){.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"ring""teach""pipeline""verify"}.ring-column{position:static}.clock-ring{max-width:24rem}}@media (width<=700px){.app{padding:.5rem .5rem 4.5rem}.digest-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.digest-grid .window-bracket{display:none}.digest-grid .in-window{outline:2px solid var(--amber);outline-offset:1px}.window-cards{grid-template-columns:1fr}.secret-row,.jump-form{grid-template-columns:minmax(0,1fr)}.topbar-controls{gap:.5rem}}@media (prefers-reduced-motion:reduce){.byte-cell.changed{animation:.3s linear fade-in}.window-bracket{transition:opacity .2s linear}.return-live{box-shadow:var(--glow-amber);animation:none}.ring-flash{animation:.4s linear ring-flash}.drawer,.drawer.is-open{opacity:0;transition:opacity .2s linear,visibility 0s linear .2s;transform:none}.drawer.is-open{opacity:1;transition:opacity .2s linear,visibility}}@keyframes fade-in{0%{opacity:.3}to{opacity:1}}@media (width>=1400px){.counter-layout{grid-template-columns:auto 1fr;align-items:center;gap:.5rem 2.5rem;display:grid}.truncation-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 2rem}}.mask-line .hint{font-family:var(--font-ui)}