.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 #8d693b;color:#edbe79;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 #6d5431;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 #ffc773;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 #be9456;color:#ffce8d;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:#f2dfbf}.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 #36332e;padding-top:10px;margin-top:15px}.demo-preview figcaption{padding:12px 15px}.demo-preview figcaption>b{font-size:13px;color:#edd6b0}.demo-metric{display:block;padding:9px 13px;margin:11px 0;border-left:3px solid #f69a43;background:#e9b56b11;color:#ffcb83;font-size:19px}.visual-lesson p.demo-avoid,.demo-avoid{color:#ffc0a8!important;font-size:12px!important;border-left:2px solid #d38660;padding-left:10px;line-height:1.65}.visual-module-nav{font-size:12px;color:#bcb4a5;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:#b0a99b!important;border-left:2px solid #795d33;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:#dca660;padding:10px;border:1px solid #785d34}.visual-section h2{font-size:23px;line-height:1.4;color:#f1e1c6;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 #a87b3c;background:#74512122;margin:0 0 21px;border-radius:7px;font-size:13px;line-height:1.7;color:#edcf9e}.visual-explanation{margin:30px 0;background:#111720;border:1px solid #4c4436;padding:20px;border-radius:8px}.visual-explanation p{font-size:14px;line-height:1.8}.visual-explanation a{color:#d6b782}.visual-animation{margin:35px 0;border:1px solid #8a6538;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:#f1d6ac}.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:#ffcb8b;background:#0b1119de;border:1px solid #bc8e4b;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:#ebc17b}.cpr-meter>span:last-child{grid-column:2;font-size:12px;color:#c3bbac}.beat-light{width:17px;height:17px;background:#f4ad5d;border-radius:50%;align-self:center;box-shadow:0 0 15px #dd8e4455}.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 #f9a844;background:#f4b35720;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:#edc98e;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,#e9ae4533,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 #bd8b48;border-radius:12px;background:#0c121b;color:#eee3cf;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:#bda77e;font-size:12px}.viewer-toolbar button{font-size:12px}.viewer-image{height:58vh;display:grid;place-items:center;border:1px solid #55442c;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:#aaa496}#visual-viewer a{color:#e7bb7d}.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)}}