:root{--surface:#F5E9DF;--surface-deep:#E3D5C7;--muted:#EEE7DD;--panel:#EEE7DD;--lens:#FFF6F1;--lens-fill:#EEE0D4;--ink:#2B2A28;--ink-2:#615B57;--accent:#3C5A45;--on-accent:#F5E9DF;--gold:#A98A4E;--bezel:#2B2A28;--line:#E3D5C7;--head:rgba(245,233,223,.86);--lens-label:#3C5A45;--accent-text:#3C5A45;color-scheme:light;
--vs-ar:1.415/1;--vs-w:min(100%,max(640px,calc((100svh - 150px)*1.415)));--cw:70.67%;--ch:100%;--bx:29.33%;--by:0%;--lx:41.5%;--ly:0%;--l1x:19%;--l1y:21%;--l2x:81%;--l2y:21%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface:#1B1815;--surface-deep:#2A2622;--muted:#3A3530;--panel:#2A2622;--lens:#1B1815;--lens-fill:#33503D;--ink:#F0EBE5;--ink-2:#A8A29E;--accent:#6B8F74;--on-accent:#131F1A;--gold:#C8A95E;--bezel:#3A3530;--line:#3A3530;--head:rgba(27,24,21,.86);--lens-label:#F0EBE5;--accent-text:#8FB399;color-scheme:dark}}
:root[data-theme="dark"]{--surface:#1B1815;--surface-deep:#2A2622;--muted:#3A3530;--panel:#2A2622;--lens:#1B1815;--lens-fill:#33503D;--ink:#F0EBE5;--ink-2:#A8A29E;--accent:#6B8F74;--on-accent:#131F1A;--gold:#C8A95E;--bezel:#3A3530;--line:#3A3530;--head:rgba(27,24,21,.86);--lens-label:#F0EBE5;--accent-text:#8FB399;color-scheme:dark}
@media (max-width:720px){:root{--vs-ar:1/1.415;--vs-w:100%;--cw:100%;--ch:70.67%;--bx:0%;--by:29.33%;--lx:0%;--ly:41.5%;--l1x:50%;--l1y:11%;--l2x:50%;--l2y:89%}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background-color:var(--surface);color:var(--ink);font:17px/1.6 "IBM Plex Sans",-apple-system,system-ui,sans-serif;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--ink)}
::selection{background:var(--lens-fill);color:var(--ink)}
/* Ink band: a dark section that breaks up the cream. Re-scopes the tokens so
   everything inside (text, rules, the green accent) stays readable (≥6:1). */
.band-ink{--ink:#F5E9DF;--ink-2:#BFB5AB;--line:#45423E;--accent:#8FB399;background:#2B2A28;color:var(--ink)}
.band-ink a{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band-ink{--ink:#F0EBE5;--ink-2:#A8A29E;--line:#2C3B31;background:#1B271F}}
:root[data-theme="dark"] .band-ink{--ink:#F0EBE5;--ink-2:#A8A29E;--line:#2C3B31;background:#1B271F}
/* Hero: the overlap happens once. Resting state is the finished drawing, so
   no-JS, reduced motion and screenshots all show the complete mark. */
:root{--vs-enter:translateX(22%)}
@media (max-width:720px){:root{--vs-enter:translateY(22%);--vs-w:min(100%,78vw)}}
@media (prefers-reduced-motion:no-preference){
  .js .vs-b{animation:vs-arrive 1.1s cubic-bezier(.16,1,.3,1) .35s both}
  .js .vs-b-label{animation:vs-fade .6s ease-out 1.1s both}
  .js .vs-lens{animation:vs-fade .7s ease-out 1.25s both}
  .js .vs-meet{animation:vs-fade .6s ease-out 1.7s both}
  .js .vs-chip{animation:vs-pop .55s cubic-bezier(.16,1,.3,1) 2.1s both}
  .js .end-mark.in .end-lens{animation:vs-lens-end .8s ease-out .2s both}
  .js .end-mark:not(.in) .end-lens{opacity:0}
}
@keyframes vs-arrive{from{transform:var(--vs-enter);opacity:0}to{transform:none;opacity:1}}
@keyframes vs-fade{from{opacity:0}to{opacity:1}}
@keyframes vs-lens-end{from{opacity:0}to{opacity:.22}}
@keyframes vs-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.end-lens{opacity:.22}

/* How it works: the phone follows your reading on wide screens. */
@media (min-width:900px){.loop-phone{position:sticky;top:96px;align-self:start}}
[data-step]{transition:none}
[data-step][aria-pressed="false"] [data-title]{opacity:.62!important}

/* FAQ: native disclosure, big tap rows. */
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-family:Fraunces,Georgia,serif;font-size:clamp(20px,2.2vw,24px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s ease}
.faq[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq p{margin:0 0 20px;max-width:38em;color:var(--ink-2);line-height:1.6;text-wrap:pretty}
.faq a{color:var(--accent-text)}

/* Browser surfaces */
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
/* Phones: the intro paragraph already sits on the first screen, so the lens
   doesn't repeat it. */
@media (max-width:720px){.vs-what{display:none}}