/* The Library (src/library.js), built from the user's four mock-ups (design/camp/library/mockups/): the
   room; a line from Quill on the ivory card; the open book; Quill'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}
body.in-library .mini-sound{opacity:0!important;pointer-events:none!important}

.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}
.lib-ui{position:absolute;inset:0;transition:opacity .35s ease}
.lib-quill{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-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-quill,.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)}
.lib-time{font:400 14.94px/1 var(--lb-serif);color:#c69a6a;white-space:nowrap}
/* Quill's card */
/* Quill's speech bubble (the user's picture and mock-up, library-bubble.png): her name, her line typed
   out (src/talk.js), the two buttons once it is said. It pops up from its tail. */
.lib-face{display:none}
.lib-say{filter:drop-shadow(0 11px 8px rgba(25,10,3,.34));transition:opacity .22s ease,transform .32s cubic-bezier(.2,1.35,.35,1)}
.lib.say-away .lib-say{opacity:0;transform:scale(.86);visibility:hidden;transition:none}
/* On a desk the box is the picture's own shape scaled (the mock-up's bubble): one image, no seams. */
.nine.speech{border:0;background:url(../assets/camp/library/speech-bubble.webp) 0 0 / 100% 100% no-repeat}
.lib-say-h{display:flex;align-items:flex-start;white-space:nowrap}
.lib-say-h b{font:700 29.76px/1 var(--lb-serif);color:#220800}
.lib-say-h span{margin:8.4px 0 0 26.6px;font:400 17.88px/1 var(--lb-serif);color:#bf7822}
/* a soft dash under the name, and a faint touch under the end of the role (as the mock-up has it) */
.lib-say-rule{display:block;height:3px;border-radius:2px;filter:blur(.4px);background:linear-gradient(90deg,rgba(241,186,113,0) 0,rgba(241,186,113,.95) 5%,rgba(241,186,113,.95) 22%,rgba(241,186,113,0) 28.5%,rgba(241,186,113,0) 85%,rgba(241,186,113,.3) 90%,rgba(241,186,113,.3) 96%,rgba(241,186,113,0) 100%)}
.lib-say-line{margin:0;font:400 27.66px/1.157 var(--lb-serif);color:#1c0200;word-break:keep-all;cursor:default}
.lib-say-acts{transition:opacity .25s ease,transform .25s ease}
.lib.say-typing .lib-say-acts{opacity:0;transform:translateY(4px);visibility:hidden;transition:none}
.lib-sbtn{position:absolute;padding:0;border:1.5px solid #c8822e;border-radius:10px;background:linear-gradient(180deg,#f7c68c,#f1ba79);box-shadow:inset 0 1px 0 rgba(255,236,200,.65);color:#3e1b04;cursor:pointer;text-align:left;transition:filter .15s}
.lib-sbtn .o{position:absolute}
.lib-sbtn span{position:absolute;font:400 19.8px/1 var(--lb-serif);white-space:nowrap}
.lib-sbtn:hover{filter:brightness(1.05)}
.lib-sbtn:focus-visible{outline:2px solid #8a4a14;outline-offset:2px}

/* 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 Quill 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}
/* Quill'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}
.lp-name{margin:0;font:600 59.05px/1 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-tags{margin:0;font:400 24.31px/1 var(--lb-serif);color:#e7d5c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}

/* ================= 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-host{display:contents}
.lib.stage .lib-say{position:absolute;left:871.9px;top:654.8px;width:469.1px;height:250.6px;transform-origin:390.3px 0}
.lib.stage .lib-say > *:not(.nine){position:absolute;margin:0}
.lib.stage .lib-say-h{left:52.4px;top:42.5px}
.lib.stage .lib-say-rule{left:52.1px;top:79.2px;width:166px}
.lib.stage .lib-say-line{left:49.1px;top:90.1px;width:380px}
.lib.stage .lib-say-acts{left:40.1px;top:166.2px;width:393px;height:51px}
.lib.stage .lib-sbtn.b1{left:0;top:0;width:196px;height:51px}
.lib.stage .lib-sbtn.b1 .o{left:14.5px;top:7.5px;width:34px;height:32px}
.lib.stage .lib-sbtn.b1 span{left:53.7px;top:13px}
.lib.stage .lib-sbtn.b2{left:207px;top:0;width:186px;height:51px}
.lib.stage .lib-sbtn.b2 .o{left:17.5px;top:5.5px;width:32px;height:34px}
.lib.stage .lib-sbtn.b2 span{left:57.7px;top:13.1px}
.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}
/* Quill'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:396px;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-tags{left:863px;top:539.3px;max-width:400px}
.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}

/* ---- 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}
.lib.stage .lr-t{left:163.5px;top:16.3px;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-g{left:168px;top:51px;max-width:540px}
.lr-g{font:400 21.1px/1 var(--lb-serif);color:#efd2ad;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}
.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}
/* Quill on a phone: her portrait above the bubble's tail, the bubble's 9-slice at a fifth of the picture */
.lib.stack .lib-host{position:relative;padding-top:80px}
.lib.stack .lib-face{display:block;position:absolute;right:0;top:0;width:82px;height:84px;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-face{transform:translateX(60px);opacity:0;transition:none}
.lib.stack .lib-say{position:relative;padding:40px 26px 28px 30px;transform-origin:calc(100% - 52px) 0}
/* (a 9-slice: the tail and the corners' curves in the borders, whole pixels so the pieces meet cleanly) */
.lib.stack .nine.speech{background:none;border:3px solid transparent;border-image:url(../assets/camp/library/speech-bubble.webp) 360 435 206 280 fill / 72px 87px 41px 56px stretch}
.lib.stack .lib-say > *:not(.nine){position:relative}
.lib.stack .lib-say-h b{font-size:25px}
.lib.stack .lib-say-h span{margin:6px 0 0 14px;font-size:15px}
.lib.stack .lib-say-rule{width:140px;margin-top:9px}
.lib.stack .lib-say-line{margin-top:10px;font-size:19px;line-height:1.38}
.lib.stack .lib-say-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lib.stack .lib-sbtn{position:relative;flex:1 1 122px;height:46px}
.lib.stack .lib-sbtn .o{left:8px;top:8px;width:28px;height:27px}
.lib.stack .lib-sbtn span{left:40px;top:14px;font-size:15px}
.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:6px;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}
/* Quill'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:16px;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-tags{margin-top:8px;font-size:16px;white-space:normal}
.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}
/* 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%}
.lib.stack .lr-t{left:92px;top:14px;max-width:calc(100% - 196px);font-size:19px}
.lib.stack .lr-g{left:93px;top:40px;max-width:calc(100% - 196px);font-size:14px}
.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}
}