.hw-page{max-width:1440px;margin:auto;padding:0 clamp(16px,4vw,62px) 64px;color:#e6f0ee}
.hw-page .hw-hero{max-width:1050px;padding:clamp(25px,5vw,64px) 0 25px;margin:0}
.hw-hero h1{font-size:clamp(2.45rem,6vw,5.6rem);line-height:1.02;margin:.14em 0 .2em}
.hw-hero>p:last-of-type{max-width:65ch}
.hw-breadcrumb,.hw-jumps,.hw-figure figcaption{font-size:.88rem;color:#a9bfca}
.hw-breadcrumb{margin-bottom:22px}
.hw-jumps,.hw-view-buttons{display:flex;flex-wrap:wrap;gap:8px}
.hw-jumps{margin-top:14px}
.hw-jumps a,.hw-page button{background:#142732;border:1px solid #41616b;border-radius:6px;color:#e6f5f4;padding:7px 11px;font:inherit;text-decoration:none}
.hw-page button:enabled{cursor:pointer}
.hw-page button:enabled:hover,.hw-jumps a:hover,.hw-page button[aria-pressed=true]{background:#244653;color:#fff}
.hw-page :focus-visible{outline:2px solid #9bf5e4;outline-offset:3px}
.hw-workbench{padding:clamp(12px,2.4vw,28px);background:#0b151f;border:1px solid #324652;border-radius:14px}
.hw-intro h2,.hw-notes h2{margin:0 0 6px;font-size:clamp(1.35rem,2.7vw,2rem)}
.hw-intro p{margin:0 0 16px;color:#bed0d7}
.hw-layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(295px,1fr);gap:16px;align-items:start}
.hw-figure{margin:0}
.hw-scene{position:relative;overflow:hidden;border:1px solid #365460;border-radius:9px;background:#050a14}
.hw-scene canvas{width:100%;height:auto;aspect-ratio:800/470;display:block}
.hw-scene-key{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:6px;justify-content:space-between;flex-wrap:wrap;pointer-events:none}
.hw-scene-key span,.hw-scale-note{background:#060c16e8;color:#e2eff0;border-radius:4px;padding:4px 6px;font-size:clamp(.66rem,1.05vw,.78rem);line-height:1.15}
.hw-scale-note{position:absolute;bottom:8px;left:9px}
.hw-figure figcaption{display:flex;gap:3px 10px;justify-content:space-between;flex-wrap:wrap;padding:8px 0}
.hw-credit{font-size:.75rem}
.hw-controls{background:#101e29;border:1px solid #324955;border-radius:9px;padding:11px}
.hw-controls fieldset{margin:0;padding:0;border:0;min-width:0}
.hw-controls legend{color:#eaf6f1;font-weight:700;font-size:1.03rem;margin-bottom:5px}
.hw-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hw-select,.hw-range{background:#122531;border:1px solid #2f4b59;border-radius:6px;padding:7px 8px;display:block;font-size:.82rem;color:#dce9ed}
.hw-controls fieldset>.hw-select{margin-bottom:8px}
.hw-select select{width:100%;margin-top:4px;padding:4px;color:#f2f7f6;background:#0a1721;border:1px solid #58717c;border-radius:4px;font:inherit}
.hw-range output{display:block;color:#9bf5e4;font-variant-numeric:tabular-nums;font-weight:700}
.hw-range input{width:100%;margin:3px 0;accent-color:#80e1cc}
.hw-range small{display:block;color:#bacdd4;font-size:.73rem;line-height:1.2}
.hw-results{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:15px;margin-top:18px}
.hw-results table{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
.hw-results caption{text-align:left;color:#eaf6f1;font-weight:700;margin-bottom:5px}
.hw-results :is(th,td){padding:5px 7px;border-bottom:1px solid #344c59;text-align:left}
.hw-results thead th{background:#152c37}
.hw-results td:last-child{color:#a5f2e4;font-weight:700}
.hw-outcomes{display:grid;gap:7px}
.hw-outcomes>div,.hw-challenge{border:1px solid #3b5964;background:#122430;padding:9px 12px;border-radius:7px}
.hw-outcomes h3,.hw-challenge h3{font-size:1rem;margin:0 0 2px;color:#eaf6f1}
.hw-outcomes p,.hw-challenge p{margin:0;color:#c0d5dc;font-size:.88rem}
.hw-challenge{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.hw-challenge #hw-verdict:not(:empty){flex-basis:100%;color:#a5f2e4;font-weight:700}
.hw-challenge #hw-verdict:empty{display:none}
.hw-notes{padding-top:26px;max-width:960px}
.hw-notes details{margin:6px 0;border:1px solid #354f5c;border-radius:5px;background:#101e29;padding:8px 12px}
.hw-notes summary{cursor:pointer;color:#eaf6f1;font-weight:700}
.hw-notes details p{margin:.5em 0 0;color:#bed0d7}
.hw-page a:not(.hw-jumps a){color:#9bf5e4;text-decoration:underline;text-underline-offset:.15em}
.hw-noscript{color:#f5d594}
@media(max-width:820px){.hw-layout,.hw-results{grid-template-columns:1fr}}
@media(max-width:380px){.hw-input-grid{grid-template-columns:1fr}.hw-results table{font-size:.8rem}.hw-results :is(th,td){padding:4px}}
.hw-timeline{border:1px solid #324955;border-radius:7px;background:#10232e;padding:8px 11px;margin:2px 0 9px}
.hw-timeline-heading,.hw-timeline-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px}
.hw-timeline-heading label{font-weight:700}
.hw-timeline-heading output{color:#9bf5e4;font-variant-numeric:tabular-nums;font-size:.87rem}
.hw-timeline input{display:block;width:100%;accent-color:#80e1cc;margin:7px 0}
.hw-timeline-actions span{font-size:.75rem;color:#bed0d7}
.hw-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hw-scene canvas{touch-action:pan-y;cursor:grab}
.hw-scene canvas:active{cursor:grabbing}
.hw-orbit-help{margin:7px 0;color:#bed0d7;font-size:.79rem}
.hw-milestones{margin-top:8px;color:#c4d6df;font-size:.82rem}
.hw-milestones summary{cursor:pointer;color:#e8f3f2}
.hw-milestones p{margin:.45em 0}
.hw-log-scroll{overflow-x:auto}
.hw-milestones table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hw-milestones :is(th,td){padding:4px 6px;border-bottom:1px solid #36505b;text-align:left}
.hw-milestones td:last-child{white-space:nowrap}
.hw-observer{margin-top:22px;padding:clamp(12px,2.4vw,28px);background:#0b151f;border:1px solid #324652;border-radius:14px}
.hw-observer h2{margin:0 0 6px;font-size:clamp(1.35rem,2.7vw,2rem)}
.hw-observer p{margin:0 0 9px;color:#c0d5dc}
.hw-observer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hw-observer-panel{padding:10px 12px;border:1px solid #324955;background:#101e29;border-radius:8px;min-width:0}
.hw-observer-panel h3{margin:0 0 4px}
.hw-observer-panel .hw-observer-result{color:#e6f3f3;font-weight:700}
.hw-chart{margin:8px 0}
.hw-chart canvas{width:100%;height:auto;display:block;border:1px solid #365460;border-radius:5px;background:#08131e}
.hw-chart figcaption,.hw-observer .hw-axis-label,.hw-observer .hw-observer-note{font-size:.8rem}
.hw-observer .hw-axis-label{margin-bottom:3px}
.hw-observer .hw-observer-note{margin:9px 0 0}
@media(max-width:820px){.hw-observer-grid{grid-template-columns:1fr}}
.hw-layout{grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr)}
.hw-scene{background:#060d19;border-color:#456071;box-shadow:0 10px 40px #0006}
.hw-scene #hw-immersive{position:absolute;inset:0;display:none;width:100%;height:100%;aspect-ratio:auto;pointer-events:none}
.hw-webgl-ready #hw-immersive{display:block}
.hw-webgl-ready #hw-scene{opacity:0}
.hw-scene #hw-fullscreen{position:absolute;right:8px;bottom:8px;padding:5px 8px;font-size:.79rem}
.hw-scene:fullscreen #hw-scene{width:100%;height:100%;object-fit:contain}
.hw-scene:fullscreen #hw-immersive{width:100%;height:100%}
@media(max-width:820px){.hw-layout{grid-template-columns:1fr}}

.hw-timeline-status{margin:6px 0 0;color:#bfe9df;font-size:.82rem}.hw-timeline-status:empty{display:none}

.hw-help .hw-hero,.hw-help-section{max-width:52rem}
.hw-help-section{margin:0 0 1.2rem;padding:clamp(1rem,3vw,1.65rem);background:#101e29;border:1px solid #324955;border-radius:.75rem;scroll-margin-top:1rem}
.hw-help-section h2{margin:0 0 .7rem;color:#eaf6f1;line-height:1.2}
.hw-help-section h3{margin:1.5rem 0 .5rem;color:#eaf6f1}
.hw-help-section p,.hw-help-section li,.hw-help-section dd{color:#c0d5dc;line-height:1.62}
.hw-help-section :is(ol,ul){padding-inline-start:1.5rem}
.hw-help-section li + li{margin-top:.45rem}
.hw-help-section dl{margin:.65rem 0}
.hw-help-section dt{font-weight:700;color:#a5f2e4;margin-top:1rem}
.hw-help-section dd{margin:.2rem 0 0}
.hw-help-section details{margin:.45rem 0;padding:.6rem .75rem;background:#0b151f;border:1px solid #3b5964;border-radius:.4rem}
.hw-help-section summary{cursor:pointer;font-weight:700;color:#eaf6f1}
.hw-help-section :last-child{margin-bottom:0}
.hw-timeline-progress{display:block;width:100%;height:.48rem;margin:.65rem 0 .5rem;accent-color:#80e1cc}
.hw-timeline-world{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .65rem;color:#d8e9ed;font-size:.86rem}
.hw-timeline-world strong{color:#ecfaf8}
.hw-outcome{margin:.8rem 0 .6rem;padding:1rem;border:1px solid #79cbb9;border-radius:.6rem;background:#0d242a;color:#eaf6f1}
.hw-outcome[hidden]{display:none}
.hw-outcome[data-result="lost"]{border-color:#d79869;background:#2b231f}
.hw-outcome :is(h3,p,ul){margin:0 0 .55rem}
.hw-outcome h3{color:#f3fbf7;font-size:clamp(1.15rem,3vw,1.65rem)}
.hw-outcome .hw-outcome-label{color:#cadbdf;font-size:.78rem}
.hw-outcome .hw-outcome-verdict{font-weight:750;color:#9bf5dc}
.hw-outcome[data-result="lost"] .hw-outcome-verdict{color:#ffd0a8}
.hw-outcome ul{padding-inline-start:1.2rem}
.hw-outcome li+li{margin-top:.3rem}
.hw-scene-loader{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1rem;background:#091524;text-align:center}
.hw-scene-loader[hidden],.hw-scene-loader progress[hidden],.hw-scene-loader p:empty{display:none}
.hw-scene-loader button{min-height:2.75rem;padding:.6rem 1rem;border:1px solid #8be8d4;border-radius:.45rem;background:#14393c;color:#edfff9;font:inherit;font-weight:700;cursor:pointer}
.hw-scene-loader button:disabled{cursor:default}
.hw-scene-loader progress{width:min(16rem,80%);accent-color:#8be8d4}
.hw-scene-loader p{margin:0;color:#d8e9ed;font-size:.85rem}
