@layer features {
  .bookshelf-page { --shelf-accent:#4b79d8; overflow-x:clip; overflow-anchor:none; padding:8px 40px 40px; }
  .bookshelf-heading { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
  .bookshelf-heading h1 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-1px; }
  .bookshelf-stage { position:relative; max-width:1440px; margin:16px auto 0; min-height:610px; }
  .bookshelf-overview { opacity:1; }
  .shelf-level { position:relative; display:flex; flex-direction:column; width:100%; height:clamp(270px,34dvh,380px); padding:0 0 5px; text-align:left; margin-bottom:24px; }
  .shelf-level-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 24px; padding:0 0 8px; }
  .shelf-level-label b { font-size:23px; font-weight:700; letter-spacing:2px; }
  .shelf-level-sections { font-size:11px; color:var(--muted); letter-spacing:1px; line-height:1.8; }
  .shelf-miniatures { flex:1; min-height:0; width:100%; display:flex; align-items:flex-end; gap:3px; padding:10px 5px 0; }
  .miniature-book { position:relative; display:flex; flex-direction:column; align-items:center; flex:var(--book-width) 1 0; min-width:0; height:calc(clamp(250px,32dvh,350px) * var(--book-height)); max-height:100%; background:var(--book-color); color:var(--book-ink); box-shadow:inset 2px 0 3px #fff4,inset -3px 0 4px #0002,2px 3px 4px #0001; border-radius:2px 3px 0 0; transform-origin:center bottom; }
  .miniature-book.section-start:not(:first-child) { margin-left:12px; }
  .shelf-level .shelf-plank { height:3px; background:var(--line); box-shadow:0 3px 5px #00000006; }
  .shelf-level .shelf-plank::before { content:none; }
  .spine-rule { flex:none; width:calc(100% - 10px); height:7px; margin:8px 0 9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; opacity:.35; }
  .spine-title { writing-mode:vertical-rl; font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif; font-size:12px; line-height:1.2; letter-spacing:2px; max-height:calc(100% - 50px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .spine-author { margin-top:auto; margin-bottom:10px; writing-mode:vertical-rl; font-size:7px; max-height:35px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; opacity:.8; }
  .miniature-book .spine-author { display:none; }
  .spine-mark { width:7px; height:7px; margin:8px 0; border:1px solid currentColor; opacity:.4; transform:rotate(45deg); flex:none; }
  .miniature-book .spine-mark { margin-top:auto; }
  .shelf-plank { display:block; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); pointer-events:none; }
  .shelf-plank::before { content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--shelf-accent); transition:width .3s var(--ease); }
  .shelf-level:hover .shelf-plank::before { width:72px; }
  .shelf-browse .shelf-plank::before { content:none; }
  .bookshelf-hint { color:var(--muted); font-size:11px; letter-spacing:1px; text-align:center; margin:18px 0 0; }
  .bookshelf-detail { position:absolute; inset:0; display:flex; flex-direction:column; visibility:hidden; opacity:0; }
  .shelf-detail-heading { display:flex; align-items:center; gap:25px; min-height:44px; }
  .shelf-back { padding:10px 0; min-height:44px; color:var(--muted); font-size:12px; }
  .shelf-back:hover { color:var(--ink); }
  .shelf-detail-heading h2 { font-size:20px; font-weight:500; letter-spacing:4px; padding-left:25px; border-left:1px solid var(--line); }
  .shelf-browse { position:relative; margin-top:0; padding:60px 22px 1px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab; user-select:none; }
  .shelf-track { display:flex; gap:7px; align-items:flex-end; justify-content:flex-start; width:max-content; min-width:100%; height:330px; position:relative; }
  .shelf-sections { display:flex; align-items:center; gap:24px; overflow-x:auto; scrollbar-width:none; margin-top:8px; min-height:44px; flex-shrink:0; }
  .shelf-sections button { flex:none; min-height:44px; font-size:12px; color:var(--muted); border-bottom:2px solid transparent; }
  .shelf-sections button[aria-current] { color:var(--ink); border-color:var(--shelf-accent); }
  .shelf-window { position:relative; flex-shrink:0; }
  .shelf-browse::-webkit-scrollbar { display:none; }
  .shelf-browse.is-dragging,.is-dragging .shelf-book { cursor:grabbing; }
  .shelf-book { cursor:grab; }
  .shelf-divider { position:relative; flex:none; align-self:flex-end; height:300px; width:72px; margin:0 12px 0 18px; color:var(--muted); border-right:2px solid var(--line); }
  .shelf-divider:first-child { margin-left:0; }
  .shelf-divider::after { content:""; position:absolute; right:-2px; bottom:0; width:20px; height:2px; background:var(--shelf-accent); }
  .shelf-divider>span { writing-mode:vertical-rl; font-size:13px; letter-spacing:3px; position:absolute; right:18px; top:14px; }
  .shelf-pan { position:absolute; top:50%; z-index:2; width:40px; height:60px; background:color-mix(in srgb,var(--paper) 94%,transparent); color:var(--ink); font-size:30px; opacity:0; transition:opacity .2s; pointer-events:none; }
  .shelf-pan-prev { left:0; }.shelf-pan-next { right:0; }
  .has-overflow:hover .shelf-pan:not(:disabled),.shelf-pan:focus-visible { opacity:1; pointer-events:auto; }
  .shelf-pan:disabled { visibility:hidden; }
  .shelf-scroll-rail { --scroll-thumb-width:48px; --scroll-thumb-color:color-mix(in srgb,var(--muted) 48%,var(--line)); display:block; appearance:none; flex:none; width:min(360px,80%); height:32px; padding:0; margin:18px auto 0; background:transparent; cursor:ew-resize; accent-color:var(--muted); }
  .shelf-scroll-rail:hover,.shelf-scroll-rail:focus-visible,.shelf-scroll-rail:active { --scroll-thumb-color:var(--muted); }
  .shelf-scroll-rail::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:var(--line); }
  .shelf-scroll-rail::-webkit-slider-thumb { appearance:none; width:var(--scroll-thumb-width); height:5px; margin-top:-1px; background:var(--scroll-thumb-color); border:0; border-radius:5px; transition:background .2s; }
  .shelf-scroll-rail::-moz-range-track { height:3px; border-radius:3px; background:var(--line); }
  .shelf-scroll-rail::-moz-range-thumb { width:var(--scroll-thumb-width); height:5px; border:0; border-radius:5px; background:var(--scroll-thumb-color); transition:background .2s; }
  .shelf-scroll-rail[hidden] { display:none; }
  .shelf-book { position:relative; display:block; flex:0 0 calc(48px * var(--book-width)); width:calc(48px * var(--book-width)); height:calc(324px * var(--book-height)); padding:0; touch-action:pan-x pan-y; }
  .book-spine { display:flex; flex-direction:column; align-items:center; height:100%; width:100%; background:var(--book-color); color:var(--book-ink); border-radius:3px 4px 1px 0; box-shadow:inset 3px 0 4px #fff3,inset -4px 0 5px #0002,3px 3px 6px #0002; transform-origin:center bottom; will-change:transform; position:relative; }
  .book-spine::after { content:""; position:absolute; inset:3px -3px 2px auto; width:3px; background:color-mix(in srgb,var(--book-color),#000 25%); border-radius:0 2px 2px 0; }
  .book-spine .spine-title { flex:none; font-size:var(--spine-font); letter-spacing:4px; max-height:calc(100% - 116px); }
  .book-spine .spine-author { font-size:10px; max-height:60px; letter-spacing:1px; }
  .book-spine .spine-rule { margin-top:15px; margin-bottom:18px; width:calc(100% - 18px); height:9px; }
  .book-spine .spine-mark { margin-bottom:15px; }
  .shelf-book:focus-visible { outline-color:var(--ink); outline-offset:9px; }
  .shelf-book.is-pulled>.book-spine { visibility:hidden; }
  .shelf-hover-label { min-height:34px; display:flex; justify-content:center; align-items:center; gap:18px; margin-top:8px; }
  .shelf-hover-label>span { font-family:"Songti SC",serif; font-size:18px; }
  .shelf-hover-label>small { font-size:11px; color:var(--muted); }
  .bookshelf-detail .bookshelf-hint { margin-top:10px; }
  [data-book-view="shelf"] .bookshelf-overview { visibility:hidden; opacity:0; pointer-events:none; }
  [data-book-view="shelf"] .bookshelf-detail { visibility:visible; opacity:1; }
  .is-shelf-travelling .shelf-level,.is-shelf-travelling .shelf-book { pointer-events:none; }
  body.book-inspecting { overflow:hidden; }
  .book-inspector { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:32px; border:0; background:transparent; color:var(--ink); overflow:auto; }
  .book-inspector::backdrop { background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(3px); animation:book-backdrop-in .8s both; }
  .book-inspector.is-returning::backdrop { animation:book-backdrop-out .9s both; }
  .book-inspector-layout { display:flex; justify-content:center; align-items:center; gap:clamp(55px,8vw,130px); min-height:100%; pointer-events:none; }
  .book-cover-position { position:relative; width:min(310px,32vw,calc(465px * var(--cover-ratio, .667))); aspect-ratio:var(--cover-ratio, .667); flex-shrink:0; perspective:1600px; perspective-origin:left center; }
  .book-flight { position:absolute; inset:0; transform-style:preserve-3d; transform-origin:left center; }
  .book-face { position:absolute; inset:0; background:var(--book-color); color:var(--book-ink); transform:translateZ(calc(var(--thickness) / 2)); border-radius:2px 5px 5px 2px; box-shadow:inset 6px 0 8px #0002,inset -1px 0 2px #fff5,18px 25px 40px #0002; overflow:hidden; display:flex; flex-direction:column; padding:10% 11%; backface-visibility:hidden; }
  .book-face::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px); pointer-events:none; }
  .book-face:has(img) { padding:0; }.book-face img { width:100%; height:100%; object-fit:cover; }
  .book-side { position:absolute; left:0; top:0; width:var(--thickness); height:100%; transform:translateX(-50%) rotateY(-90deg); backface-visibility:hidden; transform-style:preserve-3d; }
  .book-side-content { position:absolute; inset:0 auto auto 0; transform-origin:top left; will-change:auto; }
  /* The page edge belongs opposite the spine, not on a second cover-sized plane. */
  .book-pages { position:absolute; top:3px; bottom:3px; right:3px; width:calc(var(--thickness) - 6px); background:repeating-linear-gradient(90deg,#e4dece 0 1px,#fff9eb 1px 3px); transform:translateX(50%) rotateY(90deg); backface-visibility:hidden; }
  .book-cover-author { font-size:12px; letter-spacing:2px; line-height:1.6; }
  .book-cover-title { font-family:"Songti SC","SimSun",serif; font-size:min(var(--cover-title-size,38px),clamp(24px,2.7vw,38px)); letter-spacing:5px; line-height:1.4; margin-top:20px; z-index:1; text-wrap:balance; flex-shrink:0; }
  .book-cover-art { position:relative; display:block; flex:1; min-height:0; margin:14px -4px 0; opacity:.85; }
  .book-cover-art svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .book-cover-bottom { margin-top:18px; border-top:1px solid currentColor; padding-top:10px; font:10px monospace; letter-spacing:2px; opacity:.65; }
  .book-inspector-info { width:300px; max-width:100%; pointer-events:auto; animation:book-info-in .5s .5s both; }
  .book-inspector-category { font-size:11px; color:var(--muted); margin-bottom:18px; letter-spacing:2px; }
  .book-inspector-info h2 { font-family:"Songti SC","SimSun",serif; font-weight:600; font-size:30px; line-height:1.4; letter-spacing:2px; }
  .book-inspector-author { color:var(--muted); margin-top:14px; font-size:12px; line-height:1.7; }
  .book-inspector-description { font-size:14px; line-height:2; margin-top:30px; white-space:pre-wrap; overflow-wrap:anywhere; }
  .book-description-edit { display:block; margin-top:12px; padding:6px 0; font-size:11px; color:var(--muted); }
  .book-description-edit:hover { color:var(--ink); }
  .book-description-form { margin-top:24px; }
  .book-description-form label { display:block; font-size:12px; color:var(--muted); margin-bottom:10px; }
  .book-description-form textarea { display:block; width:100%; min-height:140px; max-height:40dvh; resize:vertical; padding:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-size:14px; line-height:1.8; }
  .book-description-actions { display:flex; gap:24px; margin-top:10px; }
  .book-description-actions button { min-height:40px; font-size:12px; }
  .book-description-actions button:disabled { opacity:.5; }
  .book-description-status { font-size:12px; line-height:1.7; margin-top:8px; color:var(--muted); }
  .book-description-status:empty { display:none; }
  .book-description-edit[hidden],.book-description-form[hidden],.book-inspector-description[hidden] { display:none; }
  .book-return { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 0; margin-top:40px; border-top:1px solid var(--line); font-size:12px; }.book-return span { font-size:21px; }
  .is-returning .book-inspector-info { animation:book-info-out .25s both; }
  @keyframes book-backdrop-in { from { opacity:0; } to { opacity:1; } }
  @keyframes book-backdrop-out { to { opacity:0; } }
  @keyframes book-info-in { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
  @keyframes book-info-out { to { opacity:0; transform:translateY(10px); } }
  html[data-theme="dark"] .bookshelf-page { --shelf-accent:#7c9fe7; }
  @media(max-width:900px) { .miniature-book.preview-wide { display:none; }.shelf-book { width:calc(44px * var(--book-width)); flex-basis:calc(44px * var(--book-width)); }.shelf-browse { padding-inline:18px; } }
  @media(max-width:600px) {
    .bookshelf-page { padding:4px 20px 30px; }.bookshelf-heading h1 { font-size:26px; }.bookshelf-stage { margin-top:20px; }
    .shelf-level { height:230px; margin-bottom:24px; }.shelf-level-label { display:block; padding-bottom:6px; }.shelf-level-label b { font-size:19px; }.shelf-level-sections { display:block; font-size:10px; letter-spacing:0; margin-top:6px; }
    .shelf-miniatures { gap:3px; padding-inline:2px; }.miniature-book { height:calc(180px * var(--book-height)); }.miniature-book.preview-medium { display:none; }.miniature-book.section-start:not(:first-child) { margin-left:6px; }.miniature-book .spine-title { font-size:10px; letter-spacing:1px; }.miniature-book .spine-rule { margin-top:6px; margin-bottom:7px; }.shelf-plank { height:1px; }.shelf-plank::before { width:22px; }
    .bookshelf-hint { margin-top:24px; font-size:10px; }.shelf-detail-heading { gap:16px; }.shelf-detail-heading h2 { font-size:18px; padding-left:16px; }
    .shelf-browse { margin-inline:-20px; padding:68px 22px 14px; margin-top:18px; }.shelf-track { height:280px; gap:6px; justify-content:flex-start; }.shelf-book { width:calc(48px * var(--book-width)); flex-basis:calc(48px * var(--book-width)); min-width:44px; height:calc(274px * var(--book-height)); }.book-spine .spine-title { font-size:var(--spine-mobile-font); letter-spacing:2px; max-height:calc(100% - 110px); }.shelf-mouse-hint { display:none; }
    .shelf-hover-label { flex-direction:column; gap:6px; margin-top:24px; }.book-inspector { padding:32px 26px; }.book-inspector-layout { flex-direction:column; gap:32px; }.book-cover-position { width:min(215px,52vw); }.book-inspector-info { width:330px; }.book-inspector-category { margin-bottom:8px; }.book-inspector-info h2 { font-size:24px; }.book-inspector-author { margin-top:7px; }.book-inspector-description { margin-top:14px; font-size:13px; }.book-return { margin-top:20px; }.book-cover-title { font-size:min(var(--cover-title-size,25px),25px); margin-top:18px; letter-spacing:2px; }.book-cover-author { font-size:9px; }
  }
  @media(max-width:600px) {
    .bookshelf-stage { min-height:610px; }
    .shelf-window { margin-inline:-20px; }.shelf-browse { margin-inline:0; padding:55px 20px 1px; margin-top:0; }.shelf-sections { gap:20px; }.shelf-divider { height:250px; width:48px; margin-inline:12px; }.shelf-divider>span { right:12px; font-size:12px; }
    .shelf-pan { width:28px; }.has-overflow .shelf-pan:not(:disabled) { opacity:1; pointer-events:auto; }.shelf-hover-label { margin-top:8px; }
  }
  @media(prefers-reduced-motion:reduce) { .bookshelf-page *,.bookshelf-page *::backdrop { animation:none!important; transition:none!important; }.miniature-book { transform:none!important; } }
}