:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f8fafc;--bg-deep:#f1f5f9;--surface:#fffc;--surface-strong:#fffffff2;--surface-border:#00000014;--surface-border-strong:#0000001f;--text:#0f172a;--muted:#475569;--muted-soft:#94a3b8;--accent:#6366f1;--accent-strong:#4f46e5;--accent-soft:#6366f11a;--accent-glow:#6366f14d;--shadow:0 20px 50px #0000001a;--shadow-soft:0 10px 30px #0000000d;--code-bg:#1e293b;--code-border:#6366f11a;--code-text:#f8fafc;--code-comment:#94a3b8;--code-directive:#ec4899;--code-keyword:#818cf8;--code-type:#2dd4bf;--code-number:#fbbf24;--code-string:#22c55e;--code-builtin:#a855f7;--error-bg:#ef44440d;--error-text:#dc2626;--focus:#6366f166;--radius-xl:24px;--radius-lg:18px;--radius-md:12px;--radius-sm:8px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#050507;--bg-deep:#0a0a0f;--surface:#121218b3;--surface-strong:#1a1a24e6;--surface-border:#ffffff14;--surface-border-strong:#ffffff1f;--text:#f8f9fa;--muted:#94a3b8;--muted-soft:#64748b;--accent:#6366f1;--accent-strong:#818cf8;--accent-soft:#6366f126;--accent-glow:#6366f166;--shadow:0 30px 60px #0009;--shadow-soft:0 10px 30px #0006;--code-bg:#0d0d12;--code-border:#6366f126;--error-bg:#ef44441a;--error-text:#f87171}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100dvh;color:var(--text);background:radial-gradient(circle at 0% 0%, #6366f126, transparent 40%), radial-gradient(circle at 100% 0%, #2dd4bf1a, transparent 40%), radial-gradient(circle at 100% 100%, #c084fc1a, transparent 40%), var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif}body:before{content:"";pointer-events:none;opacity:.8;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:60px 60px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle,#000 0%,#0000 100%);mask-image:radial-gradient(circle,#000 0%,#0000 100%)}a{color:inherit}code,pre,input,select,button{font:inherit}code,.output{font-variant-numeric:tabular-nums;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace}.skip-link{z-index:20;background:var(--surface-strong);color:var(--text);border-radius:999px;padding:10px 14px;transition:transform .18s;position:absolute;top:16px;left:16px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.header{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--surface-border);background:#0a0a0f99;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;width:min(1320px,100vw - 40px);margin:0 auto;padding:20px 0;display:flex}.header-actions{align-items:center;gap:12px;display:flex}.brand{align-items:center;gap:14px;min-width:0;display:inline-flex}.brand-copy{gap:2px;min-width:0;display:grid}.brand-mark{border-radius:14px;flex-shrink:0;width:48px;height:48px;display:block;box-shadow:0 10px 28px #0f172a47}.brand-title{letter-spacing:-.04em;background:linear-gradient(135deg, var(--text) 0%, var(--muted) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.6rem;font-weight:900}.shell{gap:32px;width:min(1320px,100vw - 40px);margin:0 auto;padding:32px 0 80px;display:grid}.panel{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-xl);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);position:relative;overflow:hidden}.panel:after{content:"";pointer-events:none;border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 1px #ffffff57}.hero{grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:18px;min-height:auto;padding:32px;display:grid}.hero-copy,.hero-metrics{min-width:0}.hero-copy{align-content:start;gap:24px;display:grid}.eyebrow{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:700}.language-picker{background:var(--surface-strong);border:1px solid var(--surface-border);box-shadow:var(--shadow-soft);border-radius:999px;align-items:center;gap:12px;padding:4px 4px 4px 14px;transition:border-color .18s,box-shadow .18s;display:flex}.repo-link{min-height:44px;color:var(--text);letter-spacing:.01em;background:var(--surface-strong);border:1px solid var(--surface-border);box-shadow:var(--shadow-soft);border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:0 18px;font-weight:700;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:inline-flex}.repo-link__brand-mark{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}.repo-link__brand-image{width:20px;height:20px;display:block}.repo-link:hover{background:var(--accent-soft);border-color:var(--surface-border-strong);box-shadow:0 10px 30px var(--accent-soft);transform:translateY(-1px)}.repo-link:focus-visible{box-shadow:0 0 0 3px var(--focus);outline:none}.language-picker:focus-within{box-shadow:0 0 0 3px var(--focus);border-color:#aa5a334d}.language-picker__label{color:var(--muted-soft);letter-spacing:.06em;text-transform:uppercase;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:.76rem;font-weight:700;display:inline-flex}.custom-select{width:100%;position:relative}.custom-select__trigger{border:1px solid var(--surface-border);border-radius:var(--radius-md);width:100%;color:var(--text);cursor:pointer;background:#ffffff0a;justify-content:space-between;align-items:center;padding:14px 18px;transition:all .2s;display:flex}.custom-select__trigger:hover{border-color:var(--surface-border-strong);background:#ffffff14}.custom-select__arrow{flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;margin-left:12px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:inline-flex}.custom-select__arrow-icon{color:var(--accent)}.is-open .custom-select__arrow{transform:rotate(180deg)}.custom-select__options{z-index:200;background:var(--surface-strong);border:1px solid var(--surface-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);max-height:320px;margin:0;padding:8px;list-style:none;animation:.24s cubic-bezier(.16,1,.3,1) dropdown-in;position:absolute;top:calc(100% + 10px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 40px #4e382333}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.custom-select__option{border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);padding:10px 14px;font-size:.94rem;font-weight:500;transition:all .14s}.custom-select__option:hover{background:var(--accent-soft);color:var(--accent-strong)}.custom-select__option.is-selected{background:var(--accent);color:#fff}.custom-select--compact{width:auto}.custom-select--compact .custom-select__trigger{min-width:100px;box-shadow:none;background:0 0;border:none;padding:6px 32px 6px 0;font-weight:700}.custom-select--compact .custom-select__arrow{margin-left:0;position:absolute;right:8px}.custom-select--compact .custom-select__options{width:180px;left:auto;right:0}.ui-icon{flex-shrink:0}.section-title-with-icon{align-items:center;gap:10px;display:inline-flex}.section-title-with-icon__icon{color:var(--accent)}h1,h2,p{margin:0}h1,h2{text-wrap:balance}h1{letter-spacing:-.05em;max-width:10ch;font-size:clamp(3rem,6.2vw,5.8rem);line-height:.9}h2{letter-spacing:-.03em;font-size:clamp(1.55rem,2vw,2.15rem);line-height:1}.lead,.section-copy,.signal-copy,.status-detail,.meta-line,.field-hint{color:var(--muted);line-height:1.6}.lead{max-width:60ch;font-size:1.08rem}.status-bar{border-radius:var(--radius-lg);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff08;grid-column:1/-1;justify-content:space-between;align-items:center;padding:16px 28px;display:flex}.status{color:var(--accent-strong);align-items:center;gap:12px;font-size:.95rem;font-weight:700;display:inline-flex}.status .ui-icon{filter:drop-shadow(0 0 12px var(--accent-glow));animation:2s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.signal-card{border-radius:var(--radius-lg);background:var(--surface-strong);border:1px solid var(--surface-border);min-height:180px;box-shadow:var(--shadow-soft);align-content:start;gap:14px;padding:22px;display:grid}.signal-card--accent{background:linear-gradient(180deg, var(--accent-soft), var(--surface-strong));border-color:var(--accent-soft)}.signal-label{color:var(--muted-soft);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:10px;font-size:.82rem;font-weight:700;display:inline-flex}.signal-value{letter-spacing:-.04em;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.05}.workspace{grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);align-items:start;gap:18px;display:grid}.builder-column{gap:18px;display:grid}.form-panel,.model-panel,.output-panel{padding:28px}.section-heading{gap:10px;margin-bottom:24px;display:grid}.section-heading--compact{margin-bottom:18px}.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.field{gap:10px;display:grid}.field-wide{grid-column:1/-1}.field-copy{gap:4px;display:grid}.field-label{align-items:center;gap:10px;font-size:.97rem;font-weight:600;display:inline-flex}.field-hint{font-size:.9rem}input{width:100%;color:var(--text);border:1px solid var(--surface-border);border-radius:var(--radius-md);background:#ffffff0a;padding:14px 18px;transition:all .2s}input:hover{background:#ffffff14}input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:#ffffff1a;outline:none}button{color:#fff;background:var(--accent);border-radius:var(--radius-md);box-shadow:0 8px 30px var(--accent-soft);cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-weight:800;transition:all .25s;display:inline-flex}button:hover{background:var(--accent-strong);box-shadow:0 12px 40px var(--accent-glow);transform:translateY(-2px)}#generate{grid-column:1/-1;margin-top:6px}.model-meta{gap:12px;display:grid}.meta-line{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:#ffffff08;align-items:flex-start;gap:12px;padding:16px 18px;display:flex}.meta-line__icon{color:var(--accent);margin-top:2px}.output-panel{gap:18px;min-height:100%;display:grid}.output-header{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.output-copy{max-width:50ch;margin-top:12px}.error{border-radius:var(--radius-md);background:var(--error-bg);color:var(--error-text);border:1px solid #8921151f;padding:14px 16px}.output{border-radius:var(--radius-lg);border:1px solid var(--surface-border);background:var(--code-bg);min-height:560px;color:var(--code-text);white-space:pre-wrap;margin:0;padding:24px;font-size:.95rem;line-height:1.7;overflow:auto;box-shadow:inset 0 2px 10px #0003}.output-code{min-height:inherit;white-space:inherit;tab-size:4;display:block}.token--comment{color:var(--code-comment)}.token--directive{color:var(--code-directive)}.token--keyword{color:var(--code-keyword)}.token--type{color:var(--code-type)}.token--number{color:var(--code-number)}.token--string{color:var(--code-string)}.token--builtin{color:var(--code-builtin)}.output::selection{background:#d699734d}@media (width<=1080px){.hero{grid-template-columns:1fr;min-height:auto}.workspace{grid-template-columns:1fr}.output{min-height:460px}}@media (width<=780px){.shell{gap:14px;width:min(100vw - 18px,1240px);padding:12px 0 24px}.panel{border-radius:24px}.hero,.form-panel,.model-panel,.output-panel{padding:20px}.hero{gap:14px}.hero-copy{gap:24px;padding:4px}.header-inner{flex-direction:column;align-items:stretch;gap:16px;width:min(100vw - 18px,1240px);padding:12px 0}.brand{text-align:left;justify-content:center}.header-actions{flex-direction:column;align-items:stretch}.brand-mark{width:44px;height:44px}.repo-link,.language-picker{width:100%}.repo-link{min-height:48px}.language-picker{padding:4px 4px 4px 10px}.language-picker__select{min-width:90px;font-size:.88rem}.hero-metrics{grid-template-columns:1fr}h1{max-width:12ch;font-size:clamp(2.4rem,11vw,3.8rem)}h2{font-size:1.5rem}.lead,.section-copy,.status-detail{font-size:.96rem}.controls{grid-template-columns:1fr}.field-wide,#generate{grid-column:auto}.output-header{flex-direction:column;align-items:stretch}.output{min-height:360px;padding:18px;font-size:.9rem}}
