/* Teaching gallery: native editable type above a single consistent raster product. */
.visual-lab{margin:32px 0;padding:clamp(16px,3vw,28px);border:1px solid #e4d8ee;border-radius:24px;background:#faf8fc}
.visual-lab-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.visual-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.visual-controls .btn{min-height:44px}
.visual-controls [aria-pressed=true]{box-shadow:0 0 0 2px #7945a5}
.visual-preview{max-width:100%;width:100%;margin:0 auto;transition:width .2s ease}
.visual-preview.is-mini{width:160px}
.visual-canvas{container-type:inline-size;aspect-ratio:3/4;position:relative;overflow:hidden;color:#fff;isolation:isolate;border-radius:14px;box-shadow:0 12px 25px #38244915;background:#e4d7f1}
.visual-canvas>img{position:absolute;inset:auto 4% 8%;width:92%;height:70%;object-fit:contain;z-index:2;filter:drop-shadow(0 10px 7px #3c175b22)}
.vc-kicker{position:absolute;top:5.5%;left:7%;right:5%;font-size:3cqw;line-height:1.2;letter-spacing:.12em;font-weight:800;z-index:3}
.vc-title{position:absolute;top:10%;left:6%;right:4%;font-size:12cqw;line-height:.95;letter-spacing:-.04em;font-weight:900;z-index:3}
.vc-bottom{position:absolute;bottom:3%;left:6%;right:6%;font-size:3.1cqw;font-weight:700;line-height:1.35;text-align:center;z-index:4}
.vc-berry{background:radial-gradient(ellipse at 80% 25%,#f15ac0,transparent 50%),linear-gradient(145deg,#731ad7,#b43af5 65%,#ec8cc7)}
.vc-sky{background:radial-gradient(ellipse at 80% 25%,#6ae8e4,transparent 60%),linear-gradient(145deg,#214acb,#1fa4d7 70%,#80eddb)}
.vc-sun{background:linear-gradient(135deg,#fff575,#ffc748);color:#4c206f}
.vc-orbit{position:absolute;left:-20%;top:35%;width:140%;height:60%;border:1px solid #ffffff55;border-radius:50%;transform:rotate(-25deg);z-index:0}
.vc-size-badge{position:absolute;right:5%;top:28%;z-index:4;background:#fff15e;color:#4a1a73;width:23%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:11cqw;line-height:.9;box-shadow:0 8px 20px #53216b22}
.vc-size-badge small{font-size:4cqw;margin-top:5%}
.vc-set-badge{position:absolute;left:5%;bottom:12%;z-index:4;border-radius:50px;background:#fff;color:#572775;padding:3% 5%;font-weight:800;font-size:4.8cqw}
.vc-source{background:linear-gradient(135deg,#eee,#d6d5d9);color:#4e4956}
.vc-source>img{height:84%;bottom:6%}
.vc-source-label{position:absolute;left:5%;right:5%;top:4%;font-size:3cqw;text-align:center;letter-spacing:.13em}
.vc-source.vc-dark{background:#24212a;color:#eee}
.vc-size{background:radial-gradient(circle at 90% 70%,#ffb6a0,transparent 50%),#fff579;color:#502575}
.vc-size>img{height:57%;bottom:8%;inset-inline:9%;width:82%}
.vc-big-number{position:absolute;top:10%;left:7%;font-size:29cqw;font-weight:900;line-height:1}
.vc-big-number span{font-size:11cqw;margin-left:2cqw}
.vc-detail{background:linear-gradient(145deg,#55228a,#b064d2);color:#fff}
.vc-detail .vc-title{font-size:11cqw}
.vc-detail-window{position:absolute;inset:31% 6% 10%;overflow:hidden;border-radius:40% 40% 15% 15%;background:#e6cae9}
.vc-detail-window img{position:absolute;width:175%;max-width:none;height:auto;left:-38%;top:-10%}
.vc-scene{background:linear-gradient(160deg,#ffe5c4,#f4bd91);color:#6e3924}
.vc-scene .vc-title{font-size:12cqw}
.vc-scene>img{height:65%;bottom:9%}
.vc-arch{position:absolute;left:12%;right:12%;top:28%;bottom:9%;background:linear-gradient(120deg,#e68f64,#ffd9b0);border-radius:50% 50% 5% 5%;box-shadow:inset 10px 8px 35px #8c462922}
.vc-bad{background:repeating-linear-gradient(45deg,#e7b5ff 0,#e7b5ff 10px,#ffdcf7 10px,#ffdcf7 20px);color:#7b2783}
.vc-bad>img{width:40%;height:33%;left:30%;bottom:28%}
.vc-bad .vc-title{top:15%;font-size:9cqw;text-align:center;color:#9c58a9}
.vc-bad-claim{position:absolute;left:4%;right:4%;bottom:17%;font-size:6cqw;background:#f32e6a;color:white;text-align:center;padding:3%}
.visual-breakdown h3{font-size:24px;line-height:1.2;margin:8px 0 16px}
.visual-breakdown p,.visual-breakdown li{font-size:14px;line-height:1.7}
.visual-breakdown ul,.visual-breakdown ol{padding-left:20px}
.visual-prompt{margin:18px 0;border-block:1px solid #e5d9ed;padding:16px 0}
.visual-prompt summary{font-weight:700;cursor:pointer}
.visual-prompt p{white-space:pre-line}
.visual-copy{width:100%;min-height:220px;padding:15px}
.visual-directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.visual-direction{min-width:0;margin:0}
.visual-direction figcaption{padding:14px 4px}
.visual-direction figcaption p{font-size:14px;margin:6px 0}
.direction-shot{container-type:inline-size;aspect-ratio:3/4;position:relative;border-radius:14px;overflow:hidden;background-image:url('/assets/training-directions-v1.png');background-size:200% 200%}
.direction-beauty{background-position:0 0;color:#543b1d}
.direction-home{background-position:100% 0;color:#fff4e6}
.direction-tech{background-position:0 100%;color:#fff}
.direction-fashion{background-position:100% 100%;color:#3c1c65}
.direction-heading{position:absolute;inset:0 0 auto;padding:6%;background:linear-gradient(#ffffffd9,transparent)}
.direction-home .direction-heading{background:linear-gradient(#803917c9,transparent)}
.direction-tech .direction-heading{background:linear-gradient(#06132cdd,transparent)}
.direction-fashion .direction-heading{background:linear-gradient(#d5f753df,transparent)}
.direction-heading small{display:block;text-transform:uppercase;font-weight:800;font-size:3.5cqw;letter-spacing:.12em;margin-bottom:3%}
.direction-heading b{display:block;font-size:6.2cqw;line-height:1.1;max-width:90%}
.visual-lab button:focus-visible,.visual-lab a:focus-visible{outline:3px solid #623a96;outline-offset:3px}
@media(max-width:950px){.visual-lab-layout{grid-template-columns:1fr}.visual-preview{max-width:380px}.visual-preview.is-mini{max-width:160px}.visual-breakdown h3{font-size:22px}}
@media(max-width:550px){.visual-directions{grid-template-columns:1fr}.visual-lab{padding:14px;border-radius:18px}.visual-controls .btn{flex:1 1 auto}.visual-lab h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.visual-preview{transition:none}}


.visual-reference{padding:16px 0;margin:18px 0;border-top:1px solid #e5d9ed}.visual-reference summary{font-weight:700;cursor:pointer}.visual-reference img{display:block;width:100%;height:auto;margin-top:16px;border-radius:12px}