/* v2: the modern layer over study.css. Loaded after it on every app and job page.
   Goals: the demo is the first thing you meet and it explains itself; calm, exact type; one clear next step. */
:root{--page:#f5f5f2;--text:#17191c;--muted:#5d636b;--faint:#686e75;--amber:#8f600c;--warn:#a8402a;--hair:#e4e5e3;--panel:#fff;--ink-soft:#2b2f35;
  --r-lg:28px;--r-md:18px;--r-sm:12px;--shadow-lg:0 1px 1px #0000000a,0 8px 24px -12px #1a22301f,0 40px 90px -50px #1a223066;
  --spring:cubic-bezier(.2,.9,.2,1.15)}
body{font-size:16px;line-height:1.6;text-rendering:optimizeLegibility}
::selection{background:#c9dcff}
.wrap{max-width:1240px}

/* a quiet sticky bar instead of a tall masthead */
.mast{position:sticky;top:0;z-index:50;height:64px;background:var(--page);box-shadow:0 0 0 100vmax var(--page),0 1px 0 100vmax #0000000f;clip-path:inset(0 -100vmax -1px);border-bottom:0}
/* app pages: pill links. Job pages keep the folder's handwritten links with their drawn underline (experience/a/study.css) */
.mast:not(:has(.tab)) nav{gap:6px;align-items:center}
.mast:not(:has(.tab)) nav a{font-size:14px;padding:7px 12px;border-radius:99px;background:none;color:var(--muted);transition:background .2s,color .2s}
.mast:not(:has(.tab)) nav a:hover{background:#0000000a;color:var(--text)}
.mast:has(.tab) nav{align-self:flex-end;padding-bottom:4px}
.brand{font-size:15px}

/* hero: short, confident; the demo starts right below */
.intro{padding:52px 0 26px;gap:56px;align-items:end}
.over{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.1em;padding:6px 12px 6px 10px;border-radius:99px;background:#fff;border:1px solid var(--hair);color:#4b5158;margin:0 0 18px}
.over::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dot,#8a9097);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot,#8a9097) 22%,transparent)}
h1{font-size:clamp(36px,4.6vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
.lede{font-size:17.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:52ch}
.facts{gap:6px;margin-top:16px}
.chip{font-size:12px;padding:4px 10px;border-radius:99px;background:transparent;border:1px solid var(--hair);color:#5a6067}

/* the guide strip */
.guide.playing{position:sticky;top:72px;z-index:45;box-shadow:0 14px 34px -18px #1a223066}
.guide{margin:4px 0 14px;padding:16px 18px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--hair);box-shadow:0 1px 2px #0000000a}
.g-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.g-t{margin:0;font-size:13px;font-weight:650;letter-spacing:.02em;color:var(--ink-soft)}
.g-show{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:8px 16px 8px 12px;background:var(--text);color:#fff;font-size:13px;font-weight:600;box-shadow:0 6px 16px -8px #000a;transition:transform .2s var(--spring),background .2s}
.g-show:hover{transform:translateY(-1px)}
.g-show:active{transform:scale(.97)}
.g-ic{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.guide.playing .g-show{background:#b5462f}
.guide.playing .g-show .g-ic{width:8px;height:8px;border:0;background:currentColor;border-radius:1.5px;margin:0}
.g-s{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;counter-reset:g}
.g-s li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:#f6f6f4;font-size:13.5px;line-height:1.35;color:#5b6168;transition:background .3s,color .3s}
.g-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:650;background:#fff;border:1px solid #dfe1df;color:#6a7077;transition:background .3s,color .3s,border-color .3s,transform .35s var(--spring)}
.g-s li.now{background:#eef3ff;color:#1d3f8f}
.g-s li.now .g-n{border-color:#7da2ff;color:#1d3f8f;animation:gpulse 1.8s ease-in-out infinite}
.g-s li.ok{background:#eaf5ee;color:#245b38}
.g-s li.ok .g-n{background:#2f8a52;border-color:#2f8a52;color:transparent;transform:scale(1.04);position:relative}
.g-s li.ok .g-n::after{content:'';position:absolute;width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
@keyframes gpulse{0%,100%{box-shadow:0 0 0 0 #7da2ff55}50%{box-shadow:0 0 0 6px #7da2ff00}}
.g-done{margin:10px 2px 0;font-size:13.5px;color:#245b38;font-weight:600}
.g-cur{position:absolute;left:0;top:0;z-index:999;width:22px;height:22px;margin:-4px 0 0 -4px;pointer-events:none;opacity:0;transform:translate(-40px,-40px);transition:transform .6s cubic-bezier(.4,.1,.2,1),opacity .25s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l15 8.5-6.5 1.6L8.7 19z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 2px 3px #0005)}
.g-cur.on{opacity:1}
.g-cur::after{content:'';position:absolute;left:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:#2f6bff55;transform:scale(0);opacity:0}
.g-cur.press::after{animation:gtap .5s ease-out}
@keyframes gtap{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* the stage: bigger, softer, calmer */
.stage{border-radius:var(--r-lg);border:1px solid #00000012;box-shadow:var(--shadow-lg)}
.bar{padding:12px 18px;background:#ffffffb8;font-size:12.5px}
.seg{border-radius:12px;padding:3px}
.seg button{border-radius:9px;padding:7px 14px;font-size:13px}
.btn{border-radius:10px;padding:8px 14px;font-size:13px;transition:transform .2s var(--spring),background .2s,box-shadow .2s}
.btn:hover{box-shadow:0 2px 8px -4px #0004}
.caption{font-size:12px;margin:12px 4px 0;max-width:90ch}

/* the story: before → after, big and readable, then where it is */
.details{padding:84px 0 12px}
.details h2,.more h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.035em;font-weight:700}
.grid4{gap:16px}
.card{border-radius:var(--r-md);padding:22px 22px 20px;border-color:#00000010;box-shadow:0 1px 2px #00000008;transition:transform .35s var(--spring),box-shadow .35s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px #1a223055}
.card .n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:99px;background:#f2f2ef;font-weight:600;color:#6a7077}
.card h3{font-size:17px;margin:14px 0 6px}
.card p{font-size:14.5px;line-height:1.6}
.big{font-size:44px;letter-spacing:-.05em}
.more{padding:64px 0 6px}
.list li{grid-template-columns:220px minmax(0,1fr);padding:18px 0}
.list li b{font-weight:650}
.honest{font-size:13.5px;padding:14px 16px;border-radius:var(--r-sm);background:#f0f0ec;color:#5b6168}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.links a,a.btn-link{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:99px;font-size:14px;font-weight:600;border:1px solid var(--hair);background:#fff;color:var(--text);text-decoration:none;transition:transform .2s var(--spring),box-shadow .2s}
.links a:first-child{background:var(--text);color:#fff;border-color:var(--text)}
.links a:hover,a.btn-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px #0006}

/* the way on: one big card */
.foot{margin-top:72px;padding:0 0 64px;border:0;display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:16px}
.foot > a:first-child{align-self:center;font-family:inherit;font-size:14px;color:var(--muted);padding:10px 14px;border-radius:99px;border:1px solid var(--hair);background:#fff}
.foot > a:first-child:hover{text-decoration:none;color:var(--text)}
.foot > span{justify-self:end;display:block}
.foot > span,.next-card{border-radius:var(--r-md)}
.foot > span a{display:inline-block}
.foot > span{font-size:14px;color:var(--muted);padding:18px 22px;background:#fff;border:1px solid var(--hair);transition:transform .35s var(--spring),box-shadow .35s;min-width:min(420px,100%);text-align:right}
.foot > span:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px #1a223055}
.foot > span a{font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--text);margin-left:4px}
.foot > span a::after{content:' →';transition:margin .2s}
.foot > span:hover a::after{margin-left:4px}
.foot a:hover{text-decoration:none}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .mast{height:56px}
  .intro{padding:30px 0 18px;gap:14px}
  .g-s{grid-auto-flow:row}
  .guide.playing{top:64px}
  .guide.playing .g-s li:not(.now){display:none}
  .g-head{flex-wrap:wrap}
  .details{padding:56px 0 8px}
  .foot{grid-template-columns:1fr;margin-top:48px}
  .foot > span{justify-self:stretch;text-align:left;min-width:0}
  .list li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .g-s li.now .g-n{animation:none} }

/* v2.1, after research (Vercel/Linear/Raycast/Apple): restraint, shadow-borders, one motion curve */
:root{--e:cubic-bezier(.2,0,0,1);--ring:0 0 0 1px #00000014;--card:0 0 0 1px #00000012,0 1px 2px #0000000a,0 8px 16px -10px #0000001a}
h1{font-weight:620;letter-spacing:-.04em;font-size:clamp(38px,5vw,66px);line-height:1}
.lede{font-size:17px;line-height:1.55}
.facts{gap:0;margin-top:14px;font-size:13px;color:var(--faint)}
.facts .chip{border:0;padding:0;background:none;color:var(--muted);font-size:13px}
.facts .chip + .chip::before{content:'·';margin:0 8px;color:#c4c7cb}
.over{box-shadow:var(--ring);border:0}
.guide,.card,.foot > span,.foot > a:first-child,.links a{border:0;box-shadow:var(--card)}
.links a:first-child{box-shadow:0 1px 2px #0003,0 8px 18px -10px #0008}
.card:hover,.foot > span:hover{box-shadow:0 0 0 1px #00000014,0 18px 36px -22px #1a223070}
.g-s li{box-shadow:inset 0 0 0 1px #0000000a}
.btn,.seg button,.g-show,.links a,.card,.foot > span,.mast nav a{transition-timing-function:var(--e)}
.btn:focus-visible,.g-show:focus-visible,.links a:focus-visible,.seg button:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #2f6bff}
.details h2,.more h2{font-weight:620;letter-spacing:-.03em}
.card h3{font-weight:620}
.big{font-weight:620}
.intro{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:64px}
h1{font-size:clamp(38px,4.6vw,62px)}
.facts{gap:4px 16px}
.facts .chip + .chip::before{content:none}
.facts .chip{position:relative;padding-left:12px}
.facts .chip::after{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#c4c7cb}
@media (max-width:900px){ .intro{grid-template-columns:1fr;gap:14px} }
#hint:empty,.tools > span:empty{display:none}
/* the bar: one row everywhere; the pinned steps sit flush under it */
.guide.playing{top:64px}
@media (max-width:900px){
  .mast{height:56px;flex-direction:row;align-items:center;justify-content:space-between;padding:0;gap:8px}
  .mast nav{order:0;gap:2px}
  .mast:has(.tab) nav{gap:16px}
  .mast:not(:has(.tab)) nav a{font-size:13.5px;padding:7px 10px}
  .brand span:not(.tab),.brand .no{display:none}
  .brand{align-self:center;font-size:14.5px}
  .brand .tab{padding:7px 10px 6px;border-radius:7px;font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .mast nav a{white-space:nowrap}
  .guide.playing{top:56px}
  .over{font-size:10.5px;letter-spacing:.06em;padding:5px 10px 5px 9px}
}

/* arriving from an index (the opt-in itself is inline at the top of each page, so it's seen before the first paint): the card's picture, headline and overline there grow into this page's (work/a/peek.js); browser back flies them home (guide.js). */
@media (prefers-reduced-motion:no-preference){
  .stage{view-transition-name:demo}
  .intro h1{view-transition-name:title}
  .intro .over{view-transition-name:over}
  ::view-transition-group(demo),::view-transition-group(title),::view-transition-group(over){animation-duration:.65s;animation-timing-function:cubic-bezier(.22,.68,0,1)}
  /* the page you leave blurs and recedes; this one fades in over it, so what flies reads clearly */
  ::view-transition-old(root){animation:vt-recede .55s cubic-bezier(.22,.68,0,1) both}
  ::view-transition-new(root){animation:vt-arrive .42s ease .14s both}
  @keyframes vt-recede{to{opacity:0;filter:blur(10px) brightness(.85);transform:scale(.97)}}
  @keyframes vt-arrive{from{opacity:0}}
  html.vt-in .rise{animation:none}
}

/* detail pass 2026-10-09: small grey text passes 4.5:1 (--faint above); disabled controls say so; phone tap targets ≥ 40px */
.btn:disabled,button:disabled{cursor:not-allowed}
.card .n{color:var(--muted)}
@media (max-width:900px){
  .btn,.seg button,.g-show{min-height:40px}
  .mast nav a,.mast:not(:has(.tab)) .brand{min-height:40px;display:inline-flex;align-items:center}
}
/* the whole "Next" card is the link, not just its name */
.foot > span{position:relative;cursor:pointer}
.foot > span a::before{content:'';position:absolute;inset:0;border-radius:inherit}
/* a focus ring you can actually see on the light page (#8aaaff was 2.3:1) */
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline-color:#2f6bff}
/* links inside cards and honest lines (study.css resets links to plain text) */
.card p a,.honest a{color:var(--text);text-decoration:underline;text-decoration-color:#00000040;text-underline-offset:3px;transition:text-decoration-color .2s}
.card p a:hover,.honest a:hover{text-decoration-color:currentColor}
/* small phones (320–400px): the folder tab and its two links fit with a proper margin */
@media (max-width:400px){ .mast:has(.tab) nav{gap:8px} .brand .tab{padding:6px 7px 5px;letter-spacing:.03em;font-size:9.5px} }
@media (max-width:360px){ .mast:has(.tab) nav a{font-size:13.5px} .mast:has(.tab) nav{gap:6px} }
/* keyboard focus never lands under the sticky top bar (WCAG 2.4.11) */
html{scroll-padding-top:80px}
/* a section that hasn't faded in yet shows at once when keyboard focus reaches something inside it */
.rv:focus-within{opacity:1;transform:none;transition:none}
/* touch screens: a tap mustn't leave a hover lift stuck on */
@media (hover:none){ .card:hover,.foot > span:hover,.links a:hover,.g-show:hover,.btn:hover{transform:none} }
/* a press you can feel on links and the Next card, like the buttons already have */
.links a:active,.foot > span:active{transform:scale(.97);transition-duration:.08s}
/* the page morph: the card's light headline fades out fast, so it never sits on top of this page's dark one */
@media (prefers-reduced-motion:no-preference){ ::view-transition-old(title),::view-transition-old(over){animation:vt-out .18s ease both} }
@keyframes vt-out{to{opacity:0}}
/* the way to write to him, at the foot of every page: one quiet line under the Next card */
.foot > .reach{grid-column:1 / -1;margin:6px 0 0;font-size:14px;color:var(--muted)}
.foot > .reach a{color:var(--text);text-decoration:underline;text-decoration-color:#00000040;text-underline-offset:3px}
.foot > .reach a:hover{text-decoration-color:currentColor}