:root{color-scheme:dark;--bg:#101b28;--panel:#182635;--ink:#f3eddf;--muted:#acbdcb;--line:#344657;--mint:#a8efcb;--red:#ff837e;--blue:#83ceff;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:.25em}button,select,summary{cursor:pointer}button{min-height:44px;border:1px solid var(--line);border-radius:7px;background:#223344;color:var(--ink);padding:.6rem .9rem;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:#2e4655;border-color:#8eb5bc}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{border-color:var(--mint);background:#27453f}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff1b8;outline-offset:3px}[hidden]{display:none!important}.skip-link{position:absolute;top:-80px;left:16px;background:var(--ink);color:var(--bg);padding:12px;z-index:9}.skip-link:focus{top:12px}.site-header,main,footer{max-width:1220px;margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line);font-size:.8rem}.brand{text-decoration:none;letter-spacing:.13em}.brand strong{color:var(--mint);font-weight:600}.site-header>a:last-child{text-decoration:none;min-height:44px;display:flex;align-items:center;gap:12px}.intro{padding:28px 32px 22px;display:grid;grid-template-columns:1fr;gap:0}.eyebrow{font-size:.75rem;letter-spacing:.1em;font-weight:700;color:var(--mint);margin:0 0 10px}.intro h1{font-size:clamp(1.9rem,3.5vw,2.7rem);line-height:1.15;letter-spacing:-.045em;font-weight:700;margin:0 0 12px}.intro h1 em{font-style:normal;color:var(--mint)}.tagline{font-size:1.1rem;margin:0 0 8px}.intro-copy{color:var(--muted);max-width:650px;margin:0;font-size:1rem}.workbench{padding:0 32px 36px;display:grid;grid-template-columns:310px minmax(0,1fr);gap:32px;align-items:start}.control-panel{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.control-panel .eyebrow{font-size:.75rem;letter-spacing:.08em}.control-panel h2{font-size:1.6rem;font-weight:650;line-height:1.2;letter-spacing:-.03em;margin:0 0 14px}.control-panel>p#brief{font-size:1rem;color:var(--muted);margin:0 0 20px}.tool-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px}.tool-heading h3{font-size:.9rem;margin:0}.small-button{font-size:.8rem;padding:.35rem .6rem}.toolbox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.toolbox button{display:flex;text-align:left;align-items:center;gap:9px;padding:10px;font-size:.875rem}.tool-symbol{font-size:1.55rem;line-height:1;color:var(--mint)}.toolbox small{display:block;color:var(--muted);font-size:.75rem}.tool-tip{font-size:.9rem;color:var(--muted);margin:12px 0 18px}.inspector{border-top:1px solid var(--line);padding-top:16px;margin-top:10px}.inspector h3{font-size:1rem;margin:0 0 12px}.rotation-row{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;gap:8px}.rotation-row button{padding:0;font-size:1.4rem}.rotation-row output{font-variant-numeric:tabular-nums}.inspector label{display:block;font-size:.9rem;margin-top:12px}.inspector select{width:100%;color:var(--ink);background:#223344;border:1px solid var(--line);border-radius:6px;padding:10px;min-height:44px}.move-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:12px}.move-row span{font-size:.7rem;width:100%}.move-row button{padding:0;width:44px}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:.9rem;padding-left:0}.edit-controls{display:flex;flex-wrap:wrap;gap:6px;padding-top:15px;border-top:1px solid var(--line)}.edit-controls button{font-size:.875rem;flex:1;padding:7px}.edit-controls button:last-child{flex-basis:100%;background:transparent}summary{min-height:44px;display:list-item;padding:12px 0;color:var(--ink)}.chamber{min-width:0}.phase{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.board{position:relative;aspect-ratio:1;max-width:600px;width:100%;margin:0 auto;border:1px solid #47606c;border-radius:12px;overflow:hidden;box-shadow:0 14px 35px #0002;background:#0c1725}.board canvas{display:block;width:100%;height:100%}.board-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.board-cells button{position:relative;background:transparent!important;border:0;border-radius:0;min-height:0;padding:0;color:#879bac;touch-action:none;user-select:none}.board-cells button:hover{box-shadow:inset 0 0 0 1px #b6efda88}.board-cells button.selected{box-shadow:inset 0 0 0 2px #f7e6ab;background:#ffe9ab0b!important}.board-cells button:focus-visible{outline:3px solid #fff1b8;outline-offset:-4px;z-index:1}.cell-coordinate{position:absolute;top:5px;left:7px;font-size:.65rem;color:#b4c5d1;pointer-events:none}.cell-angle{position:absolute;bottom:4px;right:5px;font-size:.75rem;color:#e4dcbd;pointer-events:none}.board-instructions{font-size:.9rem;color:var(--muted);margin:12px 0;line-height:1.6}.run-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding:8px 0;position:sticky;top:0;z-index:3;background:#101b28f2;backdrop-filter:blur(8px)}.primary-button{background:var(--mint);border-color:var(--mint);color:#112b27;font-weight:650;display:flex;justify-content:space-between;align-items:center;gap:25px}.primary-button:hover:not(:disabled){background:#cafbe0;border-color:#cafbe0}.run-controls>.primary-button{min-width:180px}.run-controls>button:not(.primary-button){font-size:.9rem}.speed-option{font-size:.875rem;color:var(--muted);display:flex;align-items:center;min-height:44px;gap:5px}.receivers{display:flex;gap:9px;margin:18px 0;flex-wrap:wrap}.receiver{flex:1;min-width:140px;border:1px solid var(--line);padding:12px 15px;border-radius:8px}.receiver-title{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;font-weight:600;flex-wrap:wrap}.receiver-title strong{font-variant-numeric:tabular-nums}.receiver small{font-size:.8rem;color:var(--muted)}.receiver progress{appearance:none;display:block;width:100%;height:4px;margin:8px 0;background:#304352;border:0;border-radius:2px}.receiver progress::-webkit-progress-bar{background:#304352}.receiver progress::-webkit-progress-value{background:var(--receiver-color);border-radius:2px}.receiver progress::-moz-progress-bar{background:var(--receiver-color)}.result{border:1px solid #638d80;background:#1b352f;border-radius:10px;padding:22px;margin:18px 0}.result h3{font-size:1.25rem;line-height:1.2;margin:0 0 12px}.result p:not(.eyebrow){font-size:.95rem;margin:10px 0 0}.preferences{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:.875rem;color:var(--muted);padding-bottom:12px}.preferences label{display:flex;align-items:center;gap:5px;min-height:44px}.preferences button{font-size:.875rem;background:transparent}.notice{font-size:.9rem;color:var(--mint);margin:10px 0}.guide{margin:0 32px 40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:1rem}.guide h2{font-size:1.25rem;line-height:1.3;color:var(--ink);margin:0 0 16px}.guide h3{color:var(--ink);font-size:1rem}.guide-tools h3{margin-top:0}.guide-tools strong{color:var(--ink)}.guide li{margin-bottom:8px}.guide ol{padding-left:20px}.faq{columns:auto}.noscript{margin:32px;padding:20px;border:1px solid var(--red)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 32px 40px;font-size:.75rem;color:var(--muted)}input[type=checkbox]{accent-color:var(--mint);width:17px;height:17px}

@media(max-width:760px){.site-header{padding:12px 20px}.intro{padding:28px 20px;gap:20px;grid-template-columns:1fr}.intro h1{font-size:2.7rem}.intro-copy{max-width:100%}.workbench{padding:0 16px 25px;grid-template-columns:1fr;gap:22px}.control-panel{padding:20px}.control-panel h2{font-size:1.6rem}.control-panel>p#brief{margin-bottom:15px}.toolbox{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbox button{flex-direction:column;gap:4px;text-align:center;font-size:.72rem;padding:9px 3px}.toolbox button[hidden]{display:none}.tool-tip{min-height:0;margin-bottom:12px}.edit-controls{flex-wrap:nowrap}.edit-controls button:last-child{flex-basis:auto}.inspector{padding-top:12px}.rotation-row{max-width:230px}.move-row{flex-wrap:nowrap}.move-row span{width:auto}.move-row{gap:8px}#gate-settings{max-width:230px}.board-instructions{font-size:.7rem}.result{flex-direction:column;align-items:stretch}.guide{margin:25px 20px;grid-template-columns:1fr;gap:20px}.faq{columns:1}.preferences{gap:9px}.preferences button{margin-left:0}.receivers{gap:7px}.receiver{min-width:120px;padding:10px}.run-controls>.primary-button{min-width:150px}.run-controls>button:not(.primary-button){flex:1}.speed-option{flex:0 0 auto}footer{padding:22px 20px;flex-direction:column;gap:8px}.cell-coordinate{font-size:.5rem}.cell-angle{font-size:.5rem;bottom:2px}.intro .eyebrow{font-size:.58rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Examples lead with one action; editing and reference material expand on demand. */
.preset-picker{margin:0 32px 24px;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.preset-picker label{font-weight:600;font-size:.95rem}
.preset-picker select{flex:1;max-width:420px;min-width:220px;min-height:46px;padding:9px 12px;border:1px solid #60788a;border-radius:7px;background:#223344;color:var(--ink)}
.preset-picker>span{font-size:.875rem;color:var(--muted)}
.next-step{border-left:3px solid var(--mint);padding:2px 0 2px 15px;margin:20px 0}
.next-step h3{font-size:1rem;margin:0 0 7px}
.next-step p{font-size:.95rem;color:var(--muted);margin:0}
.tools-panel{border-top:1px solid var(--line);margin-top:20px}
.tools-panel>summary{font-size:1rem;font-weight:600;padding-block:15px}
.reset-button{width:100%;margin-top:12px;background:transparent;font-size:.9rem}
.board-key{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 12px;color:var(--muted);font-size:.875rem}
.board-key>span{display:flex;align-items:center;gap:9px}
.board-key i{display:inline-flex;width:25px;height:25px;border:2px solid #d4e6f0;border-radius:50%;align-items:center;justify-content:center;font-style:normal;color:var(--ink);background:#203c4b}
.board-key i.receiver-symbol{border-color:var(--blue);outline:1px solid #83ceff80;outline-offset:3px;background:transparent;width:20px;height:20px;margin:3px}
.notice:empty{display:none}
.settings{border-top:1px solid var(--line);margin-top:18px;font-size:.9rem}
.guide>details{border-top:1px solid var(--line);padding:3px 0}
.guide summary{font-weight:600;padding:14px 0}
.guide p{max-width:75ch;margin:8px 0 20px}
@media(max-width:760px){
  .site-header{padding:6px 20px}.intro{padding:16px 20px;gap:0}.intro h1{font-size:1.8rem}.intro .eyebrow{display:none}.tagline{font-size:1rem}
  .preset-picker{margin:0 16px 18px;padding:12px;gap:8px}.preset-picker label{width:100%;font-size:.9rem}.preset-picker select{max-width:none;min-width:0;width:100%;flex-basis:100%}.preset-picker>span{display:none}
  .workbench{padding:0 16px 25px;grid-template-columns:1fr;gap:14px}.control-panel{padding:14px}.control-panel #chapter{display:none}.control-panel h2{font-size:1.4rem;margin-bottom:10px}.control-panel>p#brief{font-size:.95rem;margin-bottom:14px}
  .next-step{margin:14px 0}.next-step h3{display:none}.next-step p{font-size:.9rem}.tools-panel{margin-top:14px}.tools-panel>summary{padding-block:10px}.reset-button{min-height:44px;margin-top:4px}
  .toolbox{grid-template-columns:1fr 1fr}.toolbox button{flex-direction:row;text-align:left;padding:10px;gap:10px;font-size:.9rem}.tool-tip{min-height:0;font-size:.9rem}.edit-controls{flex-wrap:wrap}.edit-controls button:last-child{flex-basis:100%}
  .board-key{font-size:.8rem;gap:10px 16px}.board-key i{width:21px;height:21px}.board-key i.receiver-symbol{width:17px;height:17px}.board-instructions{font-size:.875rem}
  .run-controls>.primary-button{min-width:170px;flex:1}.run-controls>button:not(.primary-button){flex:1}.phase{font-size:.75rem}.run-controls:has(#test-flow[hidden]) .phase{flex-basis:100%}
  .cell-coordinate{font-size:.6rem}.cell-angle{font-size:.65rem;bottom:2px}.receiver{min-width:140px;padding:12px}.receivers{gap:10px}.receiver-title{font-size:.9rem}
  .guide{margin:0 20px 30px;display:block;font-size:.95rem}.guide h2{font-size:1.2rem}.preferences{gap:9px 16px;font-size:.875rem}
}