@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/InstrumentSans-latin.woff2") format("woff2"); }
@font-face{ font-family:"Lora"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/Lora-latin.woff2") format("woff2"); }
:root{
  --base:        #F2F3F7;
  --surface:     #FFFFFF;
  --surface-sub: #E9EBF2;
  --ink:         #0B1226;
  --ink-body:    #333C5C;
  --muted:       #5A6486;
  --accent:      #7E611A;
  --accent-lift: #C9A96A;
  --accent-wash: rgba(201,169,106,.16);
  --accent-line: rgba(126,97,26,.36);
  --line:      rgba(11,18,38,.13);
  --line-soft: rgba(11,18,38,.07);
  --shadow-sm: 0 1px 2px rgba(11,18,38,.05), 0 2px 8px rgba(11,18,38,.04);
  --shadow-md: 0 2px 4px rgba(11,18,38,.05), 0 12px 32px rgba(11,18,38,.08);
  --font-display:"Lora", Georgia, "Times New Roman", serif;
  --font-body:   "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:   "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 132px;
  --nav-h: 72px;
  --wrap:  1180px;
  --read:  720px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  margin:0; background:var(--base); color:var(--ink-body);
  font-family:var(--font-body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
main{ overflow-x:clip; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(58,74,140,.10), transparent 62%),
    radial-gradient(680px 460px at 94% 4%, rgba(201,169,106,.13), transparent 60%);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-lift); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--s-3); position:relative; z-index:1; }
