/* Web decks page. Page prefix: wd-.
   Shared parts (ui-win, ui-head, ui-chip, ui-k, av, live, mini-deck) come
   from /assets/site/site.css. Devices, slides and capability fragments are
   pictures: they scale with container units (--q from .mock, then their own
   unit inside each screen). Panel UI uses px and reflows with container
   queries. Loops animate transform and opacity only and stop off screen. */

.wd-art{position:absolute;left:0;top:0;width:100%;height:100%}

/* ---------- Hero: one deck, laptop, tablet, phone ----------
   Stage units: 600 across (--q). Each screen redefines --q for its page:
   laptop page 520, tablet page 300, phone page 204. The base style is the
   still frame (all three side by side); motion cycles them in one spot. */
.wd-hm{container-name:wd-hm}
.wd-stage{position:relative;width:100%;aspect-ratio:600 / 470}
.wd-dv{position:absolute;left:calc(var(--q) * var(--x));top:calc(var(--q) * var(--y));width:calc(var(--q) * var(--w));transform:var(--still)}
.wd-lap{--x:30;--y:50;--w:540;--still:translate(calc(var(--q) * -128.5),calc(var(--q) * 52)) scale(.62)}
.wd-tab{--x:135;--y:15;--w:330;--h:440;--still:translate(calc(var(--q) * 121.5),calc(var(--q) * 68)) scale(.44)}
.wd-ph{--x:192;--y:15;--w:216;--h:440;--still:translate(calc(var(--q) * 247),calc(var(--q) * 77)) scale(.4)}

