:root { --chart-ink: #242321; --chart-paper: #f8f4ec; --chart-card: #fffdf9; --chart-line: #dcd5ca; --chart-muted: #777067; --chart-coral: #ff6b4a; --chart-green: #2f7766; }
.chart-main { min-height: 100vh; padding: 18px max(24px, calc((100vw - 1260px) / 2)) 96px; }
.chart-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 48px; align-items: end; padding: 58px 0 48px; }
.chart-hero h1 { max-width: 790px; margin: 12px 0 18px; color: var(--chart-ink); font-size: clamp(48px, 7vw, 86px); line-height: .95; letter-spacing: -.065em; }
.chart-hero h1 em { color: var(--chart-coral); font-family: Georgia, serif; font-weight: 500; }
.chart-hero p { max-width: 710px; margin: 0; color: var(--chart-muted); font-size: 16px; line-height: 1.75; }
.chart-hero-art { min-height: 230px; position: relative; overflow: hidden; border: 1px solid #d8d1c6; border-radius: 28px; background: #242321; box-shadow: 0 18px 50px rgba(46, 39, 31, .12); }
.chart-hero-art::before { content: ''; position: absolute; inset: 24px; border-left: 1px solid #625e58; border-bottom: 1px solid #625e58; }
.chart-hero-art i { position: absolute; bottom: 25px; width: 12%; border-radius: 8px 8px 2px 2px; background: var(--bar); height: var(--height); transform: translateX(-50%); }
.chart-hero-art i:nth-child(1) { --bar: #ff6b4a; --height: 34%; left: 18%; }
.chart-hero-art i:nth-child(2) { --bar: #e2a84c; --height: 58%; left: 35%; }
.chart-hero-art i:nth-child(3) { --bar: #2f7766; --height: 47%; left: 52%; }
.chart-hero-art i:nth-child(4) { --bar: #5b6fc2; --height: 74%; left: 69%; }
.chart-hero-art i:nth-child(5) { --bar: #8a5cac; --height: 64%; left: 86%; }
.chart-hero-art b { position: absolute; left: 26px; top: 21px; color: #f8f4ec; font: 750 11px ui-monospace, monospace; letter-spacing: .12em; }
.chart-types { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.chart-types span { padding: 7px 10px; border: 1px solid #d7d0c5; border-radius: 999px; color: #665f57; background: rgba(255,255,255,.55); font-size: 10px; font-weight: 750; }

.chart-workbench { overflow: hidden; border: 1px solid #d5cec3; border-radius: 28px; background: var(--chart-card); box-shadow: 0 24px 70px rgba(47, 39, 29, .1); }
.chart-workbench-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 23px 28px; border-bottom: 1px solid #e3ddd3; }
.chart-workbench-heading span { color: var(--chart-coral); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.chart-workbench-heading h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.035em; }
.chart-local-note { color: #676158; font-size: 11px; }
.chart-local-note i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #69a88e; box-shadow: 0 0 0 4px rgba(105,168,142,.12); }
.chart-layout { display: grid; grid-template-columns: minmax(310px, 390px) minmax(0, 1fr); min-height: 760px; }
.chart-controls { padding: 24px; border-right: 1px solid #e3ddd3; background: #f7f3eb; }
.chart-control-section + .chart-control-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ddd6cb; }
.chart-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.chart-section-title span { color: #a34e3a; font: 800 10px ui-monospace, monospace; }
.chart-section-title h3 { flex: 1; margin: 0; font-size: 15px; }
.chart-example-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chart-example-row button, .chart-file-row button, #resetChart { border: 1px solid #d2cbc0; border-radius: 9px; padding: 7px 9px; color: #504b45; background: #fffdf9; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.chart-example-row button:hover, .chart-file-row button:hover, #resetChart:hover { border-color: #a79f94; }
#chartData { width: 100%; min-height: 190px; resize: vertical; border: 1px solid #cfc8bd; border-radius: 12px; padding: 12px; color: #292622; background: #fff; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
#chartData:focus, .chart-fields input:focus, .chart-fields select:focus { outline: 3px solid rgba(255,107,74,.14); border-color: #cb765f; }
.chart-data-help { margin: 8px 0 0; color: #878077; font-size: 10px; line-height: 1.55; }
.chart-file-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.chart-file-row small { overflow: hidden; color: #817a71; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chart-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.chart-fields label { display: grid; gap: 6px; color: #625c54; font-size: 10px; font-weight: 750; }
.chart-fields label.wide { grid-column: 1 / -1; }
.chart-fields input, .chart-fields select { width: 100%; min-width: 0; height: 40px; border: 1px solid #cec7bc; border-radius: 9px; padding: 0 10px; color: #292622; background: #fff; font: inherit; }
.chart-checks { display: grid; gap: 8px; margin-top: 13px; }
.chart-checks label { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; padding: 8px 11px; border: 1px solid #d9d2c7; border-radius: 10px; background: rgba(255,255,255,.6); color: #534e47; font-size: 11px; font-weight: 650; }
.chart-checks input { width: 17px; height: 17px; accent-color: var(--chart-green); }
.chart-reset-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.chart-error { margin: 12px 0 0; padding: 9px 10px; border: 1px solid #e6b6aa; border-radius: 9px; color: #9b3d2b; background: #fff0ec; font-size: 11px; line-height: 1.5; }

.chart-output { min-width: 0; display: flex; flex-direction: column; padding: 24px; background: #ece7de; }
.chart-output-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; }
.chart-output-heading span { display: block; color: #a34e3a; font: 800 10px ui-monospace, monospace; letter-spacing: .1em; }
.chart-output-heading h3 { margin: 4px 0 0; font-size: 18px; }
#chartStatus { color: #777067; font-size: 10px; }
.chart-preview-shell { min-height: 520px; display: grid; place-items: center; overflow: auto; border: 1px solid #d4cdc2; border-radius: 18px; padding: 18px; background: #d8d2c8; }
#chartPreview { width: 100%; min-width: 560px; box-shadow: 0 12px 38px rgba(46,38,29,.14); }
#chartPreview[data-theme="transparent"] { background-image: linear-gradient(45deg,#e8e3da 25%,transparent 25%),linear-gradient(-45deg,#e8e3da 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e3da 75%),linear-gradient(-45deg,transparent 75%,#e8e3da 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
#chartPreview svg { display: block; width: 100%; height: auto; }
.chart-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.chart-downloads button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 16px; color: #fff; background: #292725; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.chart-downloads button:last-child { background: var(--chart-coral); }
.chart-downloads button:disabled { cursor: not-allowed; opacity: .45; }
.chart-table-details { margin-top: 13px; border: 1px solid #d4cdc2; border-radius: 12px; background: #f7f3eb; }
.chart-table-details summary { cursor: pointer; padding: 11px 13px; color: #5f5951; font-size: 11px; font-weight: 750; }
#chartTable { max-height: 260px; overflow: auto; border-top: 1px solid #ddd6cb; }
#chartTable table { width: 100%; border-collapse: collapse; font-size: 10px; }
#chartTable caption { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
#chartTable th, #chartTable td { padding: 8px 10px; border-bottom: 1px solid #e2dcd2; text-align: right; white-space: nowrap; }
#chartTable th:first-child, #chartTable td:first-child { text-align: left; }
#chartTable thead th { position: sticky; top: 0; color: #4b4640; background: #ece6dc; }

.chart-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.chart-benefits article { min-height: 180px; padding: 22px; border: 1px solid #d8d1c6; border-radius: 18px; background: rgba(255,255,255,.5); }
.chart-benefits span { color: var(--chart-coral); font: italic 15px Georgia, serif; }
.chart-benefits strong { display: block; margin: 24px 0 8px; font-size: 15px; }
.chart-benefits p { margin: 0; color: var(--chart-muted); font-size: 11px; line-height: 1.7; }

@media (max-width: 940px) {
  .chart-hero { grid-template-columns: 1fr; }
  .chart-hero-art { min-height: 190px; }
  .chart-layout { grid-template-columns: 1fr; }
  .chart-controls { border-right: 0; border-bottom: 1px solid #e3ddd3; }
  .chart-preview-shell { min-height: 430px; }
}
@media (max-width: 640px) {
  .chart-main { padding-inline: 14px; }
  .chart-hero { padding-top: 34px; gap: 28px; }
  .chart-hero h1 { font-size: 50px; }
  .chart-workbench-heading, .chart-output-heading { align-items: flex-start; flex-direction: column; }
  .chart-controls, .chart-output { padding: 16px; }
  .chart-fields, .chart-downloads, .chart-benefits { grid-template-columns: 1fr; }
  .chart-preview-shell { display: block; min-height: 0; padding: 10px; }
  #chartPreview { min-width: 0; }
  .chart-local-note { align-self: flex-start; }
}