.grading-lab{color:var(--fg);background:var(--panel);min-width:0}
.grading-intro{padding:24px 25px 18px;display:flex;align-items:start;justify-content:space-between;gap:25px}
.grading-intro h3{font-size:25px;letter-spacing:-.035em;margin:5px 0 8px;font-weight:600}
.grading-intro p{font-size:13px;line-height:1.65;color:var(--muted);max-width:680px;margin:0}
.grading-kicker{font:10px var(--mono);color:var(--accent-text);letter-spacing:.1em;text-transform:uppercase}
.grading-presets{display:flex;flex-wrap:wrap;gap:7px;padding:0 25px 20px}
.grading-lab button,.grading-upload{min-height:44px;font:inherit;font-size:12px;padding:10px 13px;border:1px solid var(--line);background:var(--raised);color:var(--fg);border-radius:7px;cursor:pointer}
.grading-lab button[aria-pressed=true]{background:color-mix(in srgb,#ff8a1f 13%,var(--panel));border-color:#ff8a1f;color:var(--accent-text);box-shadow:inset 0 -2px #ff8a1f}
.grading-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;border-block:1px solid var(--line)}
.grading-stage{min-width:0;background:var(--bg)}
.grading-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.grading-toolbar>span{font:10px var(--mono);color:var(--muted)}
.grading-toolbar>div{display:flex;gap:7px;flex-wrap:wrap}
.grading-upload{display:inline-flex;align-items:center;gap:7px;position:relative;overflow:hidden;color:var(--accent-text);border-color:color-mix(in srgb,#ff8a1f 55%,var(--line))}
.grading-upload:focus-within{outline:3px solid #ff8a1f;outline-offset:3px}
.grading-upload input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer}
.grading-frame{position:relative;padding:16px;background:repeating-conic-gradient(#202b32 0 25%,#1c252c 0 50%) 50%/16px 16px}
.grading-frame canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;background:transparent;cursor:crosshair}
.grading-image-labels{display:flex;justify-content:space-between;gap:10px;position:absolute;inset:27px 28px auto;pointer-events:none;font:10px var(--mono);text-transform:uppercase;letter-spacing:.09em}
.grading-image-labels span{background:#101c25dc;color:white;padding:7px 9px;border-radius:4px}
.grading-compare{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:16px;padding:12px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.grading-lab input[type=range]{min-width:0;width:100%;accent-color:#ff8a1f;min-height:44px;margin:0;cursor:pointer}
.grading-help{padding:0 18px 15px;color:var(--muted);font-size:11px;line-height:1.6}
.grading-controls{padding:22px;border-left:1px solid var(--line);min-width:0}
.grading-control{margin-bottom:17px}
.grading-control>div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grading-control label{font-size:13px;font-weight:600}
.grading-control output{font:12px var(--mono);color:var(--accent-text)}
.grading-control p{font-size:11px;line-height:1.5;margin:0;color:var(--muted)}
.grading-control input:focus-visible{outline:3px solid #ff8a1f;outline-offset:2px}
.grading-control-reset{width:100%;margin-top:1px}
.grading-measurements{padding:22px 25px;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.8fr);gap:30px;border-bottom:1px solid var(--line)}
.grading-histogram-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:12px}
.grading-histogram-head strong{font-weight:600}
.grading-histogram-head small{color:var(--muted);font-size:10px}
.grading-histogram{display:block;width:100%;height:124px}
.grading-scale{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted);margin-top:6px}
.grading-readings{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px;align-content:center}
.grading-reading small{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.grading-reading strong{font:22px var(--mono);color:var(--fg)}
.grading-reading[data-warning=true] strong{color:var(--accent-text)}
.grading-pixel{display:flex;align-items:center;gap:10px;grid-column:1/-1;font-size:11px;color:var(--muted)}
.grading-pixel i{width:35px;height:35px;border-radius:6px;display:block;border:1px solid #88969f}
.grading-pixel code{font:13px var(--mono);color:var(--fg)}
.grading-measure-note{grid-column:1/-1;font-size:11px;color:var(--muted);line-height:1.6;margin-top:-8px}
.grading-note{font-size:12px;color:var(--muted);line-height:1.65;padding:18px 25px}
.grading-note strong{color:var(--fg);font-weight:500}
.grading-status{font-size:12px;line-height:1.5;color:var(--accent-text);padding:0 25px}
.grading-status:not(:empty){padding-block:14px;border-bottom:1px solid var(--line)}
.grading-lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.grading-lessons article{padding:23px 25px;background:var(--panel)}
.grading-lessons h4{font-size:15px;margin:8px 0 10px}
.grading-lessons p{font-size:12px;line-height:1.75;color:var(--muted);margin:0}
.grading-lessons .grading-kicker{font-size:9px}
@media(max-width:1100px){.grading-layout{grid-template-columns:minmax(0,1fr) 255px}.grading-controls{padding:20px 16px}.grading-control{margin-bottom:12px}.grading-control p{font-size:10px}.grading-intro h3{font-size:22px}}
@media(max-width:760px){.grading-layout{grid-template-columns:1fr}.grading-controls{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px}.grading-control{margin:0}.grading-control p{font-size:11px}.grading-control-reset{align-self:center}.grading-measurements{grid-template-columns:1fr;gap:22px;padding:20px}.grading-readings{grid-template-columns:1fr 1fr 1fr}.grading-pixel{grid-column:auto}.grading-measure-note{margin-top:0}.grading-lessons{grid-template-columns:1fr}.grading-lessons article{padding:20px}.grading-intro,.grading-presets,.grading-note{padding-inline:20px}.grading-intro{padding-top:20px}.grading-intro h3{font-size:22px}.grading-status{padding-inline:20px}}
@media(max-width:440px){.grading-toolbar{padding:12px}.grading-toolbar>div{width:100%}.grading-toolbar button,.grading-upload{flex:1;justify-content:center;font-size:11px;padding-inline:8px}.grading-frame{padding:9px}.grading-image-labels{inset:17px 17px auto;font-size:8px}.grading-image-labels span{padding:5px}.grading-compare{padding:8px 12px;gap:8px;font-size:10px}.grading-help{padding-inline:12px;font-size:10px}.grading-controls{padding:16px;gap:19px 14px}.grading-control label{font-size:12px}.grading-control output{font-size:10px}.grading-control p{font-size:10px}.grading-readings{grid-template-columns:1fr 1fr;gap:18px}.grading-pixel{grid-column:1/-1}.grading-intro,.grading-presets,.grading-note{padding-inline:16px}.grading-measurements{padding:18px 16px}.grading-intro p{font-size:12px}}