:root{--ground:#EEF3F0;--surface:#FFFFFF;--ink:#1D2D29;--muted:#44554D;--accent:#244A40;--on-accent:#FFFFFF;--soft:#E1EBE6;--line:#D3DFD9;--focus:#8A5600;color-scheme:light}
/* One colour scheme on every device, the light one (owner, 2026-09-25: "just one; the light mode is good enough"). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font:-apple-system-body;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;padding:1.25rem 1rem 3rem;line-height:1.5;font-size:1.0625rem}
/* Full screen (the app, or the site added to the Home Screen) the page runs under the clock, the Dynamic Island and the
   home bar; the device's safe-area insets keep every card clear of them. In Safari with its bars showing they are 0. */
body{padding:calc(1.25rem + var(--sim-sat,env(safe-area-inset-top))) calc(1rem + var(--sim-sar,env(safe-area-inset-right))) calc(3rem + var(--sim-sab,env(safe-area-inset-bottom))) calc(1rem + var(--sim-sal,env(safe-area-inset-left)))}
main{max-width:30rem;margin:0 auto}
.wash{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;background:var(--ground)}   /* a flat page: the waves are gone (owner, 2026-09-25: "graphic overlays, text on stuff") */
body>*:not(.wash,.tabbar){position:relative;z-index:1}   /* not the bar: it stays fixed at the foot of the screen (one :not(), so the weight is as before and the playing screen stays fixed) */
a{color:var(--accent);text-underline-offset:.2em}
p{margin:0 0 1rem}
h1{font-size:1.5rem;line-height:1.2;margin:.25rem 0 .75rem;text-wrap:balance}   /* 1.75rem until the text-size change (owner, 2026-09-26: too big) */
.tsz-probe{position:absolute;left:-9999px;top:0;visibility:hidden;font-size:medium;font:-apple-system-body}   /* the phone's text size, measured by the head script */
.h2,h2{font-size:1.25rem;line-height:1.25;margin:1.5rem 0 .5rem}
h3{font-size:1.125rem;margin:0 0 .25rem}
.eyebrow{font-size:1.0625rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;margin:0 0 .5rem}
.crumbs{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem}
.crumbs a{font-weight:600;text-decoration:none;min-height:3rem;display:inline-flex;align-items:center}
.lines p{font-size:1.125rem}
.note{color:var(--muted)}
button{font:inherit;color:inherit}
.btn,.play,.opt,.act,.words-toggle,.anchors button{min-height:3rem;border-radius:.875rem;border:0;background:var(--soft);color:var(--ink);font-weight:700;padding:.625rem 1rem;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
.btn,.act{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.btn.primary,.btn.next,.act.primary,.play{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;width:100%}
/* No white cards, no plates, no backgrounds (owner, 2026-09-25): pictures, words and Play sit on the page, and every
   drawing is just its object on the page: the build strips the drawing's ground and its full-width planes (water,
   floors, walls, fields), and gives dark mode its own drawing in mint ink. */
.rec{margin:1rem 0;display:grid;gap:.75rem}
.rec .art{position:relative;overflow:hidden;aspect-ratio:1/1;background:transparent}
/* the welcome: picture, heading, summary, then Play, all centred */
#rec-welcome .rec-head{display:contents}
#rec-welcome .art{order:0}
#rec-welcome .rec-heading{order:1;text-align:center}
#rec-welcome .rec-desc{order:2;text-align:center}
#rec-welcome .rec-controls{order:3;justify-content:center;margin-top:0}
#rec-welcome .status{order:4}
#rec-welcome .words{order:5}
/* why it works: as the welcome and the practice card, centred, the line first and Play under it (owner, 2026-09-26: "best location") */
[id^="rec-why-"] .rec-head{display:contents}[id^="rec-why-"] .rec-heading{order:1;text-align:center}[id^="rec-why-"] .rec-desc{order:2;text-align:center}[id^="rec-why-"] .rec-controls{order:3;justify-content:center;margin-top:0}[id^="rec-why-"] .status{order:4}
.art img{display:block;width:100%;height:100%;object-fit:cover}   /* also once the picture has moved into the playing screen (art director, 2026-09-25) */
.art .anim{position:absolute;inset:0}
.art .anim svg{display:block;width:100%!important;height:100%!important}
.rec .kind{margin:0;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rec .rec-title{margin:0;font-size:1.25rem;line-height:inherit}
.rec-head{display:block}
.rec-controls{margin-top:.625rem;justify-content:flex-start}
.rec-desc{display:grid;gap:.5rem}
.rec-desc p{margin:0;font-size:1.125rem}
.rec .status{margin:0}
.rec .status:empty{min-height:0}
.rec.moment .status,.rec.moment .status:empty,[id^="rec-why-"] .status,[id^="rec-why-"] .status:empty{min-height:3em;text-wrap:balance}   /* two lines kept free: the line coming and going moved Play 14 to 27 pt under the finger (QC panel, 2026-09-26) */
.rec[id^="rec-why-"]{position:relative}.rec[id^="rec-why-"] .status,.rec[id^="rec-why-"] .status:empty{position:absolute;left:0;right:0;top:100%;margin-top:.75rem;min-height:0}   /* the why card shows one line at most: it hangs under Play, taking no room (QC round 2) */
.rec-heading{min-width:0}
.rec-controls{display:flex;gap:.75rem;flex:0 0 auto}
/* One Play everywhere (owner, 2026-09-25): the 34 px green disc with the triangle, no word; the name is spoken. Its touch area is 48 px. */
.play,.words-toggle{position:relative;width:2.125rem;height:2.125rem;min-height:0;padding:0;margin:0;border-radius:50%;background:none;color:var(--accent);display:flex;align-items:center;justify-content:center;gap:0}
.play::after,.words-toggle::after{content:"";position:absolute;inset:-.4375rem;border-radius:50%}
.play-disc{flex:0 0 auto;width:2.125rem;height:2.125rem;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.play-label,.words-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.play-ico{width:0;height:0;border-style:solid;border-width:.36rem 0 .36rem .64rem;border-color:transparent transparent transparent currentColor;margin-left:.15rem}
[data-state="playing"] .play-ico,[data-state="starting"] .play-ico{width:.58rem;height:.72rem;border:0;border-left:.2rem solid currentColor;border-right:.2rem solid currentColor;margin-left:0}
.status{margin:0;min-height:1.4em;color:var(--muted);text-align:center}
html{overflow-wrap:break-word}body{padding-left:min(1rem,4.3vw);padding-right:min(1rem,4.3vw)}.btn{padding-left:min(1rem,4vw);padding-right:min(1rem,4vw)}.btn.start{min-width:min(10rem,100%);max-width:100%;padding:0 min(1.75rem,6vw)}.btn.next span:first-child,.help-first .btn span:first-child{min-width:0;overflow-wrap:anywhere}.opt{min-width:0;overflow-wrap:anywhere;padding-left:min(1rem,4vw);padding-right:min(1rem,4vw)}.help .call{max-width:100%;overflow-wrap:anywhere;text-align:center}.crumbs{flex-wrap:wrap}.steps span{display:inline-block;max-width:100%;white-space:normal}.splash .wordmark,.splash .with{max-width:calc(100vw - 2rem);overflow-wrap:anywhere}
.focus-art .art,.focus-art .art.small{width:100%;height:100%;margin:0}
.focus{overscroll-behavior:contain}
a,button{touch-action:manipulation}
.foot a{display:inline-flex;align-items:center;min-height:3rem;padding:0 .75rem;margin:0 -.75rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.words{display:grid;gap:.75rem;font-size:1.0625rem;border-top:1px solid var(--line);padding-top:.75rem}
.words p{margin:0}
.words .line{transition:color .3s}
.reading .line{color:var(--muted)}
.reading .line.done{color:var(--ink);opacity:.72}
.reading .line.now{color:var(--ink);opacity:1;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.3em}
.steps{margin:0;font-weight:700;color:var(--ink);font-size:1.125rem}
.steps span{white-space:nowrap}
.steps,.status,.settle-line,.rec-desc p,.slide.last .lines,.swipe-hint{text-wrap:balance}.steps .dot{font-style:normal}.steps .lead .dot{display:none}.lines p,.ask,.reply,.keep .lines,p.lines,.hc-title{text-wrap:pretty}.eyebrow,.h2,h2,.opt,.hcard .meta,.quote-item .who,.pc-name{text-wrap:balance}   /* no lone word or dot at a line end (QC panel, 2026-09-26) */
.art.small{width:min(46%,10.5rem);aspect-ratio:1/1;margin:0 auto .75rem;overflow:hidden}
.art.small img{display:block;width:100%;height:100%;object-fit:cover}
.rec .art.small{margin-bottom:.25rem}
.keep .art.small,.question .art.small{margin-bottom:.5rem}
.splash{position:fixed;top:0;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--ground);text-align:center;animation:splash-out .7s ease 3s forwards}
.splash>*{animation:splash-in .8s ease both}
.splash picture{display:block}
.splash .mark{display:block;width:4.5rem;height:4.5rem;margin-bottom:.5rem}
.splash .wordmark{margin:0;padding:0 1rem;font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:.02em;color:var(--accent);text-wrap:balance}
.splash .with{margin:0;padding:0 1rem;color:var(--muted);font-weight:400;font-size:1.0625rem;text-wrap:balance}
.splash.gone{display:none}body:has(.splash:not(.gone)) .tabbar{opacity:0;pointer-events:none}   /* the pill waits until the opening has gone (it had shown on top of it) */
.splash .stones-mark{width:5.5rem;height:auto;margin-bottom:.5rem;overflow:visible;animation:none}
.splash .stones-mark .st{transform-box:fill-box;transform-origin:50% 60%;animation:stone-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .22s)}
.splash .wordmark,.splash .with{animation-delay:.85s}   /* the name after the stones (owner, 2026-09-26: the stones one at a time, the closest first) */
@keyframes stone-in{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}
.deck-top{position:fixed;top:0;left:0;right:0;z-index:11;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:var(--sim-sat,env(safe-area-inset-top)) min(1rem,4.3vw) 0;height:calc(3rem + var(--sim-sat,env(safe-area-inset-top)));background:linear-gradient(var(--ground) 72%,rgba(238,243,240,0));transition:transform .25s ease,opacity .25s ease}
.deck-top a{font-weight:600;text-decoration:none;min-height:3rem;display:inline-flex;align-items:center;white-space:nowrap}.deck-top a:active{opacity:.55}.deck-top .note{color:var(--muted);font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-top.tuck{transform:translateY(-100%);opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){.deck-top{transition:none}}   /* where you are and one step back, on a moment's inner cards and the trail (decision panel, 2026-09-26, 3 of 4); it slides away wherever words would sit under it */
@keyframes nudge{50%{transform:scale(1.07)}}.btn.start.nudge{animation:nudge .45s ease 2}
@keyframes splash-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.splash>*,.splash .stones-mark .st{animation:none}.splash{animation:splash-out 0s linear 3s forwards}}
.moments{--mh:4rem;--mh:calc(4rem + var(--sim-sat,env(safe-area-inset-top)))}
.trail .stop{scroll-margin-top:var(--mh)}
.moments .h2{height:var(--mh);margin:0;box-sizing:border-box;display:flex;align-items:flex-start;padding-top:1.25rem;padding-top:calc(1.25rem + var(--sim-sat,env(safe-area-inset-top)))}
.stop:first-child .link{top:2rem;height:calc(100% - 2rem)}   /* the path starts below the heading, its round end showing (panel, 2026-09-25) */
/* The trail (owner, 2026-09-25, from the UX designer's mock): the path winds down the middle of the screen, one stop per
   screen; each stop is its round picture on the path with its short name under it, in the link's green on a
   page-coloured pill so the path does not run through the letters; circle and name are one link. */
.trail{list-style:none;margin:0;padding:0;--rail:94%;--rail-left:5.8%;--thumb:min(7rem,30vw)}   /* the path's swing (34% to 60% of the rail) is centred on the column */
.stop{position:relative;min-height:11rem;height:calc(100vh - var(--mh));height:calc(100lvh - var(--mh));height:calc(100dvh - var(--mh))}   /* one stop per screen, the path running off both edges */
.stop .link{position:absolute;left:var(--rail-left);top:0;width:var(--rail);height:100%;color:var(--accent);opacity:.5;z-index:0}
.trail{--stone:#A8A398}   /* the stones are stone-coloured, pebble (owner, 2026-09-26); the open moment's green ring stays the one green */
.link.stones{overflow:hidden;opacity:1}.link.stones i{position:absolute;width:1.125rem;height:.5625rem;border-radius:50%;background:var(--stone);transform:translate(-50%,-50%)}.link.stones i:nth-child(3n){width:1.25rem}.link.stones i:nth-child(3n+1){width:1rem}
.link.stones.wait i{opacity:0}.link.stones.go i{animation:stone-dot .35s ease both;animation-delay:calc(var(--o, 0) * 120ms)}@keyframes stone-dot{from{opacity:0;transform:translate(-50%,-30%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%)}}
.trail.stones-on svg.link{display:none}   /* the stepping stones (TRAIL = "stones"), laid by the script; without it the line stays */
.stop a .stone{position:absolute;left:50%;top:calc(var(--thumb) / 2);width:var(--thumb);height:calc(var(--thumb) / 2);translate:-50% -50%;fill:var(--stone);overflow:visible;opacity:0;pointer-events:none}
.stop a .stone.s0{scale:1.12}.stop a .stone.s1{scale:.9}.stop a .stone.s2{scale:1.02}.stop a .stone.s3{scale:.84}   /* sizes vary, as the icon's pebbles do */
.trail.focus-on svg.link{display:none}.trail.focus-on .stop a{background:none;transform-origin:50% calc(var(--thumb) / 2)}.trail.focus-on .stop a::after{content:"";position:absolute;inset:calc(-1 * var(--hit, 0px))}   /* each moment a stone (TRAIL = "focus"), placed by the script */
.stop a{position:absolute;top:50%;translate:-50% -50%;width:max-content;max-width:70%;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;color:var(--accent);text-align:center;background:var(--ground);will-change:opacity;z-index:1}
.stop.x34 a{left:calc(var(--rail-left) + var(--rail) * .34)}
.stop.x60 a{left:calc(var(--rail-left) + var(--rail) * .6)}
.stop .thumb{width:var(--thumb);height:var(--thumb);border-radius:50%;background:var(--ground);object-fit:cover;border:3px solid var(--surface);box-shadow:0 0 0 3px var(--accent)}   /* the page's own colour, so the road passes behind the circle */
.stop .name{font-weight:700;font-size:1.5rem;font-size:min(1.5rem,34px);line-height:1.2;background:var(--ground);border-radius:999px;padding:0 .625rem;overflow-wrap:anywhere;text-wrap:balance}
.stop a{row-gap:1rem}.stop a:active .thumb,.stop a:active .name{opacity:.55}   /* the name is the screen's heading: more air under the circle, larger and bold (owner and panel, 2026-09-26: "too close to the circle ... maybe bigger"); a press dims circle and name together */
.stop .s{font-size:.9375rem;color:var(--muted)}
.focus{position:fixed;top:0;left:0;right:0;bottom:0;z-index:20;background:var(--ground);display:flex;flex-direction:column;align-items:center;padding:calc(.75rem + var(--sim-sat,env(safe-area-inset-top))) 1rem calc(1rem + var(--sim-sab,env(safe-area-inset-bottom)));overflow:auto;scroll-padding-top:3rem}
.swipe-hint{margin:.75rem 0 0;text-align:center;color:var(--muted);font-size:1.0625rem}.first-next a{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:3rem}
.focus-back{align-self:flex-start;position:sticky;top:0;z-index:1;background:none;border:0;color:var(--accent);font-weight:600;font-size:1rem;padding:.5rem .25rem;min-height:3rem;cursor:pointer}
.focus-art{width:min(18rem,60vw,30vh);width:min(18rem,60vw,30dvh);aspect-ratio:1/1;overflow:hidden;margin:.5rem auto 1rem;flex:0 0 auto}
.focus-art .art{aspect-ratio:auto;height:100%;position:relative;overflow:hidden}   /* the loop layer is absolute: without this it fills the whole playing screen (owner's iPhone, 2026-09-25 21:34) */
.art{position:relative}
.focus-kind{margin:0;font-size:1.0625rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600}
.focus-title{margin:.25rem 0 .75rem;font-size:1.25rem;text-align:center}
.focus-then{margin:-.25rem 0 .75rem;color:var(--muted);font-weight:400;font-size:.9375rem;text-align:center}
.focus-then:empty{display:none}
.focus-line{margin:0 auto;max-width:28rem;text-align:center;font-size:1.375rem;line-height:1.45;min-height:4rem;flex:1 0 auto;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.focus .play{width:100%;max-width:28rem;flex:0 0 auto;margin-top:1rem}
body>.focus{position:fixed;z-index:20}
body>.splash{position:fixed;z-index:30}
body.has-focus{overflow:hidden}
html.snap{scroll-behavior:auto}
.slide.cover #rec-welcome .art{width:min(100%,35vh);width:min(100%,35dvh);width:min(100%,calc(35dvh - var(--bar) - 1rem));margin:0 auto}   /* the bar takes room at the foot (2026-09-26): the picture gives way, the words stay */   /* on a short screen the picture gives up the room the heading and summary need */
.slide{min-height:100vh;min-height:100lvh;min-height:100dvh;box-sizing:border-box;padding:1rem 0;padding:calc(1rem + var(--sim-sat,env(safe-area-inset-top))) 0 calc(1rem + var(--sim-sab,env(safe-area-inset-bottom)));display:flex;flex-direction:column;justify-content:center}
.slide.cover{justify-content:flex-start;padding-top:0}   /* the first card: the body's top padding already clears the clock */
.slide.last{justify-content:center;padding:1rem 0;padding:calc(1rem + var(--sim-sat,env(safe-area-inset-top))) 0 calc(1rem + var(--sim-sab,env(safe-area-inset-bottom)))}.slide.last .lines{text-align:center}   /* the last card: Next on its own, centred */
.slide .rec,.slide .question{margin:0}
.keep{padding:0}
.keep .h2{margin-bottom:.5rem}
.keep .lines{margin:0;font-size:1.25rem}
.keep-again{margin:0 0 1.25rem;font-size:1.125rem;text-align:center}
.cover-art{display:block;width:min(58%,13rem);width:min(58%,13rem,28vh);width:min(58%,13rem,28dvh);height:auto;margin:.5rem auto 1rem}
.cover .with{margin:.25rem 0 0;color:var(--muted);font-weight:600}
.cover-go{margin:1.25rem 0 0}
.btn.start{width:auto;min-width:10rem;height:3.25rem;padding:0 1.75rem;border-radius:999px;font-size:1.0625rem}
.slide.cover{padding-bottom:1.5rem;padding-bottom:calc(1.5rem + var(--sim-sab,env(safe-area-inset-bottom)))}   /* room under Start, kept small so a long cover still fits one screen at 375 x 667 with 19 px text */
/* dimmed only once the script runs (.snap): without it, or before it, every card is read at full contrast */
.snap .slide{opacity:.9;transform:scale(.975);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.snap .slide.in{opacity:1;transform:none}
.focus-art .art{transform-origin:top left}
.focus-space{flex:1 0 auto;min-height:2rem}.focus .focus-space+.play.big.round{margin-bottom:10vh;margin-bottom:10dvh}   /* without the words, Pause sits in the lower part of the screen, off the edge */
.focus-more{background:none;border:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:.2em;padding:.5rem;min-height:3rem;cursor:pointer;font-size:.9375rem;margin-top:.5rem}
.focus-words{width:100%;max-width:28rem;margin:.5rem auto 0}
.focus-words .words{border-top:0;padding-top:0}
@media (prefers-reduced-motion:reduce){.snap .slide{opacity:1;transform:none;transition:none}}
/* the practice card's Play and the playing screen's Pause: the same 34 px disc, centred */
.play.big,.play.big.round{width:2.125rem;height:2.125rem;min-height:0;padding:0;margin:0 auto;border-radius:50%;background:var(--accent);color:var(--on-accent);border:0;justify-content:center;gap:0}
.focus .play.big.round{margin-top:1rem}
/* One Play everywhere at 52 px (owner, 2026-09-26: a bigger Play on the practice card, then "make sure all play buttons
   are in the best location and best size"): the welcome, the practice card, why it works and the playing screen's
   Pause are the same disc, no word, each with a 66 px touch area (the ::after ring). */
.play,.play-disc,.play.big,.play.big.round{width:3.25rem;height:3.25rem}
.play .play-ico{border-width:.55rem 0 .55rem .98rem;margin-left:.23rem}
[data-state="playing"] .play .play-ico,[data-state="starting"] .play .play-ico{width:.89rem;height:1.1rem;border-width:0 .31rem;margin-left:0}
.under-play{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.under-play .status{flex:1 1 auto;margin:0}
.settle-line{margin:0;text-align:center;color:var(--muted);font-weight:400;font-size:1.0625rem}
.rec.moment>.art{width:min(58%,13rem);width:min(58%,13rem,28vh);width:min(58%,13rem,28dvh);margin:0 auto}   /* the cover's size (panel, 2026-09-25): the card gets its air and Play grows the picture into the playing screen */
.slide .art.offcard{display:none}.focus-art .art.offcard{display:block}   /* the why's picture lives on its playing screen only */
.focus-still{display:block;width:100%;height:100%;object-fit:cover}
.rec.moment h2.h2{margin:0;text-align:center}.rec.moment .steps{text-align:center}   /* the practice card is one centred column: heading, settle line, steps, Play */
.settle{display:grid;gap:.5rem}
.settle-change{width:100%;min-height:3rem;padding:.4rem .1rem;background:none;border:0;text-align:left;color:var(--muted);font-size:.9375rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1.4}
.settle-change b{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.settle-change .chev{color:var(--accent)}
.settle-change[aria-expanded="true"] .chev{display:inline-block;transform:rotate(180deg)}
.settle-opts{margin:0}
.next-link{margin:1.25rem 0 0}
.btn.next span:first-child{text-wrap:balance}   /* one line at every size to 23 px (owner, 2026-09-26: "only one line"); past that the longest may wrap rather than run out of the button */
.back-link{margin:.5rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .25rem;text-align:center}
.back-link a{font-weight:600;text-decoration:none;min-height:3rem;display:inline-flex;align-items:center;padding:0 .75rem}
.btn.next{justify-content:space-between;text-align:left;gap:1rem}
.btn.next span[aria-hidden]{font-size:1.5rem;line-height:1}.btn.next span:only-child{margin:0 auto}
.btn,.act{border-radius:999px}.btn.start{width:100%;min-width:0}.btn.next{justify-content:center;text-align:center;gap:.375rem}.btn.next span[aria-hidden]{font-size:1.25rem}   /* one shape for "go", a capsule; answers stay rounded boxes (decision panel, 2026-09-26, 3 of 4) */
.question{margin:1rem 0}
.question .h2{margin-top:0}
.ask{font-size:1.125rem}
.opts{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.5rem}
.opts{row-gap:.25rem;grid-auto-rows:1fr auto}.opts>li{display:grid;grid-row:span 2;grid-template-rows:subgrid}.opts .reply{margin:.25rem 0}.opts>li:last-child .reply{margin-bottom:0}   /* every pill in a question as tall as the tallest (owner, 2026-09-26): each option spans its pill row and an empty row for its reply, so a reply opening never stretches the others; the gaps add up to the old .5rem */
.opt{width:100%;text-align:left;display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1.5px solid var(--accent);color:var(--ink);font-weight:600}
.opt[aria-pressed="true"]{background:var(--soft)}
.instead{margin:.25rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;color:var(--muted);font-size:.9375rem;font-weight:600}
.instead button{min-height:2.25rem;padding:.3rem .8rem;border-radius:999px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent);font-weight:700;font-size:.9375rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt::before{content:"";flex:0 0 auto;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid var(--accent);background:var(--surface)}
.opt[aria-pressed="true"]{border-color:var(--accent)}
.opt[aria-pressed="true"]::before{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,var(--surface) 52%)}
.opts.answered .opt[aria-pressed="false"]{opacity:.7}
.act{width:100%}.question .steps+.act,.question .cue-steps+.cue-actions{margin-top:1.25rem}
.act:disabled{opacity:.5;cursor:default}.act.primary:disabled{opacity:1}   /* "Running…" looks alive, not switched off (owner, 2026-09-26) */
.cue-actions{display:grid;gap:.5rem;margin-top:.75rem}
.reply{margin:.5rem 0 0;padding:.75rem 1rem;border-radius:.75rem;background:var(--soft);font-weight:400;position:relative}
.reply:empty{display:none}
.opts .reply::before{content:"";position:absolute;top:-.45rem;left:1.25rem;border:.45rem solid transparent;border-top:0;border-bottom-color:var(--soft)}
.reply:empty{margin:0}
@media (prefers-reduced-motion:reduce){.words .line{transition:none}}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--sim-sab,env(safe-area-inset-bottom)));z-index:12;display:flex;gap:min(.25rem,5px);padding:min(.3125rem,6px);transition:transform .25s ease,opacity .25s ease;border-radius:999px;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.25),0 .5rem 1.5rem rgba(29,45,41,.14)}
.tabbar .tab{display:flex;align-items:center;gap:min(.5rem,10px);min-height:min(3rem,56px);padding:0 min(1.125rem,22px);border-radius:999px;color:var(--accent);text-decoration:none;font-size:min(.9375rem,19px);font-weight:600;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.tabbar.tuck{transform:translate(-50%,calc(100% + 16px + var(--sim-sab,env(safe-area-inset-bottom))));opacity:0;pointer-events:none}   /* a button would be under it (large text, a tall card): it slides away until nothing is */
@media (prefers-reduced-motion:reduce){.tabbar{transition:none}}
.tabbar .tab[aria-current="page"]{background:rgba(36,74,64,.1);box-shadow:none}   /* a white platter on clear glass did not show (QC panel, 2026-09-26) */
.tabbar svg.stones,.tabbar svg:not(.stones) circle{fill:currentColor;stroke:none}
.tabbar .np{padding:0;min-height:0;background:none;border:0;font:inherit;cursor:pointer}.tabbar .np-disc{display:flex;align-items:center;justify-content:center;width:min(3.25rem,56px);height:min(3.25rem,56px);border-radius:50%;background:var(--accent);color:var(--on-accent)}
.tabbar .np .play-ico{border-width:.55rem 0 .55rem .98rem;margin-left:.23rem}.tabbar .np.on .play-ico{width:.89rem;height:1.1rem;border-width:0 .31rem;border-style:solid;border-color:transparent currentColor;margin-left:0}
.tabbar.has-np .tab:not(.np) svg{display:none}   /* a voice playing off its card: the pill carries its Pause; the tabs keep their words and drop their icons (decision panel, 2026-09-26) */
.btn,.act,.opt,.help .call,.tabbar .tab,.play .play-disc,.play.big{transition:transform .12s ease,opacity .12s ease,background-color .12s ease}
.btn:active,.act:active,.opt:active,.help .call:active{transform:scale(.97);opacity:.85}.play:active .play-disc,.play.big:active{transform:scale(.92)}
.tabbar .tab:active{background:rgba(36,74,64,.16)}.crumbs a:active,.back-link a:active,.stop a:active .name{opacity:.55}   /* a touch shows (QC panel, 2026-09-26) */
@media (prefers-reduced-motion:reduce){.btn:active,.act:active,.opt:active,.help .call:active,.play:active .play-disc,.play.big:active{transform:none}}
.dragging .btn:active,.dragging .act:active,.dragging .opt:active,.dragging .help .call:active,.dragging .play:active .play-disc,.dragging .play.big:active{transform:none;opacity:1}.dragging .tabbar .tab:not([aria-current="page"]):active{background:none}
html[data-slides] body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img,svg{-webkit-touch-callout:none;-webkit-user-drag:none}   /* a long press on a card no longer starts selecting words or a Save Image menu that fights the swipe */
.tabbar svg{width:min(1.375rem,26px);height:min(1.375rem,26px);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a small floating pill, like the last app's dock (owner, 2026-09-26), in a very clear Liquid Glass ("make nav bar liquid glass that is very clear"): mostly see-through, a soft blur behind, a bright edge and a highlight; the icon beside its word */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--sim-sat,env(safe-area-inset-top));background:var(--ground);z-index:11;pointer-events:none}@supports (top:env(safe-area-inset-top)){body::before{height:calc(var(--sim-sat,env(safe-area-inset-top)) + .75rem);background:linear-gradient(var(--ground) calc(100% - .75rem),rgba(238,243,240,0))}}   /* behind the clock and the Dynamic Island, as an iOS app has (QA, 2026-09-26) */
html{overflow-anchor:none}   /* Chrome (Android, and the website there) shifted the page when the playing screen opened and closed, and lost the next swipe */
:root{--bar:calc(min(4.375rem,80px) + var(--sim-sab,env(safe-area-inset-bottom)))}   /* the pill's height and its gap: each card and page keeps this much room at its foot */
body{padding-bottom:calc(3rem + var(--bar))}html[data-slides] body{padding-bottom:0}   /* the card pages end on their last card: the room was for the old footer (QC panel, 2026-09-26) */
.slide,.slide.last{padding-bottom:calc(1rem + var(--bar))}.slide.cover{padding-bottom:calc(1.5rem + var(--bar))}
.stop{height:calc(100vh - var(--mh) - var(--bar));height:calc(100lvh - var(--mh) - var(--bar));height:calc(100dvh - var(--mh) - var(--bar))}
.foot p{margin:0 0 .5rem}
.info h2{font-size:1.5rem;margin:2.5rem 0 .5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.info h2:first-child{margin-top:1rem;padding-top:0;border-top:0}
.info h3{margin:1.25rem 0 .25rem}
.help-first{margin:.5rem 0 0}
.help-first .btn{justify-content:space-between;text-align:left;gap:1rem}
.help-first .btn span[aria-hidden]{font-size:1.5rem;line-height:1}
.help .block{background:var(--surface);border-radius:1rem;padding:1rem;margin:0 0 .75rem}
.help .block p{margin:0 0 .5rem}
.help .what{font-weight:700;font-size:1.125rem;line-height:1.5;margin:0 0 .5rem}
.help .calls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.help .call{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.125rem;border-radius:.75rem;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}
.help .call.quiet{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
html.touch :focus-visible{outline:none}   /* after a touch the ring stays off until a key is pressed (audit, 2026-09-25: the ring followed every tap on the phone) */
/* Forced colours (Windows High Contrast) drop fills, shadows and gradients, so every card and state keeps an edge or a mark. */
@media (forced-colors:active){
.wash,.splash,.focus{background-image:none}
.help .block,.reply{border:1px solid CanvasText}
.rec .art,.art.small,.cover-art{forced-color-adjust:none;background:#DCE8E1;outline:1px solid CanvasText}   /* a plate under the drawing, so its ink shows on any theme */
.play.big,.play-disc,.help .call{border:1.5px solid currentColor}
.play-ico{forced-color-adjust:none;border-color:transparent transparent transparent ButtonText}
[data-state="playing"] .play-ico,[data-state="starting"] .play-ico{border-left-color:ButtonText;border-right-color:ButtonText}
.opt::before{forced-color-adjust:none;border-color:ButtonText;background:Canvas}
.opt[aria-pressed="true"]::before{border-color:ButtonText;background:radial-gradient(ButtonText 45%,Canvas 52%)}
.opts.answered .opt[aria-pressed="false"]{opacity:1}
.opts .reply::before{display:none}
.stop .name{color:LinkText}
.art .anim{forced-color-adjust:none}
.snap .slide{opacity:1}
}
.paths .h2{margin:0 0 .25rem}.paths .paths-h{font-size:1.75rem;line-height:1.2;letter-spacing:-.01em}.paths-crumbs,.path-crumbs{margin:-.75rem 0 0}.paths-sum{margin:0 0 .75rem;max-width:26rem;color:var(--muted);font-size:1.0625rem;line-height:1.45;text-wrap:balance}.path-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .875rem}.paths{container-type:inline-size}@container (max-width:12.5em){.path-cards{grid-template-columns:1fr}}.path-card{display:flex;flex-direction:column;gap:.375rem;color:var(--accent);text-decoration:none;-webkit-tap-highlight-color:transparent}.path-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;box-sizing:border-box;padding:.625rem;object-fit:contain;border-radius:1.125rem;background:rgba(255,255,255,.72);border:1px solid var(--line)}.path-card:active img{background:var(--soft)}.path-card:active .pc-name{opacity:.55}.pc-name{font-weight:700;font-size:1.125rem;line-height:1.25;color:var(--accent);text-wrap:balance}.today .app-id{text-align:center;margin:0 0 .5rem}.app-name{margin:0;font-size:1.5rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}.app-sub{margin:.125rem 0 0;font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--ink)}.hc-about{margin:.375rem 0 0;color:var(--muted);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}.today .hc-welcome{background:none;border-color:transparent;box-shadow:none;padding:.5rem .25rem .75rem}.today .hero{display:flex;justify-content:center;margin:.25rem 0 .75rem}.hero-mark{display:block;width:auto;height:6rem;height:min(6rem,13vh)}.today-h{margin:0 .25rem .75rem;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}.hcard{position:relative;display:flex;align-items:center;gap:1rem;margin:0 0 .625rem;padding:1.125rem 1.25rem;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:1.125rem;box-shadow:0 1px 2px rgba(29,45,41,.04);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}a.hcard:active,.hc-resume:has(.hc-link:active){background:var(--soft)}.hcard .txt{flex:1;min-width:0;display:block}.hcard .eyebrow{display:block;margin:0 0 .125rem;color:var(--accent);font-weight:600;font-size:1rem;line-height:1.35}.hc-title{display:block;margin:0;font-size:1.2rem;font-size:min(1.2rem,9vw);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}.hcard .meta .nb{display:inline-block}.hcard .meta{display:block;margin:.25rem 0 0;color:var(--muted);font-size:1.0625rem;line-height:1.35}.hc-link{color:inherit;text-decoration:none}.hc-link::after{content:"";position:absolute;inset:0;border-radius:inherit}.hcard .art.offcard{display:none}.hc-chev{flex:none;align-self:center;margin:-.75rem -.25rem -.75rem 0;color:#9CB7AC;font-size:3rem;line-height:1;font-weight:300}.hc-explore{background:none;border-color:transparent;box-shadow:none;padding-top:.5rem;padding-bottom:.5rem}a.hc-explore:active{background:none;opacity:.55}.today.nomark .hero{display:none}.today.tight{margin-top:-.5rem}.today.tight .hcard{padding:.75rem 1rem;margin-bottom:.5rem;gap:.75rem}.today.tight .today-h{margin-bottom:.5rem}.quote-item{margin:0}.quote-item blockquote{margin:.25rem 0 .5rem;font-size:1.375rem;line-height:1.35;font-weight:600;letter-spacing:-.005em;text-wrap:pretty}.quote-item .who{margin:0;color:var(--muted);font-size:1rem;line-height:1.4}.home-list .list-title{margin:.75rem 0 .5rem;font-size:2rem;line-height:1.15;font-weight:700;letter-spacing:-.015em}.home-list .list-about{margin:0 0 .25rem;color:var(--muted);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}.home-list .list-h{margin:1.25rem 0 .625rem;font-size:1.0625rem;line-height:1.3;font-weight:600;color:var(--muted)}.home-list #rec-resume{margin:1rem 0 0}body:has(.home-list){padding-bottom:calc(1rem + var(--bar))}.hc-resume .eyebrow,.hc-resume .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.path-rows{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}.path-row,.hc-row{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem .5rem .5rem;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:1.125rem;box-shadow:0 1px 2px rgba(29,45,41,.04);color:var(--accent);text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.path-row:active{background:var(--soft)}.pr-art{flex:none;display:block;width:4.5rem;height:4.5rem;border-radius:.75rem;overflow:hidden}.pr-art img{display:block;width:100%;height:100%;object-fit:contain}.pr-name{flex:1;min-width:0;font-size:1.1875rem;line-height:1.25;font-weight:700;letter-spacing:-.005em;text-wrap:balance}.pr-chev{flex:none;color:var(--accent);font-size:2rem;line-height:1;font-weight:400;margin:-.25rem 0}.home-list .hc-resume .hc-title{color:var(--accent)}.home-list .hc-resume .meta{font-size:1rem}.home-list.tight .pr-art{width:3.25rem;height:3.25rem}.home-list.tight .path-row,.home-list.tight .hc-row{padding:.375rem .75rem .375rem .375rem;gap:.75rem}.home-list.tight .path-rows{gap:.5rem}.home-list.tight .list-h{margin:.875rem 0 .5rem}.home-list.notitle .list-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.moments.pathb{--mh:3.25rem;--mh:calc(3.25rem + var(--sim-sat,env(safe-area-inset-top)))}.moments.pathb .h2{padding-top:0}.pathb .stop{display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;box-sizing:border-box;height:calc(100vh - var(--mh));height:calc(100lvh - var(--mh));height:calc(100dvh - var(--mh));padding-bottom:var(--bar)}.pathb .stop>a.stop-link{position:relative;top:auto;left:auto;translate:none;width:auto;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;row-gap:1rem;color:var(--accent);text-decoration:none}.pathb .stop-art{display:block;width:15rem;max-width:100%;height:11rem;object-fit:contain}.pathb .mv.stop-art.cropped{--hh:9rem;aspect-ratio:var(--ar);height:auto;width:min(15rem,calc(var(--hh) * var(--ar)));overflow:hidden;margin:calc(10.25rem - min(var(--hh),15rem / var(--ar))) 0 .75rem}.pathb .stop .name{font-size:1.5rem;line-height:1.15;font-weight:700;letter-spacing:-.01em;background:none;border-radius:0;padding:0;color:var(--accent);text-wrap:balance}.pathb .stop .chev{font-weight:500;font-size:1.875rem;line-height:1}.pathb .stop-link:active .stop-art,.pathb .stop-link:active .name{opacity:.55}.pathb .stop-sum{display:block;margin:-.625rem auto 0;max-width:21rem;color:var(--muted);font-size:1.0625rem;line-height:1.5;text-wrap:balance}.pathb .stop-stones{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:safe center;gap:1.6rem;align-items:center;padding:1rem 0 .5rem}.pathb .stop-stones .stone{flex:none;display:block;width:2.6rem;height:1.3rem;fill:#A8A398;overflow:visible}.pathb .stop-stones .s0{scale:1.12}.pathb .stop-stones .s1{scale:.9}.pathb .stop-stones .s2{scale:1.02}.pathb .stop-stones .s3{scale:.84}.pathb .mx0{translate:-1.4rem 0}.pathb .mx1{translate:.9rem .35rem}.pathb .mx2{translate:-.2rem -.2rem}.pathb .mx3{translate:2rem .25rem}.pathb .mx4{translate:.9rem -.3rem}.pathb .mx5{translate:-1.5rem .15rem}.rec-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem}.rec-controls{flex-wrap:wrap;align-items:center}.play.cap,.read{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:auto;height:auto;min-height:44px;min-height:max(44px,2.75rem);margin:0;padding:0 .875rem;border-radius:999px;font-size:1.0625rem;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.play.cap{background:var(--accent);color:var(--on-accent);border:1.5px solid var(--accent)}.play.cap::after{content:none}.read{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}.read .book{flex:none;width:1.35em;height:1.35em;margin-left:-.125rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.play.cap{display:inline-grid;place-items:center}.play.cap>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.5rem}.play.cap .play-sizer{visibility:hidden}.play.cap .play-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}.play.cap .play-ico{flex:none;border-width:.42em 0 .42em .72em;margin-left:.1em}[data-state="playing"] .play.cap .play-ico,[data-state="starting"] .play.cap .play-ico{width:.66em;height:.8em;border-width:0 .22em;margin-left:0}.hcard .rec-acts .play.cap,.hcard .rec-acts .read{z-index:1}.play.cap:active,.read:active{transform:scale(.97);opacity:.85}.play.cap,.read{transition:transform .12s ease,opacity .12s ease}.dragging .play.cap:active,.dragging .read:active{transform:none;opacity:1}@media (prefers-reduced-motion:reduce){.play.cap:active,.read:active{transform:none}}body>.reader{position:fixed;top:0;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;background:var(--ground)}.reader-top{flex:none;display:flex;justify-content:flex-end;padding:var(--sim-sat,env(safe-area-inset-top)) calc(.25rem + var(--sim-sar,env(safe-area-inset-right))) 0 calc(.25rem + var(--sim-sal,env(safe-area-inset-left)))}.reader-close{min-height:44px;min-height:max(44px,3rem);min-width:44px;margin:0;padding:0 .75rem;background:none;border:0;color:var(--accent);font-weight:600;font-size:1.0625rem;cursor:pointer;-webkit-tap-highlight-color:transparent}.reader-close:active{opacity:.55}.reader-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:.25rem calc(1.25rem + var(--sim-sar,env(safe-area-inset-right))) calc(2.5rem + var(--sim-sab,env(safe-area-inset-bottom))) calc(1.25rem + var(--sim-sal,env(safe-area-inset-left)))}.reader-in{max-width:30rem;margin:0 auto}.reader-title{margin:0 0 1.25rem;font-size:1.5rem;line-height:1.25;text-wrap:balance}.reader-part{margin:2rem 0 .75rem;font-size:1.125rem;line-height:1.3}.reader-text>.reader-part:first-child{margin-top:0}.reader-text p{margin:0 0 .5rem;font-size:1.125rem;line-height:1.55;text-wrap:pretty}.reader-text p.gap{margin-top:1.25rem}html.has-reader,html.has-reader body{overflow:hidden}.focus{overflow:hidden;align-items:stretch;padding:calc(.75rem + var(--sim-sat,env(safe-area-inset-top))) calc(1rem + var(--sim-sar,env(safe-area-inset-right))) calc(.75rem + var(--sim-sab,env(safe-area-inset-bottom))) calc(1rem + var(--sim-sal,env(safe-area-inset-left)))}.focus-top{flex:none;display:flex;align-items:center;gap:.875rem;width:100%;max-width:30rem;margin:0 auto}.focus-top .focus-art{flex:none;width:3.75rem;height:3.75rem;margin:0;border-radius:.875rem;background:rgba(255,255,255,.72);border:1px solid var(--line)}.focus-head{min-width:0;flex:1}.focus-head .focus-kind{margin:0;font-size:.9375rem}.focus-head .focus-title{margin:.125rem 0 0;font-size:1.25rem;line-height:1.25;text-align:left;text-wrap:balance}.focus-head .focus-then{margin:.125rem 0 0;text-align:left;font-size:.9375rem}.focus-words{flex:1 1 0;min-height:0;width:100%;max-width:30rem;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.25rem 0 40vh;padding-bottom:40dvh;-webkit-mask-image:linear-gradient(transparent,#000 1.25rem,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(transparent,#000 1.25rem,#000 calc(100% - 2rem),transparent)}.focus-words .words{display:block;border:0;padding:0;font-size:1.0625rem;line-height:1.5;text-align:center}.focus-words .words p{margin:0 0 .5rem}.focus-words .words br{display:none}.focus-words .line{display:block;margin:0 0 .25rem;padding:.375rem .75rem;border-radius:.875rem;color:var(--ink);text-wrap:pretty;transition:color .3s,opacity .3s,background-color .3s}.focus-words .reading .line{color:var(--muted);opacity:.8;text-decoration:none}.focus-words .reading .line.done{opacity:.55}.focus-words .reading .line.now{color:var(--ink);opacity:1;font-weight:700;font-size:1.1875rem;line-height:1.4;background:var(--soft);text-decoration:none}.focus-part{margin:1.25rem 0 .75rem;text-align:center;color:var(--muted);font-weight:600;font-size:.9375rem;letter-spacing:.01em}.focus-controls{flex:none;display:flex;align-items:center;justify-content:center;gap:1rem;width:100%;max-width:30rem;margin:.5rem auto 0}.focus-controls .focus-mute,.focus-controls .focus-back{position:static;align-self:auto;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-width:6.25rem;min-height:3rem;margin:0;padding:0 1rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--accent);color:var(--accent);font-weight:600;font-size:1.0625rem;line-height:1.2;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.focus-controls .focus-mute:active,.focus-controls .focus-back:active{opacity:.55}.focus-mute .ic{flex:none;width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.focus-mute .ic .cone{fill:currentColor}.focus-mute .ic .slash{display:none}.focus-mute.on .ic .slash{display:inline}.focus-mute.on .ic .waves{display:none}.focus .focus-controls .play.big.round{flex:none;width:4rem;height:4rem;margin:0}.focus .focus-controls .play.big.round .play-ico{border-width:.62rem 0 .62rem 1.05rem;margin-left:.25rem}.focus[data-state="playing"] .focus-controls .play.big.round .play-ico,.focus[data-state="starting"] .focus-controls .play.big.round .play-ico{width:1rem;height:1.2rem;border-width:0 .34rem;margin-left:0}@media (prefers-reduced-motion:reduce){.focus-words .line{transition:none}}.support{position:fixed;top:0;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ground);text-align:center;padding:calc(1.5rem + var(--sim-sat,env(safe-area-inset-top))) calc(1.25rem + var(--sim-sar,env(safe-area-inset-right))) calc(1.5rem + var(--sim-sab,env(safe-area-inset-bottom))) calc(1.25rem + var(--sim-sal,env(safe-area-inset-left)))}.support[hidden]{display:none}.support-in{width:100%;max-width:24rem;margin:auto}.support-art{display:flex;justify-content:center;margin:0 0 1.5rem}.support-art img{display:block;width:min(17rem,80vw);height:auto;max-height:28vh}.support-h{margin:0 0 .5rem;font-size:1.5rem;line-height:1.2;text-wrap:balance}.support-line{margin:0 0 1.75rem;color:var(--muted);font-size:1.0625rem;line-height:1.45;text-wrap:balance}.support-go{margin:0}.support .support-give{display:flex;width:100%;min-height:3.25rem;align-items:center;justify-content:center;border-radius:999px;text-decoration:none}.support-note{margin:.625rem 0 1.25rem;color:var(--muted);font-size:.9375rem}.support-skip{margin:0}.support-free{min-height:3rem;padding:0 1rem;background:none;border:0;color:var(--accent);font-weight:600;font-size:1.0625rem;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}.support-free:active{opacity:.55}body:has(.support:not([hidden])) .tabbar{opacity:0;pointer-events:none}.splash[data-welcome]{animation:none!important;justify-content:flex-start;overflow-y:auto;gap:0;padding:calc(1.5rem + var(--sim-sat,env(safe-area-inset-top))) calc(min(1rem,4.3vw) + var(--sim-sar,env(safe-area-inset-right))) calc(1.5rem + var(--sim-sab,env(safe-area-inset-bottom))) calc(min(1rem,4.3vw) + var(--sim-sal,env(safe-area-inset-left)))}.splash[data-welcome] .stones-mark{margin-top:auto;margin-bottom:1.25rem}.splash[data-welcome] .with{margin-top:.25rem}.splash .wl-more{display:flex;flex-direction:column;align-items:center;width:100%;max-width:22rem}.wl-about{margin:1.25rem 0 0;font-size:1.0625rem;line-height:1.5;color:var(--ink);text-wrap:pretty}.wl-free{margin:1rem 0 0;font-size:1.0625rem;line-height:1.3;font-weight:600;color:var(--ink)}.wl-go{margin:2rem 0 0;width:100%}.wl-start{display:flex;width:100%;min-height:3.25rem;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--accent);font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation}.splash .wl-org{margin:auto 0 0;padding-top:2rem;max-width:22rem;color:#617069;font-size:.75rem;line-height:1.5;text-wrap:balance}.wl-org .nw{white-space:nowrap}.wl-org a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:.75rem .375rem;margin:-.75rem -.375rem}.splash[data-welcome] .wordmark{padding:0;font-size:2rem;line-height:1.15;letter-spacing:0;color:var(--ink)}.wl-start::after{content:"\203A";content:"\203A" / "";margin-left:.375rem;font-size:1.25rem;line-height:1}.splash[data-welcome] .wordmark,.splash[data-welcome] .with{animation-duration:.6s;animation-delay:.8s}.splash[data-welcome] .wl-more,.splash[data-welcome] .wl-org{animation:wl-in .6s ease 1.2s both}@keyframes wl-in{from{opacity:0;transform:translateY(.5rem);visibility:hidden}to{opacity:1;transform:none;visibility:visible}}.splash[data-welcome].leaving{opacity:0;transition:opacity .25s ease}@media (prefers-reduced-motion:reduce){.splash[data-welcome] .wl-more,.splash[data-welcome] .wl-org{animation:none}.splash[data-welcome].leaving{transition:none}}.home-list .list-title{text-wrap:balance}.path-rows.tiles{grid-template-columns:1fr 1fr;gap:.5rem}.path-rows.tiles li{display:flex;min-width:0}.path-rows.tiles .path-row{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:6rem 1fr;align-items:end;gap:.75rem .25rem;padding:1rem .75rem 1rem 1rem}.path-rows.tiles .pr-art{grid-column:1 / -1;width:100%;height:100%;border-radius:0}.path-rows.tiles .pr-art img{object-position:50% 100%}.path-rows.tiles .pr-name{text-wrap:balance}.path-rows.tiles .pr-chev{margin:0 0 .0625rem}.path-rows.tiles .pr-name{font-size:1rem}.path-rows.tiles .path-row .pr-chev{font-size:1.625rem;line-height:1.25rem}.slide.lc-last .keep-again+.lines{align-self:stretch;text-align:left}main>.crumbs:first-child{margin-top:-1.25rem}.path-rows.tiles .pr-chev{line-height:1.5rem}.pathb .stop-lab{display:block;margin:0 0 -.5rem;font-size:1.0625rem;line-height:1.3;font-weight:600;color:var(--muted)}.home-list .hc-resume{border-color:var(--accent)}.home-list .hc-resume .eyebrow{white-space:normal;overflow:visible;text-overflow:clip}.home-list.tight .path-rows.tiles .path-row{grid-template-rows:4.5rem 1fr;gap:.5rem .25rem;padding:.75rem .625rem .75rem .75rem}.home-list.tight .path-rows.tiles .pr-art{width:100%;height:100%}.home-list .hc-resume .pr-art{width:5.5rem;height:4.125rem;border-radius:0}.home-list .hc-resume .pr-art img{object-position:50% 100%}.home-list.tight .hc-resume .pr-art{width:4.3333rem;height:3.25rem}.btn.donate .lab{display:inline-flex;align-items:center;gap:.625rem;min-width:0}.btn.donate svg.give{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn.donate span[aria-hidden]{font-size:1.25rem}.donate-why{margin:.5rem 0 1.25rem;color:var(--muted);font-size:1.0625rem;line-height:1.5}.lc .h2{margin:0 0 1rem}.lc-lines p,.lc-beats p{margin:0 0 1rem;font-size:1.1875rem;line-height:1.45;text-wrap:pretty}.lc-lines p:last-child,.lc-beats p:last-child{margin-bottom:0}.lc-moment .lc-lines p{font-size:1.3125rem;line-height:1.4;font-weight:600;letter-spacing:-.005em}.lc-line{margin:0 auto;max-width:88%;font-size:1.375rem;line-height:1.4;font-style:italic;text-align:center;text-wrap:balance}.lc-one .h2{align-self:flex-start}.lc-body{margin:0;font-size:1.1875rem;line-height:1.5;text-wrap:pretty}.lc-ask{margin:0;font-size:1.375rem;line-height:1.4;font-weight:600;text-wrap:pretty}.lc-note{margin:.75rem 0 0;color:var(--muted);font-size:1rem;line-height:1.4}.lc-quote{margin:0;text-align:center}.lc-quote blockquote{margin:0}.lc-quote blockquote p{margin:0;font-size:1.375rem;line-height:1.4;font-style:italic;text-wrap:balance}.lc-quote blockquote em{font-style:normal}.lc-quote figcaption{margin:.75rem 0 0;color:var(--muted);font-size:1rem;line-height:1.4;text-wrap:balance}.lc-art{display:block;width:min(46%,10rem);width:min(46%,10rem,20dvh);height:auto;margin:0 auto 1.25rem}.art-sm .lc-art{width:min(30%,6.5rem);margin-bottom:1rem}.art-off .lc-art{display:none}.hook{margin:0;font-size:1.25rem;line-height:1.4;font-weight:600;text-wrap:balance}.first-go{margin:1.5rem 0 0}.first-go .btn{width:100%}.slide.lc,.slide.lc-last{justify-content:flex-start;padding-top:calc(var(--sim-sat,env(safe-area-inset-top)) + min(4.25rem,11vh))}.slide.lc.lc-full,.slide.lc-last.lc-full{padding-top:calc(1rem + var(--sim-sat,env(safe-area-inset-top)))}.lc-last .h2{margin:0 0 1rem}.slide.lc-last .keep-again{margin:0 0 1.75rem;font-size:1.625rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;text-align:center;text-wrap:balance}.sl-h{margin:1.5rem 0 .5rem;font-size:1.0625rem;line-height:1.3;font-weight:600;color:var(--muted)}.step-list{list-style:none;margin:0;padding:0;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:1.125rem;overflow:hidden}.step-list li+li{border-top:1px solid var(--line)}.step-list a{display:flex;align-items:center;gap:.75rem;min-height:2.875rem;padding:.375rem .875rem .375rem 1rem;color:var(--accent);text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.step-list a:active{background:var(--soft)}.sl-n{flex:none;min-width:1.1rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}.sl-name{flex:1;min-width:0;font-size:1.0625rem;line-height:1.3;font-weight:600}.step-list .pr-chev{font-size:1.625rem}.sl-tight .sl-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.sl-tight .first-go{margin-bottom:1rem}.slide.cover.sl-tight{padding-bottom:calc(.5rem + var(--bar))}.sl-tighter .step-list a{min-height:2.625rem;padding-top:.25rem;padding-bottom:.25rem}.sl-tighter .first-go{margin-top:1rem}.sl-tightest .step-list a{min-height:2.5rem;padding-top:.125rem;padding-bottom:.125rem}.sl-tightest .crumbs{margin-bottom:0}.sl-tightest h1{margin-bottom:.5rem}.sl-tightest .first-go{margin-top:.75rem}.teach{margin:auto 0 0;padding-top:1rem;text-align:center;color:var(--muted);font-size:1rem}.teach::after{content:" \2191"}.slide.cover.cover{min-height:calc(100vh - 1.25rem - var(--sim-sat,env(safe-area-inset-top)));min-height:calc(100dvh - 1.25rem - var(--sim-sat,env(safe-area-inset-top)));padding-bottom:calc(var(--bar) + 1.5rem)}.slide.cover .cover-go{margin:auto 0 0;padding-top:1.25rem;display:flex;flex-direction:column;align-items:center}.start-cue{display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:3.5rem;color:#77847E;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.start-cue svg{display:block;width:112px;height:18px;overflow:visible}.start-cue path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.start-cue:active{color:var(--accent)}.cover-go .teach{margin:0;padding-top:0}.cover-go .teach::after{content:none}@media (prefers-reduced-motion:no-preference){.start-cue svg{animation:cue-rise 1.1s ease .9s 2}.start-cue.nudge svg{animation:cue-rise .45s ease 2}}@keyframes cue-rise{0%,100%{transform:none}50%{transform:translateY(-6px)}}@media (prefers-reduced-motion:no-preference){.teaching .lc-lines{animation:teach-lift 1.6s ease .6s 1 both}@keyframes teach-lift{0%{transform:none}35%{transform:translateY(-14px)}70%,100%{transform:none}}}.slide.cover>.crumbs:first-child{margin-top:-1.25rem}.slide.cover .crumbs .note{font-weight:600}@media (max-height:700px){.slide.lc .opts .opt{padding-top:7px;padding-bottom:7px;min-height:44px}.slide.lc .question .h2,.slide.lc .question .ask,.slide.lc .lc-art,.slide.lc-last .lc-art{margin-bottom:.75rem}}.mv{position:relative}.mv img{display:block;width:100%;height:100%;object-fit:contain}.mv .anim{position:absolute;inset:0}.mv .anim svg{display:block;width:100%!important;height:100%!important}.mv.cover-art,.mv.lc-art{aspect-ratio:1/1}.mv.lc-art.cropped{--hh:min(6.75rem,13dvh);aspect-ratio:var(--ar);width:min(72%,calc(var(--hh) * var(--ar)));overflow:hidden}.mv.cropped img,.mv.cropped .anim{position:absolute;inset:auto;left:var(--l);top:var(--t);width:var(--w);height:var(--h)}.mv.cover-art.cropped{--hh:min(8.5rem,17dvh);aspect-ratio:var(--ar);width:min(80%,calc(var(--hh) * var(--ar)));overflow:hidden}.art-sm .mv.lc-art.cropped{--hh:min(4.25rem,9dvh)}.mv.lc-art.cropped{margin-top:max(0px,calc(var(--hh) - 72% / var(--ar)))}.mv.cover-art.cropped{margin-top:max(.5rem,calc(.5rem + var(--hh) - 80% / var(--ar)))}.path-card .mv.pc-art{display:block;width:100%;aspect-ratio:4/3;box-sizing:border-box;padding:.625rem;border-radius:1.125rem;background:rgba(255,255,255,.72);border:1px solid var(--line)}.path-card .mv.pc-art .anim{inset:.625rem}.path-card:active .mv.pc-art{background:var(--soft)}.path-card .mv.pc-art img,.path-card:active .mv.pc-art img{height:100%;aspect-ratio:auto;padding:0;border:0;border-radius:0;background:none}.lc-moment.lc-story .lc-lines p{font-size:1.1875rem;line-height:1.5;font-weight:400;letter-spacing:0}.slide.lc .lc-intro{margin:0 0 1rem}.slide.lc-last.lc-story .keep-again+.lines{font-size:1.1875rem;line-height:1.5;text-wrap:pretty}.slide.lc .lc-beats p.lc-big,.slide.lc .lc-lines p.lc-big{font-size:1.5rem;line-height:1.3;font-weight:400;letter-spacing:-.005em;text-wrap:balance;hanging-punctuation:first}.slide.lc .lc-beats p.lc-cite{margin:.75rem 0 0;color:var(--muted);font-size:1rem;line-height:1.4}.slide.lc .lc-beats p.lc-echo,.slide.lc .lc-lines p.lc-echo{color:var(--muted);padding-left:.875rem;border-left:2px solid var(--line)}.lc-slip{list-style:none;margin:0 0 1rem;padding:.5rem 1rem;border:1px solid var(--line);border-radius:2px;box-shadow:0 1px 3px rgba(29,45,41,.12);font-size:1.1875rem;line-height:1.45;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.45em - 1px),var(--line) calc(1.45em - 1px),var(--line) 1.45em) content-box,var(--surface)}.lc-slip:last-child{margin-bottom:0}.lc-slip li{margin:0;break-inside:avoid}.lc-slip.two{columns:2;column-gap:1.25rem}.lc-slip .gone{color:var(--muted);opacity:.35}.slide.lc:not(.art-sm) .mv.lc-art.cropped.lg{--hh:min(8.5rem,17dvh)}.lc .h2,.lc-last .h2{font-size:1.0625rem;line-height:1.3;font-weight:600;color:var(--muted);margin:0 0 .5rem}@media (max-height:700px){.slide.lc .question .h2{margin-bottom:.5rem}}.eyebrow{color:var(--muted);line-height:1.3}.home-list .hc-resume .eyebrow{font-size:1.0625rem;line-height:1.3;color:var(--muted);margin:0 0 .25rem}.home-list .list-h,.sl-h{margin:1.25rem 0 .5rem}.home-list.tight .list-h{margin:.75rem 0 .5rem}.path-rows{gap:.5rem}.lc-one .h2,.lc-last .h2{align-self:flex-start;text-align:left}.lc-line{margin:0;max-width:none;text-align:left}.lc-quote{text-align:left}.slide.lc-last .keep-again{text-align:left}h1{margin-top:0}.home-list .list-title{margin:.75rem 0 .75rem;letter-spacing:0}.pr-name,.hc-title{letter-spacing:0}.pathb .stop .name{letter-spacing:0;line-height:1.2}.lc-moment .lc-lines p{font-size:1.3125rem;line-height:1.4;font-weight:400;letter-spacing:0}.hook{font-size:1.3125rem;line-height:1.4;font-weight:400}.lc-lines p,.lc-beats p{line-height:1.5}.slide.lc .ask,.lc-ask{font-size:1.3125rem;line-height:1.4;font-weight:500}.lc-line{font-size:1.3125rem}.lc-quote blockquote p{font-size:1.3125rem;font-style:normal}.lc-quote blockquote em{font-style:italic}.slide.lc-last .keep-again{font-size:1.5rem;font-weight:600;letter-spacing:0;margin:0}.slide.lc-last .keep-again+.lines{margin:1rem 0 0}.lc-last .next-link{margin-top:2rem}.home-list .list-about{line-height:1.5}.slide.cover>.lines{color:var(--muted);margin-bottom:0}.first-go{margin-top:2rem}.home-list .hc-resume .hc-title{font-size:1.1875rem}.sl-name{font-size:1.1875rem;font-weight:700}.home-list .hc-resume .meta{line-height:1.4}.btn,.act{font-weight:600}.crumbs .note,.deck-top .note,.slide.cover .crumbs .note{font-weight:400}.first-go .btn::after{content:"\203A";content:"\203A" / "";margin-left:.375rem;font-size:1.25rem;line-height:1}.opts.answered .opt[aria-pressed="false"]{opacity:1}.slide.cover .cover-art{margin-bottom:1.25rem}.pathb .mv.stop-art.cropped{margin-bottom:.25rem}