:root { color-scheme: light; --ink:#1c2a31; --muted:#53646b; --line:#d7e1e6; --paper:#f5f8f9; --red:#c84642; --blue:#287bb0; --gold:#d29a34; --loss:#858c91; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #3d9a80; outline-offset:2px; }
[hidden] { display:none !important; }
.app { width:min(100%,1320px); margin:auto; padding:clamp(.6rem,2vw,1.5rem); }
.intro { margin:0 0 1rem; }
.intro h1 { margin:.05rem 0 .25rem; font-size:clamp(1.45rem,2.7vw,2.2rem); line-height:1.15; }
.intro p:last-child { max-width:70ch; margin:.2rem 0 0; color:var(--muted); }
.eyebrow { margin:0; color:#276b5b; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.workspace { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); align-items:start; gap:1rem; }
.panel { min-width:0; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 7px 24px rgba(25,52,62,.07); padding:clamp(.75rem,1.5vw,1.25rem); }
h2 { margin:0 0 .65rem; font-size:1.12rem; }
.chart-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; }
.chart-toolbar h2 { margin:0; }
.chart-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
button { min-height:40px; border:1px solid #bfcbd1; border-radius:9px; background:#f5f8f9; padding:.42rem .7rem; color:#20323a; font-weight:700; }
button:hover { background:#e8f1f3; border-color:#8da7af; }
.chart-wrapper { position:relative; width:100%; height:clamp(320px,36vw,430px); margin:.5rem 0 .7rem; }
.custom-legend { display:flex; flex-wrap:wrap; gap:.45rem .85rem; padding:.35rem .15rem .85rem; border-bottom:1px solid var(--line); }
.legend-item { display:inline-flex; align-items:center; gap:.34rem; color:#425158; font-size:.78rem; white-space:nowrap; }
.swatch { flex:none; display:inline-block; width:19px; height:12px; border-radius:2px; }
.swatch.line { height:4px; }
.swatch.demand { background:#e74c3c; }
.swatch.supply { background:#3498db; }
.swatch.floor { background:#2ecc71; }
.swatch.ceiling { background:#e67e22; }
.swatch.taxed { background:repeating-linear-gradient(90deg,#9b59b6 0 6px,transparent 6px 10px); }
.swatch.consumer { background:rgba(231,76,60,.3); }
.swatch.producer { background:rgba(52,152,219,.3); }
.swatch.revenue { background:rgba(237,178,53,.48); }
.swatch.loss { background:rgba(127,140,141,.5); }
.results { margin-top:.85rem; }
.equilibrium { margin:.15rem 0; font-size:.9rem; }
.equilibrium strong { font-variant-numeric:tabular-nums; }
.notice { margin:.55rem 0; border-left:3px solid #c8963d; border-radius:5px; background:#fff8e9; padding:.5rem .65rem; color:#5d4922; font-size:.84rem; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:.75rem; }
.result-card { display:grid; gap:.1rem; min-width:0; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:9px; background:#fbfcfc; padding:.48rem .65rem; }
.result-card span { color:var(--muted); font-size:.76rem; }
.result-card strong { font-size:1.24rem; font-variant-numeric:tabular-nums; }
.result-card.consumer { border-left-color:var(--red); }
.result-card.producer { border-left-color:var(--blue); }
.result-card.revenue { border-left-color:var(--gold); }
.result-card.loss { border-left-color:var(--loss); }
.result-card.total { grid-column:1/-1; border-left-color:#378775; background:#f3faf7; }
.calculation-details { margin-top:.8rem; border-top:1px solid var(--line); padding-top:.7rem; font-size:.86rem; }
summary { cursor:pointer; font-weight:700; }
#calculationText { display:grid; gap:.3rem; margin-top:.65rem; color:#405158; }
.formulas { display:grid; gap:.15rem; border-radius:9px; background:#eef5f6; padding:.65rem; font-size:.86rem; font-variant-numeric:tabular-nums; }
.slider-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem .85rem; margin:1rem 0; }
.slider-grid label,.point-grid label,.axis-grid label { display:grid; gap:.28rem; color:#30424a; font-size:.83rem; font-weight:700; }
input[type=range] { width:100%; accent-color:#26745e; cursor:pointer; }
input[type=number] { width:100%; min-width:0; min-height:38px; border:1px solid #bfcbd1; border-radius:7px; background:#fff; padding:.35rem .5rem; color:var(--ink); }
input:disabled { background:#eef1f2; color:#7b8a8e; }
fieldset { min-width:0; margin:0 0 .85rem; border:1px solid var(--line); border-radius:11px; padding:.6rem .75rem .75rem; }
legend { padding:0 .25rem; font-weight:800; }
.field-hint { margin:.05rem 0 .55rem; color:var(--muted); font-size:.78rem; }
.policy-row { display:grid; grid-template-columns:minmax(0,1fr) 92px; align-items:center; gap:.55rem; min-height:43px; border-top:1px solid #eef1f2; }
.policy-row:first-of-type { border-top:0; }
.policy-row label { display:flex; align-items:center; gap:.45rem; min-height:42px; cursor:pointer; font-size:.86rem; font-weight:650; }
.policy-row input[type=radio] { width:17px; height:17px; flex:none; margin:0; accent-color:#26745e; }
.policy-row input[type=number] { min-height:34px; }
.error { margin:.4rem 0 0; color:#a12c2c; font-size:.8rem; font-weight:700; }
.advanced { margin:.85rem 0; border:1px solid var(--line); border-radius:10px; padding:.7rem; }
.advanced fieldset { margin:.75rem 0 0; }
.point-grid,.axis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-bottom:.6rem; }
.axis-fieldset { margin-bottom:0; }
@media(max-width:930px) { .workspace { grid-template-columns:1fr; } .chart-wrapper { height:clamp(330px,50vw,450px); } }
@media(max-width:540px) { .app { padding:.45rem; } .panel { padding:.7rem; border-radius:12px; } .intro { margin:.15rem .3rem .7rem; } .intro p:last-child { font-size:.86rem; } .chart-wrapper { height:330px; } .chart-actions button { min-height:38px; padding:.35rem .5rem; font-size:.78rem; } .result-grid { gap:.38rem; } .result-card { padding:.42rem .48rem; } .result-card span { font-size:.69rem; } .result-card strong { font-size:1.08rem; } .slider-grid { gap:.55rem; } .legend-item { font-size:.72rem; } }
.primary-action { background:#26745e; border-color:#26745e; color:#fff; }
.primary-action:hover { background:#1d5e4c; border-color:#1d5e4c; }
#exerciseDialog { top:.5rem; bottom:auto; width:min(920px,calc(100% - 1rem)); max-height:calc(100dvh - 1rem); margin:0 auto; border:1px solid var(--line); border-radius:15px; padding:0; color:var(--ink); background:#fff; box-shadow:0 20px 70px #172a3680; }
#exerciseDialog::backdrop { background:#112931ae; }
.exercise-sheet { padding:clamp(1rem,3vw,2rem); }
.exercise-actions { display:flex; justify-content:flex-end; gap:.5rem; }
.exercise-eyebrow { margin:.1rem 0 .2rem; color:#276b5b; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
#exerciseTitle { margin:.1rem 0 .65rem; font-size:1.55rem; }
#exerciseStory { max-width:80ch; margin:.3rem 0 .75rem; }
.exercise-given { border:1px solid #b9d6cc; border-radius:10px; background:#f1f8f5; padding:.6rem .85rem; font-variant-numeric:tabular-nums; }
.exercise-given p { margin:.25rem 0; }
.exercise-tasks { padding-left:1.5rem; }
.exercise-tasks li { padding-left:.25rem; margin:.45rem 0; }
.exercise-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1rem; margin-top:1rem; }
.exercise-graph { position:relative; min-height:310px; margin:0 1rem 1.5rem 2rem; border-left:2px solid #45565c; border-bottom:2px solid #45565c; background-image:linear-gradient(#dce5e9 1px,transparent 1px),linear-gradient(90deg,#dce5e9 1px,transparent 1px); background-size:25px 25px; }
.exercise-axis-y { position:absolute; left:-2.2rem; top:-1.4rem; white-space:nowrap; font-size:.8rem; font-weight:700; }
.exercise-axis-x { position:absolute; right:-1.8rem; bottom:-1.7rem; white-space:nowrap; font-size:.8rem; font-weight:700; }
.exercise-calculations { min-height:310px; border:1px solid #dce5e9; border-radius:7px; padding:.45rem .65rem; background:repeating-linear-gradient(to bottom,#fff 0,#fff 25px,#e5ebee 26px,#fff 27px); }
.exercise-calculations strong { background:#fff; padding-right:.4rem; }
.exercise-solution { margin-top:1rem; border-top:1px solid var(--line); padding-top:.75rem; }
.exercise-solution p { margin:.45rem 0; }
@media(max-width:650px) { .exercise-workspace { grid-template-columns:1fr; } .exercise-graph { min-height:260px; } .exercise-calculations { min-height:220px; } }
@media print {
  @page { size:A4; margin:12mm; }
  html,body { width:auto; margin:0; background:#fff; color:#000; font-size:10pt; }
  .app,.exercise-actions,.exercise-solution { display:none !important; }
  #exerciseDialog { display:block !important; position:static !important; width:100%; max-width:none !important; max-height:none !important; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; overflow:visible; }
  #exerciseDialog::backdrop { display:none; }
  .exercise-sheet { padding:0; }
  .exercise-given { background:#fff; border:1px solid #777; }
  .exercise-workspace { grid-template-columns:1fr 1fr; gap:1.5rem; break-inside:avoid; }
  .exercise-graph,.exercise-calculations { min-height:360px; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}