:root{color-scheme:dark;--bg:#101a1d;--panel:#172328;--panel-deep:#121c20;--line:#304046;--line-soft:#28373c;--main:#e6e9e3;--dim:#a4b0ad;--muted:#718581;--gold:#d7ab69;--gold2:#f1c688;--teal:#78a7a5;--red:#a86b5d;--display:Georgia,'Times New Roman',serif;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--main);font:14px/1.5 var(--sans);letter-spacing:.003em}.page{max-width:1800px;margin:auto;padding:0 32px}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}.masthead{min-height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;justify-content:space-between}.brand{display:flex;align-items:center;gap:15px}.brand-mark{width:46px;height:46px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font:27px var(--display);color:var(--gold2);position:relative}.brand-mark span{font:8px var(--sans);position:absolute;bottom:3px;right:4px;letter-spacing:.03em}.brand-copy strong{font-size:19px;letter-spacing:.16em;font-weight:650;white-space:nowrap}.brand-copy strong span{font-weight:350;color:var(--gold)}.brand-copy small{display:block;margin-top:2px;font-size:9px;letter-spacing:.25em;color:var(--muted)}.top-meta{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:.17em;color:var(--dim);margin-left:auto;margin-right:34px}.top-meta i{height:15px;border-left:1px solid var(--line)}.pl-flag{display:inline-block;width:20px;height:13px;background:linear-gradient(#fff 0 50%,#d74b56 50% 100%);border:1px solid #a0a6a2}.subtle-button{color:var(--main);border:1px solid var(--line);background:transparent;padding:10px 15px;display:flex;gap:11px;align-items:center;font-size:12px}.subtle-button span{font:20px var(--display);color:var(--gold)}.subtle-button:hover,.camera-btn:hover{background:#263238}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 377px;gap:27px;padding-top:33px}.stage{min-width:0}.stage-top{padding-bottom:20px}.eyebrow{font-size:10px;letter-spacing:.20em;color:var(--gold);font-weight:700}.stage-top .eyebrow span{padding:0 7px;color:var(--muted)}h1{font:normal clamp(32px,3.3vw,53px)/1.12 var(--display);letter-spacing:-.024em;margin:12px 0 10px}h1 em{color:var(--gold);font-weight:400}.stage-top p{margin:0;color:var(--dim);font-size:13px;letter-spacing:.035em}.viewport-shell{position:relative;border:1px solid #415052;background:radial-gradient(ellipse at 50% 25%,#293b3f,#10191d 65%);height:clamp(390px,55vh,680px);overflow:hidden}#loomCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#loomCanvas:active{cursor:grabbing}.viewport-top-left,.viewport-top-right,.viewport-foot{position:absolute;pointer-events:none;font-size:10px;letter-spacing:.18em}.viewport-top-left{top:23px;left:25px;color:#e3e5d7;display:flex;align-items:center;gap:9px}.live-dot{width:7px;height:7px;border-radius:50%;background:#a8cfac;box-shadow:0 0 9px #a8cfac}.viewport-top-right{top:24px;right:24px;color:var(--main)}.muted{color:var(--muted)}.viewport-foot{bottom:18px;left:23px;right:24px;display:flex;justify-content:space-between;gap:12px;color:#c2ccc8}.viewer-tip span{padding:0 8px;color:var(--gold)}#fpsLabel{color:var(--gold2);white-space:nowrap}.viewport-crosshair{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:center;align-items:center;opacity:.16}.viewport-crosshair span:first-child{width:17px;height:1px;background:#fff}.viewport-crosshair span:last-child{position:absolute;width:1px;height:17px;background:#fff}.canvas-error{position:absolute;inset:10%;padding:40px;z-index:5;background:#101a1de8;border:1px solid var(--red);color:#fff;display:flex;flex-direction:column;justify-content:center}.canvas-error[hidden]{display:none}.canvas-error strong{font:30px var(--display)}.canvas-error p{color:var(--gold)}.canvas-error span{color:var(--dim)}.view-toolbar{display:flex;align-items:stretch;min-height:62px;border:1px solid var(--line);border-top:0;background:#152126}.group-label{display:flex;align-items:center;white-space:nowrap;gap:4px;margin-left:19px;font-size:10px;font-weight:650;letter-spacing:.15em;color:var(--main)}.group-label span{color:var(--muted)}.view-buttons{display:flex;justify-content:center;flex:1;gap:3px;min-width:0}.view{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dim);padding:0 14px;font-size:11px;white-space:nowrap}.view.active{border-bottom-color:var(--gold);color:var(--gold2)}.view:hover{background:#1e3035}.camera-btn{width:59px;background:transparent;border:0;border-left:1px solid var(--line);display:grid;place-items:center}.camera-btn svg{width:18px;height:18px;fill:none;stroke:var(--gold2);stroke-width:1.4}.under-stage{display:grid;grid-template-columns:130px 1fr auto;align-items:start;gap:20px;padding:31px 0;border-bottom:1px solid var(--line)}.section-index{font-size:16px;color:var(--gold);font-family:var(--display)}.section-index span{font:9px var(--sans);color:var(--muted);letter-spacing:.09em}.study-note strong{font:23px var(--display)}.study-note p{max-width:650px;color:var(--dim);font-size:12px;line-height:1.8;margin:9px 0 0}.education-tag{margin-top:2px;border:1px solid var(--line);padding:9px 12px;color:var(--muted);white-space:nowrap;font-size:9px;letter-spacing:.09em}.education-tag span{color:var(--gold);margin-left:6px}
.console{min-width:0}.console-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:1px 1px 20px}.console-heading h2{margin:5px 0 0;font:29px var(--display)}.console-version{border:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.12em;padding:7px 10px}.panel{border:1px solid var(--line);padding:19px 21px;margin-bottom:13px;background:linear-gradient(150deg,#19272b,#141e22)}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--gold);margin-bottom:20px}.panel-light{color:#8caaa7;font-size:9px;font-weight:500;letter-spacing:.03em}.state-badge{border:1px solid #5f7368;border-radius:2px;padding:3px 7px;color:#bed0bc;font-size:9px;letter-spacing:.09em}.state-badge.running{border-color:#88b2a0;background:#1c423d;color:#c6f0cf}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.metric{border-right:1px solid var(--line);min-width:0}.metric:last-child{border-right:0}.metric>span{display:block;color:var(--muted);font-size:9px;letter-spacing:.1em}.metric strong{display:block;font:29px var(--display);color:var(--main);margin:5px 0 2px;white-space:nowrap}.metric strong>span{font:12px var(--sans);color:var(--muted);margin-left:2px}.metric small{font-size:10px;color:var(--muted)}.controls{display:flex;gap:6px}.primary-action{background:var(--gold);color:#192124;border:1px solid var(--gold);font-size:12px;font-weight:750;letter-spacing:.04em;padding:13px 15px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:11px;flex:1}.primary-action:hover{background:var(--gold2)}.primary-action>span:first-child{font-size:13px}.icon-action{background:#253238;border:1px solid #3d4b4c;color:var(--main);font-size:11px;font-weight:650;letter-spacing:.03em;padding:0 12px}.icon-action:hover{border-color:var(--gold)}.icon-action span{color:var(--gold);padding-left:4px}.reset-action{font-size:21px;padding:0 12px}.phase{margin-top:21px}.phase-track{height:4px;background:#374347}.phase-fill{height:4px;width:0;background:linear-gradient(90deg,#9c7750,#efc58a);transition:width .065s linear}.phase-label{display:flex;justify-content:space-between;margin-top:8px;font-size:9px;letter-spacing:.12em;color:var(--muted)}.phase-label strong{color:var(--gold2);font-size:9px}.warning{background:#3b2a23;border-left:3px solid var(--gold);padding:9px 11px;color:#e2bca5;margin-top:15px;font-size:11px}.warning[hidden]{display:none}.panel-controls{padding-top:19px;padding-bottom:19px}.slider-heading{display:flex;align-items:center;justify-content:space-between;color:var(--main);font-size:12px;margin-top:4px}.slider-heading span small{color:var(--muted);font-size:10px}.slider-heading strong{font:23px var(--display);color:var(--gold2)}.slider-heading strong small{font:9px var(--sans);color:var(--muted)}.slider-heading.second{margin-top:22px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;margin:16px 0 8px;background:linear-gradient(to right,var(--gold) 0,var(--gold) 36%,#405055 36%,#405055 100%);cursor:pointer;border-radius:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:3px solid #172328;background:var(--gold2);box-shadow:0 0 0 1px var(--gold);border-radius:50%}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--gold2);border:2px solid #172328;box-shadow:0 0 0 1px var(--gold);border-radius:50%}.scale{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:var(--muted)}.pattern-panel{padding-bottom:16px}.pattern-panel .panel-heading{margin-bottom:8px}.pattern-help{margin:0 0 15px;color:var(--dim);font-size:11px;line-height:1.6}.pattern-controls{display:flex;gap:9px;margin-bottom:13px;align-items:center}.pattern-controls select{flex:1;min-width:0;background:#263439;color:var(--main);border:1px solid #405258;padding:9px 10px;font-size:12px}.text-button{background:transparent;border:0;color:var(--gold2);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 0}.text-button:hover{text-decoration:underline}.grid-holder{padding:12px;border:1px solid var(--line);background:#101a1e}.grid-head{display:flex;justify-content:space-between;margin-bottom:9px;color:var(--muted);font-size:9px;letter-spacing:.12em}.pattern-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}.pattern-grid button{aspect-ratio:1;min-width:0;min-height:0;border:1px solid #3a4a4a;background:#283539;padding:0;position:relative}.pattern-grid button[data-on="1"]{background:#be9359;border-color:#d4ab78}.pattern-grid button:hover{border-color:#fff;z-index:1}.pattern-grid button.active-card:after{content:'';position:absolute;inset:-2px;border-top:1px solid #e9ddc4;border-bottom:1px solid #e9ddc4;pointer-events:none}.legend{display:flex;gap:14px;flex-wrap:wrap;margin:13px 0 5px;font-size:9px;color:var(--dim)}.legend>span{display:flex;align-items:center;gap:6px}.square{width:10px;height:10px;display:inline-block;background:#283539;border:1px solid #576563}.square.up{background:#be9359;border-color:#c49c66}.square.current{background:#172328;border-top:2px solid #e9ddc4;border-bottom:2px solid #e9ddc4}.data-actions{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:13px;padding-top:5px}.pattern-footnote{color:var(--muted);font-size:9px;line-height:1.6;margin:10px 0 0}.footer{min-height:90px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.12em;color:var(--muted)}.footer b,.footer strong{color:var(--main)}.footer i{font-style:normal;color:var(--gold);padding:0 7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.toast{position:fixed;bottom:22px;right:25px;background:#30413e;color:#f3f0e8;border:1px solid var(--gold);padding:12px 18px;font-size:12px;box-shadow:0 12px 28px #0007;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .15s,transform .15s;z-index:50}.toast.show{opacity:1;transform:translateY(0)}dialog{width:min(530px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:#19272b;color:var(--main);padding:28px 33px;border:1px solid var(--gold);box-shadow:0 30px 120px #000c}dialog::backdrop{background:#060d10c9;backdrop-filter:blur(4px)}dialog h2{font:34px var(--display);margin:10px 0 15px}dialog p,dialog li{font-size:12px;color:var(--dim);line-height:1.75}dialog ol{padding-left:18px}dialog li{margin-bottom:10px}dialog li b{color:var(--main)}.modal-top{display:flex;justify-content:space-between;align-items:center}#closeGuide{background:transparent;border:0;color:var(--gold2);font-size:25px}.keyboard{display:flex;gap:11px;flex-wrap:wrap;margin:22px 0}.keyboard span{font-size:11px;color:var(--dim)}kbd{background:#314044;color:var(--gold2);border:1px solid #61706d;padding:4px 7px;font-size:10px;margin-right:3px}.disclaimer{border-left:2px solid var(--gold);padding-left:12px}.modal-top+.primary-action{width:100%}dialog .primary-action{width:100%;margin-top:16px}
@media(max-width:1200px){.page{padding:0 20px}.layout{grid-template-columns:minmax(0,1fr) 340px;gap:17px}.panel{padding-left:14px;padding-right:14px}.view{padding:0 8px;font-size:10px}.group-label{display:none}.education-tag{display:none}.under-stage{grid-template-columns:125px 1fr}}@media(max-width:890px){.layout{grid-template-columns:1fr}.page{padding:0 17px}.masthead{min-height:76px}.top-meta{display:none}.stage-top{padding-bottom:21px}.viewport-shell{height:min(65vh,530px)}.console{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.console-heading{grid-column:1/-1;margin-top:14px}.pattern-panel{grid-column:1/-1}.pattern-grid{max-width:450px;margin:auto;gap:5px}.grid-head{max-width:450px;margin:auto auto 8px}.footer{flex-wrap:wrap;gap:0 14px;padding:20px 0}}@media(max-width:600px){.brand-copy strong{font-size:14px}.brand-copy small{font-size:8px;letter-spacing:.12em}.brand-mark{width:40px;height:40px}.subtle-button{padding:7px 10px}.layout{padding-top:24px}.stage-top .eyebrow{font-size:9px;line-height:1.5}.stage-top h1{font-size:34px}.viewport-shell{height:460px}.viewport-top-left,.viewport-top-right{font-size:8px;top:13px}.viewport-top-left{left:10px}.viewport-top-right{right:10px}.viewer-tip{font-size:8px}.viewer-tip span{padding:0 2px}.viewport-foot{left:11px;right:11px;bottom:11px}.view-toolbar{flex-wrap:wrap}.view-buttons{justify-content:flex-start;overflow:auto}.view{padding:12px 7px;font-size:9px}.camera-btn{width:38px}.under-stage{display:block;padding:22px 0}.section-index{margin-bottom:10px}.study-note strong{font-size:22px}.console{display:block}.console-heading{margin-top:14px}.panel{padding:16px}.pattern-grid{gap:3px}.footer{font-size:8px;display:grid;gap:12px}}@media(prefers-reduced-motion:reduce){.phase-fill,.toast{transition:none}}