:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#fafafa;--foreground:#18181b;--card:#fff;--muted:#f4f4f5;--muted-foreground:#71717a;--border:#e4e4e7;--input:#d4d4d8;--primary:#18181b;--primary-foreground:#fafafa;--accent:#f4f4f5;--accent-foreground:#18181b;--success:#16a34a;--success-muted:#dcfce7;--destructive:#dc2626;--destructive-muted:#fee2e2;--code:#09090b;--code-foreground:#f4f4f5;--ring:#18181b;--radius:8px;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;font-family:var(--font-sans);color:var(--foreground);background:var(--background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0;overflow:hidden}button,textarea{font:inherit}button{border:0}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,textarea:focus-visible{outline:2px solid var(--ring);outline-offset:2px}#app{min-height:100svh}.app-shell{grid-template-rows:48px minmax(0,1fr);gap:10px;width:100%;height:100svh;padding:10px;display:grid}.app-header{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:0 12px;display:flex}.brand,.header-actions,.toolbar,.input-footer{align-items:center;display:flex}.brand{gap:10px;min-width:0}.brand-mark{border:1px solid var(--border);width:30px;height:30px;color:var(--foreground);background:var(--muted);border-radius:6px;flex:none;place-items:center;display:grid}h1,h2,p{margin:0}h1,h2{color:var(--foreground);letter-spacing:0;font-weight:600}h1{text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.2;overflow:hidden}h2{font-size:.9rem;line-height:1.25}.eyebrow,.panel-meta{color:var(--muted-foreground);font-size:.74rem;line-height:1.2}.header-actions{flex:none}.status-pill{border:1px solid var(--border);height:26px;color:var(--muted-foreground);background:var(--card);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:0 9px;font-size:.75rem;font-weight:500;display:inline-flex}.status-dot{background:currentColor;border-radius:999px;width:7px;height:7px}.status-pill[data-tone=ready]{color:#15803d;background:var(--success-muted);border-color:#16a34a42}.status-pill[data-tone=danger]{color:var(--destructive);background:var(--destructive-muted);border-color:#dc262638}.workspace{grid-template-columns:420px minmax(0,1fr);gap:10px;min-height:0;display:grid}.side-column{grid-template-rows:auto minmax(210px,.95fr) auto;gap:10px;min-width:0;min-height:0;display:grid}.panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:8px 10px;display:flex}.panel-header.compact{min-height:44px}.toolbar,.input-footer{flex-wrap:wrap;justify-content:flex-end;gap:6px}.icon-button,.primary-button,.secondary-button{border-radius:6px;justify-content:center;align-items:center;gap:7px;height:32px;font-size:.82rem;font-weight:500;line-height:1;transition:background .14s,border-color .14s,color .14s;display:inline-flex}.icon-button{border:1px solid var(--border);width:32px;color:var(--foreground);background:var(--card)}.icon-button:not(:disabled):hover,.secondary-button:not(:disabled):hover{background:var(--accent)}.primary-button{min-width:86px;color:var(--primary-foreground);background:var(--primary);padding:0 12px}.primary-button:not(:disabled):hover{background:#27272a}.secondary-button{border:1px solid var(--border);min-width:96px;color:var(--accent-foreground);background:var(--card);padding:0 12px}.share-code-input,.convars-output{resize:none;width:100%;min-height:0;font-family:var(--font-mono);letter-spacing:0;border:0;outline:none;display:block}.share-code-input{border-bottom:1px solid var(--border);height:112px;color:var(--foreground);background:var(--card);padding:10px;font-size:.82rem;line-height:1.55}.share-code-input::placeholder,.convars-output::placeholder{color:var(--muted-foreground)}.inline-alert{color:var(--destructive);background:var(--destructive-muted);border:1px solid #dc26262e;border-radius:6px;align-items:center;gap:7px;margin:8px 10px 0;padding:8px 9px;font-size:.8rem;font-weight:500;display:flex}.input-footer{padding:8px 10px}.color-chip{border:1px solid var(--border);height:26px;color:var(--muted-foreground);background:var(--card);border-radius:999px;align-items:center;gap:7px;padding:0 9px;font-size:.72rem;font-weight:500;display:inline-flex}.color-swatch{border:1px solid #00000024;border-radius:999px;width:13px;height:13px}.preview-stage{background-color:#f4f4f5;background-image:linear-gradient(#18181b14 1px,#0000 1px),linear-gradient(90deg,#18181b14 1px,#0000 1px);background-size:28px 28px;flex:1;min-height:210px;position:relative;overflow:hidden}.range-lines{border:1px solid #18181b1f;border-radius:6px;position:absolute;inset:16px}.range-lines:before,.range-lines:after{content:"";background:#18181b1f;position:absolute}.range-lines:before{width:100%;height:1px;top:50%;left:0}.range-lines:after{width:1px;height:100%;top:0;left:50%}.crosshair-preview{position:absolute;inset:0}.crosshair-line,.crosshair-dot{background:var(--crosshair-color);box-shadow:var(--crosshair-outline);display:block;position:absolute}.line-top,.line-bottom{width:var(--crosshair-thickness);height:var(--crosshair-length);left:50%;transform:translate(-50%)}.line-top{bottom:calc(50% + var(--crosshair-gap))}.line-bottom{top:calc(50% + var(--crosshair-gap))}.line-left,.line-right{width:var(--crosshair-length);height:var(--crosshair-thickness);top:50%;transform:translateY(-50%)}.line-left{right:calc(50% + var(--crosshair-gap))}.line-right{left:calc(50% + var(--crosshair-gap))}.crosshair-dot{width:var(--crosshair-dot);height:var(--crosshair-dot);top:50%;left:50%;transform:translate(-50%,-50%)}.metrics-grid{border-bottom:1px solid var(--border);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.metric{border-top:1px solid var(--border);border-right:1px solid var(--border);flex-direction:column;justify-content:center;gap:4px;min-height:48px;padding:8px 10px;display:flex}.metric:nth-child(4n){border-right:0}.metric span{color:var(--muted-foreground);text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;line-height:1.15;overflow:hidden}.metric strong{font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600;line-height:1.2;overflow:hidden}.toggle-row{flex-wrap:wrap;gap:6px;padding:10px;display:flex}.toggle-chip{border:1px solid var(--border);height:24px;color:var(--muted-foreground);background:var(--card);border-radius:999px;align-items:center;padding:0 8px;font-size:.73rem;font-weight:500;display:inline-flex}.toggle-chip[data-active=true]{color:#15803d;background:var(--success-muted);border-color:#16a34a40}.output-panel{height:100%}.convars-output{color:var(--code-foreground);background:var(--code);tab-size:2;flex:1;padding:12px;font-size:.83rem;line-height:1.55}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#09090b;--foreground:#fafafa;--card:#111113;--muted:#18181b;--muted-foreground:#a1a1aa;--border:#27272a;--input:#3f3f46;--primary:#fafafa;--primary-foreground:#18181b;--accent:#18181b;--accent-foreground:#fafafa;--success-muted:#16a34a29;--destructive-muted:#dc262624;--code:#050505;--code-foreground:#f4f4f5;--ring:#fafafa}.primary-button:not(:disabled):hover{background:#e4e4e7}.status-pill[data-tone=ready],.toggle-chip[data-active=true]{color:#4ade80}.preview-stage{background-color:#18181b;background-image:linear-gradient(#fafafa14 1px,#0000 1px),linear-gradient(90deg,#fafafa14 1px,#0000 1px)}.range-lines{border-color:#fafafa1f}.range-lines:before,.range-lines:after{background:#fafafa1f}}@media (width<=980px){body{overflow:auto}.app-shell{grid-template-rows:auto auto;height:auto;min-height:100svh}.app-header{min-height:48px;padding-block:8px}.workspace{grid-template-columns:1fr}.side-column{grid-template-rows:auto 280px auto}.output-panel{min-height:540px}}@media (width<=560px){.app-shell{gap:8px;padding:8px}.app-header{flex-direction:column;align-items:flex-start}.header-actions,.status-pill,.toolbar,.input-footer,.primary-button,.secondary-button{width:100%}.toolbar{flex-wrap:nowrap}.icon-button{flex:1 1 0}.panel-header{flex-direction:column;align-items:flex-start}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(4n){border-right:1px solid var(--border)}.metric:nth-child(2n){border-right:0}.convars-output{font-size:.78rem}}