/* The living card (js/stage.js, js/card.js): the site's .bx-* showcase look (static/site.css), with the foil and glare
   made as oversized layers that stage.js moves with translate3d, so a frame only changes transform and opacity.
   Overflow is set on the faces only, never on the card, or the browser flattens the 3D. */
/* The card screen (3 Oct 2026, founder: "Can we have the card in the center of the screen?", "I really want this looking
   better"; earlier: one big card, swipe, the edges peek, every button in one row along the bottom, the name and type
   under the card, Back top left; a phone held sideways may keep a side panel).
     - the card in the middle of the screen, as big as fits, with room left at its sides to swipe (and on an iPad for the
       round arrows), and only a thin sliver of the previous and next cards at the screen's edges;
     - the name and type under it; one row of five equal buttons in a dock along the bottom, above the home indicator;
     - the round arrows beside the card at the screen's edges (iPad, computer, a phone held sideways), or beside the name
       on a phone held upright (there the card takes the width and the arrows would cover it);
     - a phone held sideways: the card on the left with its arrows, the name and buttons in a panel on the right.
   It is one grid: Back, the card's row, the name's row, the buttons' row. The card's size comes from the room its row
   leaves (card.js measures the row into --room-w and --room-h whenever the screen changes size); --side keeps room free
   at each side, --vpad is the row's own padding and --lean the 3D lean's extra height. The row never gets smaller than
   --cmin: below that (a small phone with the largest text) the screen scrolls instead (.scrolls). */
.lc{--sliver:16px;--peek-at:var(--sliver);--arrow:64px;--agap:12px;--side:max(48px,13vw);--vpad:30px;--lean:1.07;--cap:440px;--cmin:200px;
  position:fixed;inset:0;z-index:30;overflow:hidden;touch-action:none;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(var(--cmin),1fr) auto auto;
  padding:calc(var(--st) + 6px) 0 0;
  background:radial-gradient(760px 560px at 50% 40%,rgba(120,96,210,.40),transparent 64%),radial-gradient(circle at 20% 30%,rgba(255,255,255,.45) 0 1px,transparent 1.5px) 0 0/180px 160px,
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.3) 0 1px,transparent 1.5px) 0 0/230px 210px}
/* 3 Oct 2026: no solid colour of its own any more, so the app's planets and shooting stars (.app-sky) show behind the
   card and the navy reaches under the phone's toolbar (a solid .lc ended at the toolbar: a paler strip at the bottom).
   The screen underneath (Home, the book) is hidden while a card is open, so it never shows through: main.js marks it
   .layer.under (app.css; it was a :has() rule here, checked on every change of the page). */
