/* Magicians Keep: the Library, the third story of the tower. Every lesson is a book on the shelf. */
.nav .here{opacity:1;text-decoration:underline;text-decoration-color:var(--glow);text-underline-offset:6px}
/* keep the page the same width when a popup hides the scrollbar */
html{scrollbar-gutter:stable}
.chip{display:inline-block;padding:6px 12px;background:rgba(8,8,15,.55);border:1px solid rgba(236,227,207,.22);border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.btn-brass{background:linear-gradient(180deg,#f3dc9c,#c99a48 55%,#a87a32);color:#2b1d0c;border:1px solid rgba(90,60,20,.6);box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,250,220,.7);text-shadow:0 1px 0 rgba(255,245,210,.5)}
.btn-brass:hover{filter:brightness(1.08);transform:translateY(-1px)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===== The first picture: stepping off the stair into the library ===== */
.entry{position:relative;z-index:1;min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);display:grid;align-items:end;padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(44px,9vh,96px);overflow:hidden;isolation:isolate}
.entry picture,.entry picture img{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.entry picture img{object-fit:cover;object-position:62% 50%;max-width:none;animation:stepIn 2.8s var(--ease-out) both}
@media (max-width:720px){html .entry picture img{object-position:62% 50%}}   /* the Library keeps its cropped phone picture, framed as before */
@keyframes stepIn{from{transform:scale(1.07)}to{transform:none}}
.entry::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(to top,rgba(14,16,22,.95) 0%,rgba(14,16,22,.6) 30%,rgba(14,16,22,0) 60%),
  linear-gradient(to right,rgba(14,16,22,.84) 0%,rgba(14,16,22,.4) 38%,rgba(14,16,22,0) 62%)}
/* the glow rising off the open book on the reading stand */
.entry::after{content:"";position:absolute;left:50%;top:18%;width:40%;height:62%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,200,120,.16),rgba(255,200,120,0));animation:bookglow 6s ease-in-out -2s infinite}
@keyframes bookglow{0%,100%{opacity:.6}40%{opacity:1}60%{opacity:.78}}
/* the words hold nothing to press, and a plane behind them can still be picked up */
.entry-copy{position:relative;z-index:2;max-width:640px;pointer-events:none;text-shadow:var(--tshadow);animation:rise 1.1s var(--ease-out) .25s both}
.entry .chip{margin-bottom:20px}
.entry h1{font-size:clamp(3rem,6.6vw,6.2rem);max-width:11ch}
.entry .sub{margin-top:20px;max-width:36ch;font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.5}

/* two paper airplanes glide about: tap one and it loops round the room, lands, and unfolds into a note */
/* no layer of its own: the planes pass behind the words, but an unfolded note comes in front of them */
.planes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plane{position:absolute;left:var(--x);top:var(--y);width:60px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;transition:opacity .35s var(--ease-out),scale .35s var(--ease-out);-webkit-tap-highlight-color:transparent}
.plane-glide{display:block;animation:glide var(--dur,9s) ease-in-out var(--del,0s) infinite}
.plane-fly{display:block}
.plane svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,214,150,.18))}
@keyframes glide{
  0%{transform:translate(0,0) rotate(-3deg)}
  25%{transform:translate(26px,-12px) rotate(3deg)}
  50%{transform:translate(44px,4px) rotate(7deg)}
  75%{transform:translate(18px,14px) rotate(-1deg)}
  100%{transform:translate(0,0) rotate(-3deg)}}
