/* Vire Design — explanatory motion: process story, about diagram, work filters, guided forms, case study details */

/* ---------- Process story ---------- */
.ps{position:relative}
.ps__steps{position:relative}
.ps__list{list-style:none;margin:0;padding:0;position:relative;border-bottom:1px solid var(--line)}
/* the rail is the vertical progress line in the left margin */
.ps__rail{position:absolute;left:-28px;top:0;height:0;width:1px;background:var(--line);pointer-events:none}
.ps__fill{position:absolute;inset:0;background:linear-gradient(var(--blue-t),var(--blue));transform-origin:50% 0;transform:scaleY(0)}
.ps:not(.is-live) .ps__rail{display:none}
.ps__step{position:relative;display:grid;grid-template-columns:clamp(150px,19vw,290px) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(40px,6vh,72px) 0;border-top:1px solid var(--line)}
.ps__step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--blue-t),rgba(147,166,255,0));transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.ps__step.is-act::before{transform:scaleX(1)}
/* oversized outline numerals that fill from the bottom as each stage becomes active */
.ps__n{display:block;font-size:clamp(96px,12vw,196px);font-weight:300;line-height:.8;letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);background:linear-gradient(180deg,#fff,#c9d3ff) 0 100%/100% 0 no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-size 1.1s var(--ease),-webkit-text-stroke-color .8s,opacity .6s}
.ps__step.is-act .ps__n,.ps__step.is-past .ps__n,.ps:not(.is-live) .ps__n{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.ps__step.is-past .ps__n{opacity:.4}
.ps__b h3{font-size:clamp(30px,3.4vw,52px);font-weight:400;letter-spacing:-.045em;line-height:1}
.ps__b>p{color:var(--muted);margin-top:16px;max-width:52ch;font-size:17px}
.ps__tags{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ps__tags li{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.ps__you{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:52ch;padding-left:14px;border-left:2px solid var(--line2)}
.ps__you b{color:var(--fg);font-weight:500}
.ps__gate{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border:1px solid rgba(62,207,142,.35);background:rgba(62,207,142,.06);border-radius:10px;font-size:14.5px;color:var(--muted);max-width:52ch}
.ps__gate b{display:block;color:#7fe0b2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:2px}
.ps__gate::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(62,207,142,.18);color:#3ecf8e;font-size:12px;margin-top:2px}
.ps__b>.ps__you,.ps__b>.ps__gate{margin-top:16px}
@media (min-width:861px){
  .ps.is-live .ps__b{opacity:.38;transition:opacity .6s}
  .ps.is-live .ps__step.is-act .ps__b{opacity:1}
}
@media (max-width:1180px){.ps__rail{display:none}}
@media (max-width:860px){
  .ps__step{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .ps__n{font-size:96px}
}

/* process: step zero */
.ps-zero{display:grid;grid-template-columns:56px 1.1fr 1fr auto;gap:28px;align-items:center;padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);margin-bottom:clamp(48px,6vw,80px)}
.ps-zero__n{width:56px;height:56px;border-radius:50%;border:1px dashed var(--line2);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
@media (max-width:960px){.ps-zero{grid-template-columns:56px 1fr}.ps-zero>p,.ps-zero>.btn{grid-column:2}.ps-zero>.btn{justify-self:start}}
@media (max-width:520px){.ps-zero{grid-template-columns:1fr;gap:16px}.ps-zero>p,.ps-zero>.btn{grid-column:1}}

/* shared keyframes */
@keyframes ps-up{from{opacity:0;transform:translateY(.9em)}}
@keyframes ps-pop{from{opacity:0;transform:scale(.4)}}

/* process: the review & approval loop */
.loop{margin-top:clamp(36px,4vw,52px);display:grid;gap:14px;max-width:460px;padding-right:62px}
.loop__pair{position:relative;display:grid;gap:14px}
.lp{position:relative;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.lp::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--blue-t);box-shadow:0 0 0 4px rgba(147,166,255,.12);opacity:0;pointer-events:none}
.lp__n{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--blue-t)}
.lp__n i{position:absolute;inset:-1px;border-radius:50%;display:grid;place-items:center;background:#3ecf8e;color:#04150c;font-style:normal;font-size:14px}
.lp b{display:block;font-weight:500;font-size:17px}
.lp small{display:block;color:var(--muted);font-size:14px;margin-top:2px;line-height:1.45}
.lp--ok::before{opacity:1;border-color:#3ecf8e;box-shadow:0 0 0 4px rgba(62,207,142,.12)}
.loop__arc{position:absolute;right:-50px;top:36px;bottom:36px;width:40px;border:1.5px dashed rgba(147,166,255,.45);border-left:0;border-radius:0 18px 18px 0}
.loop__arc::before{content:"";position:absolute;inset:-1.5px -1.5px -1.5px 0;border:1.5px solid var(--blue-t);border-left:0;border-radius:inherit;opacity:0}
.loop__arc::after{content:"";position:absolute;left:-2px;top:-5.5px;border:5px solid transparent;border-right-color:rgba(147,166,255,.8);border-left:0}
.loop__arc em{position:absolute;right:-9px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-t);background:var(--bg);padding:6px 0}
.js .loop:not(.is-in) .lp--ok::before,.js .loop:not(.is-in) .lp__n i{opacity:0}
.loop.is-in .lp:nth-child(1)::before{animation:lp1 4s both}
.loop.is-in .lp:nth-child(2)::before{animation:lp2 4s both}
.loop.is-in .loop__arc::before{animation:lpa 4s both}
.loop.is-in .lp--ok::before{animation:lp3 4s both}
.loop.is-in .lp--ok .lp__n i{animation:ps-pop .4s 3.35s var(--ease) both}
@keyframes lp1{0%{opacity:0}5%,20%{opacity:1}25%,50%{opacity:0}55%,65%{opacity:1}70%,100%{opacity:0}}
@keyframes lp2{0%,20%{opacity:0}25%,38%{opacity:1}42%,65%{opacity:0}70%,80%{opacity:1}84%,100%{opacity:0}}
@keyframes lpa{0%,38%{opacity:0}42%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes lp3{0%,80%{opacity:0}85%,100%{opacity:1}}

/* ---------- About: where Vire Design sits ---------- */
.org{--g:clamp(16px,3vw,40px);position:relative;display:grid;justify-items:center;padding:clamp(28px,4vw,52px);border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(60% 50% at 50% 0%,rgba(10,92,255,.13),transparent 70%),var(--bg2);overflow:hidden}
.org__node{position:relative;border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:22px 24px;text-align:left;transition:transform .5s var(--ease),border-color .3s,opacity .7s var(--ease)}
.org__parent{display:flex;align-items:center;gap:16px;padding:16px 24px}
.org__parent img{height:20px;width:auto}
.org__parent b{display:block;font-weight:500;font-size:17px;line-height:1.2}
.org__parent small,.org__node .label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.org__wires{position:relative;width:100%;height:72px}
.org__wires span{position:absolute;background:var(--line2);transition:transform .55s var(--ease)}
.org__wires span i{position:absolute;inset:0;background:var(--blue);transition:transform .55s var(--ease)}
.org__v{left:50%;top:0;height:36px;width:1px;transform-origin:50% 0}
.org__v i,.org__d i{transform-origin:50% 0}
.org__h{left:calc((100% - var(--g)) / 4);right:calc((100% - var(--g)) / 4);top:36px;height:1px}
.org__h i{left:50%!important;transform-origin:0 50%}
.org__d{top:36px;height:36px;width:1px;transform-origin:50% 0}
.org__d--l{left:calc((100% - var(--g)) / 4)}
.org__d--r{left:calc(100% - (100% - var(--g)) / 4)}
.org__kids{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);width:100%}
.org__kids .org__node{height:100%}
.org__kids b{display:block;font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.02em;margin:8px 0 8px}
.org__kids p{color:var(--muted);font-size:15px}
.org__kids a{display:inline-flex;margin-top:14px;font-size:14px;color:var(--fg);min-height:44px;align-items:center}
.org__node--here{border-color:rgba(147,166,255,.5);background:linear-gradient(160deg,#0c1638,var(--panel) 70%)}
.org__here{position:absolute;right:18px;top:18px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-t)}
.org__here::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-t);box-shadow:0 0 0 4px rgba(147,166,255,.18)}
.org__caps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.org__caps li{font-size:12.5px;border:1px solid var(--line2);border-radius:999px;padding:3px 11px;color:var(--fg);transition:opacity .5s,transform .5s var(--ease)}
.org__base{margin-top:22px;width:100%;display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;align-items:center;padding-top:20px;border-top:1px dashed var(--line2);color:var(--muted);font-size:15px;transition:opacity .7s}
.org__base span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:10px}
.org__kids .org__node:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.js .org:not(.is-in) .org__parent{opacity:0;transform:translateY(16px)}
.js .org:not(.is-in) .org__v,.js .org:not(.is-in) .org__d,.js .org:not(.is-in) .org__wires span i{transform:scaleY(0)}
.js .org:not(.is-in) .org__h{transform:scaleX(0)}
.js .org:not(.is-in) .org__wires .org__h i{transform:scaleX(0)}
.js .org:not(.is-in) .org__kids .org__node{opacity:0;transform:translateY(22px)}
.js .org:not(.is-in) .org__here,.js .org:not(.is-in) .org__caps li{opacity:0;transform:scale(.7)}
.js .org:not(.is-in) .org__base{opacity:0}
.org__v{transition-delay:.3s}.org__v i{transition-delay:.55s}
.org__h{transition-delay:.7s}.org__h i{transition-delay:.95s}
.org__d{transition-delay:1.1s}.org__d--r i{transition-delay:1.3s}
.org.is-in .org__kids .org__node{transition-delay:1.25s,0s,1.25s}
.org.is-in .org__kids .org__node--here{transition-delay:1.45s,0s,1.45s}
.org__here{transition:opacity .4s 1.9s,transform .5s var(--ease) 1.9s}
.org__caps li{transition-delay:calc(2s + var(--k) * .08s)}
.org.is-in .org__base{transition-delay:2.3s}
.org.is-in .org__kids .org__node:hover{transition-delay:0s}
@media (max-width:760px){
  .org__wires{height:40px}.org__v{height:40px}.org__h,.org__d{display:none}
  .org__kids{grid-template-columns:1fr}
  .org__kids .org__node--here{order:-1}
  .org__here{position:static;margin-bottom:10px}
  .org__parent{width:100%}
}

/* About: principles explorer */
.pr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.pr__list{display:grid;border-top:1px solid var(--line)}
.pr__tab{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;width:100%;min-height:76px;padding:16px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);text-align:left;cursor:pointer;font:inherit;border-radius:0}
.pr__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue-t);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.pr__tab[aria-selected="true"]{color:var(--fg)}
.pr__tab[aria-selected="true"]::after{transform:none}
.pr__num{font-family:var(--mono);font-size:12px;color:var(--dim)}
.pr__tab[aria-selected="true"] .pr__num{color:var(--blue-t)}
.pr__name{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;font-weight:500;line-height:1.15;transition:transform .5s var(--ease)}
.pr__tab:hover .pr__name,.pr__tab[aria-selected="true"] .pr__name{transform:translateX(6px)}
.pr__arrow{width:16px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .4s var(--ease)}
.pr__tab[aria-selected="true"] .pr__arrow{opacity:1;transform:none}
.pr__panels{display:grid;position:sticky;top:120px}
.pr__panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:clamp(26px,3.5vw,44px)}
.js .pr__panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s,transform .6s var(--ease),visibility 0s .4s}
.js .pr__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s .05s,transform .6s var(--ease) .05s}
.pr__panel+.pr__panel{margin-top:16px}
.js .pr__panel+.pr__panel{margin-top:0}
.pr__big{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(60px,7vw,100px);line-height:.8;color:var(--blue-t)}
.pr__panel h3{font-size:clamp(24px,2.6vw,32px);margin:18px 0 10px}
.pr__panel>p{color:var(--muted)}
.pr__panel .label{display:block;margin-top:26px}
.pr__panel .ticks{margin-top:12px}
.pr__panel .ticks li{color:var(--muted);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(.15s + var(--k) * .07s)}
.js .pr__panel:not(.is-on) .ticks li{opacity:0;transform:translateX(-10px);transition-delay:0s}
.pr__panel .link{margin-top:24px}
.pr__more{margin-top:28px}
@media (max-width:860px){.pr{grid-template-columns:1fr}.pr__panels{position:static}}

