@font-face{font-family:Manrope;src:url("/assets/fonts/manrope-latin.woff2") format("woff2");font-display:swap}
@font-face{font-family:Mono;src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");font-display:swap}
:root{--paper:#f4efe5;--paper-2:#ebe4d7;--ink:#172033;--muted:#687083;--line:#d8d0c2;--white:#fffdf8;--blue:#2f6fed;--blue-dark:#1749b8;--lime:#d8ff6e;--coral:#ff765f;--green:#168c65;--shadow:0 18px 54px rgba(43,38,29,.11);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(rgba(23,32,51,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,32,51,.035) 1px,transparent 1px),var(--paper);background-size:32px 32px;color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit}.round-button{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);cursor:pointer;font-size:.7rem;font-weight:800}.round-button:hover{border-color:var(--blue);color:var(--blue)}
main{width:min(100% - 32px,1180px);margin:auto;padding:52px 0 56px}.intro{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:50px;margin-bottom:28px}.kicker{margin:0;color:var(--blue);font-size:.67rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.intro h1{max-width:780px;margin:10px 0 0;font-size:clamp(2.55rem,6vw,5.3rem);line-height:.96;letter-spacing:-.075em}.intro h1 em{color:var(--blue);font-style:normal}.intro-side{display:grid;justify-items:start;gap:12px}.intro-copy{max-width:390px;margin:0;color:var(--muted);font-size:.98rem;line-height:1.7}
.workbench{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);border:1px solid #cfc6b7;border-radius:26px;background:var(--white);box-shadow:var(--shadow);overflow:hidden}.signal-panel,.controls-panel{padding:34px}.signal-panel{border-right:1px solid var(--line);background:linear-gradient(155deg,#fffdf8 40%,#f3f6ff)}.panel-heading{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.status-light{display:flex;align-items:center;gap:6px}.status-light i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,118,95,.12)}.ciphertext,.output{overflow-wrap:anywhere;font-family:Mono,monospace;font-weight:700;letter-spacing:.08em}.ciphertext{min-height:58px;margin:15px 0 27px;color:#778093;font-size:clamp(.92rem,2vw,1.14rem);line-height:1.7}.machine-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:9px;margin:0 0 16px;color:#8991a0;font:700 .54rem Mono;letter-spacing:.12em}.machine-flow b{height:1px;background:repeating-linear-gradient(90deg,#abb2bf 0 4px,transparent 4px 8px)}.machine-flow span:nth-child(3){padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}.output-card{padding:21px;border:2px solid var(--ink);border-radius:17px;background:#fff;box-shadow:5px 5px 0 var(--ink)}.output{min-height:110px;margin:20px 0 22px;font-size:clamp(1.12rem,2.5vw,1.58rem);line-height:1.62;transition:opacity .14s,transform .14s}.output.changing{opacity:.25;transform:translateY(3px)}.signal-label{color:var(--coral)}.signal-meter{height:6px;border-radius:6px;background:#e8e9ed;overflow:hidden}.signal-meter span{display:block;width:0;height:100%;border-radius:inherit;background:var(--coral);transition:width .35s ease,background .35s}.feedback{min-height:43px;margin:20px 3px 12px;color:var(--muted);font-size:.78rem;line-height:1.55}.feedback.error{color:#b64132}.feedback.good{color:var(--green)}
.primary-button,.secondary-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 19px;border:0;border-radius:12px;font-weight:800;cursor:pointer}.primary-button{background:var(--ink);color:white}.primary-button:hover{background:var(--blue)}.secondary-button{justify-content:center;margin-top:9px;background:transparent;color:var(--muted)}.secondary-button:hover{color:var(--ink)}
.controls-panel{background:#f7f2e9}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading>div{display:flex;align-items:center;gap:10px}.section-heading h2{margin:0;font-size:.92rem;letter-spacing:-.02em}.section-heading p,.pipeline-note{margin:0;color:var(--muted);font-size:.68rem}.step{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--lime);font:800 .62rem Mono}.rule-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.rule-choice{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:9px;min-height:61px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer;transition:.15s}.rule-choice:hover:not(:disabled){border-color:var(--blue);transform:translateY(-1px)}.rule-choice:disabled{opacity:.38;cursor:default}.rule-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#e8edff;color:var(--blue);font:800 .7rem Mono}.rule-choice strong,.rule-choice small{display:block}.rule-choice strong{font-size:.71rem}.rule-choice small{margin-top:2px;color:var(--muted);font-size:.58rem;line-height:1.25}.pipeline-heading{margin-top:30px}.text-button{padding:5px;border:0;background:transparent;color:var(--blue);font-size:.66rem;font-weight:800;cursor:pointer}.pipeline{display:grid;gap:8px;min-height:80px;margin-top:14px}.pipeline-empty{display:grid;place-items:center;min-height:80px;padding:16px;border:1px dashed #beb5a7;border-radius:12px;color:#8a8378;text-align:center;font-size:.68rem}.module{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px;padding:9px 9px 9px 8px;border:1px solid #c9c0b3;border-radius:12px;background:var(--white);animation:module-in .2s ease}.module-order{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--lime);font:800 .62rem Mono}.module-copy strong,.module-copy small{display:block}.module-copy strong{font-size:.72rem}.module-copy small{margin-top:2px;color:var(--muted);font-size:.57rem}.module-actions{display:flex;align-items:center;gap:3px}.module-actions button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid var(--line);border-radius:7px;background:#f8f5ef;color:var(--ink);cursor:pointer;font-size:.68rem}.module-actions button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}.module-actions button:disabled{opacity:.25}.parameter{display:flex;align-items:center;gap:3px;margin-right:3px}.parameter output{min-width:29px;text-align:center;font:800 .65rem Mono}.pipeline-note{margin-top:10px;text-align:center}@keyframes module-in{from{opacity:0;transform:translateY(-6px)}}
.lab-notes{padding:80px 0 0}.lab-notes>h2{margin:8px 0 25px;font-size:clamp(1.8rem,4vw,3.3rem);letter-spacing:-.055em}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.notes-grid article{padding:24px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,248,.65)}.notes-grid article>span{color:var(--blue);font:800 .65rem Mono}.notes-grid h3{margin:23px 0 8px;font-size:.95rem}.notes-grid p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.65}
.dialog{width:min(calc(100% - 28px),510px);padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--white);color:var(--ink);box-shadow:0 30px 90px rgba(23,32,51,.25)}.dialog::backdrop{background:rgba(23,32,51,.55);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--muted);font-size:1.8rem;cursor:pointer}.dialog h2{margin:8px 0 22px;font-size:1.7rem;letter-spacing:-.05em}.dialog ol{padding:0;margin:0;list-style:none}.dialog li{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--line)}.dialog li>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--lime);font:800 .65rem Mono}.dialog li strong{font-size:.82rem}.dialog li p{margin:3px 0 0;color:var(--muted);font-size:.73rem;line-height:1.5}.dialog-action{margin-top:15px}.result-dialog{text-align:center}.result-stamp{display:inline-block;margin-bottom:18px;padding:8px 12px;border:2px solid var(--green);color:var(--green);font:800 .72rem Mono;letter-spacing:.13em;transform:rotate(-3deg)}.result-dialog h2{font:800 1.35rem/1.5 Mono;margin:16px 0 22px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}.result-stats div{padding:14px 5px;border-radius:11px;background:var(--paper)}.result-stats strong,.result-stats span{display:block}.result-stats strong{font-size:1.25rem}.result-stats span{margin-top:3px;color:var(--muted);font-size:.58rem}
.signal-status{display:flex;align-items:baseline;gap:7px}.signal-status small{color:#8d94a1;font-size:.5rem}.signal-label{font-size:.65rem}.signal-scale{display:flex;justify-content:space-between;margin-top:7px;color:#969ca8;font:700 .46rem Mono;text-transform:uppercase;letter-spacing:.07em}.mission-brief{margin-bottom:24px;padding:14px;border:1px solid #c9c0b3;border-radius:13px;background:#fffdf8}.mission-brief>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.mission-brief>div span{color:var(--blue);font-size:.55rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.mission-brief>div strong{font-size:.72rem;text-align:right}.mission-brief button{display:flex;justify-content:space-between;width:100%;margin-top:11px;padding:9px 10px;border:0;border-radius:9px;background:#e9edfb;color:var(--blue-dark);font-size:.67rem;font-weight:800;cursor:pointer}.mission-brief button:hover{background:#dde5ff}.mission-brief button:disabled{opacity:.55;cursor:default}.mission-brief p{min-height:16px;margin:8px 2px 0;color:var(--muted);font-size:.62rem;line-height:1.45}.tutorial-example{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:17px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font:800 .78rem Mono}.tutorial-example span:last-child{color:var(--green);text-align:right}.tutorial-example b{padding:5px 7px;border-radius:6px;background:var(--lime);font-size:.58rem}.tutorial-note{margin:9px 2px 0;color:var(--muted);font-size:.68rem;line-height:1.5}
.rule-choice.active{border-color:var(--blue);background:#edf1ff;box-shadow:inset 0 0 0 1px var(--blue)}.rule-choice.active .rule-icon{background:var(--blue);color:white}.rule-choice.active small{color:var(--blue-dark)}
@media(max-width:850px){.intro{grid-template-columns:1fr;gap:15px}.workbench{grid-template-columns:1fr}.signal-panel{border-right:0;border-bottom:1px solid var(--line)}.notes-grid{grid-template-columns:1fr}}
@media(max-width:560px){main{width:min(100% - 16px,1180px);padding-top:30px}.intro{margin:0 8px 20px}.intro h1{font-size:2.65rem}.intro-copy{font-size:.85rem}.workbench{border-radius:19px}.signal-panel,.controls-panel{padding:22px 16px}.ciphertext{margin-bottom:20px}.output-card{padding:17px;box-shadow:4px 4px 0 var(--ink)}.output{min-height:92px}.rule-palette{gap:6px}.rule-choice{grid-template-columns:28px 1fr;padding:7px}.rule-icon{width:28px;height:28px}.notes-grid article{padding:20px}.lab-notes{padding-top:58px}.dialog{padding:27px 19px}}

/* Rule variants live on a second row so richer modules stay easy to scan. */
.module{display:block}
.module-main{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px}
.module-options{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:8px 0 0 35px;padding-top:8px;border-top:1px solid var(--line)}
.module-options button{display:grid;place-items:center;width:auto;height:27px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#f8f5ef;color:var(--ink);cursor:pointer;font:800 .58rem Mono}
.module-options button:hover{border-color:var(--blue);color:var(--blue)}
.strategy-guide{margin-top:28px;padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.strategy-guide.lab-notes>h2{margin-bottom:24px}.strategy-guide .notes-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:850px){.strategy-guide{padding:26px 20px}.strategy-guide .notes-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.strategy-guide{padding:22px 16px}.strategy-guide .notes-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}