/* Reading-first article layouts; scoped to How and Review. */
.editorial{--article-accent:#ef526b;--article-muted:#acacb7;--article-line:#2b2b32;--article-surface:#141418;overflow:clip}
body:has(.editorial) .site-header{background:#080809;border-bottom:1px solid #24242b}
.editorial .container{width:calc(100% - 80px);max-width:1360px}
.editorial .page-hero{padding:36px 0 52px;text-align:left}
.editorial .breadcrumb{margin:0 0 30px;color:var(--article-muted);font-size:12px}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:64px;align-items:center}
.editorial .page-hero h1{max-width:820px;margin:0;font-size:clamp(38px,4.2vw,62px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.article-hero-copy>p{max-width:70ch;margin:22px 0 0;font-size:18px;line-height:1.8;color:#bcbcc6}
.editorial .evidence-strip{justify-content:flex-start;gap:12px;margin:22px 0 0;font-size:11px;line-height:1.7}
.editorial .evidence-strip span{background:none;padding:0;color:#a9a9b4;border-radius:0}
.editorial .evidence-strip span+span{border-left:1px solid #44444d;padding-left:12px}
.editorial .article-layout{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:32px;padding:0 0 72px;align-items:start}
.editorial .article-nav{padding:20px 14px 16px 0;background:none;border:0;border-top:1px solid var(--article-line);top:100px;max-height:calc(100svh - 124px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555561 transparent}
.editorial .article-nav .micro{display:block;margin-bottom:14px;font-size:10px;color:#a9a9b4;letter-spacing:.08em}
.editorial .article-nav a{display:block;min-height:44px;padding:10px 12px;font-size:12px;line-height:1.6;white-space:nowrap;color:#9999a7;border-left:1px solid #303039;transition:color .2s,background .2s}
.editorial .article-nav a:hover,.editorial .article-nav a[aria-current]{color:#f1f1f5;background:#17171b;border-color:var(--article-accent)}
.editorial .article-content{min-width:0}
.editorial .article-content>section{padding:38px 0 42px;border-top:1px solid var(--article-line);scroll-margin-top:100px;display:flow-root}
.editorial .article-content>section:first-child{padding-top:24px}
.editorial .article-content h2{font-size:clamp(26px,2.3vw,34px);line-height:1.3;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.editorial .article-content h3{font-size:21px;line-height:1.4;margin:28px 0 12px;letter-spacing:-.015em}
.editorial .article-content p{max-width:75ch;font-size:17px;line-height:1.85;color:#bcbcc6;margin:0 0 20px}
.editorial .article-content p:last-child{margin-bottom:0}
.editorial a:focus-visible,.editorial button:focus-visible,.editorial summary:focus-visible{outline:2px solid #ff9aab;outline-offset:4px}
.editorial ::selection{background:#782c3d;color:white}
.guide-route{border-left:1px solid #34343e;padding-left:24px}
.guide-route a{display:grid;grid-template-columns:28px 1fr;gap:5px 12px;padding:14px 0;color:#eeeef3}
.guide-route span{grid-row:1/3;color:var(--article-accent);font-size:12px;padding-top:3px}
.guide-route strong{font:600 20px var(--heading)}
.guide-route small{font-size:12px;color:#a9a9b4}
.editorial--guide .tutorial-step h2{display:flex;gap:16px;align-items:baseline}
.step-number{flex:none;font:500 17px var(--heading);color:var(--article-accent);font-variant-numeric:tabular-nums}
.step-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:32px;align-items:start}
.editorial--guide .step-copy p{font-size:16px;line-height:1.85}
.tutorial-visual{margin:0;background:#121216;border:1px solid #303039;border-radius:12px;overflow:hidden;min-width:0}
.visual-heading{padding:16px 18px;border-bottom:1px solid #282830}
.visual-heading strong{font:500 15px var(--heading);color:#dedee6}
.visual-stage{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px 18px;background:#18181e;min-height:160px}
.tutorial-capture{display:block;max-width:100%;width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:#111115;cursor:zoom-in}
.tutorial-capture img{display:block;width:100%;height:auto;max-height:350px;object-fit:contain}
.tutorial-visual figcaption{display:grid;grid-template-columns:26px 1fr;gap:8px 10px;padding:16px 18px;text-align:left;background:#121216}
.visual-marker{color:#f47b90;font-size:12px;padding-top:3px;font-variant-numeric:tabular-nums}
.tutorial-visual figcaption strong{display:block;color:#d4d4de;font-size:13px;margin-bottom:5px}
.tutorial-visual figcaption div>span{color:#a2a2af;font-size:12px;line-height:1.65;display:block}
.visual-enlarge{grid-column:2;color:#878794;font-size:10px}
.tutorial-visual--sign-in .tutorial-capture{max-width:304px}
.tutorial-visual--mode .tutorial-capture{max-width:360px}
.tutorial-visual--settings .tutorial-capture{max-width:360px}
.tutorial-visual--save .tutorial-capture{max-width:280px}
.tutorial-visual--save img{max-height:350px}
.tutorial-visual--credits .visual-stage{min-height:150px}
.visual-result{width:36%;height:auto;border-radius:6px;max-height:280px;object-fit:contain}
.tutorial-visual--prompt .tutorial-capture{width:64%}
#prompt .step-layout,#edit .step-layout{display:block}
#prompt .step-copy,#edit .step-copy{max-width:860px}
#prompt .tutorial-visual,#edit .tutorial-visual{max-width:800px;margin:26px 0 0}
#edit .tutorial-capture{max-width:580px}
.editorial .prompt-example{padding:22px 24px;margin:24px 0;background:#17171d;border:1px solid #34343e;border-radius:10px}
.editorial .prompt-example .micro{color:#f48195;font-size:10px;letter-spacing:.06em}
.editorial .prompt-example p{margin:12px 0 18px;color:#dddde6;font-size:16px;line-height:1.8}
.editorial .prompt-example button{min-height:44px;padding:10px 16px;font-size:12px;border-radius:6px;margin:4px 8px 0 0;cursor:pointer}
.editorial .prompt-example button:hover{background:#34343e}
.review-cover{margin:0;background:#17171c;border:1px solid #303039;border-radius:10px;overflow:hidden}
.review-cover img{display:block;width:100%;height:200px;object-fit:cover}
.review-cover figcaption{padding:12px 14px;color:#a9a9b4;font-size:11px;line-height:1.6}
.editorial--review #verdict{padding:28px;background:#131317;border-top:1px solid #91404f;border-radius:0 0 10px 10px;margin-bottom:12px}
.editorial .comparison-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:26px 0}
.editorial .comparison-cards>div{padding:20px 0;background:none;border-top:1px solid #3d3d48;border-radius:0}
.editorial .comparison-cards h3{margin:0 0 12px;font-size:19px}
.editorial .comparison-cards p{font-size:16px;line-height:1.8}
.editorial--review #pros-cons .comparison-cards>div:first-child{border-color:#758f88}
.editorial--review #pros-cons .comparison-cards>div:last-child{border-color:#a15d6d}
.editorial .table-scroll{border:1px solid var(--article-line);border-radius:10px;margin:24px 0;overflow-x:auto;scrollbar-color:#555561 transparent}
.editorial table{width:100%;min-width:560px;border:0;background:#111115}
.editorial th{padding:16px 18px;background:#1b1b22;color:#eeeef3;font-size:12px;line-height:1.5}
.editorial td{padding:18px;font-size:14px;line-height:1.7;color:#bcbcc6;border-color:var(--article-line)}
.editorial td:first-child{font-weight:600;color:#ededf2}
.editorial #quality .art-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr);gap:24px;align-items:center;max-width:850px;margin:28px 0;padding:20px;background:#17171c;border:1px solid #303039;border-radius:10px}
.editorial #quality .image-open{display:block;width:100%;border-radius:6px;overflow:hidden}
.editorial #quality .art-card img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;background:#17171c}
.editorial #quality figcaption{padding:0}
.editorial #quality figcaption h3{font-size:20px;margin:10px 0}
.editorial #quality figcaption p{font-size:14px;line-height:1.75}
.editorial--review #fit{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.editorial--review #fit>h2{grid-column:1/-1}
.editorial--review #fit>h3,.editorial--review #fit>p{grid-column:1/-1;max-width:75ch}
.editorial .faq-list{max-width:900px}
.editorial summary{font-size:18px;line-height:1.5;padding:22px 40px 22px 0}
.editorial .final-cta{padding:36px;max-width:1360px}
@media(max-width:1100px){.editorial .container{width:calc(100% - 48px)}.editorial .article-layout{grid-template-columns:max-content minmax(0,1fr);gap:24px}.step-layout{display:block}.tutorial-visual{max-width:700px;margin:24px 0 0}.tutorial-capture{max-width:600px}.visual-stage{min-height:140px}.article-hero-grid{grid-template-columns:1fr 240px;gap:32px}.editorial #quality .art-card{grid-template-columns:1fr}.editorial #quality .art-card img{max-height:280px}}
@media(max-width:760px){.editorial .container{width:calc(100% - 32px)}.editorial .page-hero{padding:26px 0 32px}.article-hero-grid{display:block}.editorial .page-hero h1{font-size:38px}.article-hero-copy>p{font-size:17px}.guide-route{display:flex;justify-content:space-between;border-left:0;border-top:1px solid #303039;padding:16px 0 0;margin-top:26px}.guide-route a{display:flex;flex-direction:column;gap:8px}.guide-route strong{font-size:15px}.guide-route small{font-size:10px}.review-cover{margin-top:26px;max-width:380px}.review-cover img{height:180px}.editorial .article-layout{display:block}.editorial .article-nav{position:relative;top:auto;max-height:none;padding:14px 0;margin-bottom:22px}.article-nav-links{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}.editorial .article-nav a{flex:none;max-width:250px;border-left:0;white-space:nowrap;padding:10px 12px;background:#17171b;border-radius:5px}.editorial .article-content>section{padding:28px 0 34px}.editorial .article-content h2{font-size:27px;gap:12px}.editorial .article-content p{font-size:16px}.visual-stage{padding:18px 12px;gap:12px}.visual-heading{padding:14px}.tutorial-visual figcaption{padding:14px}.tutorial-visual--prompt .visual-stage{flex-direction:column}.tutorial-visual--prompt .tutorial-capture{width:100%}.visual-result{width:68%;max-height:230px}.editorial .comparison-cards{grid-template-columns:1fr;gap:0}.editorial--review #verdict{padding:22px 18px}.editorial #quality .art-card{padding:14px;gap:18px}.editorial .prompt-example{padding:20px}.editorial .final-cta{padding:26px}.editorial .evidence-strip{gap:8px}.editorial .evidence-strip span+span{padding-left:8px}}
@media(prefers-reduced-motion:reduce){.editorial *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.editorial .article-nav,.guide-route,.review-cover,.editorial .final-cta{display:none}.editorial .article-layout{display:block}.editorial .container{width:100%}.step-layout{display:block}}
.editorial--review #recorded-example .guide-shot{float:left;width:40%;max-width:380px;margin:6px 30px 18px 0;background:#17171c;border:1px solid #303039;border-radius:10px;overflow:hidden}
.editorial--review #recorded-example .guide-shot img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
.editorial--review #recorded-example figcaption{padding:14px;color:#aaaab6;font-size:12px;line-height:1.7}
.editorial--review #fit{display:block}
.editorial--review #fit>h3{font-size:19px;margin-top:24px;padding-top:22px;border-top:1px solid #282830}
@media(max-width:760px){.editorial--review #recorded-example .guide-shot{float:none;width:100%;max-width:340px;margin:22px auto}.editorial--review #recorded-example .guide-shot img{max-height:320px}}

.tutorial-visual--prompt .visual-stage{flex-direction:column}.tutorial-visual--prompt .tutorial-capture{width:100%}.tutorial-visual--settings .tutorial-capture{max-width:100%}.tutorial-visual--generate .tutorial-capture{max-width:100%}