/* The Library (src/library.js), built from the user's four mock-ups (design/camp/library/mockups/): the
   room; a line from Juno on the ivory card; the open book; Juno's pick of a record. On a desk
   (.lib.stage) every place, size, weight and colour below was measured on those mock-ups (1586 x 992,
   "design px"; how: design/camp/library/README.md): the room is scaled to cover the page and what opens
   over it is scaled to fit. The drawings (leaves, sprigs, icons) are traced from the mock-ups
   (assets/camp/library/ornaments.svg); the frames are the user's pictures as 9-slices. On a phone, or a
   window near square (.lib.stack, no mock-up), the same parts stack at screen size. */

/* ---- a scene page: no roof, no footer (src/page.js); the camp's sound button stays out of the way ---- */
.page.scene .page-roof,.page.scene .page-foot{display:none}
.page.scene .page-scroll{overflow:hidden}
.page.scene .page-body{position:absolute;inset:0;max-width:none;margin:0;padding:0;transform:none}

.lib{--lb-serif:"Crimson Text","Gowun Batang",Georgia,serif;--lb-sans:"Hind","Gowun Dodum",system-ui,sans-serif;
  position:absolute;inset:0;overflow:hidden;background:#09070c;color:#faeed9;font-family:var(--lb-serif);opacity:0;transition:opacity .6s ease}
.lib.on{opacity:1}
.lib::before{content:"";position:absolute;inset:-40px;background:url(../assets/camp/library/room-blur.webp) center / cover no-repeat;filter:blur(22px) brightness(.5)}
.lib button{font-family:var(--lb-serif);font-weight:400;line-height:1}
.lib .o{display:block;overflow:visible;pointer-events:none}
.lib-stage{position:absolute;left:0;top:0;width:1585px;height:992px;transform-origin:0 0}
.lib-stage > img,.lib-npc > img{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.lib-npc{position:absolute;inset:0;pointer-events:none;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out}
.lib.npc-away .lib-npc{transform:translateX(140px);opacity:0;transition:none}
.lib-room{left:0;top:0;width:1585px;height:992px;transition:filter .45s ease}
.lib-day{left:0;top:0;width:1585px;height:992px;opacity:0;transition:opacity 2s linear,filter .45s ease}
/* the smoke over the chimney (src/library.js): the chimney's corner of the painting, and a strip above it */
.lib-smoke{position:absolute;left:380px;top:-120px;width:380px;height:250px;pointer-events:none;transition:filter .45s ease}
.lib-smoke[hidden]{display:none}
/* the bulb over the record player (src/library.js): a soft glow added over the painted bulb and the shelves
   around it that breathes (swells and brightens, then back, 3 s each way), and a dark spot over the same,
   clear until src/library.js flickers the bulb with it. Neither parent may get an opacity, filter or
   transform of its own: that would make a group, and the blends would stop meeting the painting. */
.lib-glow{position:absolute;left:788.5px;top:278px;width:360px;height:360px;pointer-events:none}
.lib-glow i{position:absolute;inset:0;border-radius:50%}
.lib-glow .add{mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,236,190,.62),rgba(255,220,155,.4) 8%,rgba(255,200,125,.24) 18%,rgba(255,186,108,.13) 32%,rgba(255,178,98,.065) 50%,rgba(255,172,92,.025) 72%,rgba(255,170,90,0));animation:libglow 3s ease-in-out infinite alternate}
/* (a deep red-orange, not a dark brown: a bulb losing its current goes orange like a cooling filament, and a
   brown spot left the bulb a cold grey) */
.lib-glow .dim{mix-blend-mode:multiply;opacity:0;background:radial-gradient(closest-side,rgba(140,45,8,1),rgba(140,45,8,.8) 9%,rgba(140,45,8,.4) 22%,rgba(140,45,8,.17) 42%,rgba(140,45,8,.06) 66%,rgba(140,45,8,0))}
@keyframes libglow{from{transform:scale(.9);opacity:.5}to{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion:reduce){.lib-glow .add{animation:none;opacity:.8}}
.lib-ui{position:absolute;inset:0;transition:opacity .35s ease}
.lib-juno{left:1103.1px;top:256.1px;height:711.9px;width:auto;transition:opacity .35s ease}
.lib-blink{left:1215.1px;top:322.8px;width:130.4px;height:82.1px;opacity:0}
.lib-blink.shut{opacity:1}
.lib.dim .lib-room,.lib.dim .lib-day,.lib.dim .lib-smoke{filter:blur(2.5px) brightness(.84)}
.lib.dim .lib-glow{visibility:hidden}
.lib-stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0))}
.lib.dim .lib-stage::after{opacity:1}
.lib.dim .lib-ui,.lib.dim .lib-juno,.lib.dim .lib-blink,.lib.dim .lib-edge-main{opacity:0;pointer-events:none}

/* ---- the user's frames as 9-slices ---- */
.nine{position:absolute;inset:0;box-sizing:border-box;border-style:solid;border-color:transparent;pointer-events:none}
.lib .nine.solid{pointer-events:auto}
.nine.walnut{border-image:url(../assets/camp/library/panel.webp) 116 fill / var(--bw,27px) stretch}
.nine.ivory{border-image:url(../assets/camp/library/quote-card.webp) 151 fill / var(--bw,53px) stretch}

