:root{--ink:#060a12;--ink-2:#0c1424;--panel:#0a1220eb;--panel-solid:#0f1a2e;--line:#a78bfa29;--line-strong:#a78bfa52;--accent:#a78bfa;--accent-dim:#8b5cf6;--sky:#38bdf8;--green:#34d399;--amber:#fbbf24;--red:#f87171;--fog:#b8c8dc;--fog-dim:#6b7f96;--white:#eef4fc;--font-display:"Instrument Serif", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--radius:12px;--shadow:0 20px 50px #00000080}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-body);color:var(--white);background:var(--ink);-webkit-font-smoothing:antialiased;margin:0}button,input,textarea{font:inherit}.mono{font-family:var(--font-mono)}.app-shell{min-height:100vh;position:relative;overflow-x:clip}.bg-grid{z-index:0;pointer-events:none;background:radial-gradient(70% 45% at 10% -5%,#a78bfa1f,#0000 55%),radial-gradient(50% 35% at 95% 5%,#38bdf814,#0000 50%),linear-gradient(#060a12 0%,#0c1424 50%,#0f1a2e 100%);position:fixed;inset:0}.bg-grid:after{content:"";opacity:.14;background-image:linear-gradient(#a78bfa14 1px,#0000 1px),linear-gradient(90deg,#a78bfa14 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.app-content{z-index:1;max-width:1400px;margin:0 auto;padding:2rem 1.25rem 3rem;position:relative}.hero{margin-bottom:1.5rem}.title{font-family:var(--font-display);margin:0 0 .5rem;font-size:clamp(2rem,5vw,3rem);font-weight:400;line-height:1.1}.title em{color:var(--accent);font-style:italic}.lede{max-width:62ch;color:var(--fog);margin:0;line-height:1.6}.lede a{color:var(--sky);text-decoration:none}.lede a:hover{text-decoration:underline}.panel-title{margin:0;font-size:1rem;font-weight:600}.panel-subtitle{color:var(--fog-dim);margin:.25rem 0 0;font-size:.875rem}.prompt-panel,.render-panel,.json-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.prompt-panel{margin-bottom:1rem;padding:1.25rem}.prompt-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.catalog-chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{border:1px solid var(--line-strong);color:var(--accent);font-family:var(--font-mono);background:#a78bfa14;border-radius:999px;padding:.2rem .55rem;font-size:.72rem}.preset-row{flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;display:flex}.preset-btn{border:1px solid var(--line);color:var(--fog);cursor:pointer;background:#ffffff08;border-radius:999px;padding:.45rem .85rem;transition:border-color .15s,background .15s}.preset-btn:hover:not(:disabled){border-color:var(--line-strong);color:var(--white)}.preset-btn.active{border-color:var(--accent);color:var(--white);background:#a78bfa24}.preset-btn:disabled{opacity:.5;cursor:not-allowed}.prompt-input{border:1px solid var(--line);width:100%;color:var(--white);resize:vertical;background:#00000040;border-radius:10px;min-height:4.5rem;padding:.85rem 1rem}.prompt-input:focus{outline-offset:2px;outline:2px solid #a78bfa59}.prompt-actions{gap:.6rem;margin-top:.85rem;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:10px;padding:.55rem 1rem;font-weight:600;transition:transform .1s,opacity .15s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:#0b0618}.btn.ghost{border-color:var(--line);color:var(--fog);background:0 0}.guardrail-note{color:var(--amber);background:#fbbf2414;border:1px solid #fbbf2459;border-radius:10px;align-items:flex-start;gap:.75rem;margin-bottom:1rem;padding:.85rem 1rem;font-size:.875rem;display:flex}.guardrail-note p{color:var(--fog);margin:.2rem 0 0}.workspace{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);align-items:start;gap:1rem;display:grid}@media (width<=960px){.workspace{grid-template-columns:1fr}}.render-panel,.json-panel{min-height:520px}.render-header,.json-panel-header{border-bottom:1px solid var(--line);padding:1rem 1.25rem}.json-panel-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.json-meta{color:var(--fog-dim);text-align:right;flex-direction:column;gap:.35rem;font-size:.75rem;display:flex}.pulse-dot{color:var(--accent)}.pulse-dot:before{content:"● ";animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.35}50%{opacity:1}}.render-stage{min-height:440px;padding:1.25rem}.render-stage.streaming{box-shadow:inset 0 0 0 1px #a78bfa33}.render-empty{min-height:360px;color:var(--fog-dim);text-align:center;justify-content:center;align-items:center;padding:2rem;display:flex}.json-panel-body{max-height:560px;padding:.75rem;overflow:auto}.json-section{margin-bottom:1rem}.json-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--fog-dim);margin:0 0 .4rem;font-size:.75rem}.json-pre{border:1px solid var(--line);font-family:var(--font-mono);color:#d8e4f4;white-space:pre-wrap;word-break:break-word;background:#00000059;border-radius:8px;max-height:220px;margin:0;padding:.85rem;font-size:.72rem;line-height:1.5;overflow:auto}.json-pre.jsonl{max-height:180px}.error-banner{color:var(--red);background:#f871711f;border:1px solid #f8717159;border-radius:8px;margin-top:1rem;padding:.75rem 1rem}.ui-card{border:1px solid var(--line);background:#ffffff08;border-radius:12px;margin-bottom:1rem;overflow:hidden}.ui-card-header{border-bottom:1px solid var(--line);padding:.9rem 1rem}.ui-card-title{margin:0;font-size:1rem;font-weight:600}.ui-card-subtitle{color:var(--fog-dim);margin:.25rem 0 0;font-size:.8rem}.ui-card-body{gap:.75rem;padding:1rem;display:grid}.ui-card-body>.ui-card{margin-bottom:0}.ui-card-body>.ui-metric{display:inline-flex}.ui-metric{border:1px solid var(--line);background:#a78bfa0f;border-radius:10px;flex-direction:column;gap:.25rem;min-width:120px;padding:.85rem 1rem;display:flex}.ui-metric-label{color:var(--fog-dim);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}.ui-metric-value{color:var(--white);font-size:1.35rem;font-weight:700}.ui-table-wrap{overflow-x:auto}.ui-table{border-collapse:collapse;width:100%;font-size:.875rem}.ui-table th,.ui-table td{border-bottom:1px solid var(--line);text-align:left;padding:.6rem .75rem}.ui-table th{color:var(--fog-dim);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;font-weight:600}.ui-table-caption{caption-side:top;text-align:left;color:var(--fog-dim);padding-bottom:.5rem;font-size:.8rem}.ui-btn{cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.55rem 1rem;font-weight:600}.ui-btn.primary{background:var(--sky);color:#041018}.ui-btn.secondary{border-color:var(--line-strong);color:var(--fog);background:0 0}.ui-chart{padding:.5rem 0}.ui-chart-title{margin:0 0 .75rem;font-size:.9rem;font-weight:600}.ui-chart-canvas{align-items:flex-end;gap:.5rem;height:160px;padding:.5rem 0;display:flex}.ui-chart-col{flex-direction:column;flex:1;align-items:center;height:100%;display:flex;position:relative}.ui-chart-bar{background:linear-gradient(180deg, var(--accent), var(--accent-dim));border-radius:6px 6px 2px 2px;width:100%;max-width:36px;margin-top:auto;transition:height .25s}.ui-chart-canvas.line .ui-chart-col{border-bottom:1px solid var(--line)}.ui-chart-dot{background:var(--sky);border-radius:50%;width:10px;height:10px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 0 3px #38bdf833}.ui-chart-label{color:var(--fog-dim);margin-top:.4rem;font-size:.7rem}.render-stage .ui-card-body{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.render-stage .ui-card-body>.ui-chart,.render-stage .ui-card-body>.ui-table-wrap{grid-column:1/-1}.render-stage .ui-card-body>.ui-btn{justify-self:start}