/* 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;align-items:center;min-height:64px;padding:0 calc(var(--sr) + 14px) 0 calc(var(--sl) + 14px);pointer-events:none}
.lc-top > *{pointer-events:auto}
/* 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-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{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:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;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)}
.kbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:72px;padding:8px 2px;border-radius:20px;cursor:pointer;text-align:center;overflow-wrap:anywhere;
  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's corner (3 Oct 2026). Every card picture (each frame family, card 000, the storybook cards, the card back) is
   a 290x405 card with corners of radius 16, so its corner is 5.52% of its width (5.3% to 5.7% in the made pictures,
   measured from their transparent corners). The edge layers and both faces round their corners at 5.75% of the width,
   a hair rounder than the roundest picture, so the picture covers every layer right into its corner and nothing behind it
   (the navy face, the pale edge layers) shows past it, at rest or at any angle. A fixed 16px was too small on a big card
   (an iPad's 520px card has 29px corners): a navy arc at rest, a pale sliver and a dark band while turning. The vertical
   radius is scaled by --ar so the corner stays a quarter circle.
   Each of these layers also has a 2px transparent outline. It paints nothing and moves nothing, but the browser makes the
   layer 2px bigger on every side to hold it, so the card's outline lies inside the layer, never on the layer's own edge,
   which iPhone and iPad draw without smoothing once it is turned in 3D (the stair steps on a spinning card's top edge).
   An outline, not a border: the faces keep the card's exact box, so the rarity glow (box-shadow) still starts right at
   the card's edge, and a background or ring set elsewhere (lite) needs nothing special.
   The edge layers sit half a pixel inside the faces, so their pale colour never rims a face seen straight on; turned,
   they still make the card's edge. A forced-colours screen (Windows High Contrast) would paint the outline, so it goes
   there. */
.lc-edge,.lc-face{position:absolute;inset:0;border-radius:5.75% / calc(5.75% * var(--ar,.716));outline:2px solid transparent}
.lc-edge{inset:1.5px;border-radius:7% / calc(7% * var(--ar,.716));background:linear-gradient(135deg,#F9E7FF,#BFEFFF 30%,#FFE7B0 55%,#F9B8E8 80%,#D8D0FF)} /* 3 Oct v0.3: further inside the corner, never peeks on a real iPad */
.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-edge,.lc-face{outline:0} }
.lc-front{transform:translateZ(3px)}
.lc-backface{transform:rotateY(180deg) translateZ(3px)}
.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. 3 edge layers instead of 9 (stage.js), in one pearl colour (padding-box: never under a transparent border,
   should the layers get one again); no 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-edge{background:#E8DDF4 padding-box}
.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 .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 (iPhone SE): the five buttons still in one row, a little smaller */
@media (max-width:359px){
  .lc-ctrl{gap:4px;padding:5px;width:calc(100% - 12px - var(--sl) - var(--sr))}
  .kbtn{font-size:.74rem;padding:7px 1px;border-radius:16px}
  .kbtn .ic{width:24px;height:24px}
  .lc{--arrow:60px}
}
/* Large and Largest text on a phone: the buttons go into two rows (three, then two), so every word fits */
@media (max-width:600px){
  :root[data-ts="125"] .lc-ctrl,:root[data-ts="150"] .lc-ctrl{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))}
  :root[data-ts="125"] .lc-ctrl > *,:root[data-ts="150"] .lc-ctrl > *{grid-column:span 2}
  :root[data-ts="125"] .lc-ctrl > :nth-last-child(-n+2),:root[data-ts="150"] .lc-ctrl > :nth-last-child(-n+2){grid-column:span 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{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}
}
/* sideways and tall enough (an iPad on its side, a computer): Back sits over the card's row, top left, so the card gets
   the whole height between the top and the name */
@media (orientation:landscape) and (min-height:561px){
  .lc-top{grid-row:2;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: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;align-self:start;min-height:60px;padding-left:calc(var(--sl) + var(--sliver) + var(--agap))}
  .lc-wrap{grid-area:1/1;margin-left:var(--sl);padding:8px 0 12px}
  .lc-side,.lc-side.next{grid-area:1/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:1/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;grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))}
  .lc-ctrl > *{grid-column:span 2}
  .lc-ctrl > :nth-last-child(-n+2){grid-column:span 3}
  .kbtn{min-height:60px;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 collectible finish: scaled to the saved 3 mm polished-metal proof. Layered side faces catch warm key light,
   the front and back sit at the measured extrusion, and a broad soft shadow makes the card feel lifted from the sky. */
.lc-stage.series2-metal .lc-edge{
  inset:auto;
  display:block;
  box-sizing:border-box;
  border-radius:3px;
  outline:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.10) 22%,rgba(0,0,0,.05) 62%,rgba(0,0,0,.38)),
    linear-gradient(135deg,var(--metal-glint,#ffefad),var(--metal-mid,#c79a45) 28%,var(--metal-edge,#9b7531) 68%,var(--metal-dark,#49391e));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.64),inset 0 -1px 0 rgba(0,0,0,.5)
}
.lc-stage.series2-metal .lc-front,.lc-stage.series2-metal .lc-backface{
  box-shadow:0 14px 22px -12px rgba(0,0,0,.76),inset 0 0 0 1px rgba(255,255,255,.68),inset 0 0 3px 2px rgba(24,20,15,.24)
}
.lc-stage.series2-metal .lc-glare{
  opacity:.58;
  mix-blend-mode:soft-light;
  background:linear-gradient(116deg,transparent 23%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.58) 46%,rgba(255,255,255,.08) 57%,transparent 70%),radial-gradient(circle at 50% 42%,rgba(255,255,255,.36),rgba(255,255,255,0) 24%)
}
.lc-stage.series2-metal .lc-floor{background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.2) 56%,transparent)}