:root{--color-background:#fff;--color-foreground:#111827;--color-surface:#f9fafb;--color-surface-hover:#f3f4f6;--color-border:#e5e7eb;--color-muted:#6b7280;--color-muted-foreground:#6b7280;--color-primary:#2563eb;--color-primary-foreground:#fff;--color-success:#16a34a;--color-warning:#d97706;--color-error:#dc2626;--font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font-family)}*{box-sizing:border-box}body{background:var(--color-background);color:var(--color-foreground);margin:0}.layout{grid-template-columns:360px 1fr;height:100vh;display:grid}.sidebar{border-right:1px solid var(--color-border);background:var(--color-surface);padding:16px;overflow:auto}.main{grid-template-rows:auto 1fr;min-width:0;display:grid}.header{border-bottom:1px solid var(--color-border);padding:12px 16px}.grid{gap:12px;display:grid}.field{gap:6px;display:grid}label{color:var(--color-muted);font-size:12px}select,input{border:1px solid var(--color-border);background:var(--color-background);width:100%;height:36px;color:var(--color-foreground);border-radius:6px;padding:0 10px}small{color:var(--color-muted);font-size:12px}.previewHost{padding:16px;overflow:auto}.viewportFrame{border:1px solid var(--color-border);background:var(--color-background);box-sizing:border-box;border-radius:8px;width:fit-content;padding:12px}.viewportSurface{border:1px solid var(--color-border);background:var(--color-background);border-radius:6px;overflow:hidden}.iframe{border:0;display:block}.notice{border:1px dashed var(--color-border);color:var(--color-foreground);background:var(--color-surface);border-radius:8px;padding:12px}hr{border:none;border-top:1px solid var(--color-border);margin:12px 0}