/* ---------- Work: filters with counts, result count, glide ---------- */
.wk-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;margin-bottom:44px}
.wk-bar .filters{margin:0}
.filters .fc{font-family:var(--mono);font-size:11px;margin-left:8px;opacity:.6}
.wk-count{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px;line-height:1.35}
.wk-count__n{display:inline-block;overflow:hidden;font-family:var(--mono);font-size:34px;line-height:1;color:var(--fg);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wk-count__n span{display:block}
.wk-count__n.is-roll span{animation:wk-roll .5s var(--ease) both}
.wk-count em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-t)}
@keyframes wk-roll{from{transform:translateY(100%);opacity:0}}
.works .work .lfw{transform:translate3d(var(--mx,0),var(--my,0),0) scale(var(--ms,1));transition:transform .7s var(--ease)}
.works .work:hover .lfw{--ms:1.06}

/* ---------- Forms: focus, live checks, counter, clear outcomes ---------- */
.field>label,.field>.flabel{transition:color .25s}
.field:focus-within>label{color:var(--blue-t)}
.field input,.field select,.field textarea{transition:border-color .25s,box-shadow .25s,background-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{background-color:#0c1020;box-shadow:0 0 0 4px rgba(147,166,255,.16),0 10px 30px -18px rgba(10,92,255,.8)}
.field.is-ok>label::after{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px;border-radius:50%;background:rgba(62,207,142,.16);color:#3ecf8e;font-size:11px;vertical-align:1px;animation:ps-pop .35s var(--ease) both}
.field[data-invalid]>label,.field[data-invalid]>.flabel{color:#ff9a9a}
.ferr:not(:empty){animation:st-nudge .4s var(--ease)}
@keyframes st-nudge{0%{transform:translateX(0)}25%{transform:translateX(-4px)}60%{transform:translateX(3px)}100%{transform:none}}
.cnt{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}
.cnt__bar{position:relative;flex:none;width:72px;height:3px;border-radius:2px;background:var(--line2);overflow:hidden}
.cnt__bar i{position:absolute;inset:0;background:var(--blue-t);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s var(--ease),background-color .3s}
.cnt.is-ok{color:#7fe0b2}
.cnt.is-ok .cnt__bar i{background:#3ecf8e}
.chip span{position:relative;transition:background-color .2s,border-color .2s,color .2s,transform .15s var(--ease)}
.chip:active span{transform:scale(.95)}
.chip input:checked+span::after{content:"✓";position:absolute;right:-5px;top:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:10px;box-shadow:0 0 0 3px var(--bg);animation:ps-pop .3s var(--ease) both}
.chip:hover span{color:var(--fg);border-color:rgba(255,255,255,.3)}
.status--ok,.status--info,.status--err{animation:ps-up .5s var(--ease) both}
.status--ok,.status--info{position:relative;padding-left:66px}
.status--ok::before,.status--info::before{content:"";position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;animation:ps-pop .45s .1s var(--ease) both}
.status--ok::before{background:#3ecf8e;box-shadow:0 0 0 6px rgba(62,207,142,.15)}
.status--ok::after{content:"";position:absolute;left:31px;top:24px;width:8px;height:14px;border:solid #04150c;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);animation:st-tick .35s .4s var(--ease) both}
.status--info::before{content:"i";display:grid;place-items:center;border:1.5px solid var(--blue-t);color:var(--blue-t);font-family:var(--serif);font-style:italic;font-size:18px}
.status--ok strong{display:block;font-size:18px;font-weight:500;margin-bottom:4px}
@keyframes st-tick{from{opacity:0;transform:rotate(45deg) scale(.3)}}

/* Start: live brief (the aside stretches with the form; the brief card itself stays in view) */
.aside--brief{position:static;align-self:stretch;display:flex;flex-direction:column;gap:18px}
.brief{position:sticky;top:100px}
.brief__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.brief__head h2{margin:0}
.brief__pct{font-family:var(--mono);font-size:13px;color:var(--blue-t);font-variant-numeric:tabular-nums}
.brief__bar,.sp-bar__bar{position:relative;height:3px;border-radius:2px;background:var(--line2);overflow:hidden;margin:14px 0 10px}
.brief__bar i,.sp-bar__bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--blue-t));transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease)}
.brief.is-done .brief__bar i,.sp-bar.is-done .sp-bar__bar i{background:#3ecf8e}
.brief__req{font-size:13.5px;color:var(--muted)}
.brief__req b{color:var(--fg);font-weight:500}
.brief__dl{margin:16px 0 0;display:grid;border-top:1px solid var(--line)}
.brief__dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.brief__dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.brief__dl dd{margin:0;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.brief__dl dd.is-new{animation:ps-up .45s var(--ease) both}
.brief__dl .brief__empty{color:#6c717c}
.brief__chips{display:flex;flex-wrap:wrap;gap:4px}
.brief__chips span{font-size:12px;border:1px solid rgba(147,166,255,.4);color:var(--blue-t);border-radius:999px;padding:1px 9px}
.brief__note{margin-top:14px;font-size:12.5px;color:var(--dim)}
.brief__next{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.brief__next h3{font-size:15px;margin-bottom:8px}
.brief__next ol{font-size:14px}
.lg-state{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:2px 9px;border:1px solid var(--line2);border-radius:999px;color:var(--dim);letter-spacing:.08em;font-size:10.5px;vertical-align:1px;transition:color .3s,border-color .3s,background-color .3s}
.fset.is-done .lg-state{color:#3ecf8e;border-color:rgba(62,207,142,.45);background:rgba(62,207,142,.08)}
.sp-bar{display:none}
@media (max-width:900px){
  .sp-bar{display:block;position:sticky;top:74px;z-index:20;margin:0 calc(var(--pad) * -1);padding:12px var(--pad) 2px;background:rgba(5,5,6,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
  .sp-bar b{color:var(--fg);font-weight:500}
  .sp-bar__bar{margin:8px 0 10px}
  .aside--brief{position:static}
}

/* ---------- Case study: index, palette, type ---------- */
.pj-idx{position:fixed;left:50%;bottom:16px;z-index:90;display:flex;gap:2px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:rgba(10,11,14,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translate(-50%,150%);opacity:0;transition:transform .6s var(--ease),opacity .4s;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.pj-idx::-webkit-scrollbar{display:none}
.pj-idx.is-shown{transform:translate(-50%,0);opacity:1}
.pj-idx a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .3s,background-color .3s}
.pj-idx a small{font-family:var(--mono);font-size:10px;opacity:.6}
.pj-idx a:hover{color:var(--fg)}
.pj-idx a.is-on{background:var(--fg);color:#050506}
.cs-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px)}
.cs-sw{display:grid;gap:14px;padding:0;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;border-radius:14px}
.cs-sw__fill{display:block;aspect-ratio:4/5;border-radius:14px;background:var(--c);border:1px solid rgba(255,255,255,.12);transform-origin:50% 100%;transition:transform .9s var(--ease) calc(var(--k) * .1s)}
.js .cs-pal:not(.is-in) .cs-sw__fill{transform:scaleY(0)}
.cs-pal.is-in .cs-sw:hover .cs-sw__fill{transform:translateY(-5px);transition-delay:0s}
.cs-sw__meta{display:grid;gap:2px;transition:opacity .6s calc(.4s + var(--k) * .1s)}
.js .cs-pal:not(.is-in) .cs-sw__meta{opacity:0}
.cs-sw__meta b{font-weight:500;font-size:15.5px}
.cs-sw__meta code{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.cs-sw__ok{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#3ecf8e;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s var(--ease)}
.cs-sw.is-copied .cs-sw__ok{opacity:1;transform:none}
.cs-type{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.cs-type__aa{font-size:clamp(120px,17vw,230px);line-height:.85;letter-spacing:-.04em;overflow:hidden;padding:0 .05em .08em 0}
.cs-type__aa span{display:block;transition:transform 1.1s var(--ease)}
.js .cs-type:not(.is-in) .cs-type__aa span{transform:translateY(105%)}
.cs-type__body>*{transition:opacity .7s,transform .8s var(--ease);transition-delay:calc(.25s + var(--k) * .1s)}
.js .cs-type:not(.is-in) .cs-type__body>*{opacity:0;transform:translateY(14px)}
.cs-type__h{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:12px 0 16px}
.cs-type__abc{font-size:clamp(16px,1.6vw,20px);color:var(--muted);letter-spacing:.02em;line-height:1.5;overflow-wrap:anywhere}
.cs-type__body .muted{font-family:var(--sans);font-weight:400;margin-top:14px;font-size:15.5px}
.cs-pages{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,44px)}
.cs-pages span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;color:var(--muted);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--k) * .06s)}
.cs-pages span small{font-family:var(--mono);font-size:10px;color:var(--dim)}
.js .cs-pages:not(.is-in) span{opacity:0;transform:translateY(10px)}
@media (max-width:760px){.cs-pal{grid-template-columns:1fr 1fr}.cs-type{grid-template-columns:1fr}.cs-sw__fill{aspect-ratio:16/10}}

/* Reduced motion: land on the final state, no waiting, no loops */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-delay:0s!important}
  .ps__n{background-size:100% 100%!important;-webkit-text-stroke-color:transparent!important}
  .works .work .lfw{transform:none!important}
}