:root{--bg:#f4ecdc;--panel:#ece2cd;--panel-2:#e0d4ba;--line:rgba(13,36,64,.16);--line-2:rgba(13,36,64,.36);--ink:#0d2440;--ink-2:#1a3c66;--ink-3:#4a6890;--accent:#b8500e;--accent-hi:#1f5a3a;--warm:#c8851a;--cool:#1a3c66;--danger:#8b1e1e;--ok:#1f5a3a;--radius:0;--radius-lg:0;--font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--u:8px;--shadow-1:0 0 0 1px var(--line);--shadow-2:0 0 0 1px var(--line-2);--viewport-bg:#0d2440}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:13px;line-height:1.5;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:linear-gradient(rgba(13,36,64,.08) 1px,transparent 0),linear-gradient(90deg,rgba(13,36,64,.08) 1px,transparent 0),linear-gradient(rgba(13,36,64,.04) 1px,transparent 0),linear-gradient(90deg,rgba(13,36,64,.04) 1px,transparent 0);background-size:256px 256px,256px 256px,32px 32px,32px 32px}main{display:grid;grid-template-columns:280px 1fr 320px;grid-template-rows:56px 1fr 28px;grid-template-areas:"top top top" "side viewport inspect" "status status status";min-height:100vh;height:100vh;overflow:hidden}.topbar{grid-area:top;display:flex;align-items:stretch;gap:0;padding:0 12px 0 18px;border-bottom:2px solid var(--ink);background:linear-gradient(180deg,var(--panel) 0,var(--panel-2) 100%);box-shadow:0 1px 0 var(--line);position:relative;z-index:2;white-space:nowrap}.topbar:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}.topbar .brand{align-items:baseline;gap:10px;padding:0 16px 0 8px;align-self:stretch;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.topbar .brand,.topbar .topbar-stats{display:flex;border-right:1px solid var(--line-2);height:100%;align-items:center}.topbar .topbar-stats{gap:8px;padding:0 14px}.topbar .spacer{flex:1 1;min-width:12px;height:100%}.topbar .topbar-actions{display:flex;align-items:center;gap:2px;padding:0 4px 0 14px;border-left:1px solid var(--line-2);height:100%;flex-shrink:0;background:linear-gradient(180deg,transparent,rgba(13,36,64,.05))}.topbar .topbar-actions .btn-link{padding:5px 11px;margin:0 2px;font-size:9.5px}.topbar .topbar-templates{font-weight:600;letter-spacing:.18em}.topbar .topbar-actions .seg,.topbar .topbar-actions .seg-single{margin:0 4px;align-self:center}.topbar .topbar-actions>.badge{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:.1em;padding:4px 8px;margin:0 2px 0 8px;align-self:center}.topbar .seg{align-self:center}.topbar .seg button{padding:4px 11px}.source-stack{display:flex;flex-direction:column;gap:10px}.source-stack .row{margin-bottom:0}.source-stack [data-testid=loaded-info]{margin-top:0!important}.source-seg{margin:0;width:100%;background:var(--panel-2);border-color:var(--line-2)}.source-seg button{flex:1 1;padding:6px 10px;outline:none}.source-seg button.active{background:var(--panel);color:var(--ink);font-weight:600;border:1px solid var(--ink);margin:-1px;position:relative;z-index:1}.source-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.templates-modal-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px 24px;background:rgba(13,36,64,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.templates-modal-shell{width:min(720px,100%);max-height:min(86vh,640px);overflow:auto;border:2px solid var(--ink);background:var(--panel);box-shadow:0 12px 40px rgba(13,36,64,.18)}.templates-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 10px;border-bottom:1px solid var(--line-2);background:var(--panel-2)}.templates-modal-title{margin:0;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}.templates-modal-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;font-family:var(--font-ui);padding:0}.templates-modal-close:hover{background:var(--panel);color:var(--ink)}.templates-modal-lede{margin:0;padding:12px 18px 14px;font-size:12.5px;line-height:1.45;color:var(--ink-2);border-bottom:1px solid var(--line)}.templates-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px;gap:10px;padding:16px 18px 20px}.template-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px 14px 16px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .12s ease,background .12s ease}.template-card:hover{border-color:var(--ink);background:var(--panel-2)}.template-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.template-card-title{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.template-card-desc{font-size:11.5px;line-height:1.45;color:var(--ink-2)}.sidebar{grid-area:side;overflow-y:auto;border-right:1px solid var(--line-2);background:var(--panel);padding:16px 0 24px}.viewport-wrap{grid-area:viewport;position:relative;background:var(--viewport-bg);display:flex;align-items:stretch;justify-content:stretch;overflow:hidden}.viewport-wrap:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(216,232,255,.1) 1px,transparent 0),linear-gradient(90deg,rgba(216,232,255,.1) 1px,transparent 0),linear-gradient(rgba(216,232,255,.05) 1px,transparent 0),linear-gradient(90deg,rgba(216,232,255,.05) 1px,transparent 0);background-size:96px 96px,96px 96px,24px 24px,24px 24px;pointer-events:none;z-index:0}.inspector{grid-area:inspect;overflow-y:auto;border-left:1px solid var(--line-2);background:var(--panel);padding:16px 16px 24px}.statusbar{grid-area:status;display:flex;align-items:center;gap:14px;padding:0 16px;border-top:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow-x:auto}.brand{display:flex;align-items:baseline;gap:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.brand .logo{font-family:IBM Plex Sans,sans-serif;font-size:18px;font-weight:300;letter-spacing:-.01em;color:var(--ink);line-height:1}.brand .logo .accent{font-family:"IBM Plex Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);margin-left:2px}.brand .subtitle{font-size:9.5px;font-weight:600;color:var(--ink-2);letter-spacing:.22em;border-left:1px solid var(--line-2);padding-left:10px;margin-left:4px;white-space:nowrap}.brand .subtitle,.seg{font-family:var(--font-mono);text-transform:uppercase}.seg{display:inline-flex;align-self:center;margin:0 14px;border:1px solid var(--line-2);background:var(--bg);font-size:10px;letter-spacing:.16em;font-weight:500}.seg button,.seg.seg-single{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:var(--ink-2);border:0;padding:5px 14px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}.seg button+button{border-left:1px solid var(--line-2)}.seg button:hover{background:var(--panel-2);color:var(--ink)}.seg button.active{background:var(--ink);color:var(--bg);font-weight:600}.btn-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:var(--ink-2);border:1px solid var(--line-2);padding:5px 12px;margin:0 6px;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-radius:0;align-self:center}.btn-link:hover{background:var(--panel-2);color:var(--ink)}.btn-link.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.badge,.pill{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line-2);padding:3px 8px;border-radius:0;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}.pill .dot{width:6px;height:6px;background:var(--ok);border-radius:50%}.pill.dim{color:var(--ink-3);border-color:var(--line)}.pill.dim .dot{background:var(--ink-3)}.primary-action{background:var(--ink);color:var(--bg);font-family:var(--font-mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);padding:8px 16px;border-radius:0;cursor:pointer;transition:background .1s ease}.primary-action:hover{background:#143257;border-color:#143257}.primary-action:active{background:#1a3c66;border-color:#1a3c66}.group{padding:0 18px 12px;margin-bottom:14px}.group+.group{border-top:1px solid var(--line);padding-top:16px}.group-title{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;color:var(--ink);text-transform:uppercase;margin:0 0 10px;padding-top:6px;border-top:2px solid var(--ink);position:relative}.group-title:before{content:"";position:absolute;top:-2px;left:0;width:32px;height:3px;background:var(--ink)}.row{display:grid;grid-template-columns:70px 1fr;align-items:center;grid-gap:10px;gap:10px;font-size:11.5px;color:var(--ink-2);margin-bottom:8px}.row.stretch{grid-template-columns:1fr}.row>label{font-family:var(--font-mono);font-size:9.5px;font-weight:500;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase}.row>input[type=range]{width:100%}.row>input[type=checkbox]{justify-self:start}.row .with-value{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:10px;gap:10px}.row .with-value>.val{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);min-width:40px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-2);padding-bottom:1px}input[type=number],input[type=text],select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:0;padding:6px 10px;font-family:var(--font-mono);font-size:11px;line-height:1.3;transition:border-color .1s ease,background .1s ease}select{padding-right:24px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}input:hover,select:hover{border-color:var(--ink-2)}input:focus,select:focus{outline:none;border-color:var(--ink);background:#fff}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:26px;cursor:ew-resize;width:100%}input[type=range]::-webkit-slider-runnable-track{height:26px;background:linear-gradient(var(--ink),var(--ink)) 50% /100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 16px) 50% /100% 8px no-repeat;background-color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:26px;background:var(--ink);border:2px solid var(--bg);border-radius:0;margin-top:0;-webkit-transition:transform .1s ease;transition:transform .1s ease}input[type=range]:active::-webkit-slider-thumb{background:var(--accent)}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--bg);border:1.5px solid var(--ink);border-radius:0;position:relative;cursor:pointer;transition:background .1s}input[type=checkbox]:hover{background:var(--panel-2)}input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}input[type=checkbox]:checked:after{content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--bg);line-height:1;margin-top:-2px}button.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:0;padding:6px 12px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .1s ease}button.ghost:hover{background:var(--panel-2);border-color:var(--ink-2)}button.ghost:disabled{opacity:.4;cursor:not-allowed}.inspect-title{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;color:var(--ink);text-transform:uppercase;margin:0 0 10px;padding-top:6px;border-top:2px solid var(--ink);position:relative}.inspect-title:before{content:"";position:absolute;top:-2px;left:0;width:32px;height:3px;background:var(--ink)}.stat{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted var(--line);font-family:var(--font-mono);font-size:10.5px}.stat:last-child{border-bottom:0}.stat .k{color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase;font-size:9.5px}.stat .v{color:var(--ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stat .v.accent{color:var(--accent)}.canvas-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}.floating-legend{padding:8px 12px;border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:0;font-family:var(--font-mono);font-size:10.5px;z-index:2}.floating-legend,.overlay-panel{position:absolute;right:16px;bottom:16px;background:var(--panel);color:var(--ink)}.overlay-panel{left:16px;border:1px solid var(--ink);border-radius:0;overflow:hidden;z-index:3;box-shadow:4px 4px 0 var(--line-2)}.overlay-panel.right{left:auto;right:16px;top:16px;bottom:16px;width:520px}.panel-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--panel-2)}.panel-head .title{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}.panel-head .close{margin-left:auto}.panel-body{padding:14px}.statusbar .sep{opacity:.5}.statusbar .k,.statusbar .sep{color:var(--ink-3)}.statusbar .v{color:var(--ink);font-weight:500}.statusbar .v.accent{color:var(--accent)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}.control{display:inline-flex;align-items:center;gap:8px}.spacer{flex:1 1}@keyframes scithree-pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes scithree-fade-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}.viewport-wrap .group,.viewport-wrap section.group{background:var(--panel);color:var(--ink)}html[data-theme=dark]{--bg:#0d1320;--panel:#131b2c;--panel-2:#1a2438;--line:rgba(216,232,255,.1);--line-2:rgba(216,232,255,.22);--ink:#e8eef9;--ink-2:#b0bcd4;--ink-3:#6c7d99;--accent:#ff8d4a;--accent-hi:#6dd49a;--warm:#ffc857;--cool:#88aef0;--danger:#ff7a7a;--ok:#6dd49a;--viewport-bg:#050a16}html[data-theme=dark] body{background-image:linear-gradient(rgba(216,232,255,.06) 1px,transparent 0),linear-gradient(90deg,rgba(216,232,255,.06) 1px,transparent 0),linear-gradient(rgba(216,232,255,.03) 1px,transparent 0),linear-gradient(90deg,rgba(216,232,255,.03) 1px,transparent 0)}html[data-theme=dark] .stat{border-bottom-color:var(--line)}html[data-theme=dark] input[type=checkbox]:checked:after{color:var(--bg)}html[data-theme=dark] .primary-action{background:var(--ink);color:var(--bg);border-color:var(--ink)}html[data-theme=dark] .primary-action:hover{background:#b0bcd4;border-color:#b0bcd4}html[data-theme=dark] .templates-modal-backdrop{background:rgba(0,0,0,.55)}html[data-theme=dark] .templates-modal-shell{box-shadow:0 16px 48px rgba(0,0,0,.45)}html[data-theme=dark] .template-card{background:var(--panel)}html[data-theme=dark] .template-card:hover{background:var(--panel-2)}html[data-theme=dark] input[type=range]::-webkit-slider-thumb{border-color:var(--bg)}