/* Add Noise editorial layout. The live editor and shared brand remain unchanged. */
.noise-gallery,.noise-how,.noise-uses,.noise-controls-guide,.noise-difference,.noise-faq{max-width:1160px;margin:0 auto;padding:72px 20px}
.noise-gallery h2,.noise-how h2,.noise-uses h2,.noise-controls-guide h2,.noise-difference h2,.noise-faq h2{font:800 var(--h2)/1.2 var(--fh);letter-spacing:-.01em;margin:0 0 24px;color:var(--ink)}
.noise-gallery .section-intro{max-width:680px;margin:0 auto 44px;text-align:center}
.noise-gallery .section-intro p,.noise-section-heading>p{color:var(--sub);margin:0;line-height:1.7}
.noise-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.noise-look{min-width:0}
.noise-look figure{margin:0;min-width:0}
.noise-look img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:24px;background:var(--soft)}
.noise-look figcaption{font:13px/1.6 var(--fp);color:var(--sub);margin-top:12px}
.noise-look-copy h3{font:700 var(--h3l)/1.2 var(--fh);margin:0 0 16px}
.noise-look-copy p{color:var(--sub);margin:0 0 16px;max-width:60ch}
.noise-look-copy .control-help{font:13px/1.6 var(--fp)}
.noise-look-copy .text-link{display:inline-flex;align-items:center;min-height:44px}
.noise-look-1{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:40px;padding:40px;background:var(--t2);border-radius:40px}
.noise-look-2 .noise-look-copy,.noise-look-3 .noise-look-copy{padding-top:24px}
.noise-look-4{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding-top:32px;border-top:1px solid var(--line)}
.noise-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:80px;border-top:1px solid var(--line)}
.noise-how .steps{display:flex;flex-direction:column;gap:0;margin:0}
.noise-how .steps article{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px;padding:24px 0;border-bottom:1px solid var(--line);text-align:left}
.noise-how .steps article:first-child{padding-top:0}
.noise-how .steps article:last-child{border-bottom:0;padding-bottom:0}
.noise-how .steps article>span{grid-row:1/3;margin:0;background:var(--soft);color:var(--ink);width:40px;height:40px;display:grid;place-items:center;border-radius:999px;font:600 16px var(--fh)}
.noise-how .steps h3{font:700 20px/1.3 var(--fh);margin:0 0 8px}
.noise-how .steps p{font:14px/1.7 var(--fp);color:var(--sub);margin:0}
.noise-uses{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px}
.noise-detail-list h3{font:700 20px/1.3 var(--fh);margin:0 0 12px}
.noise-detail-list p{font:14px/1.7 var(--fp);color:var(--sub);margin:0}
.noise-uses .noise-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.noise-uses .noise-detail-list article{padding-top:20px;border-top:1px solid var(--line)}
.noise-controls-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;max-width:1120px;margin:20px auto;padding:64px 48px;border-radius:40px;background:var(--t3)}
.noise-controls-guide .noise-detail-list{display:flex;flex-direction:column;gap:28px}
.noise-controls-guide .noise-detail-list article+article{padding-top:28px;border-top:1px solid #e0d8ee}
.noise-difference{max-width:1000px}
.noise-difference h2{max-width:680px;margin-bottom:40px}
.noise-difference-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.noise-difference-columns p{margin:0;color:var(--sub);line-height:1.8}
.noise-difference-columns strong{display:block;color:var(--ink);font:700 22px/1.3 var(--fh);margin-bottom:16px}
.noise-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;border-top:1px solid var(--line)}
.noise-faq h2{text-align:left;max-width:360px}
.noise-questions{min-width:0}
.noise-faq details{margin:0 0 12px}
.noise-faq details:last-child{margin-bottom:0}
@media(max-width:860px){
 .noise-gallery,.noise-how,.noise-uses,.noise-difference,.noise-faq{padding:48px 16px}
 .noise-gallery-grid{grid-template-columns:1fr;gap:36px}
 .noise-look-1,.noise-look-4{grid-column:auto;grid-template-columns:1fr;gap:24px}
 .noise-look-1{padding:24px 16px;border-radius:28px}
 .noise-look-4{padding-top:32px}
 .noise-look-2 .noise-look-copy,.noise-look-3 .noise-look-copy{padding-top:20px}
 .noise-how,.noise-uses,.noise-controls-guide,.noise-faq{grid-template-columns:1fr;gap:32px}
 .noise-uses .noise-detail-list{grid-template-columns:1fr;gap:24px}
 .noise-controls-guide{margin:20px 12px;padding:40px 16px;border-radius:28px}
 .noise-difference-columns{grid-template-columns:1fr;gap:32px}
 .noise-faq h2{max-width:none;margin:0}
 .noise-how .steps article{column-gap:16px}
}

