:root{--bg:#101b26;--panel:#182633;--line:#344756;--muted:#adbeca;--text:#f3f6f8;--gold:#f5c465;--green:#78d7b0}
body{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;background:var(--bg)}
header{padding:16px 4%;background:#142230;min-height:64px}header a{font-size:22px}header span{letter-spacing:1px}main{max-width:1600px;padding:24px 4%}
.intro{padding:4px 0 18px;border-bottom:1px solid var(--line)}.intro small{letter-spacing:2px;font-size:12px}.intro h1{font-size:30px;margin:8px 0}.intro p{margin:5px 0;font-size:14px}.metrics{gap:24px}.metrics b{font-variant-numeric:tabular-nums}.metrics>div:nth-child(2){background:#512e35;border:1px solid #a85864;border-radius:10px;padding:9px 18px}.metrics #score{color:#ff8593}
button,select{background:#233745;border-color:#415667;border-radius:7px;min-height:42px;font-size:14px;transition:background .15s}button:hover{background:#304b5c}.primary,#start{background:#f5c465;color:#172432;box-shadow:none;border-color:#f5c465}.scene-picker{padding:16px 0;margin:0;gap:12px}.scene-picker label{color:#c0ccd5;font-size:13px;white-space:nowrap}.scene-picker select{width:min(440px,100%);font-size:15px;background:#1d3040}
.toolbar{background:#182b3b;border:1px solid var(--line);padding:12px;gap:12px;margin:0 0 18px;border-radius:10px}.toolbar>div{gap:8px;flex-wrap:wrap}#mode{background:#203747;color:#ffe2a0;border:1px solid #927745;box-shadow:none;font-size:14px;min-height:44px;padding:10px 12px}#start{padding:10px 20px;font-size:15px}#zoomlabel{color:#f4dba7;width:46px;font-variant-numeric:tabular-nums}
.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.board,aside{border-radius:10px;border-color:var(--line)}.boardtop{background:#203342;align-items:center;padding:12px 14px}.boardtop span:last-child{font-size:10px}#boardtitle{color:#f5d491;font-size:13px}#viewport{max-height:66vh;min-height:0;overscroll-behavior:contain;scrollbar-color:#648398 #142330}.boardbottom{background:#152736;color:#dfcc9e;line-height:1.6;padding:11px 14px}.sidehead{padding-bottom:12px;border-bottom:1px solid var(--line)}aside h2{font-size:17px}aside .help{font-size:12px;line-height:1.7;color:var(--muted)}#badge{border:1px solid #6d6347;background:#3c382b;padding:4px 8px;border-radius:5px}#targets{gap:8px;max-height:350px}.targetrow{background:#213747;border-color:#365162;min-height:46px}.targetrow b{background:#344c5c;color:#f8d18a}.targetrow.done{background:#1b423d;border-color:#386a59}.targetrow span{line-height:1.5}aside .wide{font-size:13px}.learning-footer{gap:24px}.learning-note p{max-width:85ch;line-height:1.85}
dialog{background:#182b3b;border-color:#557084;border-radius:13px;padding:24px}dialog h2{font-size:23px}.options button{background:#243e51;border-color:#486378;font-size:15px}.feedback{background:#203a47}.basis{border-top:1px solid #48616e;padding-top:12px}.basis small{color:#c5d4dc;line-height:1.8}.major-basis{background:#472e37}.kicker{letter-spacing:1px}.resultnum{color:#ff8593}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}#targets{grid-template-columns:repeat(3,minmax(0,1fr))}.intro h1{font-size:26px}}
@media(max-width:700px){header{padding:10px 4%;min-height:56px}header a{font-size:20px}header span{display:none}header button{min-height:38px;padding:7px 12px;font-size:12px}main{padding:14px 12px}.intro{display:block;padding-bottom:12px}.intro small{font-size:11px}.intro h1{font-size:23px;line-height:1.4;margin:5px 0 10px}.intro>div>p{display:none}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;align-items:center}.metrics>div{padding:8px 10px;background:#192d3c;border-radius:7px}.metrics>div:nth-child(2){padding:8px 10px}.metrics b{font-size:24px;line-height:1.2}.metrics span{font-size:11px}.scene-picker{padding:12px 0;gap:8px}.scene-picker select{min-width:0;flex:1;font-size:13px;padding:10px 8px}.toolbar{padding:10px;margin-bottom:12px;gap:10px}.toolbar>div{width:100%;display:grid;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar>div:first-child #mode{grid-column:1/-1;width:100%;font-size:14px;min-height:44px}.toolbar>div:first-child #start{grid-column:1;min-width:0;padding:9px 4px;font-size:14px}.toolbar button{font-size:12px;padding:8px 4px;min-height:44px;white-space:nowrap}.toolbar>div:nth-child(2){grid-template-columns:44px 40px 44px repeat(3,minmax(0,1fr));align-items:center;padding-top:10px;border-top:1px solid var(--line)}.toolbar>div:nth-child(2) button{min-width:0}#minus,#plus{font-size:18px}#zoomlabel{width:46px}#fit,#answer,#finish{font-size:11px}.workspace{display:flex;flex-direction:column;gap:12px}.boardtop{padding:10px}.boardtop span:last-child{display:none}#boardtitle{font-size:12px}#viewport{max-height:48dvh;min-height:0;overflow:auto}#canvas{min-width:0}.boardbottom{font-size:12px;padding:9px 10px}aside{padding:13px}#targets{grid-template-columns:repeat(2,minmax(0,1fr));max-height:260px}.targetrow{font-size:12px;padding:8px;gap:7px;min-width:0}.targetrow b{flex-shrink:0;width:25px}.targetrow span{overflow-wrap:anywhere}dialog{width:calc(100vw - 16px);padding:16px;max-height:92dvh}dialog h2{font-size:21px;padding-right:26px}.options{grid-template-columns:1fr;gap:8px}.options button{min-height:50px;font-size:14px;padding:10px 12px}.feedback{padding:12px;font-size:14px}.crop{height:170px}.learning-footer{padding:16px 2px;gap:10px}.learning-note p{font-size:12px}.zf-brand{align-self:flex-end}#canvas .pin.numbered{width:24px;min-width:24px;height:26px;font-size:14px}}
@media(max-width:360px){.toolbar>div:nth-child(2){grid-template-columns:40px 36px 40px repeat(3,minmax(0,1fr))}#zoomlabel{width:42px}.metrics b{font-size:21px}}
@media(prefers-reduced-motion:reduce){button,select{transition:none}}