.wd-view{position:relative;height:100%;overflow:hidden;background:var(--paper);container-type:inline-size}
.wd-lap-screen{aspect-ratio:540 / 352;padding:calc(var(--q) * 10);border-radius:calc(var(--q) * 18) calc(var(--q) * 18) calc(var(--q) * 6) calc(var(--q) * 6);background:#1B1744;border:1px solid rgba(183,168,255,.24);box-shadow:0 calc(var(--q) * 40) calc(var(--q) * 70) calc(var(--q) * -30) rgba(0,0,0,.8)}
.wd-lap-screen .wd-view{border-radius:calc(var(--q) * 8)}
.wd-lap-base{position:relative;margin:0 -5.556%;aspect-ratio:600 / 16;border-radius:calc(var(--q) * 2) calc(var(--q) * 2) calc(var(--q) * 16) calc(var(--q) * 16);background:linear-gradient(180deg,#2C2768,#191540);border:1px solid rgba(183,168,255,.2)}
.wd-lap-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:38%;margin-left:-7.5%;border-radius:0 0 calc(var(--q) * 6) calc(var(--q) * 6);background:rgba(8,6,24,.55)}
.wd-tab,.wd-ph{height:calc(var(--q) * var(--h));background:#1B1744;border:1px solid rgba(183,168,255,.28);box-shadow:0 calc(var(--q) * 40) calc(var(--q) * 70) calc(var(--q) * -30) rgba(0,0,0,.85)}
.wd-tab{padding:calc(var(--q) * var(--w) * .04);border-radius:calc(var(--q) * var(--w) * .085)}
.wd-tab .wd-view{border-radius:calc(var(--q) * var(--w) * .045)}
.wd-tab::before{content:"";position:absolute;left:50%;top:calc(var(--q) * var(--w) * .014);width:calc(var(--q) * 5);height:calc(var(--q) * 5);margin-left:calc(var(--q) * -2.5);border-radius:50%;background:rgba(183,168,255,.3)}
.wd-ph{padding:calc(var(--q) * var(--w) * .036);border-radius:calc(var(--q) * var(--w) * .17)}
.wd-ph .wd-view{border-radius:calc(var(--q) * var(--w) * .135)}

/* laptop page: the full slide, panel on the left 40% */
.wd-pl{--q:calc(100cqw / 520);position:relative;height:100%}
.wd-lap-bar{position:absolute;left:0;right:0;top:0;height:calc(var(--q) * 26);display:flex;align-items:center;gap:calc(var(--q) * 6);padding:0 calc(var(--q) * 12);background:#E4DEFB}
.wd-lap-bar i{width:calc(var(--q) * 7);height:calc(var(--q) * 7);border-radius:50%;background:rgba(18,15,46,.2)}
.wd-lap-bar span{width:calc(var(--q) * 170);height:calc(var(--q) * 12);margin:0 auto;border-radius:99px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(18,15,46,.08)}
.wd-lap-slide{position:absolute;left:0;right:0;top:calc(var(--q) * 26);bottom:0}
.wd-panel{position:absolute;left:0;top:0;bottom:0;width:40%;overflow:hidden;background:var(--violet);color:var(--paper)}
.wd-mono{position:absolute;color:var(--paper)}
.wd-panel .wd-mono{left:calc(var(--q) * 20);top:calc(var(--q) * 20);width:calc(var(--q) * 20);height:calc(var(--q) * 20)}
.wd-copy{position:absolute;left:calc(40% + var(--q) * 26);right:calc(var(--q) * 22);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.wd-eb{display:block;font:500 max(7.5px,calc(var(--q) * 11))/1.25 var(--sans);letter-spacing:.1em;color:var(--violet)}
.wd-eb .g{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.wd-title{display:block;margin-top:calc(var(--q) * 12);font:600 calc(var(--q) * 27)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.wd-sub{display:block;margin-top:calc(var(--q) * 14);font:400 max(8.5px,calc(var(--q) * 13.5))/1.45 var(--sans);color:var(--ink-2)}
.wd-sub .g{display:inline-block}
.wd-num{position:absolute;right:calc(var(--q) * 22);top:calc(var(--q) * 22);font:500 max(7.5px,calc(var(--q) * 11))/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5);font-variant-numeric:tabular-nums}

/* tablet and phone pages: panel on top, the next page peeks below */
.wd-pt{--q:calc(100cqw / 300)}
.wd-pp{--q:calc(100cqw / 204)}
.wd-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(var(--q) * 30);padding:0 calc(var(--q) * 18) 0 calc(var(--q) * 20)}
.wd-time{font:600 calc(var(--q) * 9.5)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.wd-bat{width:calc(var(--q) * 17);height:calc(var(--q) * 8);border-radius:calc(var(--q) * 2.5);background:rgba(18,15,46,.62)}
.wd-island{position:absolute;left:50%;top:calc(var(--q) * 7);width:calc(var(--q) * 58);height:calc(var(--q) * 17);margin-left:calc(var(--q) * -29);border-radius:99px;background:var(--night)}
.wd-pt .wd-status{height:calc(var(--q) * 24);padding:0 calc(var(--q) * 18)}
.wd-pt .wd-time{font-size:calc(var(--q) * 8.5)}
.wd-pt .wd-bat{width:calc(var(--q) * 15);height:calc(var(--q) * 7)}
.wd-flow{padding:calc(var(--q) * 2) calc(var(--q) * 10) 0}
.wd-pt .wd-flow{padding:calc(var(--q) * 4) calc(var(--q) * 16) 0}
.wd-fpanel{position:relative;height:calc(var(--q) * 124);overflow:hidden;border-radius:calc(var(--q) * 14);background:var(--violet);color:var(--paper)}
.wd-pt .wd-fpanel{height:calc(var(--q) * 140)}
.wd-fpanel .wd-mono{left:calc(var(--q) * 12);top:calc(var(--q) * 12);width:calc(var(--q) * 16);height:calc(var(--q) * 16)}
.wd-fcopy{padding:calc(var(--q) * 14) calc(var(--q) * 6) 0}
.wd-fcopy .wd-eb{font-size:max(7.5px,calc(var(--q) * 9.5));line-height:1.4}
.wd-pp .wd-eb .g{display:block}
.wd-pp .wd-eb .dot{display:none}
.wd-fcopy .wd-title{margin-top:calc(var(--q) * 7);font-size:calc(var(--q) * 19);line-height:1.1}
.wd-fcopy .wd-sub{margin-top:calc(var(--q) * 8);font-size:max(8px,calc(var(--q) * 10.5))}
.wd-pt .wd-fcopy{padding:calc(var(--q) * 16) calc(var(--q) * 4) 0}
.wd-pt .wd-fcopy .wd-title{margin-top:calc(var(--q) * 9);font-size:calc(var(--q) * 24)}
.wd-pt .wd-fcopy .wd-sub{margin-top:calc(var(--q) * 10);font-size:max(8px,calc(var(--q) * 11.5))}
.wd-next{margin:calc(var(--q) * 16) calc(var(--q) * 6) 0;padding-top:calc(var(--q) * 14);border-top:1px solid rgba(18,15,46,.1)}
.wd-pt .wd-next{margin:calc(var(--q) * 16) calc(var(--q) * 4) 0}
.wd-kick{display:block;width:calc(var(--q) * 26);height:calc(var(--q) * 4);border-radius:9px;background:var(--violet)}
.wd-nh{display:block;margin:calc(var(--q) * 9) 0 calc(var(--q) * 11);font:600 calc(var(--q) * 15)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wd-pt .wd-nh{font-size:calc(var(--q) * 16)}
.wd-row{display:flex;align-items:center;gap:calc(var(--q) * 9);height:calc(var(--q) * 14);margin-bottom:calc(var(--q) * 10)}
.wd-row b{flex:none;width:calc(var(--q) * 12);height:calc(var(--q) * 12);border-radius:50%;background:var(--violet)}
.wd-row i{height:calc(var(--q) * 6);border-radius:9px;background:rgba(18,15,46,.22)}
.wd-weeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--q) * 8)}
.wd-weeks span{display:grid;gap:calc(var(--q) * 7);padding:calc(var(--q) * 11);border-radius:calc(var(--q) * 10);background:rgba(123,92,255,.08)}
.wd-weeks b{width:calc(var(--q) * 10);height:calc(var(--q) * 10);border-radius:50%;background:var(--violet)}
.wd-weeks i{height:calc(var(--q) * 5);border-radius:9px;background:rgba(18,15,46,.2)}
.wd-weeks i + i{width:62%}

/* the screen switch under the stage, on the same clock as the devices */
.wd-seg{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:calc(var(--q) * 8) auto 0;padding:5px;border-radius:999px;background:rgba(18,15,46,.82);box-shadow:inset 0 0 0 1px var(--line-2)}
.wd-seg-i{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.wd-seg-i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(123,92,255,.5);box-shadow:inset 0 0 0 1px rgba(183,168,255,.55);opacity:0}
.wd-seg-i svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* narrow stage: taller, so each device stays large */
@container wd-hm (max-width:479px){
  .wd-stage{aspect-ratio:600 / 760}
  .wd-lap{--x:20;--y:190;--w:560;--still:translate(0,calc(var(--q) * -207)) scale(.8)}
  .wd-tab{--x:60;--y:60;--w:480;--h:640;--still:translate(calc(var(--q) * -96),calc(var(--q) * 174)) scale(.58)}
  .wd-ph{--x:135;--y:40;--w:330;--h:680;--still:translate(calc(var(--q) * 149),calc(var(--q) * 183)) scale(.52)}
}

/* ---------- Reflowed, not shrunk: one page, three layouts ---------- */
.wd-rf{container:wd-rf / inline-size}
.wd-rf-board{position:relative;padding:22px 28px 30px;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9);background:
  radial-gradient(60% 70% at 50% 45%,rgba(123,92,255,.16),transparent 72%),
  linear-gradient(rgba(183,168,255,.055) 1px,transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg,rgba(183,168,255,.055) 1px,transparent 1px) 0 0 / 28px 28px,
  var(--night-2)}
.wd-rf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:32px}
.wd-rf-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wd-rf-key li{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 6px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.wd-rf-key li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(123,92,255,.26);box-shadow:inset 0 0 0 1px rgba(183,168,255,.6);opacity:0}
.wd-rf-key b,.wd-rb > b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--violet);font:600 13px/1 var(--display);color:#fff}
.wd-rf-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr) minmax(0,.4615fr);column-gap:clamp(20px,4.4cqw,56px);row-gap:28px;align-items:start}
.wd-rf-col{min-width:0}
.wd-rf-frame{position:relative;background:rgba(14,12,36,.72);box-shadow:inset 0 0 0 1.5px rgba(183,168,255,.45)}
.is-lap .wd-rf-frame{aspect-ratio:16 / 10;border-radius:10px}
.is-tab .wd-rf-frame{aspect-ratio:3 / 4;border-radius:16px}
.is-ph .wd-rf-frame{aspect-ratio:9 / 19.5;border-radius:20px}
.is-lap .wd-rf-frame::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-11px;height:4px;border-radius:4px;background:rgba(183,168,255,.45)}
.wd-rf-bar{position:absolute;left:0;right:0;top:0;height:8%;border-bottom:1px dashed rgba(183,168,255,.3)}
.is-tab .wd-rf-bar,.is-ph .wd-rf-bar{height:5%}
.is-ph .wd-rf-bar::after{content:"";position:absolute;left:50%;top:30%;width:28%;height:40%;margin-left:-14%;border-radius:99px;background:rgba(183,168,255,.35)}