.lc.scrolls{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
/* Back, top left. Its row lets every touch through but the button's own, so a swipe can start beside it too. */
.lc-top{grid-area:1/1/2/-1;position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-self:start;height:max-content;min-height:64px;padding:0 calc(var(--sr) + 14px) 0 calc(var(--sl) + 14px);pointer-events:none}
.lc-top > *{pointer-events:auto}
.lc-rotate-hint{display:none;pointer-events:none;color:#F6E8C6;font:700 .85rem/1.3 var(--sans);max-width:clamp(130px,22vw,230px);margin:0 0 0 auto;padding:6px 10px;align-items:center;gap:8px;text-align:left}
.lc-rotate-hint .ic{width:23px;height:23px;flex:none}
@media(orientation:landscape) and (max-width:1400px){.lc-rotate-hint{display:flex}}
@media(orientation:landscape) and (max-height:500px){.lc-rotate-hint{font-size:.75rem;padding:4px 6px}}
/* the card's row, edge to edge (the slivers sit at the screen's very edges) */
.lc-wrap{grid-area:2/1/3/-1;position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:12px 0 18px}
.lc.has-peeks .lc-wrap{overflow-x:clip} /* the row is clipped at the screen's edges (x only: the card's lift, glow and shadow still reach up and down) */
.lc-panel{display:contents}
.lc-stage,.lc-peek{--cw:max(96px,min(var(--cap),calc(var(--room-w,100vw) - 2 * var(--side)),calc((var(--room-h,60dvh) - var(--vpad)) / var(--lean) * var(--ar,.716))))}
.lc-stage{position:relative;width:var(--cw);aspect-ratio:var(--ar,.716);
  perspective:1100px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;border-radius:18px}
/* the soft light under the big card, in its own glow colour; it slides away with its card (peeks.js) and comes up with
   the next one */
.lc-slot{position:relative;z-index:1;grid-area:1/1}
.lc-picture-feedback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:min(20rem,calc(100vw - 48px));max-width:calc(var(--room-w,100vw) - 24px);max-height:calc(var(--room-h,60dvh) - 24px);
  display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:20px;border:2px solid #E5C56F;border-radius:20px;background:rgba(24,28,67,.98);color:#FFF4D7;
  box-shadow:0 16px 40px rgba(8,12,35,.48),inset 0 0 0 3px rgba(229,197,111,.1);cursor:default}
.lc-picture-feedback[hidden]{display:none}
.lc-picture-feedback h2{margin:0;font:900 1.25rem/1.25 var(--sans);text-wrap:balance}
.lc-picture-feedback p{margin:0;font:600 .95rem/1.45 var(--sans)}
.lc-picture-feedback .btn{width:100%;min-height:50px;font:900 1rem/1.25 var(--sans);white-space:normal;flex:none}
.lc-picture-feedback .btn[hidden]{display:none}
.lc-picture-feedback .btn:focus-visible{outline:3px solid #FFF4D7;outline-offset:3px}
.lc-aura{position:absolute;inset:-10% -42% -30%;z-index:-1;pointer-events:none}
.lc-aura::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,var(--glow) 0 42%,transparent);opacity:.2}
.lc.arrive .lc-aura{animation:lcFadeIn .55s ease both}
@keyframes lcFadeIn{from{opacity:0}to{opacity:1}}
/* the cards at the screen's edges (js/peeks.js): sized like a big card of their own shape and shown at 86%, dimmed, with
   the resting card's lean, so a slide ends exactly where the next screen's big card begins. A neighbour is dimmed by a
   night-blue shade over it (.lc-peek-shade), not by being see-through: the card screen has no solid colour of its own
   (the app's planets and shooting stars show behind it), and they must never show through a card. Its corners are the
   big card's (5.75% of the width, see .lc-face), so the picture's own round corners cover them. Nothing of it shows
   until its picture is ready (.ready): never an empty frame or outline. */
.lc-peeks{position:absolute;inset:0;z-index:0;display:grid;place-items:center;padding:inherit;pointer-events:none}
.lc-peek{grid-area:1/1;width:var(--cw);aspect-ratio:var(--ar,.716);opacity:0;cursor:pointer;pointer-events:auto;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;will-change:transform,opacity}
.lc-peek-card{position:absolute;inset:0;border-radius:5.75% / calc(5.75% * var(--ar,.716));overflow:hidden;background:transparent;transform:perspective(1100px) rotateX(-6deg) rotateY(-18deg);
  box-shadow:0 18px 36px -16px rgba(0,0,0,.85);opacity:0;transition:opacity .45s ease}
