:root{--ink:#152c38;--muted:#60727b;--paper:#f5f8f7;--surface:#fff;--line:#dce7e4;--brand:#123b48;--brand2:#1e6673;--accent:#e47737;--shadow:0 14px 40px #173e4814;font-family:Inter,ui-sans-serif,system-ui,"Noto Sans KR",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);line-height:1.55}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:20;padding:9px 12px;background:#fff;border-radius:8px}.lab-header{position:sticky;top:0;z-index:10;background:#123b48ed;color:#fff;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff22}.lab-header-inner{max-width:1320px;margin:auto;min-height:70px;padding:12px 24px;display:flex;align-items:center;gap:22px}.lab-brand{display:flex;align-items:center;gap:11px;min-width:220px}.lab-brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#e47737;color:#fff;font-weight:900}.lab-brand strong{display:block;font-size:15px}.lab-brand small{display:block;color:#c7dcdf;font-size:11px;letter-spacing:.06em}.lab-nav{display:flex;gap:15px;flex:1}.lab-nav a{font-size:14px;color:#d4e4e4}.lab-nav a:hover{color:#fff}.main{max-width:1320px;margin:auto;padding:30px 24px 44px}.crumb{font-size:13px;color:var(--muted);margin:0 0 14px}.crumb span{margin:0 7px;color:#a6b4b7}.hero{position:relative;overflow:hidden;border-radius:20px;padding:42px;background:linear-gradient(118deg,#0e3645,#1a6571 60%,#2d8c92);color:#fff;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-280px;border-radius:50%;border:58px solid #ffffff12}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;color:#aee0db}.hero h1{font-size:clamp(2.15rem,5vw,4.1rem);letter-spacing:-.06em;line-height:1.1;margin:10px 0}.hero h1 span{display:block;font-size:16px;letter-spacing:.08em;color:#c8e3e0;margin-top:10px}.hero p{font-size:17px;color:#e0f0ee;margin:0;max-width:620px}.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:27px;position:relative;z-index:1}.unit-link{padding:17px;border:1px solid #ffffff2e;background:#ffffff12;border-radius:13px;transition:.16s}.unit-link:hover{transform:translateY(-2px);background:#ffffff22}.unit-link b,.unit-link small{display:block}.unit-link small{font-size:12px;color:#cfe5e2}.unit-link b{font-size:15px;margin-top:4px}.toolbar{display:grid;grid-template-columns:minmax(230px,1fr) auto auto;gap:10px;align-items:center;margin:27px 0 18px}.searchbox{display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--line);background:var(--surface);border-radius:10px;min-height:43px}.searchbox input{border:0;outline:0;width:100%;background:transparent}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.chip{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#54666e;font-size:13px;font-weight:700}.chip.active,.chip:hover{background:#e8f5f3;color:#146370;border-color:#8bc3bd}.lab-count{font-size:13px;color:var(--muted);text-align:right}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.lab-card{position:relative;display:flex;flex-direction:column;min-height:235px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 5px 20px #1436400a;overflow:hidden}.lab-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--unit)}.lab-card .unit{font-size:12px;font-weight:800;color:var(--unit)}.lab-card h2{font-size:20px;letter-spacing:-.03em;line-height:1.32;margin:9px 0}.lab-card p{font-size:14px;color:var(--muted);margin:0 0 16px}.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.meta span{font-size:11px;font-weight:750;color:#556b70;background:#eef4f3;border-radius:7px;padding:4px 6px}.lab-card .go{margin-top:15px;font-size:14px;font-weight:800;color:var(--unit)}.lab-view{min-height:calc(100vh - 170px)}.lab-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.back{font-size:14px;font-weight:750;color:#176775}.lab-title h1{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.05em;margin:8px 0}.lab-title p{margin:0;color:var(--muted)}.top-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;min-height:40px;padding:8px 12px;font-size:13px;font-weight:750}.btn.primary{background:#176775;border-color:#176775;color:#fff}.btn:hover{filter:brightness(.97)}.lab-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,.85fr);gap:18px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 22px #1436400a}.stage-panel{min-height:510px;overflow:hidden}.stage-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.stage-head strong{font-size:14px}.live-badge{font-size:11px;color:#177267;background:#e4f3ed;padding:4px 7px;border-radius:7px;font-weight:800}.stage{height:455px;display:grid;place-items:center;padding:12px;background:radial-gradient(circle at 50% 44%,#fff 0,#f4f8f7 72%);overflow:hidden}.stage svg{width:100%;height:100%;touch-action:none}.control-panel{padding:19px}.control-panel h2{font-size:17px;margin:0 0 14px}.control{margin:0 0 16px}.control label{display:flex;justify-content:space-between;font-size:13px;font-weight:750;margin-bottom:7px}.control output{color:#176775}.control input[type=range]{width:100%;accent-color:#176775}.control select,.control input[type=text],.control textarea{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:#fff}.segmented{display:flex;gap:5px;flex-wrap:wrap}.segmented button{border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 8px;font-size:12px;font-weight:700}.segmented button.active{background:#e4f3ef;border-color:#69aaa0;color:#145c63}.control-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px}.info-card{padding:19px}.info-card h2{font-size:16px;margin:0 0 8px}.info-card p,.info-card li{font-size:14px;color:var(--muted)}.info-card ul{margin:0;padding-left:19px}.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:#075866;background:#eaf6f4;padding:9px;border-radius:8px;display:block;margin-top:8px}.presentation .lab-header,.presentation .crumb,.presentation .lab-top .back,.presentation .top-actions .download{display:none}.presentation .main{max-width:none;padding:16px}.presentation .lab-layout{grid-template-columns:minmax(0,1fr) 300px}.presentation .stage-panel{min-height:calc(100vh - 130px)}.presentation .stage{height:calc(100vh - 185px)}.footer{display:flex;justify-content:space-between;gap:20px;margin-top:36px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.empty{padding:60px 20px;text-align:center;color:var(--muted);grid-column:1/-1}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:8px;text-align:left;border-bottom:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:10px;border-radius:9px;background:#f0f6f5}.stat small{display:block;color:var(--muted);font-size:11px}.stat strong{font-size:18px}.hidden{display:none!important}
@media(max-width:1000px){.unit-grid{grid-template-columns:repeat(2,1fr)}.lab-grid{grid-template-columns:repeat(2,1fr)}.lab-layout{grid-template-columns:1fr}.stage-panel{min-height:430px}.stage{height:390px}.info-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.lab-header-inner{padding:11px 15px}.lab-brand{min-width:0}.lab-nav{display:none}.main{padding:20px 15px}.hero{padding:28px 22px}.unit-grid,.lab-grid,.info-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.lab-count{text-align:left}.lab-top{display:block}.top-actions{margin-top:14px}.stage-panel{min-height:355px}.stage{height:315px;padding:5px}.footer{display:block}.footer span{display:block;margin-bottom:6px}.presentation .lab-layout{grid-template-columns:1fr}.presentation .control-panel{display:none}}
@media(prefers-color-scheme:dark){body{background:#101b20;color:#e7f1f1}.lab-card,.panel,.searchbox,.chip,.btn,.segmented button,.control select,.control input[type=text],.control textarea{background:#15242a;color:#e7f1f1;border-color:#2c464b}.stage{background:radial-gradient(circle at 50% 44%,#1d3033 0,#142226 72%)}.stage-head{border-color:#2c464b}.crumb,.lab-count,.lab-title p,.info-card p,.info-card li,.footer{color:#a7bbbd}.meta span,.stat{background:#20353a;color:#c4dbd7}.formula{background:#163b3e;color:#bde8df}.chip.active,.segmented button.active{background:#1b4d4e}.footer{border-color:#2c464b}}
/* Shared, theme-aware working surfaces. */
:root{--plot-ink:#173d4b;--muted:#526974;--surface:#fff;--paper:#f3f7f8;--line:#d6e4e8}body{background:var(--paper);color:var(--ink)}.stage{height:490px;padding:5px;position:relative;background:var(--paper)}.stage svg{font-size:16px;overflow:visible}.stage text{font-family:inherit;pointer-events:none}.stage-panel{min-height:0;align-self:start}.stage-head{gap:10px;flex-wrap:wrap}.stage-head span{font-size:13px;color:var(--muted)}.metrics{display:flex;flex-wrap:wrap;gap:12px;padding:16px;border-top:1px solid var(--line);background:var(--surface)}.metrics>div{flex:1;min-width:110px}.metrics small{display:block;color:var(--muted);font-size:13px}.metrics strong{display:block;font-size:18px;color:var(--ink);overflow-wrap:anywhere}.metrics p{width:100%;margin:0;font-size:14px;color:var(--muted)}.metrics table{width:100%}.lab-control{display:block;margin-bottom:16px;font-size:14px}.lab-control>span{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-weight:700}.lab-control output{color:var(--brand2)}.lab-control input:not([type=checkbox]),.lab-control select,.lab-control textarea{width:100%;min-width:0;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface)}.lab-control input[type=range]{padding:0;accent-color:var(--brand2)}.lab-check{display:flex;gap:8px;margin:12px 0;font-size:14px;align-items:center}.lab-check input{accent-color:var(--brand2)}.control-panel .btn{margin:0 6px 8px 0;min-height:42px;font-size:14px}.control-panel h3{font-size:16px}.control-panel p{font-size:14px;color:var(--muted);line-height:1.65}.control-panel .status-note{color:var(--ink);padding:10px;border-left:3px solid #d68b40;background:var(--paper)}.favorite,.theme-btn{border:0;background:transparent;color:inherit;cursor:pointer;padding:6px;font-size:16px}.favorite{font-size:22px;color:var(--brand2)}.theme-btn{font-size:13px;white-space:nowrap;color:#fff}.card-top{display:flex;justify-content:space-between;align-items:center}.lab-title h1{font-size:clamp(1.65rem,3vw,2.55rem)}.lab-title p{max-width:750px}.lab-top{flex-wrap:wrap}.lab-card h2{font-size:20px}.lab-card p{font-size:15px}.formula{font-size:14px}.info-card p,.info-card li{font-size:15px}.footer{font-size:13px;line-height:1.8}#lab-status{font-size:15px;color:var(--ink);margin-top:12px}#lab-status input{width:100%}.drawing-area{touch-action:none;cursor:crosshair}.stage [data-drag]{cursor:grab;pointer-events:all}.stage [data-drag]:focus{outline:none;stroke:#c47424;stroke-width:4}.table th,.table td{font-size:14px}.data-scroll{max-height:300px;overflow:auto;width:100%}.data-row{display:flex;gap:8px}.data-row>*{min-width:0}.stage canvas{width:100%;height:100%;display:block;touch-action:none}.presentation .stage{height:calc(100vh - 230px);min-height:420px}.presentation .info-grid,.presentation .footer{display:none}.presentation .control-panel{font-size:17px}.presentation .stage-head{display:none}.presentation .lab-title h1{margin:0;font-size:25px}.presentation .lab-title p{display:none}.presentation .lab-top{margin-bottom:10px}.lab-header-inner{flex-wrap:wrap}.error-note{color:#ba4337!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dc9c42;outline-offset:3px}
[data-theme=light]{--ink:#152c38;--muted:#526974;--paper:#f3f7f8;--surface:#fff;--line:#d6e4e8;--plot-ink:#173d4b;--brand2:#176775}
[data-theme=dark]{--ink:#e3eff3;--muted:#b0c6ce;--paper:#102329;--surface:#162e36;--line:#34535e;--plot-ink:#e3eff3;--brand2:#81d0d1}
[data-theme] .lab-card,[data-theme] .panel,[data-theme] .searchbox,[data-theme] .chip,[data-theme] .btn,[data-theme] .segmented button{background:var(--surface);color:var(--ink);border-color:var(--line)}[data-theme] .btn.primary{background:#176775;color:white}[data-theme] .stage{background:var(--paper)}[data-theme] .formula{background:var(--paper);color:var(--brand2)}[data-theme] .chip.active{background:#176775;color:white}[data-theme] .meta span{background:var(--paper);color:var(--muted)}[data-theme] .hero{color:white}[data-theme] .searchbox input{color:var(--ink)}
@media(max-width:680px){.stage{height:350px}.metrics{gap:10px}.metrics strong{font-size:16px}.lab-header-inner{gap:10px}.lab-brand{flex:1}.lab-brand small{font-size:10px}.main{padding:15px 10px}.toolbar{display:flex;flex-direction:column;align-items:stretch}.control-panel{padding:17px}.presentation .control-panel{display:block}.presentation .stage{height:55vh;min-height:300px}.lab-title p{font-size:15px}.lab-nav{display:none}.theme-btn{font-size:12px}}
.profile-editor{background:var(--paper);border:1px solid var(--line);border-radius:10px;margin:12px 0;max-height:230px}.profile-editor svg{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair}.profile-editor text{font-family:inherit}
.stem-table th:first-child{width:70px;text-align:right;border-right:2px solid var(--brand2)}.leaf{border:0;border-radius:5px;background:var(--paper);color:var(--ink);font:600 17px ui-monospace,monospace;margin:2px;padding:5px 8px;min-height:36px;min-width:30px}.leaf.active{background:#c77c2c;color:white}.data-scroll table{border-collapse:collapse}.table th{color:var(--ink)}.metrics mark{background:#f3c67d;color:#172e3c}#stage{min-width:0}.metrics{max-width:100%;overflow-wrap:anywhere}.metrics>p{overflow-wrap:anywhere}.profile-editor svg{color:var(--ink)}

.lab-tabs{display:flex;gap:6px;margin-bottom:18px}.lab-tabs button{flex:1;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}.lab-tabs [aria-selected=true]{background:#176775;color:white}.stage [data-angle]{cursor:pointer;pointer-events:all}.stage [data-angle]:focus-visible{outline:none;stroke:#e09332;stroke-width:3}.vertex-label{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round;font-weight:800}.summary-stats{display:flex;flex-wrap:wrap;gap:14px;flex-basis:100%!important;width:100%;border-top:1px solid var(--line);padding-top:14px}.summary-stats>div{flex:1;min-width:100px}.summary-stats p{width:100%}

/* Keep the canvas and SVG inside an explicitly sized plot, separate from prose. */
.stage{display:block;position:relative;isolation:isolate;min-width:0;min-height:0;padding:12px;overflow:hidden}
.stage:not(.scroll-plot)>svg{position:absolute;inset:12px;display:block;width:calc(100% - 24px);height:calc(100% - 24px);min-width:0;min-height:0;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:hidden}
.stage>canvas{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0}
.stage.scroll-plot{overflow:auto}.stage.scroll-plot>svg{position:static;max-width:none;max-height:none;overflow:hidden}
.stage.table-plot{overflow:auto}.stage.table-plot>.stem-table{table-layout:fixed}.stage.table-plot td{overflow-wrap:anywhere}
.stage-panel{display:flex;flex-direction:column;min-width:0}.stage-panel>.stage{flex:none}.stage-panel>.metrics{position:relative;flex:none;z-index:0}
.plot-caption{margin:0;padding:14px 18px 0;font-size:17px;font-weight:700;line-height:1.5;overflow-wrap:anywhere;background:var(--paper)}
.plot-caption[hidden]{display:none}.metrics>div{min-width:0;flex-basis:130px}.metrics strong,.metrics p{overflow-wrap:anywhere}

.freehand-profile{max-height:none;touch-action:none;user-select:none}.freehand-profile svg{height:260px;touch-action:none}

.grade-tabs{display:flex;gap:10px;margin:20px 0 24px}.grade-tabs .chip{min-width:90px;text-align:center;font-size:18px;padding:12px 25px}.lab-brand strong{font-size:20px}.comparison-table{width:100%;border-collapse:collapse;font-size:14px}.comparison-table th,.comparison-table td{padding:7px;text-align:center;border-bottom:1px solid var(--border,#d8e3e8)}.side-comparison{flex-basis:100%;grid-column:1/-1;width:100%}.side-comparison strong{font-size:15px}.lesson-guide{margin-top:15px}.stage [data-apex],.stage [data-point]{cursor:grab;touch-action:none}.control-panel textarea{width:100%;resize:vertical;box-sizing:border-box;min-height:90px}

.metrics>.side-comparison{flex:0 0 100%;width:100%}.side-comparison summary{cursor:pointer;font-weight:700;padding:8px 0}.comparison-table caption{font-weight:700;text-align:left;margin:8px 0}.grade-tabs{flex-wrap:wrap}.grade-tabs .chip{flex:0 1 auto}

.control-panel .btn:disabled{opacity:.5;cursor:not-allowed}.control-panel input[readonly]{background:var(--paper);color:var(--muted)}

.lab-brand{min-width:0;max-width:430px}.lab-brand>span:last-child{min-width:0}.lab-brand-mark{flex-shrink:0}.lab-brand strong{font-size:clamp(15px,2vw,20px);line-height:1.25;overflow-wrap:anywhere}.hero h1{overflow-wrap:anywhere}

/* Language controls stay outside the experiment canvas. */
.language-switch{display:flex;flex-shrink:0;gap:3px;border:1px solid #ffffff66;border-radius:12px;padding:3px}
.language-switch button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:8px;background:transparent;color:#e4f1f2;padding:7px 10px;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:#e7f6f5;color:#123b48}
.language-switch button:focus-visible{outline:3px solid #e5a43b;outline-offset:2px}
html[lang="en"] .stage-head{flex-wrap:wrap;gap:6px 14px}
html[lang="en"] .lab-control>span,html[lang="en"] .metrics,html[lang="en"] .plot-caption{overflow-wrap:anywhere}
html[lang="en"] .control-panel .btn{white-space:normal}
/* SVG labels own their sizes: a language rule must never override per-diagram
   font-size attributes, especially labels inside scaled geometry. */
@media(max-width:640px){.lab-header-inner{gap:10px}.lab-brand{flex:1 1 100%;max-width:none}.language-switch{margin-left:auto}}

/* Grade 1 geometry: exact diagrams, paired comparisons and generous touch targets. */
.angle-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.angle-picker .btn{margin:0}.control-presets{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.relation-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;margin:16px 0}.relation-legend span{display:flex;align-items:center;gap:6px}.relation-legend i,.legend-dot{display:inline-block;width:11px;height:11px;border-radius:3px;flex-shrink:0}.legend-dot.inner{background:#168e8a}.legend-dot.outer{background:#dc7432}.legend-dot.outside{background:#2879c7}.relation-list{background:var(--paper);padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;font-size:14px}.relation-chips{display:flex;gap:5px;flex-wrap:wrap;max-height:220px;overflow:auto;margin-top:10px}.relation-chips .btn.relation-match{color:var(--brand2);border-color:#2879c780;margin:0;font-size:14px}.relation-solid{cursor:grab}.relation-solid:active{cursor:grabbing}.stage [data-element]{pointer-events:all;cursor:pointer}.stage [data-element]:focus-visible{stroke:#dc7432;stroke-width:5px;outline:none}.relation-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:relation-line .85s ease forwards}.relation-plane{animation:relation-fill 1s ease both}.stage canvas{object-fit:contain}.metrics .result-success{border-left:3px solid #168e8a;padding:10px 12px;background:var(--paper);color:var(--ink)}.metrics .result-caution{border-left:3px solid #dc7432;padding:10px 12px;background:var(--paper);color:var(--ink)}.side-comparison{overflow-x:auto}.side-comparison table{min-width:420px}.stage-head span{max-width:100%}@keyframes relation-line{to{stroke-dashoffset:0}}@keyframes relation-fill{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.relation-draw{animation:none;stroke-dashoffset:0}.relation-plane{animation:none}}

.exterior-table .selected-polygon{background:var(--paper);color:var(--brand2);font-weight:700}.metrics .exterior-equation{font-size:clamp(16px,2vw,22px);color:var(--ink);background:var(--paper);padding:14px;border-radius:10px}.exterior-table th,.exterior-table td{border-color:var(--line);min-width:110px}.exterior-table th:first-child{min-width:150px}.exterior-table{overscroll-behavior-x:contain}