:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#eef5fa;background:#101c2a;font-size:18px;--panel:#1c2b3d;--line:#46586d;--muted:#b7c9d9;--accent:#f7bd80;--button:#2c4057}*{box-sizing:border-box}body{margin:0}#app{max-width:1600px;margin:auto;padding:16px 26px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}h1{font-size:30px;margin:4px 0;letter-spacing:2px}h1 span{font-size:18px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:18px}.eyebrow{font-size:14px;letter-spacing:2px;color:var(--accent)}nav,.control,.tools,#answers{display:flex;gap:8px;align-items:center}button,input{font:inherit}button{border:1px solid var(--line);background:var(--button);color:inherit;border-radius:9px;min-height:44px;padding:8px 14px;cursor:pointer;white-space:nowrap}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button[aria-pressed=true],.primary{background:var(--accent);color:#182333;border-color:var(--accent);font-weight:700}button:disabled{opacity:.5;cursor:default}.control{background:var(--panel);border-radius:12px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}.time{flex:1;min-width:220px}.time label{display:block;font-size:17px}.time output{color:var(--accent);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:22px;accent-color:var(--accent);cursor:pointer}input[type=number]{width:82px;border:1px solid var(--line);border-radius:7px;padding:5px;color:inherit;background:var(--button);min-height:44px;text-align:center}.stage{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#283d51,#182635 75%)}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 16px}.stage-top strong{font-size:20px}.sub{color:var(--muted);font-size:15px;margin-left:20px}#models{display:grid;grid-template-columns:repeat(3,1fr)}.model{min-width:0;border-right:1px solid #435367}.model:last-child{border-right:0}.model h2{font-size:18px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:400}.badge{color:var(--accent);font-weight:700;margin-right:8px}.viewport{height:210px;position:relative;touch-action:none}.viewport canvas{width:100%;height:100%;display:block}.stage-bottom{font-size:14px;border-top:1px solid #435367}.dot{display:inline-block;width:13px;height:13px;border-radius:3px;margin:0 5px 0 10px}.dye{background:#ee7195}.core{background:#eff2df}#cutNote{color:var(--muted);margin-left:14px}.tools button{font-size:15px;padding:6px 12px}.data{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}table{width:100%;border-collapse:collapse;text-align:center;table-layout:fixed;font-variant-numeric:tabular-nums}th,td{padding:6px 10px;border-bottom:1px solid #38495c}tr:last-child>*{border-bottom:0}th:first-child{width:25%;text-align:left;padding-left:18px}thead{background:var(--panel);font-size:15px}tbody th{font-weight:400;font-size:16px;color:var(--muted)}td{font-size:19px}tr.emphasis td{color:var(--accent);font-size:24px;font-weight:700}.question{margin-top:12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px}.question strong{display:block;font-size:19px;margin-top:4px}#feedback{grid-column:1/-1;margin:1px 0;font-size:16px;color:var(--muted);min-height:24px}#feedback.correct{color:#9be6b3}#feedback.wrong,#error{color:#ffb3b3}footer{display:flex;justify-content:space-between;gap:14px;margin-top:10px;font-size:14px;color:var(--muted)}summary{cursor:pointer;min-height:32px}.detail-grid{display:grid;grid-template-columns:1fr 2fr;gap:22px;padding:12px;background:var(--panel);border-radius:10px;font-size:16px;line-height:1.6}details{flex:1}footer>span{white-space:nowrap}#error{margin:0;min-height:0}dialog{max-width:780px;max-height:88vh;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:inherit;padding:26px;line-height:1.8}dialog::backdrop{background:#020710bb}dialog button{float:right}dialog h2{margin-top:4px}dialog a{color:var(--accent)}.small{font-size:14px;color:var(--muted)}.sr{position:absolute;left:-10000px}.contrast{--panel:#000;--line:#ddd;--muted:#fff;--accent:#ffdc70;--button:#151515;background:#000;color:#fff}.contrast .stage{background:#000}.contrast .stage *{border-color:#aaa}:fullscreen{overflow:auto;background:#101c2a}:fullscreen.contrast{background:#000}@media(min-height:900px){.viewport{height:300px}th,td{padding-top:10px;padding-bottom:10px}}@media(max-width:1100px){#app{padding:12px 16px}.sub{display:block;margin:5px 0 0}h1 span{display:block;margin:5px 0 0}.control{gap:6px}.control button{font-size:16px;padding:8px 10px}.question{grid-template-columns:1fr}.stage-bottom{flex-wrap:wrap}.viewport{height:190px}}@media(max-width:600px){#app{padding:12px 10px}header{flex-wrap:wrap}h1{font-size:27px}nav{width:100%}nav button{flex:1;font-size:15px;padding:6px}.control .time{flex-basis:100%}.stage-top{padding:10px}.stage-top strong{font-size:17px}.sub{font-size:12px}.model h2{font-size:14px;gap:2px;flex-wrap:wrap}.model h2 input{width:60px;font-size:17px}.badge{margin-right:2px}.viewport{height:155px}.stage-bottom{padding:8px}.stage-bottom>span{line-height:1.8}#cutNote{display:block;margin-left:10px}.tools{width:100%;justify-content:center}.tools button{font-size:14px}th,td{padding:7px 3px}th:first-child{width:35%;padding-left:7px}tbody th{font-size:13px}td{font-size:16px}tr.emphasis td{font-size:21px}#answers button{flex:1;padding:6px;font-size:16px}footer{flex-direction:column}.detail-grid{grid-template-columns:1fr}.question strong{font-size:18px}}
/* Compact classroom layout keeps the five comparison rows and main controls visible. */
body{line-height:1.3}
@media(min-width:1101px) and (max-height:850px){#app{padding:10px 22px}header{margin-bottom:8px}header .eyebrow{display:none}h1{font-size:28px;margin:0}.control{padding:6px 12px;margin-bottom:8px}.time label{font-size:16px}.time output{font-size:21px}.stage-top,.stage-bottom{padding:4px 12px}.viewport{height:140px}.stage-top .sub{font-size:14px}.model h2{font-size:16px}.data{margin-top:8px}th,td{padding:3px 9px}thead{font-size:14px}td{font-size:18px}tbody th{font-size:15px}tr.emphasis td{font-size:22px}.question{margin-top:8px;gap:3px 12px}.question .eyebrow{display:none}.question strong{font-size:18px;margin:0}#feedback{font-size:15px;min-height:20px}footer{margin-top:5px}summary{min-height:24px}}
@media(max-width:600px){.tools{flex-wrap:wrap}.tools button{flex:0 0 auto}}
button{touch-action:manipulation}

.cut-tools{display:flex;align-items:center;gap:8px}#ghost{font-size:15px}.cut-tools [hidden]{display:none}@media(max-width:600px){.cut-tools{flex-direction:column;align-items:stretch;gap:5px}.cut-tools button{font-size:14px;padding:6px 8px}#cutNote{font-size:13px}}