/* Paper, cloth and one shared, gently settling rhythm. */
:root{--settle:cubic-bezier(.22,1,.36,1)}
.physical-library{background:linear-gradient(135deg,#f1f0e5,#e8ecdf);color:#59664d;border:1px solid #dbe0cf;box-shadow:0 3px 12px #58644704;border-radius:5px;padding-top:30px}
.physical-library:before{background:radial-gradient(ellipse at 40% 0,#fff9,transparent 65%)}
.shelf-kicker{color:#909982;letter-spacing:2.5px}
.shelf-atmosphere h2{color:#536449;text-shadow:none;font-size:clamp(34px,4vw,53px);letter-spacing:-1.5px;margin:13px 0}
.shelf-atmosphere p{color:#91977e;letter-spacing:1.5px}
.shelf-scroll{padding:39px 0 0;scrollbar-color:#c2cbb4 transparent;scrollbar-width:thin;overscroll-behavior-x:contain;overflow-anchor:none}
.physical-shelf{--spread:80px;--pull:-76px;--book-scale:1;--hit-width:185px;gap:3px;padding:0 90px 30px;min-height:302px;justify-content:center;isolation:auto;perspective:1500px;user-select:none;-webkit-user-select:none}
.shelf-plank{height:6px;background:linear-gradient(#c3c9b3,#dfe3d4 40%,#c4cbb5);border-top:1px solid #aeb79c66;box-shadow:0 8px 12px #5b684b18,0 -2px 5px #5b684b12;margin-bottom:19px}
.shelf-plank:after{opacity:.3}
.shelf-bottom{color:#959c86;font-size:9px}
.shelf-bottom>span:first-child{color:#879277}
.shelf-bottom .shelf-touch-hint{display:none}

/* Hit targets keep a fixed layout width. Only composited transforms move. */
.physical-library .shelf-slot,
.physical-library .shelf-slot:hover,
.physical-library .shelf-slot:focus-visible{
  --slot-width:calc(var(--book-depth) + 3px);
  width:var(--slot-width);margin:0;z-index:2;
  transform:translateX(var(--shelf-shift,0px));
  transition:transform 620ms var(--settle);
}
.physical-library .shelf-slot.is-before{--shelf-shift:calc(-1 * var(--spread))}
.physical-library .shelf-slot.is-after{--shelf-shift:var(--spread)}
.physical-library .shelf-slot.is-active{--shelf-shift:var(--pull);z-index:20}
.physical-library .book-object,
.physical-library .shelf-slot:hover .book-object,
.physical-library .shelf-slot:focus-visible .book-object{
  transform:scaleX(var(--book-scale)) rotateY(-2deg) rotateZ(var(--lean));
  transition:transform 680ms var(--settle);
}
.physical-library .shelf-slot.is-active .book-object{transform:translateY(-12px) scaleX(var(--book-scale)) rotateY(-76deg) rotateZ(-1deg)}
.shelf-slot.is-active:after{content:"";position:absolute;left:0;top:-22px;width:var(--hit-width);height:calc(100% + 38px);z-index:5}
.physical-library .shelf-slot:before{background:#4c584038;filter:blur(7px);left:4px;right:-7px;bottom:-10px;transform:skewX(-20deg) scaleX(1);transform-origin:left;transition:transform 680ms var(--settle),opacity 680ms var(--settle)}
.physical-library .shelf-slot.is-active:before{transform:skewX(-20deg) scaleX(2.8);opacity:.7}
.book-spine{box-shadow:inset 0 1px #ffffff35,2px 3px 6px #26321c30}
.book-spine:before{opacity:.24}
.spine-author{display:none}
.cover-author,.opened-cover p{opacity:1}
.book-spine>.spine-title{font-size:12px;letter-spacing:1.2px}
.spine-floret{font-size:11px}
.spine-foot{font-size:6px;letter-spacing:1px}
.book-front{box-shadow:inset -2px 0 #0003,inset 0 1px #ffffff35}
/* All faces share the cover length, including the smaller homepage volumes. */
.book-object{--cover-width:178px}
.compact-library .book-object{--cover-width:145px}
.physical-library .book-front{width:var(--cover-width)}
.book-top{height:calc(var(--cover-width) - 3px)}
.book-pages{left:3px;width:calc(var(--book-depth) - 5px);transform:translateZ(calc(3px - var(--cover-width)))}
.physical-library .book-ribbon{opacity:1;transition:opacity 160ms;left:calc(var(--slot-width)/2 - 2px);width:4px;height:16px}
.physical-library .shelf-slot:hover .book-ribbon,.physical-library .shelf-slot:focus-visible .book-ribbon{opacity:1}
.physical-library .shelf-slot.is-active .book-ribbon{opacity:0}
.physical-library .book-tooltip,
.physical-library .shelf-slot:hover .book-tooltip,
.physical-library .shelf-slot:focus-visible .book-tooltip{opacity:0;transform:translateY(18px);bottom:-20px;left:0;background:#faf9f0;color:#57664a;box-shadow:0 4px 12px #43513514;border:1px solid #d9dfcd;transition:opacity 180ms,transform 360ms var(--settle);font-size:11px;padding:7px 11px}
.physical-library .shelf-slot.is-active .book-tooltip{opacity:1;transform:translateY(8px);transition-delay:100ms}
.book-tooltip small{color:#919b83}
.shelf-bookend,.shelf-add{transform:translateX(0);transition:transform 620ms var(--settle),color 200ms,background 200ms}
.has-open-book .shelf-bookend,.has-open-book .shelf-add{transform:translateX(var(--spread))}
.shelf-bookend:before{background:linear-gradient(90deg,#a6b096,#778666 60%,#5e7051);box-shadow:3px 3px 7px #60704d1c}
.shelf-bookend span{background:linear-gradient(#a6b096,#7c8b6d)}
.shelf-add{border-color:#adb89b80;color:#8b9b78;margin-left:17px}
.shelf-add:hover{border-color:#859870;color:#5d764c;background:#dce4cf50}
.compact-library{display:block;min-height:290px;padding:25px 28px 18px}
.compact-library .shelf-atmosphere{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-left:0;text-align:left}
.compact-library .shelf-kicker{order:2;font-size:7px;letter-spacing:1.5px}
.compact-library h3{color:#5d6f51;font-size:21px;margin:0}
.compact-library h3 i{display:inline;color:#94a181}
.compact-library .shelf-scroll{padding:32px 0 0}
.compact-library .physical-shelf{--spread:58px;--pull:-53px;--book-scale:.8;--hit-width:143px;padding:0 70px 20px;gap:3px;justify-content:center}
.compact-library .shelf-slot,.compact-library .shelf-slot:hover,.compact-library .shelf-slot:focus-visible{--slot-width:calc(var(--book-depth) * .8 + 3px)}
.compact-library .shelf-slot.is-active .book-object{transform:translateY(-8px) scaleX(var(--book-scale)) rotateY(-76deg) rotateZ(-1deg)}
.compact-library .shelf-plank{height:5px}
.compact-library .shelf-bottom{margin-top:6px}

/* Category labels behave like paper index tabs, with one sliding bookmark. */
.filters{position:relative;isolation:isolate;align-items:center;gap:6px}
.filters .filter{position:relative;z-index:1;background:transparent;border-radius:4px;color:#89957d;transition:color 200ms,transform 320ms var(--settle);padding:9px 16px}
.filters .filter.active{background:transparent;color:#36592d}
.filter-marker{position:absolute;z-index:0;pointer-events:none;background:#d5e1c4;border:1px solid #bfcea9;border-radius:4px;box-shadow:0 3px 6px #65774f12,inset 0 1px #ffffff80;transform-origin:0 0}
.filter-marker:after{content:"";position:absolute;bottom:-1px;left:11px;right:11px;height:2px;background:#9bac84;opacity:.6}
.filters .filter:active{transform:translateY(1px)}
.search-field{transition:border-color 220ms,box-shadow 220ms}
.search-field:focus-within{border-color:#a6b595;box-shadow:0 3px 10px #65774f0b}
#results{overflow-anchor:none}

/* The specimen cards above the shelf share the same restrained paper motion. */
.specimen-grid{padding-top:16px}
.specimen-slot{position:relative;min-width:0;perspective:1000px}
.specimen-slot:hover,.specimen-slot:focus-within{z-index:4}
.specimen-slot>.specimen-card{height:100%}
.specimen-slot:nth-child(3n+2) .specimen-card{background:#f3f1e5}
.specimen-slot:nth-child(3n+3) .specimen-card{background:#eff1e6}
.specimen-card{transition:transform 480ms var(--settle),box-shadow 480ms var(--settle),border-color 300ms;transform-origin:50% 65%;transform-style:preserve-3d}
.specimen-card:before{transition:transform 500ms var(--settle),opacity 500ms}
.specimen-card:after{content:'翻开 ↗';position:absolute;bottom:45px;right:20px;font-size:10px;letter-spacing:2px;color:#5f7950;opacity:0;transform:translateY(8px);transition:opacity 260ms,transform 400ms var(--settle);pointer-events:none}
.specimen-card.paper-lifted{transform:perspective(850px) translateY(-28px) rotateX(var(--paper-rx,6deg)) rotateY(var(--paper-ry,-6deg)) rotateZ(-1.2deg) scale(1.025);box-shadow:7px 30px 35px #52634332,0 3px 8px #5263431c;border-color:#aaba98;transition-duration:220ms,480ms,300ms;z-index:4}
.specimen-card.paper-lifted:before{transform:translateY(-10px) rotate(8deg) scaleX(.9);opacity:.4}
.specimen-card.paper-lifted:after,.specimen-card:focus-within:after{opacity:1;transform:translateY(0)}
.specimen-card .card-flower{transition:transform 500ms var(--settle)}
.specimen-card.paper-lifted .card-flower{transform:translateY(-9px) rotate(8deg)}
.specimen-card:focus-within:not(.paper-lifted){transform:perspective(850px) translateY(-14px) rotateX(3deg);box-shadow:0 20px 30px #52634320}
@media(hover:hover){
  .filters .filter:hover{transform:translateY(-3px) rotate(-1.5deg);color:#5e7550}
  .filters .filter.active:hover{transform:translateY(-2px)}
  .specimen-card:hover:not(.paper-lifted){transform:translateY(-14px) rotate(-1deg);box-shadow:3px 18px 28px #52634320}
}
dialog[open]::backdrop{animation:veil-in 240ms ease-out}
@keyframes veil-in{from{opacity:0}to{opacity:1}}

@media(max-width:1100px){
  .physical-shelf{justify-content:flex-start}
  .compact-library .physical-shelf{justify-content:flex-start}
  .compact-library h3{font-size:20px}
}
@media(max-width:680px){
  .physical-library{padding-top:26px}
  .shelf-atmosphere h2{font-size:37px}
  .shelf-scroll{padding:33px 0 0}
  .physical-shelf{min-height:272px;padding-left:75px;padding-right:115px}
  .compact-library .shelf-atmosphere{display:block;text-align:center}
  .compact-library .shelf-kicker{font-size:7px}
  .compact-library .physical-shelf{justify-content:flex-start;min-height:210px;padding-left:60px;padding-right:75px}
  .compact-library h3{font-size:20px}
  .filters{gap:4px}
  .filters .filter{padding:8px 12px;font-size:10px}
}
@media(hover:none){
  .shelf-bottom .shelf-touch-hint{display:inline}
  .shelf-bottom .shelf-desktop-hint{display:none}
  .physical-library .book-tooltip{display:none}
  .specimen-card:hover:not(.paper-lifted){transform:none;box-shadow:1px 4px 7px #64674d05}
}
@media(prefers-reduced-motion:reduce){
  .physical-library *,.filters *,.specimen-card,.specimen-card:before,.specimen-card:after,.card-flower{transition:none!important;animation:none!important}
  .specimen-card:hover:not(.paper-lifted),.specimen-card.paper-lifted,.specimen-card:focus-within:not(.paper-lifted),.filters .filter:hover{transform:none}
  dialog[open]::backdrop{animation:none}
}