/* Home, the Papers library and Before you start. Built on the parts in mq.css. */

/* ---- Home (Home and HomePack boards): the paper on the left; on the right her last pack's cards to spin, or the waiting pack
   on its own. The habitat runs up behind the header: the page tucks under it and pads its words back down. */
body[data-route="home"] #app{max-width:none;padding:0}
.hm{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;margin-top:calc(-1 * var(--headerH));padding-top:var(--headerH);overflow:hidden;color:var(--ivory)}
.hm>.ui-scene{z-index:-3}
.hm>.ui-scene .ui-scene-img{object-position:center 40%}
.hm-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(100deg,rgba(5,8,23,.92) 0%,rgba(5,8,23,.72) 34%,rgba(5,8,23,.24) 62%,rgba(5,8,23,.5) 100%),linear-gradient(180deg,rgba(5,8,23,.6) 0%,rgba(5,8,23,0) 22%,rgba(5,8,23,.3) 68%,rgba(5,8,23,.96) 100%)}
.hm-main{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:30px;width:100%;max-width:1216px;margin:0 auto;padding:10px clamp(20px,3.5vw,48px) 44px}
.hm-copy{flex:999 1 460px;min-width:0;max-width:560px}
.hm-title{margin:0;font:700 clamp(42px,5.2vw,62px)/1.02 var(--fH);letter-spacing:-.012em;color:var(--ivory);text-wrap:balance}
.hm-title:focus{outline:0}
.hm-prog{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hm-parts{display:flex;gap:4px;flex:1 1 320px;max-width:420px}
.hm-parts i{flex:1 1 0;height:12px;border-radius:6px;background:rgba(255,250,240,.18)}
.hm-parts i.is-done{background:#4f9a5d}
.hm-parts i.is-now{background:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.hm-where{font:600 18px/1.35 var(--fD);color:#c9d2ee}
.hm-go{margin-top:26px;min-height:76px;display:inline-flex;align-items:center;gap:15px;padding:16px 44px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 26px/1.2 var(--fD);text-decoration:none;box-shadow:inset 0 1px #fff,0 5px 0 rgba(72,82,122,.5);transition:transform 110ms,box-shadow 150ms}
.hm-go:hover{box-shadow:inset 0 1px #fff,0 5px 0 rgba(72,82,122,.5),0 0 0 5px rgba(255,255,255,.28),0 16px 30px -16px rgba(0,0,0,.9)}
.hm-go:active{transform:translateY(2px)}
.hm-also{margin:20px 0 0}
.hm-also .mq-link{color:var(--gold2);font-size:17px}
/* The buddy lives in the world: the full rig from the motion board, four layers round the artwork, never the artwork changed */
.hm-stage{flex:1 1 380px;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:460px;perspective:1200px}
.hm-buddy-go{display:block;width:min(100%,400px);padding:0;border:0;border-radius:24px;background:none;cursor:pointer;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform 150ms ease-out}
.hm-rig{position:relative;display:block;width:100%;aspect-ratio:1;transform-origin:50% 94%;will-change:transform;animation:hm-breathe 4.6s cubic-bezier(.4,0,.5,1) infinite}
.hm-inner{position:absolute;inset:0;transform-origin:50% 90%;animation:hm-sway 7.3s ease-in-out infinite}
.hm-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hm-aura{filter:blur(24px) saturate(2.3) brightness(1.45);opacity:.45;animation:hm-aura 5.9s ease-in-out infinite}
.hm-body{filter:drop-shadow(0 30px 26px rgba(0,0,0,.62))}
.hm-rim{-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat;mix-blend-mode:screen;opacity:.7;background:linear-gradient(104deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.9) 48%,rgba(198,247,255,.45) 56%,rgba(255,255,255,0) 68%);background-size:280% 100%;animation:hm-rim 6.7s ease-in-out infinite}
@keyframes hm-breathe{0%,100%{transform:translateY(0) scale(1,1)}44%{transform:translateY(-15px) scale(.984,1.022)}72%{transform:translateY(-3px) scale(1.012,.989)}}
@keyframes hm-sway{0%,100%{transform:rotate(-1.2deg) translateX(-4px)}50%{transform:rotate(1.4deg) translateX(5px)}}
@keyframes hm-aura{0%,100%{opacity:.34;transform:scale(1.05)}50%{opacity:.58;transform:scale(1.1)}}
@keyframes hm-rim{0%,64%{background-position:150% 0}93%,100%{background-position:-150% 0}}
/* the shadow disagrees with the body, a beat behind */
.hm-shadow{width:250px;height:28px;margin-top:-14px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.68) 0%,rgba(0,0,0,0) 72%);animation:hm-shadow 4.6s cubic-bezier(.46,0,.5,1) .12s infinite}
.hm-shadow.is-pack{position:relative;width:210px;height:26px;margin-top:-6px}
@keyframes hm-shadow{0%,100%{transform:scaleX(1);opacity:.52}46%{transform:scaleX(.8);opacity:.24}}
/* five clocks, none of them multiples of each other, so the loop never shows */
.hm-mote{position:absolute;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--mote);box-shadow:0 0 14px var(--glow);pointer-events:none;animation:hm-mote 7.4s linear infinite}
.hm-mote.is-leaf{border-radius:50% 0}
.hm-mote:nth-of-type(1){left:20%;bottom:164px;width:13px;height:13px}
.hm-mote:nth-of-type(2){left:42%;bottom:128px;width:9px;height:9px;animation-duration:9.6s;animation-delay:-3.1s}
.hm-mote:nth-of-type(3){left:64%;bottom:190px;width:15px;height:15px;animation-duration:8.3s;animation-delay:-5.4s}
.hm-mote:nth-of-type(4){left:80%;bottom:142px;animation-duration:11.1s;animation-delay:-1.7s}
.hm-mote:nth-of-type(5){left:32%;bottom:206px;width:8px;height:8px;animation-duration:6.9s;animation-delay:-4.3s}
@keyframes hm-mote{0%{transform:translate(0,36px) rotate(0);opacity:0}22%{opacity:.95}100%{transform:translate(28px,-146px) rotate(200deg);opacity:0}}
/* A pack waiting stands where the buddy usually does (HomePack board): one button, the pack, its words and Open it */
.hm-stage.is-pack{justify-content:center;min-height:470px}
.hm-pack-go{position:relative;display:flex;flex-direction:column;align-items:center;padding:0;border:0;border-radius:24px;background:none;color:var(--ivory);cursor:pointer;transition:transform 150ms}
.hm-pack-go:hover{transform:translateY(-3px)}
.hm-glow{position:absolute;left:50%;top:42%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle at center,rgba(232,196,106,.34) 0%,rgba(232,196,106,.06) 46%,rgba(232,196,106,0) 68%);pointer-events:none;animation:hm-glow 9s ease-in-out infinite}
@keyframes hm-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.hm-pack{position:relative;width:236px;height:315px;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.85));animation:hm-bob 3.6s ease-in-out infinite}
@keyframes hm-bob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(2.5deg)}}
.hm-pack-t{position:relative;margin-top:18px;font:600 34px/1.1 var(--fH);text-align:center}
.hm-open{position:relative;margin-top:16px;min-height:66px;display:inline-flex;align-items:center;padding:0 40px;border:1px solid #e6bf66;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:var(--ink);font:700 24px/1.2 var(--fD);box-shadow:inset 0 2px #fff6d2,0 5px 0 rgba(154,107,41,.4)}
/* Her last pack, held like a hand (Home board, Jon 26 Oct): three 3D cards to spin, the rarest in the middle, one line under them */
.hm-hand{--hw:190px;flex:1 1 calc(var(--hw) * 2.9);min-width:0;min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.hm-fan{position:relative;width:calc(var(--hw) * 2.9);max-width:100%;height:calc(var(--hw) * 1.5);margin:0;padding:0;list-style:none}
.hm-card{position:absolute;left:50%;top:0;width:var(--hw);margin-left:calc(var(--hw) / -2);transform-origin:50% 110%}
.hm-card:nth-child(1){transform:translateX(-66%) translateY(7%) rotate(-11deg);z-index:1}
.hm-card:nth-child(2){transform:translateY(-4%);z-index:3}
.hm-card:nth-child(3){transform:translateX(66%) translateY(7%) rotate(11deg);z-index:2}
.hm-card:focus-within,.hm-card:has(.c3.is-spinning){z-index:4}
.hm-card .c3{--cw:100%}
.hm-card .c3-face{filter:drop-shadow(0 22px 26px rgba(0,0,0,.8))}
.hm-card .c3:focus-visible{outline:3px solid #ffd65c;outline-offset:6px}
.hm-next{margin:0;display:inline-flex;align-items:center;gap:8px;padding:8px 18px 8px 12px;border-radius:999px;background:rgba(5,8,23,.62);font:600 17px/1.3 var(--fD);color:#dfe4f5}
.hm-next b{font:800 20px/1 var(--fN);color:var(--gold2)}
.hm-next img{width:22px;height:auto;transform:rotate(-8deg)}
.hm-buddy-go:focus-visible,.hm-pack-go:focus-visible,.hm-go:focus-visible{outline:3px solid #ffd65c;outline-offset:6px}
@media (max-width:1279px){.hm-hand{--hw:150px}}
@media (max-width:1023px){
.hm-main{padding-top:16px}
.hm-main{padding-bottom:calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s5))}
.hm-scrim{background:linear-gradient(180deg,rgba(5,8,23,.8) 0%,rgba(5,8,23,.66) 34%,rgba(5,8,23,.36) 60%,rgba(5,8,23,.96) 100%)}
}
@media (max-width:639px){
.hm-main{gap:8px;align-items:stretch}
.hm-copy{flex-basis:100%}
.hm-title{font-size:36px}
.hm-go{width:100%;justify-content:center;min-height:68px;padding:14px 24px;font-size:24px}
.hm-stage{min-height:300px}
.hm-buddy-go{width:min(72vw,300px)}
.hm-shadow{width:190px}
.hm-pack{width:160px;height:214px}
.hm-glow{width:360px;height:360px;margin:-180px 0 0 -180px}
.hm-pack-t{font-size:28px}
.hm-hand{--hw:118px;min-height:0;gap:22px;padding-top:12px}
.hm-next{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
.hm-rig,.hm-inner,.hm-aura,.hm-rim,.hm-shadow,.hm-mote,.hm-pack,.hm-glow{animation:none}
.hm-buddy-go{transform:none}
.hm-pack-go:hover,.hm-go:active{transform:none}
}

/* ---- Before you start (BeforeStart board): a breath, not a lobby. The buddy's habitat behind the whole page, its own bar,
   then the title, the kind of work, the prize, how long and one big Start, all centred. */
body[data-route="start"] #app{max-width:none;padding:0}
.st{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;background:#050817;color:var(--ivory)}
.st>.ui-scene{z-index:-2;background:#050817}
.st>.ui-scene .ui-scene-img{object-position:center 38%}
.st>.ui-scene .ui-scene-img.is-in{opacity:.72}
.st-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.78) 0%,rgba(5,8,23,.26) 24%,rgba(5,8,23,.62) 60%,rgba(5,8,23,.95) 100%)}
.st-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:1180px;margin:0 auto;padding:20px var(--gut)}
.st-back{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:9px 16px;border-radius:12px;background:rgba(5,8,23,.58);color:var(--ivory);font:700 16px/1.2 var(--fD);text-decoration:none}
.st-back svg{width:20px;height:20px;color:var(--gold2);stroke-width:2.4}
.st-back:hover{background:rgba(5,8,23,.78)}
.st-stars{min-height:44px;background:rgba(5,8,23,.58);box-shadow:none}
.st-stars b{font-size:24px}
.st-main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut) 30px}
.st-h{margin:0;max-width:22ch;font:600 clamp(42px,5.4vw,64px)/1.03 var(--fH);letter-spacing:-.012em;text-wrap:balance}
.st-h:focus{outline:0}
.st-from{margin:14px 0 0;max-width:40ch;font:600 21px/1.35 var(--fD);color:var(--ivory);text-wrap:balance}
.st-kind{margin:10px 0 0;max-width:40ch;font:400 23px/1.35 var(--fD);color:#c9d2ee;text-wrap:balance}
.st-prize{margin:32px 0 0;display:inline-flex;align-items:center;gap:16px;padding:14px 22px;border-radius:999px;background:rgba(232,196,106,.14);box-shadow:inset 0 0 0 1.5px rgba(246,220,149,.5)}
.st-prize b{font:700 21px/1.3 var(--fD);color:var(--gold2)}
.st-prize-stars{flex:0 0 auto;display:flex;gap:5px}
.st-star{width:36px;height:36px;fill:rgba(246,220,149,.08);stroke:rgba(246,220,149,.6);stroke-width:1.6;stroke-linejoin:round}
.st-star.is-on{fill:var(--gold);stroke:none;filter:drop-shadow(0 0 12px rgba(232,196,106,.6))}
.st-info{margin:16px 0 0;font:400 19px/1.4 var(--fD);color:#a9b4dc}
.st-act{margin:36px 0 0}
.st-go{min-height:92px;display:inline-flex;align-items:center;justify-content:center;padding:0 74px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:600 34px/1.1 var(--fH);cursor:pointer;box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 22px 36px -18px rgba(0,0,0,.9);transition:transform 110ms,box-shadow 150ms}
.st-go:hover{box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 0 0 6px rgba(255,255,255,.24),0 20px 36px -18px rgba(0,0,0,.9)}
.st-go:active{transform:translateY(2px)}
.st-go:focus-visible{outline:3px solid #ffd65c;outline-offset:6px}
.st-in{animation:st-in 560ms cubic-bezier(.2,.95,.3,1) both}
.st-2{animation-delay:110ms}.st-3{animation-delay:210ms}.st-4{animation-delay:320ms}
@keyframes st-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:639px){
.st-from{font-size:18px}
.st-kind{font-size:20px}
.st-prize{margin-top:24px;padding:12px 18px;gap:12px;text-align:left}
.st-prize b{font-size:18px}
.st-star{width:28px;height:28px}
.st-go{min-height:80px;padding:0 56px;font-size:30px}
}
@media (prefers-reduced-motion:reduce){.st-in{animation:none}.st-go{transition:none}.st-go:active{transform:none}}

/* ---- Papers (QuestMap board): the hand of three, then the wall. One scene behind the top of the page, bright where the
   hand is and sinking into night where the wall sits, so there is no seam. The page tucks under the header like Home.
   The fixed layer behind every page takes the same night, so a short wall on a tall window leaves no band of lighter navy
   under it. */
body[data-route="library"]::before{background:#050817}
body[data-route="library"]::after{display:none}
body[data-route="library"] #app{max-width:none;padding:0}
.lb{position:relative;isolation:isolate;margin-top:calc(-1 * var(--headerH));padding:var(--headerH) 0 40px;background:#050817;color:var(--ivory);overflow:hidden}
.lb>.ui-scene{z-index:-2;bottom:auto;height:1180px;background:#050817}
.lb>.ui-scene .ui-scene-img{object-position:center 26%}
.lb>.ui-scene .ui-scene-img.is-in{opacity:.5}
.lb-scrim{position:absolute;left:0;right:0;top:0;height:1180px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.74) 0%,rgba(5,8,23,.28) 16%,rgba(5,8,23,.58) 34%,rgba(5,8,23,.88) 47%,rgba(5,8,23,.97) 60%,#050817 78%)}
/* The hand: three cards fanned -7/0/+7, dark, with a gold ring once a paper has stars. Dealt in from below. */
.lb-hand{display:flex;flex-direction:column;align-items:center;padding:26px var(--gut) 0;text-align:center}
.lb-hand-h{margin:0;font:700 34px/1.1 var(--fH);letter-spacing:-.01em}
.lb-hand-h:focus{outline:0}
.lb-hand-sub{margin:8px 0 0;font:400 16px/1.4 var(--fD);color:#a9b4dc}
.lb-hand-cards{margin:14px 0 0;padding:0;list-style:none;display:flex;align-items:flex-end;justify-content:center;gap:22px}
.lb-dealin{display:inline-flex;animation:lb-dealin 620ms cubic-bezier(.17,.84,.3,1) both}
@keyframes lb-dealin{from{transform:translateY(190px) rotate(var(--fr,0deg)) scale(.92);opacity:0}to{transform:translateY(0) rotate(0deg) scale(1);opacity:1}}
.lb-deal{display:flex;flex-direction:column;justify-content:space-between;width:150px;height:200px;padding:13px 14px;border:0;border-radius:12px;background:rgba(8,12,34,.88);box-shadow:inset 0 0 0 1.5px rgba(169,180,220,.35);color:var(--ivory);text-align:left;cursor:pointer;transform:rotate(var(--rot));transition:transform 180ms cubic-bezier(.25,1.3,.4,1),box-shadow 180ms}
.lb-deal.is-done{background:rgba(42,32,8,.86);box-shadow:inset 0 0 0 2px var(--gold)}
.lb-deal:hover,.lb-deal:focus-visible{transform:translateY(-12px) rotate(0deg) scale(1.04);box-shadow:0 24px 40px -18px rgba(0,0,0,.95),inset 0 0 0 2px var(--gold)}
.lb-deal:focus-visible{outline:3px solid #ffd65c;outline-offset:4px}
.lb-deal-chip{display:inline-flex;align-items:center;gap:7px;padding:2px 11px 2px 3px;border-radius:999px;background:var(--chip);font:700 12px/1.6 var(--fD)}
.lb-deal-dot{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:6px;background:var(--dot);font:700 11px/1 var(--fD);color:#fff}
.lb-deal-title{display:block;margin-top:11px;font:700 16px/1.22 var(--fD)}
.lb-deal-meta{display:block;margin-top:5px;font:400 12px/1.3 var(--fD);color:#a9b4dc}
.lb-deal-stars,.lb-paper-stars{display:flex;gap:3px}
/* The board's outline (.45) is under 3:1 on the dark card, so a little stronger (my call). */
.lb-star{fill:none;stroke:rgba(169,180,220,.6);stroke-width:1.8;stroke-linejoin:round}
.lb-star.is-on{fill:var(--gold);stroke:none}
.lb-deal-more{margin-top:16px;min-height:52px;display:inline-flex;align-items:center;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:600 17px/1.2 var(--fD);cursor:pointer;box-shadow:inset 0 1px #fff,0 4px 0 rgba(72,82,122,.5);transition:transform 110ms,box-shadow 140ms}
.lb-deal-more:hover{box-shadow:inset 0 1px #fff,0 4px 0 rgba(72,82,122,.5),0 0 0 5px rgba(255,255,255,.28)}
.lb-deal-more:active{transform:translateY(2px)}
/* Subject colours: the spine down a tile's edge, the subject word (lightened to stay legible on near-black), the hand's chip. */
[data-tint="English"]{--spine:#c8452a;--tint:#f2a28c;--dot:#8a2a10;--chip:rgba(138,42,16,.55)}
[data-tint="Maths"]{--spine:#2e86d6;--tint:#8fc8f5;--dot:#1a5e9e;--chip:rgba(26,94,158,.55)}
[data-tint="Chinese"]{--spine:#6b5bd6;--tint:#b3a8f5;--dot:#4335a0;--chip:rgba(67,53,160,.55)}
/* The wall: All papers and its count, the chips, three across, Show 24 more. */
.lb-wall{width:100%;max-width:1280px;margin:0 auto;padding:24px clamp(20px,3.75vw,48px) 0}
.lb-wall-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.lb-wall-h{margin:0;font:700 28px/1.2 var(--fH);letter-spacing:-.01em}
.lb-count{margin:0;font:400 16px/1.3 var(--fD);color:#a9b4dc}
.lb-count b{font-weight:700;color:var(--ivory)}
.lb-chips{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lb-chip{min-height:var(--tap);display:inline-flex;align-items:center;gap:8px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,250,240,.07);box-shadow:inset 0 0 0 1.5px rgba(169,180,220,.35);color:#c9d2ee;font:700 16px/1.2 var(--fD);cursor:pointer;transition:background 120ms}
.lb-chip:hover{background:rgba(255,250,240,.16)}
.lb-chip[aria-pressed="true"]{background:var(--gold);box-shadow:none;color:var(--ink)}
.lb-chip-n{font-size:13px;opacity:.7}
.lb-chip svg{width:17px;height:17px;stroke-width:2.6}
.lb-chips-rule{width:1px;height:30px;margin:0 6px;background:rgba(169,180,220,.3)}
/* Not done yet is green: as drawn when it is off, filled when it is on (my call: the board draws one state). */
.lb-chip.is-todo{background:rgba(126,208,140,.22);box-shadow:inset 0 0 0 1.5px #7ed08c;color:#bdefc7}
/* Done (one or the other with Not done yet) and the school picker (Jon, 25 Oct) */
.lb-chip.is-done-chip svg{width:17px;height:17px;color:var(--gold)}
.lb-chip.is-done-chip[aria-pressed="true"]{background:rgba(232,196,106,.22);box-shadow:inset 0 0 0 1.5px var(--gold);color:#f6dc95}
.lb-school{position:relative;display:inline-flex;align-items:center}
.lb-school select{appearance:none;-webkit-appearance:none;min-height:var(--tap);max-width:240px;padding:0 42px 0 18px;border:0;border-radius:999px;background:rgba(255,250,240,.07);box-shadow:inset 0 0 0 1.5px rgba(169,180,220,.35);color:#c9d2ee;font:700 16px/1.2 var(--fD);cursor:pointer;text-overflow:ellipsis}
.lb-school select:hover{background:rgba(255,250,240,.16)}
.lb-school select:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.lb-school select option{background:#0e1430;color:#fffaf0}
.lb-school>svg{position:absolute;right:14px;width:18px;height:18px;color:#c9d2ee;pointer-events:none}
.lb-chip.is-todo svg{width:19px;height:19px}
.lb-chip.is-todo[aria-pressed="true"]{background:#7ed08c;box-shadow:none;color:var(--ink)}
.lb-chip.is-todo .lb-chip-n{opacity:.75}
.lb-chip:focus-visible,.lb-paper:focus-visible,.lb-deal-more:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.lb-grid{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.lb-grid>li{display:flex;min-width:0}
/* A paper tile is a paper: a coloured subject spine down the edge, the school as its masthead, the exam's markings underneath. */
.lb-paper{position:relative;display:block;width:100%;padding:15px 17px 14px 21px;border:0;border-radius:12px;background:rgba(8,12,34,.86);box-shadow:inset 0 0 0 1.5px rgba(169,180,220,.26);color:var(--ivory);text-align:left;cursor:pointer;overflow:hidden;transition:transform 140ms cubic-bezier(.25,1.1,.4,1),box-shadow 140ms,background 140ms}
.lb-paper::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--spine)}
.lb-paper.is-done{background:rgba(42,32,8,.78);box-shadow:inset 0 0 0 2px rgba(232,196,106,.85)}
.lb-paper:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--gold),0 18px 30px -18px rgba(0,0,0,.95)}
.lb-paper-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lb-paper-name{flex:1 1 auto;min-width:0}
.lb-paper-title{display:block;font:700 17px/1.24 var(--fD);letter-spacing:-.004em}
.lb-paper-school{display:block;margin-top:5px;font:500 14px/1.3 var(--fD);color:#aeb9e0}
.lb-paper-stars{flex:0 0 auto;padding-top:2px}
.lb-paper-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;font:400 13px/1.3 var(--fD)}
.lb-paper-what{display:inline-flex;align-items:center;gap:10px;min-width:0;color:#7e8bbe}
.lb-paper-subj{font-weight:700;color:var(--tint)}
.lb-paper-sat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-paper-n{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;color:#93a0cf}
.lb-paper-best{color:var(--gold2)}
.lb-none{margin:24px 0 0;font:600 18px/1.4 var(--fD);color:#c9d2ee}
.lb-more-row{margin:18px 0 0;display:flex;justify-content:center}
@media (max-width:1023px){
.lb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb{padding-bottom:calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s6))}
}
@media (max-width:639px){
.lb-hand-cards{gap:10px}
.lb-deal{width:108px;height:164px;padding:10px}
.lb-deal-title{font-size:14px}
.lb-grid{grid-template-columns:minmax(0,1fr)}
.lb-chips-rule{display:none}
}
@media (prefers-reduced-motion:reduce){
.lb-dealin{animation:none}
.lb-deal,.lb-paper,.lb-deal-more,.lb-chip{transition:none}
.lb-deal:hover,.lb-deal:focus-visible{transform:rotate(var(--rot))}
.lb-paper:hover,.lb-deal-more:active{transform:none}
}

/* ---- Changing your buddy (the BuddyPicker board): its own page, in the habitat of whoever is in the middle. The monsters slide
   past as cut-outs; the one in the middle is full size and bright, the rest smaller and dimmer. */
body[data-route="buddy"] #app{max-width:none;padding:0}
.bp{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;background:#050817;color:var(--ivory)}
.bp>.ui-scene{z-index:-2;background:#050817}
.bp>.ui-scene .ui-scene-img{object-position:center 42%}
.bp>.ui-scene .ui-scene-img.is-in{opacity:.62}
.bp-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.86) 0%,rgba(5,8,23,.36) 24%,rgba(5,8,23,.62) 58%,#050817 100%)}
.bp-bar{width:100%;max-width:1180px;margin:0 auto;padding:20px clamp(20px,3.5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.bp-main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px clamp(20px,3.5vw,48px) 28px;text-align:center}
.bp-h{margin:0;font:700 clamp(34px,4vw,46px)/1.04 var(--fH);letter-spacing:-.012em}
.bp-h:focus{outline:0}
.bp-wrap{position:relative;width:100%;margin-top:14px}
.bp-stage{--k:1;position:relative;height:calc(420px * var(--k));perspective:1400px}
.bp-stage:focus-visible{outline:3px solid #ffd65c;outline-offset:-3px;border-radius:22px}
.bp-slide{position:absolute;left:50%;top:0;width:calc(300px * var(--k));height:calc(380px * var(--k));margin-left:calc(-150px * var(--k));display:flex;align-items:flex-end;justify-content:center;padding:0;border:0;background:none;cursor:pointer;transition:transform 300ms cubic-bezier(.25,1,.3,1),opacity 300ms,filter 300ms}
.bp-slide img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.bp-slide.is-center{cursor:default}
.bp-shadow{position:absolute;left:50%;bottom:14px;width:260px;height:30px;margin-left:-130px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.72),rgba(0,0,0,0) 72%);pointer-events:none}
.bp-arrow{position:absolute;top:50%;z-index:200;width:56px;height:78px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:12px;background:rgba(5,8,23,.68);box-shadow:inset 0 0 0 1px rgba(246,220,149,.4);color:var(--gold2);cursor:pointer;transform:translateY(-50%);transition:background 140ms,transform 110ms}
.bp-arrow.is-prev{left:clamp(8px,2vw,40px)}
.bp-arrow.is-next{right:clamp(8px,2vw,40px)}
.bp-arrow svg{width:28px;height:28px;stroke-width:2.6}
.bp-arrow:hover{background:rgba(5,8,23,.9)}
.bp-arrow:active{transform:translateY(-50%) scale(.94)}
.bp-arrow[aria-disabled="true"]{opacity:.4;cursor:default}
.bp-pick{display:flex;flex-direction:column;align-items:center}
.bp-name{margin:6px 0 0;font:600 clamp(34px,3.6vw,44px)/1.1 var(--fH);letter-spacing:-.01em;text-shadow:0 2px 16px rgba(5,8,23,.9)}
.bp-type{margin:8px 0 0;display:inline-flex;align-items:center;gap:10px;font:600 17px/1.3 var(--fD);color:#c9d2ee}
.bp-type .cb-dot{width:20px;height:20px}
.bp-go{margin-top:16px;min-height:86px;display:inline-flex;align-items:center;justify-content:center;padding:0 52px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 27px/1.2 var(--fD);letter-spacing:-.01em;text-decoration:none;cursor:pointer;box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 22px 36px -18px rgba(0,0,0,.9);transition:transform 110ms,box-shadow 150ms}
.bp-go:hover{box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 0 0 6px rgba(255,255,255,.28)}
.bp-go:active{transform:translateY(2px)}
.bp-here{margin:16px 0 0;min-height:86px;display:inline-flex;align-items:center;gap:13px;padding:0 44px;border-radius:999px;background:rgba(126,208,140,.16);box-shadow:inset 0 0 0 2px #7ed08c;color:#bdefc7;font:700 25px/1.2 var(--fD)}
.bp-here svg{width:28px;height:28px;stroke-width:3}
.bp-msg{margin:12px 0 0;font:700 16px/1.4 var(--fD);color:var(--gold2)}
.bp-msg:empty{display:none}
.bp-go:focus-visible,.bp-arrow:focus-visible{outline:3px solid #ffd65c;outline-offset:4px}
@media (max-width:639px){.bp-stage{--k:.68}.bp-arrow{width:48px;height:64px}.bp-go{width:100%;min-height:72px;padding:0 20px;font-size:22px}.bp-here{padding:0 24px;font-size:20px;min-height:72px}}
@media (prefers-reduced-motion:reduce){.bp-slide,.bp-arrow,.bp-go{transition:none}}