/* ---- the room's parts ---- */
.lib-title{margin:0;font:700 74.25px/1 var(--lb-serif);color:#fdf6e2;white-space:nowrap;text-shadow:0 2px 3px rgba(18,9,4,.55),0 0 14px rgba(0,0,0,.25)}
.lib-title:focus{outline:none}
.lib-subrow span{font:400 26.44px/1 var(--lb-sans);color:#dabb96;white-space:nowrap}
.lib-sec{display:flex;align-items:flex-start;white-space:nowrap}
.lib-sec .sp{flex:none}
.lib-sec b{font:600 33.06px/1 var(--lb-serif);color:#fedc9e}
.lib-sec.music b{font-size:31.07px}
.lib-sec i{flex:1;height:1px;background:#a46d32}
.lib-book{position:absolute;padding:0;border:0;background:none;cursor:pointer;color:#faf1e6;transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s}
.lib-book img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.lib-book span{position:absolute;top:var(--lt);left:var(--lc);width:200px;margin-left:-100px;text-align:center;font:400 21.5px/1 var(--lb-serif);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.lib-book:hover,.lib-book:focus-visible{transform:translateY(-5px);filter:brightness(1.07);outline:none}
.lib-book:focus-visible img{outline:2px solid #f0c27a;outline-offset:3px;border-radius:3px}
.lib-book.quotes{--lt:89.7px;--lc:98.8px}
.lib-book.marks{--lt:90.3px;--lc:97.4px}
/* the record player */
.lib-player > *:not(.nine){position:absolute;margin:0}
.lib-vinyl{pointer-events:none}
.lib-vinyl img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lib-vinyl .spin{animation:lbspin 1.8s linear infinite;animation-play-state:paused}
.lib-vinyl.on .spin{animation-play-state:running}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lib-sleeve{display:block;pointer-events:none;object-fit:fill;filter:drop-shadow(2px 3px 4px rgba(0,0,0,.45))}
.lib-play{padding:0;border:0;border-radius:50%;background:url(../assets/camp/library/play.webp) center / 100% 100% no-repeat;cursor:pointer;display:grid;place-items:center}
.lib-play .bars{display:none;width:34%;height:34%}
.lib-play.on{background-image:url(../assets/camp/library/play-empty.webp)}
.lib-play.on .bars{display:block}
.lib-play:hover{filter:brightness(1.08)}
.lib-play:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.lib-play:disabled{cursor:default;filter:saturate(.6) brightness(.8)}
.lib-shelfline{height:1px;background:#a66a3c}
.lib-label{font:400 16.81px/1 var(--lb-serif);color:#c29a70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-track{font:400 22.65px/1 var(--lb-serif);color:#fbf7f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-tile{padding:0;border:0;border-radius:4px;background:#442415;box-shadow:inset 0 1px 0 #5a3019,0 1px 2px rgba(0,0,0,.35);cursor:pointer}
.lib-tile .o{position:absolute;left:2px;top:2px;width:31px;height:30px}
.lib-tile:hover{filter:brightness(1.15)}
.lib-tile:disabled{cursor:default;opacity:.5;filter:none}
.lib-tile:focus-visible,.lib-alltracks:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.lib-alltracks{padding:0;border:1.5px solid #a86434;border-radius:6px;background:#583422;color:#faf6f2;cursor:pointer}
.lib-alltracks .o{position:absolute;left:6.5px;top:3.5px;width:30px;height:26px}
.lib-alltracks span{position:absolute;left:41.2px;top:9.8px;font:400 15.87px/1 var(--lb-serif);white-space:nowrap}
.lib-alltracks:hover{filter:brightness(1.12)}
.lib-bar{position:absolute;height:7px;border-radius:4px;background:#343538;box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.lib-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:#c9934f}
.lib-bar b{position:absolute;top:50%;left:8px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fffcf2;box-shadow:0 1px 2px rgba(0,0,0,.5)}
/* (a press or a drag anywhere near it: src/music.js data-seek, the user 2026-10-29; the knob grows while held) */
.lib-bar[data-seek]::before{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px}
.lib-bar b{transition:transform .15s}
.lib-bar[data-seek]:hover b,.lib-bar.held b{transform:scale(1.18)}
.lib-time{font:400 14.94px/1 var(--lb-serif);color:#c69a6a;white-space:nowrap}
/* Juno: pointing at her has her talk (src/talkbox.js). On a desk an unseen button over her figure, which
   lights her a little; on a phone her cameo at the foot of the page, coming in from the right as she does. */
.lib-talk{padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lib-talk img{display:block;width:100%;height:100%;pointer-events:none}
.lib-talk:focus-visible{outline:2px solid #f0c27a;outline-offset:4px;border-radius:14px}
.lib-juno{transition:opacity .35s ease,filter .2s ease}
.lib-stage:has(.lib-talk:hover) .lib-juno,.lib-stage:has(.lib-talk:focus-visible) .lib-juno{filter:brightness(1.2) drop-shadow(0 0 8px rgba(255,205,135,.3))}

/* her note by the record player (her first episode, src/juno.js): the user's note paper with its masking tape
   (scripts/library/build-note.py), already turned 3.4 degrees, a little smaller than the first stand-in; her
   hand (Patrick Hand, Nanum Pen Script) in the paper's box below the tape, turned with it. */
.lib-note{box-sizing:border-box;aspect-ratio:1160/1035;background:url(../assets/camp/library/juno-note.webp) 0 0 / 100% 100% no-repeat;filter:drop-shadow(0 4px 7px rgba(20,8,2,.32));color:#3d2a1a;pointer-events:none;user-select:none;-webkit-user-select:none}
.lib-note[hidden]{display:none}
.lib-note-in{position:absolute;left:12.41%;top:23.95%;width:75.35%;height:63.92%;overflow:hidden;transform:rotate(3.44deg);font-size:19px}
.lib-note b{display:block;font:400 1em/1.1 "Patrick Hand","Nanum Pen Script",cursive;color:#2f2014}
.lib-note span{display:block;margin-top:.3em;font:400 .84em/1.15 "Patrick Hand","Nanum Pen Script",cursive}
html[lang="ko"] .lib-note span{font:400 1em/1.1 "Nanum Pen Script","Patrick Hand",cursive}
.lib.stage .lib-note{left:832px;top:720px;width:156px;height:auto}
.lib.stack .lib-note{position:relative;align-self:flex-end;width:172px;margin:-4px 8px 0 0}
.lib.stack .lib-note-in{font-size:20px}

/* "Play for Juno" on each record while her episode waits for one (src/library.js, Camp Records) */
.lr-for{display:flex;align-items:center;box-sizing:border-box;padding:0 16px;border:1.5px solid #a86434;border-radius:7px;background:#583422;color:#faf6f2;cursor:pointer;white-space:nowrap;font:400 19px/1 var(--lb-serif);transition:filter .15s}
.lr-for:hover{filter:brightness(1.14)}
.lr-for:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.lib.stage .lr-for{position:absolute;left:512px;top:22px;height:42px}
.lib.stack .lr-row:has(.lr-for),.lib.stack .lr-row:has(.lr-for) .lr-pick{height:104px}
.lib.stack .lr-row:has(.lr-for) .lr-t{top:12px;transform:none;-webkit-line-clamp:2}
.lib.stack .lr-for{position:absolute;left:92px;bottom:12px;height:34px;padding:0 13px;font-size:15.5px}

/* Back to camp / Back to library, and the book's round X */
.lib-edge{position:absolute;top:0;width:0;height:0;z-index:7;transform-origin:0 0}
.lib-edge-r{right:0}
.lib-edge-l{left:0}
.lib-back{position:absolute;display:flex;align-items:flex-start;box-sizing:border-box;padding:0;border:0;background:none;cursor:pointer;color:#f7f0e5;white-space:nowrap;text-align:left}
.lib-back .nine{border-image:url(../assets/camp/library/back-frame.webp) 56 fill / 14px stretch}
.lib-back .o{position:absolute}
.lib-back span{display:block;position:relative;font:400 17.51px/1 var(--lb-serif)}
.lib-back:hover{filter:brightness(1.12)}
.lib-back:focus-visible{outline:2px solid #f0c27a;outline-offset:2px;border-radius:6px}
.lib-edge-main .lib-back{right:21px;top:21px;min-width:160px;height:43px;padding:12.6px 21.4px 0 47.4px}
.lib-edge-main .lib-back .o{left:15px;top:8px;width:22px;height:28px}
.lib-edge-over .lib-back{left:39px;top:27px;min-width:207px;height:47px;padding:12.2px 31.4px 0 56.3px}
.lib-edge-over .lib-back .o{left:15.5px;top:7.05px;width:26.7px;height:34px}
.lib-edge-over .lib-back span{font-size:20.83px}
.lb-x{position:absolute;right:30px;top:39.5px;width:55px;height:55px;padding:0;border:2.5px solid #a45324;border-radius:50%;background:radial-gradient(circle at 50% 40%,#33200f,#21120a);color:#f7ce8c;cursor:pointer;box-shadow:0 0 0 1.5px rgba(40,20,8,.6),0 4px 10px rgba(0,0,0,.45)}
.lb-x svg{display:block;width:44%;height:44%;margin:auto}
.lb-x:hover{filter:brightness(1.15)}
.lb-x:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}

/* ---- what opens over the room ---- */
.lib-over{position:absolute;inset:0;z-index:6}
.lib-over[hidden]{display:none}
.lib-ostage{position:absolute;left:0;top:0;width:1586px;height:992px;transform-origin:0 0}
.lib-ostage > section{position:absolute;inset:0;animation:lbin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes lbin{from{opacity:0;transform:translateY(10px)}}
.lib-ostage .o{position:absolute}
.lib-x{padding:0;border:0;background:none;cursor:pointer}
.lib-x .o{position:static;width:100%;height:100%}
.lib-x:hover{filter:brightness(.8)}
.lp .lib-x:hover{filter:brightness(1.25)}
.lib-x:focus-visible{outline:2px solid #c08a4c;outline-offset:2px;border-radius:4px}
/* a line from Juno on the ivory card */
.lq-head{color:#6d3e17;font:400 25.83px/1 var(--lb-serif);white-space:nowrap}
.lq-text{margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font:400 69.19px/1.156 var(--lb-serif);color:#1b0702;word-break:keep-all}
.lq-by{display:flex;align-items:center;justify-content:center;white-space:nowrap;color:#86582c}
.lq-by i{display:block;flex:none;width:72px;height:1px;background:#d7aa72}
.lq-by span{margin:0 20px 0 22.6px;font:400 22.77px/1 var(--lb-serif)}
.lq-line{height:1px;background:#d7aa72}
.lq-btn{padding:0;border:1.5px solid #ca9351;border-radius:12px;background:rgba(255,248,236,.3);color:#3a1d0b;cursor:pointer;transition:background .15s}
.lq-btn span{position:absolute;font:400 18.9px/1 var(--lb-serif);white-space:nowrap}
.lq-btn:hover{background:rgba(255,248,236,.7)}
.lq-btn[aria-pressed="true"]{border-color:#b9732c;background:rgba(240,190,120,.25)}
.lq-btn:focus-visible{outline:2px solid #c08a4c;outline-offset:2px}
.lq-sep{width:1px;background:#d2a774}
/* the open book */
.lb-title{margin:0;font:600 49.71px/1 var(--lb-serif);color:#2a0703;white-space:nowrap}
.lb-count{margin:0;font:italic 400 26.66px/1 var(--lb-serif);color:#976a42;white-space:nowrap}
.lb-tab{padding:0;border:0;background:none;cursor:pointer;color:#6f4727;text-align:left}
.lb-tab span{position:absolute;white-space:nowrap;font:400 23.67px/1 var(--lb-serif)}
.lb-tab[aria-pressed="true"]{color:#230502}
.lb-tab[aria-pressed="true"] span{font-weight:600;font-size:26.21px}
.lb-tab[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;background:#cf7f14}
.lb-tab:focus-visible{outline:2px solid #c08a4c;outline-offset:2px}
.lb-tabline{height:1px;background:#e6c08f}
.lb-rows{margin:0;padding:0;list-style:none;border-top:1px solid #ecc99d}
.lb-rows li{position:relative;height:82.5px;border-bottom:1px solid #ecc99d;box-sizing:border-box}
.lb-rows button{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:#210904}
.lb-rows button:hover{background:rgba(214,160,90,.08)}
.lb-rows button[aria-current="true"]{background:rgba(214,160,90,.12)}
.lb-rows button:focus-visible{outline:2px solid #c08a4c;outline-offset:-2px}
.lb-rows .nm{position:absolute;left:45.4px;top:27px;max-width:270px;overflow:hidden;text-overflow:ellipsis;font:400 25.19px/1 var(--lb-serif);white-space:nowrap}
.lb-rows .ct{position:absolute;right:55.8px;top:32.9px;font:400 22.36px/1 var(--lb-serif);color:#8d6237;white-space:nowrap}
.lb-rows .lf{left:-6px;top:21px;width:37px;height:37px}
.lb-rows .ch{left:416px;top:24px;width:28px;height:32px}
.lb-hint{margin:0;text-align:center;font:italic 400 21.43px/1 var(--lb-serif);color:#8e6a46;white-space:nowrap}
.lb-kick{text-align:center;font:400 16.61px/1 var(--lb-serif);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#824a1d;white-space:nowrap}
.lb-line{height:1px;background:#dcae78}
.lb-quote{margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font:600 53.93px/1.196 var(--lb-serif);color:#280804;word-break:keep-all}
.lb-quote.empty{font:italic 400 24px/1.4 var(--lb-serif);color:#92704e}
.lb-by{margin:0;text-align:center;font:italic 400 20.59px/1 var(--lb-serif);color:#815b3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-save{padding:0;border:1.5px solid #b86e24;border-radius:12px;background:rgba(255,250,240,.22);color:#2a0f05;cursor:pointer}
.lb-save span{position:absolute;font:400 22.41px/1 var(--lb-serif);white-space:nowrap}
.lb-save:hover{background:rgba(255,250,240,.6)}
.lb-save[aria-pressed="true"]{background:rgba(240,190,120,.25)}
.lb-save:focus-visible,.lb-pg:focus-visible{outline:2px solid #c08a4c;outline-offset:2px}
.lb-pg{padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.lb-pg .o{left:0;top:0;width:100%;height:100%}
.lb-pg:disabled{cursor:default}
.lb-pg:disabled .o:last-child{opacity:.75}
.lb-page{text-align:center;font:400 20.39px/1 var(--lb-serif);color:#7f4a1f;white-space:nowrap}
/* Juno's pick */
.lp-cameo{display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.lp-title{margin:0;font:600 55.12px/1 var(--lb-serif);color:#fdf8ea;white-space:nowrap}
.lp-sub{margin:0;font:400 28.87px/1 var(--lb-serif);color:#f6d09d;white-space:nowrap}
/* (line-height 1.25, not 1: a Korean title's top was cut off by the overflow, 2026-10-15; the desk's top and the
   phone's margin take the extra off again so the words sit where they did) */
.lp-name{margin:0;font:600 59.05px/1.25 var(--lb-serif);color:#fdf8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-by{margin:0;font:400 30.17px/1 var(--lb-serif);color:#d2a473;white-space:nowrap}
.lp-divline{height:1px;background:#905d27}
.lp-play{padding:0;border:3px solid #fccc5a;border-radius:11px;background:linear-gradient(180deg,#8a4b20,#6b3818 55%,#5c2f13);box-shadow:inset 0 0 0 2px rgba(95,45,12,.8),inset 0 0 0 3.5px rgba(252,204,90,.45),0 6px 16px rgba(0,0,0,.4);color:#fbf6ea;cursor:pointer}
.lp-play svg{position:absolute;left:32.9px;top:9.4px;width:62px;height:62px}
.lp-play span{position:absolute;left:120.1px;top:22.9px;font:600 36.1px/1 var(--lb-serif);white-space:nowrap}
.lp-play:hover{filter:brightness(1.08)}
.lp-play:focus-visible{outline:2px solid #f0c27a;outline-offset:3px}
.lp-bar{height:8px}
.lp-bar b{left:8px;width:16px;height:16px;margin:-8px 0 0 -8px;background:#fdf2d4}
.lp-bar i{background:#d9a35a}
.lp-time{font:400 19.52px/1 var(--lb-serif);color:#c69a64;white-space:nowrap}
.lp-hr{height:1px;background:#925725}
.lp-add{padding:0;border:1.5px solid #a76632;border-radius:10px;background:rgba(77,44,27,.85);box-shadow:inset 0 0 0 1px rgba(255,200,130,.06);color:#f7efdc;cursor:pointer}
.lp-add .o{left:33.5px;top:6.5px;width:44px;height:45px}
.lp-add span{position:absolute;left:99px;top:19.6px;font:400 23.33px/1 var(--lb-serif);white-space:nowrap}
.lp-add:hover{filter:brightness(1.12)}
.lp-add[aria-pressed="true"]{border-color:#e0a050}
.lp-add:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.lp-saved{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font:400 23.33px/1 var(--lb-serif);color:#f4c77a;white-space:nowrap}
.lp-saved svg{flex:none;width:26px;height:26px}

/* ================= a desk: the mock-ups' places ================= */
.lib.stage .lib-ui > *,.lib.stage .lib-ostage section > *:not(.lr-in),.lib.stage .lr-tabs > *,.lib.stage .lr-mini > *,.lib.stage .lr-mctl > *,.lib.stage .lr-mprog > *,.lib.stage .lb-pgwrap > *,.lib.stage .lp-wrap > *,.lib.stage .lb-divrow > *,.lib.stage .lp-divrow > *,.lib.stage .lb-pager > *,.lib.stage .lq-acts > *,.lib.stage .lq-headrow > *,.lib.stage .lb-tabs > *{position:absolute;box-sizing:border-box}
.lib.stage .lib-shelf,.lib.stage .lb-pgwrap,.lib.stage .lp-wrap,.lib.stage .lp-disc,.lib.stage .lib-subrow,.lib.stage .lb-divrow,.lib.stage .lp-divrow,.lib.stage .lb-pager,.lib.stage .lq-acts,.lib.stage .lq-headrow,.lib.stage .lb-tabs,.lib.stage .lr-tabs,.lib.stage .lr-mini,.lib.stage .lr-mctl,.lib.stage .lr-mprog{display:contents}
.lib.stage .lib-ui > .lib-shelf > *,.lib.stage .lp-disc > *,.lib.stage .lib-subrow > *{position:absolute}
.lib.stage .lib-title{left:347.3px;top:287.3px}
.lib.stage .lib-subrow .ol{left:345px;top:362px;width:102px;height:34px}
.lib.stage .lib-subrow .or{left:635px;top:362px;width:99px;height:34px}
.lib.stage .lib-subrow span{left:391.1px;width:300px;top:365.8px;text-align:center}
.lib.stage .lib-talk{left:1150px;top:258px;width:268px;height:706px}
.lib.stage .lib-talk img{display:none}
.lib.stage .lib-sec.books{left:325px;top:409px;width:352px;height:40px}
.lib.stage .lib-sec.books .sp{width:36px;height:40px}
.lib.stage .lib-sec.books b{margin:2.4px 0 0 4.2px}
.lib.stage .lib-sec.books i{margin:27px 0 0 10.1px}
.lib.stage .lib-sec.music{left:334px;top:676px;width:282px;height:40px}
.lib.stage .lib-sec.music .sp{width:35px;height:40px}
.lib.stage .lib-sec.music b{margin:2.6px 0 0 3.2px}
.lib.stage .lib-sec.music i{margin:27px 0 0 10px}
.lib.stage .lib-book.quotes{left:345px;top:455px;width:172px;height:165px}
.lib.stage .lib-book.marks{left:532px;top:454px;width:175px;height:166px}
.lib.stage .lib-player{left:335px;top:720px;width:490px;height:142px;--bw:27px}
.lib.stage .lib-player .lib-vinyl{left:82.5px;top:25.5px;width:97.1px;height:97.1px}
.lib.stage .lib-player .lib-sleeve{left:34px;top:24px;width:96px;height:102px}
.lib.stage .lib-player .lib-shelfline{left:34px;top:126px;width:95px}
.lib.stage .lib-label{left:193.3px;top:13px;max-width:270px}
.lib.stage .lib-track{left:193.4px;top:34.5px;max-width:270px}
.lib.stage .lib-player .prev{left:191px;top:71px;width:35px;height:34px}
.lib.stage .lib-player .lib-play{left:235.85px;top:61.85px;width:53.3px;height:53.3px}
.lib.stage .lib-player .next{left:298px;top:71px;width:35px;height:34px}
.lib.stage .lib-alltracks{left:354px;top:70px;width:115px;height:36px}
.lib.stage .lib-player .lib-bar{left:161px;top:124px;width:225px}
.lib.stage .lib-player .lib-time{left:396.4px;top:122.1px}
/* the line on the card */
.lib.stage .lq-card{left:312px;top:245px;width:963px;height:527px;--bw:53px}
.lib.stage .lq-line.l{left:528px;top:315px;width:105px}
.lib.stage .lq-line.r{left:952px;top:315px;width:108px}
.lib.stage .lq .o.lf-l{left:644px;top:293px;width:43px;height:46px}
.lib.stage .lq .o.lf-r{left:904px;top:293px;width:43px;height:46px}
.lib.stage .lq-head{left:642.9px;width:300px;top:302.6px;text-align:center}
.lib.stage .lq .lib-x{left:1204px;top:271px;width:44px;height:42px}
.lib.stage .lq-text{left:421.3px;top:356.9px;width:760px;height:238px}
.lib.stage .lq-by{left:493px;top:596.1px;width:600px;height:23px}
.lib.stage .lq-btn.save{left:537px;top:668px;width:228px;height:62px}
.lib.stage .lq-btn.save .o{left:32.5px;top:5.5px;width:36px;height:46px}
.lib.stage .lq-btn.save span{left:83.7px;top:19.4px}
.lib.stage .lq-btn.again{left:821px;top:668px;width:229px;height:62px}
.lib.stage .lq-btn.again .o{left:28.5px;top:6.5px;width:46px;height:45px}
.lib.stage .lq-btn.again span{left:85.1px;top:20.3px;font-size:18.6px}
.lib.stage .lq-sep{left:793px;top:680px;height:38px}
/* the open book */
.lib.stage .lb-book{left:168.9px;top:171.3px;width:1257.7px;height:761px}
.lib.stage .lb .o.sprig{left:289px;top:244px;width:47px;height:67px}
.lib.stage .lb-title{left:343.9px;top:251.8px}
.lib.stage .lb-count{left:346.2px;top:310.9px}
.lib.stage .lb-tab.all{left:295px;top:350px;width:147px;height:46px}
.lib.stage .lb-tab.marks{left:459px;top:350px;width:151px;height:46px}
.lib.stage .lb-tab span{left:22.2px;top:11.2px}
.lib.stage .lb-tab.all span{left:23.4px}
.lib.stage .lb-tab[aria-pressed="true"] span{top:6.7px}
.lib.stage .lb-tabline{left:295px;top:396px;width:445px}
.lib.stage .lb-rows{left:295px;top:418px;width:445px}
.lib.stage .lb-hint{left:312.4px;width:400px;top:776.6px}
.lib.stage .lb-kick{left:940px;width:300px;top:255.6px}
.lib.stage .lb-line.l{left:918px;top:285px;width:152px}
.lib.stage .lb-line.r{left:1128px;top:285px;width:147px}
.lib.stage .lb .o.div{left:1077px;top:275px;width:44px;height:35px}
.lib.stage .lb-quote{left:892.5px;top:342px;width:420px;height:220px}
.lib.stage .lb .o.qleaf{left:1079px;top:569px;width:46px;height:46px}
.lib.stage .lb-by{left:952.1px;width:300px;top:622.3px}
.lib.stage .lb-save{left:978px;top:688px;width:245px;height:57px}
.lib.stage .lb-save .o{left:25.5px;top:4.5px;width:38px;height:45px}
.lib.stage .lb-save span{left:78.6px;top:17px}
.lib.stage .lb-pg.pv{left:981px;top:767px;width:52px;height:52px}
.lib.stage .lb-pg.nx{left:1169px;top:767px;width:52px;height:52px}
.lib.stage .lb-page{left:1027.3px;width:150px;top:783px}
/* Juno's pick */
.lib.stage .lp-panel{left:275px;top:213px;width:1037px;height:665px;--bw:50.3px}
.lib.stage .lp-shelf{left:284px;top:360px;width:568px;height:402px;pointer-events:none}
.lib.stage .lp-vinyl{left:497.1px;top:389.1px;width:321.9px;height:321.9px}
.lib.stage .lp-sleeve{left:346px;top:387px;width:346px;height:339px}
.lib.stage .lp .o.laurel-l{left:485px;top:261px;width:50px;height:80px}
.lib.stage .lp .o.laurel-r{left:680.35px;top:261px;width:50px;height:80px;transform:scaleX(-1)}
.lib.stage .lp-cameo{left:516px;top:179px;width:186px;height:192px}
.lib.stage .lp-title{left:738.7px;top:249px}
.lib.stage .lp-sub{left:778.8px;top:306.7px}
.lib.stage .lp .lib-x{left:1243px;top:240px;width:41px;height:40px}
.lib.stage .lp-name{left:860.5px;top:388.6px;max-width:410px}
.lib.stage .lp-by{left:861.7px;top:458.4px}
.lib.stage .lp .o.div{left:855px;top:494px;width:33px;height:34px}
.lib.stage .lp-divline{left:888px;top:511.5px;width:357px}
.lib.stage .lp-play{left:858px;top:590px;width:397px;height:88px}
.lib.stage .lp-bar{left:860px;top:707px;width:287px}
.lib.stage .lp-time{left:1164.2px;top:705.7px}
.lib.stage .lp-hr{left:310px;top:765px;width:962px}
.lib.stage .lp-add{left:651.5px;top:788px;width:284px;height:62px}
.lib.stage .lp-saved{left:611.5px;top:788px;width:364px;height:62px}

/* ---- Camp Records (records.png, 1584 x 993: laid out in its own pixels, fitted to the overlay stage) ---- */
.lib.stage .lr-in{position:absolute;left:0;top:0;width:1584px;height:993px;transform-origin:0 0;transform:scale(1.00126,.99899)}
.lib.stage .lr-in > *{position:absolute;margin:0}
.lr-in > *{box-sizing:border-box}
.lib.stage .lr-panel{left:322px;top:113px;width:940px;height:808px}
.lr-panel{--bw:45.4px}
.lib.stage .lr .o.sprig{left:372px;top:132px;width:46px;height:52px}
.lib.stage .lr-title{left:438.6px;top:128.1px}
.lr-title{font:700 56.74px/1 var(--lb-serif);color:#fffbec;white-space:nowrap}
.lib.stage .lr-subrow{left:352px;top:180px;height:32px}
.lr-subrow{display:flex;align-items:flex-start;white-space:nowrap}
.lib.stage .lr-subrow .o{position:relative;height:32px}
.lr-subrow .o{flex:none}
.lib.stage .lr-subrow .ol{width:106px}
.lib.stage .lr-subrow .or{width:120px}
.lib.stage .lr-subrow span{margin:6.6px 13.6px 0 9.2px}
.lr-subrow span{font:400 23.28px/1 var(--lb-sans);color:#f7dcb0}
.lib.stage .lr-count{right:385.4px;top:182.4px}
.lr-count{font:400 21.73px/1 var(--lb-serif);color:#c99760;white-space:nowrap}
.lib.stage .lr .lib-x{left:1204px;top:135px;width:40px;height:39px}
.lib.stage .lr-tab{top:222px;height:44px}
.lr-tab{padding:0;border:0;background:none;cursor:pointer;color:#d9b38b}
.lib.stage .lr-tab .o{position:absolute;top:4px;width:40px;height:36px}
.lr-tab .o{color:#d2aa7f}
.lib.stage .lr-tab span{position:absolute;top:7.7px}
.lr-tab span{font:600 26.42px/1 var(--lb-serif);white-space:nowrap}
.lib.stage .lr-tab.all{left:351px;width:227px}
.lib.stage .lr-tab.all .o{left:33px}
.lib.stage .lr-tab.all span{left:82.3px}
.lib.stage .lr-tab.list{left:604px;width:226px}
.lib.stage .lr-tab.list .o{left:28px;width:42px}
.lib.stage .lr-tab.list span{left:80.3px}
.lr-tab[aria-pressed="true"]{color:#fff6d2}
.lr-tab[aria-pressed="true"] .o{color:#f7d095}
.lib.stage .lr-tab[aria-pressed="true"]::after{position:absolute;left:0;right:0;top:41px;height:5px}
.lr-tab[aria-pressed="true"]::after{content:"";border-radius:3px;background:#ffa32b}
.lr-tab:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.lib.stage .lr-sep{left:590px;top:228px;width:2px;height:30px}
.lr-sep{background:#5f4125}
.lib.stage .lr-line{left:351px;top:263px;width:882px;height:2px}
.lr-line{background:#673d1c}
.lib.stage .lr-list{left:348px;top:280px;width:911px;height:526px}
.lr-list{padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b4520 transparent}
.lib.stage .lr-row{position:relative;height:86.6px}
.lr-row:first-child{margin-top:3.4px}
.lib.stage .lr-row.cur::before{position:absolute;left:0;top:-3.4px;width:888px;bottom:0}
.lr-row.cur::before{content:"";box-sizing:border-box;border:1px solid #9d6529;border-radius:4px;background:#4b2c13}
.lib.stage .lr-row.cur::after{position:absolute;left:0;top:-3.4px;bottom:0;width:7px}
.lr-row.cur::after{content:"";border-radius:3px 0 0 3px;background:#f1b325}
.lib.stage .lr-row .sl{position:absolute;left:17px;right:0;bottom:0;height:1px}
.lr-row .sl{background:#432c1e}
.lr-row.cur .sl,.lr-row:has(+ .cur) .sl,.lr-row:last-child .sl{display:none}
.lib.stage .lr-pick{position:absolute;left:0;top:0;width:888px;height:86.6px}
.lr-pick{padding:0;border:0;border-radius:4px;background:none;color:#fffdf8;cursor:pointer;text-align:left}
.lib.stage .lr-pick > *{position:absolute}
.lr-row:not(.cur) .lr-pick:hover{background:rgba(255,200,130,.05)}
.lr-pick:focus-visible{outline:2px solid #f0c27a;outline-offset:-2px}
.lib.stage .lr-thumb{left:30px;top:3.5px;width:100px;height:81px}
.lr-thumb{box-sizing:border-box;border:1.5px solid #b07a3c;border-radius:4px;overflow:hidden;background:#1d2236;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.lib.stage .lr-thumb img{width:100%;height:100%}
.lr-thumb img{display:block;object-fit:cover}
.lib.stage .lr-ov{left:58px;top:22px;width:44px;height:44px}
.lr-ov{box-sizing:border-box;border:2.4px solid #f9ba39;border-radius:50%;background:rgba(18,10,6,.42);display:grid;place-items:center}
.lib.stage .lr-ov svg{width:44%;height:44%}
.lr-ov svg{display:block}
/* The title alone, in the middle of the row with the length (the tags under it went, the user, 2026-10-19) */
.lib.stage .lr-t{left:163.5px;top:30.7px;max-width:540px}
.lr-t{font:600 29.4px/1 var(--lb-serif);color:#fffdf8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib.stage .lr-d{right:120.4px;top:34.8px}
.lr-d{font:400 21.17px/1 var(--lb-serif);color:#f0d0a8;white-space:nowrap}
.lib.stage .lr-add{position:absolute;left:816px;top:19px;width:50px;height:49px}
.lr-add{padding:0;border:0;border-radius:50%;background:none;color:#f7cc80;cursor:pointer}
.lib.stage .lr-add .o{position:absolute;inset:0;width:100%;height:100%}
.lr-add:hover{filter:brightness(1.15)}
.lr-add:focus-visible{outline:2px solid #f0c27a;outline-offset:1px}
.lr-empty{padding:120px 0 0;text-align:center;font:italic 400 22px/1.4 var(--lb-serif);color:#c9a77e}
.lib.stage .lr-div{left:338px;top:816px;width:907px;height:2px}
.lr-div{background:#b86622}
.lib.stage .lr-mthumb{left:370px;top:831px;width:74px;height:72px}
.lib.stage .lr-mtitle{left:474.4px;top:853.4px;max-width:198px}
.lr-mtitle{font:600 21.86px/1 var(--lb-serif);color:#fffefb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Every one-line text that clips (the ellipsis needs overflow hidden): Korean letters, and the content
   area of Hind's and Crimson's Korean fallback, reach up to 0.3 em above and below a line box of 1, and
   the box cut them (the user, 2026-10-16: the cabin's title). Room inside the clip, the box pulled out by
   the same: nothing moves (the stack's own margins below take the .3 em off again). */
.lib-label,.lib-track,.lb-rows .nm,.lb-by,.lp-name,.lr-t,.lr-mtitle{padding:.3em 0;margin-top:-.3em;margin-bottom:-.3em}
.lr-mbtn{padding:0;border:0;background:none;cursor:pointer}
.lib.stage .lr-mbtn .o{position:absolute;inset:0;width:100%;height:100%}
.lr-mbtn:hover{filter:brightness(1.15)}
.lr-mbtn:disabled{opacity:.45;cursor:default;filter:none}
.lr-mbtn:focus-visible{outline:2px solid #f0c27a;outline-offset:2px;border-radius:4px}
.lib.stage .lr-mbtn.prev{left:680px;top:848px;width:38px;height:37px}
.lib.stage .lr-mbtn.next{left:833px;top:848px;width:38px;height:37px}
.lib.stage .lr .lib-play.mplay{left:743.4px;top:833.9px;width:64.2px;height:64.2px}
.lib.stage .lr .lib-bar.mbar{left:903px;top:862px;width:207px;height:9px}
.lr .lib-bar.mbar{border-radius:5px;background:#313131}
.lib.stage .lr .lib-bar.mbar b{width:14px;height:14px;margin:-7px 0 0 -7px}
.lr .lib-bar.mbar b{background:#fbdd9f}
.lib.stage .lr-mtime{left:1124.2px;top:859.9px}
.lr-mtime{font:400 20px/1 var(--lb-serif);color:#b38a5b;white-space:nowrap}

/* ================= a phone, or a window near square: the same parts, stacked ================= */
.lib.stack .lib-stage{width:100%;height:100%;transform:none!important}
.lib.stack .lib-room{width:100%;height:100%;object-fit:cover;object-position:52% 62%}
.lib.stack .lib-day{width:100%;height:100%;object-fit:cover;object-position:52% 62%}
.lib.stack .lib-npc{display:none}
.lib.stack .lib-ui{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:calc(var(--safe-t) + 76px) 16px calc(var(--safe-b) + 28px);display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,rgba(9,7,12,.3),rgba(9,7,12,.72) 26%,rgba(9,7,12,.8))}
.lib.stack .lib-ui > *{position:relative;flex:none}
.lib.stack .lib-title{font-size:46px;margin-top:8px}
.lib.stack .lib-subrow{display:flex;align-items:center;gap:10px;margin-top:-4px}
.lib.stack .lib-subrow .o{width:66px;height:22px}
.lib.stack .lib-subrow span{font-size:19px}
.lib.stack .lib-sec{margin-top:6px}
.lib.stack .lib-sec .sp{width:26px;height:29px}
.lib.stack .lib-sec b{font-size:25px;margin:2px 0 0 6px}
.lib.stack .lib-sec i{margin:20px 0 0 10px}
.lib.stack .lib-shelf{display:flex;gap:14px}
.lib.stack .lib-book{position:relative;flex:1 1 0;aspect-ratio:172/165;--lt:54.4%;--lc:57.4%}
.lib.stack .lib-book.marks{--lc:55.7%}
.lib.stack .lib-book span{font-size:17px}
.lib.stack .lib-player{height:204px;--bw:22px}
.lib.stack .lib-player .lib-sleeve{left:22px;top:20px;width:80px;height:85px}
.lib.stack .lib-player .lib-shelfline{left:23px;top:106px;width:78px}
.lib.stack .lib-player .lib-vinyl{left:63px;top:24px;width:78px;height:78px}
.lib.stack .lib-label{left:156px;top:34px;right:20px;font-size:14px}
.lib.stack .lib-track{left:156px;top:54px;right:20px;font-size:20px}
.lib.stack .lib-player .prev{left:22px;top:124px;width:35px;height:34px}
.lib.stack .lib-player .lib-play{left:66px;top:114px;width:53.3px;height:53.3px}
.lib.stack .lib-player .next{left:128px;top:124px;width:35px;height:34px}
.lib.stack .lib-alltracks{right:20px;top:123px;width:115px;height:36px}
.lib.stack .lib-player .lib-bar{left:22px;right:96px;top:176px}
.lib.stack .lib-player .lib-time{right:20px;top:173px}
/* Juno on a phone: her portrait above the bubble's tail, the bubble's 9-slice at a fifth of the picture */
.lib.stack .lib-talk{align-self:flex-end;width:82px;height:84px;margin-top:4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out}
.lib.stack.npc-away .lib-talk{transform:translateX(60px);opacity:0;transition:none}
.lib.stack .lib-edge-main .lib-back{right:14px;top:calc(var(--safe-t) + 14px);min-width:0;height:40px;padding:12px 16px 0 40px}
.lib.stack .lib-edge-main .lib-back .o{left:13px;top:7px;width:19px;height:25px}
.lib.stack .lib-edge-main .lib-back span{font-size:15.5px}
.lib.stack .lib-edge-over .lib-back{left:40px;top:calc(var(--safe-t) + 12px);min-width:0;height:42px;padding:12px 18px 0 44px}
.lib.stack .lib-edge-over .lib-back .o{left:12px;top:6px;width:22px;height:29px}
.lib.stack .lib-edge-over .lib-back span{font-size:16.5px}
.lib.stack .lb-x{right:12px;top:calc(var(--safe-t) + 12px);width:42px;height:42px}
.lib.stack .lib-ostage{inset:0;width:auto;height:auto;transform:none!important;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.lib.stack .lib-ostage > section{position:relative;inset:auto;min-height:100%;padding:calc(var(--safe-t) + 74px) 12px calc(var(--safe-b) + 24px);box-sizing:border-box;display:flex;flex-direction:column}
.lib.stack .lib-ostage section > *{position:relative}
/* the line on the card */
.lib.stack .lq{padding-left:30px;padding-right:30px}
.lib.stack .lq-card{position:absolute!important;left:12px;right:12px;top:calc(var(--safe-t) + 74px);height:var(--lqh,auto);--bw:34px}
.lib.stack .lq-line{display:none}
.lib.stack .lq-headrow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.lib.stack .lq .o.lf-l,.lib.stack .lq .o.lf-r{position:relative;width:22px;height:24px}
.lib.stack .lq-head{font-size:17px}
.lib.stack .lq .lib-x{position:absolute!important;right:26px;top:calc(var(--safe-t) + 96px);width:20px;height:20px}
.lib.stack .lq-text{margin-top:28px;font-size:30px;line-height:1.25}
.lib.stack .lq-by{margin-top:22px}
.lib.stack .lq-by i{width:36px}
.lib.stack .lq-by span{font-size:16px;margin:0 12px}
.lib.stack .lq-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 30px}
.lib.stack .lq-sep{display:none}
.lib.stack .lq-btn{position:relative;width:148px;height:48px}
.lib.stack .lq-btn .o{left:12px!important;top:8px!important;width:24px!important;height:30px!important}
.lib.stack .lq-btn span{left:42px!important;top:15px!important;font-size:15.5px!important}
/* the open book: its two pages, one over the other */
.lib.stack .lb-book{display:none}
.lib.stack .lb-pgwrap{display:block;box-sizing:border-box;border-style:solid;border-color:transparent;padding:6px 4px 10px}
.lib.stack .lb-pgwrap.l{border-width:58px 34px 75px 98px;border-image:url(../assets/camp/library/book-page-l.webp) 144 86 187 245 fill / 58px 34px 75px 98px stretch;margin:0 -14px 0 -20px}
.lib.stack .lb-pgwrap.r{border-width:59px 100px 77px 35px;border-image:url(../assets/camp/library/book-page-r.webp) 147 251 192 88 fill / 59px 100px 77px 35px stretch;margin:6px -20px 0 -14px}
/* No category picked: the right page is blank, so on a phone it isn't there (an empty strip of paper). */
.lib.stack .lb.blank .lb-pgwrap.r{display:none}
.lib.stack .lb-pgwrap > *{position:relative}
.lib.stack .lb .o.sprig{position:absolute;left:-34px;top:-4px;width:26px;height:37px}
.lib.stack .lb-title{font-size:30px}
.lib.stack .lb-count{font-size:17px;margin-top:6px}
.lib.stack .lb-tabs{position:relative;display:flex;gap:6px;margin-top:16px;border-bottom:1px solid #e6c08f}
.lib.stack .lb-tab{position:relative;height:38px;padding:0 12px}
.lib.stack .lb-tab span{position:static;font-size:17px}
.lib.stack .lb-tab[aria-pressed="true"] span{font-size:18.5px}
.lib.stack .lb-tabline{display:none}
.lib.stack .lb-rows li{height:56px}
.lib.stack .lb-rows .lf{left:-4px;top:12px;width:28px;height:28px}
.lib.stack .lb-rows .nm{left:32px;top:18px;font-size:18px;max-width:58%}
.lib.stack .lb-rows .ct{right:30px;top:20px;font-size:15.5px}
.lib.stack .lb-rows .ch{left:auto;right:2px;top:15px;width:20px;height:24px}
.lib.stack .lb-hint{margin-top:16px;font-size:15px;white-space:normal}
.lib.stack .lb-kick{font-size:13px}
.lib.stack .lb-divrow{position:relative;height:22px;margin:8px 10% 0}
.lib.stack .lb-divrow > *{position:absolute}
.lib.stack .lb-line{top:10px}
.lib.stack .lb-line.l{left:0;right:calc(50% + 22px)}
.lib.stack .lb-line.r{right:0;left:calc(50% + 22px)}
.lib.stack .lb .o.div{left:calc(50% - 16px);top:0;width:32px;height:25px}
.lib.stack .lb-quote{min-height:110px;margin-top:12px;font-size:27px;line-height:1.25}
.lib.stack .lb .o.qleaf{position:relative;margin:6px auto 0;width:30px;height:30px}
.lib.stack .lb-by{margin-top:calc(6px - .3em);font-size:15px}
.lib.stack .lb-save{position:relative;display:block;margin:14px auto 0;width:190px;height:46px}
.lib.stack .lb-save .o{left:18px;top:6px;width:28px;height:34px}
.lib.stack .lb-save span{left:58px;top:14px;font-size:17px}
.lib.stack .lb-pager{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.lib.stack .lb-pg{position:relative;width:40px;height:40px}
.lib.stack .lb-page{font-size:17px}
/* Juno's pick */
.lib.stack .lp-wrap{position:relative;display:block;padding:106px 18px 26px;margin-top:50px}
.lib.stack .lp-panel{position:absolute!important;inset:0;--bw:30px}
.lib.stack .lp-wrap > *:not(.lp-panel){position:relative}
.lib.stack .lp-cameo{position:absolute!important;left:50%;top:-50px;width:132px;height:136px;margin-left:-66px}
.lib.stack .lp .o.laurel-l{position:absolute!important;left:calc(50% - 100px);top:6px;width:30px;height:48px}
.lib.stack .lp .o.laurel-r{position:absolute!important;left:calc(50% + 70px);top:6px;width:30px;height:48px;transform:scaleX(-1)}
.lib.stack .lp-title{text-align:center;font-size:32px;white-space:normal}
.lib.stack .lp-sub{text-align:center;font-size:18px;margin-top:6px;white-space:normal}
.lib.stack .lp .lib-x{position:absolute!important;right:20px;top:18px;width:20px;height:20px}
.lib.stack .lp-disc{position:relative;display:block;height:206px;margin:18px -6px 0;border-radius:6px;overflow:hidden}
.lib.stack .lp-disc > *{position:absolute}
.lib.stack .lp-shelf{display:none}
.lib.stack .lp-disc{background:linear-gradient(180deg,rgba(0,0,0,0) 0 72%,#4a2c18 72%,#3a2214 86%,#2a180e)}
.lib.stack .lp-vinyl{left:96px;top:14px;width:176px;height:176px}
.lib.stack .lp-sleeve{left:16px;top:12px;width:180px;height:176px}
.lib.stack .lp-name{margin-top:calc(12px - .3em);font-size:32px;white-space:normal}
.lib.stack .lp-by{margin-top:8px;font-size:18px}
.lib.stack .lp-divrow{position:relative;height:20px;margin-top:12px}
.lib.stack .lp-divrow > *{position:absolute}
.lib.stack .lp .o.div{left:0;top:0;width:20px;height:20px}
.lib.stack .lp-divline{left:20px;right:0;top:10px}
.lib.stack .lp-play{margin-top:16px;width:100%;height:64px}
.lib.stack .lp-play svg{left:16px;top:8px;width:44px;height:44px}
.lib.stack .lp-play span{left:74px;top:16px;font-size:24px}
.lib.stack .lp-bar{position:relative!important;margin-top:20px}
.lib.stack .lp-time{display:block;margin-top:10px;text-align:right;font-size:15px}
.lib.stack .lp-hr{display:block;margin-top:16px}
.lib.stack .lp-add{display:block;margin:18px auto 0;width:236px;height:52px}
.lib.stack .lp-add .o{left:20px;top:6px;width:36px;height:37px}
.lib.stack .lp-add span{left:66px;top:15px;font-size:18px}
.lib.stack .lp-saved{height:52px;margin-top:18px;font-size:18px}
.lib.stack .lp-saved svg{width:22px;height:22px}
/* Camp Records on a phone: one column (no mock-up: the desk's parts, stacked) */
.lib.stack .lr{padding-left:12px;padding-right:12px}
.lib.stack .lr-in{position:relative;padding:24px 20px 22px;margin-top:6px}
.lib.stack .lr-in > *{position:relative;box-sizing:border-box}
.lib.stack .lr-panel{position:absolute!important;inset:0;--bw:30px}
.lib.stack .lr .o.sprig{position:absolute!important;left:22px;top:28px;width:28px;height:32px}
.lib.stack .lr-title{margin:0 70px 0 38px;font-size:32px;white-space:normal;line-height:1.1}
.lib.stack .lr-subrow{display:flex;align-items:center;margin-top:10px}
.lib.stack .lr-subrow .o{position:relative;width:46px;height:18px}
.lib.stack .lr-subrow span{margin:0 8px;font-size:14.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib.stack .lr-count{position:absolute!important;right:58px;top:30px;font-size:14px}
.lib.stack .lr .lib-x{position:absolute!important;right:18px;top:22px;width:24px;height:23px}
.lib.stack .lr-tabs{display:flex;gap:4px;margin-top:18px;border-bottom:2px solid #673d1c}
.lib.stack .lr-tab{position:relative;flex:1 1 0;height:42px}
.lib.stack .lr-tab .o{position:absolute;left:4px;top:9px;width:24px;height:22px}
.lib.stack .lr-tab span{position:absolute;left:32px;top:12px;font-size:17px;white-space:nowrap}
.lib.stack .lr-tab.list .o{width:25px}
.lib.stack .lr-tab[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;top:auto;bottom:-3px;height:4px;border-radius:3px;background:#ffa32b}
.lib.stack .lr-sep,.lib.stack .lr-line{display:none}
.lib.stack .lr-list{height:auto;margin:8px 0 0;padding:0;overflow:visible}
.lib.stack .lr-row{position:relative;height:68px}
.lib.stack .lr-row:first-child{margin-top:4px}
.lib.stack .lr-row .sl{position:absolute;left:10px;right:0;bottom:0;height:1px}
.lib.stack .lr-row.cur::before{position:absolute;left:0;right:0;top:-2px;bottom:0}
.lib.stack .lr-row.cur::after{position:absolute;left:0;top:-2px;bottom:0;width:5px}
.lib.stack .lr-pick{position:absolute;left:0;top:0;width:100%;height:68px}
.lib.stack .lr-pick > *{position:absolute}
.lib.stack .lr-thumb{left:12px;top:6px;width:68px;height:56px}
.lib.stack .lr-thumb img{width:100%;height:100%}
.lib.stack .lr-ov{left:30px;top:18px;width:32px;height:32px;border-width:2px}
.lib.stack .lr-ov svg{width:44%;height:44%}
/* On a phone the title has only ~115 px: it wraps in the room the tags left (three lines at most, for "Our Forgotten
   Story (Variation)"), centred on the row (one line showed "Moonlit Wa…" twice and "The Village …" twice;
   2026-10-19). The .15 em makes up for the top padding. */
.lib.stack .lr-t{left:92px;top:calc(50% + .15em);transform:translateY(-50%);max-width:calc(100% - 196px);font-size:17px;line-height:1.1;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;padding-bottom:0;margin-bottom:0}
.lib.stack .lr-d{right:56px;top:26px;font-size:15px}
.lib.stack .lr-add{position:absolute;right:8px;top:16px;width:36px;height:36px}
.lib.stack .lr-add .o{position:absolute;inset:0;width:100%;height:100%}
.lib.stack .lr-empty{padding:40px 0;font-size:17px}
.lib.stack .lr-div{display:block;height:2px;margin-top:14px}
.lib.stack .lr-mini{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:12px;align-items:center;margin-top:14px}
.lib.stack .lr-mini > *{position:relative}
.lib.stack .lr-mthumb{display:block;width:52px;height:50px}
.lib.stack .lr-mthumb img{width:100%;height:100%}
.lib.stack .lr-mtitle{font-size:18px}
.lib.stack .lr-mctl{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:24px}
.lib.stack .lr-mctl > *{position:relative}
.lib.stack .lr-mbtn{width:30px;height:29px}
.lib.stack .lr-mbtn .o{position:absolute;inset:0;width:100%;height:100%}
.lib.stack .lr .lib-play.mplay{width:52px;height:52px}
.lib.stack .lr-mprog{grid-column:1 / -1;display:flex;align-items:center;gap:12px}
.lib.stack .lr .lib-bar.mbar{position:relative;flex:1;height:8px}
.lib.stack .lr .lib-bar.mbar b{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.lib.stack .lr-mtime{font-size:15px}
@media (prefers-reduced-motion:reduce){
  .lib-vinyl .spin{animation:none}
  .lib-ostage > section{animation:none}
}