/* SAVRN Atom page tokens and base rules. Light brand only: white surfaces, hairline borders, copper emphasis,
   french blue structure, square corners. Scoped under .atom-page so nothing reaches the rest of the site. */
.atom-page{--op-ink:#0D1621;--op-blue:#2F6BB0;--op-copper:#E85D04;--op-copper-deep:#C24A02;--op-line:#E8EAEE;--op-muted:#596571;--op-text:#3A4654;color:var(--op-ink);color-scheme:light;font-size:17px;line-height:1.55}
.atom-page *{border-radius:0}
:where(.atom-page) :is(button,input){font:inherit;color:inherit;letter-spacing:inherit}
:where(.atom-page) button{border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
.atom-page :is(button,a,input):focus-visible{outline:3px solid var(--op-blue);outline-offset:3px}
.elevation-figure h3{font:500 32px/1.08 Fraunces,Georgia,serif;letter-spacing:-.025em;margin:0 0 25px;color:var(--op-ink)}
.elevation-figure small{font-size:13px}
.elevation-figure svg{flex:none}
.elevation-figure p{margin:0}
.system-layout{display:block}
/* Frame and header of the figure. */
.system-anatomy{margin:0 auto;max-width:1160px;padding:26px 27px 18px;border:1px solid var(--op-line);background:#fff}
.anatomy-header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--op-line);padding-bottom:14px;margin-bottom:22px;font-size:11px;letter-spacing:.1em;color:var(--op-muted)}
.system-anatomy h3{font-size:32px;line-height:1.08;margin:0 0 25px;letter-spacing:-.025em}
.anatomy-options{display:flex;flex-wrap:wrap;gap:8px 18px;border-top:1px solid var(--op-line);margin-top:21px;padding-top:15px;font-size:11px}
.anatomy-options>span{flex-basis:100%;color:var(--op-muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}
.system-anatomy figcaption{font-size:11px;color:var(--op-muted);margin-top:17px;line-height:1.5}
@media(max-width:1100px){.system-anatomy{padding:20px}}
@media(max-width:700px){.system-anatomy{padding:20px 17px 15px}.anatomy-header{font-size:11px;margin-bottom:20px}.system-anatomy h3{font-size:29px}.anatomy-options{gap:8px 15px}.system-anatomy figcaption{font-size:11px}}
/* Drawing legend and view buttons: five items fill every row (3 + 2 on six tracks; a lone fifth key spans the row). */
@media(min-width:701px) and (max-width:900px){.elevation-figure .elevation-legend{grid-template-columns:repeat(6,minmax(0,1fr))}.elevation-figure .elevation-legend>*{grid-column:span 2}.elevation-figure .elevation-legend>:nth-child(n+4){grid-column:span 3}}
@media(max-width:700px){.elevation-figure .elevation-legend>:last-child:nth-child(odd){grid-column:1/-1}.elevation-figure .elevation-views{grid-template-columns:repeat(6,minmax(0,1fr))}.elevation-figure .elevation-views>*{grid-column:span 2}.elevation-figure .elevation-views>:nth-child(n+4){grid-column:span 3}}
/* Micro labels in the SAVRN mono face. */
.anatomy-header>span,.elevation-views button,.elevation-replay,.tour-count,.tour-play,.md-head small,.md-see span,.md-see button,.anatomy-options>span,.elevation-key small,.plan-toggle button,.md-reset,.ev-fit{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
.anatomy-header>span{color:var(--op-ink)}
.ev-scrub{accent-color:var(--op-blue);color-scheme:light}

/* SAVRN Atom explorer: the Atom drawn part by part as the figure comes into view.
   Generated selectors (highlight and tour steps) mirror the part groups in the drawings. */
.elevation-figure{max-width:none;position:relative}
.elevation-figure .anatomy-header{align-items:center}
.elevation-controls{display:flex;align-items:center;gap:14px}
.elevation-views{display:flex;border:1px solid var(--op-line)}
.elevation-views button,.elevation-replay{background:#fff;color:var(--op-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;line-height:1}
.elevation-views button+button{border-left:1px solid var(--op-line)}
.elevation-views button[aria-pressed=true]{background:#fff;color:var(--op-copper-deep);box-shadow:inset 0 -3px 0 var(--op-copper)}
.elevation-views button:hover:not([aria-pressed=true]),.elevation-replay:hover{color:var(--op-blue)}
.elevation-views button.is-power{display:flex;align-items:center;gap:7px}
.elevation-views button.is-power:before{content:'';width:7px;height:7px;background:var(--op-copper);box-shadow:0 0 0 3px rgba(232,93,4,.25);animation:ev-beacon 1.8s ease-in-out infinite}
.elevation-replay{padding:7px 0;display:flex;gap:6px;align-items:center}
.elevation-stage{position:relative;width:100%;aspect-ratio:2480/800;margin:6px 0 18px;color:var(--op-ink);overflow:hidden;background:#fff}
.elevation-stage>svg,.elevation-stage img{display:block;width:100%;height:100%}
.elevation-stage img+img{display:none}
.elevation-stage .ev-named[data-part]{cursor:pointer}
@keyframes ev-beacon{50%{box-shadow:0 0 0 6px rgba(232,93,4,0)}}

/* Drawing sequence. Every line has pathLength=1, so one dash covers it; --delay and --dur come from the SVG. */
.elevation-stage.is-armed .ev-ln{stroke-dasharray:1 1;stroke-dashoffset:1}
.elevation-stage.is-armed .ev-fade{opacity:0}
.elevation-stage.is-armed:not(.is-playing) .ev-fade,.elevation-stage.is-armed:not(.is-playing) .ev-ln{transition:none}
.elevation-stage.is-armed .ev-grow{transform:scaleX(0)}
.elevation-stage.is-armed [data-part=cool1],.elevation-stage.is-armed [data-part=cool2],.elevation-stage.is-armed [data-part=e-cool1],.elevation-stage.is-armed [data-part=e-cool2]{transform:translateY(-26px)}
.elevation-stage .ev-grow{transform-origin:160px 666px}
.elevation-stage.is-playing .ev-ln{stroke-dashoffset:0;transform:none;transition:stroke-dashoffset var(--dur) cubic-bezier(.6,.04,.28,1) var(--delay),transform calc(var(--dur) * .8) cubic-bezier(.2,.7,.2,1) var(--delay),opacity .45s ease}
.elevation-stage.is-playing .ev-fade{opacity:1;transition:opacity .7s ease var(--delay)}
.elevation-stage.is-playing .ev-grow{transform:none;transition:transform var(--dur) cubic-bezier(.6,.04,.28,1) var(--delay)}

/* Once drawn, the Atom comes to life: dry cooler fans turn and heat rises off them, coolant circulates
   (supply cyan, return warm), power moves along the IT halls, racks report and the Megabox bays energize. */
.elevation-stage .ev-rotor{transform-box:fill-box;transform-origin:center}
.elevation-stage .ev-fan{transition:opacity .6s ease}
.elevation-stage.is-armed:not(.is-alive) .ev-fan{opacity:0}
.elevation-stage.is-alive .ev-rotor{animation:ev-spin var(--spin) linear infinite}
.elevation-stage.is-alive .ev-plume{animation:ev-plume 3.2s ease-out infinite var(--plume-delay)}
.elevation-stage.is-alive .ev-coolant{opacity:.9;animation:ev-flow 1.4s linear infinite var(--flow-delay)}
.elevation-stage.is-alive .ev-power{opacity:.95;animation:ev-power 1.1s linear infinite}
.elevation-stage.is-alive .ev-led{animation:ev-blink 2.4s ease-in-out infinite var(--led-delay)}
.elevation-stage.is-alive .ev-energize{animation:ev-energize 1.8s ease-in-out infinite var(--led-delay)}
@keyframes ev-spin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.06)}}
@keyframes ev-plume{0%{stroke-dasharray:34 400;stroke-dashoffset:34;opacity:0}18%{opacity:.9}100%{stroke-dasharray:34 400;stroke-dashoffset:-150;opacity:0}}
@keyframes ev-flow{to{stroke-dashoffset:-64}}
@keyframes ev-power{to{stroke-dashoffset:-58}}
@keyframes ev-blink{0%,100%{opacity:.12}45%,55%{opacity:1}}
@keyframes ev-energize{0%,100%{opacity:.1}50%{opacity:1}}

/* Power path tour: the current step's equipment stays lit and the path so far keeps flowing. */
.elevation-stage .ev-part,.elevation-stage .ev-named,.elevation-stage .ev-life{transition:opacity .45s ease}
.elevation-stage[data-step] .ev-part{opacity:.24}
.elevation-stage[data-step] .ev-named{opacity:.3}
.elevation-stage[data-step="1"] .ev-part[data-group=generation],
.elevation-stage[data-step="2"] .ev-part[data-group=switchgear],
.elevation-stage[data-step="3"] .ev-part[data-group=bess],
.elevation-stage[data-step="4"] .ev-part[data-group=bus],
.elevation-stage[data-step="5"] .ev-part[data-group=megabox],
.elevation-stage[data-step="6"] .ev-part[data-group=compute],
.elevation-stage[data-step="6"] .ev-part[data-group=chillers],
.elevation-stage[data-step="6"] .ev-part[data-group=warehouse],
.elevation-stage[data-step="6"] .ev-part[data-group=link],
.elevation-stage[data-step="7"] .ev-part[data-group=compute],
.elevation-stage[data-step="7"] .ev-part[data-group=drycoolers],
.elevation-stage[data-step="7"] .ev-part[data-group=chillers],
.elevation-stage[data-step="7"] .ev-part[data-group=warehouse],
.elevation-stage[data-step="7"] .ev-part[data-group=link],
.elevation-stage[data-step="7"] .ev-part[data-group=megabox]{opacity:1}
.elevation-stage[data-step="1"] .ev-named[data-part=generation],
.elevation-stage[data-step="2"] .ev-named[data-part=switchgear],
.elevation-stage[data-step="3"] .ev-named[data-part=bess],
.elevation-stage[data-step="5"] .ev-named[data-part=megabox]{opacity:1}
.elevation-stage[data-step="6"] .ev-named[data-part=compute],
.elevation-stage[data-step="6"] .ev-named[data-part=chillers],
.elevation-stage[data-step="6"] .ev-named[data-part=warehouse],
.elevation-stage[data-step="6"] .ev-named[data-part=link],
.elevation-stage[data-step="7"] .ev-named[data-part=compute],
.elevation-stage[data-step="7"] .ev-named[data-part=drycoolers],
.elevation-stage[data-step="7"] .ev-named[data-part=chillers],
.elevation-stage[data-step="7"] .ev-named[data-part=warehouse],
.elevation-stage[data-step="7"] .ev-named[data-part=link],
.elevation-stage[data-step="7"] .ev-named[data-part=megabox]{opacity:1}
.elevation-stage[data-step="1"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="2"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="2"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="3"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="3"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="3"] .ev-pflow[data-step="3"],
.elevation-stage[data-step="4"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="4"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="4"] .ev-pflow[data-step="3"],
.elevation-stage[data-step="4"] .ev-pflow[data-step="4"],
.elevation-stage[data-step="5"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="5"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="5"] .ev-pflow[data-step="3"],
.elevation-stage[data-step="5"] .ev-pflow[data-step="4"],
.elevation-stage[data-step="5"] .ev-pflow[data-step="5"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="3"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="4"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="5"],
.elevation-stage[data-step="6"] .ev-pflow[data-step="6"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="1"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="2"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="3"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="4"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="5"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="6"],
.elevation-stage[data-step="7"] .ev-pflow[data-step="7"]{opacity:1;animation:ev-pflow .9s linear infinite}
.elevation-stage[data-step="6"] .ev-rack,
.elevation-stage[data-step="7"] .ev-rack{animation:ev-blink 2.1s ease-in-out infinite var(--led-delay)}
.elevation-stage[data-step="3"] .ev-charge,
.elevation-stage[data-step="4"] .ev-charge,
.elevation-stage[data-step="5"] .ev-charge,
.elevation-stage[data-step="6"] .ev-charge,
.elevation-stage[data-step="7"] .ev-charge{animation:ev-charge 2.4s ease-in-out infinite var(--led-delay)}
.elevation-stage .ev-charge{transform-box:fill-box;transform-origin:bottom}
@keyframes ev-pflow{to{stroke-dashoffset:-46}}
@keyframes ev-charge{0%{opacity:.9;transform:scaleY(.15)}80%,100%{opacity:.9;transform:scaleY(1)}}

.elevation-stage .ev-zone,.elevation-stage .ev-dim,.elevation-stage .ev-under{transition:opacity .45s ease,fill-opacity .45s ease}
.elevation-stage[data-step] .ev-dim{opacity:0}
.elevation-stage[data-step="1"] .ev-zone[data-zone=generation],
.elevation-stage[data-step="2"] .ev-zone[data-zone=switchgear],
.elevation-stage[data-step="3"] .ev-zone[data-zone=bess],
.elevation-stage[data-step="5"] .ev-zone[data-zone=megabox],
.elevation-stage[data-step="6"] .ev-zone[data-zone=compute],
.elevation-stage[data-step="6"] .ev-zone[data-zone=chillers],
.elevation-stage[data-step="7"] .ev-zone[data-zone=compute],
.elevation-stage[data-step="7"] .ev-zone[data-zone=drycoolers],
.elevation-stage[data-step="7"] .ev-zone[data-zone=chillers]{fill-opacity:.2}
.elevation-stage[data-step] .ev-pflow[data-step="6"]{stroke-width:7}

/* Module highlight from the legend or a callout. */
.elevation-stage[data-highlight] .ev-part,.elevation-stage[data-highlight] .ev-life{opacity:.2}
.elevation-stage[data-highlight] .ev-named{opacity:.25}
.elevation-stage[data-highlight=compute] .ev-part[data-group=compute],
.elevation-stage[data-highlight=cooling] .ev-part[data-group=drycoolers],
.elevation-stage[data-highlight=cooling] .ev-part[data-group=chillers],
.elevation-stage[data-highlight=drycoolers] .ev-part[data-group=drycoolers],
.elevation-stage[data-highlight=chillers] .ev-part[data-group=chillers],
.elevation-stage[data-highlight=megabox] .ev-part[data-group=megabox],
.elevation-stage[data-highlight=link] .ev-part[data-group=link],
.elevation-stage[data-highlight=warehouse] .ev-part[data-group=warehouse],
.elevation-stage[data-highlight=switchgear] .ev-part[data-group=switchgear],
.elevation-stage[data-highlight=switchgear] .ev-part[data-group=xfmr]{opacity:1}
.elevation-stage[data-highlight=compute] .ev-named[data-part=compute],
.elevation-stage[data-highlight=cooling] .ev-named[data-part=drycoolers],
.elevation-stage[data-highlight=cooling] .ev-named[data-part=chillers],
.elevation-stage[data-highlight=drycoolers] .ev-named[data-part=drycoolers],
.elevation-stage[data-highlight=chillers] .ev-named[data-part=chillers],
.elevation-stage[data-highlight=megabox] .ev-named[data-part=megabox],
.elevation-stage[data-highlight=link] .ev-named[data-part=link],
.elevation-stage[data-highlight=warehouse] .ev-named[data-part=warehouse],
.elevation-stage[data-highlight=switchgear] .ev-named[data-part=switchgear],
.elevation-stage[data-highlight=switchgear] .ev-named[data-part=xfmr]{opacity:1}

.elevation-tour{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;border-top:1px solid var(--op-line);padding:14px 0 16px;margin:0 0 16px}
.elevation-tour[hidden]{display:none}
.tour-count{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--op-blue);font-weight:600}
.tour-title{display:block;font-size:22px;font-weight:500;letter-spacing:-.015em;margin:4px 0 3px}
.tour-text{margin:0;font-size:14px;line-height:1.45;color:var(--op-muted);max-width:640px;min-height:2.9em}
.tour-controls{display:flex;align-items:center;gap:5px}
.tour-steps{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.tour-steps button,.tour-prev,.tour-next{width:32px;height:32px;border:1px solid var(--op-line);background:#fff;color:var(--op-ink);font-size:12px;padding:0}
.tour-prev,.tour-next{font-size:16px}
.tour-steps button:hover,.tour-prev:hover,.tour-next:hover{border-color:var(--op-blue)}
.tour-steps button[aria-current]{background:#fff;color:var(--op-copper-deep);border-color:var(--op-copper);box-shadow:inset 0 -3px 0 var(--op-copper);font-weight:600}
.tour-play{margin-left:6px;height:32px;padding:0 14px;background:#fff;color:var(--op-ink);border:1px solid var(--op-line);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tour-play.is-playing{background:#fff;color:var(--op-copper-deep);border-color:var(--op-copper);box-shadow:inset 0 -3px 0 var(--op-copper)}

.elevation-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.elevation-key{display:block;border:1px solid var(--op-line);border-top:3px solid var(--op-line);padding:12px 13px;color:var(--op-ink);transition:border-color .15s,background .15s}
.elevation-key[data-part=compute]{border-top-color:var(--op-blue)}
.elevation-key[data-part=cooling]{border-top-color:#0fa3c4}
.elevation-key[data-part=megabox]{border-top-color:var(--op-copper)}
.elevation-key[data-part=switchgear]{border-top-color:var(--op-copper-deep)}
.elevation-key:hover,.elevation-key:focus-visible,.elevation-key.is-active{background:#fff;border-color:var(--op-blue)}
.elevation-key small{font-size:11px;color:var(--op-blue);letter-spacing:.04em}
.elevation-key span{display:flex;justify-content:space-between;gap:5px;font-size:16px;font-weight:500;margin:5px 0 2px}
.elevation-key b{font-weight:400;font-size:14px}
.elevation-key em{font-style:normal;font-size:11px;color:var(--op-muted)}

@media(max-width:900px){.elevation-legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .elevation-figure .anatomy-header{flex-wrap:wrap;gap:12px}
  .elevation-tour{grid-template-columns:1fr}
  .tour-controls{flex-wrap:wrap;gap:3px}
  .tour-steps{gap:3px}
  .tour-steps button,.tour-prev,.tour-next{width:29px;height:29px}
  .tour-play{margin:6px 0 0;flex-basis:100%}
  .elevation-views button{padding:7px 10px;white-space:nowrap}
  .tour-title{font-size:19px}
  .elevation-legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .elevation-key span{font-size:14px}
  .elevation-key b{display:none}
}

/* Each view's stage shape. */
.is-ends-view .elevation-stage{aspect-ratio:2300/810}
.is-plan-view .elevation-stage{aspect-ratio:2330/835}

/* Changing views: an elevation folds down onto the ground and the plan opens from its north edge; leaving the
   plan, it tips away and the elevation rises from the ground line. Anything else crossfades. */
.elevation-ghost{position:absolute;pointer-events:none;z-index:2;perspective:1600px;background:transparent}
.elevation-ghost>svg{display:block;width:100%;height:100%;will-change:transform,opacity}
.elevation-ghost.is-fold>svg{transform-origin:50% 84%;animation:ev-fold-down .95s cubic-bezier(.55,0,.8,.25) forwards}
.elevation-ghost.is-tip>svg{transform-origin:50% 0;animation:ev-tip-away .8s cubic-bezier(.55,0,.8,.25) forwards}
.elevation-ghost.is-fade>svg{animation:ev-fade-out .55s ease forwards}
.elevation-stage.is-entering-fold{perspective:1600px}
.elevation-stage.is-entering-fold>svg{transform-origin:50% 0;animation:ev-open-plan 1.25s cubic-bezier(.2,.75,.25,1) both}
.elevation-stage.is-entering-rise{perspective:1600px}
.elevation-stage.is-entering-rise>svg{transform-origin:50% 84%;animation:ev-rise 1.2s cubic-bezier(.2,.75,.25,1) .2s both}
@keyframes ev-fold-down{to{transform:rotateX(84deg);opacity:0}}
@keyframes ev-tip-away{to{transform:rotateX(-70deg);opacity:0}}
@keyframes ev-fade-out{to{opacity:0}}
@keyframes ev-open-plan{0%{transform:rotateX(-72deg);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}}
@keyframes ev-rise{0%{transform:rotateX(80deg);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}

/* Plan: dry cooler fans spin once drawn; chilled water and busways run; the other three Atoms slide off Atom 1
   into their places on the four-Atom sheet while the power yard draws. */
.elevation-stage .ev-pfan{transform-box:fill-box;transform-origin:center}
.elevation-stage .ev-fans{transition:opacity .8s ease}
.elevation-stage.is-armed:not(.is-alive) .ev-fans{opacity:0}
.elevation-stage.is-alive .ev-pfan{animation:ev-turn var(--spin) linear infinite}
.elevation-stage.is-alive .ev-chw{opacity:.95;animation:ev-flow 1.6s linear infinite}
.elevation-stage.is-alive .ev-bw{opacity:.95;animation:ev-power 1.2s linear infinite}
@keyframes ev-turn{to{transform:rotate(360deg)}}
.elevation-stage .ev-copy{transition:transform 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--k) * .3s + .2s),opacity .7s ease calc(var(--k) * .3s + .2s)}
.elevation-stage:not(.is-campus) .ev-copy{transform:translateY(var(--shift));opacity:0}
.elevation-stage:not(.is-campus) .ev-campus .ev-ln{stroke-dasharray:1 1;stroke-dashoffset:1;transition:none}
.elevation-stage.is-campus .ev-campus .ev-ln{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset var(--dur) cubic-bezier(.6,.04,.28,1) calc(var(--delay) + .9s)}
.elevation-stage .ev-campus-tag{transition:opacity .8s ease 2.6s}
.elevation-stage:not(.is-campus) .ev-campus-tag,.elevation-stage:not(.is-campus) .ev-feed{opacity:0;transition:none}
.elevation-stage.is-campus.is-alive .ev-feed{opacity:.95;animation:ev-feedflow 1.3s linear infinite;animation-delay:calc(3s + var(--k) * .25s)}
@keyframes ev-feedflow{to{stroke-dashoffset:-74}}
.elevation-stage.is-campus .ev-s{stroke-width:3.4}
.elevation-stage.is-campus .ev-d{stroke-width:2.4}
.elevation-stage.is-campus .ev-block-label{opacity:0}
.elevation-stage .ev-named[data-part],.elevation-stage .ev-named[data-part]{cursor:pointer}

.elevation-stage[data-highlight=compute] .ev-named[data-part=compute],.elevation-stage[data-highlight=compute] .ev-named[data-part=busway],
.elevation-stage[data-highlight=cooling] .ev-named[data-part=drycoolers],.elevation-stage[data-highlight=cooling] .ev-named[data-part=chillers],
.elevation-stage[data-highlight=drycoolers] .ev-named[data-part=drycoolers],.elevation-stage[data-highlight=chillers] .ev-named[data-part=chillers],
.elevation-stage[data-highlight=megabox] .ev-named[data-part=megabox],.elevation-stage[data-highlight=link] .ev-named[data-part=link],
.elevation-stage[data-highlight=warehouse] .ev-named[data-part=warehouse],.elevation-stage[data-highlight=busway] .ev-named[data-part=busway]{opacity:1}
.elevation-stage[data-highlight=busway] .ev-part[data-group=busway],.elevation-stage[data-highlight=compute] .ev-part[data-group=busway],
.elevation-stage[data-highlight=switchgear] .ev-part[data-group=bess],.elevation-stage[data-highlight=switchgear] .ev-part[data-group=link]{opacity:1}

.plan-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;border-top:1px solid var(--op-line);padding:14px 0 16px;margin:0 0 16px}
.plan-controls[hidden]{display:none}
.plan-toggle{display:flex;border:1px solid var(--op-line)}
.plan-toggle button{background:#fff;color:var(--op-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;line-height:1}
.plan-toggle button+button{border-left:1px solid var(--op-line)}
.plan-toggle button[aria-pressed=true]{background:#fff;color:var(--op-copper-deep);box-shadow:inset 0 -3px 0 var(--op-copper);font-weight:600}
@media(max-width:700px){
  .plan-controls{grid-template-columns:1fr}
  .elevation-views{flex-wrap:wrap}
}

/* Callouts: the copper anchor keeps a slow pulse once the drawing is alive. */
.elevation-stage .ev-pulse{transform-box:fill-box;transform-origin:center}
.elevation-stage.is-alive .ev-pulse{animation:ev-ping 2.6s ease-out infinite}
@keyframes ev-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
.elevation-stage .ev-callout{cursor:pointer}

/* Module highlight overlays on the plan and the four-Atom campus. */
.elevation-stage .ev-hl rect{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:9;stroke-opacity:0;transition:fill-opacity .35s ease,stroke-opacity .35s ease}
.elevation-stage[data-highlight=compute] .ev-hl[data-hl=compute] rect,.elevation-stage[data-highlight=cooling] .ev-hl[data-hl=cooling] rect,
.elevation-stage[data-highlight=drycoolers] .ev-hl[data-hl=cooling] rect,.elevation-stage[data-highlight=chillers] .ev-hl[data-hl=cooling] rect,
.elevation-stage[data-highlight=megabox] .ev-hl[data-hl=megabox] rect,.elevation-stage[data-highlight=link] .ev-hl[data-hl=link] rect,
.elevation-stage[data-highlight=warehouse] .ev-hl[data-hl=warehouse] rect,.elevation-stage[data-highlight=switchgear] .ev-hl[data-hl=switchgear] rect,
.elevation-stage[data-highlight=bess] .ev-hl[data-hl=bess] rect,.elevation-stage[data-highlight=control] .ev-hl[data-hl=control] rect{fill-opacity:.26;stroke-opacity:.95;animation:ev-hl-pulse 1.6s ease-in-out infinite}
@keyframes ev-hl-pulse{50%{fill-opacity:.12}}
.elevation-stage[data-highlight=bess] .ev-part[data-group=bess],.elevation-stage[data-highlight=control] .ev-part[data-group=control],
.elevation-stage[data-highlight=bess] .ev-named[data-part=bess],.elevation-stage[data-highlight=control] .ev-named[data-part=control],
.elevation-stage[data-highlight=switchgear] .ev-named[data-part=bess]{opacity:1}

/* Legend keys and optional modules are buttons: they select a module on this page. */
.elevation-key{width:100%;text-align:left;background:#fff;font:inherit;cursor:pointer}
.elevation-key[aria-expanded=true]{background:#fff;border-color:var(--op-copper);box-shadow:inset 0 -3px 0 var(--op-copper)}
.elevation-key[aria-expanded=true] b{transform:rotate(45deg)}.elevation-key[aria-expanded=true] span{color:var(--op-copper-deep)}
.elevation-key b{transition:transform .2s ease;display:inline-block}
.elevation-option{background:none;padding:0 0 4px;border-bottom:2px solid var(--op-copper);font-size:11px;color:var(--op-ink);cursor:pointer}
.elevation-option:hover,.elevation-option[aria-expanded=true]{color:var(--op-blue);border-color:var(--op-blue)}

/* Module panel: opens under the legend; the drawing above zooms to the module. */
.module-panel{position:relative;margin:0 0 16px;border:1px solid var(--op-line);border-top:3px solid var(--op-copper);background:#fff;padding:22px 24px 20px;animation:ev-panel-in .35s ease}
.module-panel[hidden]{display:none}
@keyframes ev-panel-in{from{opacity:0;transform:translateY(-6px)}}
.md-close{position:absolute;top:10px;right:12px;width:34px;height:34px;background:#fff;border:1px solid var(--op-line);font-size:20px;line-height:1;color:var(--op-ink)}
.md-close:hover{border-color:var(--op-blue)}
.md-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:6px 36px}
.md-card[hidden]{display:none}
.md-head{grid-column:1/-1;padding-right:44px}
.md-head small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--op-blue);font-weight:600}
.md-head h4{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:4px 0 6px}
.md-where{margin:0 0 10px;font-size:15px;color:var(--op-ink);max-width:760px}
.md-card.is-offview .md-where:after{content:' Not in this view: choose a view below to see it.';color:var(--op-blue)}
.md-desc{margin:0;font-size:14px;line-height:1.55;color:var(--op-muted)}
.md-specs{margin:0;display:grid;gap:0}
.md-specs div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:8px 0;border-bottom:1px solid var(--op-line)}
.md-specs dt{font-size:13px;color:var(--op-muted)}
.md-specs dd{margin:0;font-size:14px;font-weight:600;color:var(--op-ink);text-align:right}
.md-options{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.md-options li{font-size:12px;padding:5px 9px;background:#fff;border:1px solid var(--op-line)}
.md-see{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.md-see span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--op-muted);margin-right:6px}
.md-see button{background:#fff;border:1px solid var(--op-line);padding:7px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--op-ink)}
.md-see button:hover{border-color:var(--op-blue);color:var(--op-blue)}
.md-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--op-line)}
.md-reset{background:none;padding:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--op-ink);border-bottom:1px solid currentColor}
.md-full{font-size:13px;font-weight:600;color:var(--op-blue);border-bottom:1px solid currentColor;padding-bottom:2px}
@media(max-width:700px){
  .md-card{grid-template-columns:1fr}
  .module-panel{padding:18px 16px}
  .md-head h4{font-size:23px}
}

.md-card{border:0;padding:0;margin:0;background:none}
.md-card:before,.md-card:after{display:none}
.md-head h4{text-transform:none;font-family:Fraunces,Georgia,serif;color:var(--op-ink)}

.elevation-stage.is-campus-settled .ev-campus-tag{transition-delay:0s}

.elevation-stage[data-highlight=generation] .ev-part[data-group=generation],.elevation-stage[data-highlight=generation] .ev-named[data-part=generation]{opacity:1}
.elevation-stage[data-highlight=generation] .ev-hl[data-hl=generation] rect,.elevation-stage[data-highlight=switchgear] .ev-hl[data-hl=generation] rect{fill-opacity:.22;stroke-opacity:.9}

/* Phones (portrait, and landscape up to 1000 px wide and 480 px tall; the same test as elevation.js): the stage runs
   edge to edge inside the figure and frames the whole drawing of the view. elevation.js sets its height to the framed
   drawing, grows it as the reader zooms in, and pans under a finger; the page still scrolls vertically over it. The
   zoom controls sit above the drawing, so they stay under the thumb while the drawing grows. The aspect ratio here
   only holds the space before the drawing loads. */
.ev-pan{display:none}
@media(max-width:700px),(max-height:480px) and (max-width:1000px){
  .elevation-figure.system-anatomy{padding-left:12px;padding-right:12px}
  .elevation-stage{margin:0 -12px 14px;width:calc(100% + 24px);aspect-ratio:2450/590;touch-action:pan-y;cursor:grab;background:#fff;border-top:1px solid var(--op-line);border-bottom:1px solid var(--op-line)}
  .is-ends-view .elevation-stage,.is-plan-view .elevation-stage,.is-power-view .elevation-stage{aspect-ratio:2450/590}
  .elevation-stage .ev-dim,.elevation-stage .ev-meta,.elevation-stage .ev-num-box,.elevation-stage .ev-num{display:none}
  .elevation-stage .ev-name{font-size:46px}
  .elevation-stage .ev-label text{font-size:40px}
  .elevation-stage .ev-label.small text{font-size:34px}
  .elevation-stage .ev-label.big text{font-size:52px}
  .elevation-stage .ev-label.huge text{font-size:110px}
  .ev-pan{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px 10px;margin:0 0 8px}
  .ev-zoom{width:44px;height:44px;border:1px solid var(--op-line);background:#fff;color:var(--op-ink);font-size:22px;line-height:1}
  .ev-zoom:active{border-color:var(--op-copper);color:var(--op-copper-deep)}
  .ev-scrub{width:100%;height:44px;accent-color:var(--op-blue);margin:0}
  .ev-scrub:disabled,.ev-zoom:disabled{opacity:.35}
  .ev-zoom:disabled:active{background:#fff}
  .ev-pan-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px}
  .ev-pan-hint{margin:0;font-size:12px;color:var(--op-muted);text-align:center}
  .ev-fit{margin-left:auto;flex:none;height:40px;padding:0 14px;border:1px solid var(--op-line);border-radius:0;background:#fff;color:var(--op-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
  .ev-fit[hidden]{display:none}
  .ev-fit:active{border-color:var(--op-copper);color:var(--op-copper-deep)}
  /* No text under 11 px on a phone. */
  .elevation-views button,.elevation-replay,.tour-count,.tour-play,.elevation-key small,.md-head small,.md-see span{font-size:11px}
  .elevation-figure .anatomy-header>span,.elevation-figure .anatomy-options>span,.elevation-figure.system-anatomy figcaption{font-size:11px}
}
/* Landscape phones: the zoom controls take one row, leaving the short screen to the drawing. The last column holds
   the hint at rest and the button back to the whole drawing once zoomed, at one width, so + never moves. */
@media(max-height:480px) and (max-width:1000px){
  .ev-pan{grid-template-columns:44px minmax(0,1fr) 44px 176px}
  .ev-pan-foot{grid-column:auto;justify-content:flex-start;min-height:44px}
  .ev-pan-hint{text-align:left}
  .ev-pan-foot:has(.ev-fit:not([hidden])) .ev-pan-hint{display:none}
  .ev-fit{margin-left:0;height:44px;width:100%}
}
@media(max-width:700px){
  .elevation-views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .elevation-views button{padding:11px 6px}
  .elevation-replay{margin-left:auto}
  .tour-steps button,.tour-prev,.tour-next{width:36px;height:36px}
  .tour-controls{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:4px;align-items:center}
  .tour-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin:0;padding:0}
  .tour-steps button{width:100%;min-width:0}
  .tour-play{grid-column:1/-1}
  /* The tour steps and the plan toggle sit straight under the drawing, above their captions, so a longer caption
     never moves them. */
  .tour-controls,.plan-toggle{order:-1}
}

/* Phones at the whole-drawing scale: labels that would read under 11 px, or that the edge of the frame would cut,
   give way to numbered markers that match the module cards (elevation.js places and sizes them); zooming in brings
   the labels back. Desktop never shows markers. */
.ev-marker{display:none}
@media(max-width:700px),(max-height:480px) and (max-width:1000px){
  .elevation-stage .ev-tiny,.elevation-ghost .ev-tiny,.elevation-stage.ev-no-plume .ev-plume{visibility:hidden}
  .ev-marker:not(.is-off){display:inline}
  .ev-marker rect{fill:var(--op-copper);stroke:var(--op-ink);stroke-width:1}
  .ev-marker text{font:700 11px Inter,system-ui,sans-serif;fill:var(--op-ink);text-anchor:middle;letter-spacing:.02em}
}

/* Reduced motion: the drawing shows complete and still; no fans, flows, pulses or beacons. */
@media(prefers-reduced-motion:reduce){.elevation-figure *,.elevation-figure *::before,.elevation-figure *::after{animation:none!important;transition:none!important}}