:root{color-scheme:dark;--bg:#071b24;--ink:#e8f1f1;--muted:#b1c8d0;--line:#35515e;--mint:#a9eddb;--gold:#f2c38f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--mint);text-underline-offset:4px}button,input,select{font:inherit}button,select{color:var(--ink);background:#15313c;border:1px solid #597781;border-radius:7px;padding:8px 12px;min-height:44px}button{cursor:pointer}button:hover{background:#254b52}button.primary{background:var(--mint);color:#073039;font-weight:650}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.skip{position:absolute;top:-100px;left:20px;z-index:100;padding:12px;background:var(--mint);color:var(--bg)}.skip:focus{top:10px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px max(24px,calc((100% - 1340px)/2));border-bottom:1px solid var(--line)}header>a{font-size:14px}.brand{display:flex;align-items:center;gap:10px;font-size:21px;text-decoration:none;color:var(--ink)}main{max-width:1388px;margin:auto;padding:25px 24px}.opening{display:flex;align-items:center;justify-content:space-between;gap:35px}.eyebrow{font:600 12px/1.5 system-ui;letter-spacing:.14em;color:var(--mint);margin:0 0 9px}h1{font-size:clamp(32px,3.2vw,47px);line-height:1.08;font-weight:450;letter-spacing:-.035em;margin:0}h1 em{font:italic 1em Georgia,serif;color:var(--mint)}.opening>p{max-width:450px;color:var(--muted);margin:0;font-size:15px}.lesson-feedback{margin:18px 0!important}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.modes button{border-radius:0;border-width:0 0 3px;border-color:transparent;text-align:left;padding:12px;background:#102a35}.modes button span{display:block;font-size:12px;letter-spacing:.09em;color:var(--muted);margin-bottom:3px}.modes button[aria-pressed=true]{border-color:var(--mint);background:#204440}.modes button[data-visited=true] span:after{content:' · explored';color:var(--mint)}.preparation{display:flex;align-items:center;gap:20px;padding:12px 2px;min-height:70px}.preparation>span{font-size:12px;letter-spacing:.04em;color:var(--gold);max-width:310px}.preparation p{margin:0;color:var(--muted);font-size:14px;flex:1}.preparation button{font-size:14px}.bench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px}.specimen-column,.result-column{min-width:0}.panel{border:1px solid var(--line);border-radius:14px;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:16px;font-weight:500;line-height:1.4;margin:0}.panel-heading>span{font-size:10px;letter-spacing:.06em;color:var(--muted)}.scene-panel{background:radial-gradient(ellipse at 50% 36%,#284b58,#0b222d 76%)}.scene{height:390px;position:relative;isolation:isolate}.scene canvas{display:block;width:100%;height:100%;touch-action:none}.scene-toolbar{display:flex;align-items:center;gap:7px;padding:10px;background:#0b2631;border-top:1px solid var(--line)}.scene-toolbar button{font-size:14px;padding:7px 10px}.scene-toolbar button:first-child{margin-right:auto}.scene-label{position:absolute;border:1px solid #aacfcf;background:#082331ec;color:var(--mint);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font:13px ui-monospace,monospace;transform:translate(-50%,-50%);pointer-events:none}.scene-label.selected{background:var(--mint);color:#073039}.scene-message,#scene-message{height:100%;display:grid;align-content:center;justify-items:center;padding:30px;text-align:center;color:var(--muted)}.motion-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}.motion-row button{font-size:14px}.motion-row p{font-size:14px;color:var(--muted);margin:2px 0;flex:1 1 170px}.parts{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.parts button{font-size:14px;min-height:40px;padding:6px 9px}.parts button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}.part-copy{font-size:14px;color:var(--muted);min-height:44px;margin:10px 0}.region-bar{display:flex;align-items:center;gap:14px;margin-bottom:13px}.region-bar canvas{width:83px;height:83px;flex:0 0 83px}.region-bar label{font-size:14px;display:block}.region-bar select{padding:4px 9px;font-size:14px;min-height:36px;width:100%}.region-bar p{font-size:12px;color:var(--muted);margin:4px 0 0}.image-panel{max-width:440px;margin:auto;background:#0c222b}.image-wrap{position:relative;background:#091722;aspect-ratio:1;max-height:340px;margin:auto;width:min(100%,340px)}#image{width:100%;height:100%;display:block}#tem-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#0a202df5}#tem-cover p{font-size:14px;color:var(--muted)}#image-caption{font-size:12px;color:var(--muted);padding:8px 12px;margin:0;border-top:1px solid var(--line)}#height-key{display:flex;align-items:center;gap:10px;padding:5px 12px;font:12px ui-monospace,monospace}#height-key i{height:9px;flex:1;background:linear-gradient(90deg,#1b2d64,#228ca2,#68ddbc,#fddd8c)}.method-controls{padding:13px 2px 0;max-width:440px;margin:auto}.method-controls label{font-size:14px;display:flex;justify-content:space-between;gap:10px}.method-controls select{width:100%;padding:5px 9px;font-size:14px;margin:4px 0}.method-controls input[type=range]{width:100%;accent-color:var(--mint);min-height:28px}.method-controls p{font-size:14px;color:var(--muted);margin:6px 0}.method-controls output{color:var(--mint)}.guide{display:flex;align-items:flex-start;gap:18px;border-top:1px solid var(--line);padding-top:24px;margin-top:20px}.guide-mark{flex:0 0 38px;height:38px;border-radius:50%;background:var(--mint);color:#103941;display:grid;place-items:center;font:italic 24px Georgia}.guide>div:nth-child(2){flex:1}.guide h2{font-size:25px;font-weight:500;line-height:1.25;margin:0 0 10px}.guide p{max-width:900px;margin:8px 0}.guide .eyebrow{margin:0 0 7px}.guide .limit{border-left:3px solid var(--gold);padding-left:14px;color:var(--muted);font-size:14px}.guide>a{font-size:14px;white-space:nowrap;margin-top:28px}.small{font-size:13px;color:var(--muted)}.compare{margin-top:42px;padding-top:30px;border-top:1px solid var(--line)}.compare h2{font-size:30px;line-height:1.2;font-weight:450;margin:0 0 24px}.comparison-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.comparison-cards article{border-top:1px solid #4e7278;padding-top:14px}.comparison-cards span{color:var(--gold);font-size:12px;letter-spacing:.07em}.comparison-cards h3{font-size:22px;font-weight:450;margin:7px 0}.comparison-cards p{font-size:15px;color:var(--muted);margin:0}fieldset{border:1px solid var(--line);border-radius:10px;margin:35px 0 23px;padding:20px;max-width:860px}legend{font-weight:550;padding:0 10px}fieldset label{display:flex;align-items:flex-start;gap:10px;margin:10px 0;cursor:pointer}fieldset input{margin-top:7px;accent-color:var(--mint)}fieldset button{margin-top:10px}#check-feedback{margin-bottom:0;color:var(--mint)}.separator{margin:0 15px;color:var(--muted)}.notes{border-top:1px solid var(--line);margin-top:30px;padding:24px 0;color:var(--muted);font-size:14px}.notes summary{cursor:pointer;color:var(--ink);font-size:16px}.notes p{max-width:1050px}.notes li{margin-bottom:9px}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:22px 0;font-size:14px;color:var(--muted)}.notice{border:1px solid var(--gold);padding:18px}@media(min-width:1500px){.scene{height:450px}.image-wrap{max-height:380px;width:min(100%,380px)}}@media(max-width:1050px){.bench{gap:16px;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}.scene{height:350px}.scene-toolbar{flex-wrap:wrap}.scene-toolbar button:first-child{flex-basis:100%;margin:0}.opening>p{max-width:360px}.modes button{font-size:14px}.guide{flex-wrap:wrap}.guide>a{margin-top:0;margin-left:56px}}@media(max-width:760px){main{padding:22px 16px}.opening{display:block}.opening>p{max-width:none;margin-top:17px}.bench{grid-template-columns:1fr}.modes{grid-template-columns:1fr 1fr}.preparation{flex-wrap:wrap;gap:6px 12px}.preparation p{flex-basis:100%}.scene{height:350px}.scene-toolbar button:first-child{flex-basis:auto;margin-right:auto}.result-column{border-top:1px solid var(--line);padding-top:18px}.region-bar{max-width:440px;margin:0 auto 12px}.comparison-cards{grid-template-columns:1fr 1fr}.guide{gap:12px}.guide-mark{flex-basis:32px;height:32px}.guide h2{font-size:23px}.guide>a{margin-left:44px}.compare>p>a{display:block;margin:8px 0}.separator{display:none}.panel-heading>span{font-size:9px}}@media(max-width:400px){header{padding:14px 16px;gap:12px}.brand{font-size:18px}.scene{height:315px}.scene-toolbar button{font-size:12px}.scene-toolbar button:first-child{flex-basis:100%;margin:0}.comparison-cards{grid-template-columns:1fr}.guide-mark{display:none}.guide>a{margin-left:0}.modes button{padding:10px 7px}}@media print{header,.lesson-feedback,.scene-toolbar,.motion-row,.parts,.method-controls,#check button,footer{display:none}.bench{display:block}.scene-panel{display:none}body{background:white;color:black}.guide,.notes,.comparison-cards p{color:black}.comparison-cards{grid-template-columns:1fr 1fr}.image-panel{break-inside:avoid}}

@media(min-width:761px) and (max-height:900px){main{padding-top:20px}.opening h1{font-size:36px}.opening>p{font-size:14px}.lesson-feedback{margin:12px 0!important}.modes button{padding:9px 12px}.preparation{min-height:58px;padding:9px 2px}.scene{height:320px}.image-wrap{width:min(100%,280px);max-height:280px}.region-bar canvas{width:65px;height:65px;flex-basis:65px}.region-bar{margin-bottom:9px}.panel-heading{padding:10px 14px}}

@media(min-width:761px) and (max-height:820px){header{padding-top:11px;padding-bottom:11px}main{padding-top:14px}.opening h1{font-size:32px}.scene{height:255px}.image-wrap{width:min(100%,230px);max-height:230px}.preparation{min-height:48px}.panel-heading{padding:9px 14px}.scene-toolbar{padding:7px 10px}.modes button{padding-top:7px;padding-bottom:7px}.motion-row{margin-top:8px}}

.full-image{display:block;margin:7px auto;font-size:14px;min-height:36px;padding:5px 10px}

@media(max-width:760px){.guide>div:nth-child(2){flex-basis:calc(100% - 46px)}.guide>a{flex-basis:100%}}@media(max-width:400px){.guide>div:nth-child(2){flex-basis:100%}}