.hydrogen-page{--cyan:#66f2d5;--amber:#ffbf6b;--magenta:#ae7dff}body.hydrogen-page{background:radial-gradient(circle at 68% 10%, #32cbbe1f, transparent 34rem), radial-gradient(circle at 22% 68%, #874ecf17, transparent 38rem), var(--night)}.hydrogen-hero{max-width:1680px}.hydrogen-hero .hero-copy{grid-template-columns:minmax(0,1.2fr) minmax(20rem,.6fr)}.hydrogen-grid{grid-template-columns:270px minmax(0,1fr) 310px;min-height:690px}.hydrogen-grid .viewport-wrap{min-height:690px}.hydrogen-controls{overflow:auto}.quantum-selects{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.quantum-selects label{color:var(--dim);font:.58rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;gap:.4rem;display:grid}.quantum-selects label span{color:var(--cyan)}.quantum-selects select{border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);font:500 .86rem var(--mono);text-align:center;background:#07111b;border-radius:0}.control-label{color:var(--muted);margin:0 0 .7rem;font-size:.7rem}.preset-grid{grid-template-columns:repeat(3,1fr);gap:.4rem;display:grid}.preset-grid button,.mode-buttons button{border:1px solid var(--line);min-height:38px;color:var(--muted);font:500 .62rem/1.2 var(--mono);cursor:pointer;background:0 0}.preset-grid button:hover,.mode-buttons button:hover{border-color:var(--cyan);color:var(--ink)}.preset-grid sub{font-size:.55rem}.mode-buttons{grid-template-columns:1fr 1fr;gap:.4rem;display:grid}.mode-buttons button.active{color:var(--cyan);background:#66f2d517;border-color:#66f2d580}.basis-explainer{background:#66f2d50b;border-left:2px solid #66f2d580;gap:.65rem;margin-top:.75rem;padding:.75rem;display:grid}.basis-explainer p{color:var(--muted);font:.6rem/1.55 var(--mono);margin:0}.basis-explainer button{min-height:34px;color:var(--cyan);font:600 .56rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:#66f2d512;border:1px solid #66f2d557}.basis-explainer button:hover{border-color:var(--cyan);background:#66f2d521}.basis-explainer button[hidden]{display:none}.hydrogen-transport{grid-template-columns:1fr}.hydrogen-transport .primary{color:#031512}.hydrogen-viewport{background:radial-gradient(circle,#1a374261,#0000 52%),#02060b}.state-formula{z-index:3;color:var(--ink);font:520 clamp(1.4rem, 2.5vw, 2.4rem)/1 var(--display);letter-spacing:-.04em;pointer-events:none;text-shadow:0 2px 24px #02060b;margin:0;position:absolute;top:3.1rem;left:1.2rem}.basis-caption{z-index:3;max-width:min(75%,37rem);color:var(--cyan);font:500 .58rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;pointer-events:none;text-shadow:0 2px 18px #02060b;margin:0;position:absolute;top:6.05rem;left:1.2rem}.phase-key{z-index:3;color:var(--dim);font:.55rem var(--mono);letter-spacing:.08em;pointer-events:none;grid-template-columns:auto minmax(90px,180px);align-items:center;gap:.35rem .6rem;display:grid;position:absolute;bottom:1.2rem;left:1.2rem}.phase-key i{background:linear-gradient(90deg,#ff906e,#ae7dff,#66f2d5,#ffbf6b,#ff906e);height:3px}.phase-key b{grid-row:2;font-weight:400}.phase-key b:first-of-type{grid-column:2;justify-self:start}.phase-key b:nth-of-type(2){grid-column:2;justify-self:center}.phase-key b:nth-of-type(3){grid-column:2;justify-self:end}.hydrogen-viewport .drag-note{text-align:right;max-width:19rem}.orbital-name{color:var(--cyan);font:540 2rem/1.1 var(--display);letter-spacing:-.04em;margin:0 0 .8rem}.hydrogen-stats .stat-row strong{font-size:1.35rem}.hydrogen-measurement{max-width:1680px}.hydrogen-measurement #radial-chart{width:100%;height:220px;display:block}.chart-note{border-top:1px solid var(--line);padding-top:1rem;color:var(--cyan)!important;font:.62rem/1.6 var(--mono)!important;margin-top:1rem!important}@media (width<=1220px){.hydrogen-grid{grid-template-columns:240px minmax(0,1fr)}.hydrogen-grid .readout-rail{grid-column:1/-1}}@media (width<=760px){.hydrogen-hero .hero-copy,.hydrogen-grid{grid-template-columns:1fr}.hydrogen-grid .viewport-wrap{min-height:560px}.hydrogen-controls{overflow:visible}.state-formula{top:3.2rem}.basis-caption{top:6rem}.phase-key{bottom:1rem}.hydrogen-viewport .drag-note{display:none}}@media (width<=480px){.quantum-selects{grid-template-columns:1fr 1fr 1fr}.preset-grid{grid-template-columns:1fr 1fr}.mode-buttons{grid-template-columns:1fr}.hydrogen-grid .viewport-wrap{min-height:490px}.phase-key{transform-origin:0 100%;transform:scale(.88)}}