:root{--bg:var(--color-bg);--bg2:var(--color-soft);--panel:var(--color-paper);--panel2:#ffffff;--line:var(--color-border);--line2:#b6b1a6;--ink:var(--color-text-primary);--mut:var(--color-text-secondary);--mut2:#77746c;--plasma:var(--color-accent-primary);--plasma-bright:var(--color-accent-warm);--plasma-deep:#555555;--plasma-glow:rgba(0,0,0,.18);--good:#444444;--warn:#666666;--fusion-c:var(--color-accent-primary);--serif:Georgia,serif;--sans:'Open Sans',Arial,sans-serif;--mono:'Open Sans',Arial,sans-serif;}
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
  body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(1000px 600px at 80% -10%, rgba(0,0,0,.06), transparent 60%), radial-gradient(800px 500px at -5% 110%, rgba(0,0,0,.04), transparent 55%); }
  ::selection { background: var(--plasma); color: #fff; }
  .app { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 24px 60px; }
  h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
  .mono { font-family: var(--mono); }

  /* ---- top bar ---- */
  header.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 13px 24px; margin: 0 -24px 22px; background: rgba(255,249,244,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand .chip { width: 38px; height: 38px; border-radius: 9px; background: var(--color-bg); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line2); flex: 0 0 auto; }
  .brand .chip img { width: 28px; height: 28px; display: block; }
  .brand b { font-family: var(--serif); font-weight: 600; font-size: 15px; }
  .brand span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut2); }

  /* mode toggle */
  .modes { display: inline-flex; background: var(--panel); border: 1px solid var(--line2); border-radius: 11px; padding: 4px; gap: 4px; }
  .modes button { background: transparent; border: none; color: var(--mut); font-family: var(--sans); font-weight: 500; font-size: 14px; padding: 9px 18px; border-radius: 8px; cursor: pointer; transition: all .18s; display: flex; align-items: center; gap: 8px; }
  .modes button .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mut2); transition: all .2s; }
  .modes button:hover { color: var(--ink); }
  .modes button.on { background: color-mix(in srgb,var(--plasma) 12%,transparent); color: var(--plasma-bright); box-shadow: inset 0 0 0 1px var(--plasma-deep); }
  .modes button.on .dot { background: var(--plasma); box-shadow: 0 0 8px var(--plasma); }

  /* ---- main layout ---- */
  .layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
  @media (max-width: 940px) { .layout { grid-template-columns: 1fr; } }

  .stage { display: flex; flex-direction: column; gap: 14px; }
  .window { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(120% 130% at 50% 25%, var(--panel2), var(--bg2)); }
  .window.macro { aspect-ratio: 16 / 10; }
  .window.micro { height: 200px; }
  .window canvas { width: 100%; height: 100%; display: block; }
  .win-tag { position: absolute; left: 14px; top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); display: flex; align-items: center; gap: 7px; }
  .win-tag b { color: var(--plasma-bright); font-weight: 500; }
  .win-hud { position: absolute; right: 14px; top: 11px; display: flex; gap: 14px; }
  .win-hud .m { text-align: right; }
  .win-hud .m .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut2); }
  .win-hud .m .v { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.1; }
  .win-hud .m .v.hot { color: var(--plasma-bright); }
  .win-hud .m .v.good { color: var(--good); }
  .win-hud .m .v.warn { color: var(--warn); }
  .micro-note { position: absolute; left: 14px; bottom: 11px; font-family: var(--mono); font-size: 10px; color: var(--mut2); }
  /* micro legend — atom size + zoom */
  .micro-legend { position: absolute; right: 12px; top: 11px; padding: 9px 11px; border: 1px solid var(--line2); border-radius: 9px; background: rgba(255,249,244,.93); backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 5px; z-index: 3; }
  .micro-legend .ml-title { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut2); margin-bottom: 1px; }
  .micro-legend .ml-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mut); }
  .micro-legend .ml-circ { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: #23232a; border-radius: 50%; color: #f5f4ed; font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; line-height: 1; }
  .micro-legend .ml-rows { display: flex; flex-direction: column; gap: 5px; }
  .micro-legend .ml-note { font-family: var(--mono); font-size: 9px; color: var(--mut2); margin-top: 2px; }

  /* ---- control panel ---- */
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
  .panel .p-title { font-family: var(--serif); font-size: 19px; font-weight: 600; }
  .panel .p-sub { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
  .ctl { display: flex; flex-direction: column; gap: 8px; }
  .ctl .lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--mut); }
  .ctl .lab b { font-family: var(--mono); font-size: 12.5px; color: var(--plasma-bright); font-weight: 500; }
  input[type=range].pl { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: var(--line2); outline: none; }
  input[type=range].pl::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--plasma-glow), 0 0 12px var(--plasma); cursor: pointer; }
  input[type=range].pl::-moz-range-thumb { width: 17px; height: 17px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--plasma-glow); cursor: pointer; }

  .divider { height: 1px; background: var(--line); }

  /* fuel selector */
  .fuel-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .fuel { border: 1px solid var(--line2); border-radius: 9px; padding: 8px 9px; cursor: pointer; transition: all .16s; background: var(--panel2); position: relative; }
  .fuel:hover { border-color: var(--mut2); }
  .fuel.sel { border-color: var(--plasma); background: color-mix(in srgb,var(--plasma) 9%,transparent); box-shadow: 0 0 0 1px var(--plasma); }
  .fuel .sym { font-family: var(--serif); font-size: 16px; font-weight: 600; }
  .fuel .nm { font-size: 9.5px; color: var(--mut); }
  .fuel .z { position: absolute; top: 6px; right: 8px; font-family: var(--mono); font-size: 8.5px; color: var(--mut2); }
  .fuel-note { font-size: 11.5px; color: var(--mut2); font-style: italic; }

  /* buttons */
  .btn { width: 100%; padding: 12px; border-radius: 9px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; cursor: pointer; transition: all .15s; border: 1px solid var(--plasma); background: color-mix(in srgb,var(--plasma) 11%,transparent); color: var(--plasma-bright); }
  .btn:hover { background: var(--plasma); color: #fff; box-shadow: 0 0 24px var(--plasma-glow); }
  .btn.ghost { border-color: var(--line2); background: transparent; color: var(--ink); }
  .btn.ghost:hover { border-color: var(--mut); background: var(--panel2); box-shadow: none; color: var(--ink); }
  .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

  /* readout card */
  .readout { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 14px; display: grid; gap: 11px; }
  .readout .r { display: flex; justify-content: space-between; align-items: baseline; }
  .readout .r .k { font-size: 12.5px; color: var(--mut); }
  .readout .r .v { font-family: var(--serif); font-size: 17px; font-weight: 600; }
  .readout .r .v.hot { color: var(--plasma-bright); }
  .readout .r .v.good { color: var(--good); }
  .readout .r .v.warn { color: var(--warn); }
  .status-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
  .status-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--plasma-deep), var(--plasma-bright)); transition: width .2s; }

  /* timeline */
  .timeline { display: flex; flex-direction: column; gap: 10px; }
  .tl-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); }
  .timeline { animation: tlIn .35s ease both; }
  @keyframes tlIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .tl-track { position: relative; height: 34px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line2); cursor: pointer; }
  .tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px 0 0 9px; background: linear-gradient(90deg, color-mix(in srgb,var(--plasma-deep) 50%,transparent), color-mix(in srgb,var(--plasma) 55%,transparent)); width: 0%; }
  .tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line2); }
  .tl-ph { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 22px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px var(--plasma); cursor: ew-resize; left: 0%; }
  .tl-info { min-height: 38px; }
  .tl-info b { font-family: var(--serif); font-size: 15px; color: var(--plasma-bright); display: block; }
  .tl-info span { font-size: 12px; color: var(--mut); }

  /* ---- comparison ---- */
  .compare-wrap { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(155deg, var(--panel), var(--bg2)); padding: 26px; }
  .compare-wrap > h2 { font-size: 24px; margin-bottom: 4px; }
  .compare-wrap > .sub { font-size: 13.5px; color: var(--mut); margin-bottom: 24px; max-width: 64ch; }
  .cmp-power { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
  @media (max-width: 760px) { .cmp-power { grid-template-columns: 1fr; gap: 18px; } }
  .cmp-rlabel { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut2); }
  .cmp-rbig { font-family: var(--serif); font-size: clamp(36px, 5vw, 50px); font-weight: 600; color: var(--fusion-c); line-height: 1.05; margin: 4px 0; transition: color .4s; }
  .cmp-rsub { font-size: 12.5px; color: var(--mut); font-family: var(--mono); }
  .cmp-equiv { display: flex; flex-direction: column; gap: 14px; }
  .cmp-eq-row { border-top: 1px solid var(--line); padding-top: 12px; }
  .cmp-eq-head { font-size: 14px; color: var(--ink); margin-bottom: 8px; }
  .cmp-eq-n { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--plasma-bright); }
  .cmp-eq-hint { font-size: 11px; color: var(--mut2); }
  .cmp-pile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .cmp-pile.dense { gap: 2px; }
  .cmp-pile .pic { color: var(--mut); width: 17px; height: 17px; display: block; }
  .cmp-pile.dense .pic { width: 12px; height: 12px; color: var(--mut2); }
  .cmp-pile .pic svg { width: 100%; height: 100%; display: block; }
  .cmp-pile .pic.ic-rwrap { color: var(--plasma); }
  .cmp-pile #pileR, .cmp-eq-row:first-child .pic { color: var(--fusion-c); transition: color .4s; }
  .cmp-eq-row:first-child .cmp-eq-n { color: var(--fusion-c); transition: color .4s; }
  .cmp-pile .pmore { font-family: var(--mono); font-size: 11px; color: var(--mut); margin-left: 4px; align-self: center; }
  .pile-toggle { align-self: flex-start; margin-top: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--plasma-bright); background: transparent; border: 1px solid var(--plasma-deep); border-radius: 7px; padding: 6px 12px; cursor: pointer; transition: all .15s; }
  .pile-toggle:hover { background: color-mix(in srgb,var(--plasma) 11%,transparent); border-color: var(--plasma); }

  .cmp-mat { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
  .cmp-mat-head { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 18px; }
  .cmp-mat-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
  @media (max-width: 640px) { .cmp-mat-grid { grid-template-columns: 1fr; } }
  .cmp-mat-col { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 180px; }
  .cmp-mat-col.fusion { border-color: var(--plasma-deep); min-height: 320px; justify-content: center; gap: 12px; padding: 26px 20px; }
  .cmp-mat-col.coal { min-height: 320px; }
  .cmp-mat-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px var(--fusion-c), 0 0 5px #fff; margin-bottom: auto; transition: box-shadow .4s; }
  .cmp-mat-col.fusion .cmp-mat-dot { margin: 0; }
  .cmp-mat-col.fusion .cmp-mat-val { color: var(--fusion-c); transition: color .4s; }
  .cmp-mat-mountain { display: flex; flex-wrap: wrap-reverse; gap: 3px; justify-content: center; align-content: flex-end; max-width: 230px; margin: 0 auto auto; min-height: 150px; }
  .cmp-mat-mountain span { width: 15px; height: 15px; border-radius: 2px; background: #2b2b32; border: 1px solid #3b3b46; }
  .cmp-mat-val { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-top: 14px; color: var(--ink); }
  .cmp-mat-val.big { font-size: 38px; color: var(--ink); }
  .cmp-mat-lab { font-size: 12.5px; color: var(--mut); }
  /* CO2 cloud — soft puffs scaled to the emissions */
  .cmp-mat-co2cloud { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-content: flex-start; max-width: 220px; margin: 12px auto 0; min-height: 0; }
  .cmp-mat-co2cloud span { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--warn), transparent 30%), color-mix(in oklch, var(--warn), transparent 78%)); }
  .cmp-mat-co2 { font-family: var(--mono); font-size: 14px; margin-top: 10px; padding: 5px 13px; border-radius: 7px; }
  .cmp-mat-co2.big { font-size: 16px; font-weight: 600; }
  .cmp-mat-co2.good { color: var(--good); border: 1px solid color-mix(in oklch, var(--good), transparent 70%); }
  .cmp-mat-co2.bad { color: var(--warn); border: 1px solid color-mix(in oklch, var(--warn), transparent 70%); }
  .cmp-mat-vs { text-align: center; }
  .cmp-mat-vs span { font-family: var(--serif); font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--plasma); display: block; line-height: 1; }
  .cmp-mat-vs small { font-size: 11px; color: var(--mut2); font-family: var(--mono); letter-spacing: .04em; }

  /* ---- citation ---- */
  .cite { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
  .cite .bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .cite .bar span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); }
  .cite .bar button { font-family: var(--mono); font-size: 11px; color: var(--plasma-bright); background: transparent; border: 1px solid var(--plasma-deep); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
  .cite .body { padding: 16px 18px; font-family: var(--serif); font-size: 14.5px; line-height: 1.65; }
  .cite .body .mut { color: var(--mut); }
  .src { display: flex; gap: 20px; flex-wrap: wrap; padding: 12px 18px 16px; }
  .src div { font-size: 11.5px; color: var(--mut); font-family: var(--mono); }
  .src b { color: var(--ink); }

  footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  footer p { font-family: var(--mono); font-size: 11px; color: var(--mut2); }
  .hidden { display: none !important; }

/* Keep the site's shared navigation and footer identical on this page. */
.site-header{z-index:1000}.site-header .brand{color:var(--color-accent-primary);text-decoration:none}.site-header .brand img{width:2.6rem;height:2.6rem;object-fit:contain}.site-header .brand-name{font:.94rem/1.08 Georgia,serif}.site-footer{display:block;margin-top:0;padding-top:4rem;border-top:0;justify-content:initial}@media(min-width:48rem){.site-footer{display:grid}}.site-footer .footer-grid{display:grid}.sim-heading{padding:calc(var(--header) + 2.8rem) 0 2rem}.sim-heading h1{margin:.3rem 0;font:400 clamp(2.4rem,4.4vw,4.5rem)/1.05 Georgia,serif;letter-spacing:-.02em}.sim-heading>h1+p{max-width:50rem;color:var(--color-text-secondary)}.simulation-app{padding-top:0}.layout{grid-template-columns:minmax(0,1fr) 360px}.window{background:linear-gradient(145deg,var(--color-paper),var(--color-soft))}@media(max-width:940px){.layout{grid-template-columns:1fr}}

.site-header .brand-name>span{font:inherit;color:inherit;letter-spacing:0;text-transform:none}

.site-header .brand-name>span{font:inherit;color:inherit;letter-spacing:0;text-transform:none}

.site-header .brand-name>span{font:inherit;color:inherit;letter-spacing:0;text-transform:none}

.modes{border-radius:.55rem}.modes button{border-radius:.4rem}.modes button.on{background:#111;color:#fff;box-shadow:none}.modes button.on .dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}.mode-tabs button{border-radius:.45rem}

.sim-heading{padding-top:2.5rem}

/* Keep the masthead identical on the standalone simulation page. */
.site-header .brand{color:var(--color-text-primary)}
.site-header .brand img{width:3.35rem;height:3.35rem}
.site-header .brand-name{font:clamp(1rem,1.15vw,1.2rem)/1.12 Georgia,serif}
/* Match the shared masthead at every breakpoint on this page. */
.site-header .brand{color:var(--color-text-primary)}
.site-header .brand img{width:3.35rem;height:3.35rem}
.site-header .brand-name{font:clamp(1rem,1.15vw,1.2rem)/1.12 Georgia,serif}
@media(max-width:1000px){:root{--header:9.5rem}.site-header .brand img{width:3rem;height:3rem}}
@media(max-width:640px){:root{--header:11.75rem}.site-header .brand img{width:2.7rem;height:2.7rem}}

/* Center the method tabs and use the same clear button type and spacing as the masthead. */
.sim-heading{text-align:center;max-width:76rem;margin-inline:auto;padding:2.5rem 1.25rem 1.75rem}.sim-heading>h1+p{margin-inline:auto}.modes{display:flex;width:max-content;max-width:100%;margin:1.5rem auto 0;padding:.3rem;gap:.3rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:.75rem}.modes button{min-height:3rem;padding:.7rem 1.2rem;border:1px solid transparent;border-radius:.5rem;background:transparent;color:var(--color-text-primary);font:600 .94rem/1.2 'Open Sans',Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:.6rem}.modes button:hover{background:var(--color-soft);color:var(--color-text-primary)}.modes button.on{background:#111;color:#fff;box-shadow:none}.modes button.on .dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}@media(max-width:640px){.modes{width:100%;flex-direction:column}.modes button{width:100%}}
@media(max-width:640px){:root{--header:11rem}}