@import url('/part-4/style.css');
main{max-width:1400px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#a6b8aa;letter-spacing:1.4px}h1{font-size:38px;margin:30px 0 22px}.steps,.views,.methods{display:flex;gap:8px;flex-wrap:wrap}.steps button{flex:1;padding:14px 12px}#caption{color:#bed1c4;margin:20px 0;min-height:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}#viewer{height:620px;position:relative;border:1px solid #304337;border-radius:18px;overflow:hidden}#viewer canvas{display:block}.view-label,.gesture{position:absolute;left:18px;font-size:12px;color:#c7d7cb;pointer-events:none}.view-label{top:18px;background:#102017bd;padding:8px 12px;border-radius:20px}.gesture{bottom:18px}#loading{position:absolute;top:45%;left:20px}aside{padding:22px;border:1px solid #304337;background:#101b14;border-radius:18px}aside h2{font-size:23px;line-height:1.25;margin:8px 0 18px}.landmark{display:block;width:100%;text-align:left;font-size:12px;border-radius:9px;margin:9px 0;padding:12px 8px}.landmark i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.medial{background:#ffbc75}.lateral{background:#9ec6ff}.relation{font-size:14px;color:#b4c9ba;line-height:1.6}.relation strong{display:block;font-size:32px;color:#9fe0c3}.note,details,#method-note{font-size:12px;line-height:1.6;color:#9cb5a5}details{border-top:1px solid #304337;padding-top:16px;margin-top:20px}summary{cursor:pointer;color:#deeadf}.views{margin-top:12px}.toggle{display:block;font-size:12px;margin-top:14px;color:#bed1c4}#slope-controls{border-top:1px solid #304337;margin-top:20px;padding-top:20px}#slope-controls label{display:flex;justify-content:space-between;font-size:13px;margin-top:18px}#slope{width:100%;accent-color:#ffbc75}.methods button{flex:1;font-size:12px;padding:10px}footer{font-size:11px;color:#8a9e90;margin-top:28px;line-height:1.6}@media(max-width:700px){.layout{grid-template-columns:1fr}#viewer{height:500px}h1{font-size:29px}.steps button{flex-basis:40%;font-size:12px}}[hidden]{display:none!important}

.native-slope-controls{border-top:1px solid #304337;padding-top:18px;margin-top:18px}.native-slope-controls label{display:flex;justify-content:space-between;font-size:13px}#native-slope{width:100%;accent-color:#74dcb4;margin:14px 0}

body[data-stage="slope"] aside>.eyebrow,body[data-stage="slope"] aside>h2,body[data-stage="slope"] aside>.landmark,body[data-stage="slope"] aside>.relation,body[data-stage="slope"] aside>.note{display:none}body[data-stage="slope"] .native-slope-controls{border-top:0;margin-top:0;padding-top:0}

.wear-side-controls{display:flex;align-items:center;gap:9px;margin:0 0 18px}.wear-side-controls span{font-size:13px;color:#bfd2c5;margin-right:8px}.wear-side-controls button{padding:9px 22px;font-size:13px}

.grade-controls{display:flex;align-items:center;gap:8px;margin:0 0 18px}.grade-controls span{font-size:13px;color:#bfd2c5;margin-right:12px}.grade-controls button{padding:8px 20px;font-size:14px}

.wear-controls-row{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}.wear-controls-row .grade-controls{margin:0}.bone-wear-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bone-wear-controls span{font-size:13px;color:#bfd2c5;margin-right:8px}.bone-wear-controls button{padding:8px 16px;font-size:14px}