:root { --navy:#101c2b; --navy-2:#172b41; --brass:#d4a642; --cream:#f3ead7; --paper:#fcfaf2; --ink:#142434; --red:#c74c3f; --green:#58b88b; --blue:#55a7c5; --line:#b9ad95; --muted:#65717b; --focus:#f6cf65; }
* { box-sizing:border-box; } html { min-width:320px; background:var(--navy); } body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Avenir Next",Arial,sans-serif; } button { color:inherit; font:inherit; } button:focus-visible,[tabindex]:focus-visible { outline:4px solid var(--focus); outline-offset:3px; } [hidden] { display:none !important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.workshop-header { display:grid; grid-template-columns:auto minmax(260px,1fr) minmax(240px,340px) auto; align-items:center; gap:22px; min-height:112px; padding:16px clamp(20px,4vw,62px); border-bottom:3px solid #050b12; color:white; background:var(--navy); }
.level-stamp { display:grid; width:68px; height:68px; place-items:center; border:2px solid var(--brass); border-radius:50%; color:var(--brass); }.level-stamp span { margin-top:8px; font-family:Georgia,serif; font-size:30px; line-height:1; }.level-stamp small { margin-top:-14px; font-size:8px; font-weight:900; letter-spacing:.12em; }
.eyebrow { margin:0 0 4px; color:#8b6318; font-size:11px; font-weight:900; letter-spacing:.11em; }.workshop-header .eyebrow,.machine-panel .eyebrow { color:#e7c674; }.title-copy h1,.machine-label h2,.proof-heading h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(27px,2.6vw,40px); line-height:1.02; }.title-copy > p:last-child { margin:7px 0 0; color:#c7d1dc; }
.foreman-note { display:grid; grid-template-columns:54px 1fr; align-items:center; gap:10px; }.foreman-note > span { display:grid; width:52px; height:48px; place-items:center; border:2px solid var(--brass); border-radius:43% 52% 42% 48%; background:#657582; font-family:Georgia,serif; font-weight:900; }.foreman-note p { margin:0; padding:10px 12px; border:1px solid #667487; border-radius:6px; background:#1b3047; font-size:12px; line-height:1.3; }.foreman-note strong,.foreman-note b { display:block; }.foreman-note strong { color:var(--brass); font-size:9px; text-transform:uppercase; }.foreman-note b { margin-top:3px; font-weight:600; }
.header-tools { display:grid; justify-items:end; gap:11px; }.progress { display:flex; gap:7px; }.progress i { width:10px; height:10px; border:1px solid #a6b2bd; border-radius:50%; }.progress i.current { width:14px; height:14px; border-color:var(--brass); background:var(--brass); }.progress i.done { border-color:var(--green); background:var(--green); }.quiet-button { min-height:38px; padding:0 14px; border:1px solid #8996a4; border-radius:99px; color:white; background:transparent; font-weight:800; cursor:pointer; }
.lockworks { display:grid; grid-template-columns:minmax(500px,1.3fr) minmax(350px,.7fr); min-height:calc(100vh - 112px); }.machine-panel { min-width:0; padding:clamp(22px,3.5vw,52px); color:white; background:var(--navy-2); }.proof-panel { min-width:0; padding:clamp(22px,3vw,42px); border-left:3px solid #050b12; background:var(--cream); }
.machine-label,.proof-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; }.machine-label h2 { color:white; }.case-counter { text-align:right; }.case-counter span,.case-counter strong { display:block; }.case-counter span { color:#9eacb9; font-size:9px; font-weight:900; letter-spacing:.1em; }.case-counter strong { color:var(--brass); font-family:Georgia,serif; font-size:25px; }
.gate-dock { display:flex; flex-wrap:wrap; gap:9px; min-height:64px; margin:22px 0 16px; padding:10px; border:1px solid #54657a; border-radius:7px; background:#0d1927; }.gate-choice { min-width:92px; min-height:43px; border:2px solid var(--brass); border-radius:5px; color:var(--brass); background:transparent; font-weight:900; cursor:pointer; }.gate-choice:hover,.gate-choice.selected { color:var(--navy); background:var(--brass); }.gate-choice small { display:block; font-size:8px; letter-spacing:.08em; }
.logic-machine { position:relative; display:grid; grid-template-columns:minmax(130px,.8fr) minmax(90px,.55fr) minmax(120px,.8fr); align-items:center; min-height:350px; overflow:hidden; border:2px solid #050b12; border-radius:9px; background:#0b1622; box-shadow:inset 0 0 0 1px #3d5063; }.logic-machine::before { content:""; position:absolute; inset:14px; border:1px dashed #30465d; border-radius:5px; pointer-events:none; }
.inputs { position:relative; z-index:3; display:grid; align-content:center; gap:18px; padding:30px; }.input-switch { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; min-height:72px; padding:11px 12px; border:2px solid #566b7d; border-radius:7px; color:white; background:#142638; cursor:pointer; text-align:left; }.input-switch > span { display:block; }.input-switch small { display:block; color:#9dafbf; font-size:9px; font-weight:900; letter-spacing:.08em; }.input-switch strong { display:block; margin-top:3px; font-family:Georgia,serif; font-size:16px; }.toggle-rail { position:relative; width:50px; height:26px; border:2px solid #81909c; border-radius:99px; background:#273d50; }.toggle-rail i { position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#a7b1b9; transition:transform .16s ease-out,background .16s ease-out; }.input-switch.is-true { border-color:var(--green); }.input-switch.is-true .toggle-rail { border-color:var(--green); background:#1e5a47; }.input-switch.is-true .toggle-rail i { transform:translateX(24px); background:#91e0bc; }
.wire-field { position:absolute; z-index:1; inset:0; }.wire { position:absolute; left:29%; width:29%; height:3px; background:#3d566c; transform-origin:left; }.wire::after { content:""; position:absolute; right:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:#3d566c; }.wire-a { top:34%; transform:rotate(8deg); }.wire-b { top:57%; transform:rotate(-8deg); }.wire-c { top:75%; transform:rotate(-17deg); }.logic-machine[data-active="true"] .wire-a,.logic-machine[data-active="true"] .wire-b,.logic-machine[data-active="true"] .output-line { background:var(--brass); box-shadow:0 0 13px rgba(212,166,66,.7); }
.gate-stage { position:relative; z-index:3; display:grid; place-items:center; min-height:180px; }.gate-block { display:grid; width:118px; min-height:92px; place-items:center; padding:12px; border:4px solid var(--brass); border-radius:8px 34px 34px 8px; color:var(--brass); background:#13283d; box-shadow:0 0 0 5px #08131f,0 0 20px rgba(212,166,66,.18); text-align:center; }.gate-block strong { font-family:Georgia,serif; font-size:25px; }.gate-block small { font-size:8px; letter-spacing:.09em; }.gate-block.not { border-radius:7px 48% 48% 7px; clip-path:polygon(0 0,86% 50%,0 100%); padding-right:28px; }.gate-block.compound { width:138px; font-size:13px; }.gate-empty { display:grid; width:120px; min-height:92px; place-items:center; border:2px dashed #718295; border-radius:8px; color:#94a2ae; font-weight:900; }
.output-line { position:absolute; z-index:1; left:57%; right:25%; top:50%; height:3px; background:#3d566c; }.vault { position:relative; z-index:3; display:grid; justify-items:center; gap:13px; padding:25px; }.vault-door { position:relative; display:grid; width:124px; height:142px; place-items:center; border:8px solid #45596c; border-radius:10px; background:#192d40; box-shadow:inset 0 0 0 4px #0c1723,0 0 0 4px #0c1723; transition:transform .18s ease-out,border-color .18s ease-out; }.vault-door i { position:absolute; width:66px; height:66px; border:7px solid #637789; border-radius:50%; }.vault-door i::before,.vault-door i::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:44px; background:#637789; transform:translate(-50%,-50%); }.vault-door i::after { transform:translate(-50%,-50%) rotate(90deg); }.vault-door b { position:absolute; right:8px; width:10px; height:29px; border-radius:3px; background:#637789; }.vault-door span { position:relative; z-index:2; display:grid; width:34px; height:34px; place-items:center; border:2px solid currentColor; border-radius:50%; color:#d48379; background:#132435; font-size:20px; font-weight:900; }.vault.is-open .vault-door { border-color:var(--brass); transform:translateX(5px) rotateY(-12deg); }.vault.is-open .vault-door span { color:#a4e6c7; }.output-state { text-align:center; }.output-state small,.output-state strong { display:block; }.output-state small { color:#8fa1b1; font-size:8px; letter-spacing:.12em; }.output-state strong { margin-top:2px; color:#e8a89f; font-size:16px; }.vault.is-open .output-state strong { color:#9be0be; }
.rule-plate { min-height:49px; padding:14px 16px; border:1px solid #5c6b7b; border-top:0; border-radius:0 0 7px 7px; color:#dce5eb; background:#0b1622; font-weight:800; text-align:center; }.action-zone { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:78px; padding-top:18px; }.action-note { flex-basis:100%; margin:0; color:#bcc8d2; font-size:13px; }.primary-button,.secondary-button,.choice-button { min-height:48px; padding:0 20px; border:2px solid #060d15; border-radius:6px; font-weight:900; cursor:pointer; }.primary-button { color:var(--navy); border-color:var(--brass); background:var(--brass); box-shadow:3px 3px 0 #050b12; }.secondary-button,.choice-button { color:white; border-color:#718295; background:transparent; }.primary-button:disabled { opacity:.38; cursor:not-allowed; }
.proof-heading h2 { font-size:32px; }.icon-button { display:grid; width:42px; height:42px; padding:0; place-items:center; border:2px solid var(--ink); border-radius:50%; background:transparent; font-size:20px; cursor:pointer; }.proof-intro { margin:13px 0 18px; color:var(--muted); line-height:1.45; }.pattern-key { display:flex; gap:16px; margin-bottom:12px; font-size:10px; font-weight:900; }.pattern-key span { display:flex; align-items:center; gap:6px; }.false-shape,.true-shape { display:inline-block; width:14px; height:14px; border:2px solid var(--ink); }.false-shape { border-radius:50%; }.true-shape { background:var(--ink); transform:rotate(45deg) scale(.72); }
.truth-table { overflow:hidden; border:2px solid var(--ink); border-radius:7px; background:var(--paper); }.truth-row { display:grid; grid-template-columns:repeat(var(--columns),1fr); min-height:43px; border-bottom:1px solid var(--line); }.truth-row:last-child { border-bottom:0; }.truth-cell { display:grid; place-items:center; padding:8px 5px; border-right:1px solid var(--line); font-size:12px; font-weight:800; text-align:center; }.truth-cell:last-child { border-right:0; }.truth-head { color:white; background:var(--ink); }.truth-row.is-current { background:#fff2c9; }.truth-row.is-tested .truth-cell:last-child { background:#e2f3e9; }.logic-value { display:inline-flex; align-items:center; gap:5px; }.logic-value i { width:12px; height:12px; border:2px solid currentColor; }.logic-value.true i { background:currentColor; transform:rotate(45deg) scale(.72); }.logic-value.false i { border-radius:50%; }.case-test{width:100%;padding:0;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;font:inherit;cursor:pointer}.case-test:hover:not(:disabled),.case-test:focus-visible{position:relative;z-index:2;background:#fff2c9;outline:3px solid var(--brass);outline-offset:-3px}.case-test:disabled{cursor:default}.case-test.is-tested{background:#edf7f1}.case-test.is-tested:hover:not(:disabled){background:#dff1e7}
.equivalence-panel { margin-top:18px; padding:16px; border:2px solid var(--ink); border-radius:7px; background:white; }.equivalence-panel h3 { margin:0 0 14px; font-family:Georgia,serif; font-size:21px; }.pattern-compare { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; }.pattern-compare > div { padding:10px; border:1px solid var(--line); border-radius:5px; text-align:center; }.pattern-compare span,.pattern-compare strong { display:block; }.pattern-compare span { color:var(--muted); font-size:9px; text-transform:uppercase; }.pattern-compare strong { margin-top:4px; letter-spacing:.11em; }.equivalence-panel > p:last-child { margin:11px 0 0; color:var(--muted); font-size:12px; }
.safety-note { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; margin-top:18px; padding:12px; border:1px solid #a88646; border-radius:7px; background:#f8e8bb; }.safety-note > span { display:grid; width:34px; height:34px; place-items:center; border:2px solid var(--ink); border-radius:50%; font-weight:900; }.safety-note p { margin:0; font-size:11px; }.safety-note strong,.safety-note b { display:block; }.safety-note strong { text-transform:uppercase; }.safety-note b { margin-top:3px; font-weight:500; line-height:1.35; }
.result-layer { position:fixed; z-index:50; inset:0; display:grid; place-items:end center; padding:24px; background:rgba(4,10,17,.78); }.result-sheet { width:min(540px,100%); padding:34px; border:3px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:7px 7px 0 #050b12; text-align:center; }.proof-seal { display:grid; width:60px; height:60px; margin:0 auto 14px; place-items:center; border:3px solid var(--ink); border-radius:50%; color:white; background:var(--green); font-size:29px; font-weight:900; }.result-sheet h2 { margin:4px 0 9px; font-family:Georgia,serif; font-size:35px; }.result-sheet p:not(.eyebrow) { color:var(--muted); }
@media (max-width:1000px) { .workshop-header { grid-template-columns:auto 1fr auto; }.foreman-note { grid-column:2/4; }.lockworks { grid-template-columns:1fr; }.proof-panel { border-top:3px solid #050b12; border-left:0; }.truth-table { max-width:680px; } }
@media (max-width:670px) { .workshop-header { grid-template-columns:auto 1fr; padding:16px; }.level-stamp { width:54px; height:54px; }.foreman-note,.header-tools { grid-column:1/-1; }.header-tools { display:flex; width:100%; justify-content:space-between; }.machine-panel,.proof-panel { padding:20px 15px; }.logic-machine { grid-template-columns:105px 90px minmax(100px,1fr); min-height:305px; }.inputs { gap:10px; padding:12px; }.input-switch { grid-template-columns:1fr; min-height:74px; padding:8px; }.toggle-rail { width:42px; }.input-switch.is-true .toggle-rail i { transform:translateX(16px); }.gate-block { width:85px; min-height:76px; }.gate-block.compound { width:92px; font-size:10px; }.vault { padding:8px; }.vault-door { width:88px; height:116px; }.vault-door i { width:51px; height:51px; }.wire { left:28%; }.result-layer { padding:12px; }.result-sheet { padding:25px 18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }