@font-face{font-family:Basis Grotesque Pro;src:url(/fonts/BasisGrotesquePro-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Basis Grotesque Pro;src:url(/fonts/BasisGrotesquePro-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Basis Grotesque Pro;src:url(/fonts/BasisGrotesquePro-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Basis Grotesque Pro;src:url(/fonts/BasisGrotesquePro-Black.otf) format("opentype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Basis Grotesque Pro Mono;src:url(/fonts/BasisGrotesqueProMono-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Basis Grotesque Pro Mono;src:url(/fonts/BasisGrotesqueProMono-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}:root{--bg: #f7f8fa;--panel: #ffffff;--panel-inset: #fbfcfd;--preview-canvas: #eef1f4;--text-primary: #0e1116;--text-secondary: #40474f;--text-muted: #6b7280;--text-faint: #9aa2ac;--accent: #009aca;--accent-hover: #0089b4;--accent-ring: rgba(0, 154, 202, .32);--accent-tint: rgba(0, 154, 202, .08);--border: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .14);--radius-control: 6px;--radius-panel: 8px;--ease: cubic-bezier(.25, 1, .5, 1);--dur: .15s;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--font-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{display:flex;flex-direction:column;height:100%;min-height:100dvh}.topbar{flex:0 0 auto;height:52px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar__logo{height:18px;display:block}.topbar__divider{width:1px;height:20px;background:var(--border)}.topbar__name{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}.workspace{flex:1 1 auto;display:flex;min-height:0}.panel{flex:0 0 380px;width:380px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);min-height:0}.panel__scroll{flex:1 1 auto;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.section{display:flex;flex-direction:column;gap:12px}.section__header{font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.field{display:flex;flex-direction:column;gap:6px}.field__label{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--text-secondary)}.field__labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.field__counter{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-faint)}.field__counter--over{color:var(--accent)}.input,.textarea{width:100%;font-family:var(--font-ui);font-size:14px;color:var(--text-primary);background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius-control);padding:8px 10px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.textarea{resize:vertical;min-height:72px;line-height:1.5}.input::placeholder,.textarea::placeholder{color:var(--text-faint)}.input:hover,.textarea:hover{border-color:#0003}.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--panel-inset);border:1px solid var(--border);border-radius:var(--radius-panel)}.segment{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;background:transparent;border-radius:var(--radius-control);padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--text-muted);font-family:var(--font-ui);font-size:12px;font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.segment:hover{color:var(--text-secondary);background:#00000005}.segment[aria-pressed=true]{background:var(--panel);color:var(--accent);border-color:var(--border);box-shadow:0 1px 2px #0000000a}.segment:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}.segment__thumb{width:100%;height:34px;color:currentColor}.segment__label{letter-spacing:.01em}.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px}.switchrow__text{display:flex;flex-direction:column;gap:2px}.switchrow__title{font-size:13px;font-weight:500;color:var(--text-primary)}.switchrow__hint{font-size:12px;color:var(--text-muted)}.switch{--w: 40px;--h: 24px;position:relative;flex:0 0 auto;width:var(--w);height:var(--h);border-radius:999px;border:1px solid var(--border-strong);background:#e7eaee;cursor:pointer;padding:0;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.switch:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}.switch__knob{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:999px;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--dur) var(--ease)}.switch[aria-checked=true] .switch__knob{transform:translate(16px)}.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 16px;text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius-control);background:var(--panel-inset);color:var(--text-muted);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}.upload:hover,.upload--drag{border-color:var(--accent);background:var(--accent-tint);color:var(--text-secondary)}.upload--drag,.upload__icon{color:var(--accent)}.upload__title{font-size:13px;font-weight:500;color:var(--text-secondary)}.upload__hint{font-size:12px;color:var(--text-faint)}.upload__preview{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--panel)}.upload__thumb{width:44px;height:44px;border-radius:4px;object-fit:cover;flex:0 0 auto;border:1px solid var(--border)}.upload__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.upload__filename{font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload__replace{font-size:12px;color:var(--accent)}.iconbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-control);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;flex:0 0 auto;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.iconbtn:hover{color:var(--text-primary);border-color:var(--border-strong)}.iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}.exportbar{flex:0 0 auto;border-top:1px solid var(--border);background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:8px}.exportbar__row{display:flex;gap:8px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--font-ui);font-size:13px;font-weight:500;border-radius:var(--radius-control);padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:1px solid var(--border-strong);background:var(--panel);color:var(--text-primary);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.btn:hover{border-color:#0000003d;background:#fcfcfd}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}.btn:disabled{opacity:.55;cursor:default;transform:none}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;flex:1 1 auto}.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn--ghost{flex:1 1 auto}.exportbar__status{min-height:16px;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-muted)}.exportbar__status--error{color:#b4462f}.stage{flex:1 1 auto;min-width:0;background:var(--preview-canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;overflow:auto}.stage__frame{box-shadow:0 1px 1px #0000000a,0 8px 24px #0f17201a;border:1px solid var(--border);background:#fff}.stage__readout{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-muted);display:flex;align-items:center;gap:8px}.stage__dot{width:5px;height:5px;border-radius:999px;background:var(--text-faint)}.export-host{position:fixed;left:-10000px;top:0;pointer-events:none;opacity:0}@media (max-width: 900px){.workspace{flex-direction:column-reverse}.panel{flex:1 1 auto;width:100%;border-right:none;border-top:1px solid var(--border)}.stage{flex:0 0 auto;min-height:60vh}}