/* Balloon Pop identity. UI tokens stay separate from editable chart styles. */
:root {
  --brand-coral:#ef5b3f; --brand-coral-dark:#a73926; --brand-gold:#f8b72b;
  --brand-teal:#1d6f73; --brand-ink:#182024; --brand-muted:#526269;
  --brand-white:#fff; --brand-cream:#fffaf0; --brand-line:#dce3e2;
  --brand-ui-font:"Trebuchet MS",Inter,ui-sans-serif,system-ui,sans-serif;
  --ink:var(--brand-ink); --red:var(--brand-coral); --rust:var(--brand-coral-dark);
  --teal:var(--brand-teal); --paper:var(--brand-white); --line:var(--brand-line);
  --shadow:0 14px 36px rgba(24,32,36,.11);
}
body { background:var(--brand-white); color:var(--brand-ink); }
.topbar { height:92px; padding:0 clamp(20px,4vw,52px); gap:24px; background:var(--brand-white); color:var(--brand-ink); border:0; border-bottom:4px solid var(--brand-gold); }
.brand { display:flex; flex:0 0 280px; width:280px; height:70px; overflow:hidden; align-items:center; text-decoration:none; min-width:0; }
/* Clip only the generated image's transparent margin; keep the original asset intact. */
.brand-logo { display:block; width:107.5%; max-width:none; height:auto; flex:none; transform:translateX(-3.55%); }
.brand:focus-visible { outline:3px solid var(--brand-teal); outline-offset:4px; border-radius:6px; }
.topbar .status { color:var(--brand-muted); opacity:1; font-size:.875rem; text-align:right; }
.custom-page .topbar>a:last-child { color:var(--brand-teal); font-size:.875rem; font-weight:700; }
.theme-gallery { background:var(--brand-cream); border-bottom-color:var(--brand-line); }
.gallery-heading h1,.controls h1,.custom-page .intro h1,.custom-page .empty h3 { font-family:var(--brand-ui-font); font-weight:800; letter-spacing:-.035em; line-height:1.08; }
.theme-name { font-family:var(--brand-ui-font); font-weight:800; }
.eyebrow,.kicker,.section-label,.ai-badge { color:var(--brand-coral-dark); }
.preview-card strong { font-family:var(--brand-ui-font); font-weight:800; }
.preview-badge { background:var(--brand-white); color:var(--brand-teal); }
button.preview-card.selected { border-color:var(--brand-coral); box-shadow:0 0 0 3px #ef5b3f26,0 10px 28px #18202420; }
.custom-entry a,.studio-page .primary,.custom-page .primary,.custom-page #confirmNew { background:var(--brand-coral); color:var(--brand-ink); border-color:transparent; box-shadow:0 4px 0 var(--brand-coral-dark); font-weight:800; }
.custom-entry a:hover,.studio-page .primary:hover:not(:disabled),.custom-page .primary:hover:not(:disabled),.custom-page #confirmNew:hover { background:#ff755b; color:var(--brand-ink); border-color:transparent; }
.custom-entry a:focus-visible { outline-color:var(--brand-teal); }
.workspace { border-top:4px solid var(--brand-teal); }
.panel { background:var(--brand-white); border-color:var(--brand-line); }
.stage-wrap { background:#f5f8f7; }
.stage { border-color:var(--brand-ink); }
.studio-page .timeline { background:#dce9e8; }
.timeline-fill { background:var(--brand-coral); }
.dropzone { background:var(--brand-cream); border-color:#b8cac8; }
.dropzone:hover,.dropzone.drag { background:#fff0d0; border-color:var(--brand-gold); }
.studio-page .secondary,.stage-actions button { background:var(--brand-white); color:var(--brand-teal); border-color:#99b9b8; }
.studio-page .secondary:hover,.stage-actions button:hover { background:#edf7f5; border-color:var(--brand-teal); color:var(--brand-teal); }
.ai-editor { background:var(--brand-cream); border-color:#efcf89; box-shadow:none; border-top:4px solid var(--brand-gold); }
.ai-prompt { border-color:var(--brand-line); }
.ai-suggestions button { background:var(--brand-white); border-color:#d4dedb; color:var(--brand-teal); }
.ai-apply { background:var(--brand-teal); color:var(--brand-white); }
.ai-apply:hover:not(:disabled) { background:#15575a; }
.scene-select,.manual-data textarea,.settings input:not([type=range]) { border-color:#b9cac7; }
.studio-page .manual-data { margin-bottom:0; }
.data-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:10px; align-items:stretch; }
.data-actions .secondary { justify-self:stretch; min-height:48px; padding:9px 10px; }
.data-actions .data-upload { position:relative; min-width:0; min-height:48px; padding:9px 10px; border:2px solid var(--brand-gold); background:#fff0d0; color:var(--brand-ink); font-size:.875rem; line-height:1.3; }
.data-actions .data-upload strong { font-weight:800; }
.data-actions .data-upload:hover,.data-actions .data-upload.drag { background:#ffe3a0; border-color:var(--brand-coral-dark); }
.data-actions .data-upload:focus-within { outline:3px solid var(--brand-teal); outline-offset:3px; }
.studio-page button:focus-visible,.studio-page select:focus-visible,.studio-page input:focus-visible { outline:3px solid var(--brand-teal); outline-offset:3px; }
.custom-page { background:var(--brand-cream); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.custom-page .boundary { border-color:var(--brand-gold); color:var(--brand-teal); background:var(--brand-white); border-radius:0 8px 8px 0; }
.custom-page .composer { border-color:var(--brand-line); }
.custom-page .data-section { background:var(--brand-white); border-bottom-color:var(--brand-line); }
.custom-page .chat-section { background:var(--brand-cream); }
.custom-page .preview-panel { background:#f0f7f6; border-color:#cadfdb; }
.custom-page .badge { background:var(--brand-white); border-color:#9cbdba; color:var(--brand-teal); }
.custom-page .message { background:#e9f5f2; }
.custom-page .message.user { background:var(--brand-teal); color:var(--brand-white); }
.custom-page .ideas button { background:var(--brand-white); color:var(--brand-teal); border-color:#c4d5d1; }
.custom-page .type-options input,.custom-page .timeline input,.custom-page .creation-progress progress { accent-color:var(--brand-teal); }
.custom-page .type-options label:has(input:checked) { background:#fff0d0; border-color:#bd8415; color:var(--brand-ink); }
.custom-page .export button:last-child,.custom-page .csv-review button { background:var(--brand-teal); color:var(--brand-white); }
.custom-page .creation-spinner { border-color:#dce9e8; border-top-color:var(--brand-coral); }
.custom-page .creation-progress li[data-state=active] { background:var(--brand-teal); }
.custom-page .creation-progress li[data-state=done] { background:#fff0d0; color:#68500f; }
.custom-page .csv-review { background:#edf7f5; border-color:#bed6d2; }
.custom-page th { background:#edf7f5; }
.custom-page .empty { background-color:var(--brand-white); }
.custom-page .empty-mark { color:var(--brand-teal); }
@media(max-width:600px) {
  .topbar { height:78px; gap:12px; padding:0 16px; }
  .brand { flex-basis:220px; width:220px; height:56px; }
  .custom-page .topbar>a:last-child { max-width:92px; flex-shrink:0; font-size:.8125rem; }
}
@media(max-width:380px) { .brand { flex-basis:190px; width:190px; height:50px; } }

/* Search-friendly copy is also useful, visible content for visitors. */
.studio-intro-title { font-family:var(--brand-ui-font); font-size:clamp(2rem,3vw,3rem); font-weight:800; letter-spacing:-.035em; line-height:1.08; margin:8px 0 12px; }
.chart-faq { padding:48px clamp(20px,4vw,52px); background:var(--brand-white); border-top:4px solid var(--brand-gold); }
.chart-faq-inner { max-width:1280px; margin:0 auto; }
.chart-faq h2 { font:800 clamp(1.5rem,3vw,2.1rem)/1.2 var(--brand-ui-font); margin:10px 0 14px; }
.chart-faq p { font-size:1rem; line-height:1.65; color:var(--brand-muted); }
.chart-faq a { color:var(--brand-teal); text-underline-offset:3px; }
.chart-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:14px; margin-top:26px; }
.chart-faq h3 { margin:0 0 8px; font-size:1.125rem; }
.chart-faq-grid p { margin:0 0 14px; }
.whiteboard-guide { background:var(--brand-cream); border-top-color:var(--brand-teal); }
.whiteboard-guide p { max-width:76ch; }
.whiteboard-guide a { display:inline-block; font-size:1rem; font-weight:700; line-height:1.5; }
.whiteboard-guide a:focus-visible { outline:3px solid var(--brand-teal); outline-offset:4px; }
#whiteboardCharts { scroll-margin-top:24px; }
@media(max-width:600px) { .chart-faq-grid { grid-template-columns:1fr; } }

/* Total duration is consistent in the studio and the custom creator. */
.duration-control{display:block;margin:12px 0;color:var(--ink,#233237);font-size:14px}
.duration-control>span:first-child{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700}
.duration-control output{color:#16747c;white-space:nowrap;font-variant-numeric:tabular-nums}
.duration-control input[type=range]{display:block;width:100%;margin:10px 0 6px;accent-color:#16747c}
.duration-control .speed-scale{display:flex;justify-content:space-between;gap:8px;color:#617174;font-size:12px;font-weight:500}