:root { --acc:#c81d10; --acc-2:#e02412; --pe:cubic-bezier(.22,1,.36,1); --sweep:rgba(10,10,10,.05); }
.eyebrow i { background:var(--acc); }
.pc img,
.pc video { pointer-events:none; -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; user-select:none; }
.pc-fr::after,
.dev::after { content:""; position:absolute; inset:0; z-index:4; }
#shield { position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:10002; background:var(--acc); color:#fff; padding:11px 18px; font-family:var(--f-sous); font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
#shield.on { opacity:1; transform:translate(-50%,0); }
.pc-w { position:relative; }
.pc-fr,
.dev,
.cmp,
.flip-fr { overflow:hidden; }
.dv .pc-fr,
.dv .dev,
.dv .cmp,
.dv .flip-fr,
.dv .phone { clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--pe); }
.dv.in .pc-fr,
.dv.in .dev,
.dv.in .cmp,
.dv.in .flip-fr,
.dv.in .phone { clip-path:inset(0 0 0 0); }
.dv img,
.dv video { transform:scale(1.09); transition:transform 1.6s var(--pe); }
.dv.in img,
.dv.in video { transform:none; }
.dv .tag { opacity:0; transform:translateY(10px); transition:opacity .8s var(--pe) .18s, transform .8s var(--pe) .18s; }
.dv.in .tag { opacity:1; transform:none; }
.dv--1 .pc-fr,
.dv--1 .dev,
.dv--1 .cmp,
.dv--1 .flip-fr { transition-delay:.09s }
.dv--2 .pc-fr,
.dv--2 .dev,
.dv--2 .cmp,
.dv--2 .flip-fr { transition-delay:.18s }
.dv--3 .pc-fr,
.dv--3 .dev,
.dv--3 .cmp,
.dv--3 .flip-fr { transition-delay:.27s }
.pc[data-full] .pc-fr img,
.pc[data-full] .dev img { transition:transform 1.6s var(--pe); }
.pc[data-full]:hover .pc-fr img,
.pc[data-full]:hover .dev img { transform:scale(1.045); }
.act--dark .dv .dev { filter:brightness(.16) saturate(.35); }
.act--dark .dv.in .dev { filter:none; transition:clip-path 1.05s var(--pe), filter 1.3s var(--ease) .25s; }
#hud { position:fixed; left:var(--gut); bottom:32px; z-index:60; mix-blend-mode:difference; color:#fff; pointer-events:none; font-family:var(--f-sous); font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase; display:flex; align-items:center; gap:11px; opacity:0; transition:opacity .6s var(--ease); }
#hud.on { opacity:1; }
#hud .hb { width:44px; height:1px; background:#fff; position:relative; opacity:.45; }
#hud .hb i { position:absolute; left:0; top:0; height:1px; background:#fff; width:0; transition:width .5s var(--ease); }
.cov { position:relative; z-index:2; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; padding:clamp(78px,9vh,104px) var(--gut) 0; background:var(--bg); }
.cov > .wrap { display:flex; flex-direction:column; flex:1; width:100%; position:relative; }
#sea { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 var(--gut); pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent 28%, rgba(0,0,0,.42) 55%, #000 82%); mask-image:linear-gradient(90deg, transparent 28%, rgba(0,0,0,.42) 55%, #000 82%); }
.sea-col { display:flex; flex-direction:column; gap:14px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.sea-col > div { display:flex; flex-direction:column; gap:14px; flex:0 0 auto; }
#sea picture { display:block; flex:0 0 auto; }
#sea img { display:block; width:100%; height:auto; flex:0 0 auto; filter:grayscale(1) contrast(.9); opacity:.52; background:var(--panel); }
#sea.run .sea-a { animation:seaUp 52s linear infinite; }
#sea.run .sea-b { animation:seaDown 64s linear infinite; }
#sea.run .sea-c { animation:seaUp 57s linear infinite; }
@keyframes seaUp {from{transform:translateY(0)}    to{transform:translateY(-50%)}}
@keyframes seaDown {from{transform:translateY(-50%)} to{transform:translateY(0)}}
.cov-top { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--line-2); font-family:var(--f-sous); font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--dim); position:relative; }
.cov-mid { flex:1; display:flex; flex-direction:column; justify-content:center; gap:0; max-width:56%; padding:clamp(22px,4.5vh,54px) 0; position:relative; }
.cov-kick { font-family:var(--f-sous); font-size:11.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--dim-2); display:flex; align-items:center; gap:12px; }
.cov-kick i { width:9px; height:9px; background:var(--acc); flex:0 0 auto; animation:recBlink 2.4s var(--ease) infinite; }
@keyframes recBlink {0%,78%,100%{opacity:1} 84%,90%{opacity:.15}}
.cov .lead { max-width:560px; margin-top:22px; }
.cov-name { font-family:var(--f-titre); font-weight:var(--display-w); font-size:clamp(44px,14vw,186px); line-height:.88; letter-spacing:-.05em; text-transform:none; color:#fff; mix-blend-mode:difference; margin:0 0 clamp(12px,2.6vh,30px) -0.02em; position:relative; }
.cov-foot { border-top:1px solid var(--line-2); padding-top:15px; padding-bottom:30px; display:flex; justify-content:space-between; align-items:baseline; gap:20px; position:relative; }
.cov-idx { display:flex; flex-wrap:wrap; gap:8px 26px; }
.cov-idx a { font-family:var(--f-sous); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim-2); display:inline-flex; gap:9px; align-items:baseline; position:relative; padding-bottom:4px; transition:color .3s; }
.cov-idx a b { color:var(--acc); font-weight:500; }
.cov-idx a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ink); transition:width .45s var(--pe); }
.cov-idx a:hover { color:var(--ink); }
.cov-idx a:hover::after { width:100%; }
.cov-run { font-family:var(--f-sous); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.act { position:relative; z-index:2; padding:clamp(76px,12vh,140px) var(--gut); }
.act--dark { --bg:#0e0e0e; --bg-2:#141414; --panel:#171717; --panel-2:#1f1f1f; --line:#282828; --line-2:#383838; --ink:#f4f4f4; --dim:#9c9c9c; --dim-2:#c4c4c4; --pure:#ffffff; --anti:#0e0e0e; --sweep:rgba(255,255,255,.09); background:var(--bg); color:var(--ink); }
.act--dark::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px); }
.act > .wrap,
.act > .reel { position:relative; z-index:1; }
.ov { position:relative; margin-bottom:clamp(44px,7vh,80px); }
.ov-n { position:absolute; left:-.06em; top:-.34em; z-index:-1; font-family:var(--f-titre); font-weight:var(--display-w); font-size:clamp(120px,20vw,290px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--line-2); transition:color 1.1s var(--ease), -webkit-text-stroke-color 1.1s var(--ease); pointer-events:none; user-select:none; }
.ov.here .ov-n { color:color-mix(in srgb, var(--ink) 7%, transparent); -webkit-text-stroke-color:color-mix(in srgb, var(--ink) 26%, transparent); }
.ov::after { content:""; position:absolute; left:0; right:0; bottom:-24px; height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.3s var(--pe) .15s; }
.ov::before { content:""; position:absolute; left:0; bottom:-27px; width:7px; height:7px; background:var(--acc); opacity:0; transition:left 1.3s var(--pe) .15s, opacity .3s var(--ease) .15s; }
.ov.here::after { transform:scaleX(1); }
.ov.here::before { left:calc(100% - 7px); opacity:1; }
.ov-h { font-size:calc(clamp(26px,4.4vw,54px) * var(--ds)); margin-top:14px; }
.ov-l { color:var(--dim); max-width:600px; font-size:15px; margin-top:16px; }
.ov-r { display:grid; grid-template-columns:auto; width:max-content; max-width:100%; gap:0 clamp(26px,4vw,58px); margin-top:26px; border-top:1px solid var(--line-2); padding-top:13px; }
.ov-r > span { font-family:var(--f-sous); font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink); }
.ov-r > span b { display:block; font-weight:400; font-size:9px; letter-spacing:2.4px; color:var(--dim); margin-bottom:5px; }
.ov-r > span i { font-style:normal; color:var(--acc); }
.pc { margin:0; position:relative; }
.pc img,
.pc video { display:block; width:100%; height:auto; background:var(--panel); }
.pc[data-full] { cursor:pointer; }
.pc-fr { position:relative; }
.pc-w .cm,
.pc-w .cm2 { position:absolute; inset:-9px; pointer-events:none; z-index:5; transition:inset .7s var(--pe); }
.pc-w .cm::before,
.pc-w .cm::after,
.pc-w .cm2::before,
.pc-w .cm2::after { content:""; position:absolute; width:14px; height:14px; transition:border-color .4s var(--ease); }
.pc-w .cm::before { top:0; left:0;  border-top:1px solid var(--line-2); border-left:1px solid var(--line-2); }
.pc-w .cm::after { bottom:0; right:0; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2); }
.pc-w .cm2::before { top:0; right:0; border-top:1px solid var(--line-2); border-right:1px solid var(--line-2); }
.pc-w .cm2::after { bottom:0; left:0; border-bottom:1px solid var(--line-2); border-left:1px solid var(--line-2); }
.pc:hover .cm::before,
.pc:hover .cm::after,
.pc:hover .cm2::before,
.pc:hover .cm2::after { border-color:var(--acc); }
.pc:hover .cm,
.pc:hover .cm2 { inset:-4px; }
.tag { display:block; border-top:1px solid var(--line-2); margin-top:13px; padding-top:10px; font-family:var(--f-sous); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--dim); position:relative; }
.tag::before { content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--acc); transition:width .85s var(--pe); }
.pc:hover .tag::before { width:100%; }
.tag .no { color:var(--acc); margin-right:8px; font-size:10px; }
.tag b { color:var(--ink); font-weight:600; letter-spacing:.2px; font-family:var(--f-texte); font-size:14.5px; text-transform:none; }
.tag .tm { display:block; margin-top:5px; letter-spacing:1.8px; font-size:9.5px; opacity:0; transform:translateY(2px); transition:opacity .34s var(--ease), transform .34s var(--ease); }
.pc:hover .tag .tm,
.pc:focus-within .tag .tm,
.pc.aim .tag .tm { opacity:1; transform:none; }
.pc-fr::before,
.pc .dev::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; transform:translateX(-130%); background:linear-gradient(105deg, transparent 38%, var(--sweep) 50%, transparent 62%); }
.pc:hover .pc-fr::before,
.pc:hover .dev::before { animation:igSweep .9s var(--pe) both; }
@keyframes igSweep {to { transform:translateX(130%) }}
.pc.aim .cm::before,
.pc.aim .cm::after,
.pc.aim .cm2::before,
.pc.aim .cm2::after { border-color:var(--acc); }
.pc.aim .tag::before { width:100%; }
.reel-pin { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
.reel-pin::-webkit-scrollbar { display:none; }
.reel-tr { display:flex; align-items:center; gap:clamp(22px,3vw,54px); padding:0 var(--gut) 4px; width:max-content; }
.reel-tr > .pc { flex:0 0 auto; scroll-snap-align:center; }
.reel.pinned .reel-pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; scroll-snap-type:none; }
.reel.pinned .reel-tr { will-change:transform; padding-bottom:0; }
.reel { --rh:var(--rh-act, clamp(300px,52vh,470px)); --fh:var(--rh); }
.reel .pc { width:calc(var(--rh) * var(--ar,1.5)); }
.reel .pc-fr,
.reel .cmp,
.reel .flip-fr,
.reel .dev,
.reel .phone { height:var(--rh); }
.reel .phone { width:100%; max-width:none; }
.reel .pc-fr img,
.reel .cmp img,
.reel .flip-fr img { width:100%; height:100%; object-fit:contain; }
.reel-cue { flex:0 0 auto; width:clamp(150px,16vw,240px); color:var(--dim); font-family:var(--f-sous); font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; line-height:2; border-left:1px solid var(--line-2); padding-left:16px; }
#edition,
#dossiers,
#affichage,
#montages { --rh-act:clamp(300px,50vh,470px); }
#marques,
#carto { --rh-act:clamp(290px,48vh,450px); }
#dessins { --rh-act:clamp(320px,54vh,520px); }
.reel .pc-fr img,
.reel .cmp img,
.reel .flip-fr img { width:100%; height:100%; object-fit:contain; }
.reel .dev { display:flex; flex-direction:column; }
.reel .dev .scr { flex:1 1 auto; min-height:0; position:relative; }
.reel .dev .scr img,
.reel .dev .scr video { width:100%; height:100%; object-fit:contain; }
.reel .tag { min-height:58px; }
.dev { position:relative; border:1px solid var(--line-2); background:var(--panel); }
.dev--b .bar { display:flex; align-items:center; gap:6px; padding:8px 11px; border-bottom:1px solid var(--line-2); }
.dev--b .bar i { width:7px; height:7px; border:1px solid var(--dim); display:block; }
.dev--b .bar span { font-family:var(--f-sous); font-size:9.5px; letter-spacing:1.4px; color:var(--dim); margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.dev--s { padding:7px; }
.dev--tv { padding:10px 10px 7px; }
.dev--tv .tvb { display:flex; justify-content:space-between; align-items:center; padding-top:8px; font-family:var(--f-sous); font-size:9.5px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.dev--tv .tvb i { width:6px; height:6px; background:var(--acc); display:block; animation:recBlink 2.4s var(--ease) infinite; }
.phone { border:1px solid var(--line-2); background:var(--panel); padding:26px 9px 30px; border-radius:6px; max-width:300px; margin:0 auto; position:relative; }
.phone::before { content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:44px; height:3px; background:var(--line-2); }
.ph-scr { height:calc(var(--fh, 400px) - 56px); overflow:hidden; position:relative; background:#fff; }
.ph-scr img { display:block; width:100%; height:auto; }
.phone.run .ph-scr img { animation:feed 46s linear infinite alternate; }
@keyframes feed {from{transform:translateY(0)}
                      to{transform:translateY(calc(-100% + var(--fh, 400px) - 56px))}}
.ph-scr::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-2); pointer-events:none; z-index:5; }
@property --x { syntax:'<percentage>'; inherits:true; initial-value:50%; }
.cmp { position:relative; overflow:hidden; touch-action:pan-y; cursor:ew-resize; -webkit-user-select:none; user-select:none; }
.cmp img { display:block; width:100%; height:auto; }
.cmp .b { position:absolute; inset:0; clip-path:inset(0 0 0 var(--x,50%)); }
.cmp .cbar { position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; margin-left:-1px; background:#fff; z-index:5; pointer-events:none; box-shadow:0 0 0 1px rgba(10,10,10,.25); }
.cmp .cbar::after { content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:#0a0a0a; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:11px; letter-spacing:1px; white-space:nowrap; font-family:var(--f-sous); box-shadow:0 4px 18px -6px rgba(10,10,10,.5); }
.cmp input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; z-index:6; -webkit-appearance:none; appearance:none; }
.cmp-l { position:absolute; bottom:10px; z-index:5; pointer-events:none; font-family:var(--f-sous); font-size:9.5px; letter-spacing:2.4px; text-transform:uppercase; background:rgba(10,10,10,.74); color:#f4f4f4; padding:4px 8px; }
.cmp-l--a { left:10px }
.cmp-l--b { right:10px }
.flip-fr { position:relative; background:#000; overflow:hidden; }
.flip-fr img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .8s var(--pe); }
.flip-fr img.on { opacity:1; }
.flip-bs { display:flex; gap:8px; margin-top:11px; }
.flip-bs button { appearance:none; -webkit-appearance:none; background:none; border:0; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--dim); font-family:var(--f-sous); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:9px 13px; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.flip-bs button.on { background:var(--pure); color:var(--anti); box-shadow:inset 0 0 0 1px var(--pure); }
.out { border-top:1px solid var(--line-2); padding-top:clamp(40px,8vh,72px); }
.out .lead { max-width:560px; }
.out-go { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:30px; }
.btn--acc { background:var(--acc); color:#fff; padding:16px 28px; font-size:14px; letter-spacing:.6px; transition:background .3s var(--ease), gap .3s var(--ease); }
.btn--acc:hover { background:var(--acc-2); }
.legal { margin-top:clamp(44px,9vh,84px); font-family:var(--f-texte); font-size:13px; letter-spacing:0; color:var(--dim); line-height:1.75; max-width:62ch; }
.colo { display:grid; grid-template-columns:repeat(4,auto); width:max-content; max-width:100%; gap:0 clamp(30px,5vw,70px); margin-top:clamp(30px,5vh,50px); border-top:1px solid var(--line-2); padding-top:14px; }
.colo > span { font-family:var(--f-sous); font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink); }
.colo > span b { display:block; font-weight:400; font-size:9px; letter-spacing:2.4px; color:var(--dim); margin-bottom:5px; }
#lb { position:fixed; inset:0; z-index:10001; background:rgba(8,8,8,.96); display:none; flex-direction:column; padding:clamp(14px,3vw,40px); }
#lb::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(58% 42% at 50% 54%, rgba(200,29,16,.07), transparent 72%); }
#lb.on { display:flex; }
#lb .lb-im { flex:1 1 auto; min-height:0; position:relative; }
#lb .lb-im img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; animation:lbIn .5s var(--ease) both; }
#lb.zoom .lb-im { overflow:auto; overscroll-behavior:contain; display:flex; align-items:flex-start; justify-content:flex-start; }
#lb.zoom .lb-im img { position:static; width:auto; height:auto; max-width:none; max-height:none; margin:auto; animation:none; }
#lb .lb-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3; font-family:var(--f-sous); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#9c9c9c; pointer-events:none; opacity:0; transition:opacity .35s var(--ease); }
#lb .lb-im:hover .lb-hint { opacity:1; }
@keyframes lbIn {from{opacity:0; filter:blur(9px) saturate(.2); transform:scale(1.02)}
                    to{opacity:1; filter:none; transform:none}}
#lb.novt .lb-im img { animation:none; }
#lb .lb-cap { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-top:15px; color:#f4f4f4; position:relative; }
#lb .lb-cap .tag { border-color:#3a3a3a; color:#9c9c9c; flex:1; margin-top:0; }
#lb .lb-cap .tag::before { display:none; }
#lb .lb-cap .tag .tm { opacity:1; transform:none; }
#lb .lb-cap .tag b { color:#f4f4f4; }
#lb .lb-n { font-family:var(--f-sous); font-size:11px; letter-spacing:2px; color:#9c9c9c; white-space:nowrap; }
#lb button { appearance:none; -webkit-appearance:none; background:none; border:0; color:#f4f4f4; cursor:pointer; font-family:var(--f-sous); }
#lb .lb-x { position:absolute; top:14px; right:18px; font-size:22px; padding:9px; }
#lb .lb-p,
#lb .lb-s { position:absolute; top:50%; transform:translateY(-50%); font-size:26px; padding:15px 11px; }
#lb .lb-p { left:4px }
#lb .lb-s { right:4px }
#lb button:hover { color:var(--acc-2); }
#dark { position:fixed; inset:0; z-index:9980; background:#0a0a0a; pointer-events:none; will-change:clip-path; }
#dark::after { content:""; position:absolute; inset:0; background:radial-gradient(58% 42% at 50% 54%, rgba(200,29,16,.20), transparent 72%); }
html.dev-go #dark { animation:veilUp 1.15s cubic-bezier(.76,0,.24,1) both; }
@keyframes veilUp {from{clip-path:inset(0 0 0 0)} to{clip-path:inset(0 0 100% 0)}}
html.dev-go .cov-mid,
html.dev-go .cov-foot,
html.dev-go #sea { animation:tirage 1.5s var(--ease) .3s both; }
@keyframes tirage {from{opacity:0; filter:blur(13px) saturate(.1) contrast(1.5)}
                        to{opacity:1; filter:none}}
.ov-h.rev { letter-spacing:.055em; filter:blur(8px); }
.ov-h.rev.in { letter-spacing:-.025em; filter:none; transition:letter-spacing 1.35s var(--ease), filter .95s var(--ease), opacity .85s var(--ease), transform .95s var(--ease); }
@supports (animation-timeline: view()) {
  @media (min-width:1000px) and (prefers-reduced-motion:no-preference) {
    .ov .ov-n { animation:ovX linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes ovX {from{transform:translateX(.05em)} to{transform:translateX(-.05em)}}
  }
}
.act--dark::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(115% 78% at 50% 38%, transparent 42%, rgba(0,0,0,.55) 100%); }
::view-transition-old(igPiece),
::view-transition-new(igPiece) { animation-duration:.52s; animation-timing-function:cubic-bezier(.76,0,.24,1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .cmp--auto { animation:wipe linear both; animation-timeline:view(); animation-range:entry 62% exit 38%; }
    @keyframes wipe {from{--x:7%} to{--x:93%}}
  }
}
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
}
@media (max-width:1100px) {
  .cov-mid { max-width:78%; }
  .reel { --rh:clamp(240px,36vh,360px); }
  #sea { grid-template-columns:repeat(2,1fr); opacity:.6; -webkit-mask-image:linear-gradient(90deg, transparent 8%, rgba(0,0,0,.3) 45%, #000 85%); mask-image:linear-gradient(90deg, transparent 8%, rgba(0,0,0,.3) 45%, #000 85%); }
  .sea-c { display:none; }
  .ov-r { grid-template-columns:1fr; gap:12px 0; width:auto; }
  .colo { grid-template-columns:1fr; gap:14px 0; width:auto; }
}
@media (max-width:820px) {
  .reel { --rh:clamp(250px,78vw,360px); --pcmax:clamp(300px,96vw,430px); }
  .reel-pin { overflow:visible; scroll-snap-type:none; }
  .reel-tr { flex-direction:column; align-items:center; width:auto; gap:clamp(30px,7vw,46px); padding:0; }
  .reel .pc { width:min(100%, calc(var(--pcmax,400px) * var(--ar,1.5))); }
  .reel .pc-fr,
  .reel .cmp,
  .reel .dev,
  .reel .flip-fr { height:auto; aspect-ratio:var(--ar,1.5); }
  .reel .pc-fr img,
  .reel .cmp img,
  .reel .flip-fr img { width:100%; height:100%; object-fit:contain; }
  .reel .pc:has(.phone) { width:calc(var(--rh) * .54); }
  .reel .phone { max-width:none; margin:0 auto; }
  .reel-cue { display:none; }
  .reel .tag { min-height:0; }
  .dv .pc-fr,
  .dv .dev,
  .dv .cmp,
  .dv .flip-fr,
  .dv .phone { clip-path:none; transition:none; }
  .dv img,
  .dv video { transform:none; transition:none; }
  .dv .tag { opacity:1; transform:none; transition:none; }
  .dv { opacity:0; transition:opacity .55s var(--ease); }
  .dv.in { opacity:1; }
  .act--dark .dv .dev,
  .act--dark .dv.in .dev { filter:none; transition:none; }
  #hud { display:none; }
  .ov-n { display:none; }
  .pc-w .cm,
  .pc-w .cm2 { display:none; }
  .act--dark::before { display:none; }
  .cov { padding:calc(clamp(78px,18vw,104px) + env(safe-area-inset-top)) var(--gut) 0; min-height:auto; }
  #sea { opacity:.42; }
  .cov > .wrap { text-align:center; }
  .cov-top { order:1; flex-wrap:wrap; justify-content:center; gap:5px 16px; padding-bottom:12px; }
  .cov-name { order:2; margin-bottom:clamp(18px,4vh,30px); }
  .cov-mid { order:3; max-width:100%; flex:0 0 auto; align-items:center; padding:0 0 clamp(24px,5vh,44px); }
  .cov-kick { justify-content:center; letter-spacing:.3em; font-size:10.5px; }
  .cov .lead { max-width:34ch; margin:18px auto 0; font-size:14.5px; }
  .cov-foot { order:4; flex-direction:column; align-items:center; gap:16px; padding-bottom:calc(34px + env(safe-area-inset-bottom)); }
  .cov-idx { display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; width:100%; max-width:360px; }
  .cov-idx a { justify-content:flex-start; font-size:9.5px; letter-spacing:1.4px; padding-bottom:0; gap:7px; }
  .cov-run { display:none; }
  .act { scroll-margin-top:calc(72px + env(safe-area-inset-top)); }
  html { scroll-behavior:auto; }
  .backlink { margin-left:auto; margin-right:auto; }
  .ov { text-align:center; margin-bottom:clamp(34px,6vh,54px); }
  .ov .eyebrow { justify-content:center; }
  .ov-l { margin-left:auto; margin-right:auto; }
  .ov-r { justify-items:center; }
  .out { text-align:center; }
  .out .lead,
  .legal { margin-left:auto; margin-right:auto; }
  .out-go { justify-content:center; }
  .colo { justify-items:center; margin-left:auto; margin-right:auto; }
}
@media (max-width:560px) {
  .cov-name { font-size:clamp(40px,13.4vw,64px); }
  .cov-idx { gap:6px 12px; max-width:none; }
  .cov-idx a { font-size:9px; letter-spacing:1.2px; gap:6px; }
  #lb .lb-p,
  #lb .lb-s { display:none; }
  #lb .lb-cap { flex-direction:column; align-items:flex-start; gap:7px; }
}
@media (hover:none) {
  .pc .tag .tm { opacity:1; transform:none; }
  .pc:hover .tag::before { width:0; }
  .pc:hover .cm::before,
  .pc:hover .cm::after,
  .pc:hover .cm2::before,
  .pc:hover .cm2::after { border-color:var(--line-2); }
  .pc:hover .cm,
  .pc:hover .cm2 { inset:-9px; }
  .pc:hover .pc-fr::before,
  .pc:hover .dev::before { animation:none; }
}
@media (prefers-reduced-motion:reduce) {
  .dv .pc-fr,
  .dv .dev,
  .dv .cmp,
  .dv .flip-fr,
  .dv .phone { clip-path:none; }
  .dv img,
  .dv video,
  .dv .tag { transform:none; opacity:1; transition:none; }
  .act--dark .dv .dev { filter:none; transition:none; }
  .pc[data-full]:hover .pc-fr img,
  .pc[data-full]:hover .dev img { transform:none; }
  #sea.run .sea-a,
  #sea.run .sea-b,
  #sea.run .sea-c,
  .phone.run .ph-scr img { animation:none; }
  .ph-scr { overflow-y:auto; }
  #lb .lb-im img { animation:none; }
  .cov-kick i,
  .dev--tv .tvb i { animation:none; }
  html.dev-go #dark { animation:none; clip-path:inset(0 0 100% 0); }
  html.dev-go .cov-mid,
  html.dev-go .cov-foot,
  html.dev-go #sea { animation:none; }
  .ov-h.rev { filter:none; letter-spacing:-.025em; }
  .ov::after { transform:scaleX(1); transition:none; }
  .ov::before { opacity:0; }
  .pc:hover .pc-fr::before,
  .pc:hover .dev::before { animation:none; }
}