:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.6;font-weight:400;color:var(--text-color);background-color:var(--background);--background: #f8fafc;--text-color: #0f172a;--text-muted: #475569;--panel-bg: #ffffff;--border: #e2e8f0;--accent: #2563eb;--surface-muted: #f8fafc;--input-bg: #ffffff;--tag-bg: #e0f2fe;--tag-text: #0369a1;--panel-shadow: 0 10px 25px rgba(15, 23, 42, .04);--field-outline: #0f172a;--field-line: #1e293b;--metric-bg: #f8fafc;--preview-border: #0f172a;--preview-gradient-start: #0b172a;--preview-gradient-mid: #0f172a;--preview-gradient-end: #1e293b}[data-theme=dark]{--background: #020617;--text-color: #f1f5f9;--text-muted: #cbd5f5;--panel-bg: #0f172a;--border: #1e293b;--surface-muted: #0b1120;--input-bg: #020617;--tag-bg: #1d4ed8;--tag-text: #e0f2fe;--panel-shadow: 0 12px 30px rgba(0, 0, 0, .55);--field-outline: #94a3b8;--field-line: #475569;--metric-bg: #0b1120;--preview-border: #1e293b;--preview-gradient-start: #020617;--preview-gradient-mid: #0f172a;--preview-gradient-end: #172554}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-height:100vh;overflow:hidden;background-color:var(--background);color:var(--text-color)}#root{display:flex;flex-direction:column;min-height:100vh}.app-shell{flex:1;display:grid;grid-template-columns:1.8fr 1.2fr;gap:1rem;padding:1.5rem;overflow:hidden;min-height:0}.left-column{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding-right:.5rem}.left-column>*{flex-shrink:0}.left-column .panel{min-height:0}.right-column{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding-right:.5rem}.right-column>*{flex-shrink:0}@media (max-width: 900px){body{overflow:auto}#root{min-height:auto}.app-shell{grid-template-columns:1fr;overflow:visible;height:auto}.left-column{grid-template-rows:auto auto}.right-column{overflow:visible;padding-right:0}}@media (max-aspect-ratio: 3 / 4){body{overflow:auto}#root{min-height:auto}.app-shell{grid-template-columns:1fr;overflow:visible;height:auto}.left-column,.right-column{display:flex;flex-direction:column;min-height:auto;overflow:visible;padding-right:0}.left-column{grid-template-rows:none}}.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:var(--panel-shadow);min-height:0}.section-title{margin:0 0 .5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}.metric{border:1px solid var(--border);border-radius:10px;padding:.75rem;background:var(--metric-bg)}.metric strong{display:block;font-size:.85rem;color:var(--text-muted)}.metric span{font-weight:700;font-size:1.05rem}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.label{font-size:.9rem;color:var(--text-muted);margin-bottom:.3rem}input,select,button{font:inherit}.input,select,.range{padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);width:100%;background:var(--input-bg);color:var(--text-color)}button.primary{background:var(--accent);color:#fff;border:none;cursor:pointer}.flex-between{display:flex;align-items:center;justify-content:space-between}.tag{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:var(--tag-bg);color:var(--tag-text);font-weight:600;font-size:.8rem}.theme-toggle{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem;border-radius:999px;border:1px solid var(--border);background:var(--panel-bg)}.theme-toggle-btn{border:none;background:transparent;color:var(--text-muted);padding:.3rem .9rem;border-radius:999px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}.theme-toggle-btn.active{background:var(--accent);color:#fff}.preview-frame{position:relative;background:linear-gradient(135deg,var(--preview-gradient-start) 0%,var(--preview-gradient-mid) 45%,var(--preview-gradient-end) 100%);border-radius:12px;overflow:hidden;border:1px solid var(--preview-border);min-height:0;width:min(100%,400px);max-width:100%;aspect-ratio:3 / 2;margin:0 auto}.preview-background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:filter .25s ease}.preview-brightness{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;pointer-events:none;transition:background .2s ease}.preview-player{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:auto;object-fit:contain;pointer-events:none;max-height:100%}.field-panel{display:flex;flex-direction:column;min-height:0}.field-wrapper{background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:.5rem;flex:1;display:flex;flex-direction:column;gap:.75rem;min-height:0}.field-body{display:flex;gap:.75rem;flex:1;min-height:0;align-items:flex-start}.field-info{display:flex;flex-direction:column;gap:.5rem;min-width:180px}.field-svg{width:100%;height:clamp(220px,30vh,360px);display:block;touch-action:none}.legend{display:flex;gap:.75rem;margin-top:0;flex-wrap:wrap}.legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-muted)}.legend .dot{width:12px;height:12px;border-radius:50%}.legend-vertical{flex-direction:column;align-items:flex-start;min-width:160px;gap:.5rem}.field-metrics{display:flex;flex-direction:column;gap:.5rem}.field-metrics .metric{padding:.5rem}.field-metrics .metric strong{font-size:.75rem}.field-metrics .metric span{font-size:.9rem}.ruler{position:absolute;top:8px;right:8px;background:var(--panel-bg);padding:6px 10px;border-radius:8px;font-size:.8rem;border:1px solid var(--border);color:var(--text-color)}.preview-panel{display:flex;flex-direction:column;min-height:0}.preview-layout{flex:1;display:grid;grid-template-columns:minmax(0,.85fr) 200px;gap:1rem;align-items:start;min-height:0}.preview-frame-shell{display:flex;align-items:center;justify-content:center;padding:.25rem;min-height:0;overflow:hidden}.preview-metrics{display:grid;grid-template-columns:1fr;gap:.5rem;grid-auto-rows:1fr}.preview-metrics .metric{height:100%;padding:.6rem}.preview-metrics .metric strong{font-size:.75rem}.preview-metrics .metric span{font-size:.95rem}@media (max-width: 1100px){.preview-layout{grid-template-columns:1fr}.preview-metrics{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-auto-rows:auto}.field-body{flex-direction:column}.legend-vertical{flex-direction:row}.field-info{flex-direction:row;justify-content:space-between}.field-metrics{flex-direction:row;flex-wrap:wrap}.field-metrics .metric{flex:1 1 180px}}.left-column>*{min-height:0}