.visual-guide{margin:28px 0;background:linear-gradient(125deg,#27212e,#191f26);border:1px solid #4d4257;border-radius:20px;padding:25px;overflow:hidden;line-height:1.5}.guide-heading{margin-bottom:22px}.guide-heading>span{display:block;font-size:9px;letter-spacing:.14em;color:#d5b3e2;font-weight:600}.article-copy .guide-heading h3{font-size:23px;font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:10px 0 0}.visual-guide figcaption{border-top:1px solid #5f526740;margin-top:22px;padding-top:15px;font-size:11px;line-height:1.7;color:#b3bbc5}.guide-video{position:relative;aspect-ratio:9/16;width:100%;background:#111;border:1px solid #686071;border-radius:12px;overflow:hidden}.guide-video>img{width:100%;height:100%;object-fit:cover}.guide-video>img.guide-overlay{position:absolute;inset:0;object-fit:contain}.reference-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:25px;align-items:center}.reference-player{aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#111;border:1px solid #686071}.reference-poster{height:100%;position:relative}.reference-poster>img{width:100%;height:100%;object-fit:cover}.reference-player iframe{display:block;width:100%;height:100%;border:0}.reference-poster button{position:absolute;bottom:10px;left:10px;right:10px;padding:10px 8px;font:600 11px/1.4 'Work Sans',sans-serif;color:#211329;background:#e1b9ee;border:1px solid #f0d7fa;border-radius:8px;cursor:pointer;box-shadow:0 4px 20px #0009}.reference-poster button:hover{background:#f1d9fa}.reference-poster button:focus-visible{outline:3px solid white;outline-offset:-5px}.reference-poster button span{margin-right:5px}.reference-copy{font-size:14px;line-height:1.7;min-width:0}.reference-copy>p:first-child{font-family:Raleway,sans-serif;font-size:23px;line-height:1.2;color:#f3edf5;letter-spacing:-.02em}.article-copy .reference-copy p+p{margin-top:16px}.reference-copy>a{display:block;font-size:12px;margin-top:18px}.reference-copy small{display:block;font-size:10px;line-height:1.6;color:#aeb7c2;margin-top:12px}
.anatomy-layout{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:24px;align-items:center}.anatomy-pin{position:absolute;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#e6bdef;color:#22152d;box-shadow:0 0 0 3px #191522;font:700 11px/1 'Work Sans',sans-serif}.pin-1{top:3%;left:4%}.pin-2{top:50%;right:3%}.pin-3{top:76%;left:5%}.pin-4{top:88%;left:5%}.pin-5{top:62%;left:43%;background:#d1edc6}.article-copy .callout-key{margin:0;padding:0;list-style:none;display:grid;gap:14px}.article-copy .callout-key li{padding:0;margin:0;display:flex;align-items:flex-start;gap:11px}.callout-key li>span{background:#e6bdef;color:#22152d;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;flex-shrink:0;font-size:10px;font-weight:700}.callout-key li:last-child>span{background:#d1edc6}.callout-key strong{display:block;font-size:13px;line-height:1.35}.callout-key p{font-size:11px;line-height:1.65;margin-top:4px;color:#b3bdc7}
.platform-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.platform-example{min-width:0}.platform-example .guide-video{max-width:170px;margin:auto}.platform-note{margin-top:13px}.platform-note strong{font-size:12px;display:block;line-height:1.4}.platform-note p{font-size:11px;line-height:1.6;margin-top:6px;color:#b3bdc7}.crop-comparison{display:grid;grid-template-columns:minmax(0,180px) 30px minmax(0,180px);gap:18px;align-items:center;justify-content:center}.crop-example{min-width:0}.crop-example>strong{font-size:12px;display:block;margin-top:13px}.crop-example>small{display:block;font-size:10px;line-height:1.6;color:#b3bdc7;margin-top:5px}.crop-arrow{font-size:26px;color:#d5b3e2;text-align:center}.crop-band{position:absolute;left:0;right:0;height:12.5%;display:grid;place-items:center;background:#4f232fbd;color:#ffd2c6;font-size:10px;letter-spacing:.03em}.crop-band-top{top:0;border-bottom:1px dashed #f5b2a3}.crop-band-bottom{bottom:0;border-top:1px dashed #f5b2a3}.crop-visible{position:absolute;inset:12.5% 0;border:1px solid #c8edc8}.profile-crop-view{aspect-ratio:3/4;border:1px solid #c8edc8;border-radius:12px;overflow:hidden;background:#111}.profile-crop-view>img{height:100%;width:100%;object-fit:cover;object-position:center}
.qc-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:25px;align-items:center}.qc-highlight{position:absolute;top:69%;left:5%;right:4%;height:15%;border:2px solid #ffbe9e;border-radius:5px;box-shadow:0 0 0 3px #ffbe9e33}.qc-time{position:absolute;top:10px;left:10px;border-radius:5px;padding:5px 8px;background:#15151cdd;color:#fff;font-size:10px;line-height:1.3}.qc-note{background:#f1e8f5;color:#2d2333;border-radius:14px;padding:22px;box-shadow:0 12px 25px #0003;min-width:0}.qc-note-label{font-size:8px;letter-spacing:.12em;color:#75647d;display:block;margin-bottom:13px}.article-copy .qc-note>strong{display:block;color:#33223f;font-size:14px;line-height:1.5}.qc-note>p{font-size:12px;line-height:1.7;margin-top:12px}.article-copy .qc-note p+p{margin-top:10px}.qc-note-footer{display:block;font-size:10px;border-top:1px solid #b7a2c1;padding-top:12px;margin-top:16px;color:#765982}.guide-flow{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.guide-flow>span{display:flex;align-items:center;gap:6px;font-size:10px;padding:6px 9px;background:#ffffff06;border:1px solid #665374;border-radius:20px;color:#d4c1df}.guide-flow b{font-size:9px;color:#e7c9ee}
@media(max-width:1000px) and (min-width:681px){.anatomy-layout{grid-template-columns:145px minmax(0,1fr);gap:18px}.reference-layout{grid-template-columns:145px minmax(0,1fr);gap:18px}.qc-layout{grid-template-columns:125px minmax(0,1fr);gap:18px}.qc-note{padding:17px}}
@media(max-width:580px){.visual-guide{padding:19px;border-radius:16px;margin-block:24px}.article-copy .guide-heading h3{font-size:22px}.reference-layout{grid-template-columns:1fr;gap:22px}.reference-player{width:185px;margin:auto}.reference-copy>p:first-child{font-size:22px}.anatomy-layout{grid-template-columns:1fr;gap:22px}.anatomy-screen{width:180px;margin:auto}.article-copy .callout-key{grid-template-columns:1fr;gap:13px}.callout-key strong{font-size:13px}.callout-key p{font-size:12px}.platform-panels{grid-template-columns:1fr;gap:22px}.platform-example{display:grid;grid-template-columns:125px minmax(0,1fr);gap:16px;align-items:center}.platform-note{margin-top:0}.platform-note strong{font-size:14px}.platform-note p{font-size:12px}.crop-comparison{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:10px}.crop-example>strong{font-size:11px}.crop-example>small{font-size:9px}.crop-arrow{font-size:21px}.crop-band{font-size:9px}.qc-layout{grid-template-columns:1fr;gap:21px}.qc-screen{width:170px;margin:auto}.qc-note{padding:22px}.qc-note>p{font-size:13px}.visual-guide figcaption{font-size:11px}.guide-flow{gap:6px}}
.brand-reference .grid-source-image{display:block;border:1px solid #686071;border-radius:12px;overflow:hidden;background:#111}.grid-source-image>img{width:100%;height:auto}.brand-reference .greatness-grid{max-width:480px;margin-inline:auto}.article-copy .brand-lesson{font-size:14px;line-height:1.8;margin-top:20px}.article-copy .reference-scope{font-size:12px;line-height:1.7;color:#aeb7c2}.brand-reference figcaption a{white-space:normal}@media(max-width:580px){.article-copy .brand-lesson{font-size:14px;line-height:1.75}.brand-reference .guide-heading h3{font-size:22px}}
.comparison-clear{border-color:#42645b;background:linear-gradient(130deg,#21322f,#191f26)}.comparison-overlap{border-color:#67484e}.comparison-lead{font-size:13px;line-height:1.8;color:#c2cbd3;margin-bottom:24px}.layout-mark{position:absolute;pointer-events:none;border:2px solid;border-radius:5px}.clear-mark{left:23.5%;top:43.5%;width:53%;height:13.2%;border-color:#99e9bf;box-shadow:0 0 0 2px #0f2a2266}.overlap-mark{left:5%;right:4%;top:69%;height:15%;border-color:#ff898d;box-shadow:0 0 0 2px #501c2855}.layout-result{display:flex;gap:5px;align-items:center;font-size:10px;font-weight:600;line-height:1.4;margin-bottom:8px}.layout-result>span{font-size:16px}.layout-result.clear{color:#a4e5c4}.layout-result.overlap{color:#ff9a9f}.comparison-overlap .guide-video{max-width:140px}@media(max-width:580px){.comparison-lead{font-size:13px}.layout-result{font-size:11px}}