/* Compact scene tabs and a single complete image/text panel. */
.noise-uses{display:block;min-width:0}
.noise-uses .noise-section-heading{max-width:760px;margin:0 auto 40px;text-align:center}
.noise-uses .noise-section-heading h2{text-wrap:balance}
.noise-uses .noise-section-heading>p{max-width:700px;margin:0 auto}
.noise-scene-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 auto 48px}
.noise-scene-tabs button{font:600 13px/1.3 var(--fh);min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:999px;background:var(--soft);color:var(--ink);cursor:pointer}
.noise-scene-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.noise-scene-track{min-width:0;touch-action:pan-y pinch-zoom;cursor:grab;border-radius:32px}
.noise-scene-track.is-dragging{cursor:grabbing;user-select:none}
.noise-scene{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center;padding:24px;border-radius:32px;background:var(--soft);min-width:0}
.noise-scene-copy{text-align:left;padding:16px 16px 16px 0}
.noise-scene figure{margin:0;min-width:0}
.noise-scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:24px;user-select:none;-webkit-user-drag:none}
.noise-scene figcaption{font:13px/1.6 var(--fp);color:var(--sub);margin-top:12px}
.noise-scene h3{font:700 var(--h3l)/1.2 var(--fh);margin:0 0 20px;overflow-wrap:anywhere}
.noise-scene p{font:400 16px/1.7 var(--fb);color:var(--sub);margin:0;max-width:46ch}
.noise-scene-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.noise-scene-controls p{margin:0;font:14px/1.6 var(--fp);color:var(--sub)}
.noise-scene-controls>div{display:flex;gap:8px}
.noise-scene-controls button{min-width:44px;height:44px;display:grid;place-items:center;background:white;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.noise-scene-controls #noiseSceneRotation{padding:0 16px;font:600 13px var(--fh)}
.noise-scene-controls button:hover{background:var(--soft)}
.noise-scene-track:focus-visible,.noise-scene-tabs button:focus-visible,.noise-scene-controls button:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
@media(max-width:860px){
 .noise-uses .noise-section-heading{margin-bottom:28px}
 .noise-scene-tabs{gap:6px;margin-bottom:28px}
 .noise-scene-tabs button{padding:10px 14px}
 .noise-scene{grid-template-columns:1fr;padding:20px 16px;gap:24px;border-radius:28px}
 .noise-scene-copy{min-height:140px;padding:0}
 .noise-scene h3{font-size:22px;margin-bottom:12px}
 .noise-scene p{font-size:14px}
}

/* Reference: white heading/tab area; tint belongs only to the image/text canvas. */
.noise-uses{max-width:1160px;width:100%;margin:0 auto;padding:72px 20px;background:transparent;border-radius:0}
.noise-uses .noise-scene{background:linear-gradient(110deg,var(--scene-tint-start,#f5e1f7),var(--scene-tint-end,#f5eff6));border-radius:28px;padding:24px;gap:48px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.noise-uses .noise-scene-tabs button{background:var(--soft)}
.noise-uses .noise-scene-tabs button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.noise-uses .noise-scene-copy{padding:16px 8px 16px 0}
.noise-uses .noise-scene-copy h3{font:700 var(--h3l)/1.2 var(--fh)}
@media(max-width:860px){
 .noise-uses{width:100%;margin:0 auto;padding:48px 16px}
 .noise-uses .noise-scene{grid-template-columns:1fr;padding:20px 16px;gap:24px}
 .noise-uses .noise-scene-copy{padding:0}
}
.noise-scene-copy .noise-preset-note{margin-top:20px;font:600 13px/1.6 var(--fh);color:var(--ink)}
.noise-scene-copy .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
.noise-controls-guide .noise-section-heading>p+p{margin-top:16px}
.noise-controls-guide .noise-section-heading>.text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:16px}

/* Scene-specific canvases travel with their panels through every navigation method. */
#noiseScene0{--scene-tint-start:#f3e5f8;--scene-tint-end:#fff1ec}
#noiseScene1{--scene-tint-start:#e9edff;--scene-tint-end:#ffeadb}
#noiseScene2{--scene-tint-start:#fff0d8;--scene-tint-end:#f8e4ef}
#noiseScene3{--scene-tint-start:#e7eefb;--scene-tint-end:#f4e7f6}
#noiseScene4{--scene-tint-start:#e4f5eb;--scene-tint-end:#edf3ff}
#noiseScene5{--scene-tint-start:#eee5fa;--scene-tint-end:#fde8e5}

/* Full landscape comparisons keep their native side-by-side geometry. */
.noise-look img[src*="landscape-"]{aspect-ratio:3/1}