.wd-rb{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:12%;padding:0 7%;border-radius:6px;border:1.5px dashed rgba(183,168,255,.55);background:rgba(183,168,255,.07)}
.wd-rb > b{position:absolute;left:-10px;top:-10px;z-index:2;box-shadow:0 0 0 3px var(--night-2)}
.wd-rb::after{content:"";position:absolute;inset:-6px;border-radius:10px;box-shadow:0 0 0 2px var(--lav),0 0 0 7px rgba(183,168,255,.16);opacity:0;pointer-events:none}
.wd-rb i{display:block;flex:none;border-radius:99px}
.wd-rb-1{border:0;background:radial-gradient(60% 50% at 70% 70%,rgba(183,168,255,.45),transparent 70%),linear-gradient(160deg,#8F75FF,var(--violet) 60%)}
.wd-rb-2 i{height:24%;background:rgba(242,239,255,.85)}
.wd-rb-2 i:last-child{width:68%}
.wd-rb-3 > b{left:auto;right:-12px;top:50%;margin-top:-11px}
.wd-rb-3 i{height:40%;width:82%;background:rgba(185,179,218,.55)}
.wd-rb-4{border-color:rgba(183,168,255,.35);background:rgba(183,168,255,.04)}
.wd-rb-4 i{height:9%;background:rgba(185,179,218,.35)}
.wd-rb-4 i:first-of-type{width:38%;background:rgba(123,92,255,.6)}

.is-lap .wd-rb-1{left:0;top:8%;bottom:0;width:40%;border-radius:0 0 0 9px}
.is-lap .wd-rb-2{left:46%;top:28%;width:44%;height:22%}
.is-lap .wd-rb-3{left:46%;top:57%;width:34%;height:9%}
.is-lap .wd-rb-4{right:2.5%;top:62%;width:4%;height:24%;padding:0}
.is-lap .wd-rb-4 i{display:none}
.is-lap .wd-rb-4::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -4px;border-top:1.5px solid var(--lav);border-right:1.5px solid var(--lav);transform:rotate(45deg)}
.is-tab .wd-rb-1{left:6%;right:6%;top:8%;height:30%}
.is-tab .wd-rb-2{left:6%;width:76%;top:43%;height:14%}
.is-tab .wd-rb-3{left:6%;width:56%;top:61%;height:5%}
.is-tab .wd-rb-4{left:6%;right:6%;top:71%;bottom:4%;justify-content:flex-start;padding-top:6%}
.is-ph .wd-rb-1{left:7%;right:7%;top:8%;height:19%}
.is-ph .wd-rb-2{left:7%;right:9%;top:31%;height:15%;gap:10%}
.is-ph .wd-rb-2 i{height:18%}
.is-ph .wd-rb-3{left:7%;width:66%;top:49.5%;height:4.5%}
.is-ph .wd-rb-4{left:7%;right:7%;top:58%;bottom:3%;justify-content:flex-start;padding-top:9%;gap:6%}
.is-ph .wd-rb-4 i{height:4%}

.wd-rf-cap{display:grid;justify-items:center;gap:3px;margin-top:24px;text-align:center}
.wd-rf-cap b{font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.wd-rf-cap span{font-size:13px;line-height:1.4;color:var(--muted)}

@container wd-rf (max-width:599px){
  .wd-rf-board{padding:16px 16px 22px}
  .wd-rf-top{margin-bottom:26px}
  .wd-rf-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lap lap" "tab ph";column-gap:16px}
  .wd-rf-col.is-lap{grid-area:lap}
  .wd-rf-col.is-tab{grid-area:tab}
  .wd-rf-col.is-ph{grid-area:ph}
  .is-lap .wd-rf-frame{width:88%;margin-inline:auto}
  .is-ph .wd-rf-frame{width:61.5%;margin-inline:auto}
}

/* ---------- Reading on a phone ---------- */
.wd-mob{container-name:wd-mob}
.wd-mob-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pf pf" "n1 n2" "n3 n4";gap:26px 18px}
.wd-pf{grid-area:pf;position:relative;justify-self:center;width:min(100%,256px);aspect-ratio:220 / 452;container-type:inline-size}
.wd-pf-in{--u:calc(100cqw / 220);position:absolute;inset:0;padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 36);background:#1B1744;border:1px solid rgba(183,168,255,.3);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.wd-pf-view{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--u) * 29);background:var(--paper)}
.wd-pf-zone{position:absolute;left:-30%;right:-30%;bottom:calc(var(--u) * -150);height:calc(var(--u) * 330);border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.16),rgba(123,92,255,.06) 62%,transparent)}
.wd-pf-status{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 30);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u) * 20) 0 calc(var(--u) * 22);font:600 calc(var(--u) * 9.5)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.wd-pf-island{position:absolute;left:50%;top:calc(var(--u) * 7);width:calc(var(--u) * 60);height:calc(var(--u) * 17);margin-left:calc(var(--u) * -30);border-radius:99px;background:var(--night)}
.wd-pf-bat{width:calc(var(--u) * 17);height:calc(var(--u) * 8);border-radius:calc(var(--u) * 2.5);background:rgba(18,15,46,.62)}
.wd-pf-head{position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);top:calc(var(--u) * 34);height:calc(var(--u) * 22);display:flex;align-items:center;gap:calc(var(--u) * 7)}
.wd-pf-logo{display:grid;place-items:center;flex:none;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:calc(var(--u) * 6);background:var(--violet);color:var(--paper)}
.wd-pf-logo svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12)}
.wd-pf-name{font:600 max(9px,calc(var(--u) * 11))/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wd-pf-lang{margin-left:auto;padding:calc(var(--u) * 4) calc(var(--u) * 7);border-radius:99px;box-shadow:inset 0 0 0 1px rgba(18,15,46,.18);font:500 max(8px,calc(var(--u) * 9))/1 var(--sans);letter-spacing:.06em;color:var(--ink-2)}
.wd-pf-port{position:absolute;left:0;right:0;top:calc(var(--u) * 62);bottom:calc(var(--u) * 96);overflow:hidden}
.wd-pf-track{display:flex;width:300%;height:100%}
.wd-pf-page{position:relative;flex:none;width:33.3334%;height:100%;padding:calc(var(--u) * 2) calc(var(--u) * 12) 0}
.wd-pf-panel{position:relative;height:calc(var(--u) * 116);overflow:hidden;border-radius:calc(var(--u) * 14);background:var(--violet)}
.wd-pf-eb{display:block;margin-top:calc(var(--u) * 12);font:500 max(7.5px,calc(var(--u) * 9))/1.45 var(--sans);letter-spacing:.1em;color:var(--violet)}
.wd-pf-t{display:block;margin-top:calc(var(--u) * 6);font:600 calc(var(--u) * 19)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.wd-pf-s{display:block;margin-top:calc(var(--u) * 7);font:400 max(8px,calc(var(--u) * 10))/1.45 var(--sans);color:var(--ink-2)}
.wd-pf-kick{display:block;width:calc(var(--u) * 24);height:calc(var(--u) * 4);margin-top:calc(var(--u) * 8);border-radius:9px;background:var(--violet)}
.wd-pf-h{display:block;margin:calc(var(--u) * 9) 0 calc(var(--u) * 12);font:600 calc(var(--u) * 17)/1.15 var(--display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.wd-pf-weeks{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 7)}
.wd-pf-weeks li{display:grid;grid-template-columns:calc(var(--u) * 20) minmax(0,1fr);align-items:center;gap:calc(var(--u) * 9);padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:rgba(123,92,255,.08)}
.wd-pf-weeks b{display:grid;place-items:center;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:var(--violet);font:600 calc(var(--u) * 10)/1 var(--display);color:#fff}
.wd-pf-weeks span{display:grid;gap:calc(var(--u) * 2);min-width:0;font:400 max(7.5px,calc(var(--u) * 9))/1.3 var(--sans);color:var(--ink-2)}
.wd-pf-weeks strong{overflow:hidden;font:500 max(8px,calc(var(--u) * 10.5))/1.25 var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.wd-pf-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 16)}
.wd-pf-steps::before{content:"";position:absolute;left:calc(var(--u) * 6);top:calc(var(--u) * 10);bottom:calc(var(--u) * 24);width:calc(var(--u) * 2);background:rgba(123,92,255,.3)}
.wd-pf-steps li{position:relative;display:grid;gap:calc(var(--u) * 3);padding-left:calc(var(--u) * 24);font:400 max(7.5px,calc(var(--u) * 9.5))/1.35 var(--sans);color:var(--ink-2)}
.wd-pf-steps li::before{content:"";position:absolute;left:0;top:calc(var(--u) * 1);width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 calc(var(--u) * 3) var(--violet)}
.wd-pf-steps li:last-child::before{background:var(--violet)}
.wd-pf-steps strong{font:600 max(8.5px,calc(var(--u) * 12))/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wd-pf-finger{position:absolute;right:calc(var(--u) * 24);top:44%;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:rgba(18,15,46,.14);box-shadow:inset 0 0 0 calc(var(--u) * 2) rgba(255,255,255,.8),0 0 0 calc(var(--u) * 6) rgba(123,92,255,.14);opacity:0}
.wd-pf-dots{position:absolute;left:50%;bottom:calc(var(--u) * 74);display:flex;gap:calc(var(--u) * 7);transform:translateX(-50%)}
.wd-pf-dots i{width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:rgba(18,15,46,.2)}
.wd-pf-dots b{position:absolute;left:0;top:0;width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:var(--violet);box-shadow:0 0 0 calc(var(--u) * 2.5) rgba(123,92,255,.22)}
.wd-pf-bar{position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);bottom:calc(var(--u) * 18);display:flex;gap:calc(var(--u) * 8)}
.wd-pf-cta{flex:1;display:grid;place-items:center;min-width:0;height:calc(var(--u) * 40);border-radius:99px;background:var(--violet);box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -8) rgba(123,92,255,.8);font:500 max(9px,calc(var(--u) * 12))/1 var(--sans);color:#fff;white-space:nowrap}
.wd-pf-home{position:absolute;left:50%;bottom:calc(var(--u) * 6);width:calc(var(--u) * 72);height:calc(var(--u) * 4);margin-left:calc(var(--u) * -36);border-radius:9px;background:rgba(18,15,46,.5)}
.wd-pin{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:2;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--night),0 0 0 6px rgba(183,168,255,.3);font:600 13px/1 var(--display);color:#fff}

.wd-note{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;margin:0}
.wd-note > b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.18);font:600 13px/1 var(--display);color:#fff}
.wd-note > span{display:grid;gap:4px;min-width:0;font-size:14px;line-height:1.45;color:var(--muted)}
.wd-note strong{font:600 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.wd-note.is-1{grid-area:n1}
.wd-note.is-2{grid-area:n2}
.wd-note.is-3{grid-area:n3}
.wd-note.is-4{grid-area:n4}

@container wd-mob (min-width:580px){
  .wd-mob-in{grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);grid-template-areas:"n2 pf n1" "n3 pf n4";gap:0 26px;align-items:center}
  .wd-pf{width:100%}
  .wd-note.is-2,.wd-note.is-3{grid-template-columns:minmax(0,1fr) 26px;text-align:right}
  .wd-note.is-2 > b,.wd-note.is-3 > b{order:2}
}

/* ---------- Update without resending: the version timeline ---------- */
.wd-rev{container-name:wd-rev}
.wd-rev-body{padding:18px 18px 20px}
.wd-rev-link{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.wd-rev-ic{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.18)}
.wd-rev-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wd-rev-lt{display:grid;gap:2px;min-width:0}
.wd-rev-lt b{font-weight:500;font-size:15px;line-height:1.3;color:var(--paper)}
.wd-rev-lt span{font-size:13px;line-height:1.35;color:var(--muted)}
.wd-rev-same{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 8px;border-radius:999px;background:var(--lav);font:500 13px/1 var(--sans);color:var(--night);white-space:nowrap}
.wd-rev-same svg{width:15px;height:15px;fill:none;stroke:var(--night);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd-vers{position:relative;list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.wd-vers::before{content:"";position:absolute;left:17px;top:-16px;height:40px;width:2px;background:var(--lav)}
.wd-ver:not(:last-child)::before{content:"";position:absolute;left:17px;top:24px;bottom:-38px;width:2px;background:linear-gradient(var(--lav),rgba(183,168,255,.35))}
.wd-ver{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.wd-ver-node{position:relative;z-index:1;justify-self:center;width:14px;height:14px;margin-top:17px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 2px var(--lav)}
.wd-ver.is-cur .wd-ver-node{background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.28)}
.wd-ver.is-cur .wd-ver-node::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lav);opacity:0}
.wd-ver-card{min-width:0;padding:14px 16px;border-radius:16px;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.wd-ver.is-cur .wd-ver-card{background:linear-gradient(180deg,rgba(123,92,255,.16),rgba(123,92,255,.05));box-shadow:inset 0 0 0 1px rgba(183,168,255,.38)}
.wd-ver-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.wd-ver-top > b{font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.wd-ver-tag{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;background:rgba(183,168,255,.14);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.wd-ver-tag .live{width:6px;height:6px}
.wd-ver-tag.is-kept{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.wd-ver-when{margin-left:auto;font-size:13px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-thumbs{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wd-thumbs li{position:relative;aspect-ratio:16 / 10;border-radius:4px;background:
  linear-gradient(var(--violet),var(--violet)) 14% 22% / 30% 9% no-repeat,
  linear-gradient(rgba(18,15,46,.32),rgba(18,15,46,.32)) 14% 52% / 64% 9% no-repeat,
  linear-gradient(rgba(18,15,46,.18),rgba(18,15,46,.18)) 14% 74% / 44% 8% no-repeat,
  var(--paper)}
.wd-thumbs li.is-cover{background:
  linear-gradient(var(--violet),var(--violet)) 0 0 / 38% 100% no-repeat,
  linear-gradient(rgba(18,15,46,.4),rgba(18,15,46,.4)) 86% 42% / 44% 11% no-repeat,
  linear-gradient(rgba(18,15,46,.2),rgba(18,15,46,.2)) 76% 64% / 32% 8% no-repeat,
  var(--paper)}
.wd-thumbs li.is-end{background:linear-gradient(var(--paper),var(--paper)) 50% 45% / 46% 10% no-repeat,linear-gradient(rgba(242,239,255,.5),rgba(242,239,255,.5)) 50% 66% / 28% 8% no-repeat,var(--violet)}
.wd-thumbs li.is-new{box-shadow:0 0 0 2px var(--lav),0 0 0 5px rgba(183,168,255,.2)}
.wd-thumbs li.is-new span{position:absolute;right:-8px;top:-9px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--lav);font:600 14px/1 var(--display);color:var(--night)}
.wd-ver:not(.is-cur) .wd-thumbs li{opacity:.72}
.wd-ver-note{margin-top:12px;font-size:14px;line-height:1.45;color:var(--paper)}
.wd-ver-read{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.wd-ver-read + .wd-ver-read{margin-top:10px;padding-top:10px}
.wd-ver-rt{display:grid;gap:1px;min-width:0}
.wd-ver-rt b{font-weight:500;font-size:14px;line-height:1.3;color:var(--paper)}
.wd-ver-rt span{font-size:13px;line-height:1.35;color:var(--muted)}

@container wd-rev (max-width:459px){
  .wd-rev .mini-deck{display:none}
  .wd-rev-body{padding:14px 14px 16px}
  .wd-rev-link{grid-template-columns:36px minmax(0,1fr)}
  .wd-rev-same{grid-column:2;justify-self:start}
  .wd-ver{gap:10px}
  .wd-ver-card{padding:12px}
  .wd-thumbs{gap:4px}
}

/* ---------- Your brand on every page: kit and pages ---------- */
.wd-brand{container:wd-brand / inline-size}
.wd-brand-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.wd-kit{display:flex;flex-direction:column;padding:20px 22px;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9)}
.wd-kit-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.wd-kit-on{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.2;color:var(--paper)}
.wd-kit-on svg{width:15px;height:15px;fill:none;stroke:var(--lav);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd-kit-sec{display:grid;align-content:start;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.wd-kit-sec:last-child{border-bottom:0;padding-bottom:2px}
.wd-kit-l{font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wd-kit-l .soon{margin-left:10px}
.wd-kit-mark{display:flex;align-items:center;gap:12px;min-width:0}
.wd-kit-tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--violet);color:var(--paper);box-shadow:0 10px 24px -12px rgba(123,92,255,.9)}
.wd-kit-tile svg{width:24px;height:24px}
.wd-kit-wm{font:600 20px/1 var(--display);letter-spacing:-.035em;color:var(--paper);white-space:nowrap}
.wd-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.wd-sw li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center;min-width:0}
.wd-sw i{grid-row:1 / 3;width:32px;height:32px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.wd-sw b{font-weight:500;font-size:14px;line-height:1.25;color:var(--paper)}
.wd-sw span{font-size:13px;line-height:1.25;color:var(--muted);font-variant-numeric:tabular-nums}
.wd-fonts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wd-fonts li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center}
.wd-fonts i{grid-row:1 / 3;display:grid;place-items:center;width:48px;height:44px;border-radius:12px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line);font-size:20px;line-height:1;color:var(--paper)}
.wd-fonts .is-h i,.wd-fonts .is-h b{font-family:var(--display);font-weight:600}
.wd-fonts .is-b i{font-family:var(--sans);font-weight:400}
.wd-fonts b{font-weight:500;font-size:15px;line-height:1.25;color:var(--paper)}
.wd-fonts span{font-size:13px;line-height:1.25;color:var(--muted)}

.wd-pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:center}
.wd-bp{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:12px;background:var(--paper);container-type:inline-size;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.wd-bp-in{--s:calc(100cqw / 400);position:absolute;inset:0}
.wd-bp-mono{position:absolute;left:calc(var(--s) * 24);top:calc(var(--s) * 22);width:calc(var(--s) * 16);height:calc(var(--s) * 16);color:var(--violet)}
.wd-bp-eb{display:block;font:500 max(6.5px,calc(var(--s) * 9))/1.35 var(--sans);letter-spacing:.1em;color:var(--violet)}
.wd-bp-eb .g{display:inline-block;white-space:nowrap}
.wd-bp-t{display:block;font:600 calc(var(--s) * 23)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.wd-bp-s{display:block;margin-top:calc(var(--s) * 10);font:400 max(6.5px,calc(var(--s) * 10))/1.45 var(--sans);color:var(--ink-2)}
.wd-bp-n{position:absolute;right:calc(var(--s) * 18);top:calc(var(--s) * 22);font:500 max(6.5px,calc(var(--s) * 9))/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5);font-variant-numeric:tabular-nums}

.wd-bp-panel{position:absolute;left:0;top:0;bottom:0;width:38%;overflow:hidden;background:var(--violet)}
.wd-bp-panel .wd-bp-mono{left:calc(var(--s) * 16);top:calc(var(--s) * 16);color:var(--paper)}
.wd-bp-copy{position:absolute;left:calc(38% + var(--s) * 20);right:calc(var(--s) * 18);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.wd-bp-copy .wd-bp-t{margin-top:calc(var(--s) * 8)}

.wd-bp-plan .wd-bp-eb,.wd-bp-road .wd-bp-eb{position:absolute;left:calc(var(--s) * 24);top:calc(var(--s) * 54)}
.wd-bp-plan .wd-bp-t,.wd-bp-road .wd-bp-t{position:absolute;left:calc(var(--s) * 24);right:calc(var(--s) * 24);top:calc(var(--s) * 70);font-size:calc(var(--s) * 24)}
.wd-bp-weeks{position:absolute;left:calc(var(--s) * 24);right:calc(var(--s) * 24);bottom:calc(var(--s) * 26);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s) * 10)}
.wd-bp-weeks > span{display:grid;gap:calc(var(--s) * 7);padding:calc(var(--s) * 12) calc(var(--s) * 9);border-radius:calc(var(--s) * 10);background:rgba(123,92,255,.1)}
.wd-bp-weeks b{font:600 max(6.5px,calc(var(--s) * 10))/1 var(--display);color:var(--violet);white-space:nowrap}
.wd-bp-weeks i{height:calc(var(--s) * 5);border-radius:9px;background:rgba(18,15,46,.22)}
.wd-bp-weeks i + i{width:64%}
.wd-bp-line{position:absolute;left:calc(var(--s) * 24);right:calc(var(--s) * 24);bottom:calc(var(--s) * 34);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s) * 8)}
.wd-bp-line::before{content:"";position:absolute;left:calc(var(--s) * 8);right:30%;top:calc(var(--s) * 7);height:calc(var(--s) * 3);border-radius:9px;background:linear-gradient(90deg,var(--violet),var(--lav))}
.wd-bp-line > span{position:relative;display:grid;justify-items:start;gap:calc(var(--s) * 9);font:500 max(6.5px,calc(var(--s) * 10.5))/1.3 var(--sans);color:var(--ink)}
.wd-bp-line b{width:calc(var(--s) * 17);height:calc(var(--s) * 17);border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 calc(var(--s) * 4) var(--violet)}
.wd-bp-line > span:last-child b{background:var(--violet)}

.wd-bp-end{background:var(--violet)}
.wd-bp-end .wd-bp-in{background:radial-gradient(70% 90% at 88% 100%,rgba(183,168,255,.5),transparent 70%)}
.wd-bp-end .wd-bp-mono{color:var(--paper)}
.wd-bp-end .wd-bp-t{position:absolute;left:calc(var(--s) * 24);right:calc(var(--s) * 24);top:calc(var(--s) * 84);font-size:calc(var(--s) * 28);color:var(--paper)}
.wd-bp-ask{position:absolute;left:calc(var(--s) * 24);top:calc(var(--s) * 136);font:500 max(6.5px,calc(var(--s) * 11))/1.3 var(--sans);color:rgba(242,239,255,.88);white-space:nowrap}
.wd-bp-wm{position:absolute;left:calc(var(--s) * 24);bottom:calc(var(--s) * 22);font:600 max(7px,calc(var(--s) * 13))/1 var(--display);letter-spacing:-.03em;color:var(--paper)}
.wd-bp-end .wd-bp-n{color:rgba(242,239,255,.75)}

@container wd-brand (min-width:560px) and (max-width:859px){
  .wd-kit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1fr);column-gap:24px}
  .wd-kit-head{grid-column:1 / -1}
  .wd-kit-sec,.wd-kit-sec:last-child{padding:18px 0 4px;border-bottom:0}
}
@container wd-brand (min-width:860px){
  .wd-brand-in{grid-template-columns:300px minmax(0,1fr);gap:28px}
  .wd-kit{justify-content:space-between}
}

/* ---------- Built for focus: the reader's window ---------- */
.wd-fc{container-name:wd-fc}
.wd-fw{overflow:hidden;border-radius:var(--radius);background:var(--night-3);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9)}
.wd-fw-bar{position:relative;display:flex;align-items:center;gap:14px;height:48px;padding:0 16px;background:rgba(14,12,36,.55);border-bottom:1px solid var(--line)}
.wd-fw-dots{display:flex;flex:none;gap:6px}
.wd-fw-dots i{width:10px;height:10px;border-radius:50%;background:rgba(183,168,255,.25)}
.wd-fw-url{flex:1;min-width:0;height:28px;padding:0 12px;border-radius:999px;background:rgba(183,168,255,.08);font:500 13px/28px var(--sans);color:var(--paper);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-fw-url svg{display:inline-block;width:14px;height:14px;margin:-2px 8px 0 0;vertical-align:middle;fill:none;stroke:var(--lav);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wd-fw-load{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(0);opacity:0}
.wd-fw-stage{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--paper);container-type:inline-size}
.wd-fw-pg{--s:calc(100cqw / 600);position:absolute;inset:0;padding:calc(var(--s) * 44) calc(var(--s) * 48)}
.wd-fw-b{opacity:0}
.wd-fw-eb{display:block;font:500 max(7.5px,calc(var(--s) * 12))/1.2 var(--sans);letter-spacing:.12em;color:var(--violet)}
.wd-fw-t{display:block;max-width:calc(var(--s) * 440);margin-top:calc(var(--s) * 12);font:600 calc(var(--s) * 38)/1.06 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.wd-fw-n{position:absolute;right:calc(var(--s) * 40);top:calc(var(--s) * 44);font:500 max(7.5px,calc(var(--s) * 12))/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5);font-variant-numeric:tabular-nums}
.wd-fw-weeks{position:absolute;left:calc(var(--s) * 48);right:calc(var(--s) * 48);bottom:calc(var(--s) * 48);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s) * 14)}
.wd-fw-weeks > span{display:grid;align-content:start;gap:calc(var(--s) * 8);min-height:calc(var(--s) * 120);padding:calc(var(--s) * 16) calc(var(--s) * 14);border-radius:calc(var(--s) * 14);background:rgba(123,92,255,.09);font:500 max(8px,calc(var(--s) * 15))/1.3 var(--sans);color:var(--ink)}
.wd-fw-weeks b{font:600 max(7.5px,calc(var(--s) * 12))/1 var(--display);letter-spacing:.02em;color:var(--violet)}
.wd-fw-road{position:absolute;left:calc(var(--s) * 48);right:calc(var(--s) * 48);bottom:calc(var(--s) * 52);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s) * 18)}
.wd-fw-road::before{content:"";position:absolute;left:calc(var(--s) * 12);right:30%;top:calc(var(--s) * 11);height:calc(var(--s) * 4);border-radius:9px;background:linear-gradient(90deg,var(--violet),var(--lav))}
.wd-fw-road > span{position:relative;display:grid;justify-items:start;gap:calc(var(--s) * 6);font:400 max(8px,calc(var(--s) * 14))/1.35 var(--sans);color:var(--ink-2)}
.wd-fw-road b{width:calc(var(--s) * 26);height:calc(var(--s) * 26);margin-bottom:calc(var(--s) * 8);border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 calc(var(--s) * 6) var(--violet)}
.wd-fw-road > span:last-child b{background:var(--violet)}
.wd-fw-road strong{font:600 max(8.5px,calc(var(--s) * 17))/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wd-fw-hud{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;border-top:1px solid var(--line)}
.wd-keys{display:flex;flex:none;gap:6px}
.wd-key{position:relative;isolation:isolate;display:grid;place-items:center;width:38px;height:34px;border-radius:9px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -3px 0 rgba(183,168,255,.12);font:500 16px/1 var(--sans);color:var(--paper)}
.wd-key::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--violet);opacity:0}
.wd-fw-count{display:grid;flex:none;font:500 14px/1.2 var(--sans);color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.wd-fw-count > span{grid-area:1 / 1}
.wd-fw-count .is-b{opacity:0}
.wd-fw-prog{position:relative;flex:1;min-width:56px;height:4px;overflow:hidden;border-radius:4px;background:rgba(183,168,255,.14)}
.wd-fw-prog i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(.2857)}
.wd-fw-chips{display:flex;flex-wrap:wrap;gap:6px}
@container wd-fc (max-width:639px){
  .wd-fw-chips{flex-basis:100%}
}
@container wd-fc (max-width:419px){
  .wd-fw-bar{gap:10px;padding:0 12px}
  .wd-fw-hud{padding:12px}
}

