.visual-lesson.rich-lesson{padding:0;overflow:visible;border:0;background:transparent}.visual-lesson-head{display:flex;align-items:start;gap:24px;justify-content:space-between;margin:0 0 23px}.visual-lesson-head h1{font-size:clamp(25px,2.8vw,38px);line-height:1.25;margin:9px 0 10px;max-width:28ch}.visual-lesson-head p{font-size:13px;margin:0;color:#bfb9ad;line-height:1.6}.visual-edition{font-size:10px;letter-spacing:1px;border:1px solid #0baef4;color:#8acefe;padding:9px 12px;white-space:nowrap;flex-shrink:0;margin-top:6px}.demo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 0 19px}.demo-card{margin:0;border:1px solid #397bb7;border-radius:11px;overflow:hidden;background:linear-gradient(145deg,#171c24,#0f141b);min-width:0;box-shadow:0 10px 35px #0003}.demo-open{display:block;width:100%;border:0;padding:0;position:relative;overflow:hidden;background:#090e14;cursor:zoom-in;aspect-ratio:4/3;border-radius:0;color:inherit}.demo-open img,.demo-open svg{width:100%;height:100%;display:block;object-fit:contain;transition:transform .35s}.demo-open:hover img,.demo-open:hover svg{transform:scale(1.025)}.demo-open:focus-visible{outline:3px solid #8acefe;outline-offset:-4px}.source-official .demo-open,.source-official.viewer-image{background:white}.zoom-mark{position:absolute;right:10px;top:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:5px;background:#111920dd;border:1px solid #0baef4;color:#8acefe;font-size:18px;opacity:.8}.demo-card figcaption{padding:18px 20px 16px}.demo-card figcaption>b{font-size:18px;line-height:1.4;display:block;color:#d8f3ff}.demo-card figcaption>p{font-size:14px;line-height:1.7;margin:10px 0;color:#d4d5d5}.demo-card figcaption>small{font-size:10px;line-height:1.5;display:block;color:#9e9c96;border-top:1px solid #193759;padding-top:10px;margin-top:15px}.demo-preview figcaption{padding:12px 15px}.demo-preview figcaption>b{font-size:13px;color:#d8f3ff}.demo-metric{display:block;padding:9px 13px;margin:11px 0;border-left:3px solid #27b9f5;background:#8acefe11;color:#8acefe;font-size:19px}.visual-lesson p.demo-avoid,.demo-avoid{color:#d8f3ff!important;font-size:12px!important;border-left:2px solid #8acefe;padding-left:10px;line-height:1.65}.visual-module-nav{font-size:12px;color:#0baef4;margin:20px 0}.visual-module-nav summary,.visual-explanation summary{cursor:pointer}.visual-module-nav>div{display:grid;gap:7px;margin:15px 0}.visual-module-nav button{text-align:left;white-space:normal}.visual-draft{font-size:11px!important;line-height:1.7!important;color:#0baef4!important;border-left:2px solid #397bb7;padding-left:12px;margin:20px 0 30px}.visual-section{margin:38px 0}.visual-section-heading{display:flex;align-items:center;gap:14px;margin:0 0 18px}.visual-section-heading>span{font:500 13px ui-monospace,monospace;color:#8acefe;padding:10px;border:1px solid #397bb7}.visual-section h2{font-size:23px;line-height:1.4;color:#d8f3ff;margin:0;max-width:50ch}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}.condition-rule{padding:14px 18px;border:1px solid #0baef4;background:#397bb722;margin:0 0 21px;border-radius:7px;font-size:13px;line-height:1.7;color:#d8f3ff}.visual-explanation{margin:30px 0;background:#111720;border:1px solid #193759;padding:20px;border-radius:8px}.visual-explanation p{font-size:14px;line-height:1.8}.visual-explanation a{color:#8acefe}.visual-animation{margin:35px 0;border:1px solid #397bb7;border-radius:12px;overflow:hidden;background:#101720;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.visual-animation>div:first-child{padding:24px}.visual-animation h2{font-size:22px;line-height:1.4;color:#d8f3ff}.visual-animation p{font-size:13px;line-height:1.7}.cpr-stage{position:relative;background:#070b10}.cpr-stage img{width:100%;height:100%;object-fit:contain}.cpr-depth{position:absolute;right:14px;bottom:14px;padding:11px 14px;color:#8acefe;background:#0b1119de;border:1px solid #0baef4;font-size:19px}.cpr-meter{display:grid;grid-template-columns:25px 1fr;gap:7px 12px;margin:22px 0}.cpr-meter b{font-size:30px;color:#8acefe}.cpr-meter>span:last-child{grid-column:2;font-size:12px;color:#0baef4}.beat-light{width:17px;height:17px;background:#27b9f5;border-radius:50%;align-self:center;box-shadow:0 0 15px #27b9f555}.running .beat-light{animation:aid-beat .545454s infinite}@keyframes aid-beat{0%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.15);opacity:1}}.animation-stage{position:relative;min-width:0;background:#fff;min-height:300px;overflow:hidden;align-self:stretch;display:grid;align-items:center}.animation-original{height:100%;width:100%;display:grid;align-items:center}.animation-original img,.animation-original svg{width:100%;height:100%;max-height:480px;object-fit:contain}.drawing-focus{position:absolute;border:3px solid #27b9f5;background:#27b9f520;border-radius:6px;box-shadow:0 0 0 1000px #07101b11;transition:all .7s ease;pointer-events:none}.drawing-focus[hidden]{display:none}.animation-step-title{display:block;color:#8acefe;font-size:16px;margin:22px 0 7px}.animation-step-text{font-size:13px}.animation-buttons{display:flex;flex-wrap:wrap;gap:8px}.animation-buttons button{font-size:12px}.animation-scan{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(120deg,transparent,#27b9f533,transparent)}.playing .animation-scan{opacity:1;animation:focus-scan 2.4s infinite}@keyframes focus-scan{from{transform:translateX(-110%)}to{transform:translateX(110%)}}#visual-viewer{width:min(1180px,95vw);max-width:95vw;max-height:94vh;padding:20px;border:1px solid #0baef4;border-radius:12px;background:#0c121b;color:#d8f3ff;overflow:auto}#visual-viewer::backdrop{background:#02060de8;backdrop-filter:blur(6px)}.viewer-toolbar{display:flex;gap:10px;align-items:center;position:sticky;top:-20px;background:#0c121bf5;padding:10px 0;z-index:4}.viewer-toolbar>span{margin-left:auto;color:#0baef4;font-size:12px}.viewer-toolbar button{font-size:12px}.viewer-image{height:58vh;display:grid;place-items:center;border:1px solid #397bb7;border-radius:8px;overflow:hidden;background:#050b12}.viewer-image img,.viewer-image svg{width:100%;height:100%;object-fit:contain}.viewer-image svg{max-height:58vh}#visual-viewer h2{font-size:22px;margin:20px 0 8px}#visual-viewer p{font-size:15px;line-height:1.75}#visual-viewer small{font-size:11px;color:#0baef4}#visual-viewer a{color:#8acefe}.motion-off .beat-light,.motion-off .animation-scan{animation:none}.motion-off .drawing-focus{transition:none}@media(prefers-reduced-motion:reduce){.beat-light,.animation-scan{animation:none!important}.drawing-focus,.demo-open img,.demo-open svg{transition:none}}@media(max-width:1050px){.visual-edition{display:none}.demo-strip{gap:10px}.demo-grid{gap:16px}.demo-card figcaption{padding:15px}.visual-animation{grid-template-columns:1fr}.animation-stage{min-height:280px}.cpr-stage{max-height:360px}.visual-lesson-head h1{max-width:none}}@media(max-width:650px){.demo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-strip .demo-card:last-child{display:none}.demo-grid{grid-template-columns:1fr}.visual-section h2{font-size:21px}.viewer-toolbar button{padding:9px}.viewer-image{height:48vh}}
.viewer-image{display:flex;align-items:center;justify-content:center}.viewer-image img,.viewer-image svg{display:block;min-width:0;min-height:0;max-width:100%;height:calc(58vh - 2px);max-height:100%;object-fit:contain}.animation-original img,.animation-original svg,.cpr-stage img{min-height:0;min-width:0}@media(max-width:650px){.viewer-image img,.viewer-image svg{height:calc(48vh - 2px)}}