.u8-paper>.reader-playback,.u8-paper>.playback-sentinel,.u8-paper>.drawing-viewport,body:has(.u8-paper) .legend{display:none!important}.u8-paper{background:#fff!important;color:#193653!important}.u8-paper [hidden]{display:none!important}
.u8-lesson{color:#193653;font-family:system-ui,sans-serif}.u8-stage{padding:22px 0}.u8-focus{min-width:0;animation:u8-appear .2s ease-out}.u8-paper [data-utf8=next]{background:#245bce;color:#fff;border-color:#245bce}
.u8-board,.u8-glyph,.u8-number{border:1px solid #aabed9;background:#f7faff;border-radius:4px;padding:18px;min-width:0;box-sizing:border-box}.u8-board h3{font:650 18px/1.4 system-ui;text-align:center;margin:0 0 16px;overflow-wrap:anywhere}.u8-card-list{display:grid;gap:9px}.u8-card{border:1px solid #a9bfdc;border-left:4px solid #3c70bf;padding:12px;background:white;font:600 16px/1.5 system-ui;overflow-wrap:anywhere}
.u8-glyph{text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px;min-height:180px}.u8-glyph>span,.u8-number>span{font:600 15px/1.45 system-ui}.u8-glyph>output{display:block;font:600 70px/1.4 system-ui,'Segoe UI Emoji';white-space:pre}.u8-number{text-align:center}.u8-number strong{display:block;font:700 36px/1.5 system-ui;margin:12px 0}.u8-number p{font:14px/1.5 system-ui;margin:0!important}.u8-row{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:14px}.u8-arrow{text-align:center;font:30px system-ui;color:#245bce}.u8-key{font:13px/1.45 system-ui;text-align:center;color:#526882;margin:14px 0 0!important}
.u8-pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.u8-piece{border:1px solid #88a8d2;background:white;padding:12px;min-width:0;flex:1 1 160px;max-width:260px;text-align:center}.u8-piece>span{font:600 14px system-ui;display:block;margin-bottom:12px}.u8-piece>b{display:block;font:600 15px system-ui;margin-top:12px}.u8-lights{display:flex;gap:3px}.u8-lights i{flex:1;min-width:0;background:white;border:1px solid #9aabc5;color:#526882;font:600 13px/1.8 monospace;font-style:normal}.u8-lights .on{background:#2c60b2;color:white;border-color:#2c60b2}.u8-check-here{outline:3px solid #a24f2c;outline-offset:2px}.u8-missing{border:2px dashed #947052;padding:12px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1 1 130px;max-width:260px;background:#fff8ef}.u8-missing>b{font:700 30px system-ui}.u8-missing>span{font:14px system-ui}
.u8-values{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.u8-values b{border:1px solid #8aa8d2;padding:12px;background:white;font:700 22px/1.4 monospace;min-width:35px;text-align:center}.u8-values small{display:block;font:12px system-ui;color:#526882;margin-bottom:7px}
.u8-payload{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.u8-payload>div{border:1px dashed #7596c2;background:white;padding:12px;text-align:center;min-width:0}.u8-payload small{font:13px/1.4 system-ui;display:block;margin-bottom:10px}.u8-payload b{font:700 23px/1.4 monospace;letter-spacing:3px}
.u8-bit-rows{display:grid;gap:14px;max-width:600px;margin:auto}.u8-bit-rows>div{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:7px 14px}.u8-bit-rows>div>b{font:600 15px system-ui}.u8-bit-rows small{grid-column:2;font:13px/1.4 system-ui}.u8-labeled-bits{display:flex;gap:6px}.u8-labeled-bits i{padding:7px 12px;font:700 22px/1.2 monospace;font-style:normal;letter-spacing:2px;background:white;border:1px solid #9aafcd}.u8-labeled-bits .label-bits{border:2px solid #245bce;background:#e9f1ff;color:#194a9b}
.u8-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.u8-tiles>div{padding:12px;border:1px solid #92abd0;background:white;min-width:0;text-align:center;flex:1 1 90px}.u8-tiles small{display:block;font:12px system-ui;color:#526882;margin-bottom:7px}.u8-tiles b{font:600 16px/1.5 system-ui;overflow-wrap:anywhere}.u8-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.u8-compare .u8-glyph{min-height:180px}.u8-verdict{border-left:4px solid #4779bf;background:#edf4ff;padding:12px;text-align:center;font:650 17px/1.5 system-ui;margin:12px 0 0!important}.u8-lesson .ts-detail p,.u8-lesson .ts-detail dd{overflow-wrap:anywhere}
@keyframes u8-appear{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.u8-bit-rows>div{grid-template-columns:100px minmax(0,1fr)}.u8-pieces{gap:8px}.u8-piece{flex-basis:140px;padding:10px}.u8-labeled-bits i{padding:7px 8px;font-size:19px;letter-spacing:1px}}
@media(max-width:600px){.u8-stage{padding:16px 0}.u8-board,.u8-glyph,.u8-number{padding:12px}.u8-board h3{font-size:16px;margin-bottom:12px}.u8-card{padding:9px;font-size:14px}.u8-glyph{min-height:130px}.u8-glyph>output{font-size:54px}.u8-glyph>span,.u8-number>span{font-size:13px}.u8-number strong{font-size:25px}.u8-row{grid-template-columns:1fr;gap:8px}.u8-row .u8-arrow{font-size:0;line-height:1}.u8-row .u8-arrow:before{content:'↓';font-size:23px}.u8-row .u8-glyph{min-height:100px}.u8-row .u8-glyph>output{font-size:46px}.u8-row .u8-number strong{margin:4px 0}.u8-row .u8-number p{font-size:12px}.u8-piece{flex-basis:100px;max-width:none;padding:8px}.u8-piece>span,.u8-piece>b{font-size:12px;margin:5px 0}.u8-lights{gap:2px}.u8-lights i{font-size:10px}.u8-payload{gap:7px}.u8-payload>div{padding:9px}.u8-payload b{font-size:18px;letter-spacing:1px}.u8-bit-rows>div{grid-template-columns:1fr;gap:5px}.u8-bit-rows small{grid-column:1;font-size:12px}.u8-bit-rows>div>b{font-size:13px}.u8-bit-rows{gap:12px}.u8-labeled-bits{justify-content:center}.u8-labeled-bits i{font-size:20px;padding:5px 10px;letter-spacing:2px}.u8-compare{gap:9px}.u8-compare .u8-board{padding:9px}.u8-compare .u8-glyph{min-height:145px}.u8-compare .u8-glyph>output{font-size:45px}.u8-tiles>div{padding:8px;flex-basis:60px}.u8-tiles b{font-size:13px}.u8-tiles small{font-size:11px}.u8-key{font-size:12px}.u8-values b{font-size:18px;padding:8px;min-width:29px}.u8-verdict{font-size:15px}.u8-missing>span{font-size:12px}.u8-missing{flex-basis:100px;padding:8px}}
@media(prefers-reduced-motion:reduce){.u8-focus{animation:none}}

.u8-bad-label .label-bits{border-color:#a24f2c;background:#fff1e9;color:#8b3c22}.u8-bad-label small{font-weight:650;color:#8b3c22}

/* Equal-width byte tiles keep wrapping from suggesting different byte sizes. */
.u8-pieces{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));justify-items:center}.u8-piece,.u8-missing{width:100%;box-sizing:border-box}
@media(max-width:600px){.u8-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}.u8-missing{max-width:none}}

.u8-simple-lights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:115px;margin:10px auto}.u8-simple-lights i{height:17px;border:1px solid #6e89ad;border-radius:3px;background:white;box-sizing:border-box}.u8-simple-lights .on{background:#285ba9;border-color:#285ba9}.u8-values .u8-piece-name{font:600 15px/1.5 system-ui;padding:10px}.u8-simple-piece>b{font-size:13px}