.read{ max-width:var(--read); }
.skip{
  position:fixed; top:12px; left:12px; z-index:100;
  padding:10px 16px; border-radius:999px;
  background:var(--ink); color:var(--base); font-size:14px; font-weight:500;
  transform:translateY(calc(-100% - 24px)); transition:transform .2s var(--ease);
}
.skip:focus{ transform:none; }
main:focus{ outline:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--ink); letter-spacing:-.02em; line-height:1.08; }
p{ margin:0; }
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px;
}
.js [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); background:rgba(242,243,247,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck{ background:rgba(242,243,247,.82); border-bottom-color:var(--line-soft); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:var(--s-3); }
.mark{ display:flex; align-items:baseline; gap:9px; font-family:var(--font-body); font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.mark span{ font-family:var(--font-mono); font-size:10.5px; font-weight:400; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.nav__back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .25s var(--ease);
}
.nav__back:hover{ color:var(--ink); }
.nav__back i{ font-style:normal; transition:transform .3s var(--ease); }
.nav__back:hover i{ transform:translateX(-3px); }
.chero{ padding:calc(var(--nav-h) + var(--s-7)) 0 var(--s-6); }
.chero__title{ font-size:clamp(40px,7vw,86px); letter-spacing:-.035em; margin-top:var(--s-2); }
.chero__sub{
  font-family:var(--font-display); font-weight:500; color:var(--muted);
  font-size:clamp(19px,2.4vw,27px); letter-spacing:-.02em; line-height:1.25;
  max-width:22ch; margin-top:var(--s-2);
}
.chero__lede{ color:var(--muted); font-size:clamp(16px,1.5vw,18.5px); line-height:1.65; max-width:58ch; margin-top:var(--s-4); }
.chero--404{ min-height:calc(100svh - 90px); display:flex; align-items:center; }
.chero--404 .chero__lede a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; transition:text-decoration-color .25s var(--ease); }
.chero--404 .chero__lede a:hover{ text-decoration-color:var(--ink); }
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  margin-top:var(--s-6);
}
.fact{ padding:var(--s-3) var(--s-3) var(--s-4) var(--s-3); border-right:1px solid var(--line-soft); }
.fact:first-child{ padding-left:0; }
.fact:last-child{ border-right:0; }
.fact__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.fact__v{ color:var(--ink); font-size:15px; margin-top:9px; }
.fact__v span{ display:block; color:var(--muted); font-size:13.5px; margin-top:3px; }
.sec{ padding:var(--s-7) 0; }
.sec--tight{ padding:var(--s-6) 0; }
.sec__n{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-2);
}
.sec h2{ font-size:clamp(26px,3.4vw,40px); }
.sec h3{ font-size:clamp(19px,2vw,23px); margin-top:var(--s-5); }
.sec p + p{ margin-top:var(--s-2); }
.sec .read > * + *{ margin-top:var(--s-3); }
.sec p{ color:var(--ink-body); }
.bullets{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.bullets li{ position:relative; padding-left:20px; color:var(--ink-body); }
.bullets li::before{
  content:""; position:absolute; left:0; top:11px;
  width:8px; height:1px; background:var(--accent-line);
}
.shot{
  margin-top:var(--s-4); border:1px solid var(--line); border-radius:14px;
  background:var(--surface-sub); overflow:hidden; box-shadow:var(--shadow-sm);
}
.shot img{ width:100%; height:auto; }
.shot__ph{
  aspect-ratio:16/10; display:grid; place-items:center; padding:var(--s-4);
  background:
    repeating-linear-gradient(45deg, rgba(11,18,38,.035) 0 1px, transparent 1px 10px),
    var(--surface-sub);
}
.shot__ph span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-align:center; max-width:44ch; line-height:1.7;
}
.shot--wide .shot__ph{ aspect-ratio:21/9; }
.cap{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:12px;
}
.cap + .read, .grid2 + .read, .works + .read, .flaws + .read{ margin-top:var(--s-5); }
.clients__track{ display:flex; width:max-content; animation:clients-run 50s linear infinite; }
.clients__set{ display:flex; gap:var(--clients-gap); padding:0 var(--clients-gap) 0 0; margin:0; list-style:none; }
.clients__set img{ display:block; width:auto; height:66px; }
@keyframes clients-run{ to{ transform:translateX(-50%); } }
.clients{
  --clients-gap:22px;
  margin-top:var(--s-5); display:grid; gap:18px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.clients .clients__row:nth-child(2) .clients__track{ animation-duration:46s; animation-direction:reverse; }
.clients .clients__row:nth-child(3) .clients__track{ animation-duration:46s; }
.wf{ margin:var(--s-5) 0 0; padding:var(--s-4) var(--s-4) var(--s-3); }
.wf__head, .wf__step, .wf__lines{
  display:grid; grid-template-columns:32px repeat(3, minmax(0,1fr)); column-gap:var(--s-2);
}
.wf__head span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding-bottom:var(--s-2);
}
.wf__body{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.wf__lines{ position:absolute; inset:0; pointer-events:none; }
.wf__lines span + span{ background:linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat; }
.wf__step{ position:relative; align-items:center; }
.wf__n{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--muted);
  justify-self:center; position:relative; z-index:1; padding:4px 0; background:var(--surface-sub);
  transition:color .4s var(--ease);
}
.wf__rail{ position:absolute; left:15.5px; width:1px; background:var(--line); pointer-events:none; }
.wf__rail i{ position:absolute; inset:0; display:block; background:var(--accent); transform:scaleY(0); transform-origin:top; }
.wf:not(.wf--live) .wf__rail{ display:none; }
.wf--live .wf__card{ transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.wf--live .wf__step:not(.is-on) .wf__card{ opacity:.3; transform:translateY(8px); }
.wf--live .wf__step.is-on .wf__n{ color:var(--accent); }
.wf--live .wf__step.is-current .wf__card:not(.wf__card--alt){ box-shadow:var(--shadow-md); border-color:var(--accent-line); }
.wf__card{
  grid-row:1; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; box-shadow:var(--shadow-sm); display:grid; gap:1px;
}
.wf__card--client{ grid-column:2; }
.wf__card--me{ grid-column:3; border-left:2px solid var(--accent-lift); }
.wf__card--team{ grid-column:4; }
.wf__card b{ font-weight:600; font-size:14px; color:var(--ink); }
.wf__card--alt{
  background:var(--surface-sub); box-shadow:none; border:1px dashed var(--line); border-left:2px dashed var(--accent-line);
}
.wf__card--alt span{ color:var(--muted); }
.wf__step .wf__card{ align-self:stretch; }
.wf__card--alt{ align-content:center; }
.wf__card span{ font-size:12.5px; line-height:1.4; color:var(--ink-body); }
.wf__foot{
  margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line-soft);
  font-size:13.5px; line-height:1.55; color:var(--ink-body);
}
.wf__foot p{ margin:0; max-width:72ch; }
.wf__k{
  margin-top:var(--s-3) !important; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.wf__board{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.wf__board li{
  position:relative; font-size:12.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px;
}
.wf__board li:not(:last-child)::after{
  content:"\2192"; position:absolute; right:-17px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:12px;
}
.wf__aside{ margin-top:8px !important; font-size:12.5px; color:var(--muted); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.rl{ margin:var(--s-5) 0 0; padding:var(--s-4); --rl-h:440px; }
.rl__defs{ position:absolute; width:0; height:0; overflow:hidden; }
.rl__grid{ display:grid; grid-template-columns:minmax(0,.82fr) 56px minmax(0,1.38fr); align-items:center; }
.rl__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; container-type:inline-size; }
.rl__item{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
}
.rl__item.is-on{ border-color:var(--accent-line); border-left:2px solid var(--accent-lift); box-shadow:var(--shadow-md); }
.rl__btn{
  display:block; width:100%; margin:0; padding:11px 16px; border:0; background:none; border-radius:12px;
  font:inherit; font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); text-align:center; cursor:pointer;
}
.rl__item.is-on .rl__btn{ font-size:17px; padding-top:16px; padding-bottom:12px; }
.rl__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rl__in{
  list-style:none; margin:0; padding:0 16px 14px; display:none; box-sizing:border-box;
  grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px 14px;
}
.rl__item.is-on .rl__in{ display:grid; }
.rl__in li{ display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; line-height:1.3; color:var(--ink-body); }
.rl__in svg{ flex:none; width:17px; height:13px; color:var(--ink); }
@container (max-width:340px){ .rl__in{ grid-template-columns:minmax(0,1fr); gap:6px; } }
.rl--live .rl__drum{
  position:relative; height:var(--rl-h); overflow:hidden; cursor:grab; touch-action:pan-y;
}
.rl--live .rl__drum::before, .rl--live .rl__drum::after{
  content:""; position:absolute; left:0; right:0; height:16%; z-index:20; pointer-events:none;
}
.rl--live .rl__drum::before{ top:0; background:linear-gradient(var(--surface-sub), rgba(233,235,242,0)); }
.rl--live .rl__drum::after{ bottom:0; background:linear-gradient(rgba(233,235,242,0), var(--surface-sub)); }
.rl--live .rl__drum.is-drag{ cursor:grabbing; }
.rl--live .rl__list{ display:block; position:relative; height:100%; }
.rl--live .rl__item{
  position:absolute; left:5%; right:5%; top:50%;
  transform:translateY(calc(var(--y, 0px) - 50%)) scale(var(--sc, 1)); opacity:var(--o, 1);
  transition:transform .55s var(--ease), opacity .55s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.rl--live .rl__item.no-tr{ transition:none; }
.rl--live .rl__in{ display:grid; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease), opacity .3s var(--ease); }
.rl--live .rl__item:not(.is-on) .rl__in{ padding-bottom:0; }
.rl--live .rl__item.is-on .rl__in{ padding-bottom:28px; max-height:360px; opacity:1; transition:max-height .45s var(--ease), opacity .35s var(--ease) .15s; }
.rl__arrow{ position:relative; align-self:stretch; }
.rl__arrow::before{
  content:""; position:absolute; left:10px; right:10px; top:50%; height:2px; margin-top:-1px;
  background:radial-gradient(circle, rgba(11,18,38,.28) .9px, transparent 1.3px) 0 50% / 6px 2px repeat-x;
}
.rl__arrow i{
  position:absolute; left:8px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 4px rgba(11,18,38,.08); opacity:0;
}
.rl.is-run .rl__arrow i{ animation:rl-dot .6s var(--ease) .35s both; }
@keyframes rl-dot{ 0%{ opacity:0; transform:translateX(0); } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ opacity:0; transform:translateX(34px); } }
.rl__stage{
  display:grid; grid-template-rows:auto auto; overflow:hidden;
  background:var(--base); border:1px solid var(--line); border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(11,18,38,.04);
}
.rl__canvas{
  display:grid; place-items:center; aspect-ratio:16/10.5; padding:3% 4%; box-sizing:border-box;
  background:radial-gradient(rgba(11,18,38,.09) 1px, transparent 1.2px) 8px 8px / 16px 16px;
}
.rl__sk{ grid-area:1 / 1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; }
.rl__sk.is-on{ display:flex; }
.rl__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; min-height:28px;
  padding:10px 14px; border-top:1px solid var(--line-soft); background:rgba(255,255,255,.55);
}
.rl__file{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); }
.rl__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rl__chip{
  display:none; align-items:center; padding:4px 10px; border-radius:999px; background:var(--ink); color:var(--surface);
  font-family:var(--font-mono); font-size:11px; line-height:18px; letter-spacing:.04em;
}
.rl__chip.is-on{ display:inline-flex; }
.rl__chip--hand{ background:transparent; color:var(--ink-body); border:1px dashed var(--line); padding:3px 10px; }
.rl--live .rl__chip.is-on{ animation:rl-in .35s var(--ease) both; animation-delay:calc(2.3s + var(--i, 0) * 90ms); }
.sk-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.sk-line rect{ fill:none; stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1 1; opacity:0; }
.rl--live .rl__sk.is-on .sk-line rect{ animation:rl-draw .9s var(--ease) .45s both; }
.rl--live .rl__sk.is-on .rl__page{ animation:rl-fill .45s var(--ease) 1.05s both; }
.rl--live .rl__sk.is-on .s, .rl--live .rl__sk.is-on .sk-bar, .rl--live .rl__sk.is-on .sk-mail, .rl--live .rl__sk.is-on .sk-crop{
  animation:rl-in .4s var(--ease) both; animation-delay:calc(1.3s + var(--d, 0) * 100ms);
}
@keyframes rl-draw{ 0%{ stroke-dashoffset:1; opacity:1; } 70%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes rl-fill{ from{ background-color:transparent; box-shadow:0 0 0 rgba(11,18,38,0); } }
@keyframes rl-in{ from{ opacity:0; transform:translateY(5px); } }
.rl__page{
  position:relative; box-sizing:border-box; flex:none; overflow:hidden;
  background:var(--surface); border-radius:6px; box-shadow:0 1px 2px rgba(11,18,38,.06), 0 8px 22px rgba(11,18,38,.10);
}
.rl__page--deck{ width:90%; aspect-ratio:16/9; }
.rl__page--site{ width:94%; aspect-ratio:16/10; border-radius:10px; }
.rl__page--a4{ height:92%; aspect-ratio:1/1.414; }
.rl__page--email{ height:92%; aspect-ratio:3/3.9; border-radius:10px; }
.rl__page--print{ height:78%; aspect-ratio:1/1.414; overflow:visible; border-radius:0; margin:12px 0 18px; outline:1px solid var(--line); }
.rl__page--stack{
  box-shadow:10px -10px 0 -1px var(--surface), 10px -10px 0 0 var(--line),
             20px -20px 0 -2px var(--surface), 20px -20px 0 -1px var(--line),
             0 8px 22px rgba(11,18,38,.10);
}
.rl__page--print .sk-line{ inset:0; }
.s{ display:block; }
.s.a{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); border-radius:999px; }
.k-ink{ background:var(--ink); }
.k-ink2{ background:#3D4562; }
.k-mid{ background:#C6CCD8; }
.k-sub{ background:#DFE3EB; }
.k-sub2{ background:var(--surface-sub); }
.k-w{ background:#fff; }
.k-line{ background:var(--line); }
.k-table{
  border:1px solid var(--line); background:
    linear-gradient(var(--line), var(--line)) 0 33.3% / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 66.6% / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 38% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 70% 0 / 1px 100% no-repeat,
    linear-gradient(var(--surface-sub), var(--surface-sub)) 0 0 / 100% 33.3% no-repeat;
}
.k-cmyk{ background:linear-gradient(90deg, #00A3E0 0 25%, #E6007E 25% 50%, #FFE600 50% 75%, #1A1A1A 75%); border-radius:0; }
.k-reg{
  aspect-ratio:1; height:auto !important; border:1px solid var(--ink); border-radius:50%; background:
    linear-gradient(var(--ink), var(--ink)) center / 140% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 140% no-repeat;
}
.k-qr{ background:repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 34% 34%; border:2px solid var(--ink); box-sizing:border-box; border-radius:2px !important; }
.o-ring{ aspect-ratio:1; height:auto !important; border-radius:50% !important; background:none; border:1.5px solid #C6CCD8; box-sizing:border-box; }
.o-ring--ink{ border-color:var(--ink); }
.o-line{ background:none; border:1.2px solid var(--ink); box-sizing:border-box; }
.o-dash{ background:none; border:1px dashed rgba(11,18,38,.4); border-radius:0; }
.r-pill{ border-radius:999px !important; }
.r-circle{ aspect-ratio:1; height:auto !important; border-radius:50% !important; }
.sq{ aspect-ratio:1; height:auto !important; }
.r-0{ border-radius:0 !important; }
.r-8{ border-radius:8px !important; }
.r-6{ border-radius:6px !important; }
.r-bar{ border-radius:3px 3px 1px 1px !important; }
.r-4{ border-radius:4px !important; }
.r-3{ border-radius:3px !important; }
.sh{ box-shadow:0 4px 12px rgba(11,18,38,.18); }
.o40{ opacity:.4; } .o50{ opacity:.5; } .o60{ opacity:.6; } .o70{ opacity:.7; } .o80{ opacity:.8; } .o85{ opacity:.85; }
.sk-bar{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:1.2%; width:100%; height:8%; padding:0 2.5%; box-sizing:border-box; background:var(--base); border-bottom:1px solid var(--line-soft); }
.sk-bar i{ width:1.4%; aspect-ratio:1; border-radius:50%; background:rgba(11,18,38,.16); }
.sk-bar b{ margin-left:3%; width:34%; height:36%; border-radius:999px; background:var(--surface); }
.sk-mail{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:4%; width:100%; height:12%; padding:0 6%; box-sizing:border-box; border-bottom:1px solid var(--line-soft); background:var(--base); }
.sk-mail > span{ display:grid; gap:5px; flex:1; }
.sk-ava{ display:block; width:9%; aspect-ratio:1; border-radius:50%; background:#C6CCD8; }
.sk-from{ display:block; width:30%; height:5px; border-radius:999px; background:var(--ink); opacity:.8; }
.sk-subj{ display:block; width:62%; height:4px; border-radius:999px; background:#DFE3EB; }
.sh-tee{
  aspect-ratio:1/1.05; height:auto !important; border-radius:0 !important;
  clip-path:polygon(32% 0, 40% 7%, 60% 7%, 68% 0, 100% 17%, 89% 37%, 79% 31%, 79% 100%, 21% 100%, 21% 31%, 11% 37%, 0 17%);
}
.sh-handle{ aspect-ratio:1; height:auto !important; border:2px solid #C6CCD8; border-bottom:0; border-radius:999px 999px 0 0 !important; background:none; box-sizing:border-box; }
.o-box{ background:#fff; border:1.5px solid var(--ink); box-sizing:border-box; }
.r-2{ border-radius:2px !important; }
.mk-under{ height:0 !important; border-bottom:1.5px dotted var(--ink); border-radius:0 !important; }
.rl__page--proof{ overflow:visible; margin-right:38%; }
.k-hl{ background:rgba(11,18,38,.08); }
.o-tick{ background:none; border:1.3px solid var(--ink); box-sizing:border-box; position:absolute; }
.o-tick::after{ content:""; position:absolute; left:28%; top:22%; width:26%; height:42%; border:solid var(--ink); border-width:0 1.3px 1.3px 0; transform:rotate(45deg); }
.sk-guides{ position:absolute; inset:0; pointer-events:none; opacity:0; }
.rl--live.is-run .rl__sk.is-on .sk-guides{ animation:rl-guide 2s var(--ease) 1.1s both; }
.g{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); box-sizing:border-box; }
.g-box{ border:1px dashed rgba(11,18,38,.45); }
.g-cols{ background:repeating-linear-gradient(90deg, rgba(11,18,38,.07) 0 6.6%, transparent 6.6% 8.333%); }
.g-h{ height:0 !important; border-top:1px dashed rgba(11,18,38,.45); }
.g-v{ width:0 !important; border-left:1px dashed rgba(11,18,38,.45); }
.g-v--c{ border-color:rgba(11,18,38,.25); }
@keyframes rl-guide{ 0%{ opacity:0; } 18%{ opacity:1; } 72%{ opacity:1; } 100%{ opacity:0; } }
.rl--live .rl__item.is-on::after, .rl--live .rl__item.is-on::before{
  content:""; position:absolute; left:16px; right:16px; bottom:12px; height:2px; border-radius:2px;
}
.rl--live .rl__item.is-on::after{ background:var(--line-soft); }
.rl--live .rl__item.is-on::before{ z-index:1; background:rgba(11,18,38,.35); transform:scaleX(0); transform-origin:left; will-change:transform; backface-visibility:hidden; }
.rl--live.is-tick .rl__item.is-on::before{ animation:rl-prog var(--rl-t, 5200ms) linear both; }
@keyframes rl-prog{ to{ transform:scaleX(1); } }
.sk-crop{
  position:absolute; inset:-9px; pointer-events:none; --c:var(--muted); background:
    linear-gradient(var(--c), var(--c)) 0 9px / 6px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 9px 0 / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 9px / 6px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 9px) 0 / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - 9px) / 6px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 9px 100% / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - 9px) / 6px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 9px) 100% / 1px 6px no-repeat;
}
@media (max-width:760px){
  .rl{ padding:var(--s-3) var(--s-2) var(--s-2); --rl-h:330px; }
  .rl__canvas{ aspect-ratio:4/3.6; }
  .rl__page--stack{
    box-shadow:5px -5px 0 -1px var(--surface), 5px -5px 0 0 var(--line),
               10px -10px 0 -2px var(--surface), 10px -10px 0 -1px var(--line),
               0 6px 16px rgba(11,18,38,.10);
  }
  .rl__grid{ grid-template-columns:minmax(0,1fr); }
  .rl__arrow{ height:44px; }
  .rl__arrow::before{
    left:50%; right:auto; top:8px; bottom:8px; width:2px; height:auto; margin:0 0 0 -1px;
    background:radial-gradient(circle, rgba(11,18,38,.28) .9px, transparent 1.3px) 50% 0 / 2px 6px repeat-y;
  }
  .rl__arrow i{ left:50%; top:6px; margin:0 0 0 -3px; }
  .rl.is-run .rl__arrow i{ animation-name:rl-dot-y; }
  .rl__btn{ font-size:14px; padding:10px 12px; }
  .rl__item.is-on .rl__btn{ font-size:15px; }
  .rl__in{ padding:0 12px 12px; gap:6px 10px; }
  .rl__in li{ font-size:12px; }
}
@keyframes rl-dot-y{ 0%{ opacity:0; transform:translateY(0); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateY(26px); } }
@media (prefers-reduced-motion:reduce){
  .rl .s, .rl .rl__page, .rl .rl__chip, .rl .rl__arrow i, .rl .sk-line rect, .rl .sk-bar, .rl .sk-mail, .rl .sk-crop{ animation:none !important; }
  .rl--live .rl__item, .rl--live .rl__in, .rl--live .rl__item.is-on .rl__in{ transition:none; }
  .rl .sk-guides{ animation:none !important; }
  .rl--live .rl__item.is-on::before, .rl--live .rl__item.is-on::after{ display:none; }
}
.cl{
  margin:var(--s-5) 0 0; padding:var(--s-5) var(--s-4); background:#FFDD2D; border-color:rgba(11,18,38,.08);
  display:grid; place-items:center;
}
.cl__win{
  width:100%; max-width:980px; background:var(--surface); border-radius:12px;
  box-shadow:0 2px 4px rgba(11,18,38,.06), 0 18px 40px rgba(11,18,38,.14); overflow:hidden;
}
.cl__bar{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); background:var(--base);
}
.cl__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(11,18,38,.14); }
.cl__bar span{
  margin-left:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink);
}
.cl__body{ position:relative; }
.cl__tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:18px 24px 0; }
.cl__tab{
  font:500 12.5px/1 var(--font-body); color:var(--ink-body); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cl__tab:hover{ border-color:var(--muted); }
.cl__tab[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cl__tab:focus-visible, .cl__send:focus-visible, .cl__again:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cl__panels{ display:grid; }
.cl--live .cl__panel{ grid-area:1 / 1; visibility:hidden; }
.cl--live .cl__panel.is-active{ visibility:visible; }
.cl:not(.cl--live) .cl__tabs, .cl:not(.cl--live) .cl__send{ display:none; }
.cl__cols{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-3) var(--s-3);
  padding:20px 24px 4px; align-items:start;
}
@media (max-width:1000px){ .cl__cols{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cl__grp{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:5px; }
.cl__k{
  padding:0; margin:0 0 6px; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.cl__item{
  position:relative; display:flex; gap:8px; align-items:flex-start; cursor:pointer;
  font-size:12.5px; line-height:1.4; color:var(--ink);
}
.cl__item input{ position:absolute; opacity:0; width:16px; height:16px; margin:0; pointer-events:none; }
.cl__box{
  flex:none; width:16px; height:16px; margin-top:1px; border-radius:4px; display:grid; place-items:center;
  border:1.5px solid var(--line); background:var(--surface);
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.cl__item:active .cl__box{ transform:scale(.88); }
.cl__box{ --pop:cubic-bezier(.34,1.56,.64,1); }
.cl__box::after{
  content:""; width:4px; height:8px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0; border-radius:0 0 1px 0;
  opacity:0; transform:rotate(45deg) scale(0);
  transition:opacity .15s var(--ease), transform .32s var(--pop);
}
.cl__item:hover .cl__box{ border-color:var(--muted); }
.cl__item input:checked + .cl__box{ background:var(--ink); border-color:var(--ink); }
.cl__item input:checked + .cl__box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.cl__item input:focus-visible + .cl__box{ outline:2px solid var(--accent); outline-offset:2px; }
.cl__item input:not(:checked) ~ span:last-child{ color:var(--ink-body); }
.cl__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px; padding:14px 24px 18px; border-top:1px solid var(--line-soft);
}
.cl__status{ margin:0; font-size:13px; color:var(--muted); }
.cl__status b{ font-weight:600; color:var(--ink); }
.cl__send{
  flex:none; font:600 13.5px/1 var(--font-body); color:#fff; background:var(--ink);
  border:1px solid var(--ink); border-radius:999px; padding:11px 20px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cl__send:not(:disabled):hover{ background:#1B2440; }
.cl__send:disabled{ background:var(--surface-sub); color:var(--muted); border-color:var(--line); cursor:not-allowed; }
.cl__done{
  --ok:#1E9E5A; --pop:cubic-bezier(.34,1.56,.64,1);
  position:absolute; inset:0; background:var(--surface); display:grid; place-content:center;
  justify-items:center; text-align:center; gap:6px; padding:24px;
  animation:cl-fade .35s var(--ease) both;
}
.cl__done[hidden]{ display:none; }
.cl__mark{ width:68px; height:68px; overflow:visible; }
.cl__mark circle{ transform-origin:32px 32px; transform-box:view-box; }
.cl__disc{ fill:var(--ok); animation:cl-disc .55s var(--pop) .1s both; }
.cl__ring{ fill:none; stroke:var(--ok); stroke-width:2; opacity:0; animation:cl-ring 1s var(--ease) .45s both; }
.cl__mark path{
  fill:none; stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:cl-draw .45s cubic-bezier(.65,0,.35,1) .45s forwards;
}
.cl__done-t{
  margin:14px 0 0; font-family:var(--font-display); font-size:26px; font-weight:500; color:var(--ink); outline:0;
  animation:cl-rise .5s var(--ease) .7s both;
}
.cl__again{
  margin-top:12px; font:500 13px/1 var(--font-body); color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:border-color .2s var(--ease);
  animation:cl-rise .5s var(--ease) .82s both;
}
.cl__again:hover{ border-color:var(--muted); }
@keyframes cl-fade{ from{ opacity:0; } }
@keyframes cl-disc{ from{ transform:scale(.4); opacity:0; } }
@keyframes cl-ring{ from{ opacity:.55; transform:scale(1); } to{ opacity:0; transform:scale(1.55); } }
@keyframes cl-draw{ to{ stroke-dashoffset:0; } }
@keyframes cl-rise{ from{ opacity:0; transform:translateY(8px); } }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:var(--s-4); }
.grid2 .shot{ margin-top:0; }
.flaws{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap:14px; margin-top:var(--s-4);
  grid-template-areas:"a m b" "c m d";
}
.flaws .shot{ margin:0; background:var(--surface); }
.flaws .shot:nth-child(2){ grid-area:a; }
.flaws .shot:nth-child(3){ grid-area:b; }
.flaws .shot:nth-child(4){ grid-area:c; }
.flaws .shot:nth-child(5){ grid-area:d; }
.flaws__mark{ grid-area:m; display:grid; place-items:center; padding:var(--s-4); }
.js .flaws .shot:nth-child(even)[data-reveal]:not(.is-in){ transform:translateX(-48px); }
.js .flaws .shot:nth-child(odd):not(.flaws__mark)[data-reveal]:not(.is-in){ transform:translateX(48px); }
.flaws .shot svg{ display:block; width:100%; height:auto; }
.flaws .note{ stroke-dasharray:1; transition:stroke-dashoffset 1s cubic-bezier(.45,0,.25,1), opacity .6s var(--ease); }
.flaws .note--long{ transition-duration:1.5s, .4s; }
.flaws .shot:not(.is-drawn) .note{ stroke-dashoffset:1; opacity:0; }
.flaws figcaption{
  padding:9px 12px 10px; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
[data-draw] svg{ display:block; width:100%; height:auto; }
.icons{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:dense; gap:14px; margin-top:var(--s-4); }
.icons i{ display:grid; place-items:center; overflow:hidden; aspect-ratio:4/5; padding:8%; border:1px solid var(--line); border-radius:14px; background:var(--base); box-shadow:var(--shadow-sm); }
.icons img{ display:block; width:100%; height:auto; transition:transform .35s var(--ease); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .icons i:not(.icons__big):hover img{ transform:perspective(420px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.1); }
}
.icons .icons__big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; padding:0; }
.icons__big img{ height:100%; object-fit:cover; }
.bento{ display:flex; flex-direction:column; gap:14px; margin-top:var(--s-4); }
.bento__row{ display:flex; gap:14px; }
.bento__set{ display:contents; }
.bento .shot{ flex:var(--r) 1 0px; min-width:0; aspect-ratio:var(--r); margin:0; }
.bento .shot img{ height:100%; object-fit:cover; }
[data-avflow] svg{ display:block; width:100%; height:100%; }
[data-avflow="type"] .av-l{ will-change:transform; }
.devs{ position:relative; container-type:inline-size; aspect-ratio:16/10; }
.devs__pc{
  position:absolute; left:6.5%; top:7%; width:72%; height:100%; overflow:hidden;
  border-radius:12px 12px 0 0; background:var(--surface);
  box-shadow:0 2px 4px rgba(11,18,38,.06), 0 18px 40px rgba(11,18,38,.14);
}
.devs--solo .devs__pc{ left:14%; }
.devs--rise .devs__pc, .devs--rise .devs__phone{ will-change:transform; }
.devs__bar{ position:relative; z-index:1; display:flex; align-items:center; gap:.55cqw; padding:.95cqw 1.25cqw; border-bottom:1px solid var(--line-soft); background:var(--base); }
.devs__bar i{ width:.8cqw; height:.8cqw; border-radius:50%; background:rgba(11,18,38,.14); }
.devs__phone{
  position:absolute; left:68.5%; top:18%; width:26.5%; height:100%;
  border-radius:4.5cqw; background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 2px 4px rgba(11,18,38,.06), 0 18px 40px rgba(11,18,38,.14);
}
.devs__phone::before, .devs__phone::after{ content:""; position:absolute; width:.2cqw; }
.devs__phone::before{ right:-.2cqw; top:13cqw; height:6.4cqw; border-radius:0 1px 1px 0; background:#DDE0E6; }
.devs__phone::after{ left:-.2cqw; top:8.2cqw; height:13.8cqw; border-radius:1px 0 0 1px; background:linear-gradient(#DDE0E6 0 2.4cqw, transparent 0 4.2cqw, #DDE0E6 0 8.6cqw, transparent 0 9.4cqw, #DDE0E6 0); }
.devs__screen{ position:absolute; inset:.62cqw; overflow:hidden; border-radius:3.88cqw; background:var(--surface); box-shadow:0 0 0 1px var(--line-soft); }
.devs__status{ position:relative; z-index:1; background:var(--surface); display:flex; align-items:center; justify-content:space-between; height:3.9cqw; padding:0 8% 0 13%; }
.devs__status b{ font:600 1.4cqw/1 var(--font-body); font-variant-numeric:tabular-nums; color:var(--ink); }
.devs__status i{ position:absolute; left:50%; top:.95cqw; width:30%; height:1.7cqw; transform:translateX(-50%); border-radius:999px; background:#1B1F2B; }
.devs__status span{ width:4.6cqw; height:1.28cqw; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' fill='%230B1226'%3E%3Crect y='6.5' width='2' height='3' rx='.6'/%3E%3Crect x='3' y='4.5' width='2' height='5' rx='.6'/%3E%3Crect x='6' y='2.5' width='2' height='7' rx='.6'/%3E%3Crect x='9' y='.5' width='2' height='9' rx='.6'/%3E%3Cg fill='none' stroke='%230B1226' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14.2 3.9a7.2 7.2 0 0 1 9.6 0'/%3E%3Cpath d='M16.2 6.1a4.2 4.2 0 0 1 5.6 0'/%3E%3C/g%3E%3Ccircle cx='19' cy='8.3' r='1.1'/%3E%3Crect x='26.4' y='1' width='8' height='8' rx='2.2' fill='none' stroke='%230B1226' stroke-width='.8' opacity='.45'/%3E%3Crect x='27.6' y='2.2' width='5.6' height='5.6' rx='1.2'/%3E%3Crect x='35' y='3.6' width='1' height='2.8' rx='.5' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; }
.modes{ margin-top:var(--s-4); }
.modes__bar{
  position:absolute; z-index:5; left:50%; bottom:clamp(12px, 3cqw, 28px); transform:translateX(-50%);
  display:inline-flex; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:var(--ink);
  box-shadow:0 2px 4px rgba(11,18,38,.08), 0 12px 32px rgba(11,18,38,.18);
}
.modes__bar[hidden]{ display:none; }
.modes__opt{
  font:500 13px/1 var(--font-body); color:rgba(255,255,255,.78); letter-spacing:.01em;
  padding:9px 16px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.modes__opt span{ color:rgba(255,255,255,.55); transition:color .25s var(--ease); }
.modes__opt:hover{ color:#fff; }
.modes__opt[aria-pressed="true"]{ background:#fff; color:var(--ink); }
.modes__opt[aria-pressed="true"] span{ color:var(--muted); }
.modes__opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.modes__stack{ position:relative; }
.modes__stack img{ display:block; width:100%; height:auto; }
.modes__stack .modes__b2c{ position:absolute; inset:0 0 auto; opacity:0; transition:opacity .5s var(--ease); }
.modes[data-mode="b2c"] .modes__b2c{ opacity:1; }
.modes__devs .devs__pc{ background:#E6ECF3; }
.modes__devs .devs__phone{ top:20.3%; }
.modes__screen{ background:#4A14BF; }
.modes__island{ position:absolute; z-index:4; left:50%; top:.95cqw; width:30%; height:1.7cqw; transform:translateX(-50%); border-radius:999px; background:#1B1F2B; }
@media (max-width:760px){ .modes__opt span{ display:none; } }
@media (prefers-reduced-motion:reduce){ .modes__stack .modes__b2c, .modes__opt, .modes__opt span{ transition:none; } }
.modes__thumb{ display:none; }
.modes.is-live .modes__stack img{ transition:none; }
.modes.is-live .modes__stack .modes__b2b{ position:relative; }
.modes__stack img.is-in{ z-index:2; opacity:1; }
.modes__stack img.is-out{ opacity:1; }
.modes__tap{
  position:absolute; z-index:3; left:0; top:0; width:4cqw; height:4cqw; margin:-2cqw 0 0 -2cqw;
  border-radius:50%; background:rgba(255,255,255,.32); pointer-events:none; opacity:0;
  box-shadow:0 0 0 .22cqw #fff, 0 .3cqw 1.2cqw rgba(11,18,38,.28);
}
.modes.is-live .modes__thumb{ display:block; position:absolute; z-index:0; top:3px; bottom:3px; left:0; border-radius:999px; background:#fff; }
.modes__thumb.is-moving{ transition:transform .45s var(--ease), width .45s var(--ease); }
.modes.is-live .modes__opt{ position:relative; z-index:1; }
.modes.is-live .modes__opt[aria-pressed="true"]{ background:transparent; }
.bk{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; margin-top:var(--s-4); --in:20px; --cap:41.1px; --gap:10px; }
.bk__cell{
  position:relative; overflow:hidden; container-type:inline-size; margin:0; min-width:0;
  border-radius:20px; background:var(--surface); box-shadow:var(--shadow-sm);
}
.bk__cap{
  position:absolute; z-index:3; left:0; top:0; right:0; padding:var(--in) var(--in) 0;
  font:400 13.5px/1.45 var(--font-body); color:var(--muted); max-width:44ch; pointer-events:none;
}
.bk__cap b{ display:block; margin-bottom:2px; font:600 15px/1.3 var(--font-body); color:var(--ink); }
.bk__logo{ grid-column:span 4; aspect-ratio:5/3; }
.bk__type{ grid-column:span 2; }
.bk__cast{ grid-column:span 2; }
.bk__pal{ grid-column:span 4; aspect-ratio:5/3; }
.bk__logo{ transition:background-color .6s var(--ease), color .6s var(--ease); background:#601DF1; color:#76E3CF; }
.bk__logo[data-ground="white"]{ background:var(--surface); color:#601DF1; }
.bk__logo[data-ground="mint"]{ background:#76E3CF; color:#601DF1; }
.bk__logo .bk__cap, .bk__logo .bk__cap b{ transition:color .6s var(--ease); }
.bk__logo[data-ground="violet"] .bk__cap{ color:rgba(255,255,255,.72); }
.bk__logo[data-ground="violet"] .bk__cap b{ color:#fff; }
.bk__logo[data-ground="mint"] .bk__cap{ color:rgba(23,6,60,.72); }
.bk__logo[data-ground="mint"] .bk__cap b{ color:#17063C; }
.bk__stage{ position:absolute; inset:0; display:grid; place-items:center; padding-top:6cqw; }
.bk__mark{ position:relative; width:30cqw; aspect-ratio:269.8/182.9; }
.bk__lg{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .5s var(--ease); }
.bk__logo[data-ground="white"] .bk__lg[data-ground="white"],
.bk__logo[data-ground="violet"] .bk__lg[data-ground="violet"],
.bk__logo[data-ground="mint"] .bk__lg[data-ground="mint"]{ opacity:1; }
.bk__grounds{ position:absolute; z-index:3; right:var(--in); bottom:var(--in); display:flex; gap:8px; }
.bk__grounds[hidden]{ display:none; }
.bk__grounds button{
  width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(11,18,38,.18); transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bk__grounds [data-ground="white"]{ background:#fff; }
.bk__grounds [data-ground="violet"]{ background:#601DF1; }
.bk__grounds [data-ground="mint"]{ background:#76E3CF; }
.bk__grounds [aria-pressed="true"]{ box-shadow:0 0 0 2px #17063C; }
.bk__grounds button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.bk__logo[data-ground="violet"] .bk__grounds button:focus-visible{ outline-color:#fff; }
.bk__aa{ position:absolute; left:8%; right:8%; top:24%; bottom:30%; display:grid; place-items:center; }
.bk__aa img, .bk__aa svg{ display:block; width:100%; height:100%; object-fit:contain; }
.bk__wname{ position:absolute; left:0; right:0; bottom:calc(var(--in) + 40px); margin:0; text-align:center; font:400 13px/1 var(--font-body); color:var(--muted); }
.bk__wname b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; margin-left:4px; }
.bk__weights{ position:absolute; left:var(--in); right:var(--in); bottom:var(--in); display:flex; justify-content:space-between; gap:2px; padding:3px; border-radius:999px; background:var(--base); }
.bk__weights[hidden]{ display:none; }
.bk__weights button{
  flex:1 1 0; min-width:0; padding:8px 0; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:500 12px/1 var(--font-body); color:var(--muted); font-variant-numeric:tabular-nums; transition:background .25s var(--ease), color .25s var(--ease);
}
.bk__weights button:hover{ color:var(--ink); }
.bk__weights button.is-on{ background:var(--ink); color:#fff; }
.bk__wthumb{ display:none; }
.bk.is-live .bk__wthumb{ display:block; position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 6); border-radius:999px; background:var(--ink); transform:translateX(calc(var(--wt, 0) * 100%)); }
.bk.is-live .bk__weights{ gap:0; }
.bk.is-live .bk__weights button{ position:relative; z-index:1; }
.bk.is-live .bk__weights button.is-on{ background:transparent; }
.bk__weights button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bk__type{ touch-action:pan-y; }
.bk.is-live .bk__type{ cursor:ew-resize; }
.bk__type .bk__weights{ cursor:auto; }
.bk__sw{ position:absolute; left:var(--in); right:var(--in); top:calc(var(--in) * 2 + var(--cap)); bottom:var(--in); display:flex; gap:var(--gap); }
.bk__sw button{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; padding:0; border:0; border-radius:14px; cursor:pointer;
  background:var(--c); color:#fff; text-align:left; transition:flex-grow .6s var(--ease);
}
.bk__sw button.is-lt{ color:#17063C; }
.bk__sw button.is-on{ flex-grow:4.2; }
.bk__sw span{
  position:absolute; left:clamp(10px,2.4cqw,18px); top:clamp(10px,2.4cqw,18px); white-space:nowrap;
  font:400 13px/1.4 var(--font-body); font-variant-numeric:tabular-nums; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bk__sw span b{ display:block; font-weight:600; font-size:15px; }
.bk__sw i{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  background:linear-gradient(90deg, var(--t1) 0 25%, var(--t2) 0 50%, var(--t3) 0 75%, var(--t4) 0);
  transform:translateY(100%); transition:transform .5s var(--ease);
}
.bk__sw button.is-on span{ opacity:1; transform:none; transition-delay:.2s; }
.bk__sw button.is-on i{ transform:none; transition-delay:.15s; }
.bk__sw button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.bk__cast{ container-type:size; --u:calc((100cqh - var(--in) - var(--cap)) / 211.5); }
.bk__people{
  position:absolute; left:50%; bottom:0; width:calc(2324 * var(--u)); height:calc(215 * var(--u));
  transform:translateX(calc(-1162 * var(--u)));
}
.bk__people.is-walking{ left:0; will-change:transform; }
.bk__people img{
  position:absolute; bottom:calc((-6 - var(--y, 0)) * var(--u)); left:calc(var(--x) * var(--u)); width:calc(var(--w) * var(--u)); height:calc((var(--h) + 6) * var(--u));
  transform-origin:50% 0; scale:var(--m, 1); transition:scale .22s var(--ease);
}
.bk__people.is-tracking img{ transition-duration:.09s; }
.bk.is-live .bk__sw button{ transform:translateY(24%); opacity:0; transition:flex-grow .6s var(--ease), transform .6s var(--ease), opacity .6s var(--ease); transition-delay:calc(var(--n,0) * 70ms); }
.bk.is-live .bk__pal.is-in .bk__sw button{ transform:none; opacity:1; }
.bk.is-live .bk__people img{ transform:translateY(120%); transition:transform 1.3s cubic-bezier(.16,1,.3,1), scale .22s var(--ease); transition-delay:calc(var(--n,0) * 110ms), 0s; }
.bk.is-live .bk__people.is-tracking img{ transition-duration:1.3s, .09s; }
.bk.is-live .bk__cast.is-in .bk__people img{ transform:none; }
.bk.is-live .is-done .bk__sw button{ transition-delay:0s; }
.bk.is-live .bk__lg{ transform:scale(.94); transition:opacity .5s var(--ease), transform .8s var(--ease); }
.bk.is-live .bk__logo[data-ground="white"] .bk__lg[data-ground="white"],
.bk.is-live .bk__logo[data-ground="violet"] .bk__lg[data-ground="violet"],
.bk.is-live .bk__logo[data-ground="mint"] .bk__lg[data-ground="mint"]{ transform:none; }
@media (max-width:1000px){
  .bk{ grid-template-columns:repeat(2, minmax(0,1fr)); --in:18px; --gap:8px; }
  .bk__logo, .bk__pal{ grid-column:span 2; }
  .bk__type, .bk__cast{ grid-column:span 1; aspect-ratio:4/5; }
}
@media (max-width:560px){
  .bk{ grid-template-columns:minmax(0,1fr); gap:12px; --in:16px; }
  .bk__logo, .bk__pal, .bk__cast, .bk__type{ grid-column:auto; }
  .bk__logo{ aspect-ratio:1/1; }
  .bk__mark{ width:42cqw; }
  .bk__type, .bk__cast{ aspect-ratio:1/1.05; }
  .bk__pal{ aspect-ratio:1/1.1; }
  .bk__sw{ flex-direction:column; }
  .bk__sw span b{ font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  .bk__logo, .bk__logo .bk__cap, .bk__logo .bk__cap b, .bk__lg,
  .bk__sw button, .bk__sw span, .bk__sw i, .bk__people img{ transition:none !important; }
}
.dsz{
  margin-top:var(--s-4); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm);
  aspect-ratio:16 / 10; display:flex; flex-direction:column; background:var(--surface); color:#333;
  font:500 12px/1.3 var(--font-body);
}
.dsz__bar{
  flex:none; display:flex; align-items:center; gap:16px; height:40px; padding:0 14px;
  border-bottom:1px solid #E6E6E6;
}
.dsz__dots{ display:flex; gap:6px; }
.dsz__dots i{ width:10px; height:10px; border-radius:50%; background:#DADDE2; }
.dsz__file{ font-weight:600; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsz__file span{ font-weight:500; color:#6E727A; }
.dsz__zoom{ margin-left:auto; color:#6E727A; font-variant-numeric:tabular-nums; }
.dsz__body{ flex:1; display:flex; min-height:0; }
.dsz__layers{ position:relative; flex:none; width:200px; padding:10px 8px; border-right:1px solid #E6E6E6; }
.dsz__lt{ margin:2px 8px 8px; font-size:11px; font-weight:600; color:#111; }
.dsz__layer{
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:6px;
  font:inherit; color:inherit; background:none; text-align:left; cursor:pointer;
}
.dsz__layer::before{ content:"#"; flex:none; width:12px; font-weight:600; color:#8A8F98; text-align:center; }
.dsz__layer small{ display:block; margin-top:2px; font-size:11px; font-weight:500; color:#6E727A; }
.dsz__layer:hover{ background:#F3F3F5; }
.dsz__layer[aria-pressed="true"]{ background:#E5F4FF; color:#111; }
.dsz__layer[aria-pressed="true"]::before{ color:#0D99FF; }
.dsz__layer:focus-visible{ outline:2px solid #0D99FF; outline-offset:-2px; }
.dsz__canvas{ position:relative; flex:1; min-width:0; overflow:hidden; background:#F5F5F5; display:grid; place-items:center; }
.dsz__board{ display:flex; gap:3.125%; width:calc(100% - 32px); }
.dsz__board img{ width:31.25%; height:auto; }
.dsz.is-live .dsz__board{ position:absolute; left:0; top:0; display:block; width:2560px; height:500px; transform-origin:0 0; }
.dsz.is-live .dsz__board img{ position:absolute; top:0; width:800px; height:500px; opacity:.35; transition:opacity .6s var(--ease); }
.dsz.is-live .dsz__board img:nth-child(2){ left:880px; }
.dsz.is-live .dsz__board img:nth-child(3){ left:1760px; }
.dsz.is-live .dsz__board img.is-on{ opacity:1; }
@media (max-width:760px){
  .dsz{ aspect-ratio:auto; }
  .dsz__body{ flex-direction:column; }
  .dsz__layers{
    width:auto; display:flex; gap:4px; padding:6px; overflow-x:auto; scrollbar-width:none;
    border-right:0; border-bottom:1px solid #E6E6E6;
  }
  .dsz__layers::-webkit-scrollbar{ display:none; }
  .dsz__lt, .dsz__layer small{ display:none; }
  .dsz__layer{ width:auto; flex:none; white-space:nowrap; padding:6px 10px; }
  .dsz__canvas{ flex:none; aspect-ratio:848 / 548; }
}
@media (prefers-reduced-motion:reduce){ .dsz.is-live .dsz__board img{ transition:none; } }
.fd{ display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:var(--s-4); align-items:center; margin-top:var(--s-4); }
.fd__stage{
  position:relative; aspect-ratio:4 / 3; container-type:size; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--surface-sub); box-shadow:var(--shadow-sm);
}
.fd__modes{
  position:absolute; z-index:3; left:50%; top:3.4cqh; transform:translateX(-50%);
  display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--ink);
  box-shadow:0 2px 4px rgba(11,18,38,.08), 0 12px 32px rgba(11,18,38,.18);
}
.fd__modes[hidden]{ display:none; }
.fd__opt{
  font:500 13px/1 var(--font-body); color:rgba(255,255,255,.78); white-space:nowrap;
  padding:9px 14px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.fd__opt:hover{ color:#fff; }
.fd__opt[aria-pressed="true"]{ background:#fff; color:var(--ink); }
.fd__opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.fd__dev{
  --sw:.45;
  position:absolute; left:50%; top:16cqh; height:78cqh; width:calc(var(--sw) * 75.2cqh + 2.8cqh);
  transform:translateX(-50%); padding:1.4cqh; border-radius:3.6cqh;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(11,18,38,.35);
  transition:width .8s var(--ease);
}
.fd[data-s="unfold"] .fd__dev, .fd[data-s="split"] .fd__dev{ --sw:1.15; }
.fd__scr{ position:relative; height:100%; overflow:hidden; border-radius:2.4cqh; background:#F4F5F8; container-type:size; }
.fd__p{
  position:absolute; left:var(--x); top:calc(var(--y) * 1cqh); width:var(--w); height:calc(var(--h) * 1cqh);
  transition:left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .5s var(--ease);
}
.fd__ic, .fd__pin{ left:calc(var(--cx) - var(--d) * .5cqh); top:calc((var(--cy) - var(--d) / 2) * 1cqh); width:calc(var(--d) * 1cqh); height:calc(var(--d) * 1cqh); }
.fd__hd{ display:flex; align-items:center; justify-content:center; background:#4611BA; }
.fd__hd i{ position:absolute; left:2.6cqh; top:50%; width:1.6cqh; height:1.6cqh; border:solid #fff; border-width:0 0 .4cqh .4cqh; transform:translateY(-50%) rotate(45deg); }
.fd__hd b{ width:min(60%, 22cqh); height:1.8cqh; border-radius:1cqh; background:rgba(255,255,255,.9); }
.fd__route, .fd__list, .fd__card, .fd__other{ border-radius:1.8cqh; background:#fff; }
.fd__route b{ position:absolute; left:6%; height:1.7cqh; border-radius:1cqh; background:#17063C; }
.fd__route b:nth-child(1){ top:2.4cqh; width:62%; } .fd__route b:nth-child(2){ top:5.4cqh; width:40%; background:#B5C2D0; }
.fd__route i{ position:absolute; top:9cqh; width:2.6cqh; height:2.6cqh; border-radius:50%; background:#1B1468; }
.fd__route i:nth-of-type(1){ left:6%; } .fd__route i:nth-of-type(2){ left:calc(6% + 3.2cqh); background:#FB7585; }
.fd__list{ padding:1.6cqh; display:flex; flex-direction:column; gap:1.2cqh; overflow:hidden; }
.fd__list span{ display:flex; align-items:center; gap:1.4cqh; height:6.6cqh; padding:0 1.4cqh; border-radius:1.2cqh; }
.fd__list span.is-on{ background:#FFF1EA; }
.fd__list i{ flex:none; width:3cqh; height:3cqh; border-radius:50%; background:#FF7B5B; }
.fd__list span:not(.is-on) i{ background:#D6DFE9; }
.fd__list b{ flex:1; height:1.6cqh; border-radius:1cqh; background:#17063C; }
.fd__list span:not(.is-on) b{ background:#B5C2D0; }
.fd__ttl{ border-radius:1cqh; background:#17063C; }
.fd__btn{ display:grid; place-items:center; border-radius:1.4cqh; background:#FFF1EA; }
.fd__btn i{ width:min(46%, 18cqh); height:1.6cqh; border-radius:1cqh; background:#FF7B5B; }
.fd__f u{ position:absolute; left:0; top:0; width:min(50%, 14cqh); height:1.3cqh; border-radius:1cqh; background:#B5C2D0; }
.fd__f span{
  position:absolute; left:0; right:0; bottom:0; height:5cqh; display:flex; align-items:center; padding:0 1.4cqh;
  border-radius:1.2cqh; background:#F7F3EF; font:500 2.3cqh/1 var(--font-body); color:#17063C; white-space:nowrap; overflow:hidden;
}
.fd__f1 span{ box-shadow:inset 0 0 0 .25cqh #FF7B5B; background:#fff; }
.fd__f1 span::after{ content:""; width:.25cqh; height:2.6cqh; margin-left:.3cqh; background:#17063C; animation:fd-caret 1.1s steps(1) infinite; }
@keyframes fd-caret{ 50%{ opacity:0; } }
.fd__nav{ background:#fff; box-shadow:0 -1px 0 #E6ECF3; }
.fd[data-s="unfold"] .fd__nav{ box-shadow:1px 0 0 #E6ECF3; }
.fd__ic{ --d:3.6; border-radius:1cqh; background:#D6DFE9; }
.fd__ic1{ background:#FF7B5B; }
.fd__other{ border-radius:0; background:#fff; box-shadow:-1px 0 0 #E6ECF3; }
.fd__other b{ position:absolute; left:0; right:0; top:0; height:13cqh; background:#62758B; }
.fd__other i{ position:absolute; left:8%; height:7cqh; border-radius:1.4cqh; background:#E6ECF3; }
.fd__other i:nth-of-type(1){ top:17cqh; width:62%; } .fd__other i:nth-of-type(2){ top:26cqh; left:30%; width:62%; background:#D6DFE9; }
.fd__other i:nth-of-type(3){ top:35cqh; width:50%; } .fd__other i:nth-of-type(4){ top:44cqh; left:38%; width:54%; background:#D6DFE9; }
.fd__fold{
  position:absolute; z-index:2; left:50%; top:0; bottom:0; border-left:.3cqh dashed rgba(70,17,186,.5);
  opacity:0; transition:opacity .5s var(--ease);
}
.fd[data-s="unfold"] .fd__fold, .fd[data-s="split"] .fd__fold{ opacity:1; }
.fd__pin{
  --d:4.2; z-index:3; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff;
  font:600 2.3cqh/1 var(--font-body); font-style:normal; box-shadow:0 0 0 .5cqh rgba(255,255,255,.85);
  opacity:0; transform:scale(.6);
  transition:left .8s var(--ease), top .8s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.fd__hd{ --x:0%; --y:0; --w:100%; --h:12; }
.fd__route, .fd__list{ --x:4%; --y:15; --w:92%; --h:14; }
.fd__list{ opacity:0; }
.fd__card{ --x:4%; --y:31; --w:92%; --h:52; }
.fd__ttl{ --x:10%; --y:34.5; --w:46%; --h:2.6; }
.fd__btn{ --x:10%; --y:40; --w:80%; --h:6.4; }
.fd__f1{ --x:10%; --y:49; --w:80%; --h:7.6; }
.fd__f2{ --x:10%; --y:59; --w:80%; --h:7.6; }
.fd__f3{ --x:10%; --y:69; --w:80%; --h:7.6; }
.fd__nav{ --x:0%; --y:90; --w:100%; --h:10; }
.fd__ic{ --cy:95; } .fd__ic1{ --cx:12.5%; } .fd__ic2{ --cx:37.5%; } .fd__ic3{ --cx:62.5%; } .fd__ic4{ --cx:87.5%; }
.fd__other{ --x:104%; --y:0; --w:49.5%; --h:100; opacity:0; }
.fd__pin[data-r="1"]{ --cx:12.5%; --cy:86; } .fd__pin[data-r="5"]{ --cx:88%; --cy:50; }
.fd__pin[data-r="2"]{ --cx:50%; --cy:30; } .fd__pin[data-r="3"]{ --cx:50%; --cy:70; }
.fd__pin[data-r="4"]{ --cx:50%; --cy:80; } .fd__pin[data-r="6"]{ --cx:50%; --cy:60; }
.fd[data-s="unfold"] .fd__nav{ --x:0%; --y:12; --w:7.6%; --h:88; }
.fd[data-s="unfold"] .fd__ic{ --cx:3.8%; } .fd[data-s="unfold"] .fd__ic1{ --cy:19; }
.fd[data-s="unfold"] .fd__ic2{ --cy:26; } .fd[data-s="unfold"] .fd__ic3{ --cy:33; } .fd[data-s="unfold"] .fd__ic4{ --cy:40; }
.fd[data-s="unfold"] .fd__route{ --x:10.5%; --y:15; --w:36.5%; --h:14; }
.fd[data-s="unfold"] .fd__list{ --x:10.5%; --y:31; --w:36.5%; --h:21; opacity:1; }
.fd[data-s="unfold"] .fd__card{ --x:53%; --y:15; --w:40%; --h:43; }
.fd[data-s="unfold"] .fd__ttl{ --x:56%; --y:18.5; --w:17%; }
.fd[data-s="unfold"] .fd__btn{ --x:56%; --y:24; --w:34%; }
.fd[data-s="unfold"] .fd__f1{ --x:56%; --y:33; --w:16.4%; }
.fd[data-s="unfold"] .fd__f2{ --x:73.6%; --y:33; --w:16.4%; }
.fd[data-s="unfold"] .fd__f3{ --x:56%; --y:43; --w:16.4%; }
.fd[data-s="unfold"] .fd__pin[data-r="1"]{ --cx:3.8%; --cy:48; }
.fd[data-s="unfold"] .fd__pin[data-r="2"]{ --cx:47%; --cy:31; }
.fd[data-s="unfold"] .fd__pin[data-r="3"]{ --cx:72.4%; --cy:43; }
.fd[data-s="unfold"] .fd__pin[data-r="4"]{ --cx:50%; --cy:72; }
.fd[data-s="unfold"] .fd__pin[data-r="5"]{ --cx:72.4%; --cy:33; }
.fd[data-s="split"] .fd__hd{ --w:49.5%; }
.fd[data-s="split"] .fd__route, .fd[data-s="split"] .fd__list{ --x:2.2%; --w:45%; }
.fd[data-s="split"] .fd__card{ --x:2.2%; --w:45%; }
.fd[data-s="split"] .fd__ttl{ --x:5%; --w:23%; }
.fd[data-s="split"] .fd__btn, .fd[data-s="split"] .fd__f{ --x:5%; --w:39.4%; }
.fd[data-s="split"] .fd__nav{ --w:49.5%; }
.fd[data-s="split"] .fd__ic1{ --cx:6.2%; } .fd[data-s="split"] .fd__ic2{ --cx:18.6%; }
.fd[data-s="split"] .fd__ic3{ --cx:31%; } .fd[data-s="split"] .fd__ic4{ --cx:43.3%; }
.fd[data-s="split"] .fd__other{ --x:50.5%; opacity:1; }
.fd[data-s="split"] .fd__pin[data-r="1"]{ --cx:6.2%; --cy:86; }
.fd[data-s="split"] .fd__pin[data-r="4"]{ --cx:50%; --cy:72; }
.fd[data-s="split"] .fd__pin[data-r="5"]{ --cx:44.4%; --cy:50; }
.fd[data-s="split"] .fd__pin[data-r="6"]{ --cx:47.2%; --cy:66; }
.fd[data-s="fold"] .fd__pin:is([data-r="1"],[data-r="5"]),
.fd[data-s="unfold"] .fd__pin:is([data-r="1"],[data-r="2"],[data-r="3"],[data-r="4"],[data-r="5"]),
.fd[data-s="split"] .fd__pin:is([data-r="1"],[data-r="4"],[data-r="5"],[data-r="6"]){ opacity:1; transform:none; }
.fd__rules{ margin:0; padding:0; list-style:none; counter-reset:fd; display:grid; gap:14px; }
.fd__rules li{
  counter-increment:fd; position:relative; padding-left:40px; opacity:.38; transition:opacity .4s var(--ease);
}
.fd__rules li::before{
  content:counter(fd); position:absolute; left:0; top:-1px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--ink); color:#fff; font:600 13px/1 var(--font-body);
}
.fd__rules b{ display:block; font:600 15px/1.35 var(--font-body); color:var(--ink); }
.fd__rules span{ display:block; margin-top:2px; font:400 14px/1.45 var(--font-body); color:var(--ink-body); }
.fd[data-s="fold"] .fd__rules li[data-on~="fold"], .fd[data-s="unfold"] .fd__rules li[data-on~="unfold"],
.fd[data-s="split"] .fd__rules li[data-on~="split"]{ opacity:1; }
@media (max-width:1000px){
  .fd{ grid-template-columns:minmax(0,1fr); }
  .fd__rules{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 24px; }
}
@media (max-width:560px){
  .fd__rules{ grid-template-columns:minmax(0,1fr); }
  .fd__opt{ padding:8px 11px; font-size:12px; }
  .fd__stage{ aspect-ratio:1 / 1; }
}
@media (prefers-reduced-motion:reduce){
  .fd__dev, .fd__p, .fd__fold, .fd__pin, .fd__rules li{ transition:none; }
  .fd__f1 span::after{ animation:none; }
}
.works{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:var(--s-4); }
.works__tile{ margin:0; }
.works__frame{
  position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm);
  container-type:inline-size;
  background:linear-gradient(126deg, #1F88FD -16%, #063FB3 116%);
}
.works__frame .shot__ph{
  position:absolute; inset:0; aspect-ratio:auto;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px);
}
.works__frame .shot__ph span{ color:rgba(255,255,255,.78); }
.works__fade{ display:grid; place-items:center; }
.works__fade > *{ grid-area:1 / 1; opacity:0; transform:scale(0); }
.works__fade:not(.is-live) > :first-child{ opacity:1; transform:none; }
.post{
  width:62cqw; padding:2.6cqw; display:grid; gap:2.2cqw;
  background:#fff; border-radius:3cqw; box-shadow:0 18px 40px -12px rgba(4,30,92,.55);
}
.post__head{ display:flex; align-items:center; gap:2cqw; }
.post__ava{ width:5.6cqw; height:5.6cqw; border-radius:50%; background:#E3E7EF; }
.post__name{ width:22cqw; height:1.8cqw; border-radius:99px; background:#E3E7EF; }
.post__more{
  margin-left:auto; width:4.2cqw; height:1.2cqw;
  background:radial-gradient(circle, var(--ink) .45cqw, transparent .52cqw) 0 50% / 1.4cqw 1.2cqw repeat-x;
}
.post img{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:1.4cqw; }
.post__acts{ display:flex; gap:1.8cqw; padding:0 .4cqw; }
.post__acts .post__save{ margin-left:auto; }
.post__acts svg{
  width:4.6cqw; height:4.6cqw; fill:none; stroke:var(--ink); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.post__lines{ display:grid; gap:1.3cqw; }
.post__lines i{ display:block; height:1.5cqw; border-radius:99px; background:#E3E7EF; }
.post__lines i:first-child{ width:92%; }
.post__lines i:last-child{ width:64%; }
.works__fade > .is-play{ animation:works-pop 3.1s both; }
.works__fade.is-paused > .is-play{ animation-play-state:paused; }
.win{
  background:#fff; border-radius:2.4cqw; padding:0 1.2cqw 1.2cqw;
  box-shadow:0 18px 40px -12px rgba(4,30,92,.55);
}
.win::before{
  content:""; display:block; height:4.4cqw;
  background-image:
    radial-gradient(circle, rgba(11,18,38,.16) .7cqw, transparent .8cqw),
    radial-gradient(circle, rgba(11,18,38,.16) .7cqw, transparent .8cqw),
    radial-gradient(circle, rgba(11,18,38,.16) .7cqw, transparent .8cqw);
  background-size:1.6cqw 1.6cqw; background-repeat:no-repeat;
  background-position:.6cqw 50%, 2.8cqw 50%, 5cqw 50%;
}
.win img{
  display:block; width:auto; height:auto; max-width:78cqw; max-height:77.5cqw;
  border-radius:1.2cqw;
}
.covers{
  --covers-gap:3.6cqw;
  position:absolute; inset:0; display:grid; align-content:center; gap:var(--covers-gap);
}
.covers__track{ display:flex; width:max-content; animation:clients-run 64s linear infinite; }
.covers__set{ display:flex; gap:var(--covers-gap); padding:0 var(--covers-gap) 0 0; margin:0; list-style:none; }
.covers__set li{
  background:#fff; border-radius:1.8cqw; padding:0 .9cqw .9cqw;
  box-shadow:0 8px 20px -10px rgba(4,30,92,.6);
}
.covers__set li::before{
  content:""; display:block; height:3.2cqw;
  background-image:
    radial-gradient(circle, rgba(11,18,38,.16) .5cqw, transparent .58cqw),
    radial-gradient(circle, rgba(11,18,38,.16) .5cqw, transparent .58cqw),
    radial-gradient(circle, rgba(11,18,38,.16) .5cqw, transparent .58cqw);
  background-size:1.2cqw 1.2cqw; background-repeat:no-repeat;
  background-position:.5cqw 50%, 2.1cqw 50%, 3.7cqw 50%;
}
.covers__set img{ display:block; width:auto; height:21.2cqw; aspect-ratio:2 / 1; border-radius:1cqw; }
.covers__row:nth-child(2) .covers__track{ animation-duration:56s; animation-direction:reverse; }
.covers__row:nth-child(3) .covers__track{ animation-duration:56s; }
@keyframes works-pop{
  0%    { transform:scale(0);    opacity:0; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  11.3% { transform:scale(1.1);  opacity:1; animation-timing-function:ease-in-out; }
  17.7% { transform:scale(1);    opacity:1; }
  82.3% { transform:scale(1);    opacity:1; animation-timing-function:ease-in-out; }
  88.7% { transform:scale(1.1);  opacity:1; animation-timing-function:cubic-bezier(.6,0,.8,.3); }
  100%  { transform:scale(0);    opacity:0; }
}
.sdm{
  --sdm-h:95px; --sdm-gap:12px;
  padding:19px 0; display:grid; gap:var(--sdm-gap);
  background:#F5F5F5;
}
.sdm__row--inf{ --sdm-h:62.5px; }
.sdm__track{ display:flex; width:max-content; animation:clients-run var(--dur, 120s) linear infinite; }
.sdm__set{
  display:flex; gap:var(--sdm-gap);
  padding:0 var(--sdm-gap) 0 0; margin:0; list-style:none;
}
.sdm img{
  display:block; width:auto; height:var(--sdm-h); border-radius:6px;
  box-shadow:0 0 0 1px rgba(11,18,38,.07), 0 6px 14px -8px rgba(11,18,38,.28);
}
.sdm__row:nth-child(even) .sdm__track{ animation-direction:reverse; }
.lib{
  position:relative; aspect-ratio:16 / 10.8; border:0; overflow:hidden;
  background:linear-gradient(126deg, #00ABE3, #0A75B5);
}
.lib__win{
  position:absolute; left:10%; top:6%; width:1120px; height:900px;
  padding:8px; border-radius:20px 0 0 0;
  background:rgba(255,255,255,.2); box-shadow:0 30px 60px -20px rgba(2,40,80,.5), inset 0 0 0 1px rgba(255,255,255,.35);
}
.lib__app{
  --k1:#00ABE3; --k2:#7DC242; --k3:#D31E4B; --kd:#000000; --k4:#E3F5FC; --kg:#D9DEE5;
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:13px 0 0 0;
}
.lib__app[data-theme="a"]{ --k1:#36BFEA; --k2:#393E47; --k3:#9FA1A2; --kd:#393E47; --k4:#DDF5FD; }
.lib__app[data-theme="b"]{ --k1:#EF7621; --k2:#F2A26A; --k3:#9F6A48; --kd:#3A2A20; --k4:#FDEEE2; }
.lib__app[data-theme="c"]{ --k1:#FE6859; --k2:#FE8547; --k3:#2E2A2A; --kd:#2E2A2A; --k4:#FDE7E3; }
.lib__app[data-theme="d"]{ --k1:#17B214; --k2:#179BDF; --k3:#466D84; --kd:#283736; --k4:#E4F5E4; }
.lib__app[data-theme="e"]{ --k1:#168360; --k2:#FA8D69; --k3:#B79B7E; --kd:#344A3D; --k4:#E3F0EA; }
.lib__app[data-theme="f"]{ --k1:#4772F5; --k2:#F0BE5F; --k3:#0BA7F2; --kd:#2F4054; --k4:#E6ECFD; }
.lib__app[data-theme="g"]{ --k1:#6E4FD0; --k2:#C735CE; --k3:#BEAAE9; --kd:#2A1E52; --k4:#F0EBFC; }
.lib__bar{
  display:flex; align-items:center; gap:16px; height:46px; padding:0 16px; flex:none;
  border-bottom:1px solid #E6E6E6; font-size:12.5px; color:#333;
}
.lib__dots{ display:flex; gap:6px; }
.lib__dots i{ width:10px; height:10px; border-radius:50%; background:#DADDE2; }
.lib__file{ font-weight:600; white-space:nowrap; }
.lib__modes{ display:flex; align-items:center; gap:6px; padding:4px 8px 4px 12px; border-radius:8px; background:#F1F2F4; }
.lib__mode{ min-width:78px; margin-right:4px; font-size:12px; font-weight:600; color:#111; white-space:nowrap; }
.lib__sw{
  width:18px; height:18px; padding:0; border:2px solid #fff; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.lib__sw[aria-checked="true"]{ box-shadow:0 0 0 1.5px #111; }
.lib__sw:focus-visible{ outline:2px solid #9747FF; outline-offset:2px; }
.lib__body{ flex:1; display:flex; min-height:0; }
.lib__layers{
  flex:none; width:196px; padding:8px 6px; overflow:hidden;
  border-right:1px solid #E6E6E6; font-size:12px;
}
.lib__ltitle{
  display:flex; justify-content:space-between; margin:2px 0 4px; padding:0 8px;
  font-size:11px; font-weight:600; color:#111;
}
.lib__ltitle span{ font-weight:500; color:#6E727A; }
.lib__tree, .lib__tree ul{ margin:0; padding:0; list-style:none; }
.lib__layer{
  position:relative; display:flex; align-items:center; gap:7px; width:100%; height:22px;
  padding:0 8px 0 22px; border:0; border-radius:5px; font:inherit; color:#333; background:none;
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lib__grp > ul .lib__layer{ padding-left:38px; }
.lib__layer--grp::after{
  content:""; position:absolute; left:10px; top:50%; margin-top:-4px;
  border:4px solid transparent; border-left:5px solid #8A8F98; border-right:0;
  transform-origin:2px 50%;
}
.lib__layer--grp::after{ transform:rotate(90deg); }
span.lib__layer--grp{ cursor:default; }
.lib__layer--grp::before{
  content:""; flex:none; width:10px; height:10px;
  background:
    linear-gradient(45deg, transparent 30%, #9747FF 30% 70%, transparent 70%) 50% 0 / 5px 5px no-repeat,
    linear-gradient(45deg, transparent 30%, #9747FF 30% 70%, transparent 70%) 50% 100% / 5px 5px no-repeat,
    linear-gradient(45deg, transparent 30%, #9747FF 30% 70%, transparent 70%) 0 50% / 5px 5px no-repeat,
    linear-gradient(45deg, transparent 30%, #9747FF 30% 70%, transparent 70%) 100% 50% / 5px 5px no-repeat;
}
.lib__layer--grp{ font-weight:600; }
.lib__grp > ul .lib__layer::before{
  content:""; flex:none; width:6px; height:6px; margin:0 2px;
  border:1.4px solid #9747FF; transform:rotate(45deg);
}
.lib__grp > ul .lib__more{ cursor:default; color:#6E727A; padding-left:55px; }
.lib__grp > ul .lib__more::before{ content:none; }
.lib__layer:not(span):hover{ background:#F3F3F5; }
.lib__layer--grp.is-on{ background:#F7F3FF; }
.lib__grp > ul .lib__layer.is-on{ background:#EFE6FF; color:#111; }
.lib__canvas{
  position:relative; flex:1; padding:24px; background:#F5F5F5;
  display:grid; grid-template-columns:repeat(5, 180px); grid-auto-rows:170px; gap:16px; align-content:start;
}
.lib__item{
  position:relative; padding:0; border:0; border-radius:12px; background:#fff; cursor:default;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 16px -10px rgba(0,0,0,.2);
}
.lib__item--big{ grid-column:span 2; grid-row:span 2; }
.lib__item svg{ display:block; width:100%; height:100%; }
.lib__item:hover{ outline:1.5px solid #9747FF; outline-offset:0; }
.lib__item:focus-visible{ outline:2px solid #9747FF; }
.lib text{ font-family:var(--font-body); font-weight:600; }
.lib .f1{ fill:var(--k1); } .lib .f2{ fill:var(--k2); } .lib .f3{ fill:var(--k3); }
.lib .fd{ fill:var(--kd); } .lib .f4{ fill:var(--k4); } .lib .fg{ fill:var(--kg); } .lib .fw{ fill:#fff; }
.lib .fm{ fill:#8A8F98; } .lib .s1{ stroke:var(--k1); } .lib .s2{ stroke:var(--k2); } .lib .s3{ stroke:var(--k3); } .lib .sd{ stroke:var(--kd); }
.lib .s4{ stroke:var(--k4); } .lib .sg{ stroke:#B8BEC7; }
.lib .st1{ stop-color:var(--k1); }
.lib svg *{ transition:fill .6s var(--ease), stroke .6s var(--ease), stop-color .6s var(--ease); }
.lib__sel{
  position:absolute; left:0; top:0; pointer-events:none; opacity:0;
  outline:1.5px solid #9747FF; border-radius:12px;
  transition:transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .2s;
}
.lib__win.has-sel .lib__sel{ opacity:1; }
.lib__sel i{
  position:absolute; width:8px; height:8px; background:#fff; border:1.5px solid #9747FF;
}
.lib__sel i:nth-of-type(1){ left:-4px; top:-4px; } .lib__sel i:nth-of-type(2){ right:-4px; top:-4px; }
.lib__sel i:nth-of-type(3){ left:-4px; bottom:-4px; } .lib__sel i:nth-of-type(4){ right:-4px; bottom:-4px; }
.lib__name, .lib__size{
  position:absolute; font-size:11px; line-height:1; white-space:nowrap; color:#9747FF; font-weight:600;
}
.lib__name{ left:0; bottom:calc(100% + 7px); }
.lib__name::before{ content:"\2756\00a0"; }
.lib__size{
  left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  padding:3px 6px; border-radius:4px; background:#9747FF; color:#fff;
}
.ba{ margin:var(--s-5) 0 0; }
.ba__frame{
  --pos:50%; position:relative; aspect-ratio:16/9; overflow:hidden;
  cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.ba__img{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.ba__after{
  position:absolute; inset:0; overflow:hidden;
  transform:translateX(var(--pos)); will-change:transform;
}
.ba__after > .ba__img{ transform:translateX(calc(-1 * var(--pos))); will-change:transform; }
.ba__handle{
  position:absolute; inset:0; pointer-events:none;
  transform:translateX(var(--pos)); will-change:transform;
}
.ba__handle::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:#fff; box-shadow:0 0 0 1px rgba(11,18,38,.12), 0 0 12px rgba(11,18,38,.18);
}
.ba__handle i{
  position:absolute; top:50%; left:0; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(11,18,38,.1), var(--shadow-md);
  transition:transform .3s var(--ease);
}
.ba__handle i::before, .ba__handle i::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-4px;
  border:solid var(--ink); border-width:0 0 2px 2px;
}
.ba__handle i::before{ left:12px; transform:rotate(45deg); }
.ba__handle i::after{ right:12px; transform:rotate(-135deg); }
.ba__frame:hover .ba__handle i, .ba.is-drag .ba__handle i{ transform:scale(1.08); }
.ba__frame:has(.ba__range:focus-visible) .ba__handle i{ box-shadow:0 0 0 3px var(--accent-lift), var(--shadow-md); }
.ba__tag{
  position:absolute; bottom:10px; padding:4px 9px; border-radius:999px;
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  pointer-events:none; transition:opacity .25s var(--ease);
}
.ba__tag--before{ left:10px; background:rgba(11,18,38,.06); color:var(--ink); }
.ba__tag--after{ right:10px; background:rgba(11,18,38,.32); color:#fff; }
.ba__tag.is-hidden{ opacity:0; }
.ba__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
  cursor:ew-resize; pointer-events:none;
}
.ba:not(.ba--live) .ba__frame{ cursor:default; }
.ba:not(.ba--live) .ba__range{ display:none; }
@media (max-width:760px){
  .ba__handle i{ width:38px; height:38px; margin:-19px 0 0 -19px; }
  .ba__handle i::before{ left:10px; } .ba__handle i::after{ right:10px; }
  .ba__tag{ top:10px; bottom:auto; font-size:9px; padding:4px 8px; }
  .ba__tag--before{ left:10px; } .ba__tag--after{ right:10px; }
}
.pull{
  border-left:2px solid var(--accent-line); padding-left:var(--s-3);
  margin-top:var(--s-5); font-family:var(--font-display); font-weight:500;
  font-size:clamp(20px,2.4vw,27px); line-height:1.3; letter-spacing:-.02em; color:var(--ink);
}
.quote{
  margin:var(--s-5) 0 0; border-left:2px solid var(--accent-line); padding-left:var(--s-3);
}
.quote p{
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(17px,2vw,21px); line-height:1.45; letter-spacing:-.01em; color:var(--ink);
}
.quote cite{
  display:block; margin-top:var(--s-2); font-style:normal; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:var(--s-4); }
.chip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; border:1px solid var(--line);
  color:var(--muted); background:var(--surface);
}
.next{ border-top:1px solid var(--line-soft); padding:var(--s-6) 0 var(--s-7); }
.next__k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.next__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-2); }
.next__title{ font-size:clamp(28px,4vw,46px); letter-spacing:-.03em; transition:color .3s var(--ease); }
.next a:hover .next__title{ color:var(--accent); }
.next__meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.foot{ border-top:1px solid var(--line-soft); padding:var(--s-4) 0; }
.foot__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.foot__note{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.foot__links{ display:flex; gap:var(--s-3); }
.foot__links a{ font-size:14px; color:var(--muted); transition:color .25s var(--ease); }
.foot__links a:hover{ color:var(--ink); }
@media (max-width:1000px){
  .facts{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(odd){ padding-left:0; }
  .fact:nth-child(2n){ border-right:0; }
  .fact:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  .grid2{ grid-template-columns:1fr; }
  .lib{ aspect-ratio:4 / 3; }
  .lib__layers{ display:none; }
  .lib__canvas{ padding:18px; gap:12px; grid-template-columns:repeat(5, 140px); grid-auto-rows:128px; }
}
@media (max-width:760px){
  :root{ --s-7:64px; --s-6:48px; }
  .flaws{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"m m" "a b" "c d"; }
  .flaws__mark{ padding:var(--s-3); }
  .icons{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .bento, .bento__row, .bento__set{ gap:10px; }
  .bento__row{ flex-direction:column; }
  .works{ grid-template-columns:1fr; }
  .bento__set{ display:flex; }
  .bento__set > .shot:only-child{ flex-grow:1; }
  .flaws figcaption{ font-size:9.5px; letter-spacing:.08em; }
  .chero{ padding-top:calc(var(--nav-h) + var(--s-5)); }
  .mark span{ display:none; }
  .clients{ --clients-gap:16px; gap:13px; }
  .wf{ padding:var(--s-3) var(--s-2) var(--s-2); }
  .wf__head, .wf__lines{ display:none; }
  .wf__step{ grid-template-columns:28px minmax(0,1fr); column-gap:10px; }
  .wf__rail{ left:13.5px; }
  .cl{ padding:var(--s-4) var(--s-2); }
  .cl__tabs{ padding:14px 16px 0; }
  .cl__cols{ grid-template-columns:1fr; padding:16px 16px 4px; }
  .cl__foot{ flex-direction:column; align-items:stretch; padding:12px 16px 16px; }
  .cl__send{ width:100%; }
  .wf__card--client, .wf__card--me, .wf__card--team{ grid-column:2; }
  .wf__card--alt{ grid-row:2; margin-top:6px; }
  .wf__card::before{
    content:attr(data-lane); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
  }
  .clients__set img{ height:48px; }
  .sdm{ --sdm-h:58px; --sdm-gap:9px; padding:13px 0; }
  .sdm__row--inf{ --sdm-h:38px; }
  .lib{ aspect-ratio:4 / 5; }
  .lib__win{ left:6%; top:8.5%; width:720px; height:620px; padding:6px; }
  .lib__layers, .lib__file{ display:none; }
  .lib__bar{ gap:10px; height:42px; padding:0 10px; }
  .lib__mode{ display:none; }
  .lib__modes{ padding:4px 6px; gap:5px; }
  .lib__canvas{ padding:14px; gap:10px; grid-template-columns:repeat(5, 104px); grid-auto-rows:98px; }
  .lib__item{ border-radius:9px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .covers__track{ animation:none; }
  .sdm__track{ animation:none; }
  .clients{
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px var(--clients-gap);
    -webkit-mask-image:none; mask-image:none;
  }
  .clients .clients__row, .clients .clients__track, .clients .clients__set{ display:contents; animation:none; }
  .clients .clients__set[aria-hidden="true"]{ display:none; }
}
.chero__cover{
  margin-top:var(--s-6);
  border-radius:18px;
  background:var(--surface-sub); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.chero__cover img{ width:100%; height:auto; }
.chero__cover .shot__ph{ aspect-ratio:16/7; }
.chero__cover--avroid{ position:relative; aspect-ratio:16/7; background:#FE4F13; }
.chero__cover--avroid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chero__cover--diroro{ position:relative; aspect-ratio:16/7; background:#FFDD2D; }
.chero__cover--diroro img{ position:absolute; inset:14% 16%; width:68%; height:72%; object-fit:contain; }
.chero__cover--besttrip{ position:relative; aspect-ratio:16/7; background:#601DF1; }
.chero__cover--besttrip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .chero__cover{ border-radius:14px; }
  .chero__cover--besttrip{ aspect-ratio:16/9; }
  .chero__cover .shot__ph{ aspect-ratio:4/3; }
  .chero__cover--avroid{ aspect-ratio:4/3; }
  .chero__cover--diroro{ aspect-ratio:4/3; }
  .chero__cover--diroro img{ inset:10% 9%; width:82%; height:80%; }
}
@media (min-width:1001px){
  .sec--rail .read{
    max-width:none;
    display:grid;
    grid-template-columns:190px minmax(0,var(--read));
    column-gap:var(--s-5);
  }
  .sec--rail .read > *{ grid-column:2; }
  .sec--rail .read > .sec__n{
    grid-column:1; grid-row:1;
    margin:0; padding-top:.5em;
  }
  .sec--rail .read > .sec__n + *{ grid-row:1; margin-top:0; }
}
.chero--center .eyebrow{ justify-content:center; }
.chero--center .chero__title,
.chero--center .chero__sub,
.chero--center .chero__lede{ text-align:center; }
.chero--center .chero__sub{ max-width:30ch; margin-inline:auto; }
.chero--center .chero__lede{ margin-inline:auto; }
@media (min-width:1001px){
  .chero--split .chero__in{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--lede-col,460px));
    column-gap:var(--s-6);
    row-gap:0;
  }
  .chero--split .eyebrow      { grid-column:1; grid-row:1; }
  .chero--split .chero__title { grid-column:1; grid-row:2; }
  .chero--split .chero__sub   { grid-column:1; grid-row:3; }
  .chero--split .chero__lede{
    grid-column:2; grid-row:2 / span 2;
    align-self:end;
    margin-top:0;
    max-width:none;
  }
  .chero--split .chero__cover { grid-column:1 / -1; grid-row:4; }
  .chero--split .facts        { grid-column:1 / -1; grid-row:5; }
}