/* Calmlings on your phone: the app's styles, in the site's colours and fonts (static/site.css). The child's space is the
   night world where the cards glow; Bedtime is warmer and darker; the grown-ups area is the site's paper (night after
   the evening time). Kid targets are at least 64 px, grown-up targets 44 px. No inline styles anywhere (strict CSP). */
@font-face{font-family:'Fraunces';src:url(/app/fonts/fraunces-var.b19a1e5bf5.woff2) format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Nunito';src:url(/app/fonts/nunito.20fc9b6fc6.woff2) format('woff2');font-weight:200 1000;font-display:swap}
@font-face{font-family:'Caveat';src:url(/app/fonts/caveat-var.1c591acdad.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root{
  --night:#1C2052; --night-2:#2B2F72; --night-3:#161A40; --gold:#F2C14E; --gold-ink:#2A1A04; --moon:#F5F1FF; --moon-soft:#C6C2E6;
  --paper:#FBF8F3; --paper-2:#F4EFE6; --ink:#2F3A2A; --ink-soft:#55644A; --sage-deep:#3F5236; --sage-mist:#E8EDE0; --rose:#B8634F;
  --line:rgba(47,58,42,.16);
  --bed-bg:#14100C; --bed-bg-2:#1E1712; --bed-ink:#E8C9A0; --bed-ink-soft:#B89A78; --bed-glow:#F2B366;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; --hand:'Caveat','Comic Sans MS',cursive;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  /* Both sky surfaces use viewport-sized glow images, even when the safe-area surface is only a short strip.
     Their image coordinates therefore meet exactly on standalone iPhone/iPad, rather than restarting a gradient. */
  --sky-paint:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 1px,transparent 1.5px) 0 0/180px 160px,
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.35) 0 1px,transparent 1.5px) 0 0/230px 210px,
    radial-gradient(circle at 45% 80%,rgba(255,255,255,.3) 0 1px,transparent 1.5px) 0 0/150px 190px,
    radial-gradient(900px 520px at 85% -5%,rgba(96,78,190,.55),transparent 60%) 0 0/100vw 130vh no-repeat,
    radial-gradient(700px 480px at -5% 35%,rgba(40,90,160,.38),transparent 58%) 0 0/100vw 130vh no-repeat,var(--night);
  /* one motion language (butter, 3-4 Oct 2026; ui.js EASE/EASE_EXIT/BOUNCE/T): a well-damped spring's settle for
     everything that arrives, a gentle ease for what leaves, a hair of bounce for a button springing back; leave 180 ms,
     arrive 300 ms */
  --ease:cubic-bezier(.22,1,.36,1); --ease-exit:cubic-bezier(.4,0,.2,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --t-press:80ms; --t-out:180ms; --t-in:300ms;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(100% * var(--ts,1));-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night)}
body{margin:0;min-height:100dvh;background:var(--night);color:var(--moon);font-family:var(--sans);font-size:1.0625rem;line-height:1.45;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
/* the night sky: soft glows and still stars (the site's moving sky isn't used, to save battery) */
body::before{content:"";position:fixed;inset:0 0 -30vh 0;z-index:-1;pointer-events:none; /* reaches under the phone browser's sliding toolbar (no flat strip at the bottom) */
  background:var(--sky-paint)}
body.booting #app{opacity:0}
/* 3 Oct 2026: text boxes at 16 px or more, so iPhone and iPad never zoom the page in when a key is typed or pasted */
input,select,textarea,.field,.fd-input{font-size:max(16px,1rem)}
.area .gp{scroll-margin-top:96px}
.bk-unlock{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--gold);color:var(--gold-ink);font:800 .95rem var(--sans);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(242,193,78,.35)}
.bk-unlock svg{width:18px;height:18px}
@media (max-width:420px){.bk-unlock{padding:0 12px;font-size:.85rem}.bk-unlock svg{display:none}} /* a panel jumped to (from a locked card) shows its title below the sticky header */
/* 3 Oct 2026 (founder: "planets in the background with shooting stars, make it a bit fun"): the website's planets and
   shooting stars behind every screen. Transforms and opacity only (cheap on old iPads); still in calm mode, reduced
   motion and at bedtime (no shooting stars then). */
body{background:transparent} /* the navy comes from html, so the sky layers (z-index -1) show; body's own colour hid them */
.app-sky{position:fixed;inset:0 0 -30vh 0;z-index:-1;pointer-events:none;overflow:hidden;transition:opacity .6s var(--ease)}
.app-sky .planet{position:absolute;overflow:visible} /* the glow is inside each planet's picture (index.html), not a CSS filter: plan 2.3 */
.app-sky .p-ring{width:clamp(78px,13vw,150px);top:calc(var(--st,0px) + 9%);right:6%;opacity:.85;animation:skyFloatA 16s ease-in-out infinite alternate}
.app-sky .p-moon{width:clamp(30px,5vw,54px);top:calc(var(--st,0px) + 17vh);left:2.5%;opacity:.8;animation:skyFloatB 12s ease-in-out infinite alternate}
.app-sky .p-blue{width:clamp(36px,6vw,64px);bottom:32vh;left:4%;opacity:.75;animation:skyFloatB 18s ease-in-out 2s infinite alternate}
.app-sky .p-pink{width:clamp(30px,4.6vw,52px);bottom:38vh;right:5%;opacity:.7;animation:skyFloatA 20s ease-in-out 1s infinite alternate}
@keyframes skyFloatA{from{transform:translate3d(0,0,0) rotate(-4deg)}to{transform:translate3d(-18px,12px,0) rotate(4deg)}}
@keyframes skyFloatB{from{transform:translate3d(0,0,0)}to{transform:translate3d(12px,-14px,0)}}
.app-sky .shoot{position:absolute;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:0;transform:rotate(-28deg);animation:skyShoot 10s ease-in infinite}
.app-sky .shoot::after{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,240,200,.8)}
.app-sky .s1{top:14%;left:82%;animation-delay:2s}
.app-sky .s2{top:6%;left:38%;animation-delay:6s;animation-duration:13s}
.app-sky .s3{top:34%;left:98%;animation-delay:9.5s;animation-duration:15s}
@keyframes skyShoot{0%{opacity:0;transform:rotate(-28deg) translateX(0)}2%{opacity:1}9%{opacity:0;transform:rotate(-28deg) translateX(-420px)}100%{opacity:0;transform:rotate(-28deg) translateX(-420px)}}
@media (max-width:600px){ /* phones: planets beside the card and Breatho's hello, never behind the title or the big buttons */
  .app-sky .p-moon{top:calc(var(--st,0px) + 28vh);left:4%}
  .app-sky .p-blue{bottom:auto;top:calc(var(--st,0px) + 46vh);left:3%}
  .app-sky .p-pink{bottom:auto;top:calc(var(--st,0px) + 51vh);right:4%}
}
/* the planets keep clear of words and buttons (sky.js, 4 Oct 2026): one that has to move fades out where it is and back
   in at its new place (.shift), one with no clear place rests out of sight (.off), and while a page scrolls they fade out
   and come back once it rests (.hush). sky.js moves them with the translate property, which adds to their float. */
