:root{--color-ink-strong:#f7f8ff;--color-ink:#c6cce0;--color-ink-muted:#8992ad;--color-ink-inverse:#10131d;--color-bg:#090b12;--color-bg-elevated:#10131d;--color-surface:#151a27;--color-surface-raised:#1b2232;--color-surface-soft:#111827;--color-border:#273149;--color-border-strong:#3a496a;--color-accent:#92a7ff;--color-accent-strong:#738cff;--color-accent-soft:#1b2750;--color-success:#85d8b1;--color-success-soft:#15382f;--color-danger:#ff9eaa;--color-danger-soft:#41212d;--color-warning:#f4c77d;--color-focus:#c2ceff;--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-pill:999rem;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-section:clamp(1.75rem, 4vw, 3rem);--text-2xl:clamp(2.5rem, 7vw, 5.75rem);--leading-tight:1.05;--leading-snug:1.25;--leading-normal:1.6;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--tracking-tight:-.02em;--tracking-wide:.08em;--shadow-card:0 1.5rem 4rem #00000038;--shadow-glow:0 1.5rem 5rem #738cff2e;--shadow-focus:0 0 0 .2rem #c2ceff33;--shadow-signal:0 0 0 .25rem var(--color-success-soft);--transition-fast:.16s ease;--transition-normal:.24s ease;--content-max:78rem;--control-height:3rem;--border-width:1px;--opacity-muted:.72}
*{box-sizing:border-box}html{background:var(--color-bg);scroll-behavior:smooth}body{margin:var(--space-0);background:var(--color-bg);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal)}button,input,textarea{color:inherit;font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}.demo-shell{background:radial-gradient(circle at 14% 6%, var(--color-accent-soft), transparent 30rem), var(--color-bg);min-height:100vh;overflow:hidden}.demo-width{width:min(calc(100% - (var(--space-8) * 2)), var(--content-max));margin-inline:auto}.demo-header{justify-content:space-between;align-items:center;gap:var(--space-6);border-bottom:var(--border-width) solid var(--color-border);min-height:5rem;display:flex}.demo-brand,.demo-nav,.demo-version,.demo-local-label,.demo-security-note,.demo-result-heading,.demo-result-status,.demo-terminal-bar,.demo-terminal-footer{align-items:center;display:inline-flex}.demo-brand{gap:var(--space-2);color:var(--color-ink-strong);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}.demo-brand-mark{width:var(--space-10);height:var(--space-10);margin-right:var(--space-1);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-accent);place-items:center;display:grid}.demo-mark-icon{width:var(--space-8);height:var(--space-8);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px}.demo-brand-slash,.demo-brand-muted{color:var(--color-ink-muted);font-weight:var(--weight-regular)}.demo-brand-slash{color:var(--color-border-strong)}.demo-nav{gap:var(--space-6);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.demo-nav a{transition:color var(--transition-fast)}.demo-nav a:hover{color:var(--color-ink-strong)}.demo-header-actions,.demo-project-links{align-items:center;display:inline-flex}.demo-header-actions{gap:var(--space-6)}.demo-project-links{gap:var(--space-2)}.demo-icon-button{width:var(--control-height);height:var(--control-height);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink-muted);transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);place-items:center;display:inline-grid}.demo-icon-button:hover{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-focus)}.demo-icon-button:focus-visible{box-shadow:var(--shadow-focus);outline:none}.demo-social-icon{width:var(--text-xl);height:var(--text-xl);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px}.demo-social-icon-filled{fill:currentColor;stroke:none}.demo-version{min-height:1.75rem;padding-inline:var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-accent)}.demo-hero{align-items:center;gap:var(--space-16);padding-block:var(--space-20) var(--space-16);grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr);display:grid}.demo-hero-copy{max-width:42rem}.demo-eyebrow{margin:var(--space-0) var(--space-0) var(--space-5);color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);line-height:var(--leading-snug);text-transform:uppercase}h1,h2,h3,p{margin-top:var(--space-0)}h1,h2,h3{color:var(--color-ink-strong);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}h1{max-width:10ch;margin-bottom:var(--space-6);font-size:var(--text-2xl);line-height:var(--leading-tight)}h2{margin-bottom:var(--space-0);font-size:var(--text-section);line-height:var(--leading-tight)}h3{font-size:var(--text-lg);line-height:var(--leading-snug)}code,pre{font-family:var(--font-mono)}.demo-hero-description{max-width:38rem;margin-bottom:var(--space-8);color:var(--color-ink);font-size:var(--text-lg)}.demo-hero-description code{color:var(--color-focus);font-size:var(--text-md)}.demo-hero-actions{align-items:center;gap:var(--space-5);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.demo-local-label{gap:var(--space-2);color:var(--color-success);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.demo-local-label:before{border-radius:var(--radius-pill);background:var(--color-success);width:.45rem;height:.45rem;box-shadow:var(--shadow-signal);content:""}.demo-chip-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.demo-chip{padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs)}.demo-button{min-height:var(--control-height);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:var(--border-width) solid transparent;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);display:inline-flex}.demo-button:hover:not(:disabled){transform:translateY(-.1rem)}.demo-button:focus-visible,.demo-mode-tab:focus-visible,.demo-copy-button:focus-visible,.demo-file-picker:focus-visible,.demo-upload-link:focus-visible,.demo-brand:focus-visible{box-shadow:var(--shadow-focus);outline:none}.demo-button-primary{background:var(--color-accent);color:var(--color-ink-inverse)}.demo-button-primary:hover:not(:disabled){background:var(--color-accent-strong);box-shadow:var(--shadow-glow)}.demo-button-secondary{border-color:var(--color-border-strong);background:var(--color-surface-raised);color:var(--color-ink-strong)}.demo-button-secondary:hover:not(:disabled),.demo-button-quiet:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-focus)}.demo-button-quiet{border-color:var(--color-border);color:var(--color-ink);background:0 0}.demo-button:disabled{opacity:var(--opacity-muted)}.demo-button-full{width:100%}.demo-inline-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:1.15rem;height:1.15rem}.demo-terminal{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-xl);background:var(--color-bg-elevated);box-shadow:var(--shadow-card);overflow:hidden}.demo-terminal-bar{gap:var(--space-2);min-height:3rem;padding-inline:var(--space-5);border-bottom:var(--border-width) solid var(--color-border);background:var(--color-surface-soft)}.terminal-dot{border-radius:var(--radius-pill);width:.55rem;height:.55rem}.terminal-dot-red{background:var(--color-danger)}.terminal-dot-yellow{background:var(--color-warning)}.terminal-dot-green{background:var(--color-success)}.terminal-path{margin-left:var(--space-3);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs)}.demo-terminal-body{min-height:16rem;padding:var(--space-8) var(--space-6);color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-normal)}.demo-terminal-body p{margin-bottom:var(--space-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.terminal-purple{color:var(--color-accent)}.terminal-green{color:var(--color-success)}.terminal-comment{color:var(--color-ink-muted)}.demo-terminal-footer{justify-content:space-between;gap:var(--space-4);min-height:3.5rem;padding-inline:var(--space-6);border-top:var(--border-width) solid var(--color-border);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.demo-section{padding-top:var(--space-24)}.demo-section-heading{justify-content:space-between;align-items:end;gap:var(--space-8);margin-bottom:var(--space-8);display:flex}.demo-section-heading>p{max-width:27rem;margin-bottom:var(--space-1);color:var(--color-ink-muted);font-size:var(--text-sm)}.demo-card{padding:var(--space-8);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg-elevated);box-shadow:var(--shadow-card)}.demo-mode-tabs{gap:var(--space-1);width:fit-content;margin-bottom:var(--space-8);padding:var(--space-1);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft);display:flex}.demo-mode-tab{min-height:2.5rem;padding:var(--space-2) var(--space-5);border-radius:var(--radius-sm);color:var(--color-ink-muted);font-size:var(--text-sm);transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:0}.demo-mode-tab-active{background:var(--color-surface-raised);color:var(--color-ink-strong)}.demo-control-bar{justify-content:space-between;align-items:end;gap:var(--space-8);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:var(--border-width) solid var(--color-border);display:flex}.demo-password-control{width:min(100%,30rem)}.demo-field-label{margin-bottom:var(--space-2);color:var(--color-ink-strong);font-size:var(--text-sm);font-weight:var(--weight-medium);display:block}.demo-input,.demo-textarea{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);width:100%;color:var(--color-ink-strong);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.demo-input{min-height:var(--control-height);padding:var(--space-3) var(--space-4)}.demo-input::placeholder,.demo-textarea::placeholder{color:var(--color-ink-muted);opacity:var(--opacity-muted)}.demo-input:focus,.demo-textarea:focus{border-color:var(--color-focus);box-shadow:var(--shadow-focus)}.demo-security-note{gap:var(--space-2);padding-bottom:var(--space-3);color:var(--color-success);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;flex:none}.demo-security-dot{border-radius:var(--radius-pill);background:var(--color-success);width:.45rem;height:.45rem;box-shadow:var(--shadow-signal)}.demo-playground-grid{gap:var(--space-8);grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);display:grid}.demo-editor-panel,.demo-result-panel{min-width:0}.demo-textarea{resize:vertical;min-height:17rem;padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-normal)}.demo-button-row{gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;display:flex}.demo-result-panel{padding-left:var(--space-8);border-left:var(--border-width) solid var(--color-border)}.demo-result-heading{justify-content:space-between;gap:var(--space-4)}.demo-result-heading .demo-field-label{margin-bottom:var(--space-0)}.demo-result-status{min-height:1.5rem;padding-inline:var(--space-2);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-pill);color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase}.demo-payload-box{justify-content:center;gap:var(--space-3);min-height:12rem;margin-block:var(--space-4) var(--space-5);padding:var(--space-5);border:var(--border-width) dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);overflow-wrap:anywhere;flex-direction:column;display:flex}.demo-payload-box strong{color:var(--color-ink-strong);font-size:var(--text-xl);font-weight:var(--weight-medium)}.demo-payload-box small{color:var(--color-success);font-size:var(--text-xs)}.demo-help-text{margin:var(--space-4) var(--space-0) var(--space-0);color:var(--color-ink-muted);font-size:var(--text-xs)}.demo-notice{margin:var(--space-8) var(--space-0) var(--space-0);padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm)}.demo-notice-success{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success)}.demo-notice-error{border-color:var(--color-danger);background:var(--color-danger-soft);color:var(--color-danger)}.demo-notice-info{border-color:var(--color-border-strong);background:var(--color-surface-soft);color:var(--color-ink)}.demo-visually-hidden{width:var(--space-1);height:var(--space-1);clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;position:absolute;overflow:hidden}.demo-file-picker{align-items:center;gap:var(--space-4);width:100%;min-height:8rem;padding:var(--space-5);border:var(--border-width) dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface-soft);text-align:left;transition:background-color var(--transition-fast), border-color var(--transition-fast);display:flex}.demo-file-picker:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}.demo-file-picker-icon{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);width:2.75rem;height:2.75rem;color:var(--color-accent);font-size:var(--text-xl);flex:none;place-items:center;display:grid}.demo-file-picker strong,.demo-file-picker small{display:block}.demo-file-picker strong{color:var(--color-ink-strong);font-size:var(--text-sm);font-weight:var(--weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-file-picker small{margin-top:var(--space-2);color:var(--color-ink-muted);font-size:var(--text-xs)}.demo-upload-link{margin-top:var(--space-5);color:var(--color-accent);cursor:pointer;font-family:var(--font-mono);font-size:var(--text-xs);display:inline-block}.demo-upload-link:hover{color:var(--color-focus)}.demo-file-state-list{gap:var(--space-1);margin-block:var(--space-4) var(--space-5);padding:var(--space-2) var(--space-0);border-block:var(--border-width) solid var(--color-border);display:grid}.demo-file-state-row{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:2.5rem;color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);display:flex}.demo-file-state-row strong{color:var(--color-ink-strong);font-weight:var(--weight-medium)}.demo-code-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.demo-code-card{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);overflow:hidden}.demo-code-card-heading{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:3.5rem;padding-inline:var(--space-5);border-bottom:var(--border-width) solid var(--color-border);color:var(--color-ink-strong);font-size:var(--text-sm);font-weight:var(--weight-medium);display:flex}.demo-copy-button{padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface-soft);color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);transition:background-color var(--transition-fast), border-color var(--transition-fast)}.demo-copy-button:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}.demo-code-card pre{min-height:14rem;margin:var(--space-0);padding:var(--space-6) var(--space-5);color:var(--color-ink);font-size:var(--text-xs);line-height:var(--leading-normal);overflow-x:auto}.demo-principles{gap:var(--space-4);padding-top:var(--space-24);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.demo-principle{min-height:13rem;padding:var(--space-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-soft)}.demo-principle-index{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}.demo-principle h3{margin-block:var(--space-8) var(--space-3)}.demo-principle code{margin-bottom:var(--space-4);color:var(--color-focus);font-size:var(--text-xs);overflow-wrap:anywhere;display:block}.demo-principle p{margin-bottom:var(--space-0);color:var(--color-ink-muted);font-size:var(--text-sm)}.demo-footer{justify-content:space-between;gap:var(--space-4);margin-top:var(--space-24);padding-block:var(--space-6);border-top:var(--border-width) solid var(--color-border);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;display:flex}@media (max-width:60rem){.demo-hero{gap:var(--space-8);grid-template-columns:minmax(0,1fr) minmax(18rem,.8fr)}.demo-playground-grid{grid-template-columns:minmax(0,1fr)}.demo-result-panel{padding-top:var(--space-6);padding-left:var(--space-0);border-top:var(--border-width) solid var(--color-border);border-left:0}}@media (max-width:48rem){.demo-width{width:min(calc(100% - (var(--space-6) * 2)), var(--content-max))}.demo-nav a{display:none}.demo-hero{padding-block:var(--space-16) var(--space-12);grid-template-columns:1fr}.demo-section,.demo-principles{padding-top:var(--space-16)}.demo-section-heading,.demo-control-bar{align-items:flex-start;gap:var(--space-4);flex-direction:column}.demo-security-note{padding-bottom:var(--space-0)}.demo-code-grid,.demo-principles{grid-template-columns:1fr}.demo-card{padding:var(--space-5)}}@media (max-width:32rem){.demo-header{min-height:4.5rem}.demo-header-actions{gap:var(--space-3)}.demo-project-links{gap:var(--space-1)}.demo-icon-button{width:var(--space-8);height:var(--space-8)}.demo-brand-muted,.demo-brand-slash{display:none}.demo-hero-actions,.demo-hero-actions .demo-button,.demo-button-row,.demo-button-row .demo-button{width:100%}.demo-button-row{flex-direction:column}.demo-terminal-body{padding-inline:var(--space-4)}.demo-terminal-footer,.demo-footer{flex-direction:column;align-items:flex-start}}