:root{--brand:#2563eb;--ink:#111111;--text:#374151;--muted:#6b7280;--subtle:#9ca3af;--line:#e5e7eb;--surface:#f9fafb;--white:#fff;--shadow:0 1px 3px rgba(0,0,0,.06)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:16px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer}.page-shell{min-height:100vh}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:0 max(24px,calc((100% - 1000px)/2));gap:24px}.brand,.topbar{align-items:center}.brand{display:inline-flex;gap:9px;color:var(--ink);text-decoration:none;font-weight:750;font-size:18px;white-space:nowrap}.brand-mark{width:27px;height:27px;border-radius:8px;background:#eff6ff;color:var(--brand);display:grid;place-items:center;font-size:23px;line-height:1}.topbar nav{display:flex;align-items:center;gap:28px}.topbar nav a{font-size:14px;color:var(--muted);text-decoration:none}.topbar nav .nav-active,.topbar nav a:hover{color:var(--brand)}.topbar-note{font-size:12px;color:var(--muted);white-space:nowrap}.intro{max-width:1000px;margin:38px auto 28px;padding:0 24px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.09em;font-weight:750;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:8px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}h1{font-size:32px;line-height:1.2;letter-spacing:-.035em;margin:10px 0 8px;font-weight:760}.intro p{max-width:650px;margin:0;color:var(--muted);font-size:16px}.studio{max-width:1000px;margin:0 auto;padding:0 24px}.studio-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.studio-heading h2{font-size:24px;line-height:1.25;margin:3px 0 0;letter-spacing:-.025em}.live-state{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.live-state span,.status-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;display:inline-block}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);grid-gap:16px;gap:16px;align-items:start}.control-card,.preview-panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.preview-panel{padding:20px;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-title{font-size:14px;font-weight:700}.export-actions{display:flex;gap:8px}.button{height:44px;border-radius:8px;padding:0 15px;font-size:13px;font-weight:650;border:1px solid transparent;transition:background .15s,border-color .15s}.button-small{height:36px;padding:0 12px}.button-primary{background:var(--brand);color:#fff}.button-primary:hover{background:#1d4ed8}.button-secondary{background:#fff;border-color:var(--line);color:var(--text)}.button-secondary:hover{background:var(--ink);border-color:var(--ink);color:#fff}.chart-stage{min-height:390px;margin-top:12px;display:flex;align-items:center;justify-content:center;background:#fff}.chart-svg{display:block;width:100%;height:auto;max-height:390px;overflow:visible}.chart-heading{font-size:17px;font-weight:700;fill:#111}.slice-label{font-size:12px;font-weight:700;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.12);stroke-width:1px}.legend-label{font-size:12px;fill:#374151}.donut-total{font-size:22px;font-weight:750;fill:#111}.donut-caption{font-size:9px;letter-spacing:1.3px;fill:#6b7280;font-weight:700}.preview-foot{border-top:1px solid #f1f2f4;padding-top:12px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.preview-foot span:first-child{display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px}.controls-column{display:grid;grid-gap:16px;gap:16px}.control-card{padding:20px}.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.card-heading h3{font-size:18px;line-height:1.3;margin:3px 0 0;letter-spacing:-.02em}.total-chip{font-size:11px;color:var(--muted);background:#f9fafb;border:1px solid #f1f2f4;padding:5px 9px;border-radius:6px}.total-chip b{color:var(--ink);margin-left:5px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.data-head{display:grid;grid-template-columns:1fr 88px 22px;grid-gap:8px;gap:8px;padding:0 0 7px 25px;color:var(--subtle);font-size:10px;font-weight:750;letter-spacing:.06em}.data-head span:nth-child(2){text-align:right}.data-rows{display:grid;grid-gap:7px;gap:7px}.data-row{display:grid;grid-template-columns:9px minmax(0,1fr) 88px 22px;grid-gap:8px;gap:8px;align-items:center}.row-color{width:8px;height:28px;border-radius:4px}.data-row input,.text-field{height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 10px;min-width:0;width:100%;font-size:13px;outline:none}.data-row input:focus,.text-field:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.data-row .number-input{text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.remove-row{width:22px;height:32px;border:0;background:transparent;color:var(--subtle);font-size:20px;border-radius:5px}.remove-row:hover{background:#fef2f2;color:#dc2626}.add-row{height:40px;width:100%;margin-top:9px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;color:var(--brand);font-size:15px;font-weight:700}.add-row span{font-size:12px;font-weight:650}.add-row:hover{background:#eff6ff;border-color:#93c5fd}.data-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--subtle);font-size:11px}.data-bottom button{border:0;background:none;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:3px}.field-label{display:block;font-size:12px;font-weight:650;color:var(--text);margin-bottom:6px}.field-block{margin-top:15px}.settings-card .text-field{height:42px}.swatches{display:flex;gap:5px;margin-top:9px}.swatches span{height:8px;flex:1 1;border-radius:3px}.settings-two{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px;margin-top:15px}.toggle-line{display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:14px;border-top:1px solid #f1f2f4}.toggle-line b{display:block;font-size:12px;color:var(--text)}.toggle-line small{display:block;font-size:11px;color:var(--muted)}.toggle-line input{width:17px;height:17px;accent-color:var(--brand)}.range-heading{display:flex;align-items:center;justify-content:space-between}.range-heading span{font-size:12px;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.field-block input[type=range]{width:100%;accent-color:var(--brand)}.empty-preview{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:7px}.empty-icon{font-size:42px;color:#cbd5e1}.empty-preview strong{font-size:14px;color:var(--text)}.empty-preview span,.notice{font-size:12px}.notice{color:#b45309}.below-content,.faq{max-width:1000px;margin:76px auto 0;padding:0 24px}.below-content h2,.faq h2{font-size:24px;letter-spacing:-.025em;margin:5px 0 22px}.steps{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.steps article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow)}.steps article>span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eff6ff;color:var(--brand);font-size:12px;font-weight:750}.steps h3{font-size:16px;margin:13px 0 5px}.steps p{font-size:13px;color:var(--muted);margin:0}.faq{margin-top:64px;max-width:760px}.faq details{border-top:1px solid var(--line);padding:16px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{font-size:14px;font-weight:650;cursor:pointer}.faq details p{font-size:13px;color:var(--muted);margin:9px 0 0}footer{max-width:1000px;margin:64px auto 0;padding:22px 24px 30px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}footer .brand{font-size:14px}footer .brand-mark{width:22px;height:22px;font-size:19px}@media(max-width:800px){.topbar{padding:0 18px}.topbar nav{gap:14px}.topbar-note{display:none}.intro{margin-top:28px}.intro,.studio{padding:0 18px}.workspace-grid{grid-template-columns:1fr}.preview-panel{position:-webkit-sticky;position:sticky;top:0;z-index:5;padding:14px}.chart-stage{min-height:250px;max-height:40vh;overflow:hidden;margin-top:5px}.chart-svg{max-height:250px}.preview-foot{padding-top:8px}.controls-column{grid-template-columns:1fr}.below-content,.faq{padding:0 18px;margin-top:52px}.steps{grid-template-columns:1fr}.steps article{padding:16px}footer{padding:20px 18px;gap:12px;flex-wrap:wrap}}@media(max-width:480px){.topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}.topbar{height:60px}.intro h1{font-size:30px}.intro p{font-size:14px}.studio-heading h2{font-size:21px}.preview-panel{padding:10px}.export-actions{gap:5px}.button-small{height:34px;padding:0 8px;font-size:11px}.chart-stage{min-height:220px}.chart-svg{max-height:220px}.control-card{padding:16px}.data-row{grid-template-columns:8px minmax(0,1fr) 78px 20px;gap:6px}.data-head{grid-template-columns:1fr 78px 20px}.settings-two{gap:8px}footer span:nth-child(2){display:none}}