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