@scope (.water-case) {

:scope{color-scheme:dark;--paper:#08090a;--panel:#111417;--ink:#fafafa;--text:#d5d8da;--muted:#a6aeb3;--line:#31373a;--sea:#acd4da}
*{box-sizing:border-box}:scope{background:var(--paper);color:var(--text);font:17px/1.65 Inter,Arial,sans-serif;margin:0;-webkit-font-smoothing:antialiased}a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:.2em}a:hover{color:white}:focus-visible{outline:3px solid #a8d5e3;outline-offset:4px}.bar{border-bottom:1px solid var(--line)}.bar-inner{max-width:1060px;padding:19px 28px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-weight:680;letter-spacing:-.07em;font-size:25px}.bar-inner>a:last-child{color:var(--text);font-size:14px}
.water-inner{max-width:940px;margin:auto;padding:0 28px 76px}.head{padding-top:clamp(38px,6vw,74px)}.eyebrow,.image-label{font-weight:540;color:var(--sea);font-size:12px;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3{color:var(--ink);text-wrap:balance;font-weight:430;line-height:1.1}h1{font-size:clamp(38px,5.3vw,65px);letter-spacing:-.058em;max-width:780px;margin:12px 0 24px}.lead{max-width:735px;font-size:clamp(20px,2.3vw,24px);line-height:1.5;margin:0}.byline{display:flex;gap:8px 20px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:24px 0 32px}.byline b{color:var(--ink);font-weight:540}
article>p{max-width:710px;margin:0 auto 18px}article>h2{max-width:710px;margin:62px auto 18px;font-size:clamp(29px,3.7vw,41px);letter-spacing:-.045em}article>h2:last-of-type{font-size:25px}.figbox,.compare,.text-pair,.audio-pair,.grid-pair,details,.film{margin:26px 0}.compare{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:clamp(14px,2.8vw,24px)}.compare h2{font-size:clamp(23px,2.9vw,31px);letter-spacing:-.04em;margin:0 0 7px}.compare p{margin:.3em 0}.choice{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}.choice label,.slot label{color:var(--muted);font-size:14px}select{border:1px solid #5c6469;border-radius:6px;background:#131719;color:var(--ink);padding:6px 12px;font:inherit;font-size:15px;min-height:44px;max-width:100%;cursor:pointer}.pair,.text-pair,.audio-pair,.grid-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,22px)}figure{margin:0;min-width:0}.slot label{display:block}.slot select{margin:0 0 8px}.frame{display:block;background:#08090a;border:1px solid var(--line);border-radius:9px;overflow:hidden}.frame img{display:block;width:100%;height:auto;max-height:clamp(295px,47vw,465px);object-fit:contain}.stamp,.note,figcaption{color:var(--muted);font-size:14px;line-height:1.5}.stamp{font-variant-numeric:tabular-nums}.note{margin:12px 0 0!important}.tag{display:block;color:var(--ink);font-weight:580;font-size:14px;margin-bottom:6px}.text-pair>div,.audio-pair>div{border-top:1px solid var(--line);padding:15px 0}.text-pair blockquote{margin:8px 0;color:var(--ink);font-size:18px;line-height:1.5}.audio-pair audio{display:block;width:100%;margin:.7em 0}.transcript{font-size:14px;color:var(--muted);line-height:1.55}article>p.transcript{margin-top:-6px}.grid-pair .frame img{max-height:356px}.grid-pair figcaption{padding-top:8px}.film{max-width:710px;margin:28px auto}.film video{max-height:480px;width:100%;background:#08090a;border-radius:10px;display:block}.film figcaption{margin-top:9px}.inline-vid{color:var(--sea)}details{max-width:710px;margin:26px auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 0 8px}summary{cursor:pointer;padding:13px 0 8px;color:var(--ink);font-size:16px;min-height:44px}dl{margin:12px 0}dl div{display:grid;grid-template-columns:4em 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}dt{color:var(--sea)}dd{margin:0}.foot{margin-top:48px;border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:13px}
@media(max-width:600px){.water-inner,.bar-inner{padding-left:17px;padding-right:17px}.head{padding-top:34px}.byline{gap:4px 12px}.audio-pair,.text-pair{grid-template-columns:1fr;gap:0}.slot select{width:100%}.frame img{max-height:none}.note,figcaption,.stamp{font-size:13px}.pair,.grid-pair{gap:8px}article>h2{margin-top:45px}.compare{padding:12px}.choice label{width:100%}.choice{gap:3px}.choice select{width:100%}}
.film video{height:auto;aspect-ratio:720/640}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,24%);gap:clamp(20px,3.5vw,48px);align-items:center}.head h1{font-size:clamp(37px,4.7vw,58px)}.head .byline{margin-bottom:8px}.hero-still img{display:block;width:100%;height:auto;border-radius:10px}.hero-still figcaption{margin-top:7px}.hero-still a{display:inline-block}
@media(max-width:650px){.head{display:block}.hero-still{display:flex;align-items:center;gap:14px;margin:18px 0}.hero-still>a{width:clamp(60px,18vw,92px);flex-shrink:0}.hero-still img{border-radius:5px}.head .lead{font-size:20px}}
.chain,.agents,.planche,.measure,.waves,.frise,.code{max-width:820px;margin:26px auto}.chain ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;counter-reset:none}.chain li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 12px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}.chain li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:31px;width:6px;height:1px;background:var(--sea);opacity:.7}.pict{width:44px;height:44px;padding:10px;border-radius:50%;background:#17262a;color:var(--sea);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;flex-shrink:0}.chain b{color:var(--ink);font-weight:560;font-size:15px}.chain li span{font-size:13px;line-height:1.4;color:var(--text)}.chain small{margin-top:auto;padding-top:6px;color:var(--sea);font-size:12px;font-variant-numeric:tabular-nums;line-height:1.35}.chain figcaption{display:flex;gap:10px;align-items:center;margin-top:12px}.loop{flex-shrink:0;width:22px;height:14px;border:1.5px solid var(--sea);border-top:0;border-radius:0 0 9px 9px;position:relative}.loop::before{content:"";position:absolute;left:-5px;top:-1px;border:4px solid transparent;border-bottom:5px solid var(--sea);border-top:0}
.code{border:1px solid var(--line);border-radius:12px;background:#0d1012;overflow:hidden}.code figcaption{display:flex;flex-wrap:wrap;gap:0 6px;padding:9px 15px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}.code figcaption span{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}.code pre{margin:0;padding:14px 15px 15px;overflow-x:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dfe3e5;white-space:pre;background:none;border:0;-webkit-overflow-scrolling:touch}.code.wrap pre{white-space:pre-wrap;overflow-wrap:anywhere}.code code{font:inherit;background:none;padding:0;color:inherit}.code .c{color:#7d878c}.code .s{color:var(--sea)}.code .n{color:#efc98f}
.agents ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.agents li{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--panel);display:flex;flex-direction:column;gap:2px}.agents li b{color:var(--ink);font-weight:560;font-size:15px}.agents li span{font-size:13.5px;color:var(--muted);line-height:1.45}.agents figcaption,.planche figcaption,.measure figcaption,.waves figcaption,.frise figcaption{margin-top:9px}.planche{max-width:680px}.planche .frame img{max-height:none}
.measure{display:grid;gap:14px}.bar-group .tag{margin-bottom:8px}.bar-row{display:grid;grid-template-columns:2.4em 1fr 3em;align-items:center;gap:10px;margin:5px 0;font-size:14px}.bar-row>span{color:var(--muted)}.bar-row b{color:var(--ink);font-weight:560;font-variant-numeric:tabular-nums;text-align:right}.lm-track{position:relative;height:12px;border-radius:6px;background:#1a1f22}.lm-track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}.lm-track i.old{background:#4b5559}.lm-track i.new{background:var(--sea)}.lm-track em{position:absolute;top:-4px;bottom:-4px;width:2px;background:#efc98f;border-radius:1px}.measure+.code{margin-top:14px}
.wave-row{display:grid;grid-template-columns:2.4em 1fr;gap:10px;align-items:center;margin:6px 0}.wave-row .tag{margin:0;color:var(--muted)}.wave-row svg{display:block;width:100%;height:74px;background:#0d1012;border:1px solid var(--line);border-radius:8px}.wave-row .area{fill:var(--sea);opacity:.22}.wave-row .line{fill:none;stroke:var(--sea);stroke-width:1.6;vector-effect:non-scaling-stroke}.wave-row .cut{stroke:#efc98f;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}.wave-axis{position:relative;margin-left:calc(2.4em + 10px);height:20px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between}.wave-axis .cut-label{position:absolute;transform:translateX(-50%);color:#efc98f;white-space:nowrap}.waves+.code{margin-top:14px}
.f-chart{display:grid;gap:8px}.f-row{display:grid;grid-template-columns:minmax(0,13em) 1fr;gap:12px;align-items:center}.f-row .tag{margin:0;font-size:13px;font-weight:500;color:var(--text)}.f-track{position:relative;height:22px;border-radius:5px;background:#1a1f22}.f-track i{position:absolute;top:0;bottom:0;border-radius:5px}.f-track i.title{background:linear-gradient(90deg,var(--ink) 0 22.2%,rgba(250,250,250,0) 100%);border-radius:5px 0 0 5px}.f-track i.v7{background:#4b5559}.f-track i.v8{background:var(--sea)}.f-axis{position:relative;height:54px;font-size:12px;color:var(--muted)}.f-axis i{position:absolute;top:0;width:1px;height:6px;background:#5c6469}.f-axis i.major{height:10px;background:var(--muted)}.f-axis b{position:absolute;top:13px;height:8px;border:1px solid #efc98f;border-top:0;font-weight:500;font-size:11.5px;color:#efc98f;text-align:center;line-height:1;padding-top:10px;white-space:nowrap}.f-axis span{position:absolute;top:38px;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}.frise+.code{margin-top:14px}
@media(max-width:900px){.chain ol{grid-template-columns:repeat(4,minmax(0,1fr))}.chain li:nth-child(4)::after{display:none}}
@media(max-width:600px){.chain ol{grid-template-columns:1fr;gap:6px}.chain li{display:grid;grid-template-columns:44px 1fr auto;column-gap:12px;row-gap:1px;align-items:center;padding:10px 12px}.chain li .pict{grid-row:span 2;margin:0}.chain li b{grid-column:2}.chain li span{grid-column:2}.chain small{grid-column:3;grid-row:1/span 2;padding:0;text-align:right;max-width:8.5em}.chain li:not(:last-child)::after{display:none}.code pre{font-size:12px;padding:12px}.f-row{grid-template-columns:1fr;gap:4px}.f-axis b{font-size:10.5px}}
.ic{font:.86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#efc98f;background:#14191b;border:1px solid var(--line);border-radius:5px;padding:.05em .35em;white-space:nowrap}

}