.plane{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.plane:hover svg{filter:drop-shadow(0 10px 8px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,214,150,.4)) brightness(1.08)}
.plane.away{opacity:0;transition:none}
.plane.away .plane-glide{animation-play-state:paused}
/* a plane in your hand, or thrown, flies over the whole window */
.sky{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.flyer{position:absolute;left:0;top:0;width:60px;will-change:transform}
.flyer svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 12px 10px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(255,214,150,.25))}
.plane.flying .plane-glide,.plane.landed .plane-glide{animation-play-state:paused}
.plane.landed{opacity:0;scale:.3}
.plane-note{position:absolute;left:var(--x);top:calc(var(--y) + 46px);z-index:3;width:min(250px,72vw);padding:16px 18px 18px;border-radius:3px;pointer-events:none;cursor:pointer;
  color:#3a2410;font-style:italic;font-size:1.02rem;line-height:1.45;text-shadow:none;
  background:linear-gradient(90deg,rgba(90,60,30,0) 49.6%,rgba(90,60,30,.18) 50%,rgba(90,60,30,0) 50.6%),linear-gradient(28deg,rgba(90,60,30,0) 49.7%,rgba(90,60,30,.12) 50%,rgba(90,60,30,0) 50.4%),radial-gradient(120% 90% at 30% 20%,#fbf3de,#ecdfc2 70%,#ddc99c);
  box-shadow:0 18px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,90,50,.3);
  opacity:0;transform:rotate(-14deg) scale(.25);transform-origin:12% 0;transition:opacity .3s var(--ease-out),transform .45s cubic-bezier(.3,1.4,.5,1)}
.plane-note.right{left:auto;right:calc(100% - var(--x) - 60px);transform-origin:88% 0}
.plane-note.show{opacity:1;transform:rotate(-2deg) scale(1);pointer-events:auto}
.plane-note .pn-quote{display:block;font-style:italic}
.plane-note .pn-by{display:block;margin-top:8px;text-align:right;font-family:var(--f-display);font-style:normal;font-size:1.15rem;color:#7a1f18}
.plane-note.right.show{transform:rotate(2deg) scale(1)}
.plane-note.pn-secret{z-index:4}
@media (max-width:720px){.plane,.flyer{width:50px}.plane-note{top:calc(var(--y) + 38px);font-size:.96rem}.plane-note.right{right:calc(100% - var(--x) - 50px)}}

/* ===== The room around the bookcase ===== */
.wall{position:relative;z-index:1;padding-bottom:clamp(40px,6vw,80px);clip-path:inset(0)}
.wall::before{content:"";position:fixed;inset:-4%;z-index:-1;background:url('../library/library-blur.jpg') 60% 40%/cover no-repeat}
.wall::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(14,16,24,.35) 0%,rgba(10,11,17,.86) 100%)}
.wall-fade{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:0;pointer-events:none;background:linear-gradient(rgba(23,27,36,0),var(--canvas))}