/* ---------- Capability fragments (sized with --q from .cap-visual) ---------- */
.wd-cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--q) * 14);padding:calc(var(--q) * 20)}

.wd-cv-link{display:flex;align-items:center;gap:calc(var(--q) * 10);width:calc(var(--q) * 272);height:calc(var(--q) * 48);padding:0 calc(var(--q) * 6) 0 calc(var(--q) * 16);border-radius:999px;background:rgba(18,15,46,.92);box-shadow:inset 0 0 0 1px rgba(183,168,255,.42),0 0 0 calc(var(--q) * 5) rgba(123,92,255,.12)}
.wd-cv-link svg{flex:none;width:calc(var(--q) * 18);height:calc(var(--q) * 18);fill:none;stroke:var(--lav);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wd-cv-link span{flex:1;min-width:0;overflow:hidden;font:500 calc(var(--q) * 14)/1.2 var(--sans);color:var(--paper);white-space:nowrap;text-overflow:ellipsis}
.wd-cv-link b{display:grid;place-items:center;height:calc(var(--q) * 36);padding:0 calc(var(--q) * 15);border-radius:999px;background:var(--violet);font:500 calc(var(--q) * 13)/1 var(--sans);color:#fff}
.wd-cv-dest{display:flex;gap:calc(var(--q) * 8)}
.wd-cv-dest i{display:grid;place-items:center;height:calc(var(--q) * 30);padding:0 calc(var(--q) * 14);border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px var(--line-2);font:500 calc(var(--q) * 13)/1 var(--sans);color:var(--paper)}

.wd-cv-gcard{display:grid;gap:calc(var(--q) * 10);width:calc(var(--q) * 228);padding:calc(var(--q) * 16);border-radius:calc(var(--q) * 16);background:var(--paper);box-shadow:0 calc(var(--q) * 24) calc(var(--q) * 40) calc(var(--q) * -20) rgba(0,0,0,.9)}
.wd-cv-gh{display:flex;align-items:center;gap:calc(var(--q) * 8);font:600 calc(var(--q) * 13)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.wd-cv-gh i{flex:none;width:calc(var(--q) * 20);height:calc(var(--q) * 20);border-radius:calc(var(--q) * 6);background:var(--violet)}
.wd-cv-field{display:flex;align-items:center;height:calc(var(--q) * 36);padding:0 calc(var(--q) * 12);border-radius:calc(var(--q) * 10);background:#fff;box-shadow:inset 0 0 0 1px rgba(18,15,46,.18);font:400 calc(var(--q) * 13)/1 var(--sans);color:rgba(18,15,46,.6)}
.wd-cv-go{display:grid;place-items:center;height:calc(var(--q) * 36);border-radius:calc(var(--q) * 10);background:var(--violet);font:500 calc(var(--q) * 13)/1 var(--sans);color:#fff}

.wd-cv-ask{flex-direction:row;gap:0}
.wd-cv-pg{position:relative;display:grid;align-content:start;gap:calc(var(--q) * 8);flex:none;width:calc(var(--q) * 128);height:calc(var(--q) * 100);padding:calc(var(--q) * 14);border-radius:calc(var(--q) * 10);background:var(--paper);box-shadow:0 calc(var(--q) * 20) calc(var(--q) * 40) calc(var(--q) * -20) rgba(0,0,0,.9);transform:rotate(-4deg)}
.wd-cv-pg i{height:calc(var(--q) * 6);border-radius:9px;background:rgba(18,15,46,.2)}
.wd-cv-pg i:first-child{width:40%;height:calc(var(--q) * 5);background:var(--violet)}
.wd-cv-pg i:nth-child(2){height:calc(var(--q) * 10);background:var(--ink)}
.wd-cv-pg i:nth-child(4){width:68%}
.wd-cv-pin{position:absolute;right:calc(var(--q) * -10);top:calc(var(--q) * -10);display:grid;place-items:center;width:calc(var(--q) * 26);height:calc(var(--q) * 26);border-radius:50%;background:var(--violet);box-shadow:0 0 0 calc(var(--q) * 3) var(--night-2);font:600 calc(var(--q) * 12)/1 var(--display);color:#fff}
.wd-cv-bub{position:relative;display:grid;gap:calc(var(--q) * 5);flex:none;width:calc(var(--q) * 150);margin-left:calc(var(--q) * -14);padding:calc(var(--q) * 12) calc(var(--q) * 14);border-radius:calc(var(--q) * 16) calc(var(--q) * 16) calc(var(--q) * 16) calc(var(--q) * 4);background:rgba(18,15,46,.95);box-shadow:inset 0 0 0 1px rgba(183,168,255,.42),0 calc(var(--q) * 20) calc(var(--q) * 40) calc(var(--q) * -20) rgba(0,0,0,.9);font:500 calc(var(--q) * 13)/1.35 var(--sans);color:var(--paper);transform:translateY(calc(var(--q) * 20))}
.wd-cv-bub b{font-weight:500;font-size:calc(var(--q) * 11.5);color:var(--lav)}

.wd-cv-lang{gap:calc(var(--q) * 12)}
.wd-cv-codes{display:flex;gap:calc(var(--q) * 6)}
.wd-cv-codes i{display:grid;place-items:center;width:calc(var(--q) * 42);height:calc(var(--q) * 28);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 calc(var(--q) * 12)/1 var(--sans);letter-spacing:.06em;color:var(--paper)}
.wd-cv-codes i.is-on{background:var(--violet);box-shadow:none;color:#fff}
.wd-cv-slide{display:grid;align-content:center;gap:calc(var(--q) * 8);width:calc(var(--q) * 252);height:calc(var(--q) * 110);padding:0 calc(var(--q) * 18) 0 calc(var(--q) * 22);border-radius:calc(var(--q) * 12);border-left:calc(var(--q) * 8) solid var(--violet);background:var(--paper);box-shadow:0 calc(var(--q) * 20) calc(var(--q) * 40) calc(var(--q) * -20) rgba(0,0,0,.9)}
.wd-cv-slide b{font:500 calc(var(--q) * 10)/1 var(--sans);letter-spacing:.12em;color:var(--violet)}
.wd-cv-slide span{font:600 calc(var(--q) * 18)/1.12 var(--display);letter-spacing:-.03em;color:var(--ink)}

.wd-cv-pdf{gap:calc(var(--q) * 6)}
.wd-cv-web,.wd-cv-old{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--q) * 6);width:calc(var(--q) * 224)}
.wd-cv-web{height:calc(var(--q) * 34);padding:0 calc(var(--q) * 14);border-radius:calc(var(--q) * 10);background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px var(--line-2)}
.wd-cv-web i{height:calc(var(--q) * 5);border-radius:9px;background:rgba(242,239,255,.55)}
.wd-cv-web i + i{width:60%;opacity:.6}
.wd-cv-web.is-btn{flex-direction:row;align-items:center;justify-content:space-between}
.wd-cv-web.is-btn i{width:38%}
.wd-cv-web.is-btn span{display:grid;place-items:center;height:calc(var(--q) * 22);padding:0 calc(var(--q) * 10);border-radius:99px;background:var(--violet);font:500 calc(var(--q) * 11)/1 var(--sans);color:#fff;white-space:nowrap}
.wd-cv-old{position:relative;height:calc(var(--q) * 78);padding:calc(var(--q) * 10) calc(var(--q) * 14);border-radius:calc(var(--q) * 6);background:#E7E3F4;box-shadow:0 0 0 calc(var(--q) * 2) var(--lav),0 calc(var(--q) * 16) calc(var(--q) * 30) calc(var(--q) * -16) rgba(0,0,0,.9)}
.wd-cv-old b{position:absolute;right:calc(var(--q) * 8);top:calc(var(--q) * 8);height:calc(var(--q) * 20);padding:0 calc(var(--q) * 7);border-radius:calc(var(--q) * 5);background:var(--ink);font:600 calc(var(--q) * 10)/calc(var(--q) * 20) var(--sans);letter-spacing:.08em;color:var(--paper)}
.wd-cv-old i{height:calc(var(--q) * 6);border-radius:2px;background:rgba(18,15,46,.25)}
.wd-cv-old i:first-of-type{width:58%;height:calc(var(--q) * 10);background:rgba(18,15,46,.5)}
.wd-cv-old i:last-of-type{width:74%}

.wd-cv-tiles{display:grid;grid-template-columns:repeat(2,calc(var(--q) * 112));gap:calc(var(--q) * 12)}
.wd-cv-tiles i{position:relative;aspect-ratio:16 / 10;border-radius:calc(var(--q) * 8);background:var(--paper);box-shadow:0 calc(var(--q) * 14) calc(var(--q) * 26) calc(var(--q) * -14) rgba(0,0,0,.9)}
.wd-cv-tiles .is-a{background:linear-gradient(var(--violet),var(--violet)) 0 0 / 36% 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 82% 42% / 42% 12% no-repeat,linear-gradient(rgba(18,15,46,.25),rgba(18,15,46,.25)) 74% 64% / 26% 8% no-repeat,var(--paper)}
.wd-cv-tiles .is-b{background:linear-gradient(var(--violet),var(--violet)) 0 0 / 100% 36% no-repeat,linear-gradient(var(--ink),var(--ink)) 16% 62% / 56% 12% no-repeat,linear-gradient(rgba(18,15,46,.25),rgba(18,15,46,.25)) 14% 82% / 36% 8% no-repeat,var(--paper)}
.wd-cv-tiles .is-c{background:linear-gradient(var(--lav),var(--lav)) 16% 30% / 28% 8% no-repeat,linear-gradient(var(--paper),var(--paper)) 16% 56% / 60% 12% no-repeat,linear-gradient(rgba(242,239,255,.4),rgba(242,239,255,.4)) 16% 76% / 34% 8% no-repeat,var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.wd-cv-tiles .is-d{background:radial-gradient(circle at 74% 50%,var(--violet) 0 14%,transparent 15%),radial-gradient(circle at 74% 50%,rgba(123,92,255,.3) 0 26%,transparent 27%),linear-gradient(var(--ink),var(--ink)) 14% 42% / 36% 10% no-repeat,linear-gradient(rgba(18,15,46,.25),rgba(18,15,46,.25)) 14% 62% / 26% 8% no-repeat,#E4DEFB}
.wd-cv-tiles i.is-on{box-shadow:0 0 0 calc(var(--q) * 3) var(--night-2),0 0 0 calc(var(--q) * 5) var(--lav),0 calc(var(--q) * 14) calc(var(--q) * 26) calc(var(--q) * -14) rgba(0,0,0,.9)}
.wd-cv-tiles i b{position:absolute;right:calc(var(--q) * -9);top:calc(var(--q) * -9);width:calc(var(--q) * 22);height:calc(var(--q) * 22);border-radius:50%;background:var(--lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E0C24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 62% no-repeat;box-shadow:0 0 0 calc(var(--q) * 3) var(--night-2)}

/* ---------- Entrances: visuals assemble when they reveal ---------- */
.js .wd-rf .wd-rb{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(300ms + var(--b) * 150ms)}
.js .wd-rf.is-in .wd-rb{opacity:1;transform:none}
.js .wd-rev .wd-ver{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(250ms + var(--k) * 260ms)}
.js .is-in .wd-rev .wd-ver{opacity:1;transform:none}
.js .wd-rev .wd-thumbs li.is-new{opacity:0;transform:scale(.6);transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:1.1s}
.js .is-in .wd-rev .wd-thumbs li.is-new{opacity:1;transform:none}
.js .wd-brand .wd-bp{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(350ms + var(--k) * 150ms)}
.js .wd-brand.is-in .wd-bp{opacity:1;transform:none}

/* ---------- Loops (paused off screen by site.js, static under reduced motion) ---------- */
@keyframes wd-dev{
  0%{opacity:0;transform:translateY(calc(var(--q) * 26)) scale(.97)}
  7%,33%{opacity:1;transform:none}
  40%,100%{opacity:0;transform:scale(.9)}
}
@keyframes wd-on{0%{opacity:0}7%,33%{opacity:1}40%,100%{opacity:0}}
@keyframes wd-hl{0%{opacity:0}4%,22%{opacity:1}27%,100%{opacity:0}}
@keyframes wd-swipe{
  0%,27%{opacity:1;transform:translateX(0)}
  34%,60%{transform:translateX(-33.3333%)}
  67%,91%{opacity:1;transform:translateX(-66.6667%)}
  95%{opacity:0;transform:translateX(-66.6667%)}
  96%{opacity:0;transform:translateX(0)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes wd-dot{
  0%,27%{transform:translateX(0)}
  34%,60%{transform:translateX(calc(var(--u) * 13))}
  67%,93%{transform:translateX(calc(var(--u) * 26))}
  97%,100%{transform:translateX(0)}
}
@keyframes wd-finger{
  0%,20%{opacity:0;transform:translateX(0) scale(.8)}
  23%{opacity:1;transform:translateX(0) scale(1)}
  32%{opacity:1;transform:translateX(calc(var(--u) * -96)) scale(1)}
  35%,53%{opacity:0;transform:translateX(calc(var(--u) * -110)) scale(1)}
  54%{opacity:0;transform:translateX(0) scale(.8)}
  56%{opacity:1;transform:translateX(0) scale(1)}
  65%{opacity:1;transform:translateX(calc(var(--u) * -96)) scale(1)}
  68%,100%{opacity:0;transform:translateX(calc(var(--u) * -110)) scale(1)}
}
@keyframes wd-ring{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.4)}}
@keyframes wd-pa{0%,45%{opacity:1;transform:none}49%,95%{opacity:0;transform:translateX(-4%)}99%,100%{opacity:1;transform:none}}
@keyframes wd-pb{0%,46%{opacity:0;transform:translateX(4%)}50%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(4%)}}
@keyframes wd-ca{0%,46%{opacity:1}49%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes wd-cb{0%,46%{opacity:0}49%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes wd-prog{0%,46%{transform:scaleX(.2857)}51%,96%{transform:scaleX(.4286)}100%{transform:scaleX(.2857)}}
@keyframes wd-key-r{0%,44%{transform:none}46%{transform:translateY(2px) scale(.93)}49%,100%{transform:none}}
@keyframes wd-key-l{0%,94%{transform:none}96%{transform:translateY(2px) scale(.93)}99%,100%{transform:none}}
@keyframes wd-kon-r{0%,43%{opacity:0}45%,48%{opacity:1}53%,100%{opacity:0}}
@keyframes wd-kon-l{0%,93%{opacity:0}95%,98%{opacity:1}100%{opacity:0}}
@keyframes wd-load{0%,91%{opacity:0;transform:scaleX(0)}93%{opacity:1;transform:scaleX(.15)}99%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

@media (prefers-reduced-motion:no-preference){
  .wd-dv{animation:wd-dev 9s var(--flip) both infinite}
  .wd-tab{animation-delay:3s}
  .wd-ph{animation-delay:6s}
  .wd-seg-i::before{animation:wd-on 9s var(--flip) both infinite}
  .wd-seg-i:nth-child(2)::before{animation-delay:3s}
  .wd-seg-i:nth-child(3)::before{animation-delay:6s}

  .wd-rb::after,.wd-rf-key li::before{animation:wd-hl 8s ease-in-out both infinite;animation-delay:calc(1.2s + var(--b) * 2s)}

  .wd-pf-track{animation:wd-swipe 9s var(--flip) infinite}
  .wd-pf-dots b{animation:wd-dot 9s var(--flip) infinite}
  .wd-pf-finger{animation:wd-finger 9s var(--ease) infinite}

  .wd-ver.is-cur .wd-ver-node::after{animation:wd-ring 2.4s var(--ease) infinite}

  .wd-fw-a{animation:wd-pa 8s var(--ease) infinite}
  .wd-fw-b{animation:wd-pb 8s var(--ease) infinite}
  .wd-fw-count .is-a{animation:wd-ca 8s linear infinite}
  .wd-fw-count .is-b{animation:wd-cb 8s linear infinite}
  .wd-fw-prog i{animation:wd-prog 8s var(--ease) infinite}
  .wd-key.is-r{animation:wd-key-r 8s var(--ease) infinite}
  .wd-key.is-l{animation:wd-key-l 8s var(--ease) infinite}
  .wd-key.is-r::before{animation:wd-kon-r 8s linear infinite}
  .wd-key.is-l::before{animation:wd-kon-l 8s linear infinite}
  .wd-fw-load{animation:wd-load 4s linear infinite}
}

@media (prefers-reduced-motion:reduce){
  .js .wd-rf .wd-rb,.js .wd-rev .wd-ver,.js .wd-rev .wd-thumbs li.is-new,.js .wd-brand .wd-bp{opacity:1;transform:none}
}