@layer reference {
:root{
    --bg:#ffffff;
    --bg-2:#f6f6f6;
    --bg-3:#ececec;
    --ink:#17171A;
    --ink-2:#48484F;
    --muted:#79797F;
    --line:#e4e4e4;
    --line-2:#cfcfcf;
    --note-bg:#FFF1CC;
    --note-ink:#7A4B00;
    --note-line:#E9C36A;
    --w-text:44rem;
    --w-wide:70rem;
    --w-page:78rem;
    --font:"Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:1.0625rem; line-height:1.55;
    font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}
.page{max-width:var(--w-page); margin:0 auto; padding:0 3rem}
.text{max-width:var(--w-text)}
.wide{max-width:var(--w-wide)}
.section{padding:6.5rem 0 0}
.section + .section{margin-top:1.5rem}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-0.015em; line-height:1.1}
h1{font-size:clamp(2.25rem, 5.2vw, 3.6rem); font-weight:700; letter-spacing:-0.025em; max-width:20ch; line-height:1.02; font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.7rem, 3vw, 2.15rem); max-width:24ch; margin-bottom:1.25rem; font-variation-settings:"opsz" 72}
h3{font-size:1.35rem; margin-bottom:.5rem; letter-spacing:-0.01em}
h4{font-size:1.0625rem; margin-bottom:.35rem}
p{margin:0 0 1.1rem}
.deck{font-size:1.35rem; line-height:1.4; color:var(--ink-2); max-width:34ch; margin-top:1.5rem; font-weight:400}
.lede{font-size:1.2rem; line-height:1.5; color:var(--ink-2); margin-bottom:1.5rem}
.muted{color:var(--muted)}
.cap{font-size:.9375rem; color:var(--muted); font-style:italic; margin-top:.75rem}
ul{padding-left:1.15rem; margin:0 0 1.1rem}
li{margin:.3rem 0}
li::marker{color:var(--muted)}
strong{font-weight:600}
em{font-style:italic}
blockquote{margin:2.5rem 0; padding:0 0 0 1.25rem; border-left:2px solid var(--ink); font-size:1.35rem; line-height:1.35; font-weight:500; max-width:32ch}
blockquote small{display:block; font-size:.9375rem; color:var(--muted); font-weight:400; margin-top:.75rem; font-style:normal}
.nav{display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; font-size:.9375rem}
.nav .name{font-weight:600}
.nav ul{display:flex; gap:1.5rem; list-style:none; padding:0; margin:0; align-items:center}
.back{display:inline-block; margin-top:3rem; font-size:.9375rem; color:var(--muted)}
.eyebrow{font-size:.9375rem; color:var(--muted); margin:2.5rem 0 1rem}
.meta{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem; margin:3rem 0 0; padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:var(--w-text)}
.meta div span{display:block; font-size:.8125rem; color:var(--muted); margin-bottom:.25rem}
.meta div b{font-weight:500}
@media (max-width:640px){
.meta{grid-template-columns:repeat(2,1fr)}
}
.ph{position:relative; background:var(--bg-2); border:1px dashed var(--line-2); border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:var(--muted); font-size:.8125rem; line-height:1.4; padding:1rem}
.ph b{display:block; color:var(--ink-2); font-weight:500; margin-bottom:.2rem}
.ph code{font-size:.75rem; background:var(--bg-3); padding:.1rem .4rem; border-radius:4px}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.phones{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; margin-top:2.5rem}
.phone{position:relative; aspect-ratio:9/19; background:linear-gradient(150deg,#1c1c22,#333333); border-radius:2rem; padding:.42rem; box-shadow:0 22px 46px -18px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,255,255,.1), inset 0 1px 2px rgba(255,255,255,.1); overflow:visible}
.phone::before{content:""; position:absolute; z-index:3; top:.62rem; left:50%; transform:translateX(-50%); width:24%; height:.46rem; background:#333333; border-radius:999px}
.phone .ph{position:absolute; inset:.42rem; border:0; border-radius:1.6rem; overflow:hidden; background:#ffffff}
.phone .ph img{position:absolute; inset:0; width:100%; height:auto; object-fit:cover; object-position:top}
.phone-label{font-size:.875rem; margin-top:.6rem; color:var(--ink-2)}
@media (max-width:760px){
.phones{grid-template-columns:repeat(3, 60vw); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem}
.phones > div{scroll-snap-align:start}
}
.gallery{display:grid; gap:1.25rem; margin-top:2rem}
.g2{grid-template-columns:repeat(2, minmax(0,1fr))}
.g3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:760px){
.g2,.g3{grid-template-columns:1fr}
}
.truths{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem; margin:2rem 0 0}
.truths > div{padding-top:1.25rem; border-top:1px solid var(--ink)}
.truths h3{font-size:1.15rem}
@media (max-width:640px){
.truths{grid-template-columns:1fr}
}
.card-study{display:grid; grid-template-columns:20rem minmax(0,1fr); gap:3rem; margin-top:2.5rem; align-items:start}
.card-visual{border:1px solid var(--line-2); border-radius:22px; padding:.5rem; background:var(--bg); position:sticky; top:5.5rem; align-self:start}
@media (min-height:760px) and (min-width:761px){
.card-visual{position:sticky; top:1.5rem}
}
.card-visual .ph{border-radius:16px; aspect-ratio:312/354}
.decisions{counter-reset:d}
.decision{display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:.75rem; padding:1.15rem 0; border-top:1px solid var(--line)}
.decision:first-child{border-top:0; padding-top:0}
.decision::before{counter-increment:d; content:counter(d, decimal-leading-zero); font-size:.875rem; color:var(--muted); padding-top:.2rem; font-variant-numeric:tabular-nums}
.decision h4{font-size:1.1rem}
.decision p{margin:0; color:var(--ink-2)}
.decision .worry{display:block; font-size:.8125rem; color:var(--muted); margin-top:.3rem}
.decision .worry b{color:var(--ink-2); font-weight:600}
@media (max-width:760px){
.card-study{grid-template-columns:1fr}
.card-visual{position:static; max-width:20rem}
}
.callout{border:1px solid var(--ink); border-radius:14px; padding:1.75rem; margin-top:2.5rem; max-width:var(--w-text)}
.callout h3{margin-bottom:.4rem}
.callout p{margin:0; color:var(--ink-2)}
.args{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem 2rem; margin-top:2rem}
.arg{border-top:2px solid var(--ink); padding-top:.8rem}
.arg b{display:block; font-size:1.05rem; letter-spacing:-0.01em; margin-bottom:.25rem}
.arg span{color:var(--ink-2); font-size:.9375rem; line-height:1.35}
@media (max-width:760px){
.args{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){
.args{grid-template-columns:1fr}
}
.measures{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem 3rem; margin-top:2rem}
.measure{border-top:1px solid var(--ink); padding-top:1rem}
.measure b{display:block; font-size:1.35rem; font-weight:600; letter-spacing:-0.015em; margin-bottom:.35rem; line-height:1.15}
.measure p{margin:0; color:var(--ink-2)}
.measure .bet{display:block; font-size:1.05rem; line-height:1.35; color:var(--ink); margin:.15rem 0 .5rem; font-weight:500}
.measure .val{display:inline-block; font-size:2.1rem; font-weight:700; letter-spacing:-0.02em; line-height:1; margin:.1rem 0 .6rem; color:var(--ink)}
.measure .val[data-empty]{color:var(--muted); font-weight:500; font-size:.9375rem; letter-spacing:0; border:1px dashed var(--line-2); border-radius:6px; padding:.28rem .55rem}
@media (max-width:640px){
.measures{grid-template-columns:1fr}
}
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem 2.5rem; margin-top:2.5rem}
.stat{border-top:2px solid var(--ink); padding-top:.9rem}
.stat b{display:block; font-size:2.4rem; font-weight:700; letter-spacing:-0.03em; line-height:1; font-variation-settings:"opsz" 96}
.stat span{display:block; margin-top:.4rem; color:var(--ink-2); font-size:.9375rem; line-height:1.3}
@media (max-width:760px){
.stats{grid-template-columns:repeat(2,1fr)}
}
.pill{display:inline-block; font-size:.75rem; font-weight:500; padding:.15rem .55rem; border-radius:999px; border:1px solid var(--ink); vertical-align:middle; margin-left:.4rem}
.note{display:inline-block; font-size:.75rem; font-weight:500; color:var(--note-ink); background:var(--note-bg); border:1px solid var(--note-line); border-radius:6px; padding:.12rem .45rem; margin-left:.35rem; vertical-align:middle; white-space:nowrap}
.note-block{display:block; margin:.75rem 0 0; white-space:normal; max-width:var(--w-text)}
body.hide-notes .note{display:none}
.review-bar{position:fixed; right:1rem; bottom:1rem; z-index:9; display:flex; gap:.5rem; align-items:center; background:var(--note-bg); color:var(--note-ink); border:1px solid var(--note-line); border-radius:999px; padding:.4rem .5rem .4rem .9rem; font-size:.8125rem; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.review-bar button{font:inherit; border:1px solid var(--note-line); background:var(--bg); color:var(--note-ink); border-radius:999px; padding:.3rem .7rem; cursor:var(--nt-cur)}
.flow{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; margin-top:2.5rem}
.flow .fstep{position:relative; padding:1rem 1rem 0 0}
.flow .fstep::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--line-2)}
.flow .fstep.lit::before{background:var(--ink)}
.flow .fstep b{display:block; font-size:.9375rem; font-weight:600; margin:.7rem 0 .3rem}
.flow .fstep span{color:var(--ink-2); font-size:.875rem; line-height:1.35}
.flow .fstep i{position:absolute; top:-.7rem; left:0; font-style:normal; font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; background:var(--bg); padding-right:.4rem}
@media (max-width:760px){
.flow{grid-template-columns:1fr; gap:0}
.flow .fstep{padding:1rem 0 1rem 1rem}
.flow .fstep::before{top:0; bottom:0; left:0; right:auto; width:2px; height:auto}
}
.versus{display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:stretch; margin-top:2rem}
.vcard{border:1px solid var(--line-2); border-radius:14px; padding:1.25rem}
.vcard b{display:block; font-size:1.05rem; margin-bottom:.5rem}
.vcard .spec{display:block; color:var(--ink-2); font-size:.9375rem; line-height:1.6}
.vcard .spec strong{color:var(--ink)}
.versus .vs{align-self:center; color:var(--muted); font-weight:600; font-size:.875rem}
@media (max-width:640px){
.versus{grid-template-columns:1fr}
.versus .vs{padding:.25rem 0}
}
.states{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.states span{font-size:.875rem; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:.35rem .8rem}
.states span.key{border-color:var(--ink); color:var(--ink); font-weight:500}
.feature{margin-top:2rem}
.feature .ph{aspect-ratio:16/10; border-radius:16px}
figure{margin:0}
figure .ph{border-radius:14px}
figure figcaption{font-size:.9375rem; color:var(--muted); font-style:italic; margin-top:.75rem}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:center; margin-top:2rem}
.split.tall{grid-template-columns:20rem minmax(0,1fr)}
@media (max-width:760px){
.split,.split.tall{grid-template-columns:1fr; gap:1.5rem}
}
.valid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem 2.5rem; margin-top:2rem}
.vitem{padding-top:1rem; border-top:2px solid var(--ink)}
.vitem.warn{border-top-color:var(--line-2)}
.vitem .tag{font-size:.75rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.vitem.ok .tag{color:var(--ink)}
.vitem b{display:block; font-size:1.1rem; margin:.3rem 0 .3rem; letter-spacing:-0.01em}
.vitem p{margin:0; color:var(--ink-2); font-size:.9375rem; line-height:1.5}
.vitem cite{font-style:normal; color:var(--muted); font-size:.8125rem; display:block; margin-top:.5rem}
@media (max-width:640px){
.valid{grid-template-columns:1fr}
}
.impact{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.75rem 2rem; margin-top:2.5rem}
.imet{border-top:2px solid var(--ink); padding-top:1rem}
.imet .delta{display:block; font-size:2.2rem; font-weight:700; letter-spacing:-0.03em; line-height:1; font-variation-settings:"opsz" 96}
.imet .name{display:block; font-weight:600; margin:.55rem 0 .2rem; font-size:1rem; letter-spacing:-0.01em}
.imet .ba{display:block; color:var(--muted); font-size:.875rem; font-variant-numeric:tabular-nums}
.imet .ba b{color:var(--ink-2); font-weight:600}
@media (max-width:760px){
.impact{grid-template-columns:1fr 1fr}
}
@media (max-width:440px){
.impact{grid-template-columns:1fr}
}
.pill{display:inline-block; font-size:.75rem; font-weight:500; padding:.15rem .55rem; border-radius:999px; border:1px solid var(--ink); vertical-align:middle; margin-left:.4rem}
.note{display:inline-block; font-size:.75rem; font-weight:500; color:var(--note-ink); background:var(--note-bg); border:1px solid var(--note-line); border-radius:6px; padding:.12rem .45rem; margin-left:.35rem; vertical-align:middle; white-space:nowrap}
.note-block{display:block; margin:.75rem 0 0; white-space:normal; max-width:var(--w-text)}
body.hide-notes .note{display:none}
.review-bar{position:fixed; right:1rem; bottom:1rem; z-index:9; display:flex; gap:.5rem; align-items:center; background:var(--note-bg); color:var(--note-ink); border:1px solid var(--note-line); border-radius:999px; padding:.4rem .5rem .4rem .9rem; font-size:.8125rem; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.review-bar button{font:inherit; border:1px solid var(--note-line); background:var(--bg); color:var(--note-ink); border-radius:999px; padding:.3rem .7rem; cursor:var(--nt-cur)}
footer{margin-top:6rem; padding:2rem 0 3rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.9375rem; color:var(--muted)}
footer ul{display:flex; gap:1.5rem; list-style:none; padding:0; margin:0}
.switch{position:relative}
.switch summary{list-style:none; cursor:var(--nt-cur); display:inline-flex; align-items:center; gap:.4rem; font-size:.9375rem; font-weight:500; padding:.35rem .7rem; border:1px solid var(--line-2); border-radius:999px}
.switch summary::-webkit-details-marker{display:none}
.switch summary .chev{transition:transform .15s ease}
.switch[open] summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){
.switch summary .chev{transition:none}
}
.switch-menu{position:absolute; right:0; top:calc(100% + .5rem); background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.10); padding:.4rem; min-width:16rem; z-index:20}
.switch-menu a{display:block; padding:.6rem .7rem; border-radius:8px; line-height:1.25; cursor:var(--nt-cur)}
.switch-menu a:hover{background:var(--bg-2); text-decoration:none}
.switch-menu a[aria-current="true"]{background:var(--bg-2)}
.switch-menu .t{font-weight:600; font-size:.9375rem}
.switch-menu .d{display:block; font-size:.8125rem; color:var(--muted); margin-top:.1rem}
.switch-menu a[aria-current="true"] .d::after{content:" · current"}
:root{
    --bg:#ffffff;
    --bg-2:#f6f6f6;
    --bg-3:#ececec;
    --ink:#17171A;
    --ink-2:#48484F;
    --muted:#79797F;
    --line:#e4e4e4;
    --line-2:#cfcfcf;
    --note-bg:#FFF1CC;
    --note-ink:#7A4B00;
    --note-line:#E9C36A;
    --w-text:44rem;
    --w-wide:70rem;
    --w-page:78rem;
    --font:"Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:1.0625rem; line-height:1.55;
    font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}
.page{max-width:var(--w-page); margin:0 auto; padding:0 3rem}
.text{max-width:var(--w-text)}
.wide{max-width:var(--w-wide)}
.section{padding:6.5rem 0 0}
.section + .section{margin-top:1.5rem}
.rule{height:1px; background:var(--line); margin-top:5.5rem}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-0.015em; line-height:1.1}
h1{font-size:clamp(2.25rem, 5.2vw, 3.6rem); font-weight:700; letter-spacing:-0.025em; max-width:20ch; line-height:1.02; font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.7rem, 3vw, 2.15rem); max-width:24ch; margin-bottom:1.25rem; font-variation-settings:"opsz" 72}
h3{font-size:1.35rem; margin-bottom:.5rem; letter-spacing:-0.01em}
h4{font-size:1.0625rem; margin-bottom:.35rem}
p{margin:0 0 1.1rem}
.deck{font-size:1.35rem; line-height:1.4; color:var(--ink-2); max-width:34ch; margin-top:1.5rem; font-weight:400}
.lede{font-size:1.2rem; line-height:1.5; color:var(--ink-2); margin-bottom:1.5rem}
.muted{color:var(--muted)}
.small{font-size:.9375rem}
.cap{font-size:.9375rem; color:var(--muted); font-style:italic; margin-top:.75rem}
ul{padding-left:1.15rem; margin:0 0 1.1rem}
li{margin:.3rem 0}
li::marker{color:var(--muted)}
strong{font-weight:600}
em{font-style:italic}
blockquote{margin:2.5rem 0; padding:0 0 0 1.25rem; border-left:2px solid var(--ink); font-size:1.35rem; line-height:1.35; font-weight:500; max-width:30ch}
blockquote small{display:block; font-size:.9375rem; color:var(--muted); font-weight:400; margin-top:.75rem; font-style:normal}
.nav{display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; font-size:.9375rem}
.nav .name{font-weight:600}
.nav ul{display:flex; gap:1.5rem; list-style:none; padding:0; margin:0}
.back{display:inline-block; margin-top:3rem; font-size:.9375rem; color:var(--muted)}
.eyebrow{font-size:.9375rem; color:var(--muted); margin:2.5rem 0 1rem}
.meta{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem; margin:3rem 0 0; padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:var(--w-text)}
.meta div span{display:block; font-size:.8125rem; color:var(--muted); margin-bottom:.25rem}
.meta div b{font-weight:500}
@media (max-width:640px){
.meta{grid-template-columns:repeat(2,1fr)}
}
.ph{
    position:relative; background:var(--bg-2); border:1px dashed var(--line-2); border-radius:12px;
    display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
    color:var(--muted); font-size:.8125rem; line-height:1.4; padding:1rem;
  }
.ph b{display:block; color:var(--ink-2); font-weight:500; margin-bottom:.2rem}
.ph code{font-size:.75rem; background:var(--bg-3); padding:.1rem .4rem; border-radius:4px}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.phone{position:relative; aspect-ratio:9/19; background:linear-gradient(150deg,#1c1c22,#333333); border-radius:2rem; padding:.42rem; box-shadow:0 22px 46px -18px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,255,255,.1), inset 0 1px 2px rgba(255,255,255,.1); overflow:visible}
.phone::before{content:""; position:absolute; z-index:3; top:.62rem; left:50%; transform:translateX(-50%); width:24%; height:.46rem; background:#333333; border-radius:999px}
.phone .ph{position:absolute; inset:.42rem; border:0; border-radius:1.6rem; overflow:hidden; background:#ffffff}
.phone-label{font-size:.875rem; margin-top:.6rem; color:var(--ink-2)}
.gallery{display:grid; gap:1.25rem; margin-top:2rem}
.g2{grid-template-columns:repeat(2, minmax(0,1fr))}
.g3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:760px){
.g2,.g3{grid-template-columns:1fr}
}
.truths{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem; margin:2rem 0 0}
.truths > div{padding-top:1.25rem; border-top:1px solid var(--ink)}
.truths h3{font-size:1.15rem}
@media (max-width:640px){
.truths{grid-template-columns:1fr}
}
.slots{display:flex; gap:.95rem; flex-wrap:wrap; align-items:flex-start; margin-top:1.6rem}
.slot{display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--ink-2)}
.slot .shape{
    width:150px; height:104px; object-fit:cover; object-position:top center;
    border:1px solid var(--line-2); border-radius:10px; background:#ffffff; display:block;
    box-shadow:0 4px 14px -8px rgba(0,0,0,.28);
  }
.stack{display:grid; grid-template-columns:19rem minmax(0,1fr); gap:3rem; margin-top:2.5rem; align-items:start}
.stack-phone{border:1px solid var(--line-2); border-radius:26px; padding:.5rem; background:var(--bg)}
@media (min-height:760px) and (min-width:761px){
.stack-phone{position:sticky; top:1.5rem}
}
.stack-screen{background:var(--bg-2); border-radius:18px; overflow:hidden}
.mod{display:flex; align-items:center; justify-content:space-between; padding:0 .8rem; border-bottom:2px solid var(--bg); font-size:.75rem; color:var(--ink-2); line-height:1.2}
.mod i{font-style:normal; color:var(--muted); font-size:.7rem}
.mod.on{background:var(--ink); color:var(--bg)}
.mod.on i{color:var(--bg); opacity:.7}
.steps{counter-reset:step}
.step{display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:.75rem; padding:1.25rem 0; border-top:1px solid var(--line); cursor:var(--nt-cur)}
.step:first-child{border-top:0; padding-top:0}
.step::before{counter-increment:step; content:counter(step, decimal-leading-zero); font-size:.875rem; color:var(--muted); padding-top:.25rem; font-variant-numeric:tabular-nums}
.step h4{font-size:1.1rem}
.step p{margin:0; color:var(--ink-2)}
.step .mods{margin-top:.5rem; font-size:.8125rem; color:var(--muted)}
.step.on{ }
.step.on h4{text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
@media (max-width:760px){
.stack{grid-template-columns:1fr}
.stack-phone{position:static; max-width:19rem}
}
.vertical{padding-top:3rem; margin-top:3rem; border-top:1px solid var(--line)}
.section > .text + .vertical{border-top:0; margin-top:.5rem}
.vq{font-size:1.5rem; line-height:1.25; font-weight:500; max-width:26ch; margin:.25rem 0 1rem; letter-spacing:-0.01em}
.creatives{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.5rem 2.5rem; margin-top:1.5rem; align-items:start}
.creatives dl{margin:0}
.creatives dt{font-weight:600; margin-top:1rem}
.creatives dt:first-child{margin-top:0}
.creatives dd{margin:.2rem 0 0; color:var(--ink-2)}
@media (max-width:760px){
.creatives{grid-template-columns:1fr}
}
.measures{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem 3rem; margin-top:2rem}
.measure{border-top:1px solid var(--ink); padding-top:1rem}
.measure b{display:block; font-size:1.35rem; font-weight:600; letter-spacing:-0.015em; margin-bottom:.35rem; line-height:1.15}
.measure p{margin:0; color:var(--ink-2)}
@media (max-width:640px){
.measures{grid-template-columns:1fr}
}
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.5rem 2.5rem; margin-top:2.5rem}
.stat{border-top:2px solid var(--ink); padding-top:.9rem}
.stat b{display:block; font-size:2.4rem; font-weight:700; letter-spacing:-0.03em; line-height:1; font-variation-settings:"opsz" 96}
.stat span{display:block; margin-top:.4rem; color:var(--ink-2); font-size:.9375rem; line-height:1.3}
@media (max-width:760px){
.stats{grid-template-columns:repeat(2,1fr)}
}
.measure .bet{display:block; font-size:1.05rem; line-height:1.35; color:var(--ink); margin:.15rem 0 .5rem; font-weight:500}
.measure .val{display:inline-block; font-size:2.1rem; font-weight:700; letter-spacing:-0.02em; line-height:1; margin:.1rem 0 .6rem; color:var(--ink)}
.measure .val[data-empty]{color:var(--muted); font-weight:500; font-size:.9375rem; letter-spacing:0; border:1px dashed var(--line-2); border-radius:6px; padding:.28rem .55rem}
.pill{display:inline-block; font-size:.75rem; font-weight:500; padding:.15rem .55rem; border-radius:999px; border:1px solid var(--ink); vertical-align:middle; margin-left:.4rem}
.pill.live{background:var(--ink); color:var(--bg)}
.note{display:inline-block; font-size:.75rem; font-weight:500; color:var(--note-ink); background:var(--note-bg); border:1px solid var(--note-line); border-radius:6px; padding:.12rem .45rem; margin-left:.35rem; vertical-align:middle; white-space:nowrap}
.note-block{display:block; margin:.75rem 0 0; white-space:normal; max-width:var(--w-text)}
body.hide-notes .note{display:none}
.review-bar{position:fixed; right:1rem; bottom:1rem; z-index:9; display:flex; gap:.5rem; align-items:center; background:var(--note-bg); color:var(--note-ink); border:1px solid var(--note-line); border-radius:999px; padding:.4rem .5rem .4rem .9rem; font-size:.8125rem; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.review-bar button{font:inherit; border:1px solid var(--note-line); background:var(--bg); color:var(--note-ink); border-radius:999px; padding:.3rem .7rem; cursor:var(--nt-cur)}
footer{margin-top:6rem; padding:2rem 0 3rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.9375rem; color:var(--muted)}
footer ul{display:flex; gap:1.5rem; list-style:none; padding:0; margin:0}
.switch{position:relative}
.switch summary{list-style:none; cursor:var(--nt-cur); display:inline-flex; align-items:center; gap:.4rem; font-size:.9375rem; font-weight:500; padding:.35rem .7rem; border:1px solid var(--line-2); border-radius:999px}
.switch summary::-webkit-details-marker{display:none}
.switch summary .chev{transition:transform .15s ease}
.switch[open] summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){
.switch summary .chev{transition:none}
}
.switch-menu{position:absolute; right:0; top:calc(100% + .5rem); background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.10); padding:.4rem; min-width:16rem; z-index:20}
.switch-menu a{display:block; padding:.6rem .7rem; border-radius:8px; line-height:1.25; cursor:var(--nt-cur)}
.switch-menu a:hover{background:var(--bg-2); text-decoration:none}
.switch-menu a[aria-current="true"]{background:var(--bg-2)}
.switch-menu .t{font-weight:600; font-size:.9375rem}
.switch-menu .d{display:block; font-size:.8125rem; color:var(--muted); margin-top:.1rem}
.switch-menu a[aria-current="true"] .d::after{content:" · current"}
.view{display:none}
.view.active{display:block}
#view-explore .phones{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.25rem; margin-top:2.5rem}
#view-showrooms .phones{display:grid; grid-template-columns:repeat(2, minmax(0,300px)); justify-content:center; gap:2.5rem; margin-top:2.5rem}
@media (max-width:760px){
#view-explore .phones{grid-template-columns:repeat(4, 60vw); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem}
#view-showrooms .phones{grid-template-columns:repeat(2, 72vw); justify-content:center; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem}
.phones > div{scroll-snap-align:start}
}
#view-home{min-height:64vh; flex-direction:column; align-items:center; text-align:center; padding-top:3.25rem}
#view-home.active{display:flex}
.home-avatar{width:104px; height:104px; border-radius:50%; object-fit:cover; box-shadow:0 8px 30px rgba(0,0,0,.14)}
.home-name{font-size:1.15rem; color:var(--ink); font-weight:600; letter-spacing:-0.01em; margin:1.15rem 0 0}
.home-role{font-size:.9375rem; color:var(--muted); margin:.25rem 0 0; font-weight:400}
.home-hi{font-size:1rem; color:var(--muted); margin:3rem 0 .75rem}
.home-head{font-size:clamp(2.1rem, 5.2vw, 3.4rem); font-weight:600; letter-spacing:-0.015em; line-height:1.14; max-width:22ch; font-variation-settings:"opsz" 40; margin:0 auto}
.home-sub{font-size:1.1875rem; line-height:1.5; color:var(--ink-2); max-width:54ch; margin:1rem auto 0}
.home-work{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem; margin:3rem auto 0; max-width:var(--w-wide); width:100%; text-align:left}
.work-card{cursor:var(--nt-cur); background:var(--bg); border-radius:20px; overflow:hidden; transition:transform .18s ease}
.work-card:hover .wc-image{border-color:var(--ink)}
.work-card:hover .wc-go{text-decoration:underline; text-underline-offset:.2em}
@media (prefers-reduced-motion: reduce){
.work-card{transition:none}
}
.wc-image{position:relative; aspect-ratio:16/10; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:var(--bg-2); transition:border-color .18s ease}
.wc-image .ph{position:absolute; inset:0; border:0; border-radius:0; height:100%; width:100%}
.wc-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.wc-body{display:flex; flex-direction:column; gap:.9rem; padding:1.1rem .25rem 0}
.wc-left{max-width:100%}
.wc-kicker{font-size:.8125rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.work-card h3{font-size:1.4rem; margin:.35rem 0 .35rem; letter-spacing:-0.015em; line-height:1.08}
.work-card p{margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.45}
.wc-right{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:.85rem; margin-top:.15rem}
.wc-go{font-size:.9375rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}
.wc-metric{font-size:.8125rem; color:var(--muted)}
.wc-metric b{color:var(--ink); font-weight:700}
.home-connect{margin:4rem 0 1rem; display:flex; gap:1.5rem; justify-content:center; font-size:.9375rem; color:var(--muted)}
.home-connect a{cursor:var(--nt-cur)}
@media (max-width:760px){
.home-work{grid-template-columns:1fr; gap:2.5rem}
}
.dock-wrap{display:flex; justify-content:center; margin:2.25rem auto 0}
.dock{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .7rem; background:var(--bg); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.08); max-width:100%; overflow-x:auto}
.tool{position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; color:#ffffff; transition:transform .15s ease}
.tool:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){
.tool:hover{transform:none}
}
.tool span{pointer-events:none; line-height:1}
.tool[data-label]::after{content:attr(data-label); position:absolute; bottom:calc(100% + .5rem); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-size:.75rem; font-weight:500; padding:.25rem .5rem; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease}
.tool:hover::after{opacity:1}
.dock-sep{flex:0 0 auto; width:1px; height:28px; background:var(--line); margin:0 .2rem}
.dock-note{text-align:center; font-size:.8125rem; color:var(--muted); margin:.9rem 0 0}
.brand{display:flex; align-items:center; gap:.65rem; cursor:var(--nt-cur); text-decoration:none}
.brand:hover{text-decoration:none}
.brand-avatar{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-text b{font-size:.9375rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em}
.brand-text i{font-style:normal; font-size:.8125rem; color:var(--muted)}
@media (max-width:480px){
.brand-text i{display:none}
}
.page-fx{position:fixed; inset:-10% 0; z-index:999; pointer-events:none; transform:translateY(115%);
    -webkit-backdrop-filter:blur(26px) saturate(115%); backdrop-filter:blur(26px) saturate(115%);
    background:linear-gradient(180deg, rgba(59,130,246,.05) 0%, rgba(255,255,255,.14) 45%, rgba(37,99,235,.06) 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    display:flex; align-items:center; justify-content:center;}
.page-fx.cover{transition:transform .5s cubic-bezier(.5,0,.2,1); transform:translateY(0)}
.page-fx.reveal{transition:transform .5s cubic-bezier(.5,0,.2,1); transform:translateY(-115%)}
.page-fx .fx-mark{color:rgba(37,99,235,.55); font-weight:700; font-size:1.1rem; letter-spacing:.06em; opacity:0; transition:opacity .25s ease}
.page-fx.cover .fx-mark{opacity:1}
.view.active{animation:viewIn .5s ease both}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
#view-home.active{animation:viewIn .5s ease both}
@media (prefers-reduced-motion: reduce){
.page-fx{display:none}
.view.active, #view-home.active{animation:none}
}
body{background:#1f5b3e;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:32px 32px}
.sheet{background:var(--bg); position:relative; z-index:1; transform-origin:center bottom; will-change:transform; padding-bottom:4rem}
.page-curl{position:absolute; right:0; bottom:0; width:var(--curl,0px); height:var(--curl,0px); pointer-events:none; z-index:4}
.page-curl .reveal{position:absolute; inset:0; background:#1f5b3e; clip-path:polygon(100% 0, 100% 100%, 0 100%)}
.page-curl .flap{position:absolute; inset:0; background:linear-gradient(135deg,#f0f0f0 0%,#e1e1e1 60%,#d0d0d0 100%);
    clip-path:polygon(0 0, 100% 0, 0 100%); filter:drop-shadow(-3px -3px 6px rgba(0,0,0,.22))}
.board-closing{position:relative; z-index:0; display:block; color:#ffffff; text-align:center; padding:5rem 1.5rem 5rem; max-width:var(--w-wide); margin:0 auto; border:0}
.board-msg{font-size:clamp(2rem,5vw,3.25rem); font-weight:700; letter-spacing:-0.025em; line-height:1.05; color:#ffffff; max-width:18ch; margin:0 auto}
.board-sub{font-size:1.15rem; color:rgba(255,255,255,.85); margin:1.25rem auto 0; max-width:42ch}
.board-connect{margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.board-connect a{color:#ffffff; border:1px solid rgba(255,255,255,.4); padding:.55rem 1.15rem; border-radius:999px; cursor:var(--nt-cur); transition:background .15s ease}
.board-connect a:hover{background:rgba(255,255,255,.14); text-decoration:none}
.note{position:absolute; padding:.7rem 1rem; font-size:.9rem; line-height:1.2; border-radius:2px; box-shadow:0 14px 26px rgba(0,0,0,.3); font-weight:600; white-space:nowrap; z-index:2; cursor:grab; touch-action:none; user-select:none; transition:box-shadow .2s ease}
.note-a{background:#ff6b6b; color:#4a0d0d; top:1.5rem; left:4%; transform:rotate(-5deg)}
.note-b{background:#ffe066; color:#4a3a05; top:2.4rem; right:4%; transform:rotate(5deg)}
@media (max-width:760px){
.note{display:none}
.board-closing{padding:3.5rem 1.25rem}
}
@media (max-width:600px){
.page{padding:0 1.25rem}
.section{padding:4.5rem 0 0}
}
.wc-image .ph, .feature .ph{
    border:0;
    background:
      radial-gradient(120% 120% at 100% 0%, rgba(31,91,62,.14), transparent 60%),
      linear-gradient(135deg, #f2f2f2 0%, #e6e6e6 55%, #d8d8d8 100%);
    color:var(--ink-2);
  }
.wc-image .ph b, .feature .ph b{color:var(--ink)}
.wc-image .ph code, .feature .ph code{background:rgba(0,0,0,.05)}
.wc-image > .ph, .wc-image > img{height:124%; top:-12%; bottom:auto; will-change:transform}
.feature .ph, .feature img{will-change:transform}
.work-card{perspective:900px; overflow:visible; position:relative}
.wc-image{transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .18s ease; will-change:transform}
.work-card .wc-tag{position:absolute; top:0; left:50%; transform:translate(-50%,-150%); background:var(--ink); color:var(--bg); font-size:.72rem; font-weight:600; letter-spacing:.02em; padding:.32rem .72rem; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .2s ease, transform .25s ease; pointer-events:none; z-index:6; box-shadow:0 8px 20px rgba(0,0,0,.25)}
.work-card:hover .wc-tag{opacity:1; transform:translate(-50%,-120%)}
.screen-frame{max-width:300px; width:100%; height:520px; overflow-y:auto; border:1px solid var(--line-2); border-radius:22px; background:var(--bg-2); box-shadow:0 10px 30px rgba(0,0,0,.08)}
.screen-frame img{width:100%; display:block}
.screen-frame::-webkit-scrollbar{width:6px}
.screen-frame::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px}
.screen-note{font-size:.8125rem; color:var(--muted); font-style:italic; margin:.6rem 0 0}
.ph{border:0; background:
    radial-gradient(120% 120% at 100% 0%, rgba(31,91,62,.10), transparent 60%),
    linear-gradient(135deg,#f2f2f2 0%,#e6e6e6 55%,#d8d8d8 100%); color:var(--ink-2)}
.ph b{color:var(--ink)}
.ph code{background:rgba(0,0,0,.05)}
.wc-image.cover-scene{
    border:0; overflow:hidden; aspect-ratio:5/4;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    text-align:center; padding:1.15rem 1.1rem 0;
    background:
      radial-gradient(90% 70% at 50% -20%, rgba(255,255,255,.26), transparent 60%),
      linear-gradient(150deg,#333333 0%,#333333 46%,#333333 100%);
  }
.wc-image.cover-scene.scene-alt{
    background:
      radial-gradient(85% 120% at 22% -12%, rgba(255,255,255,.20), transparent 55%),
      linear-gradient(150deg,#22c197 0%,#12876a 48%,#0c5f4a 100%);
  }
.cover-phone{
    position:relative; width:31%; aspect-ratio:9/19; margin-bottom:-3%;
    border-radius:1.75rem; background:linear-gradient(150deg,#1c1c22,#050508); padding:.36rem;
    box-shadow:0 28px 58px -18px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,255,255,.14), inset 0 1px 2px rgba(255,255,255,.10);
    transform:rotate(-4deg); transition:transform .5s cubic-bezier(.2,.7,.2,1); will-change:transform;
  }
.cover-phone::before{ content:""; position:absolute; z-index:4; top:.66rem; left:50%; transform:translateX(-50%); width:23%; height:.46rem; background:#333333; border-radius:999px; box-shadow:0 0 0 1px rgba(255,255,255,.04); }
.cover-phone .screen{ position:absolute; inset:.36rem; border-radius:1.42rem; overflow:hidden; background:#ffffff; }
.work-card:hover .cover-phone{ transform:rotate(-2.5deg) translateY(-4%); }
.cover-phone .screen img{ position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
.cover-phone .screen.empty{
    background:radial-gradient(120% 80% at 50% 0%, rgba(31,91,62,.14), transparent 60%),
      linear-gradient(160deg,#f3f3f3,#e3e3e3);
    display:flex; align-items:center; justify-content:center; text-align:center; padding:12%;
  }
.empty-mark{ display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--ink-2); }
.empty-mark .pin{ font-size:1.6rem; color:#12876a; line-height:1 }
.empty-mark b{ color:var(--ink); font-size:.9rem }
.empty-mark small{ font-size:.7rem; opacity:.8 }
.vhero{margin:1.5rem 0 0; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:1rem 1rem .4rem}
.vhero + .vhero{margin-top:1rem}
.vhero .vlabel{display:inline-block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:.05rem .2rem .35rem}
.vhero .vtitle{margin:.1rem .2rem .85rem; font-size:1.06rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.15}
.vhero img{width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 6px 18px -10px rgba(0,0,0,.22); background:#ffffff}
.vhero figcaption{margin:.7rem .2rem .3rem; font-size:.8125rem; color:var(--muted); line-height:1.42}
.cover-scene .eyebrow{font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:600}
.cover-scene .banner-title{color:#ffffff; font-size:1.16rem; line-height:1.12; letter-spacing:-.01em; font-weight:700; margin:.2rem 0 .28rem}
.cover-scene .banner-sub{color:rgba(255,255,255,.82); font-size:.72rem; line-height:1.34; margin:0 auto; max-width:90%}
.banner-stage{position:relative; width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; margin-top:.5rem}
.float-chip{position:absolute; background:#ffffff; border-radius:12px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); padding:.5rem .58rem; display:flex; gap:.45rem; align-items:center; z-index:5; text-align:left; max-width:50%}
.float-chip b{font-size:.66rem; color:var(--ink); line-height:1.1; display:block}
.float-chip small{font-size:.56rem; color:var(--muted); display:block; margin-top:.12rem}
.chip-ic{width:1.35rem; height:1.35rem; border-radius:7px; flex:0 0 auto}
.float-pill{position:absolute; background:#ffffff; color:var(--ink); border-radius:999px; padding:.34rem .62rem; font-size:.62rem; font-weight:600; box-shadow:0 12px 24px -12px rgba(0,0,0,.45); z-index:5; white-space:nowrap}
.chip-a{left:5%; bottom:14%; transform:rotate(-6deg)}
.pill-b{right:5%; top:40%; transform:rotate(5deg)}
.float-chip, .float-pill{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .chip-a{transform:rotate(-3deg) translateY(-4px)}
.work-card:hover .pill-b{transform:rotate(2deg) translateY(-4px)}
@media (max-width:760px){
.cover-scene{aspect-ratio:4/3}
.cover-phone{width:40%}
}
.ph.filled{border:1px solid var(--line-2); background:#ffffff}
.ph.card-in-phone{background:#ffffff}
.ph.card-in-phone img{position:absolute; top:6%; left:5%; width:90%; height:auto; object-fit:contain; object-position:top}
.frame-wrap{display:flex; justify-content:center; margin:.4rem 0 .2rem}
.ph.await{border:1px solid var(--line); background:linear-gradient(160deg,var(--bg-2),var(--bg-3)); color:var(--muted)}
.ph.await small{display:block; font-size:.7rem; opacity:.75; margin-top:.25rem}
.cardhost{position:relative; overflow:hidden}
.cardhi{position:absolute; border:2px solid transparent; border-radius:9px; background:transparent; box-shadow:none; opacity:1; transition:border-color .3s ease, background .3s ease, box-shadow .3s ease; pointer-events:none; z-index:4}
.cardhi.on{border:2.5px solid #333333; background:transparent; box-shadow:0 0 0 9999px rgba(0,0,0,.55)}
.decisions.guided .decision{opacity:.4; transition:opacity .35s ease}
.decisions.guided .decision.active{opacity:1}
.decisions.guided .decision.active::before{color:#333333; font-weight:700}
.decisions .decision::before{transition:color .3s ease}
@media (prefers-reduced-motion:reduce){
.cardhi{transition:none}
}
@media (max-width:760px){
.card-visual{position:static}
.decisions .decision{opacity:1}
}
.card-study{position:relative}
.cs-link{position:absolute; left:0; top:0; pointer-events:none; z-index:6; overflow:visible; opacity:0; transition:opacity .3s ease}
.cs-link path{fill:none; stroke:#333333; stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 3px 8px rgba(51,51,51,.45))}
.cs-link circle{fill:#333333}
.decisions.guided .decision.active h4{color:#333333}
@media (max-width:640px){
.card-study{grid-template-columns:1fr; gap:1.4rem}
.card-visual{position:static; max-width:19rem}
.cs-link{display:none}
.decisions.guided .decision{opacity:1}
}
.state-set{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.8rem; margin-top:1.4rem}
.state-item{display:flex; flex-direction:column; gap:.85rem}
.state-phone{position:relative; width:100%; max-width:236px; margin:0 auto; aspect-ratio:9/19.3; background:linear-gradient(150deg,#1c1c22,#333333); border-radius:2rem; padding:.42rem; box-shadow:0 22px 46px -18px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,255,255,.1), inset 0 1px 2px rgba(255,255,255,.1)}
.state-phone::before{content:""; position:absolute; z-index:3; top:.66rem; left:50%; transform:translateX(-50%); width:26%; height:.48rem; background:#333333; border-radius:999px}
.state-screen{position:absolute; inset:.42rem; border-radius:1.62rem; overflow:hidden; background:#ffffff; display:none; flex-direction:column; --cx-ink:#333333; --cx-muted:#71748a; --cx-violet:#333333; --cx-line:#f3f3f3; color:var(--cx-ink)}
.state-screen.is-active{display:flex}
.ss-bar{display:flex; justify-content:space-between; align-items:center; padding:.7rem .9rem .15rem; font-size:.62rem; font-weight:700}
.ss-head{display:flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-bottom:1px solid var(--cx-line)}
.ss-pin{width:1.45rem;height:1.45rem;border-radius:50%;background:#f9f9f9;color:var(--cx-violet);display:flex;align-items:center;justify-content:center;font-size:.72rem;flex:0 0 auto}
.ss-head b{font-size:.72rem; display:block; line-height:1.1}
.ss-head small{font-size:.58rem; color:var(--cx-muted)}
.ss-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:.6rem 1rem; gap:.45rem}
.ss-body.ss-noill{gap:.55rem; padding:1rem}
.ss-ill{width:54%; max-width:118px}
.ss-body h5{margin:.25rem 0 0; font-size:.82rem; line-height:1.2; font-weight:700; color:var(--cx-ink)}
.ss-body p{margin:0; font-size:.66rem; line-height:1.36; color:var(--cx-muted)}
.ss-cta{padding:.65rem .9rem 1rem; display:flex; flex-direction:column; gap:.5rem}
.ss-primary{background:var(--cx-violet); color:#ffffff; border:0; border-radius:.7rem; padding:.62rem; font-size:.7rem; font-weight:700; cursor:var(--nt-cur)}
.ss-ghost{background:#ffffff; color:var(--cx-violet); border:1.5px solid #eaeaea; border-radius:.7rem; padding:.56rem; font-size:.7rem; font-weight:600; cursor:var(--nt-cur)}
.ss-list{flex:1; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.5rem; overflow:hidden}
.ss-lh{font-size:.76rem; font-weight:700; margin:.15rem 0 .1rem}
.ss-rc{display:flex; gap:.5rem; align-items:center; border:1px solid var(--cx-line); border-radius:.7rem; padding:.45rem .5rem}
.ss-th{width:2.7rem; height:2.05rem; border-radius:.45rem; background:linear-gradient(135deg,#f5f5f5,#dcecff); flex:0 0 auto}
.ss-rc b{font-size:.66rem; display:block; line-height:1.15}
.ss-rc small{font-size:.55rem; color:var(--cx-muted); display:block}
.ss-at{font-size:.55rem; color:var(--cx-violet); font-weight:600; display:block; margin-top:.1rem}
.state-cap{text-align:center}
.state-cap b{display:block; font-size:.92rem; color:var(--ink)}
.state-cap span{font-size:.78rem; color:var(--muted)}
@media (max-width:760px){
.state-set{grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto}
}
.statesview{display:flex; justify-content:center}
.states button.key{font-size:.875rem; color:var(--ink); border:1px solid var(--ink); background:var(--bg); border-radius:999px; padding:.35rem .85rem; font-weight:500; cursor:var(--nt-cur); font-family:inherit; transition:background .18s ease, color .18s ease, border-color .18s ease}
.states button.key:hover{background:var(--bg-2)}
.states button.key.is-on{background:#333333; border-color:#333333; color:#ffffff}
.ss-band{width:100%; display:block; flex:0 0 auto}
.ss-bot{margin-top:auto}
.ss-mid{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:.45rem .95rem; gap:.3rem}
.ss-ill2{width:50%; max-width:108px; height:auto; margin-bottom:.1rem}
.ss-mid h5{margin:0; font-size:.8rem; font-weight:700; color:#333333; line-height:1.15}
.ss-mid p{margin:0; font-size:.62rem; color:#6b6f80; line-height:1.32}
.ss-mid .ss-cta{margin-top:.35rem; width:100%; display:flex; flex-direction:column; gap:.34rem; padding:0}
.ss-primary{background:#333333; color:#ffffff; border:0; border-radius:.6rem; padding:.5rem; font-size:.66rem; font-weight:700; cursor:var(--nt-cur)}
.ss-ghost{background:#ffffff; color:#333333; border:1.5px solid #eaeaea; border-radius:.6rem; padding:.46rem; font-size:.66rem; font-weight:600; cursor:var(--nt-cur)}
.ss-list2{flex:1 1 auto; min-height:0; padding:.55rem .7rem; display:flex; flex-direction:column; gap:.42rem; overflow:hidden}
.ss-list2 .ss-lh{font-size:.74rem; font-weight:700; margin:.1rem 0 .05rem; color:#333333}
.ss-rc2{display:flex; gap:.5rem; align-items:center; border:1px solid #f3f3f3; border-radius:.65rem; padding:.42rem .5rem}
.ss-rc2 .ss-th{width:2.6rem; height:2rem; border-radius:.4rem; background:linear-gradient(135deg,#f5f5f5,#dcecff); flex:0 0 auto}
.ss-rc2 b{font-size:.64rem; display:block; line-height:1.15; color:#333333}
.ss-rc2 small{font-size:.54rem; color:#71748a; display:block}
.ss-rc2 .ss-at{font-size:.54rem; color:#333333; font-weight:600; display:block; margin-top:.08rem}
.nb{margin-top:2rem}
.nb-scn{display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 0 1.6rem; font-size:.95rem; color:var(--ink)}
.nb-scn span{font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:.28rem .6rem}
.nb-grid{display:grid; grid-template-columns:minmax(0,330px) auto minmax(0,330px); justify-content:center; align-items:start; gap:1.4rem 2rem}
.nb-col{display:flex; flex-direction:column; gap:.85rem; min-width:0}
.nb-badge{align-self:flex-start; font-size:.74rem; font-weight:600; padding:.34rem .75rem; border-radius:999px; background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line-2)}
.nb-badge.win{background:#333333; border-color:#333333; color:#ffffff}
.nb-vs{align-self:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; color:var(--muted); background:var(--bg)}
.sc{background:#fff; border:1px solid #e4e4ec; border-radius:18px; overflow:hidden; box-shadow:0 12px 32px -20px rgba(20,16,60,.45); color:#101114; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.sc.win{border-color:#333333; box-shadow:0 0 0 1.5px #333333, 0 22px 44px -20px rgba(51,51,51,.6)}
.sc:hover{transform:translateY(-3px)}
.sc-photo{position:relative; aspect-ratio:2.35/1; background:#dfe3ea; overflow:hidden}
.sc-photo img{width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block}
.sc-tag{position:absolute; left:0; bottom:0; background:#fff; color:#2b3441; font-weight:600; font-size:.8rem; line-height:1; padding:.5rem 1.5rem .3rem .85rem; border-top-right-radius:1.5rem}
.sc .sc-body{padding:.8rem .9rem .95rem}
.sc .sc-name{margin:0 0 .2rem; font-size:1.05rem; font-weight:700; color:#101114; line-height:1.2}
.sc .sc-addr{margin:0 0 .4rem; font-size:.8rem; color:#6f7280}
.sc .sc-dist{margin:0; font-size:.8rem; color:#4a36f5; font-weight:500; display:flex; align-items:center; gap:.3rem}
.sc .sc-dot{color:#9aa0ac}
.sc .sc-hours{margin:.5rem 0 .85rem; font-size:.8rem; color:#2a2d34}
.sc .sc-open{color:#0b8a3c; font-weight:500}
.sc-btns{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.sc-btn{border-radius:.6rem; font-size:.78rem; font-weight:600; padding:.56rem .4rem; display:flex; align-items:center; justify-content:center; gap:.35rem; white-space:nowrap}
.sc-btn.ghost{border:1.5px solid #4a36f5; color:#4a36f5; background:#fff}
.sc-btn.fill{background:linear-gradient(180deg,#6c5cff,#4a36f5); color:#fff; border:1.5px solid #4a36f5}
.nb-facts{border-top:1px solid var(--line)}
.nb-fact{display:flex; justify-content:space-between; align-items:center; padding:.55rem .15rem; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--muted)}
.nb-fact b{color:var(--ink-2); font-weight:600}
.nb-fact.w b{color:#333333}
.nb-fact.w b::after{content:"✓"; margin-left:.4rem; font-size:.75rem}
.nb-verdict{max-width:34rem; margin:2rem auto 0; text-align:center; font-size:.95rem; color:var(--muted); line-height:1.5}
.nb-verdict b{display:block; font-size:1.25rem; color:var(--ink); letter-spacing:-.01em; margin-bottom:.3rem}
@media (max-width:760px){
.nb-grid{grid-template-columns:minmax(0,340px); }
.nb-vs{margin:0 auto}
}
.jr{margin-top:2rem}
.jr-track{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem}
.jr-track::before{content:""; position:absolute; top:1.35rem; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--line-2) 0 25%,#333333 25% 75%,var(--line-2) 75%)}
.jr-st{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem}
.jr-ic{width:2.7rem; height:2.7rem; border-radius:50%; background:#333333; color:#ffffff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--bg); position:relative; z-index:1}
.jr-ic svg{width:1.2rem; height:1.2rem}
.jr-st.dim .jr-ic{background:var(--bg-2); color:var(--muted); border:1px solid var(--line-2)}
.jr-st i{font-style:normal; font-size:.7rem; color:var(--muted); margin-top:.45rem}
.jr-st b{font-size:1rem; color:var(--ink)}
.jr-st .q{font-size:.8rem; color:var(--muted); line-height:1.35; max-width:11rem}
.jr-br{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin-top:1.2rem}
.jr-b{border-top:2px solid; padding:.55rem .3rem .45rem; font-size:.74rem; text-align:center; font-weight:600}
.jr-b.grey{border-color:var(--line-2); color:var(--muted)}
.jr-b.vio{border-color:#333333; color:#333333; background:linear-gradient(180deg,rgba(51,51,51,.08),transparent); border-radius:0 0 10px 10px}
.callout.park{display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:2.2rem; align-items:center}
.park-txt h3{margin-top:0}
.park-rule{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; font-size:.9rem; color:var(--muted)}
.park-rule b{color:#c9363b; background:#fff1f1; border:1px solid #f6c9cb; border-radius:999px; padding:.2rem .65rem; font-size:.8rem}
.park-rule span{color:var(--muted)}
.park-rule .pr-t{white-space:nowrap}
.sc .sc-park{margin:-.3rem 0 .85rem; display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#9aa0ac; outline:1.5px dashed #f3b4b6; outline-offset:4px; border-radius:6px}
.sc-park span{display:flex; align-items:center; gap:.35rem; text-decoration:line-through; text-decoration-color:#e5484d; text-decoration-thickness:2px}
.sc-park svg{width:.95rem; height:.95rem}
.sc-park em{font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#e5484d; background:#fff4f4; border:1px solid #f3b4b6; border-radius:999px; padding:.12rem .45rem}
.tv{display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem}
.tv-lane{display:grid; grid-template-columns:9.5rem minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:.7rem}
.tv-who{display:flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:700; color:var(--ink); border-right:2px solid var(--line-2); padding-right:.6rem}
.tv-who.k{border-right-color:#333333}
.tv-who svg{width:1.1rem; height:1.1rem; color:#333333; flex:0 0 auto}
.tv-step{border:1px solid var(--line-2); border-radius:14px; padding:.8rem .85rem; display:flex; flex-direction:column; gap:.2rem; background:var(--bg)}
.tv-step svg{width:1.15rem; height:1.15rem; color:#333333; margin-bottom:.25rem}
.tv-step b{font-size:.9rem}
.tv-step small{font-size:.75rem; color:var(--muted); line-height:1.35}
.tv-step.out{background:#333333; border-color:#333333}
.tv-step.out b,.tv-step.out small,.tv-step.out svg{color:#ffffff}
.tv-arr{align-self:center; color:var(--muted); font-size:1.1rem}
.vs-sum{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 1.2rem; font-size:.9rem; color:var(--muted)}
.vs-sum b{color:var(--ink)}
.vs-bar{display:flex; gap:4px}
.vs-bar i{width:2.2rem; height:.55rem; border-radius:3px; background:#1a9e55}
.vs-bar i.warn{background:#e59a1b}
.vgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.vt{display:flex; gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--bg)}
.vt.warn{border-color:#f3dcb0; background:#fffaf0}
.vt-ic{flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center}
.vt-ic svg{width:1.15rem; height:1.15rem}
.vt.ok .vt-ic{background:#e6f6ed; color:#138a48}
.vt.warn .vt-ic{background:#fdeccd; color:#b06a00}
.vt-tag{display:block; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.2rem}
.vt b{display:block; font-size:.95rem; color:var(--ink); margin-bottom:.25rem}
.vt p{margin:0; font-size:.82rem; color:var(--muted); line-height:1.45}
.vt cite{display:block; margin-top:.45rem; font-size:.68rem; font-style:normal; color:var(--muted); opacity:.8}
.ib{margin-top:1.8rem}
.ib-leg{display:flex; gap:1.2rem; font-size:.75rem; color:var(--muted); margin-bottom:.6rem}
.ib-leg span::before{content:""; display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:.4rem; vertical-align:-1px}
.ib-leg .b4::before{background:var(--line-2)}
.ib-leg .af::before{background:#333333}
.ib-row{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) 5.5rem; align-items:center; gap:1.2rem; padding:.75rem 0; border-top:1px solid var(--line)}
.ib-name{font-size:.9rem; color:var(--ink-2)}
.ib-name small{display:block; font-size:.7rem; color:var(--muted)}
.ib-bars{display:flex; flex-direction:column; gap:4px}
.ib-b{height:1.05rem; width:var(--w); border-radius:4px; display:flex; align-items:center; justify-content:flex-end}
.ib-b.before{background:var(--line-2)}
.ib-b.after{background:#333333}
.ib-b em{font-style:normal; font-size:.68rem; font-weight:600; padding-right:.4rem}
.ib-b.before em{color:var(--ink-2)}
.ib-b.after em{color:#ffffff}
.ib-d{font-size:1.2rem; font-weight:700; color:#138a48; text-align:right; letter-spacing:-.01em}
.shift{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1.2rem; align-items:stretch; margin:1.6rem 0 .4rem}
.sh-box{border:1px solid var(--line-2); border-radius:16px; padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.25rem}
.sh-box svg{width:1.5rem; height:1.5rem; margin-bottom:.45rem}
.sh-box small{font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700}
.sh-box b{font-size:1.15rem; color:var(--ink)}
.sh-box span{font-size:.86rem; color:var(--muted)}
.sh-box.from{background:var(--bg-2); color:var(--muted)}
.sh-box.to{border-color:#333333; box-shadow:0 18px 40px -24px rgba(51,51,51,.65)}
.sh-box.to svg{color:#333333}
.sh-arr{align-self:center; font-size:1.5rem; color:#333333}
.lessons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:1rem}
.ls{border-top:2px solid var(--ink); padding-top:.75rem; display:flex; flex-direction:column; gap:.3rem}
.ls i{font-style:normal; font-size:.72rem; color:#333333; font-weight:700}
.ls b{font-size:1rem; color:var(--ink)}
.ls span{font-size:.85rem; color:var(--muted); line-height:1.45}
@media (max-width:760px){
.jr-track,.jr-br{grid-template-columns:1fr}
.jr-track::before,.jr-br{display:none}
.callout.park{grid-template-columns:1fr}
.tv-lane{grid-template-columns:1fr}
.tv-arr{transform:rotate(90deg); justify-self:center}
.tv-who{border-right:0; border-bottom:2px solid var(--line-2); padding:0 0 .4rem}
.vgrid{grid-template-columns:1fr}
.ib-row{grid-template-columns:1fr 4.5rem}
.ib-name{grid-column:1/-1}
.shift{grid-template-columns:1fr}
.sh-arr{transform:rotate(90deg); justify-self:center}
.lessons{grid-template-columns:1fr}
}
.cons{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0 .9rem}
.cons span{font-size:.82rem; font-weight:600; border-radius:999px; padding:.35rem .8rem; border:1px solid var(--line-2)}
.cons .x{color:var(--muted); text-decoration:line-through; text-decoration-color:#e5484d; text-decoration-thickness:2px; background:var(--bg-2)}
.cons .ok{color:#ffffff; background:#333333; border-color:#333333}
.cons .ok::before{content:"✓ "}
.tri,.q3,.next2{display:grid; gap:1rem}
.tri{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:2rem}
.tri-i,.q3-i,.nx{border:1px solid var(--line-2); border-radius:14px; padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.25rem; background:var(--bg)}
.tri-i svg,.q3-i svg,.nx svg{width:1.35rem; height:1.35rem; color:#333333; margin-bottom:.4rem}
.tri-i b,.q3-i b,.nx b{font-size:.95rem; color:var(--ink)}
.tri-i span,.q3-i span,.nx span{font-size:.83rem; color:var(--muted); line-height:1.4}
.q3{grid-template-columns:repeat(3,minmax(0,1fr)); margin:1.1rem 0 1.2rem}
.stack.camstack{display:grid; grid-template-columns:250px minmax(0,1fr); gap:3rem; align-items:start}
.camphone{position:sticky; top:5.5rem; width:250px; aspect-ratio:9/19; background:linear-gradient(150deg,#1c1c22,#333333); border-radius:2.1rem; padding:.42rem; box-shadow:0 26px 52px -20px rgba(0,0,0,.55), 0 0 0 1.5px rgba(255,255,255,.1), inset 0 1px 2px rgba(255,255,255,.1)}
.camphone::before{content:""; position:absolute; z-index:3; top:.64rem; left:50%; transform:translateX(-50%); width:26%; height:.48rem; background:#333333; border-radius:999px}
.cam-screen{position:absolute; inset:.42rem; border-radius:1.72rem; overflow:hidden; background:#ffffff}
.cam-layer{position:relative; transition:transform .8s cubic-bezier(.2,.7,.2,1); will-change:transform}
.cam-layer img{width:100%; display:block}
.cam-band{position:absolute; left:3px; right:3px; border:2px solid #333333; border-radius:9px; background:rgba(51,51,51,.07); opacity:0; transition:opacity .4s ease; pointer-events:none}
.cam-band.on{opacity:1}
.cam-band em{position:absolute; top:6px; left:6px; font-style:normal; font-size:.56rem; font-weight:700; color:#ffffff; background:#333333; padding:.2rem .5rem; border-radius:999px; box-shadow:0 4px 10px rgba(51,51,51,.45); white-space:nowrap; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis}
.steps.gd .step{opacity:.38; transition:opacity .35s ease}
.steps.gd .step.act{opacity:1}
.steps.gd .step.act h4{color:#333333}
.ship{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-top:1.4rem}
.sp{border:1px solid var(--line-2); border-radius:14px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.2rem}
.sp i{width:.6rem; height:.6rem; border-radius:50%; background:#1a9e55; box-shadow:0 0 0 4px #e6f6ed; margin-bottom:.45rem}
.sp.held i{background:#e59a1b; box-shadow:0 0 0 4px #fdeccd}
.sp b{font-size:1rem; color:var(--ink)}
.sp span{font-size:.8rem; color:var(--muted)}
.sp.live span{color:#138a48; font-weight:600}
.next2{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.4rem}
.nx small{font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#333333}
@media (max-width:760px){
.tri,.q3,.next2{grid-template-columns:1fr}
.ship{grid-template-columns:1fr 1fr}
.stack.camstack{grid-template-columns:1fr}
.camphone{position:relative; top:0; margin:0 auto}
}
.hs{position:relative; height:calc(100vh + (var(--n) - 1) * var(--step,55vh)); margin-top:1.5rem}
.hs-pin{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.hs .stack.camstack{width:100%; margin:0; grid-template-columns:auto minmax(0,1fr); gap:2.6rem; align-items:center}
.hs .camphone{position:relative; top:0; width:auto; height:min(72vh,540px)}
.hs-col{min-width:0; display:flex; flex-direction:column; gap:1.1rem}
.hs-head{display:flex; align-items:center; gap:1rem; font-size:.8rem; color:var(--muted)}
.hs-count{font-variant-numeric:tabular-nums; white-space:nowrap}
.hs-count b{font-size:1.45rem; color:var(--ink); font-weight:700}
.hs-bar{flex:1; height:3px; background:var(--line); border-radius:3px; overflow:hidden}
.hs-bar i{display:block; height:100%; width:0; background:#333333; border-radius:3px}
.hs-hint{white-space:nowrap; font-weight:600; color:#333333}
.hs-view{overflow:hidden; padding-left:3px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 76%,transparent); mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 76%,transparent)}
.hs .steps{display:flex; gap:1.1rem; width:max-content; will-change:transform}
.hs .step{display:flex; flex-direction:column; gap:.7rem; width:21rem; flex:0 0 21rem; min-height:17rem; padding:1.4rem 1.4rem 1.3rem; border:1px solid var(--line-2); border-radius:20px; background:var(--bg); opacity:.4; transition:opacity .35s ease, border-color .35s ease, box-shadow .35s ease}
.hs .step:first-child{padding-top:1.4rem; border-top:1px solid var(--line-2)}
.hs .step::before{font-size:2.6rem; font-weight:700; color:var(--line-2); line-height:1; padding:0; letter-spacing:-.02em}
.hs .step > div{display:flex; flex-direction:column; gap:.45rem; flex:1}
.hs .step .mods{margin-top:auto; padding-top:.7rem; border-top:1px dashed var(--line-2)}
.hs .step.act{opacity:1; border-color:#333333; box-shadow:0 24px 50px -28px rgba(51,51,51,.6)}
.hs .step.act::before{color:#333333}
.hs .step.act h4{color:#333333}
@media (max-width:760px){
.hs{height:auto}
.hs-pin{position:relative; height:auto; display:block; overflow:visible}
.hs .stack.camstack{grid-template-columns:1fr}
.hs .camphone{height:min(62vh,460px); margin:0 auto}
.hs-view{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; padding-bottom:.5rem}
.hs .step{scroll-snap-align:start; width:80vw; flex-basis:80vw}
.hs-hint{display:none}
}
.hsv{margin-top:1rem}
.hsv + .screen-note{margin-top:.4rem; text-align:center}
.hs .card-visual{position:relative; top:0; width:min(340px,34vw); align-self:center}
.hs .step .worry{margin-top:auto; padding-top:.7rem; border-top:1px dashed var(--line-2); font-size:.8rem; color:var(--muted); display:block}
@media (max-width:760px){
.hs .card-visual{width:100%; max-width:340px; margin:0 auto}
}
.tri.tl6{grid-template-columns:repeat(3,minmax(0,1fr))}
.next2 .tri-i{min-height:9rem}
.goal{font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink); font-weight:600; border-left:3px solid #c8102e; padding-left:1rem; margin:1rem 0 0}
.qgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.6rem}
.qt{border:1px solid var(--line-2); border-radius:14px; padding:1.1rem 1.15rem; background:var(--bg); position:relative}
.qt i{font-style:normal; font-size:1.8rem; font-weight:700; color:#c8102e; letter-spacing:-.02em; display:block; margin-bottom:.4rem}
.qt p{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.45}
.pb{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.6rem}
.pb-card{border:1px solid var(--line-2); border-radius:16px; padding:1.1rem 1.15rem; background:var(--bg); display:flex; flex-direction:column}
.pb-wide{grid-column:span 2}
.pb-card small{font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.7rem}
.pb-kv{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-top:1px solid var(--line); font-size:.85rem}
.pb-kv span{color:var(--muted)}
.pb-kv b{text-align:right; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chips span{font-size:.78rem; border:1px solid var(--line-2); border-radius:999px; padding:.28rem .65rem; color:var(--ink-2); background:var(--bg-2)}
.pb-list{margin:0; padding:0; list-style:none}
.pb-list li{font-size:.85rem; color:var(--ink-2); padding:.42rem 0 .42rem 1.1rem; border-top:1px solid var(--line); position:relative}
.pb-list li::before{content:""; position:absolute; left:0; top:.9rem; width:.4rem; height:.4rem; border-radius:50%; background:#c8102e}
.imp3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.im{border:1px solid var(--line-2); border-radius:16px; padding:1.3rem; display:flex; flex-direction:column; gap:.3rem}
.im i svg{width:1.3rem; height:1.3rem; color:#138a48}
.im b{font-size:2.4rem; letter-spacing:-.03em; color:var(--ink); line-height:1.05}
.im span{font-size:.88rem; color:var(--muted)}
.bframe{position:relative; width:min(560px,44vw); aspect-ratio:4/3; background:#ffffff; border:1px solid var(--line-2); border-radius:14px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); overflow:hidden}
.bframe-bar{height:2rem; display:flex; align-items:center; gap:.35rem; padding:0 .8rem; background:#f4f4f4; border-bottom:1px solid #e8e8e8}
.bframe-bar i{width:.55rem; height:.55rem; border-radius:50%; background:#ff5f57}
.bframe-bar i:nth-child(2){background:#febc2e}
.bframe-bar i:nth-child(3){background:#28c840}
.bframe-bar span{margin-left:.7rem; font-size:.64rem; color:#8a8a93; background:#ffffff; border:1px solid #e8e8e8; border-radius:999px; padding:.12rem .8rem}
.bframe .cam-screen{inset:2rem 0 0 0; border-radius:0}
.pm{display:flex; flex-direction:column}
.pm-sec{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 8%; border-bottom:1px solid #eeeeee; background:#ffffff; color:#1b1b1f}
.pm-sec small{font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#8a8a93; margin-bottom:.35rem}
.pm-sec b{font-size:clamp(.85rem,1.8vw,1.25rem); letter-spacing:-.01em; line-height:1.15}
.pm-hero{background:linear-gradient(150deg,#e2323a,#8c0f22); color:#ffffff}
.pm-hero small{color:rgba(255,255,255,.75)}
.pm-hero b{font-size:clamp(1.2rem,2.8vw,2rem)}
.pm-ads{padding:0}
.pm-sub{flex:1; width:100%; display:flex; flex-direction:column; justify-content:center; padding:0 8%; border-bottom:1px dashed #eeeeee}
.pm-dark{background:#15151b; color:#ffffff}
.pm-dark small{color:rgba(255,255,255,.6)}
.pm-foot{background:#f5f5f5}
.work-card.span2{grid-column:1/-1}
.work-card.span2 .wc-image.cover-scene{aspect-ratio:auto; min-height:330px; flex-direction:row; align-items:stretch; text-align:left; padding:2rem 0 0 2.2rem; gap:1.5rem}
.span2 .ct-text{flex:0 0 38%; display:flex; flex-direction:column; justify-content:center; padding-bottom:2rem}
.span2 .banner-sub{margin:0; max-width:100%}
.span2 .banner-stage{margin-top:0; align-items:flex-end}
.scene-times{background:radial-gradient(90% 70% at 70% -20%,rgba(255,255,255,.22),transparent 60%),linear-gradient(150deg,#e2323a 0%,#a8102a 50%,#5c0a1b 100%)!important}
.cover-browser{width:86%; background:#ffffff; border-radius:12px 12px 0 0; box-shadow:0 24px 50px -18px rgba(0,0,0,.55); overflow:hidden; transform:rotate(-2deg) translateY(6%); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .cover-browser{transform:rotate(-1deg) translateY(2%)}
.cb-body{padding:1.5rem 1.6rem 2.6rem; background:linear-gradient(150deg,#ffffff,#fff4f5)}
.cb-body b{display:block; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.02; letter-spacing:-.02em; color:#15151b}
.cb-row{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem}
.cb-row i{font-style:normal; font-size:.66rem; font-weight:600; color:#a8102a; background:#fff0f1; border:1px solid #f6c9cd; border-radius:999px; padding:.25rem .6rem}
@media (max-width:760px){
.tri.tl6,.qgrid,.pb,.imp3{grid-template-columns:1fr}
.pb-wide{grid-column:auto}
.bframe{width:100%}
.work-card.span2 .wc-image.cover-scene{flex-direction:column; padding:1.2rem 1.1rem 0}
.span2 .ct-text{flex:none; padding-bottom:0}
}
.bframe .cam-screen{background:#efefef}
.bframe .cam-layer{width:100%}
.bframe .cam-band em{font-size:.5rem}
.span2 .chip-a{left:auto; right:4%; bottom:9%}
.th-hero{position:relative; display:flex; justify-content:center; margin:2.4rem 0 2.2rem}
.bframe.th-web{aspect-ratio:auto; width:min(780px,86%)}
.bframe.th-web img{display:block; width:100%}
.phone.th-mob{position:absolute; width:clamp(120px,16%,180px); right:max(1%,calc(50% - 470px)); bottom:-1.6rem}
.wc-image .cover-browser .cb-img{position:static; inset:auto; display:block; width:100%; height:auto; object-fit:initial}
.cover-browser{position:relative}
@media (max-width:760px){
.bframe.th-web{width:100%}
.phone.th-mob{width:32%; right:-2%; bottom:-1.2rem}
}
.hs-view{padding:1rem 0 2rem 1.3rem; margin:-1rem 0 -2rem -1.3rem;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.3rem,#000 78%,transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 1.3rem,#000 78%,transparent)}
@media (max-width:760px){
.hs-view{padding:0 0 .5rem; margin:0; -webkit-mask-image:none; mask-image:none}
}
#view-rto{--rn:#333333; --ro:#f4632a}
.rt-band{background:radial-gradient(80% 90% at 80% 0%,rgba(244,99,42,.35),transparent 60%),linear-gradient(160deg,#333333,#333333); color:#ffffff; border-radius:28px; padding:3.2rem 2rem!important; text-align:center; margin-top:1rem}
.rt-kick{font-size:1.1rem; color:rgba(255,255,255,.7); margin:0}
.rt-counters{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.4rem 0}
.rt-counters b{display:block; font-size:clamp(3rem,8vw,5.6rem); line-height:1; letter-spacing:-.04em; background:linear-gradient(180deg,#ffffff,#ffb38a); -webkit-background-clip:text; background-clip:text; color:transparent}
.rt-counters span{font-size:1rem; color:rgba(255,255,255,.75)}
.rt-band-sub{margin:0; color:rgba(255,255,255,.85)}
.rt-g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.rt-g4 .tri-i svg,.rt-why svg{color:var(--ro)}
.rt-r .tri-i{min-height:10rem}
.rt-why{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem; margin-top:1.4rem}
.rt-w{border:1px solid var(--line-2); border-radius:18px; padding:1.3rem; display:flex; flex-direction:column; gap:.35rem}
.rt-w svg{width:1.5rem; height:1.5rem; margin-bottom:.5rem}
.rt-w b{font-size:1.15rem; color:var(--ink)}
.rt-w span{font-size:.88rem; color:var(--muted)}
.rt-w.big{background:linear-gradient(160deg,#333333,#333333); color:#ffffff; border:0}
.rt-w.big b{font-size:3rem; letter-spacing:-.03em; color:#ffb38a; line-height:1}
.rt-w.big span{color:rgba(255,255,255,.75)}
.rt-health{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.rt-h{border:1px solid #f6d3c6; background:#fff8f5; border-radius:18px; padding:1.2rem; display:flex; flex-direction:column; gap:.8rem}
.rt-ring{width:84px; height:84px; transform:rotate(-90deg)}
.rt-ring circle{fill:none; stroke-width:8; stroke-linecap:round}
.rt-ring .bg{stroke:#f6d3c6}
.rt-ring .fg{stroke:#e5484d; stroke-dasharray:226.2; stroke-dashoffset:226.2; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.rt-h.in .rt-ring .fg{stroke-dashoffset:calc(226.2 * (1 - var(--p)))}
.rt-h b{display:block; font-size:2.1rem; letter-spacing:-.03em; color:#c7353a; line-height:1}
.rt-h div span{display:block; font-size:.9rem; color:var(--ink); margin-top:.35rem; font-weight:600}
.rt-h small{display:block; font-size:.78rem; color:var(--muted); margin-top:.2rem}
.rt-stat3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.rt-stat3 div{border-radius:18px; padding:1.4rem; background:linear-gradient(160deg,#333333,#333333); color:#ffffff}
.rt-stat3 b{display:block; font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.04em; color:#ffb38a; line-height:1}
.rt-stat3 span{display:block; margin-top:.5rem; color:rgba(255,255,255,.8); font-size:.92rem}
.rt-ins{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem; margin-top:1rem}
.rt-ins.rt-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rt-in{border:1px solid var(--line-2); border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:.3rem}
.rt-in i{font-style:normal; font-size:.72rem; font-weight:700; color:var(--ro)}
.rt-in b{font-size:.92rem; color:var(--ink); line-height:1.25}
.rt-in span{font-size:.8rem; color:var(--muted); line-height:1.4}
.rt-sub{margin:2rem 0 0; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.rt-fx{display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:1.4rem; margin-top:1.4rem; align-items:start}
.rt-fx-l{display:flex; flex-direction:column; gap:.3rem}
.rt-fx-b{display:flex; gap:.7rem; align-items:center; text-align:left; font:inherit; font-size:.9rem; color:var(--ink-2); background:transparent; border:1px solid transparent; border-radius:12px; padding:.6rem .8rem; cursor:var(--nt-cur); transition:background .2s, border-color .2s, color .2s}
.rt-fx-b i{font-style:normal; font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums}
.rt-fx-b:hover{background:var(--bg-2)}
.rt-fx-b.on{background:#fff4ee; border-color:#f8c9b3; color:var(--ink); font-weight:600}
.rt-fx-b.on i{color:var(--ro)}
.rt-fx-r{position:sticky; top:5.5rem}
.rt-fx-p{display:none; border-radius:22px; padding:1.6rem; background:linear-gradient(160deg,#333333,#333333); color:#ffffff; animation:rtfx .45s cubic-bezier(.2,.7,.2,1)}
.rt-fx-p.on{display:block}
@keyframes rtfx{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.rt-fx-p h4{margin:0 0 1.1rem; font-size:1.5rem; letter-spacing:-.02em; color:#ffffff}
.rt-q{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.rt-q div{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1rem}
.rt-q small{display:block; font-size:.72rem; color:rgba(255,255,255,.6); margin-bottom:.4rem}
.rt-q b{font-size:1rem; line-height:1.35}
.rt-q .hl{background:linear-gradient(160deg,#f4632a,#c2410c); border:0}
.rt-q .hl small{color:rgba(255,255,255,.85)}
.rt-notes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.rt-n{border-left:3px solid var(--ro); padding:.2rem 0 .2rem 1rem; display:flex; flex-direction:column; gap:.3rem}
.rt-n b{font-size:1rem; color:var(--ink)}
.rt-n span{font-size:.86rem; color:var(--muted); line-height:1.45}
.rt-hl{margin-top:.9rem}
.rt-hl span{background:#fff4ee; border-color:#f8c9b3; color:#9a3412}
.rt-map{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.rt-m{border-radius:18px; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; min-height:10rem}
.rt-m b{font-size:1rem}
.rt-m span{font-size:.88rem; line-height:1.5}
.rt-m.int{background:#f9f9f9; color:#333333}
.rt-m.ok{background:#e6f6ed; color:#0f5132}
.rt-m.ign{background:#f4f4f4; color:#4b5563}
.rt-m.fr{background:#fff1f1; color:#9f1d22}
#view-rto .ib-b.after{background:var(--ro)}
#view-rto .ib-leg .af::before{background:var(--ro)}
.scene-rto{background:radial-gradient(70% 90% at 85% 10%,rgba(244,99,42,.55),transparent 60%),linear-gradient(150deg,#333333 0%,#333333 55%,#333333 100%)!important}
.rt-cv{width:86%; align-self:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:1.2rem 1.4rem 0; color:#ffffff; backdrop-filter:blur(6px); transform:rotate(-2deg); transition:transform .5s cubic-bezier(.2,.7,.2,1); overflow:hidden}
.work-card:hover .rt-cv{transform:rotate(-1deg) translateY(-4px)}
.rt-cv small{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65)}
.rt-cv b{display:block; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; line-height:1.05; margin:.2rem 0 .6rem}
.rt-cv svg{display:block; width:calc(100% + 2.8rem); margin-left:-1.4rem; height:110px}
@media (max-width:760px){
.rt-counters,.rt-g4,.rt-why,.rt-health,.rt-stat3,.rt-ins,.rt-ins.rt-3,.rt-notes,.rt-map{grid-template-columns:1fr}
.rt-fx{grid-template-columns:1fr}
.rt-fx-r{position:static}
.rt-q{grid-template-columns:1fr}
}
.rt-h b .rt-count{display:inline; font-size:inherit; font-weight:inherit; color:inherit; margin:0}
.scene-rto{background:radial-gradient(90% 70% at 70% -20%,rgba(255,255,255,.22),transparent 60%),linear-gradient(150deg,#333333 0%,#333333 50%,#333333 100%)!important}
.rt-cv path:first-of-type{fill:rgba(255,255,255,.16)}
.rt-cv path:last-of-type{stroke:#ffffff}
.rt-g4 .tri-i svg,.rt-why svg{color:#333333}
.rt-w.big{background:var(--bg); color:var(--ink); border:1px solid var(--line-2)}
.rt-w.big b{color:#333333}
.rt-w.big span{color:var(--muted)}
.rt-h{background:var(--bg); border-color:var(--line-2)}
.rt-ring .bg{stroke:var(--line)}
.rt-stat3 div{background:var(--bg); color:var(--ink); border:1px solid var(--line-2)}
.rt-stat3 b{color:#333333}
.rt-stat3 span{color:var(--muted)}
.rt-in i{color:#333333}
.rt-fx-b.on{background:#f9f9f9; border-color:#eaeaea}
.rt-fx-b.on i{color:#333333}
.rt-fx-p{background:var(--bg); color:var(--ink); border:1px solid var(--line-2); box-shadow:0 22px 48px -28px rgba(0,0,0,.35)}
.rt-fx-p h4{color:var(--ink)}
.rt-q div{background:var(--bg-2); border:1px solid var(--line)}
.rt-q small{color:var(--muted)}
.rt-q b{color:var(--ink)}
.rt-q .hl{background:#333333; border:0}
.rt-q .hl b,.rt-q .hl small{color:#ffffff}
.rt-n{border-left-color:#333333}
.rt-hl span{background:var(--bg-2); border-color:var(--line-2); color:var(--ink-2)}
#view-rto .ib-b.after{background:#333333}
#view-rto .ib-leg .af::before{background:#333333}
.dv{width:min(370px,34vw); border:1px solid var(--line-2); border-radius:22px; padding:1.5rem; background:var(--bg); box-shadow:0 24px 50px -30px rgba(0,0,0,.35)}
.dv-num{display:block; font-size:clamp(2.8rem,5vw,4.2rem); letter-spacing:-.04em; line-height:1; color:#333333; font-variant-numeric:tabular-nums}
.dv-cap{display:block; margin-top:.45rem; font-size:1rem; color:var(--ink); min-height:2.7em; line-height:1.35}
.dv-grid{display:grid; grid-template-columns:repeat(20,1fr); gap:5px; margin-top:1.1rem}
.dv-grid i{aspect-ratio:1; border-radius:50%; background:#333333; transition:background .55s ease, transform .55s ease}
.dv-grid i.l{background:#f3c6c8; transform:scale(.62)}
.dv-leg{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-size:.8rem; color:var(--ink-2)}
.dv-leg span::before{content:""; display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:-1px}
.dv-leg .k::before{background:#333333}
.dv-leg .l::before{background:#f3c6c8}
.dv-leg em{font-style:normal; margin-left:auto; color:var(--muted)}
.hsd .step h4{font-size:1.25rem; line-height:1.25}
.hsd .step p{color:var(--ink-2); font-size:1rem; line-height:1.5; margin-top:.4rem}
.fixk{display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:#333333; margin-bottom:.35rem}
.rt-pr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.pr{border-radius:22px; padding:1.5rem; background:var(--bg-2); display:flex; flex-direction:column; gap:.6rem}
.pr > i{font-style:normal; width:2.1rem; height:2.1rem; border-radius:50%; background:#333333; color:#ffffff; font-weight:700; display:flex; align-items:center; justify-content:center}
.pr > b{font-size:1.2rem; color:var(--ink); line-height:1.25; letter-spacing:-.01em}
.pr ul{list-style:none; margin:.2rem 0 0; padding:0}
.pr li{font-size:.95rem; color:var(--ink-2); line-height:1.5; padding:.7rem 0; border-top:1px solid var(--line-2)}
.pr li strong{color:var(--ink)}
#view-rto .tri-i span, #view-rto .rt-in span, #view-rto .rt-n span, #view-rto .rt-w span, #view-rto .rt-h small{color:var(--ink-2)}
@media (max-width:760px){
.dv{width:100%}
.rt-pr{grid-template-columns:1fr}
}
.rt-ov{display:flex; align-items:center; justify-content:center; gap:2.2rem; margin:2.6rem 0 1rem}
.rt-ov figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem}
.rt-ov .phone{width:clamp(170px,22vw,250px)}
.rt-ov figcaption{font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.rt-ov figure:last-child figcaption{color:#333333}
.rt-ov-a{font-size:1.8rem; color:#333333}
.rs-v{position:relative; width:min(600px,48vw); aspect-ratio:1.18; background:#e4f4ea; border-radius:22px; overflow:hidden; box-shadow:0 26px 52px -30px rgba(0,0,0,.4)}
.rs-v .cardhi,.rs-v .cardhi.on{position:absolute; inset:4%; width:92%; height:92%; object-fit:contain; border:0; box-shadow:none; background:transparent; border-radius:10px}
.rs-v .cardhi{opacity:0; transition:opacity .45s ease}
.rs-v .cardhi.on{opacity:1}
.fd-ph{width:clamp(210px,22vw,270px)}
.fd-ph .ph img.cardhi,.fd-ph .ph img.cardhi.on{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; border:0; box-shadow:none; border-radius:0}
.fd-ph .ph img.cardhi{opacity:0; transition:opacity .45s ease}
.fd-ph .ph img.cardhi.on{opacity:1}
.rt-board{margin:1.6rem 0 0; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:#ffffff}
.rt-board img{display:block; width:100%}
.fs{margin-top:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); padding-bottom:.6rem}
.fs-t{display:flex; gap:1rem; width:max-content}
.fs-t img{width:190px; height:auto; border-radius:18px; border:1px solid var(--line-2); scroll-snap-align:start; box-shadow:0 14px 30px -20px rgba(0,0,0,.35); background:#ffffff}
.cmp{position:relative; width:min(380px,86%); margin:1.6rem auto 0; aspect-ratio:420/895; border-radius:26px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 26px 52px -30px rgba(0,0,0,.45); user-select:none}
.cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.cmp-o{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-h{position:absolute; top:0; bottom:0; left:var(--x); width:3px; margin-left:-1.5px; background:#333333; box-shadow:0 0 0 1px rgba(255,255,255,.7); pointer-events:none}
.cmp-h::after{content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.4rem; height:2.4rem; border-radius:50%; background:#333333; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 8px 20px rgba(51,51,51,.45)}
.cmp-l,.cmp-r{position:absolute; top:.8rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(15,15,20,.72); color:#ffffff; padding:.25rem .6rem; border-radius:999px; pointer-events:none}
.cmp-l{left:.8rem}
.cmp-r{right:.8rem; background:#333333}
.cmp input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.rt-2p{display:flex; justify-content:center; gap:3rem; margin-top:1rem; flex-wrap:wrap}
.rt-2p figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem; max-width:260px; text-align:center}
.rt-2p .phone{width:clamp(180px,20vw,240px)}
.rt-2p figcaption{font-size:.9rem; color:var(--ink-2)}
@media (max-width:760px){
.rs-v{width:100%}
.rt-ov{gap:1rem}
.rt-ov .phone{width:40vw}
}
.rt-h3{margin:.3rem 0 0; font-size:clamp(1.25rem,2.2vw,1.6rem); letter-spacing:-.02em; color:var(--ink); line-height:1.2}
.hs .stack.vstack{grid-template-columns:1fr; gap:1.1rem; align-items:start}
.ob-rail{position:relative; overflow:hidden; border-radius:22px; background:var(--bg-2); padding:1.1rem 1.1rem .8rem}
.ob-in{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:2%; max-width:min(100%,92vh); margin:0 auto}
.ob-in figure{margin:0; display:flex; flex-direction:column; gap:.45rem}
.ob-in img{width:100%; display:block; border-radius:12px; border:1px solid var(--line-2); background:#ffffff}
.ob-in figcaption{font-size:.72rem; color:var(--ink-2); text-align:center; font-weight:600}
.hso .step,.hsh .step{min-height:11rem}
.ht-v{display:flex; gap:1.2rem; align-items:flex-start}
.ht-v figure{margin:0; display:flex; flex-direction:column; gap:.5rem; align-items:center}
.ht-ph{position:relative; overflow:hidden; width:clamp(150px,15vw,200px); border-radius:16px; border:1px solid var(--line-2); background:#ffffff}
.ht-ph img{display:block; width:100%}
.ht-v figcaption{font-size:.74rem; color:var(--ink-2); font-weight:600}
.cbench{margin-top:1.2rem; border:1px solid var(--line-2); border-radius:18px; padding:1.1rem 1.3rem; display:flex; flex-direction:column; gap:.55rem}
.cb-cap{margin:0 0 .2rem; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.cb-r{display:grid; grid-template-columns:11rem 1fr 2rem; align-items:center; gap:.8rem; font-size:.9rem; color:var(--ink)}
.cb-t{height:.8rem; background:var(--bg-2); border-radius:999px; overflow:hidden}
.cb-t i{display:block; height:100%; background:#333333; border-radius:999px}
.cb-r b{text-align:right}
.cb-r.bad span,.cb-r.bad b{color:#c7353a; font-weight:700}
.cb-r.bad .cb-t i{background:#e5484d}
.cp-g{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.9rem; margin-top:1rem}
.cp{border:1px solid var(--line-2); border-radius:16px; padding:.9rem; display:flex; flex-direction:column; gap:.35rem; background:var(--bg)}
.cp-th{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:.5rem}
.cp-th img{width:100%; border-radius:6px; border:1px solid var(--line); display:block}
.cp small{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#333333}
.cp b{font-size:.95rem; color:var(--ink); line-height:1.25}
.cp span{font-size:.84rem; color:var(--ink-2); line-height:1.45}
.sr2{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem}
.sr2 figure{margin:0; border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.sr2 img{display:block; width:100%}
.rt-sub{margin-top:2.6rem}
@media (max-width:760px){
.ob-in{grid-template-columns:repeat(3,1fr)}
.cp-g{grid-template-columns:1fr 1fr}
.cb-r{grid-template-columns:7rem 1fr 1.5rem}
.sr2{grid-template-columns:1fr}
}
.rt-open{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:2.4rem; align-items:center; margin-top:1.6rem}
.rt-svc{margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 26px 52px -30px rgba(0,0,0,.4); background:#ffffff}
.rt-svc img{display:block; width:100%}
.rt-two{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.rt-col{border-radius:20px; padding:1.3rem 1.4rem; background:var(--bg-2)}
.rt-col.biz{background:#f9f9f9}
.rt-col small{display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.6rem}
.rt-col.biz small{color:#333333}
.rt-col ul{list-style:none; margin:0; padding:0}
.rt-col li{padding:.65rem 0; border-top:1px solid var(--line-2); font-size:.9rem; color:var(--ink-2); line-height:1.4}
.rt-col li b{display:block; font-size:1.02rem; color:var(--ink)}
.rt-col.biz li:first-child b{font-size:1.6rem; letter-spacing:-.02em; color:#333333}
.rt-er{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2.4rem; align-items:center; margin-top:1.6rem}
.rt-er-ph{margin:0; display:flex; flex-direction:column; align-items:center; gap:.7rem}
.rt-er-ph .phone{width:clamp(180px,19vw,240px)}
.rt-er-ph figcaption{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.rt-health.rt-h2x2{grid-template-columns:1fr 1fr; margin-top:0}
.fd-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; margin-top:1.8rem}
.fd-row figure{margin:0; display:flex; flex-direction:column; gap:1rem}
.fd-row .phone{width:100%; max-width:220px; margin:0 auto}
.fd-row figcaption{display:flex; flex-direction:column; gap:.3rem}
.fd-row figcaption i{font-style:normal; font-size:.72rem; font-weight:700; color:#333333}
.fd-row figcaption b{font-size:1rem; color:var(--ink); line-height:1.25}
.fd-row figcaption span{font-size:.88rem; color:var(--ink-2); line-height:1.45}
.rt-close{margin:2.4rem 0 0; text-align:center; font-size:clamp(1.4rem,2.8vw,2.1rem); letter-spacing:-.02em; font-weight:700; color:var(--ink)}
@media (max-width:760px){
.rt-open,.rt-er,.rt-two{grid-template-columns:1fr}
.fd-row{grid-template-columns:1fr 1fr}
}
.fd-row figcaption,.rt-er-ph figcaption,.rt-ov figcaption,.rt-2p figcaption{font-style:normal}
.scene-times .chip-a{left:auto; right:4%; bottom:10%}
.cover-scene .cover-browser{width:84%}
#view-rto .cardhi.on{box-shadow:0 0 0 9999px rgba(0,0,0,.14)}
.cp-g{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem}
.cp{padding:1.1rem}
.cp-th{gap:6px}
.cp-th img{border-radius:8px}
.fs-t img{width:220px}
.ob-in img{border-radius:14px}
.csh .csh-stage{position:relative; margin:1.8rem 0 0; border-radius:28px; padding:2.4rem 1.6rem 2.2rem; overflow:hidden; display:flex; justify-content:center; align-items:center}
.csh .csh-stage::before{content:""; position:absolute; inset:0; background:radial-gradient(90% 70% at 50% -20%,rgba(255,255,255,.26),transparent 60%); pointer-events:none}
.csh-stage > *{position:relative; margin:0!important; width:100%}
.csh-explore .csh-stage{background:linear-gradient(150deg,#333333 0%,#333333 46%,#333333 100%)}
.csh-showrooms .csh-stage{background:radial-gradient(85% 120% at 22% -12%, rgba(255,255,255,.20), transparent 55%),
      linear-gradient(150deg,#22c197 0%,#12876a 48%,#0c5f4a 100%)}
.csh-times .csh-stage{background:linear-gradient(150deg,#e2323a 0%,#a8102a 50%,#5c0a1b 100%)}
.csh-rto .csh-stage{background:linear-gradient(150deg,#333333 0%,#333333 50%,#333333 100%)}
.csh-stage .phone-label,.csh-stage figcaption,.csh-stage .rt-ov-a{color:rgba(255,255,255,.9)!important}
.csh-stage .phones{margin-top:0}
.tldr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.3rem}
.tldr > div{border:1px solid var(--line-2); border-radius:18px; padding:1.1rem 1.2rem; background:var(--bg)}
.tldr small{display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.4rem}
.tldr p{margin:0; font-size:.98rem; line-height:1.45; color:var(--ink)}
.tldr .res{background:#f9f9f9; border-color:#eaeaea}
.tldr .res small{color:#333333}
.tldr .res p{font-weight:600}
.csh .stats{margin-top:1.6rem}
@media (max-width:760px){
.tldr{grid-template-columns:1fr}
.csh .csh-stage{padding:1.4rem .8rem}
}
.chap{position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; padding:.55rem; margin:1.6rem 0 0; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:999px}
.chap button{font:inherit; font-size:.82rem; font-weight:600; color:var(--ink-2); background:transparent; border:0; border-radius:999px; padding:.42rem .95rem; cursor:var(--nt-cur); transition:background .2s,color .2s}
.chap button:hover{background:var(--bg-2)}
.chap button.on{background:#333333; color:#ffffff}
.ht-static{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2.4rem; align-items:start; margin-top:1.3rem}
.ht-static .cardhi{opacity:1; border:2px solid #333333; background:rgba(51,51,51,.08); box-shadow:none; border-radius:8px}
.ht-static .cardhi::before{content:attr(data-hi); position:absolute; top:.15rem; left:.15rem; width:1.05rem; height:1.05rem; border-radius:50%; background:#333333; color:#ffffff; font-size:.58rem; font-weight:700; display:flex; align-items:center; justify-content:center}
.ht-list{list-style:none; margin:0; padding:0}
.ht-list li{display:flex; gap:.8rem; padding:.8rem 0; border-top:1px solid var(--line-2)}
.ht-list i{font-style:normal; flex:0 0 auto; width:1.6rem; height:1.6rem; border-radius:50%; background:#333333; color:#ffffff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center}
.ht-list b{display:block; color:var(--ink); font-size:.98rem}
.ht-list span{color:var(--ink-2); font-size:.9rem; line-height:1.45}
.ins4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.4rem}
.in4{border:1px solid var(--line-2); border-radius:20px; padding:1.2rem; display:flex; flex-direction:column; gap:.55rem; background:var(--bg)}
.mg{display:grid; grid-template-columns:repeat(20,1fr); gap:3px}
.mg i{aspect-ratio:1; border-radius:50%; background:#333333}
.mg i.l{background:#f3c6c8; transform:scale(.7)}
.in4-n{font-size:2.2rem; letter-spacing:-.03em; color:#333333; line-height:1; margin-top:.5rem}
.in4 h4{margin:0; font-size:1.02rem; line-height:1.3; color:var(--ink)}
.in4 p{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.45}
@media (max-width:900px){
.ins4{grid-template-columns:1fr 1fr}
.ht-static{grid-template-columns:1fr}
}
.fx-screen .fxl{position:absolute; left:0; right:0; top:0; opacity:0; transition:opacity .35s ease, transform .75s cubic-bezier(.2,.7,.2,1)}
.fx-screen .fxl.on{opacity:1}
.fx-screen .fxl img{display:block; width:100%}
.fxb{position:absolute; border:2.5px solid #333333; border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,.16); opacity:0; transition:opacity .35s ease}
.fxb.on{opacity:1}
.hsx .step{min-height:15.5rem}
.fxd{display:grid; grid-template-columns:5.2rem 1fr; gap:.5rem .8rem; margin:.8rem 0 0}
.fxd dt{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted); padding-top:.2rem}
.fxd dd{margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.4}
.fxd dt.hl{color:#333333}
.fxd dd.hl{color:#333333; font-weight:700}
.chap{position:sticky; top:.9rem; z-index:40; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; padding:.55rem .7rem 1.05rem; margin:1.8rem 0 0; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line-2); border-radius:22px; box-shadow:0 12px 32px -24px rgba(0,0,0,.45)}
.chap-l{font-size:.8rem; font-weight:700; color:var(--ink); padding-left:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chap-c{display:flex; gap:.3rem; flex-wrap:wrap; justify-content:center}
.chap-top{justify-self:end; font:inherit; font-size:.8rem; font-weight:600; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:.4rem .85rem; cursor:var(--nt-cur); transition:background .2s,color .2s}
.chap-top:hover{background:#333333; color:#ffffff; border-color:#333333}
.chap-tl{position:absolute; left:1.3rem; right:1.3rem; bottom:.42rem; height:3px; border-radius:3px; background:var(--line)}
.chap-tl i{position:absolute; left:0; top:0; bottom:0; width:0; background:#333333; border-radius:3px}
.chap-tl b{position:absolute; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--line-2); box-shadow:0 0 0 2px #ffffff}
.chap-tl b.done{background:#333333}
@media (max-width:760px){
.chap{grid-template-columns:1fr auto; top:.5rem}
.chap-l{display:none}
.chap-c{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start}
}
.chap{background:rgba(255,255,255,.97)}
.hs-view{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
@media (max-width:760px){
.hs-view{-webkit-mask-image:none; mask-image:none}
}
.xp{margin-top:4.5rem}
.xp-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}
.xp-eye{margin:0; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.xp-head h2{margin:.35rem 0 0; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink)}
.xp-tw{display:flex; align-items:center; gap:.4rem; position:relative}
.xp-try{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:1.05rem; color:#333333; transform:rotate(-4deg)}
.xp-arrow{width:46px; height:28px; color:#333333; margin-right:.2rem}
.xp-tog{display:flex; background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:3px}
.xp-tog button{font:inherit; font-size:.82rem; font-weight:600; color:var(--ink-2); background:transparent; border:0; border-radius:999px; padding:.4rem .95rem; cursor:var(--nt-cur); transition:background .2s,color .2s}
.xp-tog button.on{background:var(--ink); color:#ffffff}
.xp-list{margin-top:1.6rem; border-top:1px solid var(--line-2)}
.xp-row{border-bottom:1px solid var(--line-2)}
.xp-r{width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:1rem; padding:1rem .2rem; background:none; border:0; font:inherit; text-align:left; cursor:var(--nt-cur)}
.xp-logo{width:2.4rem; height:2.4rem; border-radius:10px; color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; letter-spacing:-.02em; flex:0 0 auto}
.xp-t b{display:block; font-size:1rem; color:var(--ink)}
.xp-t small{display:block; font-size:.85rem; color:var(--ink-2)}
.xp-d{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; color:var(--muted); white-space:nowrap}
.xp-c{width:.55rem; height:.55rem; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg); margin:0 .4rem .2rem; transition:transform .3s}
.xp-row.open .xp-c{transform:rotate(-135deg); margin-bottom:-.2rem}
.xp-b{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.xp-b > div{overflow:hidden; margin-left:1.15rem; padding-left:2.25rem; border-left:1.5px solid var(--line-2)}
.xp-row.open .xp-b{grid-template-rows:1fr}
.xp-row.open .xp-b > div{padding-bottom:1.1rem}
.xp-b p{margin:0 0 .5rem; color:var(--ink); font-size:.95rem; line-height:1.5}
.xp-b ul{list-style:none; margin:0; padding:0}
.xp-b li{position:relative; padding-left:1.1rem; margin:.3rem 0; font-size:.9rem; color:var(--ink-2); line-height:1.45}
.xp-b li::before{content:"✱"; position:absolute; left:0; top:0; color:#333333; font-size:.8rem}
.xp-tlw{margin-top:1.6rem}
.xp-tl{overflow-x:auto; overflow-y:hidden; cursor:grab; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); scrollbar-width:none}
.xp-tl::-webkit-scrollbar{display:none}
.xp-tl.drag{cursor:grabbing}
.xp-track{position:relative; height:250px; user-select:none}
.xp-y{position:absolute; top:0; bottom:0; border-left:1px solid var(--line)}
.xp-y i{position:absolute; bottom:.5rem; left:.35rem; font-style:normal; font-size:.72rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace}
.xp-now{position:absolute; top:14px; bottom:26px; border-left:2px solid #333333}
.xp-now em{position:absolute; top:-14px; left:-1rem; font-style:normal; font-size:.66rem; font-weight:700; color:#333333}
.xp-p{position:absolute; height:48px; display:flex; align-items:center; gap:.5rem; padding:0 .55rem; border-radius:14px; background:var(--bg-2); border:1px solid var(--line-2); overflow:hidden; white-space:nowrap}
.xp-p .xp-logo{width:1.75rem; height:1.75rem; border-radius:7px; font-size:.62rem}
.xp-pt b{display:block; font-size:.82rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.xp-pt small{display:block; font-size:.7rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis}
.xp-p.cur{background:#f9f9f9; border-color:#eaeaea}
.xp-p.tiny .xp-pt{display:none}
.xp-hint{margin:.8rem 0 0; text-align:center; font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:.95rem; color:var(--muted)}
@media (max-width:640px){
.xp-r{grid-template-columns:auto 1fr auto}
.xp-d{grid-column:2; grid-row:2}
.xp-try,.xp-arrow{display:none}
}
.xp{text-align:left}
.xp p{max-width:none}
.xp-eye{margin:0!important}
.xp-b p{margin:0 0 .5rem!important}
.xp-hint{text-align:center; margin:.8rem auto 0!important}
.cx{margin-top:4.5rem; text-align:left}
.cx p{margin-left:0!important; margin-right:0!important; max-width:none}
.cx-eye{margin:0!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.cx h2{margin:.45rem 0 0; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink)}
.cx-sub{margin-top:.45rem!important; color:var(--ink-2); font-size:1rem}
.cx-line{list-style:none; margin:2.1rem 0 0; padding:0}
.cx-i{position:relative; display:grid; grid-template-columns:9.5rem 1.5rem minmax(0,1fr); column-gap:1rem; padding-bottom:1.9rem}
.cx-i::before{content:""; position:absolute; left:calc(11.25rem - 1px); top:1.15rem; bottom:0; width:2px; background:var(--line)}
.cx-i:last-child::before{display:none}
.cx-when{text-align:right; padding-top:.3rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--muted); white-space:nowrap}
.cx-dot{position:relative; z-index:1; justify-self:center; width:.8rem; height:.8rem; margin-top:.42rem; border-radius:50%; border:2px solid var(--line-2); background:var(--bg)}
.cx-i.now .cx-dot{background:#333333; border-color:#333333; box-shadow:0 0 0 5px rgba(51,51,51,.15)}
.cx-i.now .cx-when{color:#333333; font-weight:700}
.cx-co{margin:0!important; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem}
.cx-co b{font-size:1.12rem; color:var(--ink); letter-spacing:-.01em}
.cx-co em{font-style:normal; font-size:.95rem; color:var(--ink-2)}
.cx-co small{font-size:.8rem; color:var(--muted)}
.cx-co small::before{content:"·"; margin-right:.6rem}
.cx-one{margin-top:.3rem!important; font-size:.95rem; line-height:1.5; color:var(--ink-2); max-width:42rem!important}
.cx-one strong{color:#333333}
.cx-links{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem}
.cx-links button{font:inherit; font-size:.8rem; font-weight:600; color:#333333; background:#f9f9f9; border:1px solid #eaeaea; border-radius:999px; padding:.32rem .78rem; cursor:var(--nt-cur); transition:background .2s,color .2s,border-color .2s}
.cx-links button:hover{background:#333333; border-color:#333333; color:#ffffff}
.cx-i.edu .cx-co b{font-weight:600}
.cx-i.edu{padding-bottom:0}
@media (max-width:640px){
.cx-i{grid-template-columns:1.2rem minmax(0,1fr)}
.cx-dot{grid-column:1; grid-row:1}
.cx-when{grid-column:2; grid-row:1; text-align:left; padding:0 0 .25rem}
.cx-what{grid-column:2}
.cx-i::before{left:calc(.6rem - 1px)}
}
.cx2{margin-top:4.2rem; text-align:left}
.cx2 p{margin-left:0!important; margin-right:0!important; max-width:none}
.cx2-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap}
.cx2-eye{margin:0!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.cx2 h2{margin:.4rem 0 0; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; color:var(--ink)}
.cx2-quote{margin:0!important; max-width:25rem!important; font-size:.92rem; line-height:1.45; color:var(--ink-2); font-style:italic}
.xc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.5rem}
.xc{display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:18px; padding:1.15rem 1.2rem 1.1rem; background:var(--bg)}
.xc.now{border-color:#eaeaea; background:linear-gradient(180deg,#f9f9f9,var(--bg) 55%)}
.xc-when{margin:0!important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:.45rem}
.xc-when i{font-style:normal; font-family:inherit; font-size:.64rem; font-weight:700; color:#ffffff; background:#333333; border-radius:999px; padding:.12rem .45rem}
.xc h3{margin:.55rem 0 0; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink)}
.xc-role{margin:.15rem 0 0!important; font-size:.88rem; color:var(--ink-2)}
.xc-role span{display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem}
.xc ul{list-style:none; margin:.8rem 0 0; padding:0}
.xc li{position:relative; padding-left:.95rem; margin:.38rem 0; font-size:.86rem; line-height:1.45; color:var(--ink-2)}
.xc li::before{content:""; position:absolute; left:0; top:.55em; width:.36rem; height:.36rem; border-radius:50%; background:#333333}
.xc-met{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem}
.xc-met span{font-size:.72rem; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:.22rem .6rem}
.xc-met b{color:#333333; margin-right:.25rem}
.xc-links{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.9rem}
.xc-links button{font:inherit; font-size:.78rem; font-weight:600; color:#333333; background:#f9f9f9; border:1px solid #eaeaea; border-radius:999px; padding:.28rem .7rem; cursor:var(--nt-cur); transition:background .2s,color .2s}
.xc-links button:hover{background:#333333; color:#ffffff; border-color:#333333}
.cx2-foot{display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; margin-top:1rem; padding:.85rem 1.1rem; border:1px dashed var(--line-2); border-radius:14px}
.cx2-foot p{margin:0!important; font-size:.86rem; color:var(--ink-2)}
.cx2-foot small{font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-right:.6rem}
@media (max-width:900px){
.xc-grid{grid-template-columns:1fr}
}
.cx2 h2{max-width:none!important}
.xc{padding:1rem 1.15rem}
.xc-role span{display:inline; margin:0}
.xc-role span::before{content:"·"; margin:0 .45rem; color:var(--muted)}
.xc ul{margin-top:.65rem}
.xc li{margin:.3rem 0}
.xc li b{color:#333333}
.xc-links{gap:.2rem 1rem; padding-top:.7rem; border-top:1px solid var(--line); margin-top:auto}
.xc-links button{background:none; border:0; padding:.35rem 0 0; font-size:.8rem; color:#333333; border-radius:0}
.xc-links button:hover{background:none; color:#333333; text-decoration:underline; text-underline-offset:3px}
.xc-links:empty{display:none}
.cx2-foot{margin-top:.8rem; padding:.7rem 1rem}
.xc li b.xc-lead{color:var(--ink)}
.xb{--brown:#6b4a33; --yel:#ffe600; position:relative; margin:4.5rem 0 0; padding:3rem 2.6rem 2.4rem; border-radius:30px; overflow:hidden; text-align:left;
    background-color:#3f8b3c;
    background-image:radial-gradient(60% 50% at 20% 10%,rgba(255,255,255,.10),transparent 60%),radial-gradient(60% 60% at 85% 95%,rgba(0,0,0,.16),transparent 60%),
      linear-gradient(rgba(221,238,176,.42) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(221,238,176,.42) 1.5px,transparent 1.5px),
      linear-gradient(rgba(221,238,176,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(221,238,176,.12) 1px,transparent 1px);
    background-size:auto,auto,64px 64px,64px 64px,16px 16px,16px 16px; box-shadow:0 30px 60px -40px rgba(0,0,0,.55)}
.xb p{margin-left:0!important; margin-right:0!important; max-width:none}
.xb-top{position:relative; min-height:250px}
.xb-tag{display:inline-block; background:var(--yel); color:#3a2a1a; font-weight:800; font-size:.92rem; padding:.2rem .6rem; transform:rotate(-2deg); box-shadow:0 4px 10px -6px rgba(0,0,0,.5)}
.xb-title{margin:.9rem 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; font-family:"Arial Rounded MT Bold","Helvetica Rounded","Nunito",system-ui,sans-serif; font-weight:900; letter-spacing:-.045em; line-height:.9; max-width:none!important}
.xb-title span{display:inline-block; font-size:clamp(2.6rem,6vw,4.4rem); padding:.12em .3em .2em; box-shadow:0 14px 26px -16px rgba(0,0,0,.6)}
.xb-title .b1{background:var(--brown); color:#ffffff; transform:rotate(-4deg)}
.xb-title .b2{background:var(--yel); color:var(--brown); margin-left:1.6em; transform:rotate(3deg)}
.xb-sub{position:absolute; left:14.5rem; top:12.6rem; background:#ffffff; color:var(--brown); font-weight:900; font-size:clamp(1rem,1.8vw,1.35rem); letter-spacing:-.02em; padding:.35em .6em; transform:rotate(-2deg); box-shadow:0 12px 24px -14px rgba(0,0,0,.55)}
.xb-note{position:absolute; left:.4rem; top:11.1rem; margin:0!important; color:#ffffff; font-weight:800; font-size:.95rem; letter-spacing:-.01em; transform:rotate(-7deg); text-shadow:0 2px 6px rgba(0,0,0,.25)}
.xb-deco{position:absolute; inset:0; pointer-events:none}
.xb-win{position:absolute; right:18%; top:.2rem; display:flex; gap:6px; transform:rotate(-6deg)}
.xb-win i{width:30px; height:30px; background:var(--yel); border:2px solid #3a2a1a; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:900; color:#3a2a1a; font-size:.95rem}
.xb-toggle{position:absolute; right:7%; top:3.2rem; width:84px; height:44px; border-radius:999px; background:#e6e6e6; box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 10px 18px -10px rgba(0,0,0,.5); transform:rotate(10deg)}
.xb-toggle i{position:absolute; left:4px; top:4px; width:36px; height:36px; border-radius:50%; background:#ffffff; box-shadow:0 3px 8px rgba(0,0,0,.25)}
.xb-bubble{position:absolute; right:26%; top:9.6rem; display:flex; gap:5px; padding:.55rem .75rem; background:#d9d9d9; border-radius:14px; transform:rotate(-4deg)}
.xb-bubble i{width:7px; height:7px; border-radius:50%; background:#ffffff}
.xb-bubble::after{content:""; position:absolute; left:12px; bottom:-7px; border:7px solid transparent; border-top-color:#d9d9d9; border-bottom:0}
.xb-cursor{position:absolute; right:12%; top:10.8rem; width:44px; height:44px; fill:var(--yel); stroke:#3a2a1a; stroke-width:1.2; transform:rotate(-12deg); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.xb-dash{position:absolute; border:1.6px dashed rgba(255,255,255,.85)}
.xb-dash.d1{left:10.5rem; top:2.2rem; width:130px; height:56px}
.xb-dash.d2{right:30%; top:6.2rem; width:110px; height:48px}
.xb-star{position:absolute; width:18px; height:18px}
.xb-star svg{width:100%; height:100%; fill:var(--yel)}
.xb-star.s1{left:22rem; top:1.4rem; width:26px; height:26px}
.xb-star.s2{right:4%; top:10.5rem}
.xb-star.s3{left:.2rem; top:6.8rem; width:22px; height:22px}
.xb-star.s4{right:40%; top:1rem; width:14px; height:14px}
.xb-star.s5{right:36%; top:12.8rem}
.xb-star.s2 svg,.xb-star.s4 svg{fill:#ffffff}
.xb-cards{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.7rem; margin-top:1.8rem}
.xb-card{position:relative; background:#fffdf6; border-radius:6px; padding:1.4rem 1.2rem 1.1rem; color:#2a2320; box-shadow:0 22px 34px -20px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.06); display:flex; flex-direction:column}
.xb-card:nth-child(1){transform:rotate(-1.8deg)}
.xb-card:nth-child(2){transform:rotate(1.2deg); margin-top:.7rem}
.xb-card:nth-child(3){transform:rotate(-.8deg)}
.xb-card::before{content:""; position:absolute; top:-13px; left:50%; width:92px; height:26px; margin-left:-46px; background:rgba(255,240,150,.78); transform:rotate(-3deg); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.xb-now{position:absolute; top:-.75rem; right:-.6rem; background:var(--yel); color:var(--brown); font-weight:900; font-size:.8rem; letter-spacing:.04em; padding:.25rem .6rem; transform:rotate(7deg); box-shadow:0 6px 12px -6px rgba(0,0,0,.5)}
.xb-when{margin:0!important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:#8a7a68}
.xb-card h3{margin:.35rem 0 0; font-family:"Arial Rounded MT Bold","Helvetica Rounded","Nunito",system-ui,sans-serif; font-weight:900; font-size:1.65rem; letter-spacing:-.04em; color:var(--brown); line-height:1}
.xb-role{margin:.35rem 0 0!important; font-size:.84rem; color:#5a4d44; line-height:1.4}
.xb-card ul{list-style:none; margin:.75rem 0 0; padding:0}
.xb-card li{position:relative; padding-left:1.15rem; margin:.4rem 0; font-size:.86rem; line-height:1.45; color:#3a312b}
.xb-card li::before{content:"✦"; position:absolute; left:0; top:0; color:#d4a300; font-size:.8rem}
.xb-card li b{background:linear-gradient(transparent 52%,var(--yel) 52%); color:#2a2320; padding:0 .1em}
.xb-card li strong{color:var(--brown)}
.xb-links{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.9rem}
.xb-links button{font:inherit; font-size:.78rem; font-weight:800; color:#ffffff; background:var(--brown); border:0; border-radius:5px; padding:.32rem .65rem; cursor:var(--nt-cur); transform:rotate(-1deg); transition:transform .2s, background .2s}
.xb-links button:hover{background:#3a2a1a; transform:rotate(0) translateY(-2px)}
.xb-foot{position:relative; display:flex; flex-wrap:wrap; gap:1rem 1.4rem; margin-top:2rem}
.xb-foot span{background:#ffffff; color:#2a2320; font-size:.86rem; font-weight:600; padding:.45rem .75rem; transform:rotate(-1.2deg); box-shadow:0 10px 18px -12px rgba(0,0,0,.55)}
.xb-foot span:nth-child(2){transform:rotate(1deg)}
.xb-foot em{font-style:normal; background:var(--brown); color:#ffffff; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.12rem .4rem; margin-right:.55rem}
@media (max-width:900px){
.xb{padding:2.2rem 1.2rem 1.8rem}
.xb-cards{grid-template-columns:1fr}
.xb-card{transform:none!important; margin-top:0!important}
.xb-deco{display:none}
.xb-sub,.xb-note{position:static; display:inline-block; margin-top:.8rem}
.xb-top{min-height:0}
}
.xb-note{left:auto!important; right:5%; top:6.3rem!important; max-width:18rem; text-align:right; line-height:1.35; transform:rotate(-5deg)!important}
@media (max-width:900px){
.xb-note{text-align:left; max-width:none; transform:none!important}
}
.xb .xb-note{max-width:16rem!important; top:7.1rem!important}
@media (max-width:900px){
.xb .xb-note{max-width:none!important}
}
.xb{--brown:var(--ink); --yel:#ffffff; font-family:var(--font);
    background:#1f5b3e!important;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)!important;
    background-size:32px 32px!important}
.xb .xb-title,.xb .xb-card h3,.xb .xb-when,.xb .xb-note{font-family:var(--font)}
.xb .xb-title{font-weight:800; letter-spacing:-.035em}
.xb .xb-title .b1,.xb .xb-title .b2{background:#ffffff; color:var(--ink)}
.xb .xb-title .b2{color:#333333}
.xb .xb-tag{background:rgba(255,255,255,.12); color:#ffffff; border:1px solid rgba(255,255,255,.35); font-weight:600; box-shadow:none}
.xb .xb-sub{color:var(--ink); font-weight:700}
.xb .xb-note{font-weight:600; color:rgba(255,255,255,.88)}
.xb .xb-win i{background:rgba(255,255,255,.92); border-color:var(--ink); color:var(--ink)}
.xb .xb-cursor{fill:#ffffff; stroke:var(--ink)}
.xb .xb-star svg{fill:rgba(255,255,255,.85)}
.xb .xb-bubble{background:rgba(255,255,255,.85)}
.xb .xb-bubble i{background:var(--muted)}
.xb .xb-bubble::after{border-top-color:rgba(255,255,255,.85)}
.xb .xb-dash{border-color:rgba(255,255,255,.55)}
.xb .xb-card{background:#ffffff; color:var(--ink)}
.xb .xb-card::before{background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.06)}
.xb .xb-now{background:#333333; color:#ffffff; font-weight:700}
.xb .xb-when{color:var(--muted); font-size:.76rem; font-variant-numeric:tabular-nums}
.xb .xb-card h3{color:var(--ink); font-weight:800; letter-spacing:-.03em}
.xb .xb-role{color:var(--ink-2)}
.xb .xb-card li{color:var(--ink-2)}
.xb .xb-card li::before{content:""; top:.55em; width:.36rem; height:.36rem; border-radius:50%; background:#333333}
.xb .xb-card li b{background:none; color:#333333; font-weight:700; padding:0}
.xb .xb-card li strong{color:var(--ink)}
.xb .xb-links button{background:#f9f9f9; color:#333333; border:1px solid #eaeaea; font-weight:600; border-radius:999px; transform:none}
.xb .xb-links button:hover{background:#333333; color:#ffffff; border-color:#333333; transform:translateY(-1px)}
.xb .xb-foot span{color:var(--ink-2); font-weight:500}
.xb .xb-foot em{background:none; color:var(--muted); font-weight:700; padding:0}
.xb{padding:2.6rem 2.4rem 2.2rem}
.xb .xb-top{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; min-height:0}
.xb-eye{margin:0 0 .7rem!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.6)}
.xb .xb-title{margin:0; gap:.25rem}
.xb .xb-title span{font-size:clamp(2rem,4vw,2.9rem); box-shadow:0 12px 22px -16px rgba(0,0,0,.55)}
.xb .xb-title .b1{transform:rotate(-2deg)}
.xb .xb-title .b2{transform:rotate(1.5deg); margin-left:1.2em}
.xb-lede{margin:0!important; max-width:22rem!important; color:#ffffff; font-size:1.05rem; font-weight:600; line-height:1.4}
.xb-lede span{display:block; margin-top:.35rem; font-size:.9rem; font-weight:400; color:rgba(255,255,255,.72)}
.xb .xb-cards{margin-top:2.4rem; gap:1.5rem}
.xb .xb-card:nth-child(1){transform:rotate(-1deg)}
.xb .xb-card:nth-child(2){transform:rotate(.6deg); margin-top:.35rem}
.xb .xb-card:nth-child(3){transform:rotate(-.5deg)}
.xb .xb-card::before{display:none}
.xb .xb-now{font-size:.72rem; padding:.2rem .5rem; top:-.6rem; right:-.4rem; transform:rotate(4deg)}
.xb .xb-foot{margin-top:1.8rem}
.xb .xb-foot span{transform:none; box-shadow:0 8px 16px -12px rgba(0,0,0,.5)}
.tape{position:absolute; top:-13px; left:50%; width:96px; height:26px; margin-left:-48px; transform:rotate(-3deg); perspective:240px; z-index:3; pointer-events:none}
.xb-card:nth-child(2) .tape{transform:rotate(2deg)}
.xb-card:nth-child(3) .tape{transform:rotate(-1.5deg)}
.tp-base,.tp-flap{position:absolute; inset:0}
.tp-base{clip-path:inset(0 var(--cr,0%) 0 var(--cl,0%))}
.tp-flap{clip-path:inset(-40% var(--fr,100%) -40% var(--fl,100%)); transform-origin:var(--ox,0%) 50%;
    transform:rotateY(var(--ay,0deg)) rotateX(var(--ax,0deg)); will-change:transform}
.tp-skin{position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,.025) 2px 3px),rgba(238,241,232,.66);
    clip-path:polygon(0 6%,3% 0,6% 9%,9% 1%,97% 1%,100% 8%,97% 17%,100% 27%,97% 37%,100% 48%,97% 58%,100% 69%,97% 80%,100% 91%,97% 100%,3% 100%,0 91%,3% 81%,0 71%,3% 61%,0 50%,3% 40%,0 29%,3% 19%)}
.tp-flap .tp-skin{background:linear-gradient(var(--sd,90deg),rgba(0,0,0,.06),rgba(255,255,255,.28) 85%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,rgba(0,0,0,.02) 2px 3px),rgba(246,247,242,.82)}
.tp-sh{position:absolute; top:3px; bottom:-3px; left:var(--shl,0%); width:var(--shw,0%); border-radius:4px; background:rgba(0,0,0,.28); filter:blur(3px); opacity:var(--so,0)}
.tp-flap .tp-skin{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tape{perspective:300px}
.tape.pt{perspective:200px; perspective-origin:50% 40%}
.pt-in{position:absolute; inset:0; transform:scaleX(var(--sx,1)); transform-style:preserve-3d}
.pt-base{position:absolute; inset:0; clip-path:inset(-2px var(--cut,0px) -2px -2px)}
.pt-skin{position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 50%),rgba(238,241,232,.68);
    clip-path:polygon(0 6%,3% 0,100% 0,100% 100%,3% 100%,0 91%,3% 81%,0 71%,3% 61%,0 50%,3% 40%,0 29%,3% 19%)}
.pt-flap{position:absolute; top:0; bottom:0; left:calc(100% - var(--fw,0px)); width:0; transform-origin:0 50%; transform:rotateX(var(--ax,0deg)); transform-style:preserve-3d}
.pt-s{position:absolute; top:0; left:0; height:100%; width:var(--sw,0px); transform-origin:0 50%; transform:rotateY(var(--dt,0deg)); transform-style:preserve-3d}
.pt-s .pt-s{left:100%}
.pt-teeth{position:absolute; top:0; left:100%; width:4px; height:100%;
    clip-path:polygon(0 0,25% 0,100% 8%,25% 17%,100% 27%,25% 37%,100% 48%,25% 58%,100% 69%,25% 80%,100% 91%,25% 100%,0 100%)}
.pt-sh{position:absolute; top:4px; bottom:-4px; left:calc(100% - var(--fw,0px)); width:calc(var(--fw,0px) + 4px); border-radius:4px;
    background:rgba(0,0,0,.32); filter:blur(3.5px); opacity:var(--so,0); transform:translateX(var(--shx,0px))}
.pt-s{width:calc(var(--sw,0px) + .7px)}
.pt-s .pt-s{left:calc(100% - .7px)}
.pt-s .pt-teeth{left:calc(100% - .7px)}
.pt-s{width:calc(var(--sw,0px) + .5px)}
.pt-s .pt-s{left:calc(100% - .5px)}
.pt-s .pt-teeth{left:calc(100% - .5px)}
.xb .xb-card::before{display:block; border:0; box-shadow:none; width:96px; margin-left:-48px;
    background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 50%),rgba(238,241,232,.7);
    clip-path:polygon(0 6%,3% 0,6% 9%,9% 1%,97% 1%,100% 8%,97% 17%,100% 27%,97% 37%,100% 48%,97% 58%,100% 69%,97% 80%,100% 91%,97% 100%,3% 100%,0 91%,3% 81%,0 71%,3% 61%,0 50%,3% 40%,0 29%,3% 19%)}
.xb .xb-card:nth-child(1)::before{transform:rotate(-3deg)}
.xb .xb-card:nth-child(2)::before{transform:rotate(2deg)}
.xb .xb-card:nth-child(3)::before{transform:rotate(-1.5deg)}
.xb{border-radius:28px}
.xb .xb-card{border-radius:16px}
.xb .xb-title span{border-radius:12px}
.xb .xb-foot span{border-radius:12px}
.xb .xb-now{border-radius:999px}
.xb .xb-links button{border-radius:999px}
.xb .xb-card::before{clip-path:none; border-radius:4px}
.ai{margin-top:4.5rem; text-align:left}
.ai p{margin-left:0!important; margin-right:0!important; max-width:none}
.ai-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap}
.ai-eye{margin:0 0 .6rem!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.ai h2{margin:0; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink); max-width:none!important}
.ai-lede{margin:.4rem 0 0!important; color:var(--ink-2); font-size:1rem}
.ai-nav{display:flex; gap:.4rem}
.ai-nav button{width:2.5rem; height:2.5rem; border-radius:999px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; cursor:var(--nt-cur); transition:background .2s,color .2s,border-color .2s}
.ai-nav button:hover{background:#333333; color:#ffffff; border-color:#333333}
.ai-board{margin-top:1.3rem; border-radius:28px; border:1px solid var(--line-2); overflow:hidden;
    background:#faf9f4; background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px); background-size:24px 24px}
.ai-row{display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 1.4rem; padding:1.4rem 1.4rem 1.5rem; scrollbar-width:none}
.ai-row::-webkit-scrollbar{display:none}
.ai-card{flex:0 0 clamp(260px,31%,340px); scroll-snap-align:start; background:#ffffff; border:1px solid var(--line-2); border-radius:16px; padding:.7rem .7rem 1rem; display:flex; flex-direction:column; gap:.55rem; box-shadow:0 18px 36px -30px rgba(0,0,0,.45)}
.ai-card h3{margin:.35rem .35rem 0; font-size:1.08rem; color:var(--ink); letter-spacing:-.01em}
.ai-card p{margin:0 .35rem!important; font-size:.88rem; line-height:1.45; color:var(--ink-2)}
.ai-tools{display:flex; flex-wrap:wrap; gap:.3rem; margin:auto .35rem 0; padding-top:.35rem}
.ai-tools span{font-size:.72rem; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:.14rem .55rem}
.ai-vis{position:relative; height:190px; border-radius:12px; overflow:hidden}
.ai-tag{position:absolute; z-index:2; top:.55rem; right:.55rem; font-size:.7rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.94); border-radius:999px; padding:.22rem .6rem; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.v-pf{background:#f1f1f1}
.v-pf img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.v-term{background:#101015; padding:1rem 1rem .8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; line-height:1.75; color:#dcdcdc}
.v-term p{margin:0!important}
.v-term b{color:#c0c0c0}
.v-term .t-dim{color:#6f6f7d}
.v-term .t-ok{color:#b9b9c6}
.v-term .t-now{color:#ffffff}
.v-f2c{display:grid; grid-template-columns:1fr 1.25fr; background:#f3f3f3}
.f2c-l{padding:1rem .8rem; display:flex; flex-direction:column; gap:.4rem; border-right:1px dashed rgba(51,51,51,.35)}
.f2c-l i{display:block; height:.45rem; border-radius:4px; background:#dedede}
.f2c-l .w80{width:80%}
.f2c-l .w60{width:60%}
.f2c-l .w70{width:70%}
.f2c-l .blk{height:3.2rem; border-radius:8px; background:linear-gradient(135deg,#f3f3f3,#e6e6e6)}
.f2c-l .btn{width:45%; height:.9rem; border-radius:999px; background:#333333}
.f2c-r{background:#101015; padding:1rem .8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.64rem; line-height:1.8; color:#dcdcdc}
.f2c-r p{margin:0!important; white-space:nowrap}
.f2c-r em{font-style:normal; color:#c0c0c0}
.f2c-r u{text-decoration:none; color:#7ec8ff}
.f2c-r s{text-decoration:none; color:#9fe0a8}
.v-os{background:linear-gradient(150deg,#333333,#333333 55%,#333333); display:flex; align-items:center; justify-content:center}
.os-card{width:74%; background:#ffffff; border-radius:12px; padding:.8rem .9rem; box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.os-card small{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.os-card b{display:block; font-size:.86rem; color:var(--ink); margin:.2rem 0 .5rem}
.os-bar{height:5px; border-radius:999px; background:#f3f3f3; margin-bottom:.5rem}
.os-bar i{display:block; width:66%; height:100%; border-radius:999px; background:#333333}
.os-row{margin:.25rem 0!important; font-size:.74rem; color:var(--ink-2); display:flex; align-items:center; gap:.45rem}
.os-row span{width:.8rem; height:.8rem; border-radius:50%; border:1.5px solid var(--line-2)}
.os-row.on span{background:#333333; border-color:#333333}
.v-ws{background:#f3f3f3; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:1rem .8rem}
.ws-col{display:flex; flex-direction:column; gap:.4rem}
.ws-col small{font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:.1rem}
.ws-col i{display:block; height:2rem; border-radius:8px; background:#ffffff; border:1px solid var(--line-2)}
.ws-col i.s{height:1.3rem}
.ws-col i.v{background:#f9f9f9; border-color:#eaeaea}
@media (max-width:760px){
.ai-card{flex-basis:80%}
.ai-nav{display:none}
}
.ai-tag{font-family:var(--font)}
.v-term{padding-top:2.4rem}
.f2c-r,.f2c-l{padding-top:2.4rem}
.gx{margin-top:4.5rem; text-align:left}
.gx p{margin-left:0!important; margin-right:0!important; max-width:none}
.gx-eye{margin:0 0 .6rem!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.gx h2{margin:0; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink); max-width:none!important}
.gx-lede{margin:.4rem 0 0!important; color:var(--ink-2)}
.gx-panel{margin-top:1.3rem; border:1px solid var(--line-2); border-radius:28px; padding:1.4rem 1.4rem 1.2rem; display:flex; flex-direction:column; gap:1.1rem;
    background:#faf9f4; background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px); background-size:24px 24px}
.gx-thread{min-height:19rem; display:flex; flex-direction:column; gap:.8rem}
.gx-q{align-self:flex-end; max-width:70%; background:#333333; color:#ffffff; font-weight:500; font-size:.95rem; padding:.6rem .95rem; border-radius:16px 16px 4px 16px; box-shadow:0 10px 22px -16px rgba(51,51,51,.8)}
.gx-a{align-self:flex-start; display:flex; gap:.65rem; max-width:min(760px,94%)}
.gx-av{flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:linear-gradient(135deg,#333333,#333333); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:.8rem}
.gx-bubble{background:#ffffff; border:1px solid var(--line-2); border-radius:4px 16px 16px 16px; padding:.85rem 1rem; box-shadow:0 14px 30px -26px rgba(0,0,0,.5)}
.gx-text{margin:0!important; color:var(--ink); font-size:.96rem; line-height:1.55; min-height:1.5em}
.gx-caret{display:inline-block; width:.5em; height:1em; margin-left:2px; vertical-align:-2px; background:#333333; border-radius:2px}
.gx-dots{display:inline-flex; gap:4px}
.gx-dots i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:gxdot 1s infinite ease-in-out}
.gx-dots i:nth-child(2){animation-delay:.15s}
.gx-dots i:nth-child(3){animation-delay:.3s}
@keyframes gxdot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.gx-res{display:grid; grid-template-columns:210px minmax(0,1fr); gap:.9rem; margin-top:.85rem; opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease}
.gx-res.on{opacity:1; transform:none}
.gx-res .ai-vis{height:132px; border-radius:12px}
.gx-res .v-term{padding:.8rem .8rem; font-size:.62rem; line-height:1.65}
.gx-res .f2c-l,.gx-res .f2c-r{padding-top:.8rem}
.gx-res .f2c-r{font-size:.56rem}
.gx-res .os-card{padding:.6rem .7rem}
.gx-res .os-card b{font-size:.74rem}
.gx-res .os-row{font-size:.66rem}
.gx-res .v-ws{padding:.7rem .6rem}
.gx-info{display:flex; flex-direction:column; gap:.6rem; justify-content:center}
.gx-split{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.gx-split div{border:1px solid var(--line-2); border-radius:12px; padding:.55rem .7rem; font-size:.84rem; line-height:1.35; color:var(--ink)}
.gx-split div.ai{background:#f9f9f9; border-color:#eaeaea}
.gx-split small{display:block; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.2rem}
.gx-split div.ai small{color:#333333}
.gx-tools{display:flex; flex-wrap:wrap; gap:.3rem}
.gx-tools span{font-size:.72rem; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:.14rem .55rem}
.gx-chips{display:flex; flex-wrap:wrap; gap:.45rem; padding-top:.9rem; border-top:1px solid var(--line)}
.gx-chips button{font:inherit; font-size:.86rem; color:var(--ink-2); background:#ffffff; border:1px solid var(--line-2); border-radius:999px; padding:.45rem .85rem; cursor:var(--nt-cur); transition:background .2s,color .2s,border-color .2s}
.gx-chips button:hover{border-color:#333333; color:#333333}
.gx-chips button.on{background:#333333; border-color:#333333; color:#ffffff}
@media (max-width:760px){
.gx-res{grid-template-columns:1fr}
.gx-q{max-width:88%}
.gx-split{grid-template-columns:1fr}
}
.gx-res{display:none}
.gx-res.on{display:grid; animation:gxin .45s ease both}
@keyframes gxin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.gx-split div.gx-ai{background:#f9f9f9; border-color:#eaeaea}
.gx-split div.gx-ai small{color:#333333}
.gx-thread{min-height:0}
.sheet::before,.sheet::after{content:""; position:absolute; left:0; right:0; top:0; height:clamp(300px,46vh,520px); z-index:0; pointer-events:none; border-radius:inherit}
.sheet::before{background:
      radial-gradient(38% 62% at 22% -8%,rgba(255,112,67,.60),transparent 70%),
      radial-gradient(34% 58% at 48% -12%,rgba(255,149,40,.70),transparent 72%),
      radial-gradient(36% 60% at 74% -6%,rgba(255,187,110,.60),transparent 72%),
      radial-gradient(60% 80% at 50% -30%,rgba(255,120,40,.30),transparent 75%);
    filter:blur(6px); -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%); mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
.sheet::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size:180px 180px; opacity:.5; mix-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 80%); mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 80%)}
.sheet > .page{position:relative; z-index:1}
.sheet::before,.sheet::after{height:clamp(380px,60vh,640px)}
.sheet::before{background:
      radial-gradient(32% 52% at 25% 6%,rgba(255,104,58,.78),transparent 70%),
      radial-gradient(30% 50% at 50% 2%,rgba(255,138,28,.88),transparent 72%),
      radial-gradient(32% 54% at 74% 8%,rgba(255,176,98,.78),transparent 72%),
      radial-gradient(60% 70% at 50% -12%,rgba(255,118,38,.45),transparent 75%);
    filter:blur(22px); -webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 100%); mask-image:linear-gradient(180deg,#000 38%,transparent 100%)}
.sheet::before,.sheet::after{height:clamp(240px,38vh,400px)}
.sheet::before{background:
      radial-gradient(34% 52% at 25% 2%,rgba(255,120,70,.18),transparent 70%),
      radial-gradient(32% 50% at 50% 0%,rgba(255,150,50,.22),transparent 72%),
      radial-gradient(34% 54% at 74% 4%,rgba(255,185,110,.18),transparent 72%);
    filter:blur(28px)}
.sheet::after{opacity:.16}
.gx-res{grid-template-columns:1fr!important; gap:.8rem}
.gx-res.on{display:grid}
.gx-a{max-width:min(820px,96%)}
.pv{border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#ffffff; box-shadow:0 16px 34px -28px rgba(0,0,0,.5)}
.pv-bar{display:flex; align-items:center; gap:.65rem; padding:.45rem .55rem .45rem .7rem; background:#f6f6f6; border-bottom:1px solid var(--line)}
.pv-l{display:flex; gap:5px}
.pv-l i{width:9px; height:9px; border-radius:50%; background:#ff5f57}
.pv-l i:nth-child(2){background:#febc2e}
.pv-l i:nth-child(3){background:#28c840}
.pv-bar b{flex:1; font-size:.78rem; font-weight:600; color:var(--ink-2)}
.pv-open{font:inherit; font-size:.75rem; font-weight:600; color:#333333; background:#f9f9f9; border:1px solid #eaeaea; border-radius:999px; padding:.28rem .7rem; cursor:var(--nt-cur); transition:background .2s,color .2s}
.pv-open:hover{background:#333333; color:#ffffff; border-color:#333333}
.pv-stage{position:relative; height:clamp(230px,30vw,320px); background:#f8f8f8; overflow:hidden}
.pv-s{position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none}
.pv-s.on{opacity:1; pointer-events:auto}
.pv-s img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.pv-nav{position:absolute; left:50%; bottom:.6rem; transform:translateX(-50%); display:flex; align-items:center; gap:.5rem; background:rgba(15,15,20,.72); color:#ffffff; border-radius:999px; padding:.2rem .35rem; font-size:.72rem; z-index:2}
.pv-nav button{width:1.6rem; height:1.6rem; border-radius:50%; border:0; background:transparent; color:#ffffff; cursor:var(--nt-cur); font:inherit}
.pv-nav button:hover{background:rgba(255,255,255,.18)}
.pv-doc{height:100%; padding:1.1rem 1.3rem; background:#ffffff; overflow:hidden}
.d-file{margin:0!important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; color:var(--muted)}
.pv-doc h4{margin:.35rem 0 .3rem; font-size:1.15rem; color:var(--ink)}
.d-desc{margin:0!important; font-size:.8rem; line-height:1.45; color:var(--ink-2); max-width:44rem}
.d-steps{margin:.7rem 0 0; padding:0; list-style:none; counter-reset:st; display:flex; flex-wrap:wrap; gap:.35rem}
.d-steps li{counter-increment:st; font-size:.74rem; color:var(--ink); background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:.25rem .6rem .25rem .3rem}
.d-steps li::before{content:counter(st); display:inline-flex; width:1.1rem; height:1.1rem; margin-right:.35rem; border-radius:50%; background:#333333; color:#ffffff; font-size:.62rem; font-weight:700; align-items:center; justify-content:center}
.d-tags{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem}
.d-tags span{font-size:.68rem; color:#333333; background:#f9f9f9; border-radius:6px; padding:.18rem .45rem}
.m-app{display:grid; grid-template-columns:28% 1fr; height:100%; background:#ffffff}
.m-app aside{background:#f5f5f5; border-right:1px solid var(--line); padding:.9rem .6rem; display:flex; flex-direction:column; gap:.25rem}
.m-app aside p{margin:0!important; font-size:.76rem; color:var(--ink-2); padding:.4rem .55rem; border-radius:8px}
.m-app aside p.on{background:#ffffff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.m-app main{padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem; min-width:0}
.m-app main > small{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.m-step{display:grid; grid-template-columns:5rem 1fr auto; align-items:center; gap:.6rem; border:1px solid var(--line-2); border-radius:10px; padding:.55rem .7rem; font-size:.78rem}
.m-step b{color:var(--ink)}
.m-step span{color:var(--ink-2)}
.m-step em{font-style:normal; font-size:.66rem; color:var(--muted); background:var(--bg-2); border-radius:999px; padding:.12rem .45rem}
.m-step em.ok{color:#ffffff; background:#333333}
.m-top{display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap}
.m-tabs{display:flex; gap:.6rem; font-size:.74rem; color:var(--muted)}
.m-tabs b{color:var(--ink)}
.m-tabs i{font-style:normal}
.m-acts{display:flex; gap:.35rem}
.m-acts u{text-decoration:none; font-size:.66rem; color:#333333; border:1px solid #eaeaea; background:#f9f9f9; border-radius:999px; padding:.15rem .5rem}
.m-list{list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.m-list li{display:flex; align-items:center; gap:.5rem; font-size:.76rem; color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:.42rem .55rem}
.m-list s{width:.8rem; height:.8rem; border-radius:4px; border:1.5px solid var(--line-2); flex:0 0 auto}
.m-list li.done{color:var(--muted); text-decoration:line-through}
.m-list li.done s{background:#333333; border-color:#333333}
.m-list em{margin-left:auto; font-style:normal; font-size:.64rem; color:var(--muted); background:var(--bg-2); border-radius:999px; padding:.1rem .45rem; text-decoration:none}
.m-f2c{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:.8rem; height:100%; padding:1rem; background:#f1f1f1}
.m-pane{display:flex; flex-direction:column; gap:.35rem}
.m-pane small{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.m-page{flex:1; background:#ffffff; border-radius:10px; border:1px solid var(--line-2); padding:.8rem; display:flex; flex-direction:column; gap:.4rem}
.m-pane:first-child .m-page{border-style:dashed; border-color:rgba(51,51,51,.45)}
.m-page .h{display:block; height:.6rem; width:70%; border-radius:4px; background:#1a1a2a}
.m-page .h.s{width:45%; background:#d0d0d0}
.m-page b{flex:1; min-height:2.5rem; border-radius:8px; background:linear-gradient(135deg,#ffe3cf,#ffc9a3)}
.m-page u{width:40%; height:.9rem; border-radius:999px; background:#333333}
.m-badge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#ffffff; color:#138a48; font-size:.72rem; font-weight:700; border-radius:999px; padding:.3rem .7rem; box-shadow:0 6px 16px rgba(0,0,0,.12)}
.gx-info{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.gx-info .gx-split{flex:1 1 340px}
.pvx{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:2rem}
.pvx[hidden]{display:none}
.pvx-in{width:min(1100px,100%); background:#ffffff; border-radius:20px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); display:flex; flex-direction:column}
.pvx-top{display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem .7rem 1.2rem; border-bottom:1px solid var(--line)}
.pvx-t{font-size:.95rem; color:var(--ink)}
.pvx-cap{flex:1; font-size:.85rem; color:var(--muted)}
.pvx-x{width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line-2); background:#ffffff; cursor:var(--nt-cur); font-size:.95rem}
.pvx-stage{position:relative; height:min(68vh,620px); background:#f8f8f8}
.pvx-stage .pv-s img{object-fit:contain; background:#f8f8f8}
.pvx-stage .pv-s:not(.img){zoom:1.7}
.pvx-nav{display:flex; justify-content:center; align-items:center; gap:.8rem; padding:.6rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-2)}
.pvx-nav button{width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line-2); background:#ffffff; cursor:var(--nt-cur); font:inherit}
.pvx-nav button:hover{background:#333333; color:#ffffff; border-color:#333333}
.pvx-nav.one{display:none}
@media (max-width:760px){
.pvx{padding:.8rem}
.pvx-stage .pv-s:not(.img){zoom:1.15}
.m-app{grid-template-columns:1fr}
.m-app aside{display:none}
}
.gx-res .gx-info{flex-direction:row; align-items:center; justify-content:flex-start}
.gx-res .gx-info .gx-split{flex:1 1 340px}
.gx{margin-top:4rem}
.gx-panel{display:grid!important; grid-template-columns:15.5rem minmax(0,1fr); gap:1.2rem; padding:1.1rem!important; align-items:start}
.gx-chips{grid-column:1; grid-row:1; flex-direction:column; flex-wrap:nowrap!important; gap:.35rem!important; padding:0 1.1rem 0 0!important; border-top:0!important; border-right:1px solid var(--line)}
.gx-chips button{width:100%; text-align:left; border-radius:12px!important; font-size:.84rem!important; padding:.55rem .75rem!important; line-height:1.3}
.gx-thread{grid-column:2; grid-row:1; gap:0!important}
.gx-q{display:none}
.gx-a{max-width:100%!important; gap:.55rem}
.gx-av{width:1.75rem; height:1.75rem; font-size:.72rem}
.gx-bubble{padding:.7rem .85rem!important; width:100%}
.gx-text{font-size:.9rem!important; line-height:1.5!important}
.gx-res{margin-top:.6rem!important; gap:.55rem!important}
.pv-bar{padding:.35rem .45rem .35rem .6rem}
.pv-bar b{font-size:.74rem}
.pv-stage{height:clamp(170px,17vw,215px)!important}
.gx-split div{padding:.4rem .6rem!important; font-size:.78rem!important}
.gx-split small{font-size:.58rem!important; margin-bottom:.1rem!important}
@media (max-width:860px){
.gx-panel{grid-template-columns:1fr}
.gx-thread{grid-column:1; grid-row:2}
.gx-chips{grid-column:1; grid-row:1; flex-direction:row; overflow-x:auto; padding:0 0 .6rem!important; border-right:0; border-bottom:1px solid var(--line); scrollbar-width:none}
.gx-chips::-webkit-scrollbar{display:none}
.gx-chips button{width:auto; white-space:nowrap; flex:0 0 auto}
}
.pv-doc{padding:.75rem 1rem!important; overflow:auto; scrollbar-width:thin}
.pv-doc h4{font-size:1rem!important; margin:.2rem 0 .2rem!important}
.d-desc{font-size:.74rem!important; line-height:1.4!important}
.d-steps{margin-top:.5rem!important; gap:.28rem!important}
.d-steps li{font-size:.68rem!important; padding:.16rem .5rem .16rem .22rem!important}
.d-steps li::before{width:1rem!important; height:1rem!important; font-size:.58rem!important}
.d-tags{margin-top:.45rem!important}
.d-tags span{font-size:.64rem!important}
.pv-stage:has(.pv-doc){height:auto!important}
.pv-stage:has(.pv-doc) .pv-s{position:relative}
.pv-doc{overflow:visible!important}
.page-fx{display:flex!important; position:fixed; inset:0!important; z-index:999; pointer-events:none; align-items:center; justify-content:center;
    transform:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    background:radial-gradient(55% 45% at 50% 0%,rgba(255,150,70,.12),transparent 70%),radial-gradient(60% 60% at 50% 55%,rgba(51,51,51,.05),transparent 70%),#f9f9f9!important;
    opacity:0; visibility:hidden; transition:opacity .24s ease, visibility 0s linear .24s!important; will-change:opacity}
.page-fx.on{opacity:1; visibility:visible; transition:opacity .24s ease, visibility 0s!important}
.page-fx .fx-mark{opacity:1!important; color:rgba(0,0,0,.28)!important; font-size:1rem; transform:scale(.96); transition:transform .5s ease}
.page-fx.on .fx-mark{transform:scale(1)}
.page-fx{background:rgba(251,250,247,.72)!important; -webkit-backdrop-filter:blur(12px)!important; backdrop-filter:blur(12px)!important;
    transform:translateZ(0)!important; transition:opacity .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s!important}
.page-fx.on{transition:opacity .26s cubic-bezier(.4,0,.2,1), visibility 0s!important}
.fx-load{display:flex; align-items:center; gap:.5rem; background:#ffffff; border-radius:999px; padding:.45rem .8rem .45rem .6rem;
    box-shadow:0 12px 30px -14px rgba(0,0,0,.45); opacity:0; transform:translateY(6px) scale(.96);
    transition:opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.page-fx.on .fx-load{opacity:1; transform:none; transition-delay:.08s}
.fx-spin{width:14px; height:14px; border-radius:50%; border:2px solid rgba(51,51,51,.2); border-top-color:#333333; animation:fxspin .7s linear infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}
.page-fx .fx-load .fx-mark{font-size:.78rem!important; font-weight:700; letter-spacing:.06em; color:var(--ink)!important; transform:none!important}
.page-fx{-webkit-mask-image:none!important; mask-image:none!important}
.page-fx{background:rgba(251,250,247,.78)!important; -webkit-backdrop-filter:blur(8px)!important; backdrop-filter:blur(8px)!important;
    transition:opacity .44s cubic-bezier(.22,.61,.36,1), visibility 0s linear .44s!important}
.page-fx.on{transition:opacity .28s cubic-bezier(.4,0,.2,1), visibility 0s!important}
.fx-load{will-change:opacity,transform; transition:opacity .28s ease, transform .4s cubic-bezier(.22,.61,.36,1)!important}
.page-fx.on .fx-load{transition-delay:0s!important}
.fx-spin{will-change:transform; animation:fxspin .75s linear infinite}
.fx-load{padding:.55rem!important; gap:0!important; border-radius:999px}
.fx-spin{width:18px; height:18px; border-width:2px}
.work-card .wc-image.cover-scene{position:relative}
.wc-bar{position:absolute; z-index:6; left:.8rem; right:.8rem; bottom:.8rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem .8rem; flex-wrap:wrap;
    padding:.42rem .5rem .42rem .45rem; border-radius:16px; background:rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 28px -18px rgba(0,0,0,.6); text-align:left}
.wc-bar .wc-go{background:#ffffff; color:var(--ink); text-decoration:none; font-weight:700; font-size:.82rem; border-radius:999px; padding:.42rem .85rem; white-space:nowrap; transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .wc-bar .wc-go{transform:translateX(3px)}
.wc-bar .wc-metric{color:rgba(255,255,255,.9); font-size:.78rem; padding-right:.35rem; text-align:right}
.wc-bar .wc-metric b{color:#ffffff}
.work-card .cover-scene .float-chip.chip-a{bottom:21%!important}
.scene-times .chip-a{bottom:23%!important}
.work-card{padding-bottom:0}
.work-card .cover-scene .float-chip.chip-a{bottom:4.9rem!important}
.scene-times .float-chip.chip-a{bottom:4.9rem!important}
.work-card .cover-scene .banner-stage{position:static!important}
.work-card .cover-scene .float-pill.pill-b{top:52%!important; bottom:auto!important}
.work-card .wc-bar .wc-go,.work-card:hover .wc-bar .wc-go{text-decoration:none!important}
.meta{border-top:0!important; border-bottom:0!important}
.stat{border-top:0!important}
.vertical{border-top:0!important; border-bottom:0!important}
.mods,.worry{border-top:0!important}
.ib-row{border-top:0!important; padding:.45rem 0!important}
.nb-facts,.nb-fact{border-top:0!important; border-bottom:0!important}
.nb-fact{padding:.3rem .15rem!important}
.ls{border-top:0!important; padding-top:0!important}
.arg{border-top:0!important; border-bottom:0!important}
.pb-kv{border-top:0!important; padding:.32rem 0!important}
.tv-who{border-right:0!important}
.gx-chips{border-right:0!important; border-top:0!important; border-bottom:0!important}
.pb-list li,.ht-list li,.pr li,.rt-col li{border-top:0!important; border-bottom:0!important}
.pb-list li{padding:.3rem 0 .3rem 1.1rem!important}
.ht-list li{padding:.55rem 0!important}
.pr li,.rt-col li{padding:.45rem 0!important}
.stat b .rt-count{display:inline!important; font:inherit!important; color:inherit!important; letter-spacing:inherit!important; margin:0!important; padding:0!important}
html.lenis,
html.lenis body{
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped{
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe{
  pointer-events: none;
}
.lenis.lenis-autoToggle{
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
html.lenis{scroll-behavior:auto!important}
.edge{position:sticky; z-index:39; display:block; height:0; pointer-events:none; transition:opacity .4s ease}
.edge-t{top:0; opacity:0}
body.scrolled .edge-t{opacity:1}
.edge-b{bottom:0; opacity:1}
body.at-end .edge-b{opacity:0}
.edge::before,.edge::after{content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw; pointer-events:none}
.edge-t::before{top:0; height:84px; -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); -webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent); mask-image:linear-gradient(to bottom,#000 25%,transparent)}
.edge-t::after{top:0; height:46px; background:linear-gradient(to bottom,rgba(255,255,255,.35),transparent); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent); mask-image:linear-gradient(to bottom,#000 20%,transparent)}
.edge-b::before{bottom:0; height:96px; -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); -webkit-mask-image:linear-gradient(to top,#000 25%,transparent); mask-image:linear-gradient(to top,#000 25%,transparent)}
.edge-b::after{bottom:0; height:52px; background:linear-gradient(to top,rgba(255,255,255,.3),transparent); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); -webkit-mask-image:linear-gradient(to top,#000 20%,transparent); mask-image:linear-gradient(to top,#000 20%,transparent)}
@media (max-width:760px){
.edge-t::before{height:56px}
.edge-t::after{height:30px}
.edge-b::before{height:64px}
.edge-b::after{height:34px}
}
.edge-b{display:none!important}
.edge-t::after{display:none!important}
.edge-t::before{height:34px!important; background:linear-gradient(to bottom,rgba(255,255,255,.4),rgba(255,255,255,0));
    -webkit-backdrop-filter:blur(3px)!important; backdrop-filter:blur(3px)!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 25%,transparent 100%)!important; mask-image:linear-gradient(to bottom,#000 0%,#000 25%,transparent 100%)!important}
.edge-fix-b{position:fixed; left:0; right:0; bottom:0; height:40px; z-index:150; pointer-events:none;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to top,#000 0%,#000 25%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,#000 25%,transparent 100%);
    transition:opacity .4s ease}
body.at-end .edge-fix-b{opacity:0}
@media (max-width:760px){
.edge-t::before{height:26px!important}
.edge-fix-b{height:30px}
}
@media (prefers-reduced-motion: reduce){
.edge-fix-b{transition:none}
}
.gx-av{display:none!important}
.gx-a{gap:0!important}
.gx-a{align-self:stretch!important; width:100%}
.gx-a .gx-bubble{flex:1 1 auto; min-width:0}
.edge-t::before{background:none!important; height:28px!important}
.fq{margin-top:4.5rem; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:2.5rem; align-items:start; text-align:left}
.fq p{margin-left:0!important; margin-right:0!important; max-width:none}
.fq-head{position:sticky; top:6rem}
.fq-eye{margin:0 0 .6rem!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.fq h2{margin:0; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink); max-width:14ch!important}
.fq-list{display:flex; flex-direction:column; gap:.6rem}
.fq-i{background:#ffffff; border:1px solid var(--line-2); border-radius:16px; transition:box-shadow .3s ease, border-color .3s ease}
.fq-i.open{border-color:#eaeaea; box-shadow:0 18px 36px -30px rgba(0,0,0,.45)}
.fq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.1rem 1.05rem 1.25rem; background:none; border:0; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); text-align:left; cursor:var(--nt-cur)}
.fq-q i{position:relative; flex:0 0 auto; width:1.8rem; height:1.8rem; border-radius:999px; background:var(--bg-2); transition:background .25s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.fq-q i::before,.fq-q i::after{content:""; position:absolute; left:50%; top:50%; width:.7rem; height:2px; margin:-1px 0 0 -.35rem; border-radius:2px; background:var(--ink)}
.fq-q i::after{transform:rotate(90deg)}
.fq-i.open .fq-q i{background:#333333; transform:rotate(45deg)}
.fq-i.open .fq-q i::before,.fq-i.open .fq-q i::after{background:#ffffff}
.fq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.fq-i.open .fq-a{grid-template-rows:1fr}
.fq-a > div{overflow:hidden}
.fq-a p{margin:0!important; padding:0 1.25rem 1.15rem; color:var(--ink-2); font-size:.95rem; line-height:1.6; max-width:60ch!important}
.fq-a a{color:#333333; font-weight:600; text-decoration:none}
.fq-a a:hover{color:#333333}
@media (max-width:860px){
.fq{grid-template-columns:1fr; gap:1.4rem}
.fq-head{position:static}
}
.nbk{position:relative; margin-top:1.5rem; padding-right:2.9rem; perspective:2400px}
.nb-book{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; border-radius:18px; background:#ececec; box-shadow:0 44px 70px -44px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.04)}
.nb-book::after{content:""; position:absolute; z-index:6; left:50%; top:7%; bottom:7%; width:2px; margin-left:-1px; pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 7px,transparent 7px 22px)}
.nb-page{position:relative; min-height:29rem; padding:1.6rem 2rem 1.8rem; background:#fbfaf6; text-align:left}
.nb-left{border-radius:18px 0 0 18px; box-shadow:inset -28px 0 30px -28px rgba(0,0,0,.2)}
.nb-right{border-radius:0 18px 18px 0; box-shadow:inset 28px 0 30px -28px rgba(0,0,0,.2)}
.nb-page p{margin-left:0!important; margin-right:0!important}
.nb-hd{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-bottom:1.3rem}
.nb-hd-r{justify-content:flex-end}
.nb-chip{display:inline-block; font-size:.74rem; font-weight:700; color:var(--ink); border-radius:999px; padding:.28rem .7rem}
.nb-q{margin:.8rem 0 .6rem; font-size:clamp(1.3rem,2vw,1.65rem); letter-spacing:-.02em; line-height:1.2; color:var(--ink)}
.nb-ans{margin:0 0 1.1rem!important; color:var(--ink-2); font-size:.95rem; line-height:1.6; max-width:48ch!important}
.nb-left .gx-info{display:flex; flex-direction:column; align-items:stretch; gap:.6rem}
.nb-right .gx-res{margin:0!important}
.nb-right .pv-stage{height:clamp(230px,24vw,310px)!important}
.nb-tabs{position:absolute; z-index:0; right:0; top:2.6rem; display:flex; flex-direction:column; gap:.3rem}
.nb-tab{width:3.5rem; height:4.9rem; padding:0 0 0 .8rem; border:0; border-radius:0 12px 12px 0; background:var(--c); cursor:var(--nt-cur); font:inherit; color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:inset 8px 0 10px -8px rgba(0,0,0,.18); transform:translateX(-.5rem); transition:transform .3s cubic-bezier(.2,.7,.2,1), filter .3s}
.nb-tab span{writing-mode:vertical-rl; font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.nb-tab:hover{transform:translateX(-.15rem)}
.nb-tab.on{transform:translateX(.2rem); filter:saturate(1.6)}
.nb-flip{position:absolute; z-index:5; top:0; bottom:0; width:50%; display:none; transform-style:preserve-3d; pointer-events:none}
.nb-flip.fwd{left:50%; transform-origin:left center}
.nb-flip.bwd{left:0; transform-origin:right center}
.nb-flip .face{position:absolute; inset:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.nb-flip .back{transform:rotateY(180deg)}
.nb-flip .face::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s ease}
.nb-flip.fwd .front::after{background:linear-gradient(to right,rgba(0,0,0,.16),transparent 55%)}
.nb-flip.fwd .back::after{background:linear-gradient(to left,rgba(0,0,0,.12),transparent 60%)}
.nb-flip.bwd .front::after{background:linear-gradient(to left,rgba(0,0,0,.16),transparent 55%)}
.nb-flip.bwd .back::after{background:linear-gradient(to right,rgba(0,0,0,.12),transparent 60%)}
.nb-flip.go .front::after{opacity:1}
.nb-flip.go .back::after{opacity:.6}
.nb-flip.fwd.go{transition:transform .9s cubic-bezier(.45,.05,.25,1); transform:rotateY(-180deg)}
.nb-flip.bwd.go{transition:transform .9s cubic-bezier(.45,.05,.25,1); transform:rotateY(180deg)}
.nb-flip .face.nb-right{border-radius:0 18px 18px 0}
.nb-flip .face.nb-left{border-radius:18px 0 0 18px}
.nb-flip.fwd .back{border-radius:0 18px 18px 0}
.nb-flip.bwd .back{border-radius:18px 0 0 18px}
@media (max-width:860px){
.nbk{padding-right:0}
.nb-book{grid-template-columns:1fr}
.nb-book::after{display:none}
.nb-left{border-radius:18px 18px 0 0; box-shadow:none}
.nb-right{border-radius:0 0 18px 18px; box-shadow:none}
.nb-tabs{position:static; flex-direction:row; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem}
.nbk{display:flex; flex-direction:column-reverse}
.nb-tab{width:auto; height:auto; padding:.45rem .8rem; border-radius:999px; transform:none!important; box-shadow:none}
.nb-tab span{writing-mode:horizontal-tb}
}
.nb-left .gx-info .gx-split{flex:0 0 auto!important}
.nb-page{min-height:26rem}
.nb-tab{height:5.4rem}
.nb-tabs{top:1.4rem!important; bottom:1.4rem}
.nb-tab{height:auto!important; flex:1 1 0; max-height:5.6rem; min-height:4.4rem}
@media (max-width:860px){
.nb-tab{flex:0 0 auto; min-height:0}
}
.nb-stage{margin-top:1.5rem; border-radius:28px; padding:clamp(1.3rem,3.6vw,3rem) clamp(1rem,3vw,2.6rem) clamp(1.3rem,3.6vw,3rem) clamp(1.2rem,3.6vw,3rem);
    background:radial-gradient(70% 90% at 15% 0%,rgba(51,51,51,.55),transparent 60%),linear-gradient(145deg,#333333,#333333 55%,#333333)}
.nb-stage .nbk{margin-top:0}
.nb-stage .nb-book{box-shadow:0 50px 80px -40px rgba(0,0,0,.75),0 2px 0 rgba(0,0,0,.08)}
.nb-book > .nb-page::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:var(--cast,0)}
.nb-book > .nb-right::after{background:linear-gradient(to right,rgba(0,0,0,.2),transparent 45%)}
.nb-book > .nb-left::after{background:linear-gradient(to left,rgba(0,0,0,.2),transparent 45%)}
.nb-flip{display:none; transform:none!important; transition:none!important}
.nb-flip .seg{position:absolute; top:0; bottom:0; transform-style:preserve-3d}
.nb-flip.fwd .s1{left:0; width:50%; transform-origin:left center}
.nb-flip.fwd .s2{left:100%; width:100%; transform-origin:left center}
.nb-flip.bwd .s1{left:50%; width:50%; transform-origin:right center}
.nb-flip.bwd .s2{left:-100%; width:100%; transform-origin:right center}
.nb-flip .face{position:absolute; inset:0; overflow:hidden; background:#fbfaf6; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.nb-flip .face.back{transform:rotateY(180deg)}
.nb-flip .fc{position:absolute!important; top:0; bottom:0; width:200%; min-height:0!important; border-radius:0!important}
.nb-flip .shade{position:absolute; inset:0; pointer-events:none; opacity:var(--sh,0)}
.nb-flip .front .shade{background:linear-gradient(to right,rgba(0,0,0,.16),rgba(0,0,0,.05))}
.nb-flip.bwd .front .shade{background:linear-gradient(to left,rgba(0,0,0,.16),rgba(0,0,0,.05))}
.nb-flip .back .shade{background:rgba(0,0,0,.06)}
.nb-flip.fwd .s2 > .front{border-radius:0 18px 18px 0}
.nb-flip.fwd .s2 > .back{border-radius:18px 0 0 18px}
.nb-flip.bwd .s2 > .front{border-radius:18px 0 0 18px}
.nb-flip.bwd .s2 > .back{border-radius:0 18px 18px 0}
@media (max-width:860px){
.nb-stage{padding:1rem}
}
.edge-t{display:none!important}
.edge-fix-t{position:fixed; left:0; right:0; top:0; height:18px; z-index:150; pointer-events:none;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%)}
body.at-end .edge-fix-b{opacity:1!important}
.chap{top:1.25rem!important}
@media (max-width:760px){
.edge-fix-t{height:14px}
.chap{top:1rem!important}
}
.chap{display:none!important}
.fnav{position:fixed; left:50%; bottom:1rem; z-index:160; display:flex; align-items:center; gap:.45rem; transform:translate(-50%,150%); opacity:0; pointer-events:none;
    transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .35s ease}
.fnav.show{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.fn-track{position:relative; display:flex; padding:4px; border-radius:14px; background:rgba(236,235,231,.84); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 16px 34px -16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.05); max-width:calc(100vw - 5.8rem); overflow-x:auto; scrollbar-width:none}
.fn-track::-webkit-scrollbar{display:none}
.fn-ind{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:10px; background:#ffffff; z-index:0;
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px -6px rgba(0,0,0,.22); transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1)}
.fn-track button{position:relative; z-index:1; flex:0 0 auto; font:inherit; font-size:.9rem; font-weight:600; color:#8e8e93; background:none; border:0; border-radius:10px; padding:.58rem 1.05rem; cursor:var(--nt-cur); white-space:nowrap; transition:color .3s ease}
.fn-track button:hover{color:var(--ink-2)}
.fn-track button.on{color:var(--ink)}
.fn-top{position:relative; flex:0 0 auto; width:2.95rem; height:2.95rem; border:0; border-radius:14px; cursor:var(--nt-cur); color:var(--ink); font:inherit; font-size:1rem; font-weight:600;
    background:rgba(236,235,231,.84); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 16px 34px -16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.05);
    display:flex; align-items:center; justify-content:center}
.fn-top svg{position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); transform:rotate(-90deg)}
.fn-top circle{fill:none; stroke-width:2.4}
.fn-top .bg{stroke:rgba(0,0,0,.08)}
.fn-top .fg{stroke:#333333; stroke-linecap:round}
.fn-top:hover{color:#333333}
@media (max-width:760px){
.fnav{bottom:.7rem}
.fn-track button{font-size:.8rem; padding:.5rem .72rem}
.fn-top{width:2.6rem; height:2.6rem}
}
@media (prefers-reduced-motion: reduce){
.fnav,.fn-ind{transition:none}
}
.nav .hn-hide{display:none!important}
.nav ul{align-items:center; gap:.5rem}
.hn-track{position:relative; display:flex; align-items:center; padding:4px; border-radius:14px; background:rgba(236,235,231,.84); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); overflow-x:auto; scrollbar-width:none; max-width:calc(100vw - 2.5rem)}
.hn-track::-webkit-scrollbar{display:none}
.hn-ind{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:10px; background:#ffffff; z-index:0;
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px -6px rgba(0,0,0,.22); transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1)}
.hn-track button,.hn-track a{position:relative; z-index:1; flex:0 0 auto; font:inherit; font-size:.86rem; font-weight:600; color:#8e8e93; background:none; border:0; border-radius:10px; padding:.5rem .9rem; cursor:var(--nt-cur); white-space:nowrap; text-decoration:none!important; transition:color .3s ease, background .3s ease}
.hn-track button:hover,.hn-track a:hover{color:var(--ink-2)}
.hn-track button.on{color:var(--ink)}
.hn-plain a:hover{background:rgba(255,255,255,.7); color:var(--ink)}
@media (max-width:980px){
.nav ul{flex-wrap:wrap; justify-content:flex-end}
.hn-links{display:none}
}
@media (max-width:640px){
.nav .brand-text{display:none}
.hn-track button{font-size:.78rem; padding:.45rem .65rem}
}
@media (prefers-reduced-motion: reduce){
.hn-ind{transition:none}
}
.hn-plain{overflow:visible!important}
.hn-plain .switch{position:relative}
.hn-plain .switch summary{list-style:none; display:flex; align-items:center; gap:.45rem; font:inherit; font-size:.86rem; font-weight:600; color:var(--ink); background:#ffffff; border:0; border-radius:10px; padding:.5rem .8rem .5rem .9rem; cursor:var(--nt-cur);
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px -6px rgba(0,0,0,.22); white-space:nowrap}
.hn-plain .switch summary::-webkit-details-marker{display:none}
.hn-plain .switch .chev{font-size:.7rem; color:var(--muted); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hn-plain .switch[open] .chev{transform:rotate(180deg)}
.hn-plain .switch-menu{position:absolute; z-index:210; top:calc(100% + 10px); left:-4px; width:18.5rem; padding:.4rem; display:flex; flex-direction:column; gap:.15rem;
    background:rgba(255,255,255,.98); border:0; border-radius:16px; box-shadow:0 26px 54px -22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.05); transform-origin:12% 0; animation:hnMenu .22s cubic-bezier(.2,.7,.2,1)}
@keyframes hnMenu{from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none}}
.hn-plain .switch-menu a{display:block; padding:.6rem .75rem; border-radius:10px; text-decoration:none!important; color:var(--ink); cursor:var(--nt-cur); background:none; transition:background .2s ease}
.hn-plain .switch-menu a:hover{background:rgba(236,235,231,.75)}
.hn-plain .switch-menu a[aria-current="true"]{background:#f9f9f9}
.hn-plain .switch-menu .t{display:block; font-size:.9rem; font-weight:700; color:var(--ink)}
.hn-plain .switch-menu .d{display:block; margin-top:.12rem; font-size:.76rem; color:var(--muted); font-weight:500}
@media (max-width:980px){
.hn-links{display:block!important}
.hn-plain > a{display:none}
}
.nav{position:relative; z-index:80}
.bc-mail{position:relative; display:inline-flex; align-items:center; gap:.35rem; margin:1.8rem auto 0; padding:.4rem .4rem .4rem .5rem; border-radius:999px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.bc-addr{display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .8rem .5rem .6rem; border-radius:999px; color:#ffffff; text-decoration:none!important; font-size:clamp(1rem,1.6vw,1.2rem); font-weight:600; letter-spacing:-.01em; transition:background .2s}
.bc-addr:hover{background:rgba(255,255,255,.1)}
.bc-addr svg{width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.bc-copy{position:relative; width:2.7rem; height:2.7rem; border-radius:50%; border:0; background:#ffffff; color:var(--ink); cursor:var(--nt-cur); display:flex; align-items:center; justify-content:center; transition:transform .2s, background .25s, color .25s}
.bc-copy:hover{transform:scale(1.06)}
.bc-copy svg{position:absolute; width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1)}
.bc-copy .i-ok{opacity:0; transform:scale(.6)}
.bc-mail.copied .bc-copy{background:#3ddc84; color:#0b3b22}
.bc-mail.copied .i-copy{opacity:0; transform:scale(.6)}
.bc-mail.copied .i-ok{opacity:1; transform:none}
.bc-toast{position:absolute; left:100%; top:50%; margin-left:.6rem; transform:translate(-4px,-50%); font-size:.82rem; font-weight:600; color:#ffffff; white-space:nowrap; opacity:0; transition:opacity .2s, transform .25s}
.bc-mail.copied .bc-toast,.bc-mail.manual .bc-toast{opacity:1; transform:translate(0,-50%)}
.board-closing .board-connect{margin-top:1.1rem}
@media (max-width:600px){
.bc-toast{left:50%; top:auto; bottom:-1.7rem; margin-left:0; transform:translate(-50%,0)}
.bc-mail.copied .bc-toast,.bc-mail.manual .bc-toast{transform:translate(-50%,0)}
}
.board-closing .board-connect{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.board-connect .bc-mail{margin:0}
.bc-toast{left:50%!important; top:auto!important; bottom:calc(100% + .55rem); margin-left:0!important; transform:translate(-50%,4px)!important;
    background:#ffffff; color:#0b3b22!important; border-radius:999px; padding:.28rem .7rem; box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.bc-mail.copied .bc-toast,.bc-mail.manual .bc-toast{transform:translate(-50%,0)!important}
@media (max-width:600px){
.board-connect .bc-mail{order:-1; flex-basis:100%; justify-content:center; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none}
.board-connect .bc-mail{display:flex}
}
.board-closing .board-connect{margin-top:2.9rem!important}
.board-connect a.bc-addr{border:0!important; background:transparent!important; box-shadow:none!important; padding:.5rem .8rem .5rem .6rem!important}
.board-connect a.bc-addr:hover{background:rgba(255,255,255,.1)!important}
.nb-page{padding-top:1.9rem}
.nbk .gx-res,.nbk .gx-res.on{animation:none!important; opacity:1!important; transform:none!important}
.nb-flip .pv-s{transition:none!important}
.nb-flip.f2{position:absolute; top:0; bottom:0; width:50%; z-index:5; pointer-events:none; transform-style:flat!important; transform:var(--tf,none)!important; will-change:transform}
.nb-flip.f2.on-r{left:50%; transform-origin:left center}
.nb-flip.f2.on-l{left:0; transform-origin:right center}
.nb-flip.f2 .fc{position:absolute!important; inset:0; width:auto!important; min-height:0!important; overflow:hidden; box-shadow:0 12px 30px -14px rgba(0,0,0,.3)}
.nb-flip.f2.on-r .fc{border-radius:0 18px 18px 0!important}
.nb-flip.f2.on-l .fc{border-radius:18px 0 0 18px!important}
.nb-flip.f2 .shade{position:absolute; inset:0; pointer-events:none; opacity:var(--sh,0)}
.nb-flip.f2.on-r .shade{border-radius:0 18px 18px 0; background:linear-gradient(to right,rgba(0,0,0,.4),rgba(0,0,0,.1) 70%)}
.nb-flip.f2.on-l .shade{border-radius:18px 0 0 18px; background:linear-gradient(to left,rgba(0,0,0,.4),rgba(0,0,0,.1) 70%)}
.hero-facts{list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35rem 0; font-size:.84rem; font-weight:500; color:var(--ink-2); letter-spacing:.005em}
.hero-facts li{display:inline-flex; align-items:center; white-space:nowrap}
.hero-facts li + li::before{content:""; width:4px; height:4px; border-radius:50%; background:#333333; opacity:.55; margin:0 .8rem}
@media (max-width:600px){
.hero-facts{font-size:.78rem}
.hero-facts li + li::before{margin:0 .55rem}
}
.hf-logo{width:1.1rem; height:1.1rem; margin-right:.42rem; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:.5rem; font-weight:800; letter-spacing:-.02em; color:#ffffff}
.welcome{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; color:#ffffff; cursor:var(--nt-cur);
    background-color:#1f5b3e; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:32px 32px;
    transition:transform 1.15s cubic-bezier(.76,0,.24,1), border-radius 1.15s cubic-bezier(.76,0,.24,1), opacity .4s ease}
.welcome.out{transform:translateY(-104%); border-radius:0 0 50% 50% / 0 0 14vh 14vh; pointer-events:none}
.wl-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wl-center{display:flex; align-items:center; gap:.9rem; font-family:var(--font)}
.wl-dot{width:.7rem; height:.7rem; border-radius:50%; background:#ffffff; box-shadow:0 0 0 6px rgba(255,255,255,.12); animation:wlPulse 1.4s ease-in-out infinite}
@keyframes wlPulse{50%{box-shadow:0 0 0 10px rgba(255,255,255,.05)}}
.wl-word{display:inline-block; font-size:clamp(2.4rem,7vw,5rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; transition:opacity .17s ease, transform .17s ease}
.wl-word.swap{opacity:0; transform:translateY(-.25em)}
.welcome.settled .wl-word{animation:wlIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes wlIn{from{opacity:0; transform:translateY(.3em)} to{opacity:1; transform:none}}
.wl-foot{position:absolute; left:clamp(1.2rem,4vw,2.6rem); right:clamp(1.2rem,4vw,2.6rem); bottom:clamp(1.4rem,4vw,2.4rem); display:flex; justify-content:space-between; align-items:flex-end;
    font-size:.86rem; font-weight:600; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums}
.wl-count{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:#ffffff; letter-spacing:-.02em}
.wl-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.14)}
.wl-bar i{display:block; height:100%; background:#ffffff; transform:scaleX(0); transform-origin:left center}
html.intro .hero-facts,html.intro .home-head,html.intro .home-sub{opacity:0; transform:translateY(24px)}
.hero-facts,.home-head,.home-sub{transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.home-head{transition-delay:.42s}
.hero-facts{transition-delay:.34s}
.home-sub{transition-delay:.52s}
@media (prefers-reduced-motion: reduce){
.welcome{transition:opacity .4s ease}
.welcome.out{transform:none; border-radius:0; opacity:0}
html.intro .hero-facts,html.intro .home-head,html.intro .home-sub{opacity:1; transform:none}
.wl-dot{animation:none}
}
.welcome{transition:transform 1.15s cubic-bezier(.76,0,.24,1), border-radius 1.15s cubic-bezier(.76,0,.24,1), filter 1.15s cubic-bezier(.76,0,.24,1), opacity .8s ease-in .35s!important}
.welcome.out{filter:blur(18px); opacity:0; will-change:transform,filter,opacity}
@media (prefers-reduced-motion: reduce){
.welcome{transition:opacity .4s ease!important}
.welcome.out{filter:none}
}
.fq-q:focus:not(:focus-visible){outline:none}
.fq-q:focus-visible{outline:2px solid #333333; outline-offset:-3px; border-radius:15px}
.fq-i.open{box-shadow:none!important}
.fq-i{transition:border-color .3s ease!important}
.welcome{transform-origin:50% 50%; transition:transform 1.15s cubic-bezier(.65,0,.2,1), filter 1.15s cubic-bezier(.65,0,.2,1), opacity .9s ease .15s!important}
.welcome.out{transform:scale(1.35)!important; border-radius:0!important; filter:blur(14px)!important; opacity:0!important}
html.intro .sheet > .page{transform:scale(.9); transform-origin:50% 50vh}
html.zoomin .sheet > .page{transform-origin:50% 50vh; transition:transform 1.3s cubic-bezier(.2,.75,.2,1)}
@media (prefers-reduced-motion: reduce){
html.intro .sheet > .page{transform:none}
.welcome.out{transform:none!important; filter:none!important}
}
html:not(.zoomin):not(.intro) .hero-facts,html:not(.zoomin):not(.intro) .home-head,html:not(.zoomin):not(.intro) .home-sub{transition:none!important}
.sr{opacity:0; translate:0 26px; transition:opacity .9s cubic-bezier(.2,.7,.2,1), translate 1s cubic-bezier(.2,.7,.2,1)}
.sr.in{opacity:1; translate:0 0}
#h-work{margin-top:clamp(3.5rem,7vw,5.6rem)!important}
#h-exp,#h-ai,#h-faq{margin-top:clamp(4.5rem,11vw,9rem)!important}
.sheet{padding-bottom:clamp(4rem,9vw,7.2rem)!important}
.view:not(#view-home) .section{padding-top:clamp(4.5rem,11vw,8.8rem)!important}
.hf-ic{width:1.1rem; height:1.1rem; margin-right:.42rem; border-radius:5px; background:#f9f9f9; color:#333333; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.hf-ic svg{width:.74rem; height:.74rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.work-card .cover-scene .banner-stage{align-items:flex-start!important; margin-top:1rem!important}
.nav .hn-plain{gap:5px}
.nudge{position:fixed; z-index:1100; left:0; top:0; max-width:300px; padding:.72rem .95rem; border-radius:14px; background:rgba(0,0,0,.93); color:#ffffff; font-size:.84rem; line-height:1.45; font-weight:500;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.6); pointer-events:none; opacity:0; transform:translateY(6px) scale(.96); transform-origin:top left;
    transition:opacity .25s ease, transform .4s cubic-bezier(.2,.9,.3,1.2)}
.nudge.on{opacity:1; transform:none}
.nudge::before{content:"✦"; color:#d6d6d6; margin-right:.45rem}
@media (prefers-reduced-motion: reduce){
.nudge{transform:none; transition:opacity .25s ease}
}
.fq-i.open .fq-a{cursor:var(--nt-cur)}
.wl-cta{position:absolute; left:50%; top:calc(50% + clamp(3.2rem,6vw,4.6rem)); transform:translate(-50%,10px); display:flex; flex-direction:column; align-items:center; gap:.65rem; opacity:0; pointer-events:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.welcome.ready .wl-cta{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.wl-enter{font:inherit; font-size:1rem; font-weight:700; color:#1f5b3e; background:#ffffff; border:0; border-radius:999px; padding:.78rem 1.5rem; cursor:var(--nt-cur); box-shadow:0 14px 34px -14px rgba(0,0,0,.55); animation:wlBreath 2.2s ease-in-out infinite}
.wl-enter span{margin-left:.35rem; opacity:.6}
.wl-enter:focus-visible{outline:2px solid #ffffff; outline-offset:3px}
@keyframes wlBreath{50%{box-shadow:0 14px 34px -14px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.12)}}
.wl-hint{margin:0!important; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion: reduce){
.wl-enter{animation:none}
}
.dx{position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-top:1.8rem; overflow:hidden; cursor:none; touch-action:pan-y; user-select:none; -webkit-user-select:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.dx-track{display:flex; gap:1.4rem; width:max-content; padding:.6rem 0 1.4rem; will-change:transform}
.dx-card{--sk:0deg; flex:0 0 clamp(260px,26vw,360px); display:flex; flex-direction:column; gap:.9rem; transform:skewX(var(--sk)); transition:transform .5s cubic-bezier(.2,.7,.2,1); outline:none}
.dx-card .pv{position:relative; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:#ffffff; box-shadow:0 22px 44px -32px rgba(0,0,0,.5); transition:box-shadow .35s ease}
.dx-card:hover .pv,.dx-card:focus-visible .pv{box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.dx-card:focus-visible .pv{outline:2px solid #333333; outline-offset:3px}
.dx-card .pv-bar{display:none}
.dx-card .pv-stage{height:clamp(170px,17vw,230px)!important; pointer-events:none}
.dx-card .pv-stage:has(.pv-doc){height:clamp(170px,17vw,230px)!important}
.dx-card .pv-stage:has(.pv-doc) .pv-s{position:absolute}
.dx-card .pv-doc{overflow:hidden!important}
.dx-card .pv-s img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dx-card:hover .pv-s.on img{transform:scale(1.03)}
.dx-view{position:absolute; right:.6rem; top:.6rem; z-index:3; font:inherit; font-size:.74rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.92); border:0; border-radius:999px; padding:.3rem .7rem; box-shadow:0 4px 14px -6px rgba(0,0,0,.3); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; pointer-events:none}
.dx-card:hover .dx-view,.dx-card:focus-visible .dx-view{opacity:1; transform:none}
.dx-meta{padding:0 .2rem; text-align:left}
.dx-num{font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.04em}
.dx-meta h3{margin:.2rem 0 .3rem; font-size:1.08rem; letter-spacing:-.01em; color:var(--ink)}
.dx-meta p{margin:0!important; font-size:.86rem; line-height:1.45; color:var(--ink-2); max-width:34ch!important}
.dx-tools{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.55rem}
.dx-tools span{font-size:.7rem; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:.12rem .5rem}
.dx-cursor{position:fixed; left:0; top:0; z-index:170; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1)}
.dx-cursor span{display:block; font-size:.78rem; font-weight:700; color:#ffffff; background:#333333; border-radius:999px; padding:.55rem .95rem; box-shadow:0 10px 26px -10px rgba(51,51,51,.8); white-space:nowrap}
.dx-cursor.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.dx.dragging{cursor:none}
.dx.dragging .dx-card{transition:none}
.dx-hint{margin:.4rem 0 0!important; text-align:center; font-size:.8rem; color:var(--muted); letter-spacing:.02em}
@media (hover:none){
.dx{cursor:auto}
.dx-cursor{display:none}
.dx-view{opacity:1; transform:none}
}
.dx-card .m-app{grid-template-columns:1fr}
.dx-card .m-app aside{display:none}
.dx-card .m-step{grid-template-columns:3.9rem 1fr auto; gap:.45rem; font-size:.72rem; padding:.5rem .6rem}
:root{--ssk:0deg}
.work-card{transform:skewY(var(--ssk)); transition:none!important}
.fq-i{transform:skewY(var(--ssk))}
.csh-stage{transform:skewY(var(--ssk))}
.ssk{transform:skewY(var(--ssk))}
.dx-card{transform:skewX(var(--sk)) skewY(var(--ssk))!important}
.xb .xb-card:nth-child(1){transform:rotate(-1deg) skewY(var(--ssk))!important}
.xb .xb-card:nth-child(2){transform:rotate(.6deg) skewY(var(--ssk))!important}
.xb .xb-card:nth-child(3){transform:rotate(-.5deg) skewY(var(--ssk))!important}
.cv{position:relative; height:clamp(460px,70vh,680px); margin-top:1.6rem; border-radius:28px; overflow:hidden; background:#f2f2f2; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
    cursor:none; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none}
.cv:focus-visible{box-shadow:inset 0 0 0 2px #333333}
.cv-plane{position:absolute; inset:0}
.cv-tile{position:absolute; left:0; top:0; will-change:transform; display:flex; flex-direction:column; gap:.45rem; outline:none}
.cv-vis{position:relative; display:block; border-radius:10px; overflow:hidden; background:#ffffff; box-shadow:0 18px 40px -24px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.04); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.cv-tile:hover .cv-vis,.cv-tile:focus-visible .cv-vis{transform:scale(1.03); box-shadow:0 28px 54px -24px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.04)}
.cv-tile:focus-visible .cv-vis{outline:2px solid #333333; outline-offset:3px}
.cv-vis img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; pointer-events:none}
.cv-mock{position:absolute; left:0; top:0; width:440px; transform-origin:top left; pointer-events:none}
.cv-mock .pv-s{position:relative!important; inset:auto!important; opacity:1!important; transform:none!important; display:block!important}
.cv-mock .pv-s:not(.on){display:none!important}
.cv-cap{font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:.01em; white-space:nowrap}
.cv-chip{position:absolute; left:1rem; top:1rem; z-index:2; font-size:.74rem; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:999px; padding:.4rem .75rem; box-shadow:0 6px 16px -10px rgba(0,0,0,.3); pointer-events:none}
@media (hover:none){
.cv{cursor:auto}
}
.cv{box-shadow:none!important; background-color:#f2f2f2; background-image:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.4px); background-size:22px 22px}
.cv:focus-visible{box-shadow:0 0 0 2px #333333!important}
.cv-plane{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-composite:intersect}
.cv-vis{border-radius:14px!important; box-shadow:none!important}
.cv-c0{background:linear-gradient(140deg,#ffe6d6,#ffd3e2)}
.cv-c1{background:linear-gradient(140deg,#f4f4f4,#d9e6ff)}
.cv-c2{background:linear-gradient(140deg,#dcf5ea,#cdeee3)}
.cv-c3{background:linear-gradient(140deg,#dde8ff,#f3f3f3)}
.cv-c4{background:linear-gradient(140deg,#fff2c6,#ffdfc0)}
.cv-in{position:absolute; left:11%; top:13%; width:100%; height:100%; border-radius:9px; overflow:hidden; background:#ffffff;
    box-shadow:0 16px 32px -16px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.04); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cv-tall .cv-in{left:12%; top:9%}
.cv-in img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block}
.cv-tile:hover .cv-vis,.cv-tile:focus-visible .cv-vis{transform:scale(1.025)}
.cv-tile:hover .cv-in{transform:translate(-5px,-5px)}
.cv-cap{margin-top:.1rem}
.cv-chip{left:50%!important; top:auto!important; bottom:1rem; transform:translateX(-50%); font-size:.72rem!important; color:var(--muted)!important; padding:.35rem .75rem!important; background:rgba(255,255,255,.82)!important}
.cv{background-color:#f2f2f2!important;
    background-image:linear-gradient(rgba(0,0,0,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.09) 1px,transparent 1px),
                     linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)!important;
    background-size:120px 120px,120px 120px,24px 24px,24px 24px!important}
.cv-vis{box-shadow:0 24px 44px -26px rgba(0,0,0,.5),0 3px 8px -3px rgba(0,0,0,.16)!important}
.ex-card{width:520px; height:290px; display:grid; grid-template-columns:46% 54%; border-radius:18px; overflow:hidden; background:#ffffff; text-align:left;
    box-shadow:0 26px 52px -30px rgba(0,0,0,.55),0 3px 10px -4px rgba(0,0,0,.14); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease}
.cv-tile:hover .ex-card,.cv-tile:focus-visible .ex-card{transform:translateY(-4px); box-shadow:0 34px 60px -30px rgba(0,0,0,.6),0 3px 10px -4px rgba(0,0,0,.14)}
.cv-tile:focus-visible .ex-card{outline:2px solid #333333; outline-offset:3px}
.ex-l{display:flex; flex-direction:column; padding:20px 20px 18px}
.ex-tag{align-self:flex-start; font-size:.66rem; font-weight:600; color:#2c5bb5; background:#e6effd; border-radius:6px; padding:.2rem .5rem}
.ex-h{margin:.7rem 0 .5rem; font-family:ui-serif,"New York","Iowan Old Style",Georgia,serif; font-size:1.36rem; font-weight:600; line-height:1.08; letter-spacing:-.015em; color:#141414}
.ex-d{margin:0!important; font-size:.76rem; line-height:1.45; color:#3d3d3d; max-width:none!important}
.ex-cta{margin-top:auto; display:block; text-align:center; font-size:.76rem; font-weight:600; color:#ffffff; background:#141414; border-radius:9px; padding:.62rem .8rem}
.cv-tile:hover .ex-cta{background:#2a2a2a}
.ex-r{position:relative; overflow:hidden}
.ex-r0{background:linear-gradient(160deg,#ffdcb8,#ffbd8a)}
.ex-r1{background:linear-gradient(160deg,#f0f0f0,#dadada)}
.ex-r2{background:linear-gradient(160deg,#d3f3e3,#98dfbf)}
.ex-r3{background:linear-gradient(160deg,#d6e5ff,#a8c4ff)}
.ex-r4{background:linear-gradient(160deg,#ffeebb,#ffcf85)}
.ex-win{position:absolute; left:14%; top:-10%; width:92%; height:74%; border-radius:14px; overflow:hidden; background:#ffffff; border:3px solid #1b1b1d; box-shadow:0 18px 36px -18px rgba(0,0,0,.45)}
.ex-win img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block}
.ex-win .cv-mock{top:14px}
.ex-note{position:absolute; left:8%; right:-12%; top:52%; display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border-radius:14px; background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.ex-ic{flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:.55rem; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.9rem; color:#ffffff}
.ex-ic0{background:#e2703a}
.ex-ic1{background:#333333}
.ex-ic2{background:#12a06b}
.ex-ic3{background:#2f6fe4}
.ex-ic4{background:#e39a1b}
.ex-note span{min-width:0; display:flex; flex-direction:column}
.ex-note b{font-size:.74rem; color:#141414; white-space:nowrap}
.ex-note em{font-style:normal; font-size:.68rem; color:#6b6b6b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ex-card{width:420px!important; height:236px!important; border-radius:16px}
.ex-l{padding:18px 16px 16px 18px}
.ex-tag{font-size:.6rem; padding:.18rem .45rem}
.ex-h{margin:.6rem 0 .45rem; font-size:1.1rem; line-height:1.12}
.ex-d{font-size:.68rem; line-height:1.55; color:#4a4a4a}
.ex-win{border-width:2.5px; border-radius:12px}
.ex-note{padding:.42rem .55rem; gap:.45rem; border-radius:12px; top:54%}
.ex-ic{width:1.45rem; height:1.45rem; font-size:.7rem; border-radius:.42rem}
.ex-note b{font-size:.64rem}
.ex-note em{font-size:.6rem}
.csh > .eyebrow,.csh > h1,.csh > .deck{text-align:center; margin-left:auto!important; margin-right:auto!important}
.csh > h1{max-width:25ch!important; text-wrap:balance}
.csh > .deck{max-width:58ch!important; text-wrap:pretty}
.view .section > .text{max-width:min(100%,960px)!important}
.view .section > .text > h2{max-width:none!important; font-size:clamp(1.9rem,3.3vw,2.65rem); line-height:1.08; text-wrap:balance}
.view .section > .text > .lede{max-width:900px!important; font-size:clamp(1.1rem,1.75vw,1.38rem); line-height:1.5}
.view .section > .text > p:not(.lede){max-width:790px!important; font-size:clamp(1.02rem,1.5vw,1.19rem); line-height:1.65}
.hero-focus{display:block; margin-top:.9rem; font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.ship-tag{display:inline-flex; align-items:center; gap:.35em; margin-left:.55em; padding:.14em .55em .14em .45em; border-radius:999px; font-size:.86em; font-weight:600; letter-spacing:.03em; text-transform:none;
    background:rgba(255,255,255,.2); color:inherit; vertical-align:middle}
.ship-tag::before{content:""; width:.5em; height:.5em; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25)}
.csh .ship-tag{background:#e6f6ee; color:#0f6b3a}
.xb-arc{margin-top:2rem; padding:1.3rem 1.4rem 1.2rem; border-radius:16px; background:rgba(255,255,255,.07); color:#ffffff; text-align:left}
.xb-arc-t{margin:0 0 1rem!important; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.xb-arc ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; position:relative}
.xb-arc ol::before{content:""; position:absolute; left:.3rem; right:.3rem; top:.34rem; height:2px; background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.55))}
.xb-arc li{position:relative; padding-top:1.25rem; display:flex; flex-direction:column; gap:.2rem}
.xb-arc li::before{content:""; position:absolute; left:0; top:0; width:.7rem; height:.7rem; border-radius:50%; background:#1f5b3e; border:2px solid rgba(255,255,255,.75)}
.xb-arc li:last-child::before{background:#d6d6d6; border-color:#ffffff}
.xb-arc b{font-size:1rem; font-weight:800; letter-spacing:-.01em}
.xb-arc span{font-size:.8rem; font-weight:600; color:#ffffff}
.xb-arc em{font-style:normal; font-size:.76rem; line-height:1.45; color:rgba(255,255,255,.72)}
@media (max-width:760px){
.xb-arc ol{grid-template-columns:1fr 1fr; row-gap:1.4rem}
.xb-arc ol::before{display:none}
}
.work-card .ship-tag{margin:.45rem 0 0; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#ffffff; background:rgba(255,255,255,.18); padding:.22rem .6rem .22rem .5rem; align-self:center}
.ev{margin:clamp(2.2rem,4.5vw,3.2rem) 0 0; padding:1.4rem 1.5rem 1.5rem; border-radius:20px; background:#f3f3f3; text-align:left}
.ev-t{margin:0 0 1rem!important; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ev-g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem 1.5rem}
.ev-i b{display:block; margin-bottom:.35rem; font-size:.88rem; font-weight:700; color:var(--ink)}
.ev-i p{margin:0!important; max-width:none!important; font-size:.84rem; line-height:1.55; color:var(--ink-2)}
.ev-i a{color:#333333; font-weight:600; text-decoration:none!important; white-space:nowrap}
.ev-i a:hover{color:#333333}
@media (max-width:960px){
.ev-g{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.ev-g{grid-template-columns:1fr}
}


/* ===== V2 — Figma "MacBook Air - 3" (402:45): Inter, #fcfcfc, a faint blueprint grid ===== */
html.v2{
  --g-ink:#333333; --g-muted:#828282; --g-card:#f2f2f2; --g-card-line:#e0e0e0; --g-bg:#fcfcfc;
  --g-line:#cfcfcf;                         /* black at 18% over the page, flattened so crossings don't darken */
  --g-w:1010px;
  --g-r:6px;                                /* card corners: kept small, closer to the grid's square pixels */
  --g-font:"Inter V2","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html.v2, html.v2 body{background:var(--g-bg)}
html.v2 .sheet{background:var(--g-bg); transform:none!important; border-radius:0!important; box-shadow:none!important; padding-bottom:0!important; overflow-x:clip}
html.v2 .sheet::before, html.v2 .sheet::after{display:none}
html.v2 .page > .nav{display:none}          /* V1's nav stays in the page (its scripts use it) but V2 shows its own header */
html.v2 .board-closing{display:none}
html.v2 #view-home{animation:none}
html.v2 #view-home.active{display:block!important; padding:0!important; margin:0!important; gap:0!important}

/* ---------- bands: full-width rows, each holding the 1010px column with its two guide lines ---------- */
html.v2 .g-band{position:relative; width:100vw; margin-left:calc(50% - 50vw); font-family:var(--g-font); color:var(--g-ink);
  font-size:16px; line-height:1.21; -webkit-font-smoothing:antialiased; font-optical-sizing:auto; text-align:left}
html.v2 .g-band.g-line{border-bottom:1px solid var(--g-line)}
html.v2 .g-c{position:relative; width:min(var(--g-w), calc(100% - 64px)); margin:0 auto}
html.v2 .g-c::before, html.v2 .g-c::after{content:""; position:absolute; top:0; bottom:-1px; width:1px; background:var(--g-line); pointer-events:none; z-index:0}
html.v2 .g-c::before{left:-.5px}
html.v2 .g-c::after{right:-.5px}
html.v2 .g-dot{position:absolute; z-index:0; width:6px; height:6px; border-radius:50%; background:var(--g-line); pointer-events:none}
html.v2 .g-dot.l{left:-3px} html.v2 .g-dot.r{right:-3px}
html.v2 .g-dot.b{bottom:-3.5px} html.v2 .g-dot.t{top:-3.5px}
html.v2 .g-band p, html.v2 .g-band h1, html.v2 .g-band h2, html.v2 .g-band h3, html.v2 .g-band ul, html.v2 .g-band li{margin:0; padding:0; max-width:none; font-family:inherit; color:inherit; font-variation-settings:normal}
html.v2 .g-band b{font-weight:700; display:inline; color:inherit; margin:0}
html.v2 .g-band img{max-width:none}

/* ---------- header ---------- */
/* scaled down from the frame (65px avatar, 20/14/16px type), which read too big in the browser */
html.v2 .g-head .g-c{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 32px; min-height:72px}
html.v2 .g-me{display:flex; align-items:center; gap:10px; cursor:var(--nt-cur); color:inherit; text-decoration:none; min-width:0}
html.v2 .g-av{position:relative; z-index:1; flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fe0141}
html.v2 .g-av img{display:block; width:100%; height:100%}
html.v2 .g-me-t{display:flex; flex-direction:column; gap:3px; min-width:0}
html.v2 .g-band .g-name{font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--g-ink); white-space:nowrap}
html.v2 .g-band .g-role{font-size:13px; font-weight:400; letter-spacing:-.01em; color:var(--g-muted); white-space:nowrap}
html.v2 .g-nav{display:flex; align-items:center; gap:32px}
html.v2 .g-nav a{display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--g-ink); text-decoration:none; white-space:nowrap; cursor:var(--nt-cur)}
html.v2 .g-nav a:hover{color:#000}
html.v2 .g-nav svg{display:block; width:14px; height:14px; flex:none}

/* ---------- hero ---------- */
html.v2 .g-hero .g-c{min-height:630px; padding:191px 32px 0}
html.v2 .g-hero-t{position:relative; z-index:2}
html.v2 .g-band .g-badge{display:inline-flex; align-items:center; padding:10px 16px; border-radius:34px; background:rgba(198,198,198,.2); border:1px solid rgba(139,139,139,.4);
  font-size:16px; font-weight:400; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-band .g-h1{margin-top:20px; font-size:46px; line-height:1.21; font-weight:700; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-h1 .ln{display:block; white-space:nowrap}
html.v2 .g-h1 .lt{font-weight:300}
html.v2 .g-band .g-facts{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px; list-style:none; font-size:14px; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-facts li{display:flex; align-items:center; gap:12px; margin:0}
html.v2 .g-facts li + li::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--g-ink)}
html.v2 .g-art{position:absolute; z-index:1; right:0; bottom:0; width:465px; height:331px; pointer-events:none}
html.v2 .g-art img{display:block; width:100%; height:100%}
html.v2 .g-stk{position:absolute; z-index:1; display:block; pointer-events:none}
html.v2 .g-stk.a{left:16px; top:6px; width:66px; height:105px}
html.v2 .g-stk.b{left:32px; bottom:24px; width:20px; height:74px}
html.v2 .g-stk.c{right:52px; top:154px; width:19px; height:37px}

/* ---------- selected work ---------- */
html.v2 .g-work .g-c{padding:32px 0 0}
html.v2 .g-band .g-wt{position:relative; z-index:1; display:flex; align-items:center; gap:20px; padding:0 32px; font-size:24px; font-weight:300; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-wt b{font-weight:600}
html.v2 .g-wt img{display:block; flex:none; width:36px; height:30px}
html.v2 .g-heart{position:absolute; z-index:1; width:35px; height:50px; pointer-events:none}
html.v2 .g-heart.a{right:51px; top:6px} html.v2 .g-heart.b{right:122px; top:42px} html.v2 .g-heart.c{right:16px; top:28px}
/* projects: two per row; each card holds its words on top and its screens below */
html.v2 .g-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:8px; padding:32px}
html.v2 .g-proj{position:relative; container:proj / inline-size; display:flex; flex-direction:column; min-width:0; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line); overflow:hidden; cursor:var(--nt-cur); color:inherit; text-decoration:none; outline:none; transition:border-color .2s ease}
html.v2 .g-proj:hover{border-color:#d2d2d2}
html.v2 .g-proj:focus-visible{outline:2px solid var(--g-ink); outline-offset:3px}
html.v2 .g-txt{position:relative; z-index:2; padding:24px 60px 6px 24px}
html.v2 .g-open{position:absolute; z-index:3; top:20px; right:20px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--g-card-line); transition:transform .25s ease}
html.v2 .g-open svg{display:block; width:14px; height:14px}
html.v2 .g-proj:hover .g-open{transform:translateX(3px)}
html.v2 .g-shot{position:relative; margin-top:auto; aspect-ratio:560 / 340; container-type:inline-size; overflow:hidden; pointer-events:none}
/* the screens are drawn in the Figma frame's own pixels: --u is one design px */
html.v2 .g-devs{--u:calc(100cqw / 560); position:absolute; left:calc(55.27 * var(--u)); top:calc(26 * var(--u)); display:flex; align-items:flex-end; gap:calc(22 * var(--u)); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html.v2 .g-devs.web{left:calc(30 * var(--u))}
html.v2 .g-proj:hover .g-devs{transform:translateY(calc(-10 * var(--u)))}
html.v2 .g-ph{position:relative; flex:none; box-sizing:border-box; width:calc(213.73 * var(--u)); height:calc(441.51 * var(--u)); border-radius:calc(33.61 * var(--u));
  background:#090a23; border:calc(3.01 * var(--u)) solid #292826; box-shadow:0 0 0 .5px rgba(255,255,255,.7)}
html.v2 .g-ph.n2{height:calc(440.47 * var(--u))}
html.v2 .g-scr{position:absolute; left:calc(6.02 * var(--u)); top:calc(6.02 * var(--u)); width:calc(195.67 * var(--u)); height:calc(423.45 * var(--u)); border-radius:calc(24.58 * var(--u)); overflow:hidden; background:#fff}
html.v2 .g-scr img{position:static; display:block; width:100%; height:100%; object-fit:cover; object-position:top; max-width:none}
html.v2 .g-pill{position:absolute; top:3.3%; right:35.21%; bottom:92.61%; left:34.98%; border-radius:999px; background:#000}
html.v2 .g-pill::after{content:""; position:absolute; top:28%; bottom:28%; right:9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%, #2b3350 0 35%, #10131f 60%)}
html.v2 .g-ph.baked .g-pill{display:none}       /* the screen already shows its own status bar and island */
html.v2 .g-btn{position:absolute; width:calc(1.505 * var(--u)); border-radius:1px; background:#8f8f8a}
html.v2 .g-btn.k1{left:calc(-4.52 * var(--u)); top:calc(83.28 * var(--u)); height:calc(16.05 * var(--u))}
html.v2 .g-btn.k2{left:calc(-4.52 * var(--u)); top:calc(115.39 * var(--u)); height:calc(32.61 * var(--u))}
html.v2 .g-btn.k3{left:calc(-4.52 * var(--u)); top:calc(157.54 * var(--u)); height:calc(32.61 * var(--u))}
html.v2 .g-btn.k4{left:calc(210.72 * var(--u)); top:calc(137.97 * var(--u)); height:calc(52.18 * var(--u))}
html.v2 .g-sb{position:absolute; left:0; right:0; top:0; height:calc(26 * var(--u)); display:flex; align-items:center; justify-content:space-between; padding:0 calc(14 * var(--u)) 0 calc(19 * var(--u)); z-index:1}
html.v2 .g-sb span{font:600 calc(8.6 * var(--u))/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter V2",system-ui,sans-serif; color:#0e0e0e; letter-spacing:-.01em}
html.v2 .g-sb svg{display:block; width:calc(38.83 * var(--u)); height:calc(6.52 * var(--u))}
/* a website in a browser window (used where the work is a site, not an app) */
html.v2 .g-web{position:relative; flex:none; align-self:flex-start; width:calc(470 * var(--u)); margin-right:calc(-206 * var(--u)); border-radius:calc(10 * var(--u)); overflow:hidden; background:#fff; border:1px solid var(--g-card-line); box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,.25)}
html.v2 .g-web-bar{display:flex; align-items:center; gap:calc(5 * var(--u)); height:calc(22 * var(--u)); padding:0 calc(10 * var(--u)); background:#f5f5f5; border-bottom:1px solid #ececec}
html.v2 .g-web-bar i{width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:#d9d9d9}
html.v2 .g-web-bar span{margin-left:calc(10 * var(--u)); font:500 calc(8 * var(--u))/1 var(--g-font); color:var(--g-muted); letter-spacing:0}
html.v2 .g-web img{display:block; width:100%; height:auto; max-width:none}
html.v2 .g-devs.web .g-ph{position:relative; z-index:2; box-shadow:0 0 0 .5px rgba(255,255,255,.7), calc(-10 * var(--u)) calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.18)}

/* the words inside each card */
html.v2 .g-band .g-k{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; min-height:24px; font-size:13px; letter-spacing:-.03em; color:var(--g-muted)}
html.v2 .g-band .g-tag{display:inline-flex; align-items:center; padding:3px 9px; border-radius:34px; background:rgba(198,198,198,.2); border:1px solid rgba(139,139,139,.4); font-size:12px; letter-spacing:-.02em; color:var(--g-ink)}
html.v2 .g-band .g-t{margin-top:12px; font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-band .g-d{margin-top:8px; font-size:15px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .g-band .g-m{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; list-style:none; font-size:13px; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-m li{display:flex; align-items:center; gap:10px; margin:0}
html.v2 .g-m li + li::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--g-ink)}
html.v2 .g-m b{font-weight:600}

/* ---------- closing (V1's words, V2's look): every page ends on a box in the profile picture's red ---------- */
/* only the column between the guide lines is red; the sides stay page colour. White words throughout:
   on this red, full white is what keeps even the small text readable (4.5:1) */
html.v2 .g-end{--e-bg:#ec0131; --e-ink:#ffffff; --e-muted:#ffffff; border-top:1px solid var(--g-line)}
/* the dark alternative: add class="dark" to the footer (and re-tone the pixels from #1a1a1a in the build) */
html.v2 .g-end.dark{--e-bg:#1a1a1a; --e-ink:#fcfcfc; --e-muted:rgba(252,252,252,.62)}
html.v2 .g-end .g-c{padding:96px 32px 104px; background:var(--e-bg)}
html.v2 .g-end .g-c::before, html.v2 .g-end .g-c::after{display:none}   /* the box's own edges carry the guide lines */
/* the home page's paper pixels, drifting across the free side of the box */
html.v2 .g-px{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
html.v2 .g-px img{position:absolute; display:block; max-width:none}
html.v2 .g-px .p1{width:52px; height:83px; right:40px; top:30px}      /* the pair, top right */
html.v2 .g-px .p3{width:15px; height:29px; right:150px; bottom:52px}   /* the loose one, lower down */
html.v2 .g-band .g-end-h{position:relative; z-index:1; font-size:46px; line-height:1.21; font-weight:700; letter-spacing:-.03em; color:var(--e-ink)}
html.v2 .g-end-h .lt{font-weight:300}
html.v2 .g-band .g-end-p{position:relative; z-index:1; margin-top:16px; max-width:520px; font-size:16px; line-height:1.5; letter-spacing:-.01em; color:var(--e-muted)}
html.v2 .g-end-l{position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 46px; margin-top:32px}
html.v2 .g-end-l a{display:inline-flex; align-items:center; gap:4px; font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--e-ink); text-decoration:none; transition:opacity .2s ease}
html.v2 .g-end-l a:hover{opacity:.7}
html.v2 .g-end-l svg{display:block; width:16px; height:16px}
html.v2 .g-end-l svg path{stroke:currentColor}
html.v2 .g-end a:focus-visible{outline:2px solid var(--e-ink); outline-offset:3px; border-radius:2px}

/* ---------- narrower screens ---------- */
@media (max-width:900px){
  html.v2 .g-hero .g-c{min-height:0; padding:120px 32px 0}
  html.v2 .g-art{position:relative; right:auto; bottom:auto; width:min(465px, 100%); height:auto; aspect-ratio:465 / 331; margin:40px 0 0 auto}
  html.v2 .g-stk.b{display:none}
  html.v2 .g-grid{margin-top:8px}
}
@media (max-width:720px){
  html.v2 .g-c{width:calc(100% - 32px)}
  html.v2 .g-head .g-c{padding:14px 12px; min-height:0; gap:12px}
  html.v2 .g-av{width:44px; height:44px}
  html.v2 .g-me{gap:10px}
  html.v2 .g-me-t{gap:4px}
  html.v2 .g-band .g-name{font-size:16px}
  html.v2 .g-band .g-role{font-size:12px}
  html.v2 .g-nav{gap:14px}
  html.v2 .g-nav a{font-size:14px}
  html.v2 .g-nav .g-n-work{display:none}
  html.v2 .g-hero .g-c{padding:72px 16px 0}
  html.v2 .g-band .g-badge{padding:8px 12px; font-size:13px; line-height:1.35}
  html.v2 .g-band .g-h1{font-size:clamp(30px, 9.4vw, 40px)}
  html.v2 .g-band .g-facts{gap:8px; font-size:13px}
  html.v2 .g-facts li{gap:8px}
  html.v2 .g-art{margin:28px auto 0}
  html.v2 .g-stk.a{left:8px; top:8px; width:44px; height:70px}
  html.v2 .g-stk.c{right:14px; top:30px}
  html.v2 .g-work .g-c{padding-top:24px}
  html.v2 .g-band .g-wt{padding:0 16px; gap:12px; font-size:20px}
  html.v2 .g-wt img{width:30px; height:25px}
  html.v2 .g-heart{width:24px; height:34px}
  html.v2 .g-heart.a{right:16px; top:-4px} html.v2 .g-heart.b{display:none} html.v2 .g-heart.c{right:48px; top:20px}
  html.v2 .g-grid{grid-template-columns:1fr; gap:16px; padding:24px 16px; margin-top:4px}
  html.v2 .g-txt{padding:20px 56px 4px 20px}
  html.v2 .g-open{top:16px; right:16px}
  html.v2 .g-end .g-c{padding:64px 16px 104px}
  html.v2 .g-px .p1{width:40px; height:64px; right:16px; top:auto; bottom:18px}
  html.v2 .g-px .p3{width:12px; height:23px; right:76px; bottom:34px}
  html.v2 .g-band .g-end-h{font-size:clamp(30px, 9.4vw, 40px)}
  html.v2 .g-end-l{gap:12px 28px}
}
@media (prefers-reduced-motion:reduce){
  html.v2 .g-devs, html.v2 .g-open, html.v2 .g-proj{transition:none}
}
html.v2 .g-dot.w{top:-3.5px}            /* on the line between the hero and the work, like every other crossing */
html.v2 .edge-fix-b, html.v2 .edge-fix-t, html.v2 .edge{display:none!important}   /* V1's soft blur along the screen edges */
html.v2 footer.g-end{display:block; margin-top:0; padding:0; gap:0; justify-content:normal; flex-wrap:nowrap; font-size:16px; color:var(--e-ink)}
html.v2 .g-badge .nw{white-space:nowrap}
@media (max-width:720px){
  html.v2 .g-me{flex:1}
  html.v2 .g-band .g-name, html.v2 .g-band .g-role{white-space:normal}
  html.v2 .g-nav{gap:12px; flex:none}
  html.v2 .g-nav a{font-size:13px}
  html.v2 .g-nav svg{display:none}
}
@media (max-width:480px){
  html.v2 .g-facts li:first-child{flex-basis:100%}
  html.v2 .g-facts li:nth-child(2)::before{display:none}
}
@media (max-width:360px){ html.v2 .g-band .g-role{display:none} }
html.v2 .g-scr.with-sb img{height:calc(100% - 26 * var(--u)); margin-top:calc(26 * var(--u))}
@container proj (max-width:360px){   /* narrow cards: one figure per line, no separator dots */
  html.v2 .g-band .g-m{flex-direction:column; align-items:flex-start; gap:4px}
  html.v2 .g-m li + li::before{display:none}
}

/* ---------- tactile dark buttons (after the pricing-card reference): header Resume + the closing email ---------- */
/* tactile dark button: a soft top light, a darker lip underneath, a small cast shadow */
html.v2 .g-cta, html.v2 .g-nav .g-cta, html.v2 .g-end-l .g-cta{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:8px;
  background:linear-gradient(180deg, #2a2a2a, #3d3d3d); border:1px solid #1a1a1a; color:#fff;
  font:500 14px/1 var(--g-font); letter-spacing:-.01em; text-decoration:none; opacity:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1.5px 0 #121212, 0 3px 6px -1px rgba(0,0,0,.16), 0 8px 16px -8px rgba(0,0,0,.24);
  transition:background .2s ease, transform .12s ease, box-shadow .12s ease}
html.v2 .g-cta:hover, html.v2 .g-nav .g-cta:hover, html.v2 .g-end-l .g-cta:hover{background:linear-gradient(180deg, #333, #484848); color:#fff; opacity:1}
html.v2 .g-cta:active{transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 .5px 0 #121212, 0 1px 3px rgba(0,0,0,.2)}
html.v2 .g-cta svg{display:block; width:14px; height:14px; flex:none}
html.v2 .g-cta svg path{stroke:#fff}
html.v2 .g-cta:focus-visible{outline:2px solid #1a1a1a; outline-offset:3px}
/* on the red box: a bigger button, its shadow tinted by the red */
html.v2 .g-end-l .g-cta{height:44px; padding:0 18px; font-size:16px; gap:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1.5px 0 #121212, 0 4px 8px -2px rgba(70,0,12,.35), 0 12px 22px -10px rgba(70,0,12,.45)}
html.v2 .g-end-l .g-cta svg{width:16px; height:16px}
html.v2 .g-end .g-cta:focus-visible{outline-color:#fff}

@media (max-width:720px){
  html.v2 .g-nav .g-cta{height:30px; padding:0 10px; font-size:13px; border-radius:7px}
  html.v2 .g-nav .g-cta svg{display:none}                          /* as with the other header links on a phone */
  html.v2 .g-end-l .g-cta{height:42px; padding:0 16px; font-size:15px}
}
@media (max-width:440px){      /* phones (with About in the header): a little tighter, so the name stays on one line beside the button */
  html.v2 .g-head .g-c{gap:8px}
  html.v2 .g-me{gap:8px}
  html.v2 .g-av{width:40px; height:40px}
  html.v2 .g-nav{gap:8px}
  html.v2 .g-nav .g-cta{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  html.v2 .g-cta{transition:none}
}

/* ---------- fun experiments (V1's canvas, after the work): same column and heading as the work ---------- */
html.v2 .g-exp{border-top:1px solid var(--g-line); margin-top:0!important}
html.v2 .g-exp .g-c{padding:56px 0 64px}
html.v2 .g-band .g-exp-p{position:relative; z-index:1; margin-top:12px; padding:0 32px; max-width:640px; font-size:15px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .g-exp .cv{position:relative; z-index:1; margin:28px 32px 0; border-radius:var(--g-r); background-color:#f2f2f2; box-shadow:inset 0 0 0 1px var(--g-card-line)}
@media (max-width:720px){
  html.v2 .g-exp .g-c{padding:40px 0 48px}
  html.v2 .g-band .g-exp-p{padding:0 16px; font-size:14px}
  html.v2 .g-exp .cv{margin:20px 16px 0}
}
/* (the section keeps V1's .gx hook for its scripts; V1's .gx type and spacing don't apply here) */
html.v2 section.g-exp.gx{margin-top:0!important; text-align:left}
html.v2 section.g-exp.gx h2.g-wt{margin:0; font-size:24px; line-height:1.21; color:var(--g-ink); max-width:none!important}
@media (max-width:720px){ html.v2 section.g-exp.gx h2.g-wt{font-size:20px} }
html.v2 section.g-exp.gx p.g-exp-p{margin:12px 0 0!important; max-width:640px}

/* ---------- the experiment cards in V2's language: grey cards on a thin line, small corners, Inter, no colour washes ---------- */
html.v2 .g-exp .cv{background-color:var(--g-bg)!important; border-radius:var(--g-r); box-shadow:inset 0 0 0 1px var(--g-card-line)!important;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px)!important}
html.v2 .g-exp .cv-plane{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
html.v2 .g-exp .ex-card{border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line); box-shadow:none; font-family:var(--g-font); transition:border-color .2s ease}
html.v2 .g-exp .cv-tile:hover .ex-card, html.v2 .g-exp .cv-tile:focus-visible .ex-card{transform:none; box-shadow:none; border-color:#d2d2d2}
html.v2 .g-exp .cv-tile:focus-visible .ex-card{outline:2px solid var(--g-ink); outline-offset:3px}
html.v2 .g-exp .ex-l{padding:18px 16px 16px 18px}
html.v2 .g-exp .ex-tag{padding:3px 9px; border-radius:34px; background:rgba(198,198,198,.2); border:1px solid rgba(139,139,139,.4);
  font:400 11px/1.2 var(--g-font); letter-spacing:-.02em; color:var(--g-ink)}
html.v2 .g-exp .ex-h{margin:12px 0 6px; font:600 17px/1.25 var(--g-font); letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .g-exp .ex-d{font:400 12px/1.5 var(--g-font); letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .g-exp .ex-r{background:#e6e6e6; border-left:1px solid var(--g-card-line)}
html.v2 .g-exp .ex-win{border:2px solid #292826; border-radius:8px; box-shadow:none}
html.v2 .g-exp .ex-note{border-radius:var(--g-r); background:#fff; border:1px solid var(--g-card-line); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
html.v2 .g-exp .ex-ic{background:var(--g-ink); border-radius:4px}
html.v2 .g-exp .ex-note b{font-family:var(--g-font); font-weight:600; color:var(--g-ink); letter-spacing:-.01em}
html.v2 .g-exp .ex-note em{font-family:var(--g-font); color:var(--g-muted)}
html.v2 .g-exp .cv-chip{font-family:var(--g-font); font-weight:400!important; letter-spacing:-.01em; color:var(--g-ink)!important; background:#fff!important;
  border:1px solid var(--g-card-line); border-radius:34px; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}

/* the email button copies the address (no mail app opens) and says so for a moment */
html.v2 button.g-cta{cursor:var(--nt-cur); margin:0; -webkit-appearance:none; appearance:none}
html.v2 .g-cta .g-cp-idle{display:inline-flex; align-items:center; gap:9px}
html.v2 .g-cta .g-cp-done{display:none}
html.v2 .g-cta.copied .g-cp-idle{display:none}
html.v2 .g-cta.copied .g-cp-done{display:inline-flex; align-items:center; gap:9px}
/* the "Currently…" pill, a touch smaller */
html.v2 .g-band .g-badge{padding:8px 14px; font-size:14.5px}
@media (max-width:720px){ html.v2 .g-band .g-badge{padding:7px 11px; font-size:12.5px} }

/* ---------- FAQ (V1's questions, after the experiments): the column, the heading and the grey cards of the work ---------- */
html.v2 .g-faq{border-top:1px solid var(--g-line)}
html.v2 .g-faq .g-c{padding:56px 0 72px}
html.v2 .g-faq .fq-list{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; margin:28px 32px 0}
html.v2 .g-faq .fq-i{transform:none; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line); box-shadow:none!important; transition:border-color .2s ease!important}
html.v2 .g-faq .fq-i:hover, html.v2 .g-faq .fq-i.open{border-color:#d2d2d2}
html.v2 .g-faq .fq-q{padding:18px 18px 18px 20px; font-family:var(--g-font); font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink); text-align:left; cursor:var(--nt-cur)}
html.v2 .g-faq .fq-q:focus-visible{outline:2px solid var(--g-ink); outline-offset:-3px; border-radius:var(--g-r)}
html.v2 .g-faq .fq-q i{width:28px; height:28px; background:#fff; border:1px solid var(--g-card-line)}
html.v2 .g-faq .fq-q i::before, html.v2 .g-faq .fq-q i::after{width:10px; height:1.5px; margin:-.75px 0 0 -5px; background:var(--g-ink)}
html.v2 .g-faq .fq-i.open .fq-q i{background:var(--g-ink); border-color:var(--g-ink)}
html.v2 .g-faq .fq-i.open .fq-q i::before, html.v2 .g-faq .fq-i.open .fq-q i::after{background:#fff}
html.v2 .g-faq .fq-a p{padding:0 20px 20px; font-family:var(--g-font); font-size:15px; line-height:1.6; letter-spacing:-.01em; color:var(--g-muted); max-width:720px!important}
html.v2 .g-faq .fq-a a{color:var(--g-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
@media (max-width:720px){
  html.v2 .g-faq .g-c{padding:40px 0 48px}
  html.v2 .g-faq .fq-list{margin:20px 16px 0; gap:8px}
  html.v2 .g-faq .fq-q{padding:16px 14px 16px 16px; font-size:15px}
  html.v2 .g-faq .fq-a p{padding:0 16px 16px; font-size:14px}
}
html.v2 .g-copy-in{display:inline; margin:0; padding:0; border:0; background:none; font:inherit; color:var(--g-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:var(--nt-cur)}
html.v2 .g-copy-in.copied::after{content:" \2713  copied"; font-weight:500; text-decoration:none; color:#27ae60}

/* ---------- About: its own page, built from the same bands as home ---------- */
html.v2 #view-about{animation:none}
html.v2 #view-about.active{display:block!important; padding:0!important; margin:0!important; gap:0!important}
html.v2 .g-ab-hero .g-c{display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:end; gap:48px; padding:120px 32px 56px}
html.v2 .g-band .g-ab-p{margin-top:16px; max-width:560px; font-size:16px; line-height:1.55; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .g-band .g-ab-p + .g-ab-p{margin-top:10px}
html.v2 .g-ab-me{margin:0; position:relative; z-index:1; width:240px; aspect-ratio:1; border-radius:var(--g-r); overflow:hidden; background:#fe0141; border:1px solid var(--g-card-line)}
html.v2 .g-ab-me img{display:block; width:100%; height:100%; object-fit:cover}
html.v2 .g-ab-xp .g-c, html.v2 .g-ab-arc .g-c{padding:56px 0 64px}
html.v2 .g-ab-arc{border-top:1px solid var(--g-line)}
html.v2 .g-ab-jobs{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 32px 0}
html.v2 .g-ab-job{display:flex; flex-direction:column; padding:22px 22px 20px; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 .g-ab-job .g-t{margin-top:10px}
html.v2 .g-band .g-ab-role{margin-top:4px; font-size:13px; letter-spacing:-.02em; color:var(--g-muted)}
html.v2 .g-band .g-ab-job ul{display:flex; flex-direction:column; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--g-card-line); list-style:none}
html.v2 .g-band .g-ab-job li{position:relative; padding-left:14px; font-size:14px; line-height:1.5; letter-spacing:-.01em; color:#555}
html.v2 .g-ab-job li::before{content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:1px; background:var(--g-ink)}
html.v2 .g-ab-job li b{font-weight:600; color:var(--g-ink)}
html.v2 .g-band .g-ab-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:18px}
html.v2 .g-ab-links button{display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:34px; background:#fff; border:1px solid var(--g-card-line); font:500 12.5px/1 var(--g-font); letter-spacing:-.01em; color:var(--g-ink); cursor:var(--nt-cur); transition:border-color .2s ease}
html.v2 .g-ab-links button:hover{border-color:#bdbdbd}
html.v2 .g-ab-links button:focus-visible{outline:2px solid var(--g-ink); outline-offset:2px}
/* the timeline: one line across the column, a dot per step */
html.v2 .g-band .g-ab-steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:36px 0 0; list-style:none; border-top:1px solid var(--g-line)}
html.v2 .g-band .g-ab-steps li{position:relative; display:flex; flex-direction:column; gap:6px; padding:28px 24px 0 32px}
html.v2 .g-ab-steps li + li{border-left:1px dashed var(--g-line)}
html.v2 .g-ab-steps li::before{content:""; position:absolute; left:29px; top:-4.5px; width:8px; height:8px; border-radius:50%; background:var(--g-bg); border:1px solid var(--g-ink); box-sizing:border-box}
html.v2 .g-ab-steps li:last-child::before{background:#ec0131; border-color:#ec0131}
html.v2 .g-ab-steps b{font-size:24px; font-weight:700; letter-spacing:-.03em}
html.v2 .g-ab-steps span{font-size:14px; font-weight:600; letter-spacing:-.02em; line-height:1.35}
html.v2 .g-ab-steps em{font-style:normal; font-size:13px; line-height:1.45; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .g-ab-foot{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px 40px; margin:40px 32px 0; padding-top:20px; border-top:1px solid var(--g-card-line)}
html.v2 .g-band .g-ab-foot p{font-size:14px; letter-spacing:-.01em; color:var(--g-ink)}
html.v2 .g-ab-foot em{font-style:normal; margin-right:10px; font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--g-muted)}
@media (max-width:900px){
  html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr) 180px; gap:32px; padding:96px 32px 48px}
  html.v2 .g-ab-me{width:180px}
  html.v2 .g-ab-jobs{grid-template-columns:minmax(0,1fr)}
  html.v2 .g-band .g-ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.v2 .g-ab-steps li:nth-child(3){border-left:0}
  html.v2 .g-ab-steps li:nth-child(n+3){margin-top:28px; border-top:1px solid var(--g-line)}
  html.v2 .g-ab-steps li:nth-child(n+3)::before{top:-4.5px}
}
@media (max-width:720px){
  html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr); gap:28px; padding:56px 16px 40px}
  html.v2 .g-ab-me{order:-1; width:112px}
  html.v2 .g-ab-hero .g-h1 .ln{white-space:normal}
  html.v2 .g-band .g-ab-p{font-size:15px}
  html.v2 .g-ab-xp .g-c, html.v2 .g-ab-arc .g-c{padding:40px 0 48px}
  html.v2 .g-ab-jobs{margin:24px 16px 0; gap:12px}
  html.v2 .g-ab-job{padding:18px 16px 16px}
  html.v2 .g-band .g-ab-steps{grid-template-columns:minmax(0,1fr); margin-top:28px; border-top:0}
  html.v2 .g-band .g-ab-steps li{padding:0 16px 24px 40px; margin:0!important; border:0!important}
  html.v2 .g-ab-steps li + li{border-left:0}
  html.v2 .g-ab-steps li::before{left:16px; top:7px}
  html.v2 .g-ab-steps li::after{content:""; position:absolute; left:19.5px; top:15px; bottom:-7px; width:1px; background:var(--g-line)}
  html.v2 .g-ab-steps li:last-child::after{display:none}
  html.v2 .g-ab-steps b{font-size:20px}
  html.v2 .g-ab-foot{margin:28px 16px 0; flex-direction:column}
}
@media (max-width:440px){      /* with About in the header: name and role stay one line each; the role trims if it must */
  html.v2 .g-band .g-name{white-space:nowrap}
  html.v2 .g-band .g-role{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
@media (max-width:440px){      /* phones: About + Resume in the header; Linkedin is in the closing box on every page */
  html.v2 .g-nav .g-n-li{display:none}
  html.v2 .g-band .g-role{display:block}
}
@media (max-width:340px){      /* the smallest phones */
  html.v2 .g-av{width:34px; height:34px}
  html.v2 .g-band .g-name{font-size:15px}
  html.v2 .g-me-t{overflow:hidden}
}
@media (max-width:340px){
  html.v2 .g-head .g-c{padding:14px 8px; gap:8px}
  html.v2 .g-me{gap:7px}
  html.v2 .g-nav{gap:7px}
  html.v2 .g-band .g-name{font-size:14.5px}
}

/* ---------- header tabs: a grey tray (like the cards) with a white chip that sits on your page and follows the pointer ---------- */
html.v2 .g-nav{gap:16px}
html.v2 .g-tabs{position:relative; display:inline-flex; align-items:center; padding:3px; border-radius:10px; background:var(--g-card); border:1px solid var(--g-card-line); box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
html.v2 .g-nav a.g-tab{position:relative; z-index:1; height:30px; padding:0 14px; border-radius:7px; font-size:14px; color:#707070; transition:color .2s ease}
html.v2 .g-nav a.g-tab:hover, html.v2 .g-nav a.g-tab.on{color:var(--g-ink)}
html.v2 .g-nav a.g-tab:focus-visible{outline:2px solid var(--g-ink); outline-offset:1px}
html.v2 .g-tab svg{transition:transform .25s ease}
html.v2 .g-tab:hover svg{transform:translate(1.5px,-1.5px)}
html.v2 .g-tab-ind{position:absolute; left:0; top:3px; bottom:3px; width:0; opacity:0; box-sizing:border-box; border-radius:7px; background:#fff; border:1px solid #dddddd;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 3px 8px -3px rgba(0,0,0,.14); pointer-events:none}
html.v2 .g-tabs.ready .g-tab-ind{transition:transform .42s cubic-bezier(.3,.8,.25,1), width .42s cubic-bezier(.3,.8,.25,1), opacity .2s ease, background-color .2s ease}
html.v2 .g-tabs.peek .g-tab-ind{background:#fafafa}                     /* only hovering: a lighter chip */
/* a little red pixel on the page you're on, the profile picture's red */
html.v2 .g-tab.on::after{content:""; position:absolute; top:6px; right:6px; width:4px; height:4px; border-radius:1px; background:#ec0131; animation:g-px-in .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes g-px-in{from{transform:scale(0)} to{transform:scale(1)}}
@media (max-width:720px){
  html.v2 .g-nav{gap:10px}
  html.v2 .g-tabs{padding:2px; border-radius:9px}
  html.v2 .g-nav a.g-tab{height:28px; padding:0 10px; font-size:13px}
  html.v2 .g-tab-ind{top:2px; bottom:2px}
  html.v2 .g-tab.on::after{top:4px; right:4px; width:3px; height:3px}
}
@media (max-width:340px){ html.v2 .g-nav{gap:5px} html.v2 .g-nav a.g-tab{padding:0 7px} html.v2 .g-nav .g-cta{padding:0 7px} html.v2 .g-band .g-name{font-size:14px} html.v2 .g-me{gap:6px} }
@media (prefers-reduced-motion:reduce){ html.v2 .g-tabs.ready .g-tab-ind{transition:none} html.v2 .g-tab.on::after{animation:none} }
@media (max-width:340px){ html.v2 .g-av{width:30px; height:30px} html.v2 .g-head .g-c{padding:14px 6px} }
@media (max-width:440px){ html.v2 .g-nav .g-n-home{display:none} }   /* phones: your name and picture already lead home */
/* project cards: the company as a small tag, bottom-left, over the screens */
html.v2 .g-proj .g-t{margin-top:0}
html.v2 .g-co{position:absolute; z-index:4; left:14px; bottom:14px; display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:2px; border:1px solid var(--g-card-line); box-sizing:border-box;
  background:#fff; font-size:11px; font-weight:500; line-height:1; letter-spacing:0; color:var(--g-muted); pointer-events:none}
@media (max-width:720px){ html.v2 .g-co{left:10px; bottom:10px} }
/* a fifth project: the last card spans the row, its words on the left and its screens on the right */
html.v2 .g-proj.g-wide{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:end}
html.v2 .g-proj.g-wide .g-txt{align-self:start; padding-bottom:56px}
html.v2 .g-proj.g-wide .g-shot{margin-top:0}
@media (max-width:720px){
  html.v2 .g-proj.g-wide{display:flex; align-items:stretch}
  html.v2 .g-proj.g-wide .g-txt{padding-bottom:6px}
}

/* the voxel hero: a touch taller than the old artwork (860 x 715 at 2x) */
html.v2 .g-art{height:auto; aspect-ratio:930 / 773}
/* the new pixel icons are not all the same shape: keep each whole inside its box */
html.v2 .g-wt img{object-fit:contain}

/* ===== V2 case studies: V1's four pages, drawn in the home page's language =====
   Inter, #333 / #4f4f4f / #828282 text, #f2f2f2 cards with #e0e0e0 edges and 12px corners,
   the 1010px column with its guide lines, and a band line (with dots) between sections. */

/* V1's design tokens, re-pointed at V2's palette and type */
html.v2{
  --font:var(--g-font);
  --bg:#fcfcfc; --bg-2:#f2f2f2; --bg-3:#ebebeb;
  --ink:#333333; --ink-2:#4f4f4f; --muted:#828282;
  --line:#e0e0e0; --line-2:#d9d9d9;
  --note-bg:#f2f2f2; --note-ink:#4f4f4f; --note-line:#e0e0e0;
  --w-text:680px; --w-wide:100%;
  --g-pad:32px;
}
html.v2 body{font-family:var(--g-font); color:var(--g-ink)}
html.v2 .page{max-width:none; padding:0}
html.v2 .view h1, html.v2 .view h2, html.v2 .view h3, html.v2 .view h4, html.v2 .stat b{font-variation-settings:normal}

/* ---------- the column: same width, same guide lines as the home page ---------- */
html.v2 .view:not(#view-home):not(#view-about){position:relative; box-sizing:border-box; width:min(var(--g-w), calc(100% - 64px)); margin:0 auto; padding:0 var(--g-pad) 104px;
  font-family:var(--g-font); color:var(--g-ink); -webkit-font-smoothing:antialiased}
html.v2 .view:not(#view-home):not(#view-about)::before, html.v2 .view:not(#view-home):not(#view-about)::after{content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--g-line); pointer-events:none; z-index:0}
html.v2 .view:not(#view-home):not(#view-about)::before{left:-.5px}
html.v2 .view:not(#view-home):not(#view-about)::after{right:-.5px}

/* ---------- the opening: badge, title, summary (left-aligned like the home hero) ---------- */
html.v2 .csh{position:relative; padding-top:88px; text-align:left}
html.v2 .csh > .eyebrow, html.v2 .csh > h1, html.v2 .csh > .deck{text-align:left; margin-left:0!important; margin-right:0!important}
html.v2 .csh > .eyebrow{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin:0; padding:10px 16px; border-radius:34px;
  background:rgba(198,198,198,.2); border:1px solid rgba(139,139,139,.4); font-size:16px; line-height:1.21; font-weight:400; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .csh .ship-tag{display:inline-flex; align-items:center; gap:6px; margin:0; padding:0; border-radius:0; background:none; color:var(--g-ink);
  font-size:inherit; font-weight:500; letter-spacing:inherit; text-transform:none; vertical-align:baseline}
html.v2 .csh .ship-tag::before{width:6px; height:6px; background:#27ae60; box-shadow:0 0 0 3px rgba(39,174,96,.16)}
html.v2 .csh > h1{margin-top:20px; max-width:880px!important; font-size:46px; line-height:1.21; font-weight:700; letter-spacing:-.03em; color:var(--g-ink); text-wrap:balance}
html.v2 .csh > h1 b{font-weight:700}
html.v2 .csh > h1 .lt{font-weight:300}
html.v2 .csh > .deck{margin-top:16px; max-width:640px!important; font-size:18px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted); text-wrap:pretty}

/* the hero screens sit in a grey card, like the work cards */
html.v2 .csh .csh-stage{margin-top:40px; padding:48px 24px 32px; border-radius:var(--g-r); background:var(--g-card)!important; border:1px solid var(--g-card-line); transform:none!important}
html.v2 .csh .csh-stage::before{display:none}
html.v2 .csh-stage .phone-label, html.v2 .csh-stage figcaption{color:var(--g-muted)!important; font-size:13px; letter-spacing:-.01em; text-transform:none; font-weight:400; text-align:center}
html.v2 .csh-stage .rt-ov-a{color:var(--g-muted)!important}

/* problem / what I did / result */
html.v2 .tldr{gap:16px; margin-top:16px}
html.v2 .tldr > div{padding:20px 20px 22px; border-radius:var(--g-r); border:1px solid var(--g-card-line); background:var(--g-card)}
html.v2 .tldr small{margin-bottom:8px; font-size:13px; font-weight:400; letter-spacing:-.01em; text-transform:none; color:var(--g-muted)}
html.v2 .tldr p{font-size:15px; line-height:1.5; letter-spacing:-.01em; color:var(--g-ink)}
html.v2 .tldr .res{background:#fff; border-color:var(--g-card-line)}
html.v2 .tldr .res small{color:var(--g-ink); font-weight:600}

/* the numbers */
html.v2 .csh .stats{margin-top:48px; gap:24px 32px}
html.v2 .csh .stat{padding-top:0}
html.v2 .csh .stat b{font-size:40px; line-height:1.1; font-weight:700; letter-spacing:-.03em; color:var(--g-ink)}
html.v2 .csh .stat span{margin-top:8px; font-size:14px; line-height:1.4; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .csh .meta{margin-top:40px; padding:0; gap:24px 32px; max-width:none}
html.v2 .csh .meta div span{margin-bottom:4px; font-size:13px; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .csh .meta div b{font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--g-ink)}

/* "in short: the evidence" */
html.v2 .ev{margin-top:48px; padding:24px; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 .ev-t{margin-bottom:16px!important; font-size:13px; font-weight:400; letter-spacing:-.01em; text-transform:none; color:var(--g-muted)}
html.v2 .ev-g{gap:20px 24px}
html.v2 .ev-i b{margin-bottom:6px; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink)}
html.v2 .ev-i p{font-size:14px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .ev-i a{color:var(--g-ink); font-weight:500; text-decoration:underline!important; text-decoration-color:rgba(51,51,51,.35); text-underline-offset:3px}
html.v2 .ev-i a:hover{color:#000; text-decoration-color:currentColor}

/* ---------- sections: a band line with dots across the page, then the words ---------- */
html.v2 .view:not(#view-home):not(#view-about) .section{position:relative; margin-top:96px; padding:88px 0 0!important}
html.v2 .view:not(#view-home):not(#view-about) .section::before{content:""; position:absolute; top:0; left:calc(50% - 50vw); width:100vw; height:1px; background:var(--g-line); pointer-events:none}
html.v2 .view:not(#view-home):not(#view-about) .section::after{content:""; position:absolute; top:-2.5px; left:calc(-1 * var(--g-pad) - 3px); right:calc(-1 * var(--g-pad) - 3px); height:6px; pointer-events:none;
  background:radial-gradient(circle closest-side, var(--g-line) 92%, transparent) left top / 6px 6px no-repeat, radial-gradient(circle closest-side, var(--g-line) 92%, transparent) right top / 6px 6px no-repeat}
html.v2 .view .section > .text > h2{max-width:780px!important; margin-bottom:16px; font-size:32px; line-height:1.2; font-weight:600; letter-spacing:-.03em; color:var(--g-ink); text-wrap:balance}
html.v2 .view .section > .text > h2 b{font-weight:600}
html.v2 .view .section > .text > h2 .lt{font-weight:300}
html.v2 .view .section > .text > .lede{max-width:720px!important; font-size:18px; line-height:1.55; letter-spacing:-.01em; color:var(--ink-2)}
html.v2 .view .section > .text > p:not(.lede){max-width:680px!important; font-size:16px; line-height:1.65; letter-spacing:-.005em; color:var(--ink-2)}
html.v2 .view:not(#view-home):not(#view-about) h3{letter-spacing:-.02em}
html.v2 .view:not(#view-home):not(#view-about) .cap, html.v2 .view:not(#view-home):not(#view-about) .screen-note, html.v2 .view:not(#view-home):not(#view-about) figure figcaption{font-style:normal; font-size:13px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .view:not(#view-home):not(#view-about) blockquote{border-left-color:var(--g-ink); font-weight:500; letter-spacing:-.02em; color:var(--g-ink)}

/* sections still fade in as they arrive, but the band line above each one stays put, like the home page's */
html.v2 .view:not(#view-home):not(#view-about) .section.sr{opacity:1; translate:none}
html.v2 .view:not(#view-home):not(#view-about) .section.sr > *{opacity:0; translate:0 26px; transition:opacity .9s cubic-bezier(.2,.7,.2,1), translate 1s cubic-bezier(.2,.7,.2,1)}
html.v2 .view:not(#view-home):not(#view-about) .section.sr.in > *{opacity:1; translate:0 0}
html.v2 .ssk{transform:none!important}                 /* no scroll lean: the home page's blocks hold still */

/* ---------- cards inside the story: the home page's grey cards and corners ---------- */
html.v2 :is(.callout, .card-visual, .vhero, .tv-step, .vt, .sh-box, .tri-i, .q3-i, .nx, .sp, .qt, .pb-card, .im, .rt-h, .rt-m, .pr, .rt-board, .cmp, .cbench, .cp, .rt-svc, .rt-col, .in4, .tw-browser, .tw-card, .bframe){border-radius:var(--g-r)}
html.v2 .sr2 figure, html.v2 .feature .ph, html.v2 figure .ph{border-radius:var(--g-r)}
/* :where keeps this as weak as V1's own rules, so their variants (a dark step, an active card) still win */
html.v2 :where(.callout, .card-visual, .tv-step, .vt.ok, .tri-i, .q3-i, .nx, .qt, .pb-card, .cp, .in4, .rt-h){background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 .rt-ring .bg{stroke:var(--line-2)}
html.v2 .rt-col{background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 .rt-col.biz{background:#fff}                    /* the business side, lifted like the "Result" card */
html.v2 .hs .step{border-radius:var(--g-r); background:var(--g-card); border-color:var(--g-card-line)}
html.v2 .hs .step:first-child{border-top-color:var(--g-card-line)}
html.v2 .hs .step.act{background:#fff; border-color:var(--g-ink); box-shadow:none}
html.v2 .sh-box.to{background:#fff; border-color:var(--g-ink); box-shadow:none}
html.v2 .hs-count b, html.v2 .tw-count b{letter-spacing:-.03em}
/* small labels: the home page's quiet sentence case, not V1's spaced capitals */
html.v2 :is(.vhero .vlabel, .nb-scn span, .vt-tag, .sh-box small, .nx small, .pb-card small, .rt-sub, .fixk, .rt-ov figcaption, .cmp-l, .cmp-r, .cb-cap, .cp small, .rt-col small, .rt-er-ph figcaption, .fxd dt){
  text-transform:none; letter-spacing:-.01em; font-size:12.5px; font-weight:500}
/* Times: its red was V1's accent there; V2 keeps the page monochrome */
html.v2 .goal{border-left-color:var(--g-ink)}
html.v2 .qt i{color:var(--g-ink)}
html.v2 .pb-list li::before{background:var(--g-ink)}
html.v2 .hs-hint, html.v2 .tw-hint{font-weight:500}
html.v2 .tw-card{box-shadow:none}
/* the Times walkthrough stays inside the column */
html.v2 .tw-wrap{width:auto; left:auto; margin-left:0}

/* ---------- the floating chapter bar ---------- */
html.v2 .fnav{font-family:var(--g-font)}
html.v2 .fn-track{border-radius:999px; background:rgba(244,244,244,.96); box-shadow:0 12px 30px -18px rgba(0,0,0,.35), inset 0 0 0 1px var(--g-card-line)}
html.v2 .fn-ind{border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--g-card-line), 0 2px 6px -2px rgba(0,0,0,.12)}
html.v2 .fn-track button{border-radius:999px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--g-muted)}
html.v2 .fn-track button:hover, html.v2 .fn-track button.on{color:var(--g-ink)}
html.v2 .fn-top{border-radius:50%; background:rgba(244,244,244,.96); color:var(--g-ink); box-shadow:0 12px 30px -18px rgba(0,0,0,.35), inset 0 0 0 1px var(--g-card-line)}
html.v2 .fn-top:hover{color:#000}

/* ---------- narrower screens ---------- */
@media (max-width:900px){
  html.v2 .csh{padding-top:64px}
  html.v2 .csh .stats{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html.v2 .rt-two{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* the opening screens fit the card instead of scrolling sideways (and none is cut off at the left) */
  html.v2 #view-showrooms .csh-stage .phones{grid-template-columns:repeat(2, minmax(0, 1fr)); justify-content:stretch; gap:14px; overflow:visible; padding-bottom:0}
  html.v2 #view-explore .csh-stage .phones{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 14px; overflow:visible; padding-bottom:0}
  html.v2 .csh-stage .rt-ov{gap:8px}
  html.v2 .csh-stage .rt-ov figure{flex:1 1 0; min-width:0}
  html.v2 .csh-stage .rt-ov .phone{width:100%; max-width:250px}
  html.v2 .csh-stage .rt-ov-a{flex:none; font-size:22px}
  html.v2 .cp-g{grid-template-columns:1fr 1fr}      /* V1 lets its desktop columns win here */
}
@media (max-width:480px){
  html.v2 .cp-g{grid-template-columns:1fr}
}
/* the page change: V2's neutral paper instead of V1's warm one */
html.v2 .page-fx{background:rgba(252,252,252,.8)!important}
@media (max-width:720px){
  html.v2{--g-pad:16px}
  html.v2 .view:not(#view-home):not(#view-about){width:calc(100% - 32px); padding-bottom:72px}
  html.v2 .csh{padding-top:48px}
  html.v2 .csh > .eyebrow{padding:8px 12px; font-size:13px; line-height:1.35}
  html.v2 .csh > h1{font-size:clamp(30px, 9.4vw, 40px)}
  html.v2 .csh > .deck{font-size:16px}
  html.v2 .csh .csh-stage{margin-top:28px; padding:28px 12px 20px}
  html.v2 .csh .stats{margin-top:36px; gap:24px 16px}
  html.v2 .csh .stat b{font-size:32px}
  html.v2 .csh .meta{margin-top:32px}
  html.v2 .ev{margin-top:36px; padding:20px}
  html.v2 .view:not(#view-home):not(#view-about) .section{margin-top:64px; padding-top:56px!important}
  html.v2 .view .section > .text > h2{font-size:26px; line-height:1.22}
  html.v2 .view .section > .text > .lede{font-size:17px}
  html.v2 .view .section > .text > p:not(.lede){font-size:15.5px}
  html.v2 .fn-track button{font-size:13px}
}

/* the pinned side-scrolls overlap their neighbours' empty space (see v2-hs-gap): their see-through edges let clicks through */
html.v2 .hs-pin{pointer-events:none}
html.v2 .hs-pin > *{pointer-events:auto}
/* the parking call-out uses the full column, like the other cards in the story */
html.v2 .callout.park{max-width:none; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:48px; padding:32px 40px 32px 32px}
html.v2 .park-txt p{max-width:520px}
html.v2 .park-rule{margin-top:18px}
@media (max-width:760px){ html.v2 .callout.park{grid-template-columns:1fr; gap:24px; padding:20px} }

/* Bharat RTO's phones: every screenshot carries its own status bar and island (the onboarding four were made so, see
   make_rto_ob.py), so one slim frame without a drawn notch, the screen sized by the screenshot itself */
html.v2 #view-rto .phone{aspect-ratio:auto; height:auto; padding:5px; border-radius:15% / 7%; background:#141416;
  box-shadow:inset 0 0 0 1px #2f2f33, 0 0 0 1px rgba(0,0,0,.05), 0 22px 36px -24px rgba(0,0,0,.5)}
html.v2 #view-rto .phone::before, html.v2 #view-rto .phone::after{content:""; position:absolute; z-index:0; transform:none; width:2px; border-radius:2px; background:#3a3a3e}
html.v2 #view-rto .phone::before{left:-2px; right:auto; top:22%; height:8%}         /* volume */
html.v2 #view-rto .phone::after{right:-2px; left:auto; top:27%; height:12%}         /* power */
html.v2 #view-rto .phone > .ph{position:relative; inset:auto; z-index:1; padding:0; margin:0; border:0; display:block; height:auto; min-height:0; border-radius:12.5% / 5.8%; overflow:hidden; background:#fff}
html.v2 #view-rto .phone.ob > .ph{aspect-ratio:480 / 1038}
html.v2 #view-rto .phone > .ph > img:first-child{position:static; display:block; width:100%; height:auto; max-width:none}


/* ===== FASTag case study (v2new/fastag.py) — only the blocks the other case studies don't have ===== */
html.v2 #view-fastag .fg-unshipped{background:#fff3e8!important; border-color:#f3c9a3!important; color:#9a4a07!important}
html.v2 #view-fastag .fg-unshipped::before{background:#ea7a1a!important; box-shadow:none!important}
html.v2 #view-fastag .fg-hero{display:flex; justify-content:center; align-items:flex-end; gap:clamp(14px, 3vw, 40px); padding:8px 0 4px}
html.v2 #view-fastag .fg-hero .phone{width:clamp(150px, 18vw, 228px)}
html.v2 #view-fastag .fg-hero .phone:nth-child(2){width:clamp(170px, 20.5vw, 256px)}
/* the phones: same slim frame as the Bharat RTO case study; every screen is 360x800 */
html.v2 #view-fastag .phone{aspect-ratio:auto; height:auto; padding:5px; border-radius:15% / 7%; background:#141416;
  box-shadow:inset 0 0 0 1px #2f2f33, 0 0 0 1px rgba(0,0,0,.05), 0 22px 36px -24px rgba(0,0,0,.5)}
html.v2 #view-fastag .phone::before, html.v2 #view-fastag .phone::after{content:""; position:absolute; z-index:0; transform:none; width:2px; border-radius:2px; background:#3a3a3e}
html.v2 #view-fastag .phone::before{left:-2px; right:auto; top:22%; height:8%}
html.v2 #view-fastag .phone::after{right:-2px; left:auto; top:27%; height:12%}
html.v2 #view-fastag .phone > .ph{position:relative; inset:auto; z-index:1; padding:0; margin:0; border:0; display:block; height:auto; min-height:0; aspect-ratio:360 / 800;
  border-radius:12.5% / 5.6%; overflow:hidden; background:#fff}
html.v2 #view-fastag .phone > .ph > img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; max-width:none}
html.v2 #view-fastag .fd-row.fg-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
/* figures: the research, at full column width on a card */
html.v2 #view-fastag .fg-fig{margin:28px 0 0; padding:16px; border-radius:var(--g-r); background:#fff; border:1px solid var(--g-card-line)}
html.v2 #view-fastag .fg-fig img{display:block; width:100%; height:auto; border-radius:4px}
html.v2 #view-fastag .fg-fig figcaption{margin-top:12px; text-align:left}
/* two cards side by side */
html.v2 #view-fastag .fg-two{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:28px}
html.v2 #view-fastag .fg-card{padding:22px 22px 24px; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 #view-fastag .fg-card small, html.v2 #view-fastag .fg-sub{display:block; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
html.v2 #view-fastag .fg-sub{margin-top:20px}
html.v2 #view-fastag .fg-card ul{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
html.v2 #view-fastag .fg-card li{position:relative; padding-left:14px; font-size:15px; line-height:1.45; color:var(--g-ink)}
html.v2 #view-fastag .fg-card li::before{content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:1px; background:var(--g-ink)}
html.v2 #view-fastag .fg-card .chips{margin-top:10px}
html.v2 #view-fastag .tri.fg-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
html.v2 #view-fastag .tri-i.fg-bad b{color:#c2410c}
html.v2 #view-fastag .qgrid.fg-q4{grid-template-columns:repeat(2, minmax(0, 1fr))}
html.v2 #view-fastag .fg-notes{margin-top:24px}
/* the issue table */
html.v2 #view-fastag .fg-table{margin-top:28px; border-radius:var(--g-r); border:1px solid var(--g-card-line); overflow:hidden; background:#fff}
html.v2 #view-fastag .fg-tr{display:grid; grid-template-columns:1.1fr 1.4fr 1fr; gap:20px; padding:14px 20px; border-top:1px solid var(--g-card-line); font-size:14.5px; line-height:1.45; color:var(--g-ink)}
html.v2 #view-fastag .fg-tr span:last-child{color:#4b5563}
html.v2 #view-fastag .fg-th{border-top:0; background:var(--g-card); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
html.v2 #view-fastag .fg-th span:last-child{color:var(--g-muted)}
html.v2 #view-fastag .fg-quote{max-width:none!important; margin:28px 0 0; padding:22px 24px; border-left:2px solid var(--g-ink); background:var(--g-card); border-radius:0 var(--g-r) var(--g-r) 0;
  font-size:19px; line-height:1.45; font-weight:500; letter-spacing:-.02em; color:var(--g-ink)}
html.v2 #view-fastag .fg-quote span{display:block; margin-top:10px; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
@media (max-width:900px){
  html.v2 #view-fastag .tri.fg-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:720px){
  html.v2 #view-fastag .fg-two, html.v2 #view-fastag .qgrid.fg-q4{grid-template-columns:minmax(0, 1fr)}
  html.v2 #view-fastag .fd-row.fg-3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html.v2 #view-fastag .fg-hero .phone:nth-child(3){display:none}
  html.v2 #view-fastag .fg-hero .phone{width:40vw} html.v2 #view-fastag .fg-hero .phone:nth-child(2){width:44vw}
  html.v2 #view-fastag .fg-fig{padding:8px}
  html.v2 #view-fastag .fg-tr{grid-template-columns:minmax(0,1fr); gap:4px; padding:14px 16px}
  html.v2 #view-fastag .fg-th{display:none}
  html.v2 #view-fastag .fg-tr span:first-child{font-weight:600}
  html.v2 #view-fastag .fg-quote{font-size:17px; padding:18px}
}


/* ===== Orbit Play Zone (v2new/orbit_play.py), from the FASTag page — only the blocks the other case studies don't have ===== */
html.v2 #view-play .fg-unshipped{background:#fff3e8!important; border-color:#f3c9a3!important; color:#9a4a07!important}
html.v2 #view-play .fg-unshipped::before{background:#ea7a1a!important; box-shadow:none!important}
html.v2 #view-play .fg-hero{display:flex; justify-content:center; align-items:flex-end; gap:clamp(14px, 3vw, 40px); padding:8px 0 4px}
html.v2 #view-play .fg-hero .phone{width:clamp(150px, 18vw, 228px)}
html.v2 #view-play .fg-hero .phone:nth-child(2){width:clamp(170px, 20.5vw, 256px)}
/* the phones: same slim frame as the Bharat RTO case study; every screen is 360x800 */
html.v2 #view-play .phone{aspect-ratio:auto; height:auto; padding:5px; border-radius:15% / 7%; background:#141416;
  box-shadow:inset 0 0 0 1px #2f2f33, 0 0 0 1px rgba(0,0,0,.05), 0 22px 36px -24px rgba(0,0,0,.5)}
html.v2 #view-play .phone::before, html.v2 #view-play .phone::after{content:""; position:absolute; z-index:0; transform:none; width:2px; border-radius:2px; background:#3a3a3e}
html.v2 #view-play .phone::before{left:-2px; right:auto; top:22%; height:8%}
html.v2 #view-play .phone::after{right:-2px; left:auto; top:27%; height:12%}
html.v2 #view-play .phone > .ph{position:relative; inset:auto; z-index:1; padding:0; margin:0; border:0; display:block; height:auto; min-height:0; aspect-ratio:360 / 800;
  border-radius:12.5% / 5.6%; overflow:hidden; background:#fff}
html.v2 #view-play .phone > .ph > img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; max-width:none}
html.v2 #view-play .fd-row.fg-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
/* figures: the research, at full column width on a card */
html.v2 #view-play .fg-fig{margin:28px 0 0; padding:16px; border-radius:var(--g-r); background:#fff; border:1px solid var(--g-card-line)}
html.v2 #view-play .fg-fig img{display:block; width:100%; height:auto; border-radius:4px}
html.v2 #view-play .fg-fig figcaption{margin-top:12px; text-align:left}
/* two cards side by side */
html.v2 #view-play .fg-two{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:28px}
html.v2 #view-play .fg-card{padding:22px 22px 24px; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 #view-play .fg-card small, html.v2 #view-play .fg-sub{display:block; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
html.v2 #view-play .fg-sub{margin-top:20px}
html.v2 #view-play .fg-card ul{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
html.v2 #view-play .fg-card li{position:relative; padding-left:14px; font-size:15px; line-height:1.45; color:var(--g-ink)}
html.v2 #view-play .fg-card li::before{content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:1px; background:var(--g-ink)}
html.v2 #view-play .fg-card .chips{margin-top:10px}
html.v2 #view-play .tri.fg-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
html.v2 #view-play .tri-i.fg-bad b{color:#c2410c}
html.v2 #view-play .qgrid.fg-q4{grid-template-columns:repeat(2, minmax(0, 1fr))}
html.v2 #view-play .fg-notes{margin-top:24px}
/* the issue table */
html.v2 #view-play .fg-table{margin-top:28px; border-radius:var(--g-r); border:1px solid var(--g-card-line); overflow:hidden; background:#fff}
html.v2 #view-play .fg-tr{display:grid; grid-template-columns:1.1fr 1.4fr 1fr; gap:20px; padding:14px 20px; border-top:1px solid var(--g-card-line); font-size:14.5px; line-height:1.45; color:var(--g-ink)}
html.v2 #view-play .fg-tr span:last-child{color:#4b5563}
html.v2 #view-play .fg-th{border-top:0; background:var(--g-card); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
html.v2 #view-play .fg-th span:last-child{color:var(--g-muted)}
html.v2 #view-play .fg-quote{max-width:none!important; margin:28px 0 0; padding:22px 24px; border-left:2px solid var(--g-ink); background:var(--g-card); border-radius:0 var(--g-r) var(--g-r) 0;
  font-size:19px; line-height:1.45; font-weight:500; letter-spacing:-.02em; color:var(--g-ink)}
html.v2 #view-play .fg-quote span{display:block; margin-top:10px; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--g-muted)}
@media (max-width:900px){
  html.v2 #view-play .tri.fg-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:720px){
  html.v2 #view-play .fg-two, html.v2 #view-play .qgrid.fg-q4{grid-template-columns:minmax(0, 1fr)}
  html.v2 #view-play .fd-row.fg-3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html.v2 #view-play .fg-hero .phone:nth-child(3){display:none}
  html.v2 #view-play .fg-hero .phone{width:40vw} html.v2 #view-play .fg-hero .phone:nth-child(2){width:44vw}
  html.v2 #view-play .fg-fig{padding:8px}
  html.v2 #view-play .fg-tr{grid-template-columns:minmax(0,1fr); gap:4px; padding:14px 16px}
  html.v2 #view-play .fg-th{display:none}
  html.v2 #view-play .fg-tr span:first-child{font-weight:600}
  html.v2 #view-play .fg-quote{font-size:17px; padding:18px}
}

/* the loop: four steps in a row, the last one (the real task) marked */
html.v2 #view-play .pl-loop{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:28px 0 0; padding:0; list-style:none; counter-reset:pl}
html.v2 #view-play .pl-loop li{position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px; border-radius:var(--g-r); background:var(--g-card); border:1px solid var(--g-card-line); counter-increment:pl}
html.v2 #view-play .pl-loop li::before{content:counter(pl, decimal-leading-zero); font-size:12px; font-weight:600; color:var(--g-muted)}
html.v2 #view-play .pl-loop li + li::after{content:""; position:absolute; left:-10px; top:50%; width:8px; height:8px; margin-top:-4px; border-top:1.5px solid #b9b9b9; border-right:1.5px solid #b9b9b9; transform:rotate(45deg)}
html.v2 #view-play .pl-loop li.hi{background:#fff; border-color:#d0d0d0}
html.v2 #view-play .pl-loop b{font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink)}
html.v2 #view-play .pl-loop span{font-size:14px; line-height:1.45; color:#555}
html.v2 #view-play .pl-note{margin-top:14px; text-align:left}
html.v2 #view-play .pl-badges{margin-top:20px}
html.v2 #view-play .lessons.pl-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
html.v2 #view-play .fg-goal{max-width:none}
@media (max-width:720px){
  html.v2 #view-play .pl-loop{grid-template-columns:minmax(0, 1fr); gap:10px}
  html.v2 #view-play .lessons.pl-4{grid-template-columns:minmax(0, 1fr)}
  html.v2 #view-play .pl-loop li + li::after{left:50%; top:-8px; margin:0 0 0 -4px; transform:rotate(135deg)}
}


/* ---------- About: the artwork, on a desk ---------- */
html.v2 .g-ab-art{border-top:1px solid var(--g-line)}
html.v2 .g-ab-art .g-c{padding:56px 0 64px}
html.v2 .g-band .ag-p{position:relative; z-index:1; margin:12px 32px 0; max-width:560px; font-size:15px; line-height:1.5; letter-spacing:-.01em; color:var(--g-muted)}
/* the desk: a soft grey box with a faint dot grid, the sketches lying on it */
html.v2 .ag-desk{position:relative; z-index:1; height:700px; margin:24px 32px 0; border-radius:14px; overflow:hidden; isolation:isolate;
  background:#efefef radial-gradient(circle, rgba(0,0,0,.075) 1px, transparent 1.3px) 0 0 / 22px 22px; border:1px solid var(--g-card-line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
html.v2 .ag-pile{position:absolute; inset:0}
html.v2 .ag-c{position:absolute; left:0; top:0; padding:6px; margin:0; border:0; border-radius:8px; background:#fff; cursor:grab; touch-action:manipulation;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 16px -6px rgba(0,0,0,.22); will-change:transform; -webkit-user-select:none; user-select:none;
  transition:box-shadow .25s ease; -webkit-tap-highlight-color:transparent}
html.v2 .ag-c img{display:block; width:100%; height:100%; object-fit:cover; border-radius:4px; pointer-events:none; -webkit-user-drag:none}
html.v2 .ag-c:hover{box-shadow:0 1px 2px rgba(0,0,0,.08), 0 12px 26px -8px rgba(0,0,0,.28)}
html.v2 .ag-c.up{cursor:grabbing; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 28px 50px -14px rgba(0,0,0,.42)}
html.v2 .ag-c:focus-visible{outline:2px solid var(--g-ink); outline-offset:3px}
html.v2 .ag-desk.anim .ag-c{transition:transform .8s cubic-bezier(.2,.75,.2,1), box-shadow .25s ease}
html.v2 .ag-desk:not(.in) .ag-c{opacity:0}
html.v2 .ag-desk.in .ag-c{animation:agDrop .7s cubic-bezier(.2,.75,.2,1) both}
@keyframes agDrop{from{opacity:0; scale:1.18; translate:0 -14px} to{opacity:1; scale:1; translate:0 0}}
/* under the desk: how it works, and a way to scatter them again */
html.v2 .ag-bar{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 32px 0}
html.v2 .g-band .ag-hint{margin:0; font:500 12.5px/1.3 var(--g-font); letter-spacing:-.005em; color:var(--g-muted)}
html.v2 .ag-h-t{display:none}
html.v2 .g-ab-art.touch .ag-h-m{display:none} html.v2 .g-ab-art.touch .ag-h-t{display:inline}
html.v2 .ag-sh{flex:none; height:32px; padding:0 12px; border-radius:8px; background:#fff;
  border:1px solid var(--g-card-line); font:500 13px/1 var(--g-font); color:var(--g-ink); cursor:var(--nt-cur)}
html.v2 .ag-sh:hover{border-color:#cfcfcf}
html.v2 .ag-sh:focus-visible{outline:2px solid var(--g-ink); outline-offset:2px}
/* the viewer */
html.v2 .ag-lb{position:fixed; inset:0; z-index:2147482000; display:flex; align-items:center; justify-content:center; gap:16px; padding:56px 72px;
  background:rgba(24,24,24,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s ease}
html.v2 .ag-lb[hidden]{display:none}
html.v2 .ag-lb.on{opacity:1}
html.v2 .ag-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; max-height:100%; min-width:0}
html.v2 .ag-fig img{display:block; max-width:min(1000px, 100%); max-height:calc(100vh - 150px); width:auto; height:auto; border-radius:6px; box-shadow:0 20px 60px -20px rgba(0,0,0,.6);
  transition:opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
html.v2 .ag-fig img.sw{opacity:0; transform:scale(.985)}
html.v2 .ag-fig figcaption{display:flex; gap:12px; font:500 13px/1 var(--g-font); letter-spacing:.02em; color:rgba(255,255,255,.72)}
html.v2 .ag-n{color:rgba(255,255,255,.45)}
html.v2 .ag-x, html.v2 .ag-nav{flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font:400 20px/1 var(--g-font); cursor:var(--nt-cur); transition:background-color .2s ease}
html.v2 .ag-x:hover, html.v2 .ag-nav:hover{background:rgba(255,255,255,.2)}
html.v2 .ag-x:focus-visible, html.v2 .ag-nav:focus-visible{outline:2px solid #fff; outline-offset:2px}
html.v2 .ag-x{position:absolute; top:16px; right:16px; font-size:24px}
@media (max-width:900px){ html.v2 .ag-desk{height:640px} }
@media (max-width:720px){
  html.v2 .g-ab-art .g-c{padding:40px 0 48px}
  html.v2 .g-band .ag-p{margin:10px 16px 0; font-size:14px}
  html.v2 .ag-desk{height:620px; margin:20px 16px 0; border-radius:12px; background-size:18px 18px}
  html.v2 .ag-bar{margin:10px 16px 0}
  html.v2 .ag-c{padding:4px; border-radius:6px}
  html.v2 .ag-c img{border-radius:3px}
  html.v2 .ag-lb{padding:64px 12px 84px}
  html.v2 .ag-nav{position:absolute; bottom:20px}
  html.v2 .ag-nav.prev{left:calc(50% - 56px)} html.v2 .ag-nav.next{right:calc(50% - 56px)}
  html.v2 .ag-fig img{max-height:calc(100vh - 190px)}
}
@media (prefers-reduced-motion:reduce){
  html.v2 .ag-desk.in .ag-c{animation:none} html.v2 .ag-desk:not(.in) .ag-c{opacity:1}
  html.v2 .ag-desk.anim .ag-c, html.v2 .ag-lb, html.v2 .ag-fig img{transition:none}
}

/* ===== the hero illustration (voxel version), alive (V2 only) — see live_hero2.py =====
   Everything is laid out in the illustration's own px (430 x 357.5) and scaled to the box by the script. */
html.v2 .g-live{position:absolute; inset:0; opacity:0; pointer-events:none}
html.v2 .g-art.lv-on .g-live{opacity:1}
html.v2 .g-art.lv-on > img{opacity:0}                         /* the still image steps aside (but keeps its alt text) once the live one runs */
html.v2 .lv-stage{position:absolute; left:0; top:0; transform-origin:0 0}
html.v2 .g-art img.lv, html.v2 .g-art .lv-stage img{position:absolute; display:block; max-width:none; -webkit-user-drag:none; user-select:none}
html.v2 .g-art img.lv-base{left:0; top:0}

/* the laptop display, in its own flat 620 x 388 coordinates (16:10, laid onto the screen in perspective) */
html.v2 .lv-scr{position:absolute; left:0; top:0; transform-origin:0 0}
html.v2 .lv-patch{position:absolute; left:224px; top:146px; width:376px; height:228px; border-radius:14px; background:var(--scr); filter:blur(3px)}
html.v2 .lv-bub{position:absolute; display:block; background:#ece4dd; filter:blur(1.4px)}
html.v2 .lv-bub.b3{left:196px; top:338px; width:392px; height:38px; border-radius:19px; background:var(--bar); opacity:.45}
html.v2 .lv-ln{position:absolute; display:block; height:24px; margin-top:-12px; border-radius:12px; background:var(--bar); filter:blur(1.4px)}
html.v2 .lv-ln.l4{height:14px; margin-top:-7px; border-radius:7px; background:#d9d2cc}
html.v2 .lv-caret{position:absolute; display:block; left:0; top:0; width:6px; height:26px; margin-top:-13px; border-radius:3px; background:#7d7671; opacity:0}
html.v2 .lv-caret.on{opacity:1; animation:lvBlink 1.06s steps(1, end) infinite}
html.v2 .lv-caret.on.solid{animation:none}
@keyframes lvBlink{0%{opacity:1} 55%{opacity:0}}
/* the Claude mark (the original pixels, on their own) turns and breathes while Claude is working:
   one eased turn per beat, so it always comes to rest upright */
html.v2 .g-art img.lv-mark.on{animation:lvMarkSpin 3s cubic-bezier(.6,.05,.4,.95) infinite, lvMarkPulse 3s ease-in-out infinite}
@keyframes lvMarkSpin{from{rotate:0deg} to{rotate:360deg}}
@keyframes lvMarkPulse{0%,100%{scale:1} 50%{scale:.8}}

/* moving pieces (the hand, head and eyes are driven by the script) */
html.v2 .g-art img.lv-head, html.v2 .g-art img.lv-hand, html.v2 .g-art img.lv-eye{will-change:transform}
html.v2 .g-art img.lv-cuff{z-index:0}
html.v2 .lv-handw{position:absolute; transition:transform .7s cubic-bezier(.4,0,.2,1)}
html.v2 .g-art .lv-handw img{left:0; top:0; width:100%; height:100%}
html.v2 .lv-bal{position:absolute; animation:lvBalSway 6.4s cubic-bezier(.45,0,.55,1) infinite alternate}
html.v2 .lv-bal-i{position:absolute; inset:0; animation:lvBalBob 4.3s cubic-bezier(.45,0,.55,1) infinite alternate}
html.v2 .g-art .lv-bal-i img{left:0; top:0; width:100%; height:100%}
@keyframes lvBalSway{from{transform:rotate(-2.6deg)} to{transform:rotate(2.3deg)}}
@keyframes lvBalBob{from{transform:scale(1, .992)} to{transform:scale(1, 1.014)}}

/* coffee steam: soft wisps that rise along slightly different curls, each on its own slow cycle */
html.v2 .lv-steam{position:absolute; width:40px; height:70px; overflow:visible}
html.v2 .lv-steam-g{transform-box:view-box; transform-origin:20px 66px; animation:lvSteamSway 5.6s ease-in-out infinite alternate}
html.v2 .lv-wisp{fill:none; stroke:#bdb5ad; stroke-width:4.4; stroke-linecap:round; stroke-dasharray:46 200; stroke-dashoffset:46; opacity:0;
  animation:lvRise 4.2s cubic-bezier(.35,.1,.55,1) infinite}
html.v2 .lv-wisp.w2{animation-duration:5s; animation-delay:-1.6s}
html.v2 .lv-wisp.w3{animation-duration:5.8s; animation-delay:-3.7s}
html.v2 .lv-wisp.w4{animation-duration:4.6s; animation-delay:-2.6s}
@keyframes lvRise{0%{stroke-dashoffset:46; opacity:0; stroke-width:3.2} 18%{opacity:.78} 55%{opacity:.55} 100%{stroke-dashoffset:-100; opacity:0; stroke-width:6.4}}
@keyframes lvSteamSway{from{transform:skewX(-8deg)} to{transform:skewX(7deg)}}

/* pixel particles near the laptop */
html.v2 .lv-px{position:absolute; inset:0}
html.v2 .lv-px i{position:absolute; display:block; border-radius:.6px; box-shadow:inset 0 -.6px 0 rgba(0,0,0,.16); opacity:0}

html.v2 .g-live.lv-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){ html.v2 .g-live{display:none} html.v2 .g-art.lv-on > img{opacity:1} }


/* ===== V2 loader: the page's guide lines say hello, then open up into the page (see loader.py) ===== */
#v2-ld{position:fixed; inset:0; z-index:2147483000; background:#fcfcfc; overflow:hidden; cursor:var(--nt-cur);
  font-family:"Inter V2",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased}
#v2-ld.clear{background-color:rgba(252,252,252,0); transition:background-color .8s cubic-bezier(.4,0,.2,1); pointer-events:none}
#v2-ld .ld-v, #v2-ld .ld-h{position:absolute; display:block; background:#cfcfcf}
#v2-ld .ld-v{left:0; top:0; width:1px; height:100%; transform:scaleY(0); will-change:translate,transform}
#v2-ld .ld-h{left:0; top:0; height:1px; width:100%; transform:scaleX(0); will-change:translate,transform}
#v2-ld.drawn .ld-v, #v2-ld.drawn .ld-h{transform:none; transition:transform 1.4s cubic-bezier(.65,0,.2,1)}
#v2-ld .ld-dot{position:absolute; left:0; top:0; display:block; width:6px; height:6px; margin:-3px 0 0 -3px; will-change:translate; border-radius:50%; background:#cfcfcf; opacity:0; transition:opacity .5s ease}
#v2-ld.drawn .ld-dot{opacity:1; transition-delay:.9s}
#v2-ld .ld-fill{position:absolute; display:block; background:#ec0131; opacity:0; transition:opacity .45s ease}
#v2-ld .ld-fill.on{opacity:1}
#v2-ld .ld-word{position:absolute; left:0; top:0; display:grid; white-space:nowrap; font-size:clamp(40px, 7.4vw, 92px); line-height:1; font-weight:700; letter-spacing:-.04em;
  color:#333; transform:translate(-50%,-50%); transition:color .45s ease}
#v2-ld .ld-word.red{color:#fff}
#v2-ld .ld-word i{grid-area:1/1; justify-self:center; font-style:normal; transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
#v2-ld .ld-word i.in{opacity:0; transform:translateY(.12em)}
#v2-ld .ld-word i.out{opacity:0; transform:translateY(-.18em); transition:opacity .18s ease, transform .3s cubic-bezier(.4,0,.6,1)}
#v2-ld .ld-word .ld-m{grid-area:1/1; visibility:hidden}
#v2-ld .ld-lab{position:absolute; left:0; top:0; font-size:11px; line-height:1.25; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#828282;
  white-space:nowrap; opacity:0; transition:opacity .9s ease}
#v2-ld.labels .ld-lab{opacity:1}
#v2-ld .ld-art{position:absolute; inset:0}
/* the entry: before anything moves, one button in the middle (the header's Resume button) and a small note under it */
#v2-ld .ld-entry{position:absolute; left:50%; top:50%; translate:-50% -50%; display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:opacity .35s ease, translate .45s cubic-bezier(.4,0,.2,1)}
#v2-ld .ld-entry .ld-go{cursor:var(--nt-cur); margin:0; -webkit-appearance:none; appearance:none}
/* the laptop above the button: see v2new/entry_laptop.py */
#v2-ld .ld-hint{margin:0; font-size:11px; line-height:1.25; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#828282; white-space:nowrap}
#v2-ld:not(.entry) .ld-entry{opacity:0; translate:-50% calc(-50% - 8px); pointer-events:none}
#v2-ld.entry{cursor:var(--nt-cur)}
#v2-ld.entry .ld-snd{opacity:1}
/* sound: a small chip at the foot of the screen (browsers keep a page quiet until it's clicked, so it can be turned on here) */
#v2-ld .ld-snd{position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); translate:-50% 0; display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 10px 0 9px; box-sizing:border-box; border:1px solid #e0e0e0; border-radius:2px; background:#fff; color:#828282; font:inherit; font-size:11px;
  line-height:1; font-weight:500; letter-spacing:.06em; text-transform:uppercase; cursor:var(--nt-cur); opacity:0; -webkit-tap-highlight-color:transparent;
  transition:opacity .6s ease, color .2s ease, border-color .2s ease}
#v2-ld .ld-snd[hidden]{display:none}
#v2-ld.drawn .ld-snd{opacity:1; transition-delay:.9s, 0s, 0s}
#v2-ld .ld-snd:hover, #v2-ld .ld-snd.on{color:#333}
#v2-ld .ld-snd:hover{border-color:#cfcfcf}
#v2-ld .ld-snd:focus-visible{outline:2px solid #333; outline-offset:2px}
#v2-ld .ld-eq{display:inline-flex; align-items:center; gap:2px; height:12px}
#v2-ld .ld-eq i{display:block; width:2px; height:2px; border-radius:1px; background:currentColor; transition:height .25s ease}
#v2-ld .ld-snd.on .ld-eq i{animation:ldEq .8s ease-in-out infinite alternate}
#v2-ld .ld-snd.on .ld-eq i:nth-child(2){animation-delay:-.45s}
#v2-ld .ld-snd.on .ld-eq i:nth-child(3){animation-delay:-.2s}
#v2-ld .ld-snd.on .ld-eq i:nth-child(4){animation-delay:-.65s}
@keyframes ldEq{0%{height:3px}100%{height:12px}}
#v2-ld.opening .ld-lab, #v2-ld.opening .ld-word, #v2-ld.opening .ld-fill, #v2-ld.opening .ld-snd{opacity:0!important; transition:opacity .4s ease; pointer-events:none}
/* the page waits behind it, then its words come in inside the lines */
html.v2-boot .g-head .g-c > :not(.g-dot), html.v2-boot .g-hero-t > *, html.v2-boot .g-stk, html.v2-boot .g-art, html.v2-boot .g-work .g-c > :not(.g-dot){opacity:0}
html.v2-boot .g-hero-t > *{transform:translateY(12px)}
html.v2-in .g-head .g-c > *{transition:opacity .9s ease}
html.v2-in .g-hero-t > *{transition:opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}
html.v2-in .g-hero-t > :nth-child(2){transition-delay:.1s}
html.v2-in .g-hero-t > :nth-child(3){transition-delay:.2s}
html.v2-in .g-art{transition:opacity 1.1s ease .15s}
html.v2-in .g-stk{transition:opacity 1.2s ease .35s}
html.v2-in .g-work .g-c > *{transition:opacity 1.2s ease .4s}
@media (prefers-reduced-motion:reduce){ #v2-ld{display:none} }

/* ---------- the entry's laptop: the user's own, cut out (v2new/entry_laptop.py, lap/cut2.py) ---------- */
#v2-ld .ld-lap{position:relative; width:min(144px, 42vw); margin:0 0 14px; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
#v2-ld .ld-lap:hover{transform:translateY(-2px)}
#v2-ld .ld-lap img{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; -webkit-user-drag:none}
/* only a soft shadow on the ground under the laptop */
#v2-ld .ld-lap::before{content:""; position:absolute; left:2%; right:2%; top:calc(100% - 4px); height:11px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.3), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); pointer-events:none}
#v2-ld .lp-word{animation:lpType 7s steps(1,end) infinite}
#v2-ld .lp-spk{transform:scale(0); animation:lpSpark 7s cubic-bezier(.3,1.5,.5,1) infinite}
#v2-ld .lp-caret{position:absolute; display:block; width:3.6%; height:1.6%; background:#222; animation:lpCaret 7s steps(1,end) infinite, lpBlink 1s steps(1,end) infinite}
@keyframes lpBlink{0%{opacity:1} 50%{opacity:0} 100%{opacity:1}}
#v2-ld .lp-keys{position:absolute; inset:0}
#v2-ld .lp-k{position:absolute; display:block; border-radius:2px; transition:background-color .1s ease, transform .06s ease}
#v2-ld .lp-k::before{content:""; position:absolute; inset:0 -1px}        /* the hairline gaps beside a key still count */
#v2-ld .lp-k:hover, #v2-ld .lp-k.hv{background:rgba(255,255,255,.16)}
#v2-ld .lp-k.dn{background:rgba(0,0,0,.42); transform:translateY(.6px)}

@keyframes lpType{0%{clip-path:inset(0 74.597% 0 0)} 7.857%{clip-path:inset(0 62.314% 0 0)} 10.286%{clip-path:inset(0 56.198% 0 0)} 12.714%{clip-path:inset(0 52.975% 0 0)} 15.143%{clip-path:inset(0 47.438% 0 0)} 17.571%{clip-path:inset(0 41.570% 0 0)} 20.000%{clip-path:inset(0 33.719% 0 0)} 22.429%{clip-path:inset(0 27.521% 0 0)} 82.143%{clip-path:inset(0 33.719% 0 0)} 83.143%{clip-path:inset(0 41.570% 0 0)} 84.143%{clip-path:inset(0 47.438% 0 0)} 85.143%{clip-path:inset(0 52.975% 0 0)} 86.143%{clip-path:inset(0 56.198% 0 0)} 87.143%{clip-path:inset(0 62.314% 0 0)} 88.143%{clip-path:inset(0 74.597% 0 0)}}
@keyframes lpCaret{0%{left:27.603%} 7.857%{left:38.486%} 10.286%{left:44.602%} 12.714%{left:47.825%} 15.143%{left:53.362%} 17.571%{left:59.230%} 20.000%{left:67.081%} 22.429%{left:73.279%} 82.143%{left:67.081%} 83.143%{left:59.230%} 84.143%{left:53.362%} 85.143%{left:47.825%} 86.143%{left:44.602%} 87.143%{left:38.486%} 88.143%{left:27.603%}}
#v2-ld .lp-caret{top:50.031%}
#v2-ld .lp-spk{transform-origin:49.918% 32.635%}
@keyframes lpSpark{0%{transform:scale(0)} 26.429%{transform:scale(0)} 28.429%{transform:scale(1.12)} 30.429%{transform:scale(1)} 47.143%{transform:scale(1.04)} 55.714%{transform:scale(1)} 76.143%{transform:scale(1)} 79.286%{transform:scale(0)} 100%{transform:scale(0)}}

/* ===== V2 page change: the opening's lines close in, the page swaps, they open onto the new page (see page_lines.py) ===== */
#v2-pt{position:fixed; inset:0; z-index:2147482000; display:none; pointer-events:none; contain:strict}
#v2-pt.run{display:block; pointer-events:auto}
/* once the new page starts to show, clicks go straight to it (the header's links, LinkedIn, anything): the clearing paper
   and the lines are only a picture by then */
#v2-pt.run.clearing{pointer-events:none}
#v2-pt .pt-paper{position:absolute; inset:0; display:block; background:#fcfcfc; opacity:0; will-change:opacity}
#v2-pt .pt-v, #v2-pt .pt-h{position:absolute; left:0; top:0; display:block; background:#cfcfcf; will-change:transform; backface-visibility:hidden}
#v2-pt .pt-v{width:1px; height:100%}
#v2-pt .pt-h{height:1px; width:100%}
#v2-pt .pt-dot{position:absolute; left:-3px; top:-3px; display:block; width:6px; height:6px; border-radius:50%; background:#cfcfcf; will-change:transform; backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){ #v2-pt{display:none!important} }


/* ===== location case study (loc_copy.py) ===== */
html.v2 #view-showrooms .loc-stats{grid-template-columns:repeat(2, minmax(0, 1fr))!important}
html.v2 #view-showrooms .loc-impact{max-width:640px; margin:0 auto}
/* nearest vs best: the better store leads, the nearest one sits back */
html.v2 #view-showrooms .loc-nb .nb-grid{grid-template-columns:minmax(0, 360px) minmax(0, 280px)!important; align-items:center; gap:1.5rem 2.6rem}
html.v2 #view-showrooms .loc-nb .nb-pri .sc{box-shadow:0 0 0 2px #5b3df5, 0 24px 48px -28px rgba(40,24,140,.45)}
html.v2 #view-showrooms .loc-nb .nb-sec{opacity:.62; filter:saturate(.55)}
html.v2 #view-showrooms .loc-nb .nb-sec .sc-btn.fill{background:#e9e9ee!important; color:#555!important; border-color:#e9e9ee!important}
html.v2 #view-showrooms .loc-nb .nb-sec .nb-badge{background:transparent; color:var(--g-muted, #828282)}
@media (max-width:760px){
  html.v2 #view-showrooms .loc-nb .nb-grid{grid-template-columns:minmax(0, 340px)!important; justify-content:center}
  html.v2 #view-showrooms .loc-nb .nb-sec{max-width:280px; justify-self:center}
}

/* ---- section heads: title on the left, the words on the right, so lines stay short ---- */
@media (min-width:901px){
  html.v2 #view-showrooms .section > .text:has(> p){display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:56px; row-gap:14px; align-items:start; max-width:none!important}
  html.v2 #view-showrooms .section > .text:has(> p) > h2{grid-column:1; grid-row:1 / span 6; margin:0!important; max-width:none!important}
  html.v2 #view-showrooms .section > .text:has(> p) > p{grid-column:2; margin:0!important; max-width:none!important}
  html.v2 #view-showrooms .section > .text:has(> p) > .lede{padding-top:4px}
}
/* ---- two columns: a visual on one side, short text and numbered pointers on the other ---- */
html.v2 #view-showrooms .lr{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center}
html.v2 #view-showrooms .lr + .lr{margin-top:88px}
html.v2 #view-showrooms .lr.rev .lr-txt{order:-1}
html.v2 #view-showrooms .lr-k{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #828282)}
html.v2 #view-showrooms .lr-txt h2{margin:0 0 14px; font-size:32px; line-height:1.2; font-weight:600; letter-spacing:-.03em; color:var(--g-ink, #333); text-wrap:balance}
html.v2 #view-showrooms .lr-txt h2 .lt{font-weight:300}
html.v2 #view-showrooms .lr-txt h3{margin:0 0 12px; font-size:26px; line-height:1.22; font-weight:600; letter-spacing:-.025em; color:var(--g-ink, #333); text-wrap:balance}
html.v2 #view-showrooms .lr-txt > p:not(.lr-k){margin:0; font-size:17px; line-height:1.55; color:var(--ink-2, #555)}
html.v2 #view-showrooms .pts{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px}
html.v2 #view-showrooms .pts li{display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start}
html.v2 #view-showrooms .pts b{display:block; font-size:16px; font-weight:600; color:var(--g-ink, #333); margin-bottom:2px}
html.v2 #view-showrooms .pts li span:not(.rs-n){font-size:15px; line-height:1.5; color:var(--ink-2, #555)}
html.v2 #view-showrooms .rs-n{display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; border-radius:50%;
  background:#333; color:#fff; font-size:12px; font-weight:600; line-height:1}
/* the photo, with the three pointers sitting on it */
html.v2 #view-showrooms .rs-photo{position:relative; margin:0; padding:0 0 28px}
html.v2 #view-showrooms .rs-img{border-radius:6px; overflow:hidden; border:1px solid var(--g-card-line, #e0e0e0); aspect-ratio:5 / 4; background:#f2f2f2}
html.v2 #view-showrooms .rs-img img{display:block; width:100%; height:100%; object-fit:cover}
html.v2 #view-showrooms .rs-tag{position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; background:#fff; border:1px solid var(--g-card-line, #e0e0e0);
  border-radius:6px; box-shadow:0 14px 30px -18px rgba(0,0,0,.35); font-size:14px; font-weight:500; color:var(--g-ink, #333); white-space:nowrap}
html.v2 #view-showrooms .rs-a{left:18px; bottom:0; align-items:flex-start; padding:12px 16px 14px 12px}
html.v2 #view-showrooms .rs-a b{font-size:30px; line-height:1; font-weight:600; letter-spacing:-.03em; margin-right:6px}
html.v2 #view-showrooms .rs-a > div > span{font-size:14px; color:var(--ink-2, #555)}
html.v2 #view-showrooms .rs-dots{display:grid; grid-template-columns:repeat(10, 8px); gap:5px; margin:10px 0 0}
html.v2 #view-showrooms .rs-dots i{display:block; width:8px; height:8px; border-radius:50%; background:#5b3df5}
html.v2 #view-showrooms .rs-b{left:22px; top:22px}
html.v2 #view-showrooms .rs-c{right:18px; bottom:74px}
/* the five learnings, along the visit */
html.v2 #view-showrooms .rp{position:relative; padding:26px 26px 10px; background:var(--g-card, #f2f2f2); border:1px solid var(--g-card-line, #e0e0e0); border-radius:6px}
html.v2 #view-showrooms .rp-st{position:relative; display:grid; grid-template-columns:36px 1fr; column-gap:16px; padding-bottom:18px}
html.v2 #view-showrooms .rp-st:not(:last-child)::before{content:""; position:absolute; left:17.5px; top:38px; bottom:0; border-left:1px dashed #c4c4c4}
html.v2 #view-showrooms .rp-ic{grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--g-card-line, #e0e0e0)}
html.v2 #view-showrooms .rp-ic svg{width:18px; height:18px; fill:none; stroke:#333; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
html.v2 #view-showrooms .rp-l{margin:8px 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #828282)}
html.v2 #view-showrooms .rp-is{grid-column:2; display:grid; gap:8px}
html.v2 #view-showrooms .rp-i{display:grid; grid-template-columns:26px 1fr; gap:10px; padding:12px 14px; background:#fff; border:1px solid var(--g-card-line, #e0e0e0); border-radius:6px}
html.v2 #view-showrooms .rp-n{font-size:12px; font-weight:600; color:#5b3df5; padding-top:2px}
html.v2 #view-showrooms .rp-i b{display:block; font-size:15px; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-showrooms .rp-i span:not(.rp-n){display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--ink-2, #555)}
@media (max-width:900px){
  html.v2 #view-showrooms .lr{grid-template-columns:1fr; gap:32px}
  html.v2 #view-showrooms .lr.rev .lr-txt{order:0}
  html.v2 #view-showrooms .lr + .lr{margin-top:56px}
  html.v2 #view-showrooms .lr-txt h2{font-size:26px}
  html.v2 #view-showrooms .lr-txt h3{font-size:22px}
  html.v2 #view-showrooms .rs-a{left:8px}
  html.v2 #view-showrooms .rs-c{right:8px}
  html.v2 #view-showrooms .rs-b{left:12px; top:12px}
  html.v2 #view-showrooms .rp{padding:20px 16px 4px}
}
@media (max-width:420px){
  html.v2 #view-showrooms .rs-tag{font-size:13px}
  html.v2 #view-showrooms .rs-dots{grid-template-columns:repeat(10, 6px); gap:4px}
  html.v2 #view-showrooms .rs-dots i{width:6px; height:6px}
}

html.v2 #view-showrooms .imp-g{display:grid; grid-template-columns:1fr 1fr; gap:14px}
html.v2 #view-showrooms .imp-c{display:flex; flex-direction:column; gap:6px; padding:22px; background:var(--g-card, #f2f2f2); border:1px solid var(--g-card-line, #e0e0e0); border-radius:6px}
html.v2 #view-showrooms .imp-c b{margin-top:18px; font-size:44px; line-height:1; font-weight:600; letter-spacing:-.04em; color:var(--g-ink, #333)}
html.v2 #view-showrooms .imp-c > span:last-child{font-size:15px; line-height:1.4; color:var(--ink-2, #555)}
html.v2 #view-showrooms .imp-ic{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--g-card-line, #e0e0e0)}
html.v2 #view-showrooms .imp-ic svg{width:18px; height:18px; fill:none; stroke:#333; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:420px){ html.v2 #view-showrooms .imp-c{padding:16px} html.v2 #view-showrooms .imp-c b{font-size:36px} }

html.v2 #view-showrooms .es-fig{margin:0; display:flex; justify-content:center}
html.v2 #view-showrooms .es-fig .ph{width:min(300px, 100%); border-radius:6px; overflow:hidden; border:1px solid var(--g-card-line, #e0e0e0)}
html.v2 #view-showrooms .es-fig img{display:block; width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ html.v2 #view-showrooms .es-fig .ph{width:min(260px, 80%)} }

html.v2 #view-showrooms .lr-txt h2 b{font-weight:600}
@media (max-width:600px){
  html.v2 #view-showrooms .rs-img{aspect-ratio:1 / 1}
  html.v2 #view-showrooms .rs-b{left:12px; top:12px}
  html.v2 #view-showrooms .rs-c{right:12px; left:auto; top:64px; bottom:auto}
  html.v2 #view-showrooms .rs-a{left:12px; bottom:0}
}

/* two columns: whichever side is shorter stays in view while the taller one scrolls past */
@media (min-width:901px){
  html.v2 #view-showrooms .lr{align-items:start}
  html.v2 #view-showrooms .lr > *{position:sticky; top:96px; align-self:start}
}


html.v2 #view-explore .xr-txt .xr-up{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:18px 0 0!important; padding:12px 14px; border:1px solid #cfe9da; background:#f1faf5; border-radius:6px; font-size:14px!important}
html.v2 #view-explore .xr-up b{font-size:16px; font-weight:600}
html.v2 #view-explore .xr-up span{color:var(--ink-2, #555)}

/* the explorer stays pinned while the page scrolls through its components */
html.v2 #view-explore .cx-run{position:relative; height:calc(100vh + var(--n) * 42vh); margin-top:8px}
html.v2 #view-explore .cx-run > .cx{position:sticky; top:84px; margin-top:0}
html.v2 #view-explore .cx-run .cx-list{position:static}
html.v2 #view-explore .cx-top{display:flex; justify-content:space-between; align-items:center; gap:12px; align-self:stretch; margin:0 0 10px}
html.v2 #view-explore .cx-top .cx-hint{margin:0}
html.v2 #view-explore .cx-n{margin:0; font-size:12px; color:var(--g-muted, #828282); white-space:nowrap}
html.v2 #view-explore .cx-n b{color:var(--g-ink, #333); font-weight:600}
html.v2 #view-explore .cx-pb{align-self:stretch; height:2px; margin:0 0 16px; background:#e3e3e3; border-radius:1px; overflow:hidden}
html.v2 #view-explore .cx-pb i{display:block; height:100%; background:#333; transform-origin:0 50%; transform:scaleX(0)}
@media (max-width:900px){
  html.v2 #view-explore .cx-run > .cx{top:8px}
  html.v2 #view-explore .cx-run{height:calc(100svh + var(--n) * 46svh)}
  html.v2 #view-explore .cx-top{flex-direction:column; align-items:flex-start; gap:4px}
}

/* results: the funnel */
html.v2 #view-explore .xr{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:48px; align-items:center; margin:8px 0 40px}
html.v2 #view-explore .xr .lr-k{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #828282)}
html.v2 #view-explore .xr h3{margin:0 0 12px; font-size:24px; line-height:1.25; font-weight:600; letter-spacing:-.02em; color:var(--g-ink, #333); text-wrap:balance}
html.v2 #view-explore .xr-txt > p:not(.lr-k){margin:0; font-size:16px; line-height:1.6; color:var(--ink-2, #555)}
html.v2 #view-explore .xf{padding:26px 24px 18px; background:var(--g-card, #f2f2f2); border:1px solid var(--g-card-line, #e0e0e0); border-radius:6px}
html.v2 #view-explore .xf-r{display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:14px; margin-bottom:22px}
html.v2 #view-explore .xf-l{font-size:14px; color:var(--ink-2, #555)}
html.v2 #view-explore .xf-r > b{font-size:20px; font-weight:600; text-align:right; color:var(--g-ink, #333)}
html.v2 #view-explore .xf-b{position:relative; height:28px; background:#fff; border:1px solid var(--g-card-line, #e0e0e0); border-radius:4px}
html.v2 #view-explore .xf-b i{position:absolute; left:0; top:0; bottom:0; width:var(--w); background:#333; border-radius:3px}
html.v2 #view-explore .xf-b i.g{background:#5b3df5}
html.v2 #view-explore .xf-goal{position:absolute; top:-6px; bottom:-6px; width:0; border-left:1.5px dashed #ec0131}
html.v2 #view-explore .xf-goal span{position:absolute; left:6px; top:-16px; font-style:normal; font-size:11px; font-weight:600; color:#ec0131; white-space:nowrap}
html.v2 #view-explore .xf-n{margin:4px 0 0; font-size:12px; color:var(--g-muted, #828282)}
@media (max-width:900px){
  html.v2 #view-explore .xr{grid-template-columns:1fr; gap:24px}
  html.v2 #view-explore .xf-r{grid-template-columns:1fr 36px; gap:6px 10px}
  html.v2 #view-explore .xf-l{grid-column:1 / -1}
  html.v2 #view-explore .xf{padding:22px 16px 14px}
}

/* ===== Explore: the real CMS components, big and live (exp_copy.py) ===== */
html.v2 #view-explore .cx{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:40px; align-items:start; margin-top:8px}
html.v2 #view-explore .cx-list{display:grid; gap:6px; position:sticky; top:96px}
html.v2 #view-explore .cx-t{display:grid; grid-template-columns:30px 1fr; column-gap:10px; text-align:left; padding:12px 14px; border:1px solid transparent; border-radius:6px;
  background:transparent; font:inherit; color:var(--g-ink, #333); cursor:var(--nt-cur); transition:background .2s ease, border-color .2s ease}
html.v2 #view-explore .cx-t i{grid-row:1 / span 2; font-style:normal; font-size:12px; font-weight:600; color:var(--g-muted, #828282); padding-top:2px}
html.v2 #view-explore .cx-t b{font-size:15px; font-weight:600}
html.v2 #view-explore .cx-t span{font-size:13.5px; line-height:1.45; color:var(--ink-2, #555); display:none}
html.v2 #view-explore .cx-t:hover{background:#f6f6f6}
html.v2 #view-explore .cx-t.on{background:#fff; border-color:var(--g-card-line, #e0e0e0); box-shadow:0 10px 24px -20px rgba(0,0,0,.4)}
html.v2 #view-explore .cx-t.on i{color:#5b3df5}
html.v2 #view-explore .cx-t.on span{display:block; margin-top:3px}
html.v2 #view-explore .cx-stage{position:relative; display:flex; flex-direction:column; align-items:center; padding:22px 24px 26px; background:var(--g-card, #f2f2f2); border:1px solid var(--g-card-line, #e0e0e0); border-radius:6px}
html.v2 #view-explore .cx-hint{display:flex; align-items:center; gap:8px; align-self:flex-start; margin:0 0 16px; font-size:13px; color:var(--ink-2, #555)}
html.v2 #view-explore .cx-live{width:8px; height:8px; border-radius:50%; background:#2fb36b; box-shadow:0 0 0 4px rgba(47,179,107,.18)}
html.v2 #view-explore .cx-screen{--k:1.1; position:relative; width:min(400px, 100%); height:calc(var(--k) * 340px); overflow:hidden; transition:height .45s cubic-bezier(.3,.7,.2,1); border-radius:22px; background:#fff;
  border:1px solid var(--g-card-line, #e0e0e0); box-shadow:0 30px 60px -40px rgba(20,16,60,.45); font-family:"Inter V2", Inter, system-ui, sans-serif; color:#0f172a}
html.v2 #view-explore .cx-mod{position:absolute; left:0; right:0; top:0; padding:calc(var(--k) * 16px) 0 calc(var(--k) * 8px); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s}
html.v2 #view-explore .cx-mod.on{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s}
html.v2 #view-explore .cx-mod img{display:block; user-select:none; -webkit-user-drag:none}
html.v2 #view-explore .cx-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:0 calc(var(--k) * 12px); margin-bottom:calc(var(--k) * 16px)}
html.v2 #view-explore .cx-h b{display:block; font-size:calc(var(--k) * 16px); line-height:1.3; font-weight:600; letter-spacing:-.01em}
html.v2 #view-explore .cx-h span{display:block; margin-top:2px; font-size:calc(var(--k) * 12px); color:#64748b}
html.v2 #view-explore .cx-h em{flex:none; font-style:normal; font-size:calc(var(--k) * 12px); font-weight:600; color:#4736fe; padding-top:3px}
/* swipeable rows */
html.v2 #view-explore .cx-track{display:flex; gap:calc(var(--k) * 12px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 calc(var(--k) * 12px) calc(var(--k) * 12px); scroll-padding:0 calc(var(--k) * 12px); cursor:grab; -webkit-overflow-scrolling:touch}
html.v2 #view-explore .cx-track::-webkit-scrollbar{display:none}
html.v2 #view-explore .cx-track.drag{cursor:grabbing; scroll-snap-type:none}
html.v2 #view-explore .cx-track > *{flex:none; scroll-snap-align:start}
html.v2 #view-explore .cx-tr-p img{width:calc(var(--k) * 200px); height:calc(var(--k) * 240px)}
html.v2 #view-explore .cx-tr-s img{width:calc(var(--k) * 150px); height:calc(var(--k) * 150px)}
html.v2 #view-explore .cx-tr-t img{width:calc(var(--k) * 288px); height:calc(var(--k) * 288px)}
html.v2 #view-explore .cx-tr-h img{width:calc(var(--k) * 280px); height:auto}
/* single banner: one slot, four tabs */
html.v2 #view-explore .cx-mod[data-c="banner"]{padding:calc(var(--k) * 20px) 0 calc(var(--k) * 16px)}
html.v2 #view-explore .cx-ban{position:relative; width:calc(var(--k) * 360px); height:calc(var(--k) * 450px)}
html.v2 #view-explore .cx-ban img{position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
html.v2 #view-explore .cx-ban img.on{opacity:1; transform:none}
/* rotating carousel */
html.v2 #view-explore .cx-rot{position:relative; height:calc(var(--k) * 300px); touch-action:pan-y}
html.v2 #view-explore .cx-rot img{position:absolute; left:50%; top:0; width:calc(var(--k) * 288px); height:calc(var(--k) * 288px); margin-left:calc(var(--k) * -144px); cursor:var(--nt-cur);
  transition:transform .6s cubic-bezier(.3,.7,.2,1), opacity .6s ease; will-change:transform}
html.v2 #view-explore .cx-dots{display:flex; justify-content:center; gap:6px}
html.v2 #view-explore .cx-dots i{width:6px; height:6px; border-radius:3px; background:#d4d4dc; transition:width .3s ease, background .3s ease}
html.v2 #view-explore .cx-dots i.on{width:18px; background:#4736fe}
/* grids */
html.v2 #view-explore .cx-gv{display:none; padding-bottom:calc(var(--k) * 8px)}
html.v2 #view-explore .cx-gv.on{display:block; animation:cxFade .35s ease both}
@keyframes cxFade{from{opacity:0} to{opacity:1}}
html.v2 #view-explore .cx-g2{position:relative; width:calc(var(--k) * 360px)}
html.v2 #view-explore .cx-g2 img{width:100%; height:auto}
html.v2 #view-explore .cx-cell{position:absolute; border-radius:calc(var(--k) * 12px); transition:box-shadow .2s ease, background .2s ease; cursor:var(--nt-cur)}
html.v2 #view-explore .cx-cell:hover{box-shadow:0 0 0 2px #4736fe inset; background:rgba(71,54,254,.04)}
html.v2 #view-explore .cx-g1{width:calc(var(--k) * 360px); height:auto}
/* stories */
html.v2 #view-explore .cx-st{position:relative; padding:0; border:0; background:none; cursor:var(--nt-cur); border-radius:calc(var(--k) * 12px); overflow:hidden}
html.v2 #view-explore .cx-st img{width:calc(var(--k) * 210px); height:calc(var(--k) * 280px); transition:transform .4s ease}
html.v2 #view-explore .cx-st:hover img{transform:scale(1.03)}
html.v2 #view-explore .cx-play{position:absolute; left:50%; top:50%; width:calc(var(--k) * 40px); height:calc(var(--k) * 40px); margin:calc(var(--k) * -20px) 0 0 calc(var(--k) * -20px);
  display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff}
html.v2 #view-explore .cx-play svg{width:46%; height:46%; fill:#0f172a; margin-left:8%}
html.v2 #view-explore .cx-sv{position:absolute; inset:0; z-index:5; background:#000; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s}
html.v2 #view-explore .cx-sv.on{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s}
html.v2 #view-explore .cx-sv img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
html.v2 #view-explore .cx-sv-bars{position:absolute; z-index:2; left:12px; right:12px; top:12px; display:flex; gap:4px}
html.v2 #view-explore .cx-sv-bars i{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden}
html.v2 #view-explore .cx-sv-bars b{display:block; height:100%; width:0; background:#fff}
html.v2 #view-explore .cx-sv-x{position:absolute; z-index:3; right:10px; top:22px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1; cursor:var(--nt-cur)}
html.v2 #view-explore .cx-sv-p, html.v2 #view-explore .cx-sv-n{position:absolute; z-index:2; top:60px; bottom:0; width:40%; border:0; background:none; cursor:var(--nt-cur)}
html.v2 #view-explore .cx-sv-p{left:0} html.v2 #view-explore .cx-sv-n{right:0}
/* tabbed slider */
html.v2 #view-explore .cx-chips{display:flex; gap:calc(var(--k) * 8px); padding:0 calc(var(--k) * 12px); margin:calc(var(--k) * -4px) 0 calc(var(--k) * 16px)}
html.v2 #view-explore .cx-chips button{height:calc(var(--k) * 32px); padding:0 calc(var(--k) * 12px); border:1px solid #e2e8f0; border-radius:calc(var(--k) * 8px); background:#fff; font:inherit;
  font-size:calc(var(--k) * 13px); color:#0f172a; cursor:var(--nt-cur); transition:border-color .2s ease, background .2s ease, color .2s ease}
html.v2 #view-explore .cx-chips button.on{border-color:#4736fe; background:#eef0ff; color:#4736fe; font-weight:600}
html.v2 #view-explore .cx-tr-t.swap img{animation:cxIn .45s cubic-bezier(.2,.7,.2,1) both}
html.v2 #view-explore .cx-tr-t.swap img:nth-child(2){animation-delay:.05s}
html.v2 #view-explore .cx-tr-t.swap img:nth-child(3){animation-delay:.1s}
@keyframes cxIn{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}
/* the switches under the screen */
html.v2 #view-explore .cx-ctl{display:none; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px}
html.v2 #view-explore .cx-ctl.on{display:flex}
html.v2 #view-explore .cx-ctl button{height:30px; padding:0 12px; border:1px solid var(--g-card-line, #e0e0e0); border-radius:2px; background:#fff; font:inherit; font-size:13px; color:var(--ink-2, #555); cursor:var(--nt-cur)}
html.v2 #view-explore .cx-ctl button.on{border-color:#333; color:#333; font-weight:600}
@media (max-width:900px){
  html.v2 #view-explore .cx{grid-template-columns:1fr; gap:14px}
  html.v2 #view-explore .cx-list{position:static; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 4px}
  html.v2 #view-explore .cx-list::-webkit-scrollbar{display:none}
  html.v2 #view-explore .cx-t{flex:none; display:flex; align-items:center; gap:6px; padding:8px 12px; border-color:var(--g-card-line, #e0e0e0); background:#fff}
  html.v2 #view-explore .cx-t.on{border-color:#333}
  html.v2 #view-explore .cx-t span, html.v2 #view-explore .cx-t.on span{display:none}
  html.v2 #view-explore .cx-t b{font-size:13.5px; white-space:nowrap}
  html.v2 #view-explore .cx-stage{padding:16px 12px 18px}
}
@media (prefers-reduced-motion:reduce){ html.v2 #view-explore .cx-rot img, html.v2 #view-explore .cx-ban img{transition:none} }


/* growth: green, with an upward arrow */
html.v2 .up{color:#12824a!important; -webkit-text-fill-color:#12824a; background:none!important; white-space:nowrap}
html.v2 .up::before{content:""; display:inline-block; width:.52em; height:.64em; margin-right:.14em; vertical-align:-.03em; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0 10 5.4H6.7V12H3.3V5.4H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0 10 5.4H6.7V12H3.3V5.4H0Z'/%3E%3C/svg%3E") center / contain no-repeat}
html.v2 .up-i{font-weight:600}
html.v2 .stat b.up .rt-count{color:inherit!important; -webkit-text-fill-color:inherit}
html.v2 .imp3 .im:has(> b.up) > i{display:none}


/* ===== the location page's layout, in every case study (v2new/cs_layout.py) ===== */
/* list sections: every item gets a pointer, a number or its icon */
html.v2 .section.cs-lr :is(.tri, .qgrid, .lessons, .next2){counter-reset:cs; display:grid; grid-template-columns:minmax(0, 1fr)!important; gap:12px; margin-top:0}
html.v2 .section.cs-lr :is(.tri-i, .qt, .ls){display:grid!important; grid-template-columns:30px minmax(0, 1fr); column-gap:16px; row-gap:4px; align-content:start; align-items:start;
  padding:18px 20px 19px!important; min-height:0!important; counter-increment:cs; border-radius:var(--g-r, 14px)}
html.v2 .section.cs-lr .ls{background:var(--g-card); border:1px solid var(--g-card-line)}
html.v2 .section.cs-lr :is(.tri-i, .qt, .ls) > :not(i):not(svg){grid-column:2; margin:0}
html.v2 .section.cs-lr :is(.tri-i, .qt, .ls) > b{font-size:16px; line-height:1.35; font-weight:600; color:var(--g-ink)}
html.v2 .section.cs-lr :is(.tri-i, .qt, .ls) > :is(span, p){font-size:15px; line-height:1.5; color:var(--ink-2)}
html.v2 .section.cs-lr .qt > p{font-size:16px; line-height:1.45; color:var(--g-ink)}
/* the pointer: a dark numbered dot, like the location page's, or the item's own icon in a light one */
html.v2 .section.cs-lr :is(.qt, .ls) > i{grid-column:1; grid-row:1 / span 3; align-self:start; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0!important; border-radius:50%; background:#333; color:#fff; font-size:12px; font-weight:600; line-height:1; font-style:normal; letter-spacing:0}
html.v2 .section.cs-lr .tri-i:not(:has(> svg))::before{content:counter(cs); grid-column:1; grid-row:1 / span 3; align-self:start; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0!important; border-radius:50%; background:#333; color:#fff; font-size:12px; font-weight:600; line-height:1; font-style:normal; letter-spacing:0}
html.v2 .section.cs-lr .tri-i > svg{grid-column:1; grid-row:1 / span 3; width:30px!important; height:30px!important; margin:-2px 0 0!important; padding:6px; box-sizing:border-box;
  border-radius:50%; background:#fff; border:1px solid var(--g-card-line); color:var(--g-ink)}
html.v2 .section.cs-lr .fg-two{grid-template-columns:minmax(0, 1fr)!important; margin-top:0}
html.v2 .section.cs-lr .fg-quote{margin-top:16px}
html.v2 #view-play .section.cs-lr > .text > .goal{margin-top:16px}

@media (min-width:901px){
  /* section heads: the title on the left, its words on the right */
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section:not(.cs-lr) > .text:has(> p){display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:56px; row-gap:14px; align-items:start; max-width:none!important}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section:not(.cs-lr) > .text:has(> p) > h2{grid-column:1; grid-row:1 / span 6; margin:0!important; max-width:none!important}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section:not(.cs-lr) > .text:has(> p) > :not(h2){grid-column:2; margin:0!important; max-width:none!important}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section:not(.cs-lr) > .text:has(> p) > .lede{padding-top:4px}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section:not(.cs-lr) > .text:has(> p) > .goal{font-size:22px; line-height:1.35}
  /* list sections: the words on the left stay put while the list on the right scrolls by */
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:56px; align-items:start}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr > .text{grid-column:1; grid-row:1 / span 4; position:sticky; top:96px; align-self:start; max-width:none!important}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr > .text > p{max-width:none!important}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr > .text > .goal{font-size:20px; line-height:1.4}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr > .wide{grid-column:2; max-width:none!important; min-width:0}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr > .wide + .wide{margin-top:16px}
  html.v2 :is(#view-times, #view-fastag, #view-play, #view-explore) .section.cs-lr.cs-c2 :is(.tri, .qgrid, .lessons, .next2){grid-template-columns:repeat(2, minmax(0, 1fr))!important}
}

/* RTO results: the same bars as before; the increase is small */
html.v2 #view-rto .ib-d{font-size:12px; font-weight:600; letter-spacing:0}
/* RTO: the comparison on the left, what changed on the right */
html.v2 #view-rto .cs-cmp{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:56px; align-items:center; margin-top:28px}
html.v2 #view-rto .cs-cmp > .cmp{width:min(360px, 100%); margin:0 auto}
html.v2 #view-rto .cs-sides{display:grid; gap:36px}
html.v2 #view-rto .cs-side{transition:opacity .45s ease; opacity:.38}
html.v2 #view-rto .cs-side.on{opacity:1}
html.v2 #view-rto .cs-k{margin:0 0 14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #828282)}
html.v2 #view-rto .cs-side.new .cs-k{color:#12824a}
html.v2 #view-rto .cs-pts{list-style:none; margin:0; padding:0; display:grid; gap:16px}
html.v2 #view-rto .cs-pts li{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start}
html.v2 #view-rto .cs-pts b{display:block; font-size:16px; line-height:1.35; font-weight:600; color:var(--g-ink, #333); margin-bottom:2px}
html.v2 #view-rto .cs-pts li div > span{font-size:15px; line-height:1.5; color:var(--ink-2, #555)}
html.v2 #view-rto .cs-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-size:12px; font-weight:600; line-height:1}
html.v2 #view-rto .cs-side.new .cs-n{background:#12824a}
@media (max-width:900px){
  html.v2 #view-rto .cs-cmp{grid-template-columns:minmax(0, 1fr); row-gap:32px}
  html.v2 #view-rto .cs-cmp > .cmp{width:min(340px, 86%)}
  html.v2 #view-rto .cs-side{opacity:1}
}
/* RTO: the comparison and the explorations move with the scroll */
html.v2 #view-rto .cmp.cs-auto .cmp-h::after{transition:transform .3s}
html.v2 #view-rto .fs.cs-auto{scroll-snap-type:none}


/* ===== Bharat RTO: needs -> the app -> 20 Cr+ owners -> value for Cars24 (v2new/rto_reach.py) ===== */
html.v2 #view-rto .bx{--bx-ink:#333; --bx-biz:#5b3df5; --bx-line:#cfcfcf; display:grid; grid-template-columns:minmax(0, 1fr) 64px minmax(0, 1.1fr) 64px minmax(0, 1fr); align-items:start; margin-top:12px}
html.v2 #view-rto .bx-k{margin:0 0 16px; font-size:12px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #828282)}
html.v2 #view-rto .bx-k.biz{color:var(--bx-biz)}
html.v2 #view-rto .bx-list{list-style:none; margin:0; padding:0; display:grid; gap:18px}
html.v2 #view-rto .bx-list li{display:grid; grid-template-columns:8px minmax(0, 1fr); column-gap:14px; align-items:start}
html.v2 #view-rto .bx-list li::before{content:""; grid-row:1 / span 2; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--bx-ink)}
html.v2 #view-rto .bx-list.biz li::before{background:var(--bx-biz)}
html.v2 #view-rto .bx-list b{font-size:17px; line-height:1.3; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-rto .bx-list span{font-size:14.5px; line-height:1.45; color:var(--ink-2, #555)}
html.v2 #view-rto .bx-app{text-align:center}
html.v2 #view-rto .bx-app .bx-k, html.v2 #view-rto .bx-app .bx-s{text-align:left}
html.v2 #view-rto .bx-app .bx-k{margin-bottom:6px}
html.v2 #view-rto .bx-s{margin:0 0 26px; font-size:16px; line-height:1.4; font-weight:500; color:var(--g-ink, #333)}
html.v2 #view-rto .bx-ui{margin:0}
html.v2 #view-rto .bx-scr{position:relative; width:min(290px, 100%); margin:0; border-radius:22px; overflow:visible; background:#fff; border:1px solid var(--g-card-line, #e6e6e6); box-shadow:0 30px 60px -38px rgba(0,0,0,.45)}
html.v2 #view-rto .bx-scr img{display:block; width:100%; height:auto; border-radius:21px}
html.v2 #view-rto .bx-hl{position:absolute; left:2.5%; right:2.5%; border-radius:14px; border:2px solid var(--bx-ink); pointer-events:none}
html.v2 #view-rto .bx-hl.biz{border-color:var(--bx-biz); background:rgba(91, 61, 245, .035)}
html.v2 #view-rto .bx-hl em{position:absolute; top:-9px; left:10px; padding:2px 8px; border-radius:999px; background:var(--bx-ink); color:#fff; font-style:normal; font-size:10.5px; line-height:1.3; font-weight:600; white-space:nowrap}
html.v2 #view-rto .bx-hl.biz em{background:var(--bx-biz)}
html.v2 #view-rto .bx-cap{max-width:290px; margin:14px 0 0; text-align:left; font-size:13.5px; line-height:1.45; color:var(--g-muted, #828282)}
/* the links between the parts: a quiet line that points the way */
html.v2 #view-rto .bx-to{position:relative; display:block; height:1px; margin:7px 10px 0; background:var(--bx-line)}
html.v2 #view-rto .bx-to::after{content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:1.5px solid var(--bx-line); border-right:1.5px solid var(--bx-line); transform:rotate(45deg)}
html.v2 #view-rto .bx-big{display:block; font-size:60px; line-height:1; font-weight:600; letter-spacing:-.035em; color:var(--g-ink, #333)}
html.v2 #view-rto .bx-reach > span{display:block; margin-top:10px; font-size:16px; color:var(--ink-2, #555)}
html.v2 #view-rto .bx-down{position:relative; display:block; width:1px; height:40px; margin:26px 0 22px 3.5px; background:var(--bx-line)}
html.v2 #view-rto .bx-down::after{content:""; position:absolute; bottom:-1px; left:-4px; width:8px; height:8px; border-right:1.5px solid var(--bx-line); border-bottom:1.5px solid var(--bx-line); transform:rotate(45deg)}
/* it reads in order as it arrives: needs, the app and its outlines, the reach, the value */
html.v2 #view-rto .bx > *, html.v2 #view-rto .bx-hl, html.v2 #view-rto .bx-out > *{transition:opacity .7s ease, translate .8s cubic-bezier(.2,.7,.2,1)}
html.v2 #view-rto .bx > :nth-child(2){transition-delay:.15s} html.v2 #view-rto .bx > :nth-child(3){transition-delay:.25s}
html.v2 #view-rto .bx > :nth-child(4){transition-delay:.45s} html.v2 #view-rto .bx-out > :nth-child(1){transition-delay:.55s}
html.v2 #view-rto .bx-out > :nth-child(2){transition-delay:.7s} html.v2 #view-rto .bx-out > :nth-child(3){transition-delay:.8s}
html.v2 #view-rto .bx-hl.need{transition-delay:.6s} html.v2 #view-rto .bx-hl.biz{transition-delay:.9s}
html.v2 #view-rto .section.sr:not(.in) .bx > *, html.v2 #view-rto .section.sr:not(.in) .bx-out > *{opacity:0; translate:0 14px}
html.v2 #view-rto .section.sr:not(.in) .bx-hl{opacity:0}
@media (max-width:900px){
  html.v2 #view-rto .bx{grid-template-columns:minmax(0, 1fr); row-gap:0}
  html.v2 #view-rto .bx-to{width:1px; height:36px; margin:28px 0 28px 3.5px}
  html.v2 #view-rto .bx-to::after{right:auto; top:auto; bottom:-1px; left:-4px; border-top:0; border-bottom:1.5px solid var(--bx-line); transform:rotate(45deg)}
  html.v2 #view-rto .bx-app{text-align:left}
  html.v2 #view-rto .bx-scr{width:min(280px, 82%); margin:0}
  html.v2 #view-rto .bx-cap{margin-left:0}
  html.v2 #view-rto .bx-big{font-size:48px}
  html.v2 #view-rto .bx-needs .bx-list{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:18px}
}
@media (prefers-reduced-motion:reduce){ html.v2 #view-rto .bx *, html.v2 #view-rto .bx > *{transition:none!important} }


/* ===== Bharat RTO after the design review (v2new/rto_review.py) ===== */
/* section heads: the heading gets the width, its line sits under it as body text */
html.v2 #view-rto .section > .text > h2{max-width:940px!important}
html.v2 #view-rto .section > .text > .lede{max-width:720px!important; margin-top:0}

/* one phone frame for every screen here: real proportions, the screen cropped, never stretched */
html.v2 #view-rto .phone.rt-pf > .ph{aspect-ratio:460 / 997}
html.v2 #view-rto .phone.rt-pf > .ph > img:first-child{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}

/* homepage review */
html.v2 #view-rto .hr{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); column-gap:48px; align-items:center; margin-top:28px}
html.v2 #view-rto .hr-phones{display:flex; justify-content:center; gap:72px; padding:0 36px}
html.v2 #view-rto .hr-f{margin:0; width:min(250px, 45%)}
html.v2 #view-rto .hr-f .phone{width:100%}
html.v2 #view-rto .hr-f figcaption{margin-top:12px; text-align:center; font-size:13.5px; color:var(--g-muted, #828282)}
html.v2 #view-rto .hr-m{position:absolute; z-index:3; display:flex; align-items:center; transform:translateY(-50%)}
html.v2 #view-rto .hr-m.l{right:100%; flex-direction:row}
html.v2 #view-rto .hr-m.r{left:100%; flex-direction:row-reverse}
html.v2 #view-rto .hr-m b{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-size:12px; font-weight:600}
html.v2 #view-rto .hr-m::after{content:""; display:block; width:12px; height:1.5px; background:#333}
html.v2 #view-rto .hr-list{list-style:none; margin:0; padding:0; display:grid; gap:20px}
html.v2 #view-rto .hr-list li{display:grid; grid-template-columns:24px minmax(0, 1fr); column-gap:14px; align-items:start}
html.v2 #view-rto .hr-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-size:12px; font-weight:600}
html.v2 #view-rto .hr-list b{display:block; font-size:16.5px; line-height:1.35; font-weight:600; color:var(--g-ink, #333); margin-bottom:3px}
html.v2 #view-rto .hr-list li div > span{font-size:15px; line-height:1.5; color:var(--ink-2, #555)}

/* drop off: one insight per block */
html.v2 #view-rto .dp4{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:6px}
html.v2 #view-rto .dp{display:grid; grid-template-columns:132px minmax(0, 1fr); column-gap:24px; align-items:center; padding:24px; border-radius:var(--g-r, 14px); background:var(--g-card, #f4f4f4); border:1px solid var(--g-card-line, #e6e6e6)}
html.v2 #view-rto .dp-g{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; width:132px}
html.v2 #view-rto .dp-g i{display:block; aspect-ratio:1; border-radius:50%; background:#333}
html.v2 #view-rto .dp-g i.x{background:#f2a7b0}
html.v2 #view-rto .dp-ph{width:84px; margin:0 auto}
html.v2 #view-rto .dp-ph .phone{width:100%}
html.v2 #view-rto .dp-n{display:block; font-size:34px; line-height:1.05; font-weight:600; letter-spacing:-.03em; color:var(--g-ink, #333)}
html.v2 #view-rto .dp-l{margin:6px 0 0; font-size:16px; line-height:1.4; color:var(--g-ink, #333)}
html.v2 #view-rto .dp-f{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--g-card-line, #e2e2e2); font-size:14.5px; line-height:1.45; color:var(--ink-2, #555)}
html.v2 #view-rto .dp-f span{font-weight:600; color:#12824a}
/* the homepage rules: one rule, the part of the screen it is about */
html.v2 #view-rto .pr3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:6px}
html.v2 #view-rto .pr3-i{margin:0; display:flex; flex-direction:column; gap:16px}
html.v2 #view-rto .pr3-v{border-radius:var(--g-r, 14px); overflow:hidden; border:1px solid var(--g-card-line, #e6e6e6); background:#fff; aspect-ratio:600 / 470}
html.v2 #view-rto .pr3-v img{display:block; width:100%; height:100%; object-fit:cover; object-position:top}
html.v2 #view-rto .pr3-i figcaption{display:grid; grid-template-columns:24px minmax(0, 1fr); column-gap:12px; row-gap:4px}
html.v2 #view-rto .pr3-i figcaption i{grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-style:normal; font-size:12px; font-weight:600}
html.v2 #view-rto .pr3-i figcaption b{font-size:16.5px; line-height:1.35; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-rto .pr3-i figcaption span{font-size:15px; line-height:1.5; color:var(--ink-2, #555)}

/* where each of the 11 features happens */
html.v2 #view-rto .fx-tag{display:inline-block; align-self:flex-start; justify-self:start; width:max-content; max-width:100%; margin:0 0 10px; padding:3px 9px; border-radius:999px; background:#eef0f3; color:#555; font-size:11.5px; font-weight:600; letter-spacing:.01em}
/* Why lines */
html.v2 #view-rto .why{display:block; margin-top:8px; font-style:normal; font-size:13.5px; line-height:1.45; color:var(--ink-2, #555)}
html.v2 #view-rto .why > b{display:inline!important; font-size:inherit!important; line-height:inherit!important; letter-spacing:0!important; font-weight:600; color:#12824a; margin:0 4px 0 0!important}
html.v2 #view-rto .step .why{margin-top:10px; padding-top:10px; border-top:1px solid var(--g-line, #e5e5e5)}

/* the comparison inside a real phone */
html.v2 #view-rto .cs-cmp > .phone.cmp-pf{width:min(330px, 100%); margin:0 auto}
html.v2 #view-rto .cmp-pf > .ph{aspect-ratio:420 / 895}
html.v2 #view-rto .cmp-pf .cmp{position:absolute; inset:0; width:100%; height:100%; margin:0; border:0; border-radius:0; box-shadow:none; aspect-ratio:auto}
html.v2 #view-rto .cs-more{margin:0; font-size:15px; line-height:1.5; color:var(--ink-2, #555)}

/* the twelve explorations keep their own shape */
html.v2 #view-rto .fs-t{align-items:flex-start}
html.v2 #view-rto .fs-t img{height:auto!important; object-fit:contain}

@media (max-width:900px){
  html.v2 #view-rto .hr{grid-template-columns:minmax(0, 1fr); row-gap:32px}
  html.v2 #view-rto .hr-phones{gap:44px; padding:0 30px}
  html.v2 #view-rto .dp4, html.v2 #view-rto .pr3{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:480px){
  html.v2 #view-rto .dp{grid-template-columns:96px minmax(0, 1fr); column-gap:18px; padding:18px}
  html.v2 #view-rto .dp-g{width:96px; gap:3px}
  html.v2 #view-rto .dp-ph{width:70px}
  html.v2 #view-rto .dp-n{font-size:28px}
  html.v2 #view-rto .hr-phones{gap:36px; padding:0 26px}
}


/* ===== Bharat RTO: every flow, screen by screen (v2new/rto_flows.py) ===== */
html.v2 #view-rto .rf-run{position:relative; margin-top:12px}
html.v2 #view-rto .rf{--pw:210px; position:sticky; top:84px; display:flex; flex-direction:column; gap:14px}
html.v2 #view-rto .rf-top{display:flex; align-items:center; justify-content:space-between; gap:20px}
html.v2 #view-rto .rf-tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px}
html.v2 #view-rto .rf-tabs::-webkit-scrollbar{display:none}
html.v2 #view-rto .rf-t{flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--g-card-line, #e4e4e4); background:var(--g-card, #f4f4f4);
  font:inherit; font-size:14px; color:var(--ink-2, #555); cursor:var(--nt-cur); transition:background .25s, color .25s, border-color .25s}
html.v2 #view-rto .rf-t b{font-weight:600}
html.v2 #view-rto .rf-t small{font-size:11.5px; color:var(--g-muted, #8a8a8a)}
html.v2 #view-rto .rf-t.on{background:#333; border-color:#333; color:#fff}
html.v2 #view-rto .rf-t.on small{color:rgba(255,255,255,.7)}
html.v2 #view-rto .rf-count{flex:none; margin:0; font-size:13px; color:var(--g-muted, #8a8a8a); font-variant-numeric:tabular-nums}
html.v2 #view-rto .rf-count b{font-size:20px; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-rto .rf-bar{height:2px; border-radius:2px; background:var(--g-line, #e6e6e6); overflow:hidden}
html.v2 #view-rto .rf-bar i{display:block; height:100%; background:#333; transform-origin:left center; transform:scaleX(0)}
html.v2 #view-rto .rf-view{overflow:hidden; margin:0 -2px; padding:6px 2px 10px}
html.v2 #view-rto .rf-track{display:flex; gap:56px; width:max-content; will-change:transform}
html.v2 #view-rto .rf-g{display:flex; gap:26px; align-items:flex-start}
html.v2 #view-rto .rf-intro{flex:none; width:260px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:28px 26px; border-radius:var(--g-r, 16px);
  background:var(--g-card, #f4f4f4); border:1px solid var(--g-card-line, #e4e4e4)}
html.v2 #view-rto .rf-k{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--g-muted, #8a8a8a)}
html.v2 #view-rto .rf-intro h3{margin:0 0 10px; font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-.02em; color:var(--g-ink, #333)}
html.v2 #view-rto .rf-intro p:not(.rf-k){margin:0; font-size:15px; line-height:1.5; color:var(--ink-2, #555)}
html.v2 #view-rto .rf-c{margin-top:18px; font-size:13px; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-rto .rf-s{flex:none; width:var(--pw); margin:0; transition:opacity .4s ease}
html.v2 #view-rto .rf-ph{padding:5px; border-radius:15% / 7%; background:#141416; box-shadow:inset 0 0 0 1px #2a2a2e, 0 22px 40px -26px rgba(0,0,0,.5)}
html.v2 #view-rto .rf-scr{position:relative; aspect-ratio:360 / 800; border-radius:12.5% / 5.6%; overflow:hidden; background:#fff}
html.v2 #view-rto .rf-scr img{position:absolute; left:0; top:0; display:block; width:100%; height:auto; transform:translateY(0); transition:transform .8s cubic-bezier(.4,0,.2,1)}
html.v2 #view-rto .rf-s.rf-tall.on .rf-scr img{transform:translateY(calc(-1 * var(--pan))); transition:transform var(--dur) cubic-bezier(.45,0,.55,1) .7s}
html.v2 #view-rto .rf-s figcaption{display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:8px; row-gap:3px; margin-top:14px}
html.v2 #view-rto .rf-s figcaption i{grid-row:1 / span 2; font-style:normal; font-size:12px; font-weight:600; line-height:1.6; color:var(--g-muted, #8a8a8a); font-variant-numeric:tabular-nums}
html.v2 #view-rto .rf-s figcaption b{font-size:14.5px; line-height:1.35; font-weight:600; color:var(--g-ink, #333)}
html.v2 #view-rto .rf-s figcaption span{font-size:13px; line-height:1.45; color:var(--ink-2, #555)}
/* while the strip moves, the screen in the middle is the one to look at */
html.v2 #view-rto .rf.live .rf-s:not(.on){opacity:.62}
@media (max-width:760px){
  html.v2 #view-rto .rf{top:8px; gap:10px}
  html.v2 #view-rto .rf-top{flex-direction:column; align-items:stretch; gap:8px}
  html.v2 #view-rto .rf-count{order:-1}
  html.v2 #view-rto .rf-intro{width:210px; padding:22px 20px}
  html.v2 #view-rto .rf-intro h3{font-size:20px}
  html.v2 #view-rto .rf-track{gap:36px}
  html.v2 #view-rto .rf-g{gap:18px}
}
html.v2 #view-rto .rf-row{display:contents}
html.v2 #view-rto .rf-c i{font-style:normal}
html.v2 #view-rto .rf-mb{display:none}
/* phones: no pinned strip. Each flow is its own block, its card on top and its screens in a row you swipe */
@media (max-width:760px){
  html.v2 #view-rto .rf-dk{display:none}
  html.v2 #view-rto .rf-mb{display:inline}
  html.v2 #view-rto .rf-run{height:auto!important}
  html.v2 #view-rto .rf{position:static; --pw:min(58vw, 230px)!important}
  html.v2 #view-rto .rf-top, html.v2 #view-rto .rf-bar{display:none}
  html.v2 #view-rto .rf-view{overflow:visible; margin:0; padding:0}
  html.v2 #view-rto .rf-track{display:block; width:auto; transform:none!important}
  html.v2 #view-rto .rf-g{display:block; margin:0 0 40px}
  html.v2 #view-rto .rf-intro{width:auto; display:block; padding:20px; margin:0 0 14px}
  html.v2 #view-rto .rf-intro .rf-c{display:block}
  html.v2 #view-rto .rf-row{display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-left:0;
    margin:0 -16px 0 0; padding:2px 16px 10px 0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  html.v2 #view-rto .rf-row::-webkit-scrollbar{display:none}
  html.v2 #view-rto .rf-s{scroll-snap-align:start; opacity:1!important}
}
/* no motion: the strip is a plain sideways scroller */
html.v2 #view-rto .rf-run.still .rf{position:static}
html.v2 #view-rto .rf-run.still .rf-view{overflow-x:auto}


/* ===== About: the photo that turns into pixels and back, on a small pixel golf green (v2new/about_me.py) ===== */
html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr) 340px; align-items:center; padding-top:88px; padding-bottom:40px}
html.v2 .g-ab-me.ab-px{width:340px; aspect-ratio:380 / 620; border:0; border-radius:0; background:none; overflow:visible; justify-self:end}
html.v2 .ab-px > *{position:absolute}
html.v2 .ab-px-env{inset:0; width:100%; height:100%; display:block}
/* each picture has its own shadow, cast by the scene's light; the pixel one fades in while the figure changes */
html.v2 .ab-px-env.px{opacity:0; transition:opacity 2.6s cubic-bezier(.45,0,.55,1)}
html.v2 .ab-px.px-on .ab-px-env.px{opacity:1}
html.v2 .ab-px-fig img, html.v2 .ab-px-fig canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
html.v2 .ab-px-fig .ab-px-b{visibility:hidden}
html.v2 .ab-px-fig canvas{opacity:0}
html.v2 .ab-px.ready .ab-px-fig canvas{opacity:1}
html.v2 .ab-px.ready .ab-px-fig .ab-px-a{visibility:hidden}
html.v2 .ab-px-fl{inset:0; pointer-events:none}
html.v2 .g-ab-me.ab-px .ab-px-f{position:absolute; display:block; height:auto; object-fit:fill; animation:abFloat 6s ease-in-out infinite}
html.v2 .ab-px-f.f-g1{animation-duration:5.2s; animation-delay:-1.2s}
html.v2 .ab-px-f.f-g2{animation-duration:6.4s; animation-delay:-3s}
html.v2 .ab-px-f.f-g3{animation-duration:4.8s; animation-delay:-2s}
html.v2 .ab-px-f.f-g4{animation-duration:5.8s; animation-delay:-4.1s}
html.v2 .ab-px-f.f-stack{animation-duration:7s}
@keyframes abFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
@media (max-width:1100px){
  html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr) 290px}
  html.v2 .g-ab-me.ab-px{width:290px}
}
@media (max-width:900px){
  html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr) 230px}
  html.v2 .g-ab-me.ab-px{width:230px}
}
@media (max-width:720px){
  html.v2 .g-ab-hero .g-c{grid-template-columns:minmax(0,1fr); padding-top:40px}
  html.v2 .g-ab-me.ab-px{width:min(260px, 72vw); justify-self:center; margin:0 0 -8px}
}
@media (prefers-reduced-motion:reduce){ html.v2 .ab-px-f{animation:none} }


/* each job card opens with a band in the company's colour: its logo on the left, the dates on the right */
html.v2 .g-ab-job{overflow:hidden; padding-top:0!important}
html.v2 .g-ab-band{display:flex; align-items:center; justify-content:space-between; gap:12px; height:42px; box-sizing:border-box; margin:0 -22px 4px; padding:0 22px; background:var(--b); color:#fff}
html.v2 .g-ab-band img{display:block; width:auto; flex:none}
html.v2 .g-ab-band .g-ab-when{font-size:12.5px; line-height:1.2; letter-spacing:-.01em; white-space:nowrap; color:rgba(255,255,255,.94)}
html.v2 .g-ab-band-delicut{--b:#ff4122} html.v2 .g-ab-band-delicut img{height:14px}
html.v2 .g-ab-band-cars24{--b:#4736fe} html.v2 .g-ab-band-cars24 img{height:15px}
html.v2 .g-ab-band-dew{--b:#19217f} html.v2 .g-ab-band-dew img{height:23px}
html.v2 .g-ab-job .g-ab-jh .g-t{margin-top:14px}
/* Delicut: a short summary, then its impact */
html.v2 .g-band .g-ab-job .g-ab-sum{margin:14px 0 0; font-size:14px; line-height:1.55; letter-spacing:-.01em; color:#555}
html.v2 .g-band .g-ab-job .g-ab-imp{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--g-card-line); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g-muted, #8a8a8a)}
html.v2 .g-band .g-ab-job ul.g-ab-impl{margin-top:10px; padding-top:0; border-top:0}
@media (max-width:900px){ html.v2 .g-ab-band{margin:0 -16px 4px; padding:0 16px; height:40px} }
/* ===== About: FAQ at the end (v2new/about_page.py); the home FAQ's look, one band further down ===== */


/* ---------- header, 900px and narrower: two rows, nothing hidden ---------- */
@media (max-width:900px){
  html.v2 .g-head .g-c{flex-wrap:wrap; row-gap:12px}
  html.v2 .g-head .g-nav{display:contents}
  html.v2 .g-head .g-me{order:1; flex:1 1 0; min-width:0}
  html.v2 .g-head .g-nav .g-cta{order:2; flex:none}
  html.v2 .g-head .g-nav .g-tabs{order:3; flex:1 1 100%; display:flex}
  html.v2 .g-head .g-nav .g-tabs a.g-tab{flex:1 1 auto; justify-content:center; display:inline-flex}
  html.v2 .g-head .g-nav .g-tabs .g-snd{flex:0 0 auto}
  html.v2 .g-head .g-nav .g-tabs .g-snd[hidden]{display:none}
  html.v2 .g-head .g-nav .g-n-home, html.v2 .g-head .g-nav .g-n-work, html.v2 .g-head .g-nav .g-n-li{display:inline-flex}
  html.v2 .g-head .g-nav a svg, html.v2 .g-head .g-nav .g-cta svg{display:block}
  html.v2 .g-band.g-head .g-name, html.v2 .g-band.g-head .g-role{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  html.v2 .g-band.g-head .g-role{display:block}
  html.v2 .g-head .g-me-t{overflow:hidden}
}
@media (max-width:720px){
  html.v2 .g-head .g-c{row-gap:10px}
}
@media (max-width:360px){
  html.v2 .g-head .g-nav .g-tabs a.g-tab{padding:0 7px}
  html.v2 .g-head .g-nav .g-n-li svg{display:none}
}


/* ---------- case study password popup (v2new/case_lock.py) ---------- */
.cs-pop{position:fixed; inset:0; z-index:2147483500; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:16px;
  background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease;
  font-family:"Inter V2",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.cs-pop.on{opacity:1}
.cs-pop-in{position:relative; width:min(440px,100%); box-sizing:border-box; padding:24px; border-radius:16px; background:#fff; box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
  transform:translateY(10px) scale(.985); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cs-pop.on .cs-pop-in{transform:none}
.cs-pop-in > b{display:block; padding-right:36px; font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.015em; color:#333}
.cs-pop-in p{margin:0}
.cs-pop-name{margin-top:6px!important; padding-right:24px; font-size:14px; line-height:1.5; color:#828282}
.cs-pop-row{display:flex; gap:8px; margin-top:18px}
.cs-pop-row input{flex:1 1 auto; min-width:0; height:40px; box-sizing:border-box; margin:0; padding:0 12px; border:1px solid #dcdcdc; border-radius:8px; background:#fff;
  color:#333; font:400 15px/1 "Inter V2",Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.01em; outline:none; box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s ease, box-shadow .2s ease}
.cs-pop-row input::placeholder{color:#a3a3a3}
.cs-pop-row input:focus{border-color:#333; box-shadow:0 0 0 3px rgba(51,51,51,.08)}
html.v2 .cs-pop-row .g-cta{flex:none; height:40px; cursor:var(--nt-cur); margin:0; -webkit-appearance:none; appearance:none}
.cs-pop-row.no{animation:csNo .38s cubic-bezier(.36,.07,.19,.97) both}
@keyframes csNo{20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.cs-pop-err{min-height:20px; margin-top:6px!important; font-size:13px; line-height:20px; color:#ec0131}
.cs-pop-help{margin-top:2px!important; font-size:14px; line-height:1.5; color:#828282}
.cs-pop-help a{color:#333; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.cs-pop-help a:hover{color:#000}
.cs-pop-x{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid #e0e0e0; background:#fff; color:#333; font-size:18px; line-height:1;
  cursor:var(--nt-cur); -webkit-tap-highlight-color:transparent}
.cs-pop-x:hover{background:#333; color:#fff; border-color:#333}
.cs-pop-x:focus-visible{outline:2px solid #333; outline-offset:2px}
@media (max-width:420px){ .cs-pop-row{flex-direction:column} html.v2 .cs-pop-row .g-cta{justify-content:center} .cs-pop-row input{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .cs-pop, .cs-pop-in{transition:none} .cs-pop-row.no{animation:none} }
/* the home cards: a locked case study shows a lock in the arrow circle, dark so it is seen before the click */
html.v2 .g-open.g-lk{z-index:6; width:34px; height:34px; top:18px; right:18px; background:#1f1f1f; border-color:#1f1f1f; color:#fff; box-shadow:0 6px 14px -6px rgba(0,0,0,.45)}
html.v2 .g-proj:hover .g-open.g-lk{transform:none}
html.v2 .g-open.g-lk .g-lk-i svg{display:block; width:16px; height:16px}
html.v2 .g-open.g-lk .g-lk-a{display:none}
/* once this browser has opened that case study, its plain arrow is back */
html.v2 .g-proj.cs-open .g-open.g-lk{width:30px; height:30px; top:20px; right:20px; background:#fff; border-color:var(--g-card-line); box-shadow:none}
html.v2 .g-proj.cs-open:hover .g-open.g-lk{transform:translateX(3px)}
html.v2 .g-proj.cs-open .g-open.g-lk .g-lk-i{display:none}
html.v2 .g-proj.cs-open .g-open.g-lk .g-lk-a{display:block}
/* the reach-out note, on hovering the lock */
html.v2 .g-lkt{position:absolute; right:-2px; top:calc(100% + 8px); width:236px; box-sizing:border-box; padding:10px 12px; border-radius:10px; background:#fff;
  border:1px solid #e0e0e0; box-shadow:0 14px 30px -14px rgba(0,0,0,.35), 0 2px 6px -3px rgba(0,0,0,.1); color:#707070; font-size:12.5px; font-weight:400; line-height:1.45;
  letter-spacing:-.005em; white-space:normal; text-align:left; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .18s ease, transform .18s ease}
html.v2 .g-lkt::after{content:""; position:absolute; left:0; right:0; bottom:100%; height:10px}      /* the gap to the lock still counts as hovering */
html.v2 .g-lkt b{display:block; margin-bottom:2px; color:var(--g-ink,#333); font-weight:600}
html.v2 .g-lkt a{color:var(--g-ink,#333); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
html.v2 .g-open.g-lk:hover .g-lkt, html.v2 .g-open.g-lk:focus-within .g-lkt{opacity:1; transform:none; pointer-events:auto}
html.v2 .g-proj.cs-open .g-lkt{display:none}
@media (max-width:720px){ html.v2 .g-open.g-lk{top:14px; right:14px} html.v2 .g-proj.cs-open .g-open.g-lk{top:16px; right:16px} }
/* a locked case study that became the page some other way stays hidden under the popup */
html.v2 .view.cs-locked{height:70vh; overflow:hidden}
html.v2 .view.cs-locked > *{visibility:hidden}


/* ---------- compact header at the foot of the screen (v2new/mini_head.py) ---------- */
html.v2 .fnav{display:none!important}
html.v2 .g-mini{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:160; display:flex; align-items:center; gap:10px;
  transform:translate(-50%, calc(100% + 32px)); opacity:0; pointer-events:none; font-family:var(--g-font);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .35s ease}
html.v2 .g-mini.on{transform:translate(-50%, 0); opacity:1; pointer-events:auto}
html.v2 .g-mini .g-tabs, html.v2 .g-mini .g-mini-up{box-shadow:inset 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -16px rgba(0,0,0,.38), 0 2px 6px -3px rgba(0,0,0,.12)}
/* every option, at every width (the header's own small screen rules hide some of these in the header's one row) */
html.v2 .g-mini.g-nav .g-n-home, html.v2 .g-mini.g-nav .g-n-work, html.v2 .g-mini.g-nav .g-n-li{display:inline-flex}
html.v2 .g-mini.g-nav a.g-tab svg, html.v2 .g-mini.g-nav .g-cta svg{display:block}
html.v2 .g-mini.g-nav .g-cta{flex:none}
html.v2 .g-mini-up{position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; box-sizing:border-box; margin:0; padding:0;
  border:1px solid var(--g-card-line); border-radius:10px; background:var(--g-card); color:#707070; cursor:var(--nt-cur); -webkit-tap-highlight-color:transparent; transition:color .2s ease}
html.v2 .g-mini-up:hover{color:var(--g-ink)}
html.v2 .g-mini-up:focus-visible{outline:2px solid var(--g-ink); outline-offset:2px}
html.v2 .g-mini-up > svg{position:absolute; inset:5px; width:26px; height:26px; transform:rotate(-90deg)}
html.v2 .g-mini-up circle{fill:none; stroke-width:1.6}
html.v2 .g-mini-up .bg{stroke:rgba(0,0,0,.08)}
html.v2 .g-mini-up .fg{stroke:var(--g-ink); stroke-linecap:round}
html.v2 .g-mini-up b{display:block; width:12px; height:12px}
html.v2 .g-mini-up svg.ar{position:static; display:block; width:12px; height:12px; transform:none}
@media (max-width:720px){
  html.v2 .g-mini{gap:6px; bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  html.v2 .g-mini-up{width:34px; height:34px; border-radius:9px}
  html.v2 .g-mini-up > svg{inset:4px; width:24px; height:24px}
  html.v2 .g-mini.g-nav a.g-tab svg, html.v2 .g-mini.g-nav .g-cta svg{display:none}
}
@media (max-width:440px){
  html.v2 .g-mini.g-nav a.g-tab{padding:0 8px}
  html.v2 .g-mini.g-nav .g-cta{padding:0 8px}
  html.v2 .g-mini-up{display:none}
}
@media (max-width:360px){
  html.v2 .g-mini{gap:4px}
  html.v2 .g-mini.g-nav a.g-tab{padding:0 6px}
  html.v2 .g-mini.g-nav .g-tabs .g-snd{width:22px; margin-left:3px}
  html.v2 .g-mini.g-nav .g-cta{padding:0 7px}
}
@media (prefers-reduced-motion:reduce){ html.v2 .g-mini{transition:opacity .2s ease} }
@media print{ html.v2 .g-mini{display:none} }


/* ---------- case studies on phones: pinned phone, every step card stacked (v2new/cs_mobile.py) ---------- */
html.v2 .hs-stage{display:contents}
@media (max-width:760px){
  html.v2 .view .hs{margin-top:0!important; margin-bottom:0!important}
  html.v2 .view .hs .hs-pin{height:auto!important; min-height:0!important; position:relative!important; top:auto!important}
  html.v2 .view .hs .stack.camstack{display:block!important; height:auto!important}
  html.v2 .view .hs .hs-stage{display:block; position:sticky; top:0; z-index:6; margin:0 -6px 6px; padding:12px 6px 0; background:var(--g-bg, #fcfcfc)}
  html.v2 .view .hs .hs-stage > :first-child{transform-origin:top center; transform:scale(var(--hs-z, 1)); margin-bottom:var(--hs-mb, 0px)!important}
  html.v2 .view .hs .hs-stage .hs-head{margin:10px 0 0!important; padding:0 0 10px; position:static}
  html.v2 .view .hs .hs-hint{display:none!important}
  html.v2 .view .hs .hs-col{display:block; height:auto!important}
  html.v2 .view .hs .hs-view{overflow:visible!important; scroll-snap-type:none!important; padding:0!important; margin:0!important; height:auto!important; mask:none!important; -webkit-mask:none!important}
  html.v2 .view .hs .steps{display:flex!important; flex-direction:column!important; gap:12px!important; width:auto!important; transform:none!important; padding:4px 0 0!important; margin:0!important}
  html.v2 .view .hs .step{flex:none!important; width:auto!important; max-width:none!important; min-height:0!important; height:auto!important; margin:0!important;
    opacity:.5; transition:opacity .3s ease, border-color .3s ease}
  html.v2 .view .hs .step.act{opacity:1}
}


/* ---------- home illustration: no visible box edges (v2new/hero_fade.py) ---------- */
html.v2 .g-art{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 94%, transparent 100%);
  mask-composite:intersect}


}