.app-sky .planet{transition:opacity .45s var(--ease)}
.app-sky .planet.shift,.app-sky.hush .planet{opacity:0;transition-duration:.16s}
.app-sky .planet.off{opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
html.reduce .app-sky .planet{transition:none}
html.at-bed .app-sky .shoot{display:none}
html.at-bed .app-sky{opacity:.5} /* main.js sets at-bed at Bedtime (butter: a :has() rule was checked on every change of the page) */
/* The sky rests when nobody is looking (plan 2.3, 3 Oct 2026): under an open card (the card is what a child looks at,
   and the moving sky costs style and compositing work on every frame of a spin: resting it cut frames over 20 ms in a
   spin from 42-48 to 25-31 and style work a frame from 0.32-0.40 to 0.18-0.21 ms, as much as hiding it), under Bedtime
   and the sleeping book (they cover it), and after 20 s without a touch (steady.js sets html.idle; the
   next touch wakes it). Paused, not stopped: the planets stay where they are and carry on from there, and a shooting star
   caught mid-flight hides rather than hang in the sky. Only the sky: the living card, Breatho's hello card and a
   breathing round go on. A screen hidden under another (inert) pauses its own endless animations too (Home's floating
   hello card under a card, the book's cover). */
html.idle .app-sky *{animation-play-state:paused}
html.idle .app-sky .shoot{visibility:hidden}
/* (separate rules: a selector list with :has() is dropped whole by an engine without it, iOS before 15.4) */
body:has(> #app > .layer.over) .app-sky *,body:has(.bed,.sleep) .app-sky *{animation-play-state:paused}
body:has(> #app > .layer.over) .app-sky .shoot{visibility:hidden}
/* Home's sparse 160-second space sequence continues through idle (sky.js), behind the whole app.
   Every flight has its own separate window; only transforms/opacity move. Other routes keep the native sky. */
.app-sky .home-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.app-sky .hs-flyby,.app-sky .hs-twinkle,.app-sky .hs-orbit{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transform-box:border-box;transform-origin:50% 50%}
.app-sky.home-on.home-motion>.shoot{display:none}
html.idle .app-sky.home-on:not(.home-motion)>.shoot{animation-play-state:running;visibility:visible}
.app-sky .hs-ufo{width:clamp(68px,8vw,104px);height:auto}
.app-sky .hs-rocket{width:clamp(70px,8.6vw,112px);height:auto}
.app-sky .hs-asteroid{width:clamp(28px,3.8vw,48px);height:auto}
.app-sky .hs-sun{width:clamp(88px,15vw,132px);height:auto}
.app-sky .hs-earth{width:clamp(42px,5.8vw,72px);height:auto}
.app-sky .hs-blue{width:clamp(28px,3.6vw,42px);height:auto}
.app-sky .hs-ring{width:clamp(58px,7vw,88px);height:auto}
.app-sky .hs-star{width:clamp(64px,9vw,124px);height:2px;border-radius:999px;background:linear-gradient(90deg,#FFF3C9,rgba(255,240,209,0));transform-origin:0 50%}
.app-sky .hs-star::after{content:"";position:absolute;left:-3px;top:-3px;width:8px;height:8px;background:#FFF6D9;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.app-sky .hs-twinkle{width:9px;height:9px;transform-origin:center}
.app-sky .hs-t1{left:22%;top:8vh}.app-sky .hs-t2{left:93%;top:37vh;width:7px;height:7px}.app-sky .hs-t3{left:5%;top:65vh;width:8px;height:8px}
.app-sky .hs-orbit{width:36px;height:36px;left:4%;top:39vh;transform-origin:center}
html.reduce .app-sky .home-sky,html.at-bed .app-sky .home-sky{display:none}
@media (prefers-reduced-motion:reduce){.app-sky .home-sky{display:none}}
.layer[inert] *,.layer[inert] *::before,.layer[inert] *::after{animation-play-state:paused}
/* the living card's moving back (stage.js showBackAnim, plan 2.2): over the still back only while the back is seen, it
   fades in like the front's moving close-up (.lc-anim), and in the lite look it rests while the card turns, as that does */
.lc-bmove{opacity:0;transition:opacity .35s ease}
.lc-bmove.on{opacity:1}
.lc-stage.lite.moving .lc-bmove.on{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
/* The approved transparent Calmlings logo appears over the app sky during startup. */
.boot-logo{position:fixed;left:50%;top:50%;width:min(80vw,420px);transform:translate(-50%,-50%);z-index:5;pointer-events:none;transition:opacity .3s}
.boot-logo span{display:block;width:100%;aspect-ratio:2160/708;background:url("/app/creator/calmlings-logo-approved-v3.957319ba17.png") center/contain no-repeat}
body:not(.booting) .boot-logo{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#app{transition:opacity var(--t-in) var(--ease)} /* the first screen fades in as the launch logo fades away */
h1,h2,h3{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.01em}
p{margin:0}
img{max-width:100%}
a{color:inherit}
button{font-family:inherit;color:inherit}
[hidden]{display:none!important}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{padding:40px 20px;text-align:center}
.ic{width:1.5em;height:1.5em;flex:none}
.ic.big{width:56px;height:56px}
/* Screens (main.js, butter): every screen is a layer in the same grid cell, so while one leaves and the next arrives both
   keep their own place and size (nothing reflows); a card is a layer fixed over the screen it came from, outside the grid. */
#app{display:grid;grid-template-columns:minmax(0,1fr)}
.layer{min-height:100dvh;position:relative}
#app > .layer:not(.over):not(.going){grid-area:1/1;align-self:start;min-width:0}
.layer.over,.layer.going{position:fixed;inset:0;z-index:30;min-height:0}
.layer.going{pointer-events:none} /* a card sinking away after Back never takes the next touch */
/* The screen under an open card (main.js .under) is not drawn at all. Where the browser has content-visibility (Safari
   18, Chrome) it is skipped as a whole: nothing in it is restyled, laid out, hit-tested or painted (visibility:hidden
   restyled every one of the book's elements as the card opened: a third of the opening frame at an old iPad's speed,
   butter harness, 3 Oct 2026). It keeps the height it had (contain-intrinsic-size: auto), so a page scrolled down (My
   cards, Find) stays where it was. */
@supports (content-visibility:hidden) and (contain-intrinsic-size:auto none){
  #app > .layer{contain-intrinsic-size:auto none}
  .layer.under{content-visibility:hidden}
}
@supports not ((content-visibility:hidden) and (contain-intrinsic-size:auto none)){ .layer.under{visibility:hidden} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.65rem 1.25rem;border-radius:999px;
  font:800 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:0;text-align:center}
/* pressed: ui.js pressFeedback() sinks every button the moment a finger lands (the scale property, on the compositor)
   and springs it back; this :active look is only for browsers without the scale property */
@supports not (scale:1){.btn:active,.kbtn:active,.htile:active,.kback:active,.fd-chip:active,.gate-k:active,.mbtn:active{transform:scale(.97)}}
.btn .ic{width:1.25em;height:1.25em}
.btn.big{min-height:60px;font-size:1.12rem;padding:.8rem 1.6rem}
.btn.small{min-height:44px;padding:.4rem 1rem;font-size:.95rem}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-sage{background:var(--sage-deep);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--sage-deep);border:1.5px solid var(--sage-deep)}
.btn-ghost-night{background:rgba(255,255,255,.06);color:var(--moon);border:1.5px solid rgba(245,241,255,.35)}
.btn:disabled{opacity:.55;cursor:default}
.kbig{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:68px;padding:.8rem 2rem;border-radius:999px;border:0;
  font:800 1.3rem var(--sans);cursor:pointer;box-shadow:0 12px 30px -12px rgba(242,193,78,.6)}
.kbig .ic{width:1.5em;height:1.5em}
.kback{display:inline-flex;align-items:center;gap:.4rem;min-height:64px;min-width:64px;padding:0 1.1rem 0 .8rem;border-radius:999px;
  border:1.5px solid rgba(245,241,255,.22);background:rgba(255,255,255,.06);color:var(--moon);font:800 1.05rem var(--sans);cursor:pointer}
.linkbtn{background:none;border:0;padding:.4rem .2rem;min-height:44px;font:700 1rem var(--sans);color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn.danger{color:var(--rose)}
.top-row{display:flex;align-items:center;justify-content:space-between;min-height:64px}

/* ---------- the child's space ---------- */
.kid{padding:calc(var(--st) + 8px) calc(var(--sr) + 16px) calc(var(--sb) + 18px) calc(var(--sl) + 16px);max-width:1100px;margin:0 auto}
.kid-h1{font-family:var(--serif);font-size:clamp(1.8rem,6vw,2.3rem);margin:8px 0 4px;color:var(--moon)}
.kid-h1.center{text-align:center}
.kid-ask{font:800 1.375rem var(--sans);color:var(--moon-soft);margin-bottom:14px}

/* home */
html.home-fixed{height:100%;overflow:hidden;overscroll-behavior:none;--home-edge-gap:clamp(24px,calc(var(--st) * .5),32px)}
html.home-fixed body{position:fixed;inset:0;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
/* Fit the fixed viewport itself; standalone Safari can report a shorter dynamic viewport unit. */
html.home-fixed #app,html.home-fixed #app>.layer:not(.over){height:100%;min-height:0}
html.home-fixed .home{height:100%;padding-top:calc(var(--st) + var(--home-edge-gap));padding-bottom:var(--sb)}
/* A real opaque edge gives WebKit a solid status-bar sample. It paints the SAME sky at the SAME viewport
   coordinates as body::before, so no navy/gradient seam is introduced. The logo keeps its approved padding. */
.home-status-edge{display:none;position:fixed;inset:0 0 auto;height:calc(var(--st) + var(--home-edge-gap));background:var(--sky-paint);pointer-events:none;z-index:4}
html.home-fixed .home-status-edge{display:block}
@media(max-height:620px){html.home-fixed .home{padding-bottom:calc(var(--sb) + 14px)}}
@media(max-height:620px) and (orientation:landscape){html.home-fixed{--home-edge-gap:8px}}
.home{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;touch-action:pinch-zoom;overscroll-behavior:none}
/* The logo can be taller than 64px; do not shrink its row up behind the safe-area cover. */
.home-top{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{flex:1 1 0;min-width:0;max-width:330px}
.calmlings-logo{display:block;width:100%;height:auto;aspect-ratio:2160/708}
@media(max-height:620px){.home .brand{max-width:195px}}
.gbtn{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;flex:none;max-width:100%;min-height:44px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(198,194,230,.22);
  background:transparent;color:var(--moon-soft);opacity:.72;font:700 .92rem var(--sans);cursor:pointer}
.gbtn .ic{width:18px;height:18px}
/* the music's small round button, beside Grown-ups (3 Oct 2026): gold while the music is on */
.home-acts{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;max-width:100%}
.mbtn{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(198,194,230,.22);background:transparent;color:var(--moon-soft);opacity:.72;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mbtn .ic{width:20px;height:20px}
.mbtn[aria-pressed="true"]{color:var(--gold);border-color:rgba(242,193,78,.45);opacity:.9}
/* Quiet, square utility controls leave the wordmark room at phone widths. */
.home-top .mbtn,.home-top .gbtn{width:64px;height:64px;min-height:64px;border-radius:19px;padding:0;opacity:.88}
.home-top .gbtn{flex-direction:column;justify-content:center;gap:4px;font-size:.62rem;line-height:1.1;white-space:normal}
.home-top .gbtn .ic{width:21px;height:21px}
.hello{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:10px 10px 16px;margin:4px auto 10px;cursor:pointer;flex:1 1 auto;justify-content:center}
.hello-float{display:block;animation:float 6.5s ease-in-out infinite;will-change:transform}
.hello-card{position:relative;display:block;width:min(46vw,236px,calc((100dvh - 520px) * .716));min-width:120px;aspect-ratio:var(--ar,.716);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 22px 50px -14px rgba(0,0,0,.65),0 0 46px -6px rgba(242,193,78,.4)}
.hello-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hello-gleam{position:absolute;inset:-30% -80%;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.45) 50%,transparent 56%);opacity:0;animation:gleam 9s ease-in-out 2s infinite;pointer-events:none}
.hello-t{font-family:var(--hand);font-weight:700;font-size:2.1rem;line-height:1.05;margin-top:16px;color:var(--moon)}
.hello-s{font:800 1.05rem var(--sans);color:var(--moon-soft)}
.htiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:560px;margin:0 auto}
/* A reserved final row, never a floating overlay: small type with a full grown-up touch target. */
.home-footer{display:flex;flex:0 0 44px;min-height:44px;align-items:center;justify-content:flex-end;width:100%}
.home-version{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;max-width:100%;padding:0 4px;
  border:0;border-radius:10px;background:transparent;color:var(--moon-soft);font:700 .6875rem/1.2 var(--sans);cursor:pointer;white-space:nowrap}
.home-version:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.htile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:128px;padding:14px 10px;overflow-wrap:anywhere;text-align:center;border-radius:26px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(72,62,160,.55),rgba(28,32,78,.72));color:var(--moon);
  font:800 1.375rem var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px -16px rgba(0,0,0,.8)}
.htile-ic .ic{width:42px;height:42px;color:var(--gold)}
.htile.ht-mine .ic{color:#F9A8C8}
.htile-t{line-height:1.1}
.htile-s{font:700 .95rem var(--sans);color:var(--moon-soft)}
.htile.evening{border-color:rgba(242,179,102,.75);box-shadow:inset 0 0 0 1px rgba(242,179,102,.45),0 0 26px -6px rgba(242,179,102,.55)}
.htile.evening .ic{color:var(--bed-glow)}
/* The Calmling of the Day (v0.30, 6 Oct 2026; js/day.js, main.js): one wide clay button between the hello card and the four big
   buttons. The gold clay star is the clay picture (js/clay.js: the same press, spring, shine, stars and swish as Find a card),
   the words are real text, and today's card peeks in at the right. Nothing here moves on its own; only transform and opacity change. */
.day{width:100%;max-width:560px;margin:0 auto 14px}
.day-chip.fd-chip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"art k peek" "art n peek";align-items:center;column-gap:12px;row-gap:0;
  min-height:80px;padding:8px 14px 8px 10px;border-radius:26px;text-align:left;border:1px solid rgba(242,193,78,.6);
  background:linear-gradient(160deg,rgba(72,62,160,.6),rgba(28,32,78,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 24px -8px rgba(242,193,78,.6),0 12px 28px -16px rgba(0,0,0,.8);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.day-chip.down{transform:scale(.975);transition-duration:.09s}
.day-chip .cl-art{grid-area:art;width:60px;max-width:60px}
.day-chip .cl-label{grid-area:k;align-self:end;margin:0;font:900 .875rem/1.15 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
.day-chip .cl-sub{grid-area:n;align-self:start;display:block;min-width:0;overflow-wrap:anywhere;font:900 1.5rem/1.15 var(--sans);color:var(--moon);text-shadow:0 2px 0 rgba(0,0,0,.45)}
.day-peek{grid-area:peek;position:relative;display:block;height:62px;aspect-ratio:var(--ar,.716);border-radius:7px;overflow:hidden;transform:rotate(5deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 14px -6px rgba(0,0,0,.75),0 0 16px -2px rgba(242,193,78,.55)}
.day-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:768px){
  .day{max-width:560px;margin-bottom:16px}
  .day-chip.fd-chip{min-height:88px;column-gap:16px;padding:10px 18px 10px 12px}
  .day-chip .cl-art{width:68px;max-width:68px}
  .day-chip .cl-label{font-size:.9375rem}
  .day-chip .cl-sub{font-size:1.75rem}
  .day-peek{height:68px}
}
@media (min-width:700px) and (orientation:landscape){
  .day{margin-bottom:12px}
  .day-chip.fd-chip{min-height:76px;padding-top:8px;padding-bottom:8px}
  .day-chip .cl-art{width:60px;max-width:60px}
  .day-chip .cl-sub{font-size:1.625rem}
  .day-peek{height:58px}
}
html.reduce .day-chip.fd-chip{transition:none}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(1.2deg)}}
@keyframes gleam{0%,72%{opacity:0;transform:translateX(-45%)}76%{opacity:1}90%{opacity:1;transform:translateX(45%)}94%,100%{opacity:0;transform:translateX(45%)}}

/* card tiles and pockets (a clear sleeve over each card) */
.tile{appearance:none;-webkit-appearance:none;position:relative;display:block;width:100%;aspect-ratio:var(--ar,.716);padding:0;border:0;background:none;border-radius:12px;cursor:pointer;color:var(--moon)}
.tile .sleeve{position:absolute;inset:0;z-index:2;border-radius:12px;pointer-events:none;
  background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.07) 42%,transparent 56%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tile-face{position:absolute;inset:4px;border-radius:9px;overflow:hidden;display:block;background:rgba(255,255,255,.04);box-shadow:0 8px 16px -8px rgba(0,0,0,.7)}
.tile-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.tile.owned .tile-face{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 22px -10px var(--glow)}
.tile.new .tile-face{box-shadow:0 0 0 2px var(--glow),0 0 20px -2px var(--glow)}
.tile.series2-metal .sleeve{box-shadow:inset 0 0 0 1px var(--metal-glint,#fff2c7),inset 0 0 0 2px var(--metal-edge,#b58a35),inset 0 0 0 3px var(--metal-dark,#49391e),0 1px 1px rgba(0,0,0,.45)}
.tile.series2-metal .tile-face{box-shadow:0 2px 3px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.55)}
.tile-star{position:absolute;z-index:3;top:4px;right:4px;width:18px;height:18px;color:var(--gold)}
.tile-star .ic{width:18px;height:18px;fill:var(--gold)}
.shadow{position:absolute;inset:0;display:block;background-image:var(--atlas);background-repeat:no-repeat;background-color:#14163A}
.tile.locked .tile-face{background:#14163A}
.tile.locked .tile-face::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--glow),inset 0 0 22px -6px var(--glow);opacity:.55}
.tile-lock{position:absolute;z-index:1;top:36%;left:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:50%;background:rgba(10,12,40,.55);color:var(--gold);display:grid;place-items:center}
.tile-lock .ic{width:48%;height:48%}
.tile-name{position:absolute;z-index:1;left:4px;right:4px;top:58%;text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(1rem,3.8vw,1.3rem);line-height:1;color:var(--moon);text-shadow:0 1px 6px rgba(0,0,0,.6);transition:transform .3s}
.tile-hide{position:absolute;z-index:1;left:0;right:0;bottom:7%;text-align:center;font:700 .68rem var(--sans);color:var(--moon-soft);opacity:.85}
.tile.wiggle .tile-lock{animation:wiggle .6s ease}
.tile.wiggle .tile-name{transform:scale(1.18)}
.chip.wiggle{animation:wiggleX .5s ease}
@keyframes wiggle{0%,100%{transform:translate(-50%,-50%) rotate(0)}20%{transform:translate(-50%,-50%) rotate(-14deg)}45%{transform:translate(-50%,-50%) rotate(12deg)}70%{transform:translate(-50%,-50%) rotate(-7deg)}}
@keyframes wiggleX{0%,100%{transform:none}25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.tile-caption{position:absolute;top:100%;left:0;right:0;margin-top:4px;text-align:center;font-family:var(--hand);font-weight:700;font-size:1.3rem;line-height:1;color:var(--moon)}
.tile img.moving{animation:none} /* 3 Oct 2026: no fade when the still becomes the moving picture (it showed washed out) */
/* a press shows at once, the same on every card (iPad hotfix and butter, 4 Oct 2026): ui.js pressFeedback() sinks the
   card into its sleeve (the scale property on .tile-face, on the compositor, as every button sinks) and the sleeve catches
   the light (.tile.press); tiles.js marks a clean tap's touch .pressed. Without the scale property the card dips by a
   transform instead (.pressed at the finger's touch, :active for the mouse). */
.tile .sleeve::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.07);opacity:0;transition:opacity .28s var(--ease)}
.tile.press .sleeve::before{opacity:1;transition-duration:var(--t-press)}
@supports not (scale:1){.tile .tile-face{transition:transform .12s ease-out}.tile.pressed .tile-face,.tile:active .tile-face{transform:scale(.97);transition-duration:.05s}}
@media (prefers-reduced-motion:reduce){.tile .tile-face,.tile .sleeve::before{transition:none}}
.calm .tile .tile-face,.calm .tile .sleeve::before{transition:none}

/* the book: a collector's binder (js/binder.js; design: BINDER.md, direction A: navy leather, gold rings). Every
   material is painted once and never moves; a turn moves only the turning sheet, its gloss and the shadow it casts,
   by transform and opacity. Textures: two seamless 512 px tiles shown at 256 px (sharp at 2x), inlined (8 KB). */
/* clip keeps focus on transformed binder faces from scrolling the fixed shell;
   book.js pins only this shell on browsers that need the hidden fallback. */
.book{position:relative;display:flex;flex-direction:column;height:100dvh;overflow:hidden;overflow:clip}
.book.kid{padding:calc(var(--st) + 8px) 0 0;max-width:none}
.bk-top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(10rem,1fr) auto;grid-template-areas:"nav chapter view";align-items:center;gap:12px 20px;padding:8px calc(var(--sr) + 16px) 10px calc(var(--sl) + 16px);background:#181c4a;border-bottom:1px solid rgba(255,255,255,.12)}
.bk-nav{grid-area:nav;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.bk-top .kback,.bk-top .bk-sets,.bk-top .bk-unlock{min-width:64px;min-height:64px;max-width:100%;white-space:normal;line-height:1.15}
.bk-top .bk-sets{background:#181c4a}
.bk-top .kback .ic,.bk-top .bk-sets .ic,.bk-top .bk-unlock .ic{flex:none}
.segs{display:flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px}
.seg{min-height:44px;padding:0 .9rem;border:0;border-radius:999px;background:transparent;color:var(--moon-soft);font:800 .92rem var(--sans);cursor:pointer;transition:background-color .16s var(--ease),color .16s var(--ease)}
.seg[aria-pressed="true"]{background:var(--moon);color:var(--night)}
.bk-top .segs{grid-area:view;min-width:0;background:#252957}
.bk-top .seg{min-width:64px;min-height:64px;white-space:normal;line-height:1.15}
.bk-head{text-align:center;font:700 .95rem var(--sans);color:var(--moon-soft);margin:6px 0 6px;min-height:1.4em}
.book.v-pages .bk-head{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The chapter stays in normal flow. On landscape tablets it owns a second row,
   so My sets, larger text and the view choices can never cover its words. */
.bk-where{grid-area:chapter;min-width:0;min-height:3.25rem;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.book.v-pages .bk-where{display:flex}
.bk-where.none{visibility:hidden}
.bk-where-t{display:flex;align-items:center;gap:8px;max-width:100%;font:600 1.4375rem/1.15 var(--serif);letter-spacing:-.01em;color:var(--moon)}
.bk-where-h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-where-dot{position:relative;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--glow)}
.bk-where-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--glow);opacity:.15}
.bk-where-dot .ic{position:relative;width:17px;height:17px}
.bk-where-n{max-width:100%;font:700 .8125rem/1.25 var(--sans);color:var(--moon-soft);margin-top:3px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1199px){.bk-top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nav view" "chapter chapter";column-gap:16px}.book.v-deck .bk-top{grid-template-areas:"nav view"}}
@media (max-width:599px){.bk-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "view";gap:10px}.book.v-deck .bk-top{grid-template-areas:"nav" "view"}.book.v-pages .bk-where{display:none}.bk-top .segs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.bk-top .seg{padding:0 .6rem}}
/* while the book is open the sky stands still (the binder covers it; nothing redraws for nothing) */
html.in-book .app-sky *{animation-play-state:paused}

/* the binder: a layer over the whole screen (so a lifting page can pass over the top bar); only what is drawn takes touches */
.book.v-pages .bk-pages{position:absolute;inset:0;z-index:3;pointer-events:none;padding:var(--st) var(--sr) var(--sb) var(--sl);outline:none;touch-action:none}
/* One by one: the binder stays laid out underneath, only unseen, so coming back to the pages costs no layout */
.book.v-deck .bk-pages[hidden]{display:block!important;position:absolute;inset:0;visibility:hidden;pointer-events:none}
.bdr{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bdr-base{position:absolute;z-index:1;pointer-events:none;will-change:opacity}
.bdr-stage{position:absolute;inset:0;z-index:3;pointer-events:none}
.bdr-rings{position:absolute;z-index:4;pointer-events:none;will-change:opacity}
.bdr-plates{position:absolute;z-index:3;pointer-events:none;will-change:opacity} /* the ring plate: over the resting pages, under a page bending over the spine (curl.js) */
.bdr-leather{position:absolute;border-radius:22px;pointer-events:auto;
  background:radial-gradient(130% 100% at 30% 0%,rgba(120,130,230,.10),transparent 55%),radial-gradient(140% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.34)),url("data:image/webp;base64,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") 0 0/256px,#181C4A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(0,0,0,.85)}
.bdr-stitch{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.bdr-stitch rect{fill:none;stroke:rgba(242,193,78,.46);stroke-width:1.4;stroke-dasharray:5 4;stroke-linecap:round}
.bdr-crease{position:absolute;background:linear-gradient(90deg,transparent,rgba(0,0,0,.32) 22%,rgba(255,255,255,.035) 50%,rgba(0,0,0,.32) 78%,transparent)}
.bdr:not(.spread) .bdr-crease{opacity:.7}
.bdr-plate{position:absolute;border-radius:999px;background:linear-gradient(90deg,#1E1604 0%,#4E3A0E 18%,#8A6A26 42%,#A88640 52%,#7A5C1C 66%,#3E2E0A 86%,#1E1604 100%);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 8px 14px rgba(0,0,0,.5)}
.bdr-rivet{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF1C2,#C9982F 55%,#5C4310);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.bdr-ring{position:absolute;border-radius:999px;background:linear-gradient(180deg,#4A360B 0%,#B88A2A 20%,#F2D27A 36%,#FFF4CC 44%,#E2B44A 58%,#9A7220 80%,#3E2D08 100%);box-shadow:0 4px 5px -1px rgba(0,0,0,.55)}
.bdr-ring::before,.bdr-ring::after{content:"";position:absolute;top:0;bottom:0;width:7px;border-radius:999px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.bdr-ring::before{left:0}
.bdr-ring::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
/* a sheet: one element with a front and a back face, turned around the rings (its transform comes from binder.js) */
.bdr-sheet{position:absolute;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform;pointer-events:auto}
.bdr-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bdr-face.back{transform:rotateY(180deg)}
.bdr-face[inert]{pointer-events:none}
/* the clear sleeve catching the light as the page lifts towards you, darker where it bends away: 64 px, stretched */
.bdr-gloss{position:absolute;left:0;top:0;width:64px;height:100%;transform-origin:0 0;pointer-events:none;opacity:0;will-change:opacity;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 34%,rgba(255,255,255,.13) 47%,rgba(255,255,255,0) 60%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.28) 98.6%,rgba(255,255,255,.22) 99.4%)}
.bdr-gloss.back{background:linear-gradient(270deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 34%,rgba(255,255,255,.13) 47%,rgba(255,255,255,0) 60%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.28) 98.6%,rgba(255,255,255,.22) 99.4%)}
.bdr-gloss.leather{background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 40%,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 70%,rgba(0,0,0,.2) 100%)}
/* the shadow a lifting page casts on the page under it: a dark part to the lifted edge and a soft fringe past it */
.bdr-cast{position:absolute;z-index:50;width:64px;pointer-events:none;opacity:0;will-change:transform,opacity}
.bdr-cast.r{transform-origin:0 0}
.bdr-cast.l{transform-origin:100% 0}
.bdr-cast.r.s{background:linear-gradient(90deg,rgba(4,5,20,.55),rgba(4,5,20,.5))}
.bdr-cast.r.f{background:linear-gradient(90deg,rgba(4,5,20,.5),rgba(4,5,20,.2) 35%,rgba(4,5,20,0))}
.bdr-cast.l.s{background:linear-gradient(270deg,rgba(4,5,20,.55),rgba(4,5,20,.5))}
.bdr-cast.l.f{background:linear-gradient(270deg,rgba(4,5,20,.5),rgba(4,5,20,.2) 35%,rgba(4,5,20,0))}
/* a page: matte navy card stock a step lighter than the cover, punched holes on the ring side, a static sheen */
.bdr-pg{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);border-radius:10px;contain:size layout style;color:var(--moon);text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.07)),url("data:image/webp;base64,UklGRhQEAABXRUJQVlA4IAgEAAAQSACdASoAAgACPmEwlkikIqIhIAgAgAwJaW7gjQQn7K0CyLk1uvGP0AKzdrxcolls6Xa8XJyI73vtk7JI5KEq3Y2GjxEhcE3DRXtU05z35xOeGaqOwNIr8hPQckhbZgj96+VA5gh2u/Wsk0G8XHENuViIt0IAw00RQ4wzKa3+cVETAU4XjUKUB+iDUHZlSlIXJYzy23rEzfKsH64KOFbPxwD+M3360obyYvaFiY5IlyLspQ+ZN/XjCb0qaWi9F8mvN6FM7PHkl3FEGi9LB30uW2KDA6K//Qe+sQiSuBRWS7vQ9+N/DoXwYCI0sDG2wECFPpFbzxEBXCC83+uzJ7Y8ZTxcdhje6zYLDnaVHlDkREw8nKHecRDPpSTYLxAoZ50Tyh6SBjLZuRhGxHzoGFtCNVJdlrw9QOnCldx+nivKVAAK70E1qNIEinyVKfJhEC0eFUKoFkvWqzb/oDN+ntk5D4X/v2pw9svrPUNqxYEqNbKJb1mV/KgA5Vo+o+M81RaNaTP54jCQ4VqqzvjtLiAkOl5XIQCHsiw7EZdhWWGLYYWp3jtaGsbldB3RyR1FtajmLlnNlmTZnxJamU0d3MjL6h4XHZoa9DaQlPMtBEQBETFHMXJ6tkBpHQZ5ORg+7i8OK8J/sUUDPMZXxqU2zdyckUaIE947FKXsd2TpERAUhJaqq6BdP3fvjJ/cDGoKe15OGUiG1OqYSmjLyvxRTrAlQPPCsKNFpyrXjjoig2mXX6wJDTNaFFY+Q5r+8KNQeZ6K0FUCiKhxOgAA/vlnn/9Xf72f6n+tnJ9Sqe02/cE2rQjIMoBQHsq1pGmNhWHU8/JHUWhDWMoyFFd6Q2m+ZilUYXmOUq21NzSrtc5N6rW+fcd24RSbHMWksqJI4GPdXAlpvvzOKoh3ePTW6Cm0w3mr1ABssRu/wjgjiKOHUU+JhwvDSgdt1ATy+67lxMiuvVb97es7N0BCQ5MBMglPrNviMJuz5ClChBc3eknVXqYW7ZGJN2kWBBUJtiHR3+cXZXv7B4CeFTDGCBew/HyzlKHkMDmx0E1xzBgTHsFJSmYah+G5rZY0ZyQvW5kI4nYACSGDeiB1Vobwh+ANGFMFTuVDcmwBCXckjxLQ8SRQDqHO8FWV/EzytwPCGyZHgLgz186sO00+8PvhFXKqyCZY9JQfuGb1i9pvuXuVARsnT0yqIDiFOrFjkSD/EO6+mM0pmti8sdkljkpx96JpI8t/IsGWipvKOff4S+LAJEhqtbMDKUd/TLBjfg1EcYN2yX50Xdv6/qsPK7N0XXA1AirgLNlORlD1Z4E/pLnQ2wm4bXeh2vSBGcxzsVhCg9+UEJpRrP5DTI9F+dNz5o153EOKI0gAf5XsUCugAAA=") 0 0/256px,#1B1F52;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08)}
/* 4 Oct 2026: the pages' drop shadow and edge slivers are the stack's under them (painted once with the binder): two
   stacked sheets never cast two shadows, and a page cut along the fold as it bends never lightens the shadow under it */
.bdr-stacks{position:absolute;z-index:2;pointer-events:none;will-change:opacity}
.bdr-stack{position:absolute;border-radius:10px;pointer-events:none;box-shadow:var(--stack),0 16px 30px -16px rgba(0,0,0,.75)}
.bdr-stack.R{--stack:1.5px 0 0 -.5px #262B66,3px 0 0 -1px #20255A,4.5px 0 0 -1.5px #1A1E4C}
.bdr-stack.L{--stack:-1.5px 0 0 -.5px #262B66,-3px 0 0 -1px #20255A,-4.5px 0 0 -1.5px #1A1E4C}
.bdr-sheet.leaf .bdr-pg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),var(--stack),0 16px 30px -16px rgba(0,0,0,.75)}
.bdr-pg.R{--stack:1.5px 0 0 -.5px #262B66,3px 0 0 -1px #20255A,4.5px 0 0 -1.5px #1A1E4C}
.bdr-pg.L{--stack:-1.5px 0 0 -.5px #262B66,-3px 0 0 -1px #20255A,-4.5px 0 0 -1.5px #1A1E4C}
.bdr-pg.on-board{left:calc(var(--bw) - var(--pa) - var(--pw));top:var(--pi)}
.bdr-bind{position:absolute;top:0;bottom:0;width:calc(var(--hd) * 2);background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(255,255,255,.03))}
.bdr-pg.R .bdr-bind{left:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.045)}
.bdr-pg.L .bdr-bind{right:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.045)}
.bdr-hole{position:absolute;width:calc(var(--hr) * 2);height:calc(var(--hr) * 2);margin:calc(var(--hr) * -1) 0 0 calc(var(--hr) * -1);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#04051A 0 56%,#0C0E2E 78%,#1A1E50);box-shadow:inset 0 1.5px 2px rgba(0,0,0,.9),0 0 0 1.5px rgba(242,193,78,.16),0 1px 0 1.5px rgba(255,255,255,.05)}
.bdr-pg.R .bdr-hole{left:var(--hd)}
.bdr-pg.L .bdr-hole{left:calc(var(--pw) - var(--hd))}
.bdr-hole.h0{top:var(--ry0)}
.bdr-hole.h1{top:var(--ry1)}
.bdr-hole.h2{top:var(--ry2)}
.bdr-psheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 58%,rgba(255,255,255,.035) 70%,rgba(255,255,255,0) 84%)}
/* what a page says in its top margin (a chapter's opening words, a section, the chapter's end), in the book's hand */
.bdr-lab{position:absolute;top:var(--lab);width:var(--gw);height:20px;margin:0;font:700 19px/20px var(--hand);color:var(--moon-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdr-pg.R .bdr-lab{left:var(--gxR)}
.bdr-pg.L .bdr-lab{left:var(--gxL)}
.bdr-lab.sub,.bdr-lab.end{color:var(--gold)}
.bdr.nolab .bdr-lab{width:1px;height:1px;clip:rect(0 0 0 0)}
.bdr-ttl{position:absolute;left:0;right:0;top:12px;padding:0 8px 0 calc(var(--hd) * 2)}
.bdr-ttl b{display:block;font:600 22px/1.1 var(--serif);color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdr-ttl span{display:block;margin-top:3px;font:700 13px/1.3 var(--sans);color:var(--moon-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdr-pg .pockets{position:absolute;top:var(--gy);display:grid;grid-template-columns:repeat(3,var(--pkw));grid-auto-rows:var(--pkh);gap:var(--gap);margin:0}
.bdr-pg.R .pockets{left:var(--gxR)}
.bdr-pg.L .pockets{left:var(--gxL)}
.bdr-in{position:absolute;top:var(--gy);width:var(--gw);height:var(--gh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.bdr-pg.R .bdr-in{left:var(--gxR)}
.bdr-pg.L .bdr-in{left:var(--gxL)}
.bdr-in .ct-grid{width:100%;margin:0}
.bdr-in.start1 .tile.big{width:min(calc(var(--gw) * .66),calc((var(--gh) - 150px) * .716));height:auto;aspect-ratio:var(--ar,.716)}
.bdr.phone .bdr-in.start1 .tile.big{width:min(calc(var(--gw) * .6),calc((var(--gh) - 110px) * .716))}
.bdr.phone .bdr-in .ct-grid{--cti:clamp(40px,calc((var(--gh) - 214px) / 4),112px);gap:14px 10px}
/* a pocket: a welded clear sleeve; the card lies flat in it (no glow, no lift), under a film with a lip at the top */
.bdr-pg .tile.pocket,.bdr-pg .tile.big{border-radius:7px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 1px 0 rgba(0,0,0,.25)}
.bdr-pg .tile.pocket{width:var(--pkw);height:var(--pkh);aspect-ratio:auto}
.bdr-pg .tile .tile-face,.bdr-pg .tile.owned .tile-face{inset:var(--pin);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.45)}
.bdr-pg .tile.new .tile-face{box-shadow:0 0 0 1.5px var(--glow),0 1px 2px rgba(0,0,0,.45)}
.bdr-pg .tile .sleeve{inset:var(--pin);border-radius:6px;box-shadow:none;background:linear-gradient(122deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.10) 44%,rgba(255,255,255,0) 54%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%)}
.bdr-pg .tile.series2-metal .sleeve{box-shadow:inset 0 0 0 1px var(--metal-glint,#fff2c7),inset 0 0 0 2px var(--metal-edge,#b58a35),inset 0 0 0 3px var(--metal-dark,#49391e),0 1px 1px rgba(0,0,0,.55)}
.bdr-pg .tile .sleeve::after,.bdr-empty::after,.bdr-mood::after{content:"";position:absolute;left:-1px;right:-1px;top:calc(var(--ch) * .055);height:1px;background:rgba(255,255,255,.22);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.bdr-pg .tile.big .sleeve::after{top:5.5%}
.bdr-pg .tile-new{position:absolute;z-index:3;top:calc(var(--pin) + 7px);left:50%;transform:translateX(-50%);background:var(--gold);color:var(--gold-ink);font:800 .72rem var(--sans);padding:2px 9px;border-radius:999px;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bdr-pg .tile-name{font-size:clamp(.85rem,calc(var(--cw) * .13),1.3rem)}
.bdr-empty,.bdr-mood{position:relative;display:block;border-radius:7px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 1px 0 rgba(0,0,0,.25)}
.bdr-empty::before{content:"";position:absolute;inset:var(--pin);border-radius:6px;background:linear-gradient(122deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.06) 44%,rgba(255,255,255,0) 54%)}
.bdr-empty::after,.bdr-mood::after{left:calc(var(--pin) - 1px);right:calc(var(--pin) - 1px);top:calc(var(--pin) + var(--ch) * .055)}
.bdr-mood .shadow{inset:var(--pin);border-radius:6px}
.bdr-pg .tile .shadow{z-index:0}
.bdr-pg .tile .tile-img{z-index:0}
/* the living picture lies over the still and never takes a touch (it goes the moment a finger lands; the gesture must not lose its target) */
.tile .tile-live,.cover-window .tile-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;animation:fadeIn .4s ease}
/* the closed binder's front board */
.k-cover{position:absolute;left:0;top:0;width:var(--bw);height:var(--bh);contain:size layout style}
.k-cover .cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.2vh,18px);padding:24px 64px 24px 46px;text-align:center;
  border-radius:10px 22px 22px 10px;overflow:hidden;
  background:radial-gradient(130% 100% at 30% 0%,rgba(120,130,230,.10),transparent 55%),radial-gradient(140% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.34)),url("data:image/webp;base64,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") 0 0/256px,#181C4A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(0,0,0,.85)}
.k-cover .cover::before{content:"";position:absolute;inset:9px 9px 9px 39px;border:1.4px dashed rgba(242,193,78,.46);border-radius:14px;pointer-events:none}
.cover-spine{position:absolute;left:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.06) 40%,rgba(0,0,0,.30) 85%,rgba(0,0,0,.55))}
.cover-band{position:absolute;left:0;width:30px;height:6px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.35))}
.cover-band.b0{top:12%}
.cover-band.b1{top:88%}
.cover-title{position:relative;max-width:8.6em;margin:0;font:600 var(--cts,40px)/1.04 var(--serif);letter-spacing:-.01em;color:#F2C14E;
  background:linear-gradient(180deg,#FFF1C2 0%,#F2C14E 45%,#B8862A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}
.cover-window{position:relative;flex:none;padding:18px;border-radius:16px;background:rgba(0,0,0,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1.5px rgba(242,193,78,.42)}
.cover-card{display:block;width:var(--ccw);aspect-ratio:.716;border-radius:10px;object-fit:cover;box-shadow:0 10px 24px -8px rgba(0,0,0,.7),0 0 34px -6px rgba(242,193,78,.45)}
.cover-window .tile-live{inset:auto;left:18px;top:18px;width:var(--ccw);height:auto;aspect-ratio:.716;border-radius:10px}
.cover-ribbon{position:relative;margin:0;background:linear-gradient(90deg,#E8B840,#F7D77E,#E8B840);color:var(--gold-ink);font:800 1.05rem var(--sans);padding:7px 20px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(242,193,78,.8);white-space:nowrap}
.cover-moon{position:relative;flex:none;width:22px;height:22px;fill:#F2C14E;stroke:#B8862A;stroke-width:1}
.k-cover .kbig{position:relative;min-height:64px}
.cover-strap{position:absolute;top:-2px;bottom:-2px;right:40px;width:30px;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.05) 2px 4px),linear-gradient(90deg,#0B0D2C,#1A1E50 30%,#151946 70%,#0A0C28);box-shadow:-3px 0 6px rgba(0,0,0,.45),3px 0 6px rgba(0,0,0,.35)}
.bdr.phone .k-cover .cover{padding:16px 50px 16px 40px}
.bdr.phone .cover-strap{right:26px;width:24px}
/* turn arrows (iPad): in the tab row's corners, outside the binder's moving layer */
.bdr-arrow{position:absolute;z-index:5;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid rgba(245,241,255,.22);background:rgba(255,255,255,.06);color:var(--moon);
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),transform .16s cubic-bezier(.2,.8,.2,1)}
.bdr-arrow::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.bdr-arrow .ic{width:22px;height:22px}
@supports not (scale:1){.bdr-arrow:active{transform:scale(.92);transition-duration:.09s}} /* (pressed: ui.js pressFeedback) */
.bdr.closed ~ .bdr-arrow{opacity:0;pointer-events:none}
.bdr.at-end ~ .bdr-arrow.next{opacity:.35}
.bdr.phone ~ .bdr-arrow{display:none}
/* chapter tabs: the eight small clay buttons under the pages (v0.29, 6 Oct 2026; the same pictures as What's inside, as still
   images, no animation). The open chapter's is lifted: bigger, a little higher than the rest, brighter, glowing in its colour;
   the others sit smaller and dimmer. Ribbons again, the same buttons, in One by one. */
.book.v-pages .bk-ribbons{position:absolute;z-index:2;display:flex;justify-content:flex-start;align-items:flex-start;gap:var(--tabg);padding:0;min-height:0;overflow:hidden;pointer-events:auto;will-change:transform}
.book.v-pages .ribbon{flex:none;width:var(--tabw);height:var(--tabh)}
.book.v-pages .rb-clay{width:min(38px,calc(var(--tabh) - 8px));height:min(38px,calc(var(--tabh) - 8px))}
/* contents, the start page, the end */
.bdr .bk-title{font-family:var(--serif);font-size:1.6rem;color:var(--moon);text-align:center}
.bk-intro{font:800 1.1rem var(--sans);text-align:center;max-width:26ch;margin:0}
/* What's inside (v0.29, 6 Oct 2026, founder-approved): eight clay buttons in two columns, the same press, spring, shine, stars and
   swish as Find a card (js/clay.js; the look is the .fd-chip and .cl-* rules in "find a card" below, the pictures app/clay/book-*.png).
   Name and count are real text under the picture, about 10 px from it, and about 20 px from one row to the next. The picture is
   as large as the page leaves room for (--cti, up to 112 px: the page is 586 px high on a sideways iPad, so about 84 px there).
   No floating here: the page is turned in WebGL, so only the press, the spring and the stars ever move. */
.ct-grid{--cti:clamp(44px,calc((var(--gh) - 251px) / 4),112px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;width:min(100%,560px);margin:auto 0}
.bdr:not(.phone):not(.short) .k-contents .bdr-in{top:calc(var(--gy) - 12px);height:calc(var(--gh) + 24px)}
.ct.fd-chip{min-width:0;padding:0;border-radius:24px;overflow-wrap:anywhere}
.ct .cl-art{max-width:var(--cti)}
.ct .cl-blob{will-change:auto}
.ct.down .cl-blob,.ct.pop .cl-blob{will-change:transform}
.ct .ct-h{font:900 .9375rem/1.1 var(--sans)}
.ct .ct-n{display:inline-flex;align-items:center;justify-content:center;gap:4px;margin-top:2px;font:700 .8125rem/1.25 var(--sans);color:#cfc9ff}
.ct-n .ic{width:15px;height:15px;color:var(--gold)}
.ct.locked{opacity:.78}
/* On the Go (v0.31, 6 Oct 2026): with a ninth button the page holds three columns and three rows (book.js adds .c9 when there are
   more than eight; with eight or fewer nothing here applies and the page is exactly as in v0.29). Three rows leave the pictures
   room for their full 112 px where four rows gave about 80 px on a sideways iPad. The column is about a third of the page, so the
   name's size follows it (a word like "Storybook" must never be cut) and room is kept for a name on two lines. */
.ct-grid.c9{--cti:clamp(44px,calc((var(--gh) - 225px) / 3),112px);grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-grid.c9 .ct .ct-h{font-size:min(.9375rem,calc((var(--gw) - 24px) * .0633))}
.bdr.phone .bdr-in .ct-grid.c9{--cti:clamp(40px,calc((var(--gh) - 190px) / 3),112px)}
.bdr.short .bdr-in .ct-grid.c9{grid-template-columns:repeat(10,minmax(0,1fr))}
.bdr.short .ct-grid.c9 .ct{grid-column:span 2}
.bdr.short .ct-grid.c9 .ct:nth-child(6){grid-column:2 / span 2}
/* The current book has eleven sections. Keep them in three rows, leaving a
   clear lane above the chapter tabs on the upright phone and tablet pages. */
.ct-grid.c11{--cti:clamp(28px,calc((var(--gh) - 174px) / 3),84px);grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
.ct-grid.c11 .ct .ct-h{font-size:min(.875rem,calc((var(--gw) - 32px) * .044));line-height:1.05}
.ct-grid.c11 .ct .ct-n{font-size:min(.72rem,calc((var(--gw) - 32px) * .038));line-height:1.15}
.bdr.phone .bdr-in .ct-grid.c11{--cti:clamp(28px,calc((var(--gh) - 174px) / 3),68px);gap:6px 4px}
.bdr.short .bdr-in .ct-grid.c11{--cti:clamp(24px,calc((var(--ph) - 112px) / 2),52px);height:100%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px 6px}
@media(max-width:380px){
  .bdr.phone .bdr-in .ct-grid.c11{--cti:clamp(24px,calc((var(--gh) - 166px) / 3),60px);gap:4px 3px}
  .bdr.phone .ct-grid.c11 .ct .ct-h{font-size:min(.8rem,calc((var(--gw) - 28px) * .041))}
  .bdr.phone .ct-grid.c11 .ct .ct-n{font-size:min(.68rem,calc((var(--gw) - 28px) * .035))}
}
@media (max-width:480px){ .book.v-deck .bk-ribbons.many{gap:2px;padding-left:6px;padding-right:6px} }
.bk-fin{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--gold)}
.bk-fin-t{font-family:var(--hand);font-weight:700;font-size:1.9rem;color:var(--moon);max-width:18ch}
/* a phone held sideways (4 Oct 2026; binder.js G.short: 600 px wide or more and under 560 px tall). The review found the
   contents' buttons spilling above and below the binder and the cover's title and Open cut off: the board and the pages
   are wide and low there. The cover puts Breatho's window beside the title, the met count and Open; the contents, the
   start page and the end use the whole page instead of the pockets' 3 x 3 square, the contents as two rows of four
   (its heading is in the page's name and, without the Unlock button, the top bar); everything inside the stitching.
   Sizes follow the board's height (--bh) and the page's (--cz, binder.js), as the binder's pages are drawn in px: the
   largest text with the Unlock button puts the top bar in two rows and leaves a much lower binder, and it still fits. */
.bdr.short .k-cover .cover{display:grid;grid-template-columns:auto auto;grid-template-rows:1fr repeat(4,auto) 1fr;justify-content:center;align-items:center;gap:7px clamp(22px,4.5vw,48px);padding:14px 70px 14px 46px}
.bdr.short .cover-window{grid-area:1/1/-1/2;padding:12px}
.bdr.short .cover-window .tile-live{left:12px;top:12px}
.bdr.short .cover-title{grid-area:2/2;max-width:11em}
.bdr.short .cover-ribbon{grid-area:3/2;justify-self:center;font-size:min(1.05rem,calc(var(--bh) * .07));padding:min(7px,calc(var(--bh) * .03)) 20px}
.bdr.short .cover-moon{grid-area:4/2;justify-self:center;width:min(22px,calc(var(--bh) * .1));height:min(22px,calc(var(--bh) * .1))}
.bdr.short .k-cover .kbig{grid-area:5/2;justify-self:center;min-height:clamp(44px,calc(var(--bh) * .22),56px);padding:0 1.6rem;font-size:min(1.3rem,calc(var(--bh) * .088))}
.bdr.short .bdr-pg .bdr-in{left:calc(var(--hd) * 2 + 6px);right:10px;top:8px;bottom:8px;width:auto;height:auto}
.bdr.short .k-contents .bk-title{display:none}
.bdr.short .bdr-in .ct-grid{--cti:clamp(36px,calc((var(--ph) - 114px) / 2),112px);height:100%;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px 10px}
.bdr.short .bdr-in .ct{justify-content:center}
.bdr.short .ct .ct-h{font-size:calc(15px * var(--cz))}
.bdr.short .ct .ct-n{font-size:calc(13px * var(--cz));line-height:1.3}
.bdr.short .bdr-in.start1{display:grid;grid-template-columns:auto minmax(0,26ch);grid-template-rows:1fr auto auto 1fr;justify-content:center;align-items:center;gap:8px 28px}
.bdr.short .bdr-in.start1 .tile.big{grid-area:1/1/-1/2;width:calc((var(--ph) - 30px) * .716)}
.bdr.short .bdr-in.start1 .bk-title{grid-area:2/2;margin:0;font-size:calc(25.6px * var(--cz))}
.bdr.short .bdr-in.start1 .bk-intro{grid-area:3/2;font-size:calc(17.6px * var(--cz))}
.bdr.short .bdr-in.bk-fin{gap:calc(14px * var(--cz))}
.bdr.short .bk-fin .ic.big{width:calc(56px * var(--cz));height:calc(56px * var(--cz))}
.bdr.short .bk-fin-t{font-size:calc(30.4px * var(--cz))}
/* One by one never ends, and it has no scrolling of its own (4 Oct 2026): the deck is a still box that clips its cards;
   book.js places each card with a transform (its distance from the middle times one card's width and the 18px gap) and
   moves them with the finger, a wheel or the keys. Nothing here scrolls or snaps, so nothing the browser does after a
   change can move it. --dw: one card's width. touch-action none: every touch on the deck is the deck's (the book screen
   never scrolls), so iOS never takes a slanted swipe over for a page bounce and cancels it halfway (review, 4 Oct 2026;
   was pan-y). */
.bk-deck{--dw:min(70vw,360px,calc((100dvh - 260px) * .716));position:relative;flex:1 1 auto;min-height:0;overflow:hidden;overflow:clip;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bk-deck[hidden]{display:none}
.deck-track{position:absolute;inset:0}
.deck-probe{position:absolute;width:var(--dw);height:0;visibility:hidden;pointer-events:none}
.deck-item{position:absolute;left:50%;top:50%;width:var(--dw);margin-left:calc(var(--dw) / -2);will-change:transform;transform:translate3d(0,-50%,0)}
.deck-item[hidden]{display:none}
/* < > for keyboards, screen readers and a mouse: round moon-white discs at the deck's sides (as on the card screen);
   on a touch screen they stay out of sight until a keyboard reaches them */
.deck-step{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#1C2052;background:radial-gradient(circle at 34% 28%,#FFFFFF,#EEE9FF 58%,#D8CEFF);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 12px 24px -10px rgba(0,0,0,.75)}
.deck-step.prev{left:calc(var(--sl) + 12px)}
.deck-step.next{right:calc(var(--sr) + 12px)}
.deck-step .ic{width:26px;height:26px;stroke-width:3.2}
@supports not (scale:1){.deck-step:active{transform:scale(.93)}} /* (pressed: ui.js pressFeedback) */
@media not all and (hover:hover) and (pointer:fine){ .deck-step:not(:focus-visible){width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);box-shadow:none} }
.bk-ribbons{display:flex;justify-content:center;gap:6px;padding:6px 12px calc(var(--sb) + 6px);min-height:64px;align-items:flex-start}
.ribbon{position:relative;width:44px;height:52px;border:0;padding:0;margin:0;cursor:pointer;background:none;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  opacity:.72;transform:translateY(3px) scale(.86);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.rb-clay{display:block;width:40px;height:40px;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:contain;-webkit-filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.ribbon[aria-current="true"]{opacity:1;transform:scale(1.15)}
.ribbon[aria-current="true"] .rb-clay{-webkit-filter:drop-shadow(0 3px 3px rgba(0,0,0,.4)) drop-shadow(0 0 7px var(--glow));filter:drop-shadow(0 3px 3px rgba(0,0,0,.4)) drop-shadow(0 0 7px var(--glow))}
.ribbon:active{transform:translateY(2px) scale(.8);transition-duration:.09s}
.ribbon[aria-current="true"]:active{transform:translateY(2px) scale(1.02)}
.ribbon:focus-visible{outline:3px solid var(--gold);outline-offset:-2px;border-radius:12px}
@media (min-width:700px){ .book.v-deck .ribbon{width:56px} }
.ribbon[data-ch="start"] .rb-clay{background-image:url(/app/clay/book-start-here.3e56e1b8e2.png)}
.ribbon[data-ch="calmlings"] .rb-clay{background-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ribbon[data-ch="wobbles"] .rb-clay{background-image:url(/app/clay/book-wobbles.a0ca47c194.png)}
.ribbon[data-ch="feelings"] .rb-clay{background-image:url(/app/clay/book-feelings-friends.e52148074e.png)}
.ribbon[data-ch="moonlight"] .rb-clay{background-image:url(/app/clay/book-moonlight.7faf430675.png)}
.ribbon[data-ch="storybook"] .rb-clay{background-image:url(/app/clay/book-storybook.2186796eba.png)}
.ribbon[data-ch="onthego"] .rb-clay{background-image:url(/app/clay/book-on-the-go.f5bf953ec2.png)}
.ribbon[data-ch="everyday"] .rb-clay{background-image:url(/app/clay/book-storybook.2186796eba.png)}
.ribbon[data-ch="nature"] .rb-clay{background-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ribbon[data-ch="shiny"] .rb-clay{background-image:url(/app/clay/book-shiny-cards.8e9589b800.png)}
.ribbon[data-ch="playkit"] .rb-clay{background-image:url(/app/clay/book-play-kit.d62f6c9029.png)}

/* find a card */
.fd-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;max-width:640px;margin:0 auto;scroll-margin-top:calc(var(--st) + 10px)}
/* The twelve topic buttons are soft 3D clay (6 Oct 2026, founder-approved "swishy" feel): the picture is the whole button, the
   label is real text under it. Floating, the press (squash, tilt toward the finger, glow), the jelly spring on release and
   the shine, ring and stars are made in js/clay.js; only transform and opacity ever move. The pictures are build_app.py's
   hashed copies of app/clay/*.png (the placeholders below), saved at install so the screen works offline. */
.fd-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;min-width:0;margin:0;padding:4px 0 8px;border:0;border-radius:24px;background:none;color:#fff;cursor:pointer;
  font:900 .9375rem/1.1 var(--sans);text-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fd-chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cl-art{position:relative;display:block;width:100%;max-width:112px}
.cl-art::before{content:"";display:block;padding-top:100%}
.cl-glow,.cl-shadow,.cl-blob,.cl-img,.cl-shine{position:absolute;display:block;pointer-events:none}
.cl-blob,.cl-img,.cl-shine{left:0;top:0;width:100%;height:100%}
.cl-blob{transform-origin:50% 90%;transition:transform .35s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.cl-img{background-position:center;background-repeat:no-repeat;background-size:contain;-webkit-filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.cl-shadow{left:14%;bottom:2%;width:72%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0));transform-origin:50% 50%;transition:transform .2s}
.cl-glow{left:20%;top:20%;width:60%;height:60%;border-radius:50%;background:var(--c);box-shadow:0 0 26px 12px var(--c);opacity:0;transition:opacity .3s}
.cl-label{display:block;max-width:100%;margin-top:7px;overflow-wrap:anywhere;text-shadow:0 2px 0 rgba(0,0,0,.45);transition:color .2s}
.fd-chip[aria-pressed="true"] .cl-label{color:var(--gold)}
.fd-chip[aria-pressed="true"] .cl-glow{opacity:.35}
/* the shine: a bar slides across the picture's own shape (the picture is the mask); a faint sheen while pressed */
.cl-shine{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;overflow:hidden}
.cl-shine::before{content:"";position:absolute;left:-60%;top:0;bottom:0;width:60%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.7) 50%,rgba(255,255,255,0));opacity:0}
.cl-shine::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:0;transition:opacity .09s}
.fd-chip.down .cl-shine::after{opacity:.16}
.fd-chip:nth-child(5n+1){--d:0s}.fd-chip:nth-child(5n+2){--d:-.7s}.fd-chip:nth-child(5n+3){--d:-1.4s}.fd-chip:nth-child(5n+4){--d:-2.1s}.fd-chip:nth-child(5n+5){--d:-2.8s}
.fd-chips:not(.lite) .fd-chip:not(.down):not(.pop) .cl-blob{animation:cl-float 4s ease-in-out infinite;animation-delay:var(--d,0s)}
.fd-chips:not(.lite) .fd-chip:not(.down):not(.pop) .cl-shadow{animation:cl-shfloat 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes cl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cl-shfloat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.93);opacity:.85}}
/* pressed: squashed flat, tilted toward the finger, the shadow spreads, a glow in the button's colour */
.fd-chip.down .cl-blob{transform:perspective(380px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(6px) scale(1.12,.82);transition-duration:.09s}
.fd-chip.down .cl-shadow{transform:scale(1.18,1.1);transition-duration:.09s}
.fd-chip.down .cl-glow{opacity:.55;transition-duration:.09s}
/* let go: a 0.9 s jelly spring, the shadow shrinks while it is in the air, the shine sweeps, the glow fades back */
.fd-chip.pop .cl-blob{animation:cl-jelly .9s linear}
.fd-chip.pop .cl-shadow{animation:cl-shjelly .9s linear}
.fd-chip.pop .cl-shine::before{animation:cl-sweep .7s ease-out .08s both}
.fd-chip.pop .cl-glow{opacity:.35;transition-duration:.8s}
@keyframes cl-jelly{
  0%{transform:translateY(6px) scale(1.12,.82) skewX(0)}
  14%{transform:translateY(-10px) scale(.9,1.14) skewX(-4deg)}
  28%{transform:translateY(0) scale(1.08,.92) skewX(5deg)}
  42%{transform:translateY(-3px) scale(.96,1.05) skewX(-3.5deg)}
  56%{transform:translateY(0) scale(1.03,.97) skewX(2deg)}
  70%{transform:scale(.99,1.01) skewX(-1deg)}
  85%{transform:scale(1.005,.995) skewX(.4deg)}
  100%{transform:none}}
@keyframes cl-shjelly{0%{transform:scale(1.18,1.1)}14%{transform:scale(.7);opacity:.5}28%{transform:scale(1.08)}42%{transform:scale(.9)}60%{transform:scale(1.02)}100%{transform:none}}
@keyframes cl-sweep{from{transform:translateX(0);opacity:1}to{transform:translateX(300%);opacity:1}}
.cl-spark,.cl-ring{position:absolute;left:50%;top:42%;pointer-events:none}
.cl-spark{width:14px;height:14px;background:var(--sc,#fff);-webkit-clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:cl-fly .7s ease-out forwards}
.cl-ring{width:70%;border-radius:30%;border:3px solid var(--c);transform:translate(-50%,-50%) scale(.8);animation:cl-ringout .6s ease-out forwards}
.cl-ring::before{content:"";display:block;padding-top:100%}
@keyframes cl-fly{from{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(90deg);opacity:0}}
@keyframes cl-ringout{to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
/* the twelve pictures (build_app.py swaps each placeholder for the hashed /app/clay/ address); the same file is the shine's mask */
.fd-chip[data-k="haircut"] .cl-img{background-image:url(/app/clay/haircut.d4b1c4f580.png)}
.fd-chip[data-k="dentist"] .cl-img{background-image:url(/app/clay/dentist.b8973b1f1e.png)}
.fd-chip[data-k="doctor"] .cl-img{background-image:url(/app/clay/doctor.ab805af432.png)}
.fd-chip[data-k="bedtime"] .cl-img{background-image:url(/app/clay/bedtime.e72fdee75b.png)}
.fd-chip[data-k="dark"] .cl-img{background-image:url(/app/clay/the-dark.97fba691ea.png)}
.fd-chip[data-k="worried"] .cl-img{background-image:url(/app/clay/worried.4626c9b0f7.png)}
.fd-chip[data-k="angry"] .cl-img{background-image:url(/app/clay/angry.ab54e2701d.png)}
.fd-chip[data-k="sad"] .cl-img{background-image:url(/app/clay/sad.f7976995b2.png)}
.fd-chip[data-k="scared"] .cl-img{background-image:url(/app/clay/scared.1eb0a7d830.png)}
.fd-chip[data-k="goodbye"] .cl-img{background-image:url(/app/clay/saying-goodbye.29c40bc426.png)}
.fd-chip[data-k="loud"] .cl-img{background-image:url(/app/clay/loud-noises.22b6ac26de.png)}
.fd-chip[data-k="waiting"] .cl-img{background-image:url(/app/clay/waiting.ee5642bb25.png)}
.day-chip .cl-img{background-image:url(/app/clay/book-start-here.3e56e1b8e2.png)}
.day-chip .cl-shine{-webkit-mask-image:url(/app/clay/book-start-here.3e56e1b8e2.png);mask-image:url(/app/clay/book-start-here.3e56e1b8e2.png)}
.fd-chip[data-k="haircut"] .cl-shine{-webkit-mask-image:url(/app/clay/haircut.d4b1c4f580.png);mask-image:url(/app/clay/haircut.d4b1c4f580.png)}
.fd-chip[data-k="dentist"] .cl-shine{-webkit-mask-image:url(/app/clay/dentist.b8973b1f1e.png);mask-image:url(/app/clay/dentist.b8973b1f1e.png)}
.fd-chip[data-k="doctor"] .cl-shine{-webkit-mask-image:url(/app/clay/doctor.ab805af432.png);mask-image:url(/app/clay/doctor.ab805af432.png)}
.fd-chip[data-k="bedtime"] .cl-shine{-webkit-mask-image:url(/app/clay/bedtime.e72fdee75b.png);mask-image:url(/app/clay/bedtime.e72fdee75b.png)}
.fd-chip[data-k="dark"] .cl-shine{-webkit-mask-image:url(/app/clay/the-dark.97fba691ea.png);mask-image:url(/app/clay/the-dark.97fba691ea.png)}
.fd-chip[data-k="worried"] .cl-shine{-webkit-mask-image:url(/app/clay/worried.4626c9b0f7.png);mask-image:url(/app/clay/worried.4626c9b0f7.png)}
.fd-chip[data-k="angry"] .cl-shine{-webkit-mask-image:url(/app/clay/angry.ab54e2701d.png);mask-image:url(/app/clay/angry.ab54e2701d.png)}
.fd-chip[data-k="sad"] .cl-shine{-webkit-mask-image:url(/app/clay/sad.f7976995b2.png);mask-image:url(/app/clay/sad.f7976995b2.png)}
.fd-chip[data-k="scared"] .cl-shine{-webkit-mask-image:url(/app/clay/scared.1eb0a7d830.png);mask-image:url(/app/clay/scared.1eb0a7d830.png)}
.fd-chip[data-k="goodbye"] .cl-shine{-webkit-mask-image:url(/app/clay/saying-goodbye.29c40bc426.png);mask-image:url(/app/clay/saying-goodbye.29c40bc426.png)}
.fd-chip[data-k="loud"] .cl-shine{-webkit-mask-image:url(/app/clay/loud-noises.22b6ac26de.png);mask-image:url(/app/clay/loud-noises.22b6ac26de.png)}
.fd-chip[data-k="waiting"] .cl-shine{-webkit-mask-image:url(/app/clay/waiting.ee5642bb25.png);mask-image:url(/app/clay/waiting.ee5642bb25.png)}
/* My book's What's inside: the same buttons' own pictures (data-k is the chapter's key, js/book.js) */
.ct[data-k="start"] .cl-img{background-image:url(/app/clay/book-start-here.3e56e1b8e2.png)}
.ct[data-k="calmlings"] .cl-img{background-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ct[data-k="wobbles"] .cl-img{background-image:url(/app/clay/book-wobbles.a0ca47c194.png)}
.ct[data-k="feelings"] .cl-img{background-image:url(/app/clay/book-feelings-friends.e52148074e.png)}
.ct[data-k="moonlight"] .cl-img{background-image:url(/app/clay/book-moonlight.7faf430675.png)}
.ct[data-k="storybook"] .cl-img{background-image:url(/app/clay/book-storybook.2186796eba.png)}
.ct[data-k="onthego"] .cl-img{background-image:url(/app/clay/book-on-the-go.f5bf953ec2.png)}
.ct[data-k="everyday"] .cl-img{background-image:url(/app/clay/book-storybook.2186796eba.png)}
.ct[data-k="nature"] .cl-img{background-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ct[data-k="shiny"] .cl-img{background-image:url(/app/clay/book-shiny-cards.8e9589b800.png)}
.ct[data-k="playkit"] .cl-img{background-image:url(/app/clay/book-play-kit.d62f6c9029.png)}
.ct[data-k="start"] .cl-shine{-webkit-mask-image:url(/app/clay/book-start-here.3e56e1b8e2.png);mask-image:url(/app/clay/book-start-here.3e56e1b8e2.png)}
.ct[data-k="calmlings"] .cl-shine{-webkit-mask-image:url(/app/clay/book-calmlings.83d443869c.png);mask-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ct[data-k="wobbles"] .cl-shine{-webkit-mask-image:url(/app/clay/book-wobbles.a0ca47c194.png);mask-image:url(/app/clay/book-wobbles.a0ca47c194.png)}
.ct[data-k="feelings"] .cl-shine{-webkit-mask-image:url(/app/clay/book-feelings-friends.e52148074e.png);mask-image:url(/app/clay/book-feelings-friends.e52148074e.png)}
.ct[data-k="moonlight"] .cl-shine{-webkit-mask-image:url(/app/clay/book-moonlight.7faf430675.png);mask-image:url(/app/clay/book-moonlight.7faf430675.png)}
.ct[data-k="storybook"] .cl-shine{-webkit-mask-image:url(/app/clay/book-storybook.2186796eba.png);mask-image:url(/app/clay/book-storybook.2186796eba.png)}
.ct[data-k="onthego"] .cl-shine{-webkit-mask-image:url(/app/clay/book-on-the-go.f5bf953ec2.png);mask-image:url(/app/clay/book-on-the-go.f5bf953ec2.png)}
.ct[data-k="everyday"] .cl-shine{-webkit-mask-image:url(/app/clay/book-storybook.2186796eba.png);mask-image:url(/app/clay/book-storybook.2186796eba.png)}
.ct[data-k="nature"] .cl-shine{-webkit-mask-image:url(/app/clay/book-calmlings.83d443869c.png);mask-image:url(/app/clay/book-calmlings.83d443869c.png)}
.ct[data-k="shiny"] .cl-shine{-webkit-mask-image:url(/app/clay/book-shiny-cards.8e9589b800.png);mask-image:url(/app/clay/book-shiny-cards.8e9589b800.png)}
.ct[data-k="playkit"] .cl-shine{-webkit-mask-image:url(/app/clay/book-play-kit.d62f6c9029.png);mask-image:url(/app/clay/book-play-kit.d62f6c9029.png)}
/* calm motion (html.reduce, set by steady.js, or the device's own setting): no float, wobble, shine, stars or ring, just a
   simple pressed state; older devices (html.lite or .fd-chips.lite, from lite.js) keep the press and the spring but not the
   always-on floating */
html.reduce .cl-blob,html.reduce .cl-shadow,html.reduce .cl-shine::before{animation:none!important}
html.reduce .cl-blob,html.reduce .cl-shadow,html.reduce .cl-glow{transition:none}
html.reduce .fd-chip.down .cl-blob{transform:translateY(2px) scale(.94)}
html.reduce .fd-chip.down .cl-shadow{transform:none}
html.reduce .cl-spark,html.reduce .cl-ring{display:none}
html.lite .cl-blob,html.lite .cl-shadow{animation:none}
@media (prefers-reduced-motion:reduce){.cl-blob,.cl-shadow,.cl-shine::before{animation:none!important}.cl-spark,.cl-ring{display:none}}
.fd-search{display:flex;align-items:center;gap:8px;max-width:640px;margin:18px auto 6px;min-height:54px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:var(--moon-soft)}
.fd-search .ic{width:22px;height:22px}
.fd-input{flex:1;min-width:0;min-height:50px;background:transparent;border:0;outline:0;color:var(--moon);font:700 1.05rem var(--sans)}
.fd-input::placeholder{color:var(--moon-soft);opacity:.75}
.fd-out{max-width:720px;margin:0 auto;scroll-margin-top:calc(var(--st) + 10px)}
.fd-sentence{font-family:var(--serif);font-size:1.3rem;text-align:center;margin:18px auto 6px;max-width:30ch}
.fd-h{font:800 1.05rem var(--sans);color:var(--moon-soft);margin:18px 0 10px;text-transform:none}
.fd-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 12px;margin-bottom:44px}
.fd-tiles.big{grid-template-columns:repeat(auto-fit,min(44vw,220px));justify-content:center}
.fd-none{text-align:center;font:800 1.2rem var(--sans);margin:24px auto;max-width:26ch}
.fd-again{display:flex;margin:10px auto 0}
.fd-count{text-align:center;color:var(--moon-soft);font:700 1rem/1.5 var(--sans);margin:8px auto}
.fd-more{display:flex;min-height:64px;max-width:100%;white-space:normal;margin:10px auto}
@media (min-width:700px){.fd-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.fd-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px}.cl-art{max-width:128px}}
@media (min-width:700px){:root[data-ts="150"] .fd-tiles{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(2.6rem + 12px)}}
@media (max-width:600px){
  :root[data-ts="150"] .fd-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Larger text needs room for the card name and the locked-card caption. */
  :root[data-ts="150"] .fd-tiles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(2.6rem + 12px)}
}
@media (max-width:360px){:root[data-ts="150"] .fd-tiles{grid-template-columns:minmax(0,1fr);max-width:220px;margin-left:auto;margin-right:auto}}

/* my cards */
.mine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 12px;margin-top:16px}
@media (min-width:700px){.mine-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mine-empty{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin:12vh auto 0;max-width:22ch;font:800 1.375rem var(--sans)}
.mine-heart .ic{width:72px;height:72px;color:#F9A8C8}
.mine-personal{margin-top:22px}.mine-personal-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.mine-section-title{margin:0;color:var(--moon);font:700 1.5rem/1.2 var(--serif)}.mine-create{flex-shrink:0;max-width:100%;white-space:normal;background:linear-gradient(155deg,#ffe38b,#f3c64f);color:#342307;border-color:#fff0b5;box-shadow:inset 0 2px 0 #fff6c58c,0 8px 22px -12px #f2c14eaa}.mine-create .ic{color:currentColor}
.mine-personal-empty{margin:0;padding:20px 0;color:var(--moon-soft);font:700 1.1rem/1.5 var(--sans);max-width:40ch}
.mine-creations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;max-width:880px}
.mine-creation{appearance:none;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:64px;min-height:64px;padding:0;border:0;border-radius:16px;background:none;color:var(--moon);cursor:pointer}
.mine-creation-art{display:block;width:100%;aspect-ratio:290/405;border-radius:16px;background:#ffffff08;overflow:hidden;pointer-events:none}.mine-creation-art>svg{display:block;width:100%;height:auto}
.mine-creation-name{font:900 1.1rem/1.2 var(--sans);overflow-wrap:anywhere}.mine-favourites{margin-top:36px}.mine-favourites .mine-empty{margin-top:24px;margin-bottom:28px;font-size:1.1rem;gap:10px}.mine-favourites .mine-heart .ic{width:48px;height:48px}
@media(min-width:600px){.mine-creations{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.mine-creations{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- first run (for the grown-up) and the pack opening ---------- */
.setup-box{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-bottom:20px}
.hero-float{animation:float 6.5s ease-in-out infinite;margin:8px 0 4px}
.hero-card{display:block;width:min(40vw,190px);aspect-ratio:.716;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 20px 44px -14px rgba(0,0,0,.7),0 0 40px -6px rgba(242,193,78,.45)}
.setup-h{font-family:var(--serif);font-size:clamp(1.7rem,6vw,2.2rem);color:var(--moon)}
.setup-h2{font-family:var(--serif);font-size:1.4rem;margin-top:10px}
.setup-p{font-size:1.1rem;color:var(--moon-soft);max-width:34ch}
.setup-p.small{font-size:.98rem}
.setup-note{font-size:.95rem;color:var(--moon-soft);max-width:36ch}
.setup-note.warn{background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.35);border-radius:14px;padding:10px 12px;color:var(--moon)}
.setup-btns{display:flex;flex-direction:column;gap:12px;width:min(100%,340px)}
.steps{text-align:left;list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:10px;width:100%}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 54px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:700}
.steps li::before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-weight:800}
.unlock-form{width:100%;display:grid;gap:8px;text-align:left}
.lbl{font:800 .98rem var(--sans);color:var(--moon)}
.lbl.small{font-size:.9rem;color:var(--moon-soft);margin-top:6px}
.field-row{display:flex;gap:8px}
.field{width:100%;min-width:0;min-height:54px;border-radius:14px;border:1.5px solid rgba(245,241,255,.32);background:rgba(255,255,255,.06);color:var(--moon);
  padding:0 14px;font:700 1rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.places{display:flex;flex-wrap:wrap;gap:8px}
.place{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(245,241,255,.32);background:rgba(255,255,255,.06);color:var(--moon);font:700 .95rem var(--sans);cursor:pointer}
.place[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.setup-note.small-note{font-size:.88rem;text-align:left;max-width:none}
.field::placeholder{color:var(--moon-soft);opacity:.7}
.msg{min-height:1.5em;font-weight:700;color:var(--moon-soft)}
.msg.bad{color:#FFC2B6}
.msg-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.where{width:100%;text-align:left;background:rgba(255,255,255,.05);border-radius:16px;padding:4px 14px 12px}
.where summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.where p{color:var(--moon-soft);margin:0 0 10px}
.qr{width:220px;height:220px;border-radius:18px;background:#fff;padding:8px}
.ok-seal{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE59A,#E8B840);display:grid;place-items:center;color:var(--gold-ink);box-shadow:0 0 30px -4px rgba(242,193,78,.8)}
.ok-seal .ic{width:40px;height:40px;fill:var(--gold-ink)}
.setup .switch{color:var(--moon)}
.pack{text-align:center}
.pack-say{font-family:var(--hand);font-weight:700;font-size:2rem;color:var(--gold);min-height:1.3em;margin:6px 0 16px}
.pack-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:720px;margin:0 auto;perspective:1100px}
.flip{appearance:none;-webkit-appearance:none;position:relative;width:min(calc((100vw - 64px) / 3),160px);aspect-ratio:var(--ar,.716);padding:0;border:0;background:none;cursor:pointer;
  transform-style:preserve-3d;animation:deal .6s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i,0) * 140ms)}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.25,1)}
.flip.open .flip-inner{transform:rotateY(180deg)} /* one turn (plan 2.7): it was one and a half in 1.15 s, three dark-bright pairs */
.flip.open{animation:lift 1.15s cubic-bezier(.2,.75,.25,1)}
.flip-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.flip-face img{width:100%;height:100%;object-fit:cover;display:block}
.flip-front{transform:rotateY(180deg)}
.flip:not(.open) .flip-back{box-shadow:0 0 0 2px var(--glow),0 0 24px -4px var(--glow),0 12px 26px rgba(0,0,0,.4)}
.flip.open .flip-front{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 32px -6px var(--glow)}
.flip-flash,.flip-shine{position:absolute;pointer-events:none}
.flip-flash{inset:0;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,.4) 34%,transparent 70%)}
.flip-shine{inset:-20%;transform:translateX(-120%);background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%)}
.flip .spark{position:absolute;left:50%;top:45%;width:12px;height:12px;pointer-events:none;z-index:5;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.flip .ring{position:absolute;left:50%;top:45%;width:240px;height:240px;border-radius:50%;border:3px solid rgba(255,230,160,.95);box-shadow:0 0 18px rgba(255,200,240,.8);pointer-events:none;z-index:4}
.pack-done{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:14px}
.pack-h2{font:800 1.375rem var(--sans)}
@keyframes deal{from{transform:translateY(40px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes lift{0%{transform:none}35%{transform:translateY(-16px) scale(1.09)}100%{transform:none}}

/* ---------- Bedtime: warm, dark, no white, no blue ---------- */
.bed{position:fixed;inset:0;z-index:30;overflow:auto;background:var(--bed-bg);color:var(--bed-ink);display:flex;
  padding:calc(var(--st) + 16px) calc(var(--sr) + 16px) calc(var(--sb) + 20px) calc(var(--sl) + 16px);transition:background 10s ease}
.bed-body{margin:auto;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.bed-h{font-family:var(--serif);font-size:1.9rem;color:var(--bed-ink)}
.bed-picks{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.bed-pick{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:4px;cursor:pointer;color:var(--bed-ink);min-width:64px}
.bed-card{position:relative;display:block;width:min(25vw,150px);aspect-ratio:.716;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px -12px rgba(0,0,0,.9),0 0 0 1px rgba(232,201,160,.2);transform-style:preserve-3d}
.bed-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(.75);transition:opacity .05s}
.bed-warm{position:absolute;inset:0;background:var(--bed-glow);mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.bed-card.big{width:min(60vw,290px,calc((100dvh - 380px) * .716));overflow:visible}
.bed-card.big img,.bed-card.big .bed-warm{border-radius:12px}
.bed-name{font-family:var(--hand);font-weight:700;font-size:1.6rem}
.bed-small{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid rgba(232,201,160,.3);background:transparent;color:var(--bed-ink-soft);font:700 1rem var(--sans);cursor:pointer}
.bed-stage{position:relative;display:grid;place-items:center;padding:24px}
.bed-halo{position:absolute;width:125%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(242,179,102,.3),rgba(242,179,102,0) 70%);
  opacity:.55;transform:scale(.9);transition:transform 5s cubic-bezier(.45,0,.55,1),opacity 5s ease}
.bed-halo.in{transform:scale(1.12);opacity:1;transition-duration:4s}
.bed-words{font:800 1.45rem/1.35 var(--sans);max-width:24ch}
.bed-guide{font-family:var(--hand);font-weight:700;font-size:2.3rem;min-height:1.3em}
.bed-guide.own{font-size:2rem;line-height:1.15;max-width:20ch}
.bed-dots{display:flex;gap:12px;justify-content:center;min-height:18px}
.bed-dots i{width:15px;height:15px;border-radius:50%;border:2px solid var(--bed-ink-soft);transition:background .6s,border-color .6s}
.bed-dots i.on{background:var(--bed-glow);border-color:var(--bed-glow)}
.bed-go{background:var(--bed-bg-2);color:var(--bed-ink);border:1.5px solid rgba(242,179,102,.55);box-shadow:none}
.bed-back{opacity:0}
.bed-card.backside .bed-back{opacity:1}
.bed-card.backside img:not(.bed-back){opacity:0}
.bed-card.turn{animation:bedTurn 1.5s ease-in-out forwards,bedSettle 2.2s 1.6s ease-in forwards}
@keyframes bedTurn{0%{transform:scaleX(1)}50%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes bedSettle{from{transform:none}to{transform:translateY(50px) scale(.72);opacity:.35}}
.bed-moon{color:var(--bed-ink);animation:rise 3s ease-out forwards}
.bed-moon .ic{width:56px;height:56px}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:.85}}
.bed-night{display:flex;flex-direction:column;gap:6px;min-height:5rem}
.bed-gn{font-family:var(--hand);font-weight:700;font-size:2.4rem}
.bed-gn2{font:800 1.3rem var(--sans);color:var(--bed-ink-soft);min-height:1.5em}
.bed::after{content:"";position:fixed;inset:0;background:#0B0907;opacity:0;pointer-events:none;transition:opacity 10s ease}
.bed.fade::after{opacity:1}
.bed-managed .bed-halo{transition:none}
.bed-managed .bed-moon{animation:none;opacity:.85}
.bed-dimmer{position:fixed;inset:0;background:#0B0907;opacity:0;pointer-events:none;z-index:1}
.bed-controls{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
.bed-controls .bed-small{min-height:56px;min-width:132px;padding:10px 20px;background:var(--bed-bg)}
.bed-paused-note{position:relative;z-index:2;min-height:1.4em;color:var(--bed-ink-soft);font:700 1rem/1.4 var(--sans)}
.bed-controls .bed-small:focus-visible{outline:3px solid var(--bed-ink);outline-offset:4px}
@media(max-height:680px){.bed-managed .bed-body{gap:14px}.bed-managed .bed-card.big{width:min(52vw,240px,calc(max(160px,100dvh - 400px) * .716))}.bed-managed .bed-stage{padding:12px}.bed-managed .bed-guide{font-size:1.9rem}.bed-managed .bed-guide.own{font-size:1.65rem}}
.sleep{position:fixed;inset:0;z-index:30;background:#0B0907;color:#7A6650;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:calc(var(--st) + 20px) 24px calc(var(--sb) + 20px)}
.sleep-moon{color:#5A4A38}
.sleep-moon .ic{width:46px;height:46px}
.sleep-t{font:700 1.1rem var(--sans);max-width:24ch}
.sleep-shh{font-family:var(--hand);font-weight:700;font-size:1.9rem;color:#8A7258;opacity:0;transition:opacity .6s;min-height:1.3em}
.sleep-shh.show{opacity:1}
.sleep-wake{position:absolute;bottom:calc(var(--sb) + 14px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;
  background:none;border:0;color:#4A3C2E;font:700 .9rem var(--sans);cursor:pointer}
.sleep-wake .ic{width:16px;height:16px}
.sleep.closed{border:0;width:100%;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}

/* ---------- grown-ups (the site's paper; night in the evening or in dark mode) ---------- */
.grown{--bg:var(--paper);--fg:var(--ink);--fg2:var(--ink-soft);--panel:#FFFFFF;--acc:var(--sage-deep);--brd:var(--line);color-scheme:light;
  background:var(--bg);color:var(--fg);font-size:1.0625rem}
.grown.night-mode{--bg:#161A40;--fg:var(--moon);--fg2:var(--moon-soft);--panel:rgba(255,255,255,.055);--acc:var(--gold);--brd:rgba(255,255,255,.16);color-scheme:dark}
.grown-wrap{min-height:100dvh}
.area{min-height:100dvh;padding:calc(var(--st) + 8px) calc(var(--sr) + 16px) calc(var(--sb) + 40px) calc(var(--sl) + 16px)}
.area > *{max-width:720px;margin-left:auto;margin-right:auto}
.g-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--st) + 8px) 0 10px;margin-top:calc(-1 * var(--st) - 8px);background:var(--bg)}
.g-top h1{font-family:var(--serif);font-size:1.7rem;color:var(--acc)}
.gp{background:var(--panel);border-radius:20px;padding:18px;margin-top:14px;box-shadow:0 0 0 1px var(--brd);display:flex;flex-direction:column;gap:10px}
.gp h2{font-family:var(--serif);font-size:1.3rem;color:var(--acc)}
.gp.wake{align-items:center}
.gp p{max-width:62ch}
.grown .dim{color:var(--fg2);font-size:.95rem}
.grown .lbl{color:var(--fg);font-size:.98rem;margin-top:4px}
.grown .btn-sage{background:var(--acc);color:var(--bg)}
.grown .btn-ghost{color:var(--acc);border-color:var(--acc)}
.grown .btn-ghost.danger{color:var(--rose);border-color:var(--rose)}
.grown.night-mode .btn-ghost.danger{color:#FFB4A0;border-color:#FFB4A0}
.grown a{color:var(--acc)}
.big-line{font:800 1.1rem var(--sans)}
.banner{background:rgba(242,193,78,.16);border-left:4px solid var(--gold);padding:10px 12px;border-radius:10px}
.keyrow{border-top:1px solid var(--brd);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.devlist{display:flex;flex-direction:column}
.devrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--brd);padding:10px 0}
.dev-l{font-weight:800}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-weight:700}
.switch input{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:999px;background:rgba(127,127,127,.35);position:relative;cursor:pointer;margin:0;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .2s}
.switch input:checked{background:var(--sage-deep)}
.night-mode .switch input:checked,.setup .switch input:checked{background:var(--gold)}
.switch input:checked::after{transform:translateX(20px)}
.gseg{display:flex;flex-wrap:wrap;gap:6px}
.gseg-b{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--brd);background:transparent;color:var(--fg);font:700 .95rem var(--sans);cursor:pointer}
.gseg-b[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.grow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:700}
.grow input{min-height:44px;border-radius:12px;border:1.5px solid var(--brd);background:transparent;color:var(--fg);padding:0 10px;font:700 1rem var(--sans)}
.progress{font-weight:700;min-height:1.3em}
.grange{width:100%;min-height:44px;margin:0;accent-color:var(--acc);cursor:pointer}
.tip{background:rgba(157,174,139,.18);padding:10px 12px;border-radius:12px}
.plain{margin:0;padding-left:1.2em;display:grid;gap:4px}
.faq{border-top:1px solid var(--brd);padding:2px 0}
.faq summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.faq p{padding:0 0 10px;color:var(--fg2)}
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:auto;padding:calc(var(--st) + 16px) 16px calc(var(--sb) + 16px)}
.gate-box{width:min(100%,380px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.gate h1{font-family:var(--serif);font-size:1.8rem;color:var(--acc)}
.gate-q{font:700 1.2rem var(--sans)}
.gate-typed{display:block;width:100%;min-height:60px;font:800 2.2rem/60px var(--sans);letter-spacing:.12em;border-bottom:2px solid var(--brd)}
.gate-msg{min-height:1.4em;color:#a64f3e;font-weight:700}
.gate.night-mode .gate-msg{color:#ffb4a0}
.gate-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.gate-k{min-height:64px;border-radius:18px;border:1.5px solid var(--brd);background:var(--panel);color:var(--fg);font:800 1.5rem var(--sans);cursor:pointer;display:grid;place-items:center}
.gate-k.ok{background:var(--acc);color:var(--bg);border-color:var(--acc);font-size:1.2rem}
.gate-k .ic{width:26px;height:26px}
.gate-no{margin-top:4px}

/* ---------- small things ---------- */
.ask{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(8,10,28,.55);padding:20px}
.ask.closing{pointer-events:none} /* a dialog sinking away never takes the next tap (ui.js ask) */
.ask-box{width:min(100%,400px);background:var(--paper);color:var(--ink);border-radius:20px;padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.ask-box .btn-ghost{color:var(--sage-deep);border-color:var(--sage-deep)}
.ask-row{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 22px);transform:translate(-50%,20px);z-index:95;background:#2B2F72;color:var(--moon);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.75rem 1.25rem;opacity:0;transition:opacity .25s var(--ease),transform .4s var(--ease);pointer-events:none;max-width:92vw;text-align:center;font-weight:800}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-height:700px){
  .htile{min-height:110px}
  .hello-t{font-size:1.8rem;margin-top:10px}
}
@media (min-width:768px){
  .htiles{max-width:680px;gap:18px}
  .htile{min-height:150px}
  .hello-card{width:min(34vw,300px,calc((100dvh - 550px) * .716))}
}
/* 3 Oct 2026 (founder: Home's buttons were cut off on an iPad held sideways): sideways tablets put the four big buttons in
   one row under a slightly smaller hello card, so the whole Home screen fits without scrolling */
@media (min-width:700px) and (orientation:landscape){
  .htiles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:980px;gap:16px}
  .htile{min-height:118px}
  .hello-card{width:min(26vw,280px,calc((100dvh - 445px) * .716))}
}
/* v0.30: with the Calmling of the Day on Home, shorter screens (a phone, an iPad mini sideways) take a slimmer button and slimmer big
   buttons, so Home still fits without scrolling where it did before (a 375 x 667 or 360 x 740 phone) */
@media (max-height:760px){
  .day{margin-bottom:10px}
  .day-chip.fd-chip{min-height:64px;padding:6px 12px 6px 8px;column-gap:10px}
  .day-chip .cl-art{width:48px;max-width:48px}
  .day-chip .cl-label{font-size:.8125rem}
  .day-chip .cl-sub{font-size:1.25rem}
  .day-peek{height:48px}
  .htile{min-height:96px;padding:10px}
  .htile-ic .ic{width:36px;height:36px}
  .hello-card{min-width:104px}
}
/* Calm motion, one switch (plan 2.8, 3 Oct 2026): steady.js sets html.reduce when the grown-ups chose "Always calm" or
   the device asks for reduced motion, and keeps it up to date when either changes, so both calm exactly the same things.
   Nothing floats, flips, slides, wiggles or sparkles; fades stay (they don't move). Before, "Always calm" still let the
   pack do its 540-degree flip and the lock wiggle, the sheet and the toast move. */
html.reduce .app-sky .planet{animation:none}
html.reduce .app-sky .shoot{display:none}
html.reduce .hello-float,html.reduce .cover-float,html.reduce .hero-float,html.reduce .flip,html.reduce .flip.open,html.reduce .bed-moon,html.reduce .bed-card.turn{animation:none!important}
html.reduce .hello-gleam{display:none}
html.reduce .flip-inner{transition:none}
html.reduce .bed-halo,html.reduce .bed-halo.in{transform:none!important}
html.reduce .tile.wiggle .tile-lock,html.reduce .chip.wiggle,html.reduce .lc-peek.wiggle .tile-lock{animation:none}
html.reduce .tile-name{transition:none}
html.reduce .toast{transition:opacity .2s;transform:translate(-50%,0)}
html.reduce .sheet-box{animation:none}
html.reduce .lc-found{transition:opacity .3s;transform:translate(-50%,0)}
html.reduce .lc-breath{transition:none}
html.reduce .lc-breath.in,html.reduce .lc-halo.in{transform:none}
html.reduce .lc-hint.swipe::before,html.reduce .lc-hint.swipe::after{animation:none}
html.reduce .lc-spark,html.reduce .lc-ripple{display:none}
html.reduce .lc-peek-card img{transition:none}
html.reduce .ribbon{transition:opacity .2s}
html.reduce .ribbon:active{transform:translateY(3px) scale(.86)}
html.reduce .ribbon[aria-current="true"]:active{transform:scale(1.15)}
/* (review, 4 Oct 2026) screen changes, the card, dialogs and presses are at once in calm motion (main.js, ui.js); the
   sky dims at Bedtime at once, and a pressed card's sleeve lights at once */
html.reduce .app-sky{transition:none}
html.reduce .tile .sleeve::before{transition:none}
.devlist.inline{margin:10px 0 4px;text-align:left}
.devlist.inline .devrow{border-top:1px solid rgba(255,255,255,.16)}
.devlist.inline .dev-l{color:var(--moon)}
.devlist.inline .dim{color:var(--moon-soft);font-size:.9rem}
.carry{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}