.calculator-studio { padding-bottom: 4rem; }
.cs-intro { padding-top: clamp(2.25rem, 6vw, 4.6rem); }
.cs-back { display: inline-block; color: var(--mint); margin-bottom: 1.35rem; font-weight: 700; font-size: .84rem; }
.cs-workbench { display: grid; grid-template-columns: minmax(17rem, .64fr) minmax(0, 1.36fr); gap: 1rem; align-items: start; }
.cs-settings, .cs-preview, .cs-export { min-width: 0; }
.cs-settings h2, .cs-preview h2, .cs-export h2 { margin: 0 0 .4rem; }
.cs-fields { display: grid; gap: .65rem; margin: 1rem 0; }
.cs-fields label, .cs-export label { display: grid; gap: .25rem; font-weight: 650; font-size: .88rem; color: var(--ink); }
.cs-fields input, .cs-fields select, :is(.cs-colors, .cs-chart-settings) input, .cs-export input, .cs-export textarea {
  border: 1px solid var(--line); border-radius: .55rem; padding: .42rem .65rem; min-width: 0; max-width: 100%;
  background: #0b1521; color: #eff6f8; font: inherit;
}
.cs-colors { min-width: 0; border: 0; padding: 0; margin: 0 0 .9rem; }
.cs-colors legend { padding: 0; font-size: .88rem; font-weight: 750; }
.cs-color { display: grid; grid-template-columns: minmax(0, 1fr) 2.15rem minmax(5rem, 6rem); align-items: center; gap: .45rem; margin-top: .36rem; font-size: .85rem; }
:is(.cs-colors, .cs-chart-settings) input[type="color"] { cursor: pointer; height: 2.15rem; width: 2.15rem; padding: .17rem; }
:is(.cs-colors, .cs-chart-settings) input[type="text"] { font: .83rem ui-monospace, monospace; width: 100%; }
:is(.cs-colors, .cs-chart-settings) input[aria-invalid="true"] { outline: 1px dashed #ffb7ae; }
.cs-options { display: grid; gap: .4rem; margin: 0 0 .9rem; }
.cs-options label { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.cs-options input { accent-color: var(--mint); width: 1.06rem; height: 1.06rem; margin: 0; }
.cs-preview-head { display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: .4rem .75rem; }
.cs-preview > p, .cs-export > p { color: var(--muted); margin: .25rem 0 .75rem; }
.cs-toggle { display: inline-flex; gap: .15rem; border: 1px solid var(--line); border-radius: .6rem; padding: .2rem; background: #0b1521; }
.cs-toggle button { cursor: pointer; padding: .37rem .62rem; border: 0; background: transparent; border-radius: .4rem; color: #e6edf1; font: inherit; font-size: .83rem; font-weight: 700; }
.cs-toggle button[aria-pressed="true"] { background: var(--mint); color: #102820; }
.cs-preview-stage { background: #0b1521; border: 1px solid var(--line); border-radius: .8rem; padding: clamp(.35rem, 1vw, .72rem); }
#cs-widget { margin-inline: auto; }
#cs-widget[data-width="mobile"] { max-width: 390px; }
.cs-export { margin-top: 1rem; }
.cs-export .actions { margin-top: .75rem; }
.cs-export input, .cs-export textarea { font: .83rem/1.5 ui-monospace, monospace; width: 100%; }
.cs-export label { margin: .6rem 0 .25rem; }
.cs-export textarea { resize: vertical; }
.cs-help { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .7rem; }
.cs-help summary { cursor: pointer; font-weight: 750; }
.cs-help li { margin: .36rem 0; }
#cs-contrast { color: #ffccc2; }
#cs-generate:disabled { opacity: .65; cursor: not-allowed; }
@media (max-width: 820px) { .cs-workbench { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .cs-preview { padding: .6rem; } }
#cs-tool-preview { display: block; width: 100%; border: 0; border-radius: .75rem; }
.cs-intro { padding-bottom: 1.25rem; }
.cs-intro .page-title { font-size: clamp(2.5rem, 7vw, 5.75rem); }
.cs-intro > p:last-child { color: var(--muted); margin-top: .6rem; }
.cs-chart-settings { margin:0 0 .9rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:.55rem; }
.cs-chart-settings summary { cursor:pointer; font-size:.88rem; font-weight:750; }
.cs-chart-settings p { font-size:.77rem; margin:.4rem 0; }
.cs-chart-settings .button { margin-top:.55rem; }
.cs-chart-settings input { border-color:var(--line); }