:root{--ink:#0b0f14;--graphite:#151c24;--graphite-raised:#1b2530;--paper:#f4f1e8;--paper-deep:#e9e4d8;--signal-cyan:#69e6f7;--signal-cyan-soft:#b9f5fb;--ember:#ff6b57;--steel:#8b98a8;--steel-light:#c7d0d9;--line:#2a3542;--line-light:#d1d7d9;--font-ui:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;--font-code:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:4px;--radius-md:8px;--border-thin:1px;--focus-ring:0 0 0 2px var(--ink), 0 0 0 4px var(--signal-cyan);--motion-fast:.16s;--motion-base:.22s;--ease-out:cubic-bezier(.16, 1, .3, 1);--diagram-primary:#d8eceb;--diagram-border:#50727c;--diagram-text:#20303a;--diagram-line:#50727c;--diagram-accent:#69e6f7;--diagram-font:var(--font-ui);--diagram-font-size:16px}[data-preset=light]{--diagram-primary:#d8eceb;--diagram-border:#50727c;--diagram-text:#20303a;--diagram-line:#50727c;--diagram-accent:#69e6f7;--diagram-surface:#f4f1e8}[data-preset=dark]{--diagram-primary:#304c63;--diagram-border:#69e6f7;--diagram-text:#f4f1e8;--diagram-line:#69e6f7;--diagram-accent:#ff6b57;--diagram-surface:#151c24}[data-preset=terminal]{--diagram-primary:#183d2e;--diagram-border:#8ef0b4;--diagram-text:#d9ffe5;--diagram-line:#8ef0b4;--diagram-accent:#f2d479;--diagram-surface:#07120f}[data-preset=paper]{--diagram-primary:#f1d7bb;--diagram-border:#a76b47;--diagram-text:#3f3028;--diagram-line:#a76b47;--diagram-accent:#ff6b57;--diagram-surface:#f4f1e8}[data-preset=architecture]{--diagram-primary:#cad9df;--diagram-border:#356575;--diagram-text:#19313c;--diagram-line:#356575;--diagram-accent:#69e6f7;--diagram-surface:#e6edf0}:where(*){box-sizing:border-box}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:root{color-scheme:dark;font-family:var(--font-ui);background:var(--ink);color:var(--steel-light)}body{background:var(--ink);min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button,select,input[type=color],input[type=range]{cursor:pointer}button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{box-shadow:var(--focus-ring);outline:none}.app-shell{background:var(--ink);grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.topbar{align-items:center;gap:var(--space-4);min-height:72px;padding:0 var(--space-6);border-bottom:var(--border-thin) solid var(--line);background:#0b0f14f5;grid-template-columns:1fr auto 1fr;display:grid}.brand,.topbar-actions,.topbar-status,.status-badge,.button,.panel-head,.panel-foot,.stage-status,.color-field,.color-field__control,.toggle-field,.reset-button,.app-footer,.stage-caption{align-items:center;display:flex}.brand{gap:var(--space-3);min-width:0;color:var(--paper);text-decoration:none}.brand-mark{width:30px;height:30px;color:var(--signal-cyan);border:var(--border-thin) solid var(--signal-cyan);border-radius:50%;place-items:center;display:grid}.brand-name{text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-code);letter-spacing:-.01em;font-size:13px;font-weight:600;overflow:hidden}.topbar-status{justify-content:center;gap:var(--space-2)}.status-badge{border:var(--border-thin) solid var(--line);border-radius:var(--radius-sm);min-height:28px;color:var(--steel);font-family:var(--font-code);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;gap:7px;padding:0 10px;font-size:10px}.status-badge__dot{background:var(--steel);border-radius:50%;width:6px;height:6px}.status-badge--active{color:var(--signal-cyan-soft);border-color:#69e6f747}.status-badge--active .status-badge__dot{background:var(--signal-cyan);box-shadow:0 0 0 3px #69e6f714}.status-badge--warning{color:var(--ember);border-color:#ff6b5759}.status-badge--warning .status-badge__dot{background:var(--ember)}.topbar-actions{justify-content:flex-end;gap:var(--space-2)}.button{justify-content:center;gap:var(--space-2);border:var(--border-thin) solid transparent;border-radius:var(--radius-sm);min-height:36px;transition:border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);padding:0 13px;font-size:12px;font-weight:600}.button:not(:disabled):hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.42}.button--primary{color:var(--ink);background:var(--signal-cyan)}.button--primary:not(:disabled):hover{background:var(--signal-cyan-soft)}.button--secondary{color:var(--steel-light);border-color:var(--line);background:0 0}.button--secondary:not(:disabled):hover,.button--quiet:not(:disabled):hover{color:var(--paper);border-color:var(--steel);background:var(--graphite-raised)}.button--quiet{color:var(--steel);background:0 0;border-color:#0000}.workbench{min-height:0;padding:var(--space-5);gap:var(--space-3);grid-template-columns:minmax(270px,.8fr) minmax(360px,1.25fr) minmax(230px,.5fr);display:grid}.panel{border:var(--border-thin) solid var(--line);background:var(--graphite);min-width:0;min-height:0;overflow:hidden}.panel--editor,.panel--style{grid-template-rows:auto 1fr auto;display:grid}.panel--artifact{border-color:var(--line-light);background:var(--paper);grid-template-rows:auto 1fr;display:grid}.panel-head{justify-content:space-between;gap:var(--space-3);min-height:70px;padding:var(--space-4) var(--space-5);border-bottom:var(--border-thin) solid var(--line)}.panel-head--light{border-color:var(--line-light)}.panel-label{color:var(--steel);font-family:var(--font-code);letter-spacing:.13em;margin-bottom:5px;font-size:9px;font-weight:600;display:block}.panel-head h2{color:var(--paper);letter-spacing:-.025em;margin:0;font-size:19px;font-weight:500}.panel-head--light h2{color:var(--ink)}.panel-meta,.stage-status{color:var(--steel);font-family:var(--font-code);white-space:nowrap;font-size:10px}.stage-status{color:#61737a}.editor-wrap{min-height:0;padding:var(--space-3);background:var(--graphite)}.source-input{resize:none;width:100%;height:100%;min-height:390px;padding:var(--space-4);border:var(--border-thin) solid var(--line);border-radius:var(--radius-sm);color:#d7e4e6;caret-color:var(--signal-cyan);font-family:var(--font-code);tab-size:2;background:#10171e;font-size:13px;line-height:1.75;display:block}.source-input::selection{color:var(--ink);background:var(--signal-cyan)}.source-feedback{gap:var(--space-1);padding:var(--space-3) var(--space-5);border-top:var(--border-thin) solid #ff6b5759;color:var(--ember);background:#ff6b5714;font-size:11px;line-height:1.45;display:grid}.source-feedback[hidden]{display:none}.source-feedback strong{font-family:var(--font-code);letter-spacing:.05em;text-transform:uppercase;font-size:10px}.panel-foot{justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);color:var(--steel);font-size:11px;line-height:1.45}.keyboard-hint{color:#607080;font-family:var(--font-code);white-space:nowrap;align-items:center;gap:3px;font-size:9px;display:inline-flex}kbd{border:var(--border-thin) solid var(--line);color:var(--steel-light);background:var(--graphite-raised);font:inherit;border-radius:2px;padding:2px 4px}.artifact-stage{min-height:0;padding:var(--space-5);background:var(--diagram-surface,var(--paper));transition:background var(--motion-base) var(--ease-out)}.artifact-stage.is-transparent{background-color:var(--paper);background-image:linear-gradient(45deg,#0b0f140f 25%,#0000 25%),linear-gradient(-45deg,#0b0f140f 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0b0f140f 75%),linear-gradient(-45deg,#0000 75%,#0b0f140f 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.stage-surface{width:100%;height:100%;min-height:500px;padding:var(--space-6);border:var(--border-thin) solid #0b0f141f;background:#f4f1e899;place-items:center;display:grid;position:relative}.stage-state{justify-items:center;gap:var(--space-3);max-width:32ch;color:var(--diagram-text);text-align:center;display:grid}.stage-state[hidden],.stage-notice[hidden]{display:none}.stage-state strong,.stage-notice strong{font-size:15px;font-weight:600}.stage-state span,.stage-notice span{color:var(--diagram-border);font-size:12px;line-height:1.5}.stage-state--empty{align-content:center;min-height:120px}.stage-state__mark{border:var(--border-thin) solid var(--diagram-border);width:36px;height:36px;color:var(--diagram-border);font-family:var(--font-code);border-radius:50%;place-items:center;font-size:20px;font-weight:400;display:grid}.stage-state--rendering{align-content:center;min-height:120px}.stage-state--ready{align-content:stretch;width:100%;max-width:none;min-height:0}.preview-viewport{border:var(--border-thin) solid #0b0f1414;cursor:grab;isolation:isolate;touch-action:none;background:#f4f1e852;place-items:center;width:100%;min-height:420px;display:grid;position:relative;overflow:hidden}.preview-viewport:focus-visible{box-shadow:var(--focus-ring);outline:none}.preview-viewport.is-dragging{cursor:grabbing}.preview-layer{width:100%;min-height:100%;transform:translate3d(var(--preview-pan-x,0px), var(--preview-pan-y,0px), 0) scale(var(--preview-scale,1));transform-origin:50%;transition:transform var(--motion-fast) var(--ease-out);will-change:transform;place-items:center;display:grid}.preview-layer.is-dragging{transition:none}.preview-pan-hint{right:var(--space-3);bottom:var(--space-3);color:var(--diagram-border);font-family:var(--font-code);letter-spacing:.03em;pointer-events:none;background:#f4f1e8c7;padding:4px 6px;font-size:9px;position:absolute}.preview-controls{justify-content:center;align-items:center;gap:var(--space-1);margin-top:var(--space-3);display:flex}.preview-control,.preview-fit{min-width:30px;min-height:30px;padding:0 var(--space-2);border:var(--border-thin) solid #0b0f1429;border-radius:var(--radius-sm);color:var(--diagram-text);font-family:var(--font-code);background:#f4f1e89e;place-items:center;font-size:13px;font-weight:600;display:inline-grid}.preview-fit{letter-spacing:.04em;text-transform:uppercase;font-size:10px}.preview-control:hover,.preview-fit:hover{border-color:var(--diagram-border);background:#f4f1e8f0}.preview-zoom{min-width:46px;color:var(--diagram-border);font-family:var(--font-code);text-align:center;font-size:10px}.preview-control-divider{width:1px;height:18px;margin:0 var(--space-1);background:#0b0f1429}.scaffold-preview,.rendered-diagram{place-items:center;width:100%;display:grid}.scaffold-preview[hidden],.rendered-diagram[hidden]{display:none}.rendered-diagram>svg{width:min(100%,760px);height:auto;max-height:100%;display:block;overflow:visible}.stage-loader{border:2px solid color-mix(in srgb, var(--diagram-border) 25%, transparent);border-top-color:var(--diagram-accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite stage-spin}.stage-notice{inset:var(--space-4) var(--space-4) auto;z-index:1;gap:var(--space-1);padding:var(--space-3) var(--space-4);border:var(--border-thin) solid #ff6b576b;color:var(--ember);background:#f4f1e8f0;font-size:11px;line-height:1.45;display:grid;position:absolute}.stage-notice--timeout{color:var(--diagram-border);border-color:#69727c7a}.stage-alternative{inset:auto var(--space-4) var(--space-3);color:var(--diagram-border);font-family:var(--font-code);text-align:center;margin:0;font-size:9px;line-height:1.4;position:absolute}@keyframes stage-spin{to{transform:rotate(360deg)}}.artifact-stage.is-transparent .stage-surface{background:#f4f1e88c}.sample-diagram{width:min(100%,760px);height:auto;overflow:visible}.diagram-line{stroke:var(--diagram-line);stroke-width:2px;vector-effect:non-scaling-stroke}.diagram-arrow{fill:none;stroke:var(--diagram-line);stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;vector-effect:non-scaling-stroke}.diagram-node{fill:var(--diagram-primary);stroke:var(--diagram-border);stroke-width:2px;vector-effect:non-scaling-stroke}.diagram-node--accent{fill:var(--diagram-accent)}.diagram-port{fill:var(--diagram-surface,var(--paper));stroke:var(--diagram-border);stroke-width:2px}.diagram-label,.diagram-note{fill:var(--diagram-text);font-family:var(--diagram-font);font-size:var(--diagram-font-size);font-weight:500}.diagram-label--small{font-family:var(--font-code);letter-spacing:.1em;font-size:10px;font-weight:600}.diagram-note{fill:var(--diagram-border);font-family:var(--font-code);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.stage-caption{justify-content:center;gap:var(--space-2);margin-top:var(--space-5);color:var(--diagram-border);font-family:var(--font-code);letter-spacing:.04em;text-align:center;font-size:10px}.caption-mark,.footer-rule{background:var(--diagram-accent);width:24px;height:1px;display:inline-block}.style-scroll{min-height:0;padding:var(--space-4) var(--space-5) var(--space-5);overflow:auto}.style-section{padding:0 0 var(--space-5);border:0;margin:0}.style-section+.style-section{padding-top:var(--space-5);border-top:var(--border-thin) solid var(--line)}.style-section legend{margin-bottom:var(--space-3);color:var(--steel);font-family:var(--font-code);letter-spacing:.08em;text-transform:uppercase;padding:0;font-size:10px}.preset-list{gap:var(--space-1);display:grid}.preset-option{align-items:center;gap:var(--space-3);border:var(--border-thin) solid transparent;border-radius:var(--radius-sm);width:100%;min-height:38px;color:var(--steel-light);text-align:left;background:0 0;grid-template-columns:42px 1fr;padding:0 9px;font-size:12px;display:grid}.preset-option:hover,.preset-option.is-selected{color:var(--paper);border-color:var(--line);background:var(--graphite-raised)}.preset-option.is-selected{border-color:#69e6f76b}.preset-swatches{border:var(--border-thin) solid #f4f1e838;border-radius:2px;height:14px;display:flex;overflow:hidden}.preset-swatches span{background:var(--swatch-color);flex:1}.color-grid{gap:var(--space-2);display:grid}.color-field{justify-content:space-between;gap:var(--space-3);min-height:30px;color:var(--steel-light);font-size:12px}.color-field__control{gap:var(--space-2)}.color-field input[type=color]{border:var(--border-thin) solid var(--line);background:0 0;border-radius:3px;width:22px;height:22px;padding:0;overflow:hidden}.color-field code,.range-field output{color:var(--steel);font-family:var(--font-code);font-size:10px}.select-field,.range-field,.toggle-field{gap:var(--space-2);color:var(--steel-light);font-size:12px;display:grid}.select-field+.range-field{margin-top:var(--space-4)}.select-field select{border:var(--border-thin) solid var(--line);border-radius:var(--radius-sm);width:100%;min-height:34px;color:var(--steel-light);background:var(--graphite-raised);padding:0 9px;font-size:11px}.range-field>span{justify-content:space-between;display:flex}.range-field input{width:100%;accent-color:var(--signal-cyan)}.toggle-field{cursor:pointer;grid-template-columns:1fr auto;align-items:center;position:relative}.toggle-field input{opacity:0;position:absolute}.toggle-track{border:var(--border-thin) solid var(--line);background:var(--graphite-raised);width:36px;height:20px;transition:background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);border-radius:10px;align-items:center;padding:2px;display:flex}.toggle-track span{background:var(--steel);width:14px;height:14px;transition:transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);border-radius:50%}.toggle-field input:checked+.toggle-track{border-color:var(--signal-cyan);background:#69e6f729}.toggle-field input:checked+.toggle-track span{background:var(--signal-cyan);transform:translate(16px)}.toggle-field input:focus-visible+.toggle-track{box-shadow:var(--focus-ring)}.reset-button{gap:var(--space-2);color:var(--steel);background:0 0;border:0;padding:0;font-size:11px}.reset-button:hover{color:var(--signal-cyan)}.app-footer{justify-content:space-between;gap:var(--space-4);min-height:44px;padding:0 var(--space-6);border-top:var(--border-thin) solid var(--line);color:var(--steel);font-family:var(--font-code);letter-spacing:.03em;font-size:10px}.app-footer>span:first-child{align-items:center;gap:var(--space-2);display:inline-flex}.footer-meta{align-items:center;gap:var(--space-4);color:#607080;display:inline-flex}.portfolio-link{color:var(--steel-light);transition:color var(--motion-fast) var(--ease-out);text-decoration:none}.portfolio-link:hover,.portfolio-link:focus-visible{color:var(--signal-cyan)}@media (width<=1180px){.workbench{grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr)}.panel--style{grid-column:1/-1;min-height:auto}.style-scroll{align-items:start;gap:var(--space-5);grid-template-columns:1.15fr 1fr 1fr .9fr auto;display:grid}.style-section,.style-section+.style-section{border:0;padding:0}.reset-button{align-self:end;min-height:32px}}@media (width<=820px){.topbar{padding:var(--space-3) var(--space-4);grid-template-columns:1fr auto}.topbar-status,.topbar-actions .button span{display:none}.topbar-actions .button{width:38px;padding:0}.workbench{padding:var(--space-3);flex-direction:column;display:flex}.panel--editor{min-height:430px}.source-input{min-height:300px;font-size:16px}.panel--artifact{min-height:auto}.stage-surface{height:auto;min-height:420px;padding:var(--space-4)}.preview-viewport{min-height:300px}.style-scroll{display:block}.style-section,.style-section+.style-section{padding:var(--space-4) 0;border-top:var(--border-thin) solid var(--line)}.style-section:first-child{border-top:0;padding-top:0}.stage-alternative{margin-top:var(--space-3);position:static}.reset-button{margin-top:var(--space-4)}.app-footer{align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);flex-direction:column}}@media (forced-colors:active){.button,.panel,.source-input,.preset-option,.select-field select,.color-field input[type=color],.toggle-track,.stage-notice{border-color:canvastext}.status-badge__dot,.caption-mark,.footer-rule{background:canvastext}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}.stage-loader{animation:none}.preview-layer{transition:none}}