/* the librarian's desk: subjects, search, and sorting, held under the menu while you browse */
.counter{position:sticky;top:var(--nav-h);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;padding:12px var(--gutter);background:rgba(20,23,32,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:opacity .4s var(--ease-out),visibility 0s linear .4s}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:baseline;flex:none;gap:8px;padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font:inherit;font-weight:700;font-size:.98rem;line-height:1.2;cursor:pointer;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.pill span{font-family:var(--f-mono);font-weight:400;font-size:.8rem;color:var(--text-secondary)}
.pill:hover{border-color:var(--text-primary)}
.pill[aria-pressed="true"]{border-color:var(--glow);background:rgba(227,168,90,.12);color:#f3d9a8}
.tools{display:flex;align-items:center;gap:10px}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:14px;width:16px;height:16px;color:var(--text-secondary);pointer-events:none}
.search input{width:clamp(190px,22vw,290px);padding:.6em 1em .6em 2.5em;border-radius:999px;border:1px solid var(--line-strong);background:rgba(14,16,22,.6);color:var(--text-primary);font-size:1rem;transition:border-color .3s var(--ease-out)}
.search input::placeholder{color:#8a8578}
.search input:focus{outline:none;border-color:var(--accent-bright)}
.sort select{appearance:none;padding:.6em 2.4em .6em 1em;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-primary);font-size:.95rem;cursor:pointer;background-color:rgba(14,16,22,.6);
  background-image:linear-gradient(45deg,transparent 50%,var(--glow) 50%),linear-gradient(135deg,var(--glow) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.sort select option{background:#1c2130;color:var(--text-primary)}
.sort select:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
@media (pointer:coarse){.pill,.search input,.sort select{min-height:44px}}
@media (max-width:760px){
  .counter{gap:8px;padding:10px 12px}
  .tabs{width:100%}
  .tools{width:100%}
  .search{flex:1;min-width:0}
  .search input{width:100%}
  .pill{padding:.5em .85em;font-size:.92rem}
}
/* the smallest phones: a compact sort menu so the search box keeps its full hint */
@media (max-width:380px){
  .tools{gap:6px}
  .sort select{font-size:.86rem;padding:.6em 1.55em .6em .6em;background-position:calc(100% - 13px) 55%,calc(100% - 7px) 55%}
  .search svg{left:11px}
  .search input{padding-left:2.1em;padding-right:.6em}
}

/* members: a note about the ribbons */
.yours{max-width:1100px;margin:26px auto 0;padding:0 var(--gutter);text-align:center;font-style:italic;color:#f1e3c4;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.yours[hidden]{display:none}
.gifting{position:relative;z-index:1;max-width:760px;margin:26px auto 0;padding:0 var(--gutter);text-align:center;font-size:1rem;color:var(--text-secondary)}
.gifting a{color:var(--glow);text-underline-offset:4px;white-space:nowrap}
.gifting a:hover{color:#f3d9a8}
.yours::before{content:"";display:inline-block;width:9px;height:18px;margin-right:10px;vertical-align:-3px;background:linear-gradient(#d04236,#8f241d);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}

/* ===== The bookcase ===== */
.case{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:clamp(40px,5vw,72px) var(--gutter) 0;scroll-margin-top:calc(var(--nav-h) + 56px)}
.crown{position:relative;z-index:3;width:calc(100% + 28px);margin:0 -14px -2px;aspect-ratio:1600/460;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.crown img{position:absolute;inset:0;width:100%;height:100%}
.crown-text{position:absolute;left:12%;right:12%;top:41%;bottom:9%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.crown-text .mono{color:#e2c48d;opacity:.9;font-size:clamp(.62rem,1.1vw,.82rem)}
.crown-text h2{margin-top:2px;font-size:clamp(1.9rem,5vw,3.6rem);color:#f2cf82;background:linear-gradient(180deg,#fbe6b0 0%,#e8b85c 55%,#b8822e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.crown-lede{margin-top:6px;max-width:52ch;font-style:italic;font-size:clamp(.8rem,1.2vw,1rem);line-height:1.35;color:#f1e3c4;text-shadow:0 1px 2px rgba(0,0,0,.85)}
@media (max-width:640px){.crown{width:calc(100% + 16px);margin:0 -8px -1px}.crown-lede{display:none}}

.bookcase{--post:clamp(12px,2vw,22px);position:relative;padding:0 var(--post) 0;border-radius:0 0 4px 4px;
  background:radial-gradient(ellipse 80% 55% at 50% 35%,rgba(255,180,90,.10),rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,rgba(0,0,0,.5)),#1a110a;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6)}
.bookcase::before,.bookcase::after{content:"";position:absolute;top:0;bottom:0;width:var(--post);z-index:2;background:linear-gradient(90deg,#160d07,#3a2616 30%,#4a321d 50%,#2c1c0f 78%,#140b06);box-shadow:0 0 14px rgba(0,0,0,.6)}
.bookcase::before{left:0}
.bookcase::after{right:0}
.plinth{position:relative;z-index:2;height:clamp(22px,3vw,34px);margin:0 -10px;border-radius:0 0 4px 4px;
  background:linear-gradient(rgba(255,215,160,.14),rgba(0,0,0,0) 30%,rgba(0,0,0,.55)),url('../shop/plank.jpg') -300px -40px/1400px auto;
  box-shadow:0 24px 40px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,225,180,.22)}

/* one shelf per subject, with a brass plate on the back panel */
.shelf{position:relative;padding-top:clamp(22px,3vw,34px)}
.plate{display:flex;justify-content:center;margin-bottom:12px}
.plate span{position:relative;display:inline-flex;align-items:baseline;gap:.6em;padding:.3em 1.4em .36em;border-radius:4px;color:#2b1d0c;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.15;
  background:linear-gradient(180deg,#f3dc9c 0%,#d6b062 38%,#b48a3e 62%,#d9b86c 100%);text-shadow:0 1px 0 rgba(255,245,210,.55);
  box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,250,220,.75),inset 0 -1px 0 rgba(90,60,20,.6),inset 0 0 0 1px rgba(120,82,30,.55)}
.plate span::before,.plate span::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1c4,#8a6426 70%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.plate span::before{left:7px}
.plate span::after{right:7px}
.plate small{font-family:var(--f-mono);font-weight:400;font-size:.72em;letter-spacing:.04em;color:#3a2509}
.row{position:relative;z-index:2;display:flex;align-items:flex-end;gap:2px;height:var(--rowh,250px);padding:0 4px;overflow-x:clip;overflow-y:visible}
.board{position:relative;z-index:1;height:clamp(14px,2vw,22px);margin:0 calc(-1 * var(--post));
  background:linear-gradient(rgba(255,215,160,.16),rgba(0,0,0,0) 35%,rgba(0,0,0,.6)),url('../shop/plank.jpg') -120px -60px/1400px auto;
  box-shadow:0 12px 18px -6px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,225,180,.25)}
.shelf + .shelf{margin-top:6px}

/* a lesson: a leather book, its title stamped in gold */
.book{position:relative;flex:none;display:block;width:var(--w);height:var(--h);padding:0;border:0;border-radius:3px 3px 2px 2px;background:center/100% 100% no-repeat;color:inherit;cursor:pointer;transform-origin:50% 100%;
  filter:drop-shadow(2px 0 3px rgba(0,0,0,.55));transition:transform .45s var(--ease-out),filter .45s var(--ease-out);-webkit-tap-highlight-color:transparent}
.book::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,220,160,.10),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25))}
.book.lesson:hover,.book.lesson:focus-visible{transform:translateY(-7%);filter:drop-shadow(2px 0 3px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,200,120,.45)) brightness(1.1)}
.book:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.lbl{position:absolute;left:17%;right:17%;top:15%;bottom:15%;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,rgba(8,5,2,.62),rgba(24,13,6,.78) 50%,rgba(8,5,2,.62));box-shadow:inset 0 0 0 1px rgba(226,190,120,.6),inset 0 0 0 3px rgba(0,0,0,.35),0 1px 0 rgba(255,220,160,.12)}
/* sideways: an apostrophe turns with the letters instead of standing upright out of line */
.ttl{writing-mode:vertical-rl;text-orientation:sideways;max-height:100%;font-family:var(--f-display);font-weight:700;font-size:var(--fs,15px);line-height:1.04;letter-spacing:.02em;text-align:center;white-space:nowrap;
  color:#f2cf82;background:linear-gradient(90deg,#fbe6b0,#e8b85c 55%,#b8822e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.85))}
.ttl.wrap{white-space:normal}
/* the little brass price tab on the shelf edge under each lesson */
.ptab{position:absolute;left:50%;top:100%;z-index:3;margin-top:3px;padding:.1em .5em .14em;border-radius:3px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font-family:var(--f-body);font-weight:700;font-size:.74rem;line-height:1.2;color:#3a2509;background:linear-gradient(180deg,#f3dc9c,#c99a48 60%,#a87a32);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,250,220,.7)}
@media (max-width:640px){.ptab{font-size:.66rem;padding:.08em .35em .1em}}
/* a lesson the member already owns: a red ribbon out of the top, in the middle of the spine */
.book.owned::before{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);width:9px;height:18px;margin-left:-4.5px;background:linear-gradient(90deg,#8f241d,#c8402f 45%,#8f241d);clip-path:polygon(0 0,50% 22%,100% 0,100% 100%,0 100%)}

/* the old books that fill out the shelves: not for sale, but they do wobble */
.book.old{cursor:default;filter:drop-shadow(2px 0 3px rgba(0,0,0,.55)) brightness(.5) saturate(.75)}
.book.old.nudged{animation:nudge .5s var(--ease-out)}
@keyframes nudge{0%,100%{transform:none}25%{transform:rotate(-4deg)}55%{transform:rotate(2.5deg)}80%{transform:rotate(-1deg)}}
.deco{flex:none;align-self:flex-end;height:var(--h);width:var(--w);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.deco img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6)) brightness(.8)}
.deco.lit{position:relative}
.deco.lit::before{content:"";position:absolute;left:-60%;right:-60%;top:-20%;bottom:10%;background:radial-gradient(ellipse 50% 45% at 50% 30%,rgba(255,196,110,.30),rgba(255,196,110,0) 72%);animation:candlelight 3.4s ease-in-out -1.2s infinite}
@keyframes candlelight{0%,100%{opacity:.75}30%{opacity:1}48%{opacity:.82}70%{opacity:.95}}

/* a book being read leaves its place on the shelf, then slides back in */
.row .book.lesson.out{opacity:0}

/* shelves arrive one row at a time as they scroll into view */
.row .book,.row .deco{opacity:0;translate:0 -8px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),transform .45s var(--ease-out),filter .45s var(--ease-out);transition-delay:calc(var(--i,0) * 24ms),calc(var(--i,0) * 24ms),0s,0s}
.row.in .book,.row.in .deco{opacity:1;translate:0 0}
.row.in.settled .book,.row.in.settled .deco{transition-delay:0s}
.more{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:22px 0 26px}

/* ===== A lesson's trailer, in the plate of its open book (the workings are in library.html) ===== */
/* the lesson's picture with a round play button over it, like the one on the bookshelf in Your Chamber */
.lib-play{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0;border:0;border-radius:3px;background:none;color:#f3d9a8;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lib-playbtn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid rgba(243,217,168,.85);background:rgba(20,12,6,.6);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.lib-playbtn svg{width:26px;height:26px;margin-left:3px}
.lib-play:hover .lib-playbtn{transform:scale(1.08);background:rgba(20,12,6,.8);border-color:#f3d9a8}
.lib-play-lbl{padding:.24em .8em .28em;border-radius:999px;background:rgba(20,12,6,.72);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;line-height:1.2;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.lib-play:focus-visible{outline:none}
/* a light ring in a dark halo, so it shows on any picture, the red ones too (like the bookshelf in Your Chamber) */
.lib-play:focus-visible .lib-playbtn{outline:2px solid #f3d9a8;outline-offset:2px;box-shadow:0 0 0 6px rgba(20,12,6,.8),0 6px 18px rgba(0,0,0,.45)}
/* the cover lets taps through, so nothing on the pages (play, the satchel, a link) answers until the book is fully open,
   and nothing once it starts to close */
dialog.tome:not(.opened) .pages{pointer-events:none}
/* a lesson's picture still loading is hidden and takes no room, so the last book's picture (and its size) never shows
   in this one; it fades in once loaded */
.plate-fig img.lib-wait{position:absolute;opacity:0;transition:none}
/* playing: a 16:9 screen laid over the plate. Its shape comes from its own width (the padding trick), never from the video,
   and the picture keeps its place underneath, so the plate is the same size before and after play in every browser */
.plate-fig.lib-on img{visibility:hidden}
.plate-fig.lib-on .lib-play{display:none}
.lib-stage{position:absolute;inset:8px;z-index:1;display:flex;align-items:center;justify-content:center;container-type:size}
.lib-screen{position:relative;flex:none;width:100%;border-radius:2px;overflow:hidden;background:#140d08;box-shadow:0 0 0 1px rgba(60,35,10,.55),0 8px 16px rgba(60,35,10,.3)}
.lib-screen::before{content:"";display:block;padding-top:56.25%}
.lib-screen video,.lib-screen iframe{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;border:0;background:#000}
/* as wide as the plate allows while the whole screen still fits its height (an older browser gets a safe smaller size) */
@supports (width:1cqh){.lib-screen{width:min(100%,177.78cqh)}}
@supports not (width:1cqh){.lib-screen{width:84%}}
@media (max-width:760px),(max-height:520px){.lib-playbtn{width:56px;height:56px}.lib-playbtn svg{width:23px;height:23px}}

/* on a phone the cover swings shut over the whole page straight away, so the close button goes at once (no tap
   highlight left behind either) instead of fading out on top of it */
dialog.tome .tome-close{-webkit-tap-highlight-color:transparent}
@media (max-width:760px) and (min-height:521px),(max-width:559px){dialog.tome.shut .tome-close{transition:none}}


/* Reduced motion: final states, nothing moves */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] .rv,.row .book,.row .deco{opacity:1;translate:0 0}
  .plane-glide{animation:none}
}