.lc-peek.ready .lc-peek-card{opacity:1}
.lc-peek.now .lc-peek-card{transition:none}
.lc-peek-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.lc-peek-card.new{box-shadow:0 0 0 2px var(--glow),0 0 22px -4px var(--glow)}
.lc-peek-card.locked{background:#14163A;box-shadow:inset 0 0 0 1px var(--glow),0 18px 36px -16px rgba(0,0,0,.85)}
.lc-peek-shade{position:absolute;inset:0;z-index:2;border-radius:inherit;background:var(--night,#1C2052);opacity:.5;pointer-events:none;will-change:opacity}
/* a locked neighbour: only its sliver shows, so its lock sits there (on an iPad; a phone's sliver is too thin for it) */
.lc-peek-card .tile-lock{display:none;top:50%;width:clamp(26px,9%,44px)}
.lc-peek.prev .tile-lock{left:calc(100% - var(--sliver) * .58)}
.lc-peek.next .tile-lock{left:calc(var(--sliver) * .58)}
.lc-peek.wiggle .tile-lock{animation:wiggle .6s ease}
.lc.has-peeks .lc-slot{will-change:transform,opacity}
/* the big card sliding away takes on a peeking card's shade (peeks.js), inside its faces */
.lc-dim{position:absolute;inset:0;border-radius:inherit;background:var(--night,#1C2052);opacity:0;pointer-events:none}
/* The round arrows: big, bright and plainly buttons (a moon-white disc, a navy chevron), at the screen's edges. At the
   first or last card that arrow fades away. On a phone held upright they sit either side of the name. */
.lc-side{grid-area:3/1;align-self:center;justify-self:start;position:relative;z-index:3;width:var(--arrow);height:var(--arrow);margin-left:calc(var(--sl) + 14px);padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#1C2052;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 34% 28%,#FFFFFF,#EEE9FF 58%,#D8CEFF);
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 0 6px rgba(255,255,255,.07),0 14px 28px -10px rgba(0,0,0,.75),0 0 32px -6px rgba(196,180,255,.6);
  transition:opacity .35s ease,transform .2s cubic-bezier(.22,1,.36,1),visibility 0s}
.lc-side.next{grid-area:3/3;justify-self:end;margin-left:0;margin-right:calc(var(--sr) + 14px)}
.lc-side .ic{width:30px;height:30px;stroke-width:3.2}
.lc-side.prev .ic{transform:translateX(-1px)}
.lc-side.next .ic{transform:translateX(1px)}
@supports not (scale:1){.lc-side:active{transform:scale(.93)}} /* (pressed: ui.js pressFeedback) */
.lc-side.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
.lc-side:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
/* the first time a card with neighbours shows (with the swipe hint), each arrow says hello twice: a gold ring rings out
   from it and its chevron bobs the way it goes. Both stay inside the arrow's own spot (the disc itself never moves), so
   nothing ever pokes past the screen's edge. */
.lc-side::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px rgba(242,193,78,.95),0 0 18px 2px rgba(242,193,78,.55)}
.lc.nudge .lc-side:not(.off)::after{animation:lcRing 1.3s cubic-bezier(.22,1,.36,1) .2s 2}
.lc.nudge .lc-side.prev:not(.off) .ic{animation:lcNudgeL 1.3s cubic-bezier(.45,0,.55,1) .2s 2}
.lc.nudge .lc-side.next:not(.off) .ic{animation:lcNudgeR 1.3s cubic-bezier(.45,0,.55,1) .2s 2}
@keyframes lcRing{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.26)}}
@keyframes lcNudgeL{0%,100%{transform:translateX(-1px)}40%{transform:translateX(-8px)}70%{transform:translateX(1px)}}
@keyframes lcNudgeR{0%,100%{transform:translateX(1px)}40%{transform:translateX(8px)}70%{transform:translateX(-1px)}}
/* the name and type under the card; while the card guides a breath (or asks to be turned over) its words take the type's
   place, in the same spot, so nothing below moves. Two lines are kept for them on a phone (the name sits between the
   arrows there), one on an iPad. */
.lc-title{grid-area:3/2;align-self:center;position:relative;z-index:2;min-width:0;text-align:center;padding:6px 8px 2px}
.lc-name{font-family:var(--hand);font-weight:700;font-size:2.15rem;line-height:1;color:var(--moon);overflow-wrap:anywhere;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lc-sub{display:grid;align-items:start;margin-top:3px;min-height:2.6em}
.lc-sub > *{grid-area:1/1;transition:opacity .35s ease}
.lc-type{font:700 1rem/1.3 var(--sans);color:var(--moon-soft)}
.lc-guide{font-family:var(--serif);font-size:1.08rem;line-height:1.25;color:var(--moon);opacity:0}
.lc-sub.say .lc-type{opacity:0}
.lc-sub.say .lc-guide{opacity:1}
/* the first-time hints ("Drag to spin me!", "Swipe beside the card to see more cards") take the type's place too, in warm
   gold, the swipe one with a chevron each side that drifts the way the cards go. The card's own words win over a hint. */
.lc-hint{font:800 1rem/1.3 var(--sans);color:#FFE2A0;opacity:0;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.lc-sub.hinted .lc-type{opacity:0}
.lc-hint.show{opacity:1}
.lc-sub.say .lc-hint{opacity:0}
.lc-hint.swipe::before,.lc-hint.swipe::after{display:inline-block;color:var(--gold);font-weight:900;transform:scale(1.25)}
.lc-hint.swipe::before{content:"\2039";margin-right:.6em;animation:lcHintL 1.6s cubic-bezier(.45,0,.55,1) infinite}
.lc-hint.swipe::after{content:"\203A";margin-left:.6em;animation:lcHintR 1.6s cubic-bezier(.45,0,.55,1) infinite}
.lc-hint:not(.show)::before,.lc-hint:not(.show)::after{animation-play-state:paused} /* (no frames for a hint that has gone) */
@keyframes lcHintL{0%,100%{transform:scale(1.25) translateX(0)}50%{transform:scale(1.25) translateX(-5px)}}
@keyframes lcHintR{0%,100%{transform:scale(1.25) translateX(0)}50%{transform:scale(1.25) translateX(5px)}}
/* the buttons: one dock along the bottom, five equal buttons (icon and word), above the home indicator */
.lc-ctrl{--ctrl-gap:6px;grid-area:4/1/5/-1;justify-self:center;position:relative;z-index:2;width:min(calc(100% - 20px - var(--sl) - var(--sr)),780px);margin:8px 0 calc(var(--sb) + 10px);
  display:flex;flex-wrap:wrap;gap:var(--ctrl-gap);padding:6px;border-radius:26px;
  background:linear-gradient(180deg,rgba(47,51,124,.94),rgba(24,27,70,.97)); /* (nearly opaque: a planet drifting behind it never shows through) */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.1),0 20px 44px -24px rgba(0,0,0,.95)}
.lc-ctrl > .kbtn{flex:1 0 min-content}
.kbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:64px;min-height:72px;padding:8px 2px;border-radius:20px;cursor:pointer;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none;
  border:1px solid rgba(230,200,248,.16);background:rgba(255,255,255,.055);color:var(--moon);font:800 .84rem/1.1 var(--sans);
  transition:transform .15s ease,background-color .25s ease,border-color .25s ease;-webkit-tap-highlight-color:transparent}
.kbtn .ic{width:26px;height:26px}
.kbtn[aria-pressed="true"]{background:linear-gradient(90deg,#56D8F6,#C47AF6,#F9A8F8);color:#1C2052;border-color:transparent}
.kbtn.fav .ic{color:#F9A8C8}
.kbtn.fav[aria-pressed="true"]{background:#F9A8C8;color:#3A1030}
.kbtn.fav[aria-pressed="true"] .ic{color:#3A1030;fill:#3A1030}
.kbtn:disabled{opacity:.5;cursor:default}
.lc-perf{position:fixed;left:8px;top:calc(var(--st) + 70px);z-index:99;font:600 11px ui-monospace,Menlo,monospace;color:#B8FFB8;background:rgba(0,0,0,.65);padding:4px 8px;border-radius:6px;pointer-events:none}
.lc-stage:active{cursor:grabbing}
.lc-stage:focus-visible{outline:3px solid var(--gold);outline-offset:12px}
.lc-lift,.lc-breath{position:absolute;inset:0;transform-style:preserve-3d}
.lc-breath{transition:transform 4s cubic-bezier(.45,0,.55,1)}
.lc-breath.in{transform:scale(1.08)}
/* the breathing glow: behind the card (stage.js), a soft pink-to-sky ring that shows all round the card's edges */
.lc-halo{position:absolute;inset:-13%;pointer-events:none;opacity:0;transition:opacity 4s ease,transform 4s cubic-bezier(.45,0,.55,1);will-change:opacity,transform;
  background:radial-gradient(closest-side,rgba(249,168,248,.62) 0 72%,rgba(86,216,246,.36) 86%,transparent)}
.lc-halo.in{opacity:1;transform:scale(1.08)}
.lc-floor{position:absolute;left:10%;right:10%;bottom:-34px;height:26px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);will-change:transform}
.lc-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* The card fronts already carry their own printed rounded border. Keeping the
   two faces coplanar gives the flip a clean, single edge instead of a synthetic
   perimeter that can split into bright corner artifacts on mobile GPUs. */
.lc-face{position:absolute;inset:0;border-radius:5.75% / calc(5.75% * var(--ar,.716));outline:2px solid transparent}
.lc-face{overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:transparent} /* v0.3: no navy behind the picture: nothing dark can show at a corner */
@media (forced-colors:active){ .lc-face{outline:0} }
.lc-front{transform:translateZ(0)}
.lc-backface{transform:rotateY(180deg)}
.lc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.lc-anim{opacity:0;transition:opacity .35s ease}
.lc-anim.on{opacity:1}
.lc-holo{position:absolute;inset:-60%;pointer-events:none;mix-blend-mode:color-dodge;opacity:.08;will-change:transform,opacity;
  background:linear-gradient(115deg,transparent 30%,rgba(86,216,246,.55) 40%,rgba(249,168,248,.55) 46%,rgba(255,236,150,.5) 52%,rgba(196,122,246,.5) 58%,transparent 68%)}
.lc-glare{position:absolute;inset:-50%;pointer-events:none;mix-blend-mode:soft-light;will-change:transform;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.6),rgba(255,255,255,0) 22%)}
.lc-shade{position:absolute;inset:0;border-radius:inherit;background:#0A0C2A;opacity:0;pointer-events:none;will-change:opacity}
/* 3 Oct 2026 (v0.7): Safari on iPad does not clip a turned face's square layers (the shade above, the foil) to its rounded
   corner, so a dark square corner showed while turning; the mask makes Safari clip everything inside the face */
.lc-face{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.lc-flash{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,.4) 34%,transparent 70%)}
.lc-shine{position:absolute;inset:-20%;transform:translateX(-120%);pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%)}
.lc-stage.r4 .lc-front{box-shadow:0 0 30px -4px rgba(255,140,210,.6)}
/* Lite ("Smoother on older devices", js/lite.js, 3 Oct 2026): what an older iPad's GPU pays for on every frame goes, the
   card stays. It uses the flat front/back flip with no synthetic side mesh or blend modes; the foil 1.8 x 1.68 and the glare 1.5 times the card instead of 2.2
   and 2 (the same band and spot, drawn plainly). stage.js moves the foil by up to 22% of its width and 20% of its height,
   so it reaches 40% and 34% past the card: any smaller and a tilted card shows the band's straight end inside the card
   (the glare's spot fades out before its edge, so 1.5 is enough there). No will-change on layers that only move now and
   then; no blurred glows; sparks without star masks (a clip-path is an offscreen pass for every spark); and while the
   card turns, the still instead of the moving close-up (stage.js sets .moving), which fades back when it rests. */
.lc-stage.lite .lc-holo{inset:-34% -40%;mix-blend-mode:normal;
  background:linear-gradient(115deg,transparent 29.5%,rgba(150,236,255,.34) 39.7%,rgba(255,200,250,.36) 46.6%,rgba(255,244,190,.34) 53.4%,rgba(214,176,255,.32) 60.3%,transparent 70.5%)}
.lc-stage.lite .lc-glare{inset:-25%;mix-blend-mode:normal;opacity:.4;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),rgba(255,255,255,0) 29%)}
/* Safari, iPhone and iPad (WebKit only: -apple-system-body is a WebKit font keyword) draw the full look's colour-dodge
   foil far stronger than Chrome does (the same layer at the same opacity changes the card about 6 times as much in the
   WebKit test browser), so the plainly drawn lite foil there is more saturated, or a lite card would look flat next to
   the full one. Chrome and Android keep the softer band, which matches their full look. */
@supports (font:-apple-system-body){
  .lc-stage.lite .lc-holo{background:linear-gradient(115deg,transparent 29.5%,rgba(86,216,246,.85) 39.7%,rgba(249,168,248,.85) 46.6%,rgba(255,236,150,.8) 53.4%,rgba(196,122,246,.8) 60.3%,transparent 70.5%)}
}
.lc-stage.lite .lc-halo{will-change:auto}
.lc-stage.lite.r4 .lc-front{box-shadow:0 0 0 2px rgba(255,140,210,.5)}
.lc-stage.lite .lc-spark{clip-path:none;border-radius:50% 0;will-change:auto}
.lc-stage.lite .lc-ripple{box-shadow:none;will-change:auto}
.lc-stage.lite.moving:not(.missing-still) .lc-anim.on{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
/* While a card is open its screen covers the screen under it (Home's floating hello card and its gleam, the book's cover;
   main.js makes that screen inert, the rule at the top hides it), so that screen pauses its endless animations: nothing
   visible changes. The sky (.app-sky) shows behind the card; it rests under every open card (app.css, plan 2.3), and with
   a lite card anywhere its planets stand still and no shooting star crosses (as in calm motion), about 1.3 ms less
   compositing a frame. */
.layer[inert] *,.layer[inert] *::before,.layer[inert] *::after{animation-play-state:paused!important}
body:has(.lc-stage.lite) .app-sky .planet{animation-play-state:paused}
body:has(.lc-stage.lite) .app-sky .shoot{visibility:hidden}
.lc-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:5}
/* sparks and ripples get their own layer only while they fly (their animations give it them): 48 idle layers fewer */
.lc-spark{position:absolute;left:0;top:0;width:12px;height:12px;opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.lc-ripple{position:absolute;left:0;top:0;width:180px;height:180px;border-radius:50%;opacity:0;border:2px solid rgba(255,240,252,.95);box-shadow:0 0 16px rgba(249,168,248,.9)}
.lc-ripple.gold{border:3px solid rgba(255,230,160,.95);box-shadow:0 0 18px rgba(255,200,240,.8)}
.lc-found{position:absolute;left:50%;bottom:30px;z-index:6;width:max-content;max-width:calc(100% - 24px);text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(1.5rem,7vw,2.2rem);line-height:1.1;color:var(--gold);
  background:rgba(14,16,48,.82);border:1.5px solid rgba(242,193,78,.7);border-radius:999px;padding:6px 26px 8px;box-shadow:0 12px 30px -8px rgba(0,0,0,.7),0 0 24px -6px rgba(242,193,78,.6);
  opacity:0;transform:translate(-50%,12px) scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.lc-found.show{opacity:1;transform:translate(-50%,0)}
.lc-found:empty{display:none}
/* the card's words: the dimming fades in as the sheet rises; closed (card.js), it is .sheet-out, already gone for taps
   and keys while it slides away and the dimming lifts */
.sheet,.sheet-out{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,10,28,.55);touch-action:pan-y;padding:0;
  animation:sheetDim var(--t-in) var(--ease)}
.sheet-out{pointer-events:none}
@keyframes sheetDim{from{opacity:0}}
.sheet-box{position:relative;width:min(100%,580px);max-height:84dvh;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#2E3278,#1C2052);border-radius:26px 26px 0 0;padding:20px 20px calc(var(--sb) + 24px);box-shadow:0 -20px 50px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:10px;animation:sheetUp var(--t-in) var(--ease)} /* (the app's one arriving motion: app.css --t-in, --ease) */
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-close{position:absolute;top:10px;right:10px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);display:grid;place-items:center;cursor:pointer}
.sheet-close .ic{width:22px;height:22px}
.sheet-close,.chip{-webkit-tap-highlight-color:transparent} /* (pressed: ui.js pressFeedback, as every button) */
@supports not (scale:1){.sheet-close,.chip{transition:transform .15s ease}.sheet-close:active,.chip:active{transform:scale(.94)}}
.sheet-name{font-family:var(--hand);font-weight:700;font-size:2.2rem;line-height:1;padding-right:56px}
.sheet-type{font:700 1rem var(--sans);color:var(--moon-soft)}
.sheet-h{font-family:var(--serif);font-size:1.7rem;color:var(--gold);margin-top:6px}
.sheet-line{font:800 1.4rem/1.35 var(--sans)}
.sheet-sub{font:italic 600 1.05rem var(--sans);color:var(--moon-soft)}
.sheet-l{font:800 .95rem var(--sans);color:var(--moon-soft);letter-spacing:.04em;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(245,241,255,.3);background:rgba(255,255,255,.08);color:var(--moon);font:800 1.1rem var(--sans);cursor:pointer}
.chip .ic{width:16px;height:16px;color:var(--gold)}
.chip.locked{opacity:.8;border-style:dashed}
:is(.sheet,.sheet-out) .btn-gold{align-self:flex-start;min-height:56px;font-size:1.1rem;margin-top:6px}
.try-card{display:block;width:min(46vw,220px);aspect-ratio:.716;object-fit:cover;border-radius:12px;margin:8px auto;box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.try-h{font-family:var(--serif);font-size:2rem;color:var(--gold);text-align:center}
.try-line{font:800 1.6rem/1.3 var(--sans);text-align:center}
/* short phones: a little less height for the name and the buttons */
@media (max-height:700px){
  .kbtn{min-height:64px}
  .lc-name{font-size:1.85rem}
  .lc-top{min-height:60px}
}
/* Narrow phones: keep the normal type size and wrap at spaces into balanced rows.
   Five visible controls become 3+2; an optional sixth Play control becomes 3+3. */
@media (max-width:359px){
  .lc-ctrl{--ctrl-gap:4px;padding:5px;width:calc(100% - 12px - var(--sl) - var(--sr))}
  .lc-ctrl > .kbtn{flex-basis:calc((100% - var(--ctrl-gap) - var(--ctrl-gap)) / 3)}
  .kbtn{padding:7px 1px;border-radius:16px}
  .kbtn .ic{width:24px;height:24px}
  .lc{--arrow:60px}
}
/* Large text uses the same count-independent wrapping, without shrinking labels. */
@media (max-width:600px){
  /* Six visible actions need two balanced rows to retain the app's child-size
     touch targets. A hidden Spin control does not create an empty slot. */
  .lc-ctrl:has(> .kbtn:nth-child(6)):not(:has(> .kbtn[hidden])) > .kbtn{flex-basis:calc((100% - var(--ctrl-gap) - var(--ctrl-gap)) / 3)}
  :root[data-ts="125"] .lc-ctrl > .kbtn,:root[data-ts="150"] .lc-ctrl > .kbtn{flex-basis:calc((100% - var(--ctrl-gap) - var(--ctrl-gap)) / 3)}
  :root[data-ts="125"] .kbtn,:root[data-ts="150"] .kbtn{font-size:.9rem}
}
/* An iPad (either way round) or a computer: the arrows beside the card at the screen's edges, a wider sliver of each
   neighbour, a bigger card, the buttons' icon beside the word */
@media (min-width:700px) and (min-height:561px){
  .lc{--sliver:40px;--agap:14px;--side:calc(var(--sliver) + var(--agap) + var(--arrow) + 36px);--cap:600px;--vpad:30px}
  .lc-top{padding-left:calc(var(--sl) + var(--sliver) + var(--agap))} /* Back above the left arrow, clear of the sliver */
  .lc-side{grid-row:2;margin-left:calc(var(--sl) + var(--sliver) + var(--agap))}
  .lc-side.next{grid-row:2;margin-left:0;margin-right:calc(var(--sr) + var(--sliver) + var(--agap))}
  .lc-title{grid-column:1/-1;padding-top:4px}
  .lc-name{font-size:2.4rem}
  .lc-sub{min-height:1.35em}
  .lc-type,.lc-hint{font-size:1.06rem}
  .lc-guide{font-size:1.18rem}
  .lc-peek-card .tile-lock{display:grid}
  .lc-ctrl{--ctrl-gap:8px;padding:8px;border-radius:30px;margin-top:10px;width:min(calc(100% - 48px - var(--sl) - var(--sr)),900px)}
  .kbtn{flex-direction:row;gap:9px;min-height:64px;padding:8px 8px;border-radius:22px;font-size:1.02rem;white-space:nowrap}
  .kbtn .ic{width:28px;height:28px}
}
/* an iPad held upright: the buttons are narrower, so the icon goes back above the word (every word on one line) */
@media (min-width:700px) and (max-width:999px) and (min-height:561px){
  .kbtn{flex-direction:column;gap:5px;min-height:78px;font-size:1rem;white-space:normal}
}
/* Reserve a real header row in landscape too: Back, the tour and the upright hint
   must not cover the original printed card frame or its words. */
@media (orientation:landscape) and (min-height:561px){
  .lc-top{grid-row:1;align-self:start}
}
/* A phone held sideways (in bed): the card and its arrows on the left, the name and buttons in a panel on the right
   (only the panel scrolls if a large text size makes it too tall). Back sits over the card's column, top left. */
@media (orientation:landscape) and (max-height:560px){
  /* no sliver here: the card's column ends beside the panel, not at the screen's edge, and a card cut off in the middle
     of the screen looks broken; the neighbours wait just out of sight and slide in from the column's edges */
  .lc{--sliver:0px;--peek-at:-28px;--arrow:60px;--agap:10px;--side:calc(var(--sliver) + var(--agap) + var(--arrow) + 8px);--vpad:20px;--lean:1.06;--cap:380px;--cmin:150px;
    grid-template-columns:minmax(0,1fr) minmax(236px,min(40%,340px));grid-template-rows:auto minmax(0,1fr);
    padding:calc(var(--st) + 6px) 0 calc(var(--sb) + 6px)}
  .lc.scrolls{overflow:hidden;touch-action:none}
  .lc-top{grid-area:1/1/2/-1;align-self:start;min-height:60px;padding-left:calc(var(--sl) + var(--sliver) + var(--agap))}
  .lc-wrap{grid-area:2/1;margin-left:var(--sl);padding:8px 0 12px}
  .lc-side,.lc-side.next{grid-area:2/1;align-self:center}
  .lc-side.prev{margin-left:calc(var(--sl) + var(--sliver) + var(--agap))}
  .lc-side.next{margin-right:calc(var(--sliver) + var(--agap))}
  .lc-panel{grid-area:2/2;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:4px calc(var(--sr) + 12px) 4px 4px}
  .lc-panel > :first-child{margin-top:auto}
  .lc-panel > :last-child{margin-bottom:auto}
  .lc-title{padding:0 4px 4px}
  .lc-name{font-size:1.85rem}
  .lc-sub{min-height:2.5em}
  .lc-ctrl{width:100%;margin:8px 0 0}
  .lc-ctrl > .kbtn{flex-basis:calc((100% - var(--ctrl-gap) - var(--ctrl-gap)) / 3)}
  .kbtn{min-height:64px;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){ .sheet,.sheet-out,.sheet-box{animation:none}.lc-breath{transition:none}.lc-breath.in,.lc-halo.in{transform:none}.lc-spark,.lc-ripple{display:none}.lc-peek-card,.lc-side,.lc-hint,.lc-sub > *{transition:none}.lc-peek.wiggle .tile-lock,.lc.nudge .lc-side .ic,.lc.nudge .lc-side::after,.lc.arrive .lc-aura,.lc-hint::before,.lc-hint::after{animation:none!important} }
.calm .sheet,.calm .sheet-out,.calm .sheet-box,html.reduce .sheet,html.reduce .sheet-out{animation:none}
.calm .lc-breath{transition:none}
.calm .lc-breath.in,.calm .lc-halo.in{transform:none}
.calm .lc-peek-card,.calm .lc-side,.calm .lc-hint,.calm .lc-sub > *{transition:none}
.calm .lc-peek.wiggle .tile-lock,.calm .lc.nudge .lc-side .ic,.calm .lc.nudge .lc-side::after,.calm .lc.arrive .lc-aura,.calm .lc-hint::before,.calm .lc-hint::after{animation:none!important}

/* Series 2 fronts are complete approved artwork, including their own printed
   frame, highlights, typography, and lower copy.  Keep the stage coplanar and
   remove every synthetic face treatment so it is displayed byte-for-byte in
   appearance as the archived original.  Flash remains available for a card
   reveal; it does not rest over the artwork. */
.lc-stage.series2-metal .lc-front,.lc-stage.series2-metal .lc-backface{box-shadow:none}
.lc-stage.series2-metal .lc-holo,.lc-stage.series2-metal .lc-glare{display:none}
.lc-stage.series2-metal .lc-floor{background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.2) 56%,transparent)}

/* Picture recovery needs the screen's natural height, not the missing artwork's
   short box. Keep Back and Retry first; the full guidance and Read stay reachable
   by ordinary page scrolling, including on a sideways phone with larger text. */
.lc.picture-help{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(min-content,1fr) auto auto;
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.lc.picture-help .lc-wrap{grid-area:2/1/3/-1;align-self:stretch;margin-left:0;padding:12px 0 18px;place-items:start center}
.lc.picture-help .lc-slot{position:absolute;visibility:hidden;pointer-events:none}
.lc.picture-help .lc-picture-feedback{grid-area:1/1;position:relative;left:auto;top:auto;transform:none;max-height:none;overflow:visible}
.lc.picture-help .lc-panel{display:contents}
.lc.picture-help .lc-title{grid-area:3/2;padding:6px 8px 2px}
.lc.picture-help .lc-side{grid-area:3/1;margin-left:calc(var(--sl) + 14px)}
.lc.picture-help .lc-side.next{grid-area:3/3;margin-left:0;margin-right:calc(var(--sr) + 14px)}
.lc.picture-help .lc-ctrl{grid-area:4/1/5/-1;width:min(calc(100% - 20px - var(--sl) - var(--sr)),780px);margin:8px 0 calc(var(--sb) + 10px)}
/* Rotating cannot reveal a missing picture; keep that optional hint out of the recovery header. */
.lc.picture-help .lc-rotate-hint{display:none}