*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;color:#122540;background:#f8f9fb}header{padding:32px 22px;text-align:center;background:linear-gradient(140deg,#0d213e,#213d60);color:white;border-bottom:4px solid #b29960}h1{font-size:clamp(24px,4vw,36px)}header p{line-height:1.8;color:#e3e6ec}.lab-wrap{max-width:1250px;margin:auto;padding:20px}.workspace{display:grid;grid-template-columns:290px 1fr;gap:20px}.controls,.surface,.challenge{background:#fff;border:1px solid #d7dbe2;border-radius:20px;padding:20px;box-shadow:0 10px 26px #132c4610}label{display:block;margin:13px 0 7px;line-height:1.7}input,select,button{font:inherit}input[type=number],select{width:100%;padding:10px;border:1px solid #bac3cf;border-radius:9px}input[type=range]{width:100%;accent-color:#173856}button,.button{padding:10px 15px;border-radius:10px;border:1px solid #bca36c;background:#f9f6ef;color:#11294a;cursor:pointer;margin:4px}button:hover{background:#ede6d6}canvas{display:block;width:100%;height:480px;touch-action:none;border-radius:12px;background:#fbfcfe}.metrics{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.metric{flex:1;padding:15px;background:#f1f4f8;border-radius:12px;min-width:150px;line-height:1.9}.metric strong{font-size:23px;display:block;color:#91702e}.challenge{margin-top:20px}#feedback{min-height:30px;line-height:1.8}footer{text-align:center;padding:25px;color:#5c6574}.hint{font-size:14px;line-height:1.9;color:#58677b}.row{display:flex;gap:5px;align-items:center}.row input{min-width:0}.object-list{max-height:160px;overflow:auto}.object-list button{font-size:13px}.success{color:#127143}.error{color:#b02d32}@media(max-width:800px){.workspace{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.controls h2,.controls p,.controls .full{grid-column:1/-1}canvas{height:380px}}@media(min-width:801px){.controls{max-height:82vh;overflow:auto;overscroll-behavior:contain}.surface{position:sticky;top:12px;align-self:start}}@media(max-width:800px){.controls{max-height:430px;overflow:auto;overscroll-behavior:contain}.surface{min-width:0;padding:12px}canvas{height:340px}.workspace{gap:12px}.lab-wrap{padding:12px}}[hidden]{display:none!important}
body{background:radial-gradient(ellipse at 80% 10%,#c7cbd51c,transparent 55%),repeating-linear-gradient(125deg,#fff 0,#fff 135px,#eff1f4 137px,#fff 140px,#fff 340px)}
