:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#203047;background:#edf3f9}*{box-sizing:border-box}body{margin:0}header{background:#122d4c;color:white;padding:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}h1{font-size:23px;margin:0 0 5px}h2{font-size:17px;margin:0}h3{font-size:15px}small{color:#c6d8ea}.toolbar,.buttons,.options,.legend{display:flex;align-items:center;gap:9px;flex-wrap:wrap}button,select,.upload{border:1px solid #b9cce0;background:white;border-radius:8px;padding:9px 12px;font:inherit;cursor:pointer;color:#193451}button:hover,.upload:hover{background:#e5f1ff}.primary{background:#1769b1;color:white;border-color:#1769b1}.primary:hover{background:#0c579a}main{max-width:1550px;margin:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #d6e3f0;border-radius:13px;padding:16px;min-width:0;box-shadow:0 3px 14px #213c5910}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.panel-head span,.hint{font-size:12px;color:#687d93}#scene{height:460px;background:linear-gradient(#f7fbff,#e8f1fa);border-radius:10px;overflow:hidden;touch-action:none}#drawing{width:100%;height:auto;display:block;background:#fcfdff;border:1px solid #e1eaf4;border-radius:10px}.options{margin-bottom:10px;font-size:13px}.options label{white-space:nowrap}.legend{font-size:12px;color:#5a6b7d;margin-top:12px}.legend i{display:inline-block;width:25px;vertical-align:middle;border-top:3px solid #223a56;margin-right:5px}.legend .dash{border-top-style:dashed}.legend .chain{border-top:2px dashed #63809b}.legend .highlight{border-color:#ed8b27}.step-card{background:#f1f7fe;border-radius:10px;padding:14px;min-height:150px;line-height:1.75}.step-card h3{margin:0 0 7px}.step-card p{margin:5px 0}.tip{color:#0c669d}.info{line-height:1.7}.practice-panel p{line-height:1.7}#feedback{min-height:25px;font-weight:600}.upload input{display:none}#photoBox{margin-top:12px;background:#f1f6fb;border-radius:10px;padding:10px}#photoPreview{max-width:100%;max-height:350px;object-fit:contain}footer{text-align:center;color:#7b8b9c;padding:15px;font-size:12px}@media(max-width:950px){main{grid-template-columns:1fr}#scene{height:380px}}@media(max-width:520px){header{padding:15px}main{padding:9px;gap:10px}.panel{padding:11px}#scene{height:310px}.panel-head{align-items:flex-start;flex-direction:column}.toolbar{width:100%}button,select,.upload{font-size:13px;padding:8px}}
.photo-controls{margin:16px 0;padding:14px;border:1px solid #c7d9e7;border-radius:12px;background:#f3f8fc}.photo-controls p{font-size:13px;line-height:1.6}.photo-controls label{font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.photo-controls input[type=range]{width:110px}