.library-view {
  --shelf-cover-width: clamp(210px, min(18vw, 28svh), 330px);
  --shelf-top-space: clamp(28px, 4svh, 48px);
  max-width: 1980px; margin: auto; padding: 32px clamp(28px, 3vw, 64px) 28px;
}
.library-overview { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.current-book-info { min-width: 0; max-width: 800px; }
.current-book-info h1 { font: 32px/1.35 var(--serif); letter-spacing: .05em; margin: 0 0 8px; }
.current-book-info [data-current-description] { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.segmented { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 9px; padding: 4px; gap: 4px; }.segment { border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: inline-flex; justify-content: center; gap: 8px; align-items: center; min-height: 44px; min-width: 94px; font-size: 14px; padding: 10px 17px; }.segment .icon { width: 19px; height: 19px; }.segment.active { background: var(--surface-raised); color: var(--accent-strong); box-shadow: 0 2px 7px #0001; }.segment:hover { background: var(--accent-wash); }
.book-stage { position: relative; margin-top: 12px; border-radius: 12px; padding: 12px 22px 2px; overflow: hidden; background: radial-gradient(ellipse at 50% 74%, #1f405a33 0%, transparent 65%); }
:root[data-theme="paper"] .book-stage { background: radial-gradient(ellipse at 50% 74%, #d6cec04a 0%, transparent 65%); }
.books { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(40px, 7vw, 115px); align-items: center; padding: 14px 0 6px; min-height: 315px; }
.book-display { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 164px; padding: 0; border: 0; background: transparent; text-align: center; flex: 0 0 auto; }
.book-cover { position: relative; display: flex; flex-direction: column; align-items: center; width: 158px; aspect-ratio: .71; padding: 24px 15px 17px; overflow: hidden; color: #d8be8d; border: 1px solid #8d774e85; border-radius: 2px 8px 8px 2px; background: #182d3b; box-shadow: inset 5px 0 4px #0008, inset 7px 0 1px #d4b67530, 7px 13px 24px #0005; transform: perspective(1000px) rotateY(-9deg); }
.book-cover::after { position: absolute; content: ''; inset: 0; opacity: .09; pointer-events: none; background: repeating-linear-gradient(90deg, transparent, transparent 2px, #fff3 2px, #fff3 3px); }
.cover-frame { position: absolute; inset: 12px 11px 12px 14px; border: 1px solid #d7b87040; border-radius: 1px; pointer-events: none; }
.cover-imprint { font-size: 6px; letter-spacing: .17em; opacity: .8; white-space: nowrap; }.cover-title { font: 29px/1.5 var(--serif); letter-spacing: .12em; margin-top: 24px; z-index: 1; }.cover-title > span { display: block; }.cover-subtitle { font-size: 5.5px; letter-spacing: .08em; opacity: .7; margin-top: 8px; z-index: 1; white-space: nowrap; }
.cover-art { width: 96%; height: 104px; position: absolute; bottom: 18px; color: inherit; stroke: currentColor; stroke-width: .7; opacity: .37; }.cover-art circle { fill: currentColor; stroke: none; opacity: .3; }.cover-art .art-water { opacity: .4; }
.cover-bottom { display: flex; width: 100%; justify-content: space-between; margin-top: auto; font-size: 5px; letter-spacing: .14em; z-index: 1; }.cover-bottom span:last-child { border: 1px solid currentColor; padding: 1px 2px; }
.cover-sand { color: #6e583c; background: linear-gradient(125deg, #d5c4a0, #e4d5b5); border-color: #b69d70; }.cover-sand .cover-frame { border-color: #92764c66; }.cover-sand .cover-art { opacity: .55; }.cover-forest { color: #b0bea4; background: linear-gradient(135deg, #284139, #192d2b); border-color: #506958; }
.cover-terracotta { color: #ebcda7; background: linear-gradient(130deg, #67483b, #352b2a); border-color: #936d55; }
.cover-slate { color: #c7cfd3; background: linear-gradient(130deg, #405465, #222f3e); border-color: #6a8091; }
.cover-wine { color: #d9b7ad; background: linear-gradient(130deg, #533e48, #30212d); border-color: #816474; }
.book-display.is-selected { width: 203px; }.book-display.is-selected .book-cover { width: 182px; box-shadow: inset 5px 0 4px #0008, inset 7px 0 1px #d4b67530, 10px 15px 40px #0007, 0 0 70px #b7955620; transform: perspective(1000px) rotateY(-5deg) translateY(-3px); border-color: #c9a96d; }.book-display.is-selected .cover-title { font-size: 33px; margin-top: 29px; }.book-display.is-selected .cover-subtitle { font-size: 6px; }
.book-display:hover .book-cover { transform: translateY(-7px) rotateY(0); }.book-display:focus-visible { outline-offset: 10px; border-radius: 4px; }
.book-caption { display: flex; flex-direction: column; gap: 3px; }.book-caption strong { font-size: 13px; font-weight: 400; }.book-caption small { color: var(--faint); font-size: 10px; }.is-selected .book-caption strong { color: var(--accent-strong); }
.shelf-floor { position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .13; bottom: 85px; box-shadow: 0 10px 32px 4px #b58b4921; }
.shelf-navigation { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 2px 0 4px; }.shelf-navigation > span { color: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .15em; }.shelf-navigation b { color: var(--accent); font-weight: 400; }.shelf-navigation .icon-button { width: 28px; height: 28px; }.shelf-navigation .icon-button:first-child .icon { transform: rotate(180deg); }.shelf-navigation .icon { width: 13px; height: 13px; }
.current-book { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line-soft); padding: 23px 0; }.current-book .eyebrow { margin-bottom: 6px; font-size: 9px; }.current-book h2 { font: 23px var(--serif); margin: 0 0 7px; }.current-book p:not(.eyebrow) { color: var(--muted); font-size: 11px; margin: 0; }.current-book .button { flex-shrink: 0; }.current-book .button .icon { order: 2; margin-left: 15px; }
.creation-dock { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }.dock-item { display: flex; align-items: center; gap: 16px; padding: 19px 20px; background: transparent; text-align: left; border: 0; border-right: 1px solid var(--line); min-width: 0; }.dock-item:last-child { border-right: 0; }.dock-item:hover { background: var(--accent-wash); }.dock-symbol { color: var(--accent); display: flex; }.dock-symbol .icon { width: 23px; height: 23px; }.dock-item strong { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; }.dock-item small { color: var(--faint); font-size: 10px; display: block; margin-top: 5px; white-space: nowrap; }.dock-number { font-size: 9px; margin-left: auto; align-self: flex-start; color: var(--faint); opacity: .5; }
.grid-mode .books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 780px; margin: auto; }.grid-mode .book-display, .grid-mode .book-display.is-selected { width: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.grid-mode .book-display.is-selected { border-color: var(--accent); }.grid-mode .book-cover, .grid-mode .book-display.is-selected .book-cover { width: 134px; transform: none; }.grid-mode .book-display .cover-title, .grid-mode .book-display.is-selected .cover-title { font-size: 24px; margin-top: 16px; }.grid-mode .cover-subtitle { font-size: 5px; }.grid-mode .shelf-floor { display: none; }.grid-mode .books { padding-bottom: 20px; }
.empty-search { text-align: center; padding: 70px 12px; color: var(--muted); font-size: 12px; }
.books.shelf-carousel { display: block; min-height: 0; height: calc(var(--shelf-cover-width) / .71 + var(--shelf-top-space) + 52px); padding: 0; cursor: grab; touch-action: pan-y; user-select: none; isolation: isolate; }
.shelf-carousel.is-dragging { cursor: grabbing; }
.shelf-carousel .book-display, .shelf-carousel .book-display.is-selected { position: absolute; top: var(--shelf-top-space); left: 50%; display: flex; width: calc(var(--shelf-cover-width) + 20px); padding: 0; transition: none; touch-action: pan-y; cursor: inherit; will-change: transform; }
.shelf-carousel .book-cover, .shelf-carousel .book-display.is-selected .book-cover { width: var(--shelf-cover-width); padding: calc(var(--shelf-cover-width) * .13) calc(var(--shelf-cover-width) * .08) calc(var(--shelf-cover-width) * .09); transform-origin: center; transition: border-color .2s, box-shadow .2s; }
.shelf-carousel .cover-frame { inset: calc(var(--shelf-cover-width) * .07); }
.shelf-carousel .cover-imprint { font-size: calc(var(--shelf-cover-width) * .034); }
.shelf-carousel .book-display .cover-title, .shelf-carousel .book-display.is-selected .cover-title { font-size: calc(var(--shelf-cover-width) * .18); margin-top: calc(var(--shelf-cover-width) * .135); }
.shelf-carousel .cover-subtitle, .shelf-carousel .book-display.is-selected .cover-subtitle { font-size: calc(var(--shelf-cover-width) * .034); margin-top: calc(var(--shelf-cover-width) * .045); }
.shelf-carousel .cover-art { height: calc(var(--shelf-cover-width) * .59); bottom: calc(var(--shelf-cover-width) * .1); }
.shelf-carousel .cover-bottom { font-size: calc(var(--shelf-cover-width) * .028); }
.shelf-carousel .book-caption strong { font-size: clamp(13px, 1.15vw, 18px); }
.shelf-carousel .book-caption { gap: 1px; opacity: 0; }.shelf-carousel .is-selected .book-caption { opacity: 1; }.shelf-carousel .book-display { gap: 11px; }.shelf-carousel .book-caption small { display: none; }
.book-stage .shelf-floor { bottom: 48px; }
.shelf-navigation { margin: 1px 0 13px; }
.shelf-stage-layout { width: 100%; }
.shelf-rotation { min-width: 0; }
.library-action-dock { margin: 23px auto 0; padding: 24px 25px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
.library-mode-actions { display: grid; grid-template-columns: .82fr 1.18fr 1.18fr .82fr; align-items: center; gap: 14px; min-width: 0; }
.library-mode-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 84px; padding: 13px 10px; text-align: left; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-soft); transition: transform .2s, border-color .2s, background .2s; }
.library-mode-button small, .library-mode-button strong { display: block; }.library-mode-button small { font-size: 9px; color: var(--faint); margin-bottom: 6px; white-space: nowrap; }.library-mode-button strong { font-size: 12px; font-weight: 500; white-space: nowrap; }.mode-icon { color: var(--muted); display: flex; }.mode-icon .icon { width: 21px; height: 21px; }
.library-mode-button.is-primary { min-height: 118px; border-color: color-mix(in srgb, var(--accent) 57%, transparent); background: radial-gradient(ellipse at 50% 0, var(--accent-wash), transparent 85%), var(--surface); box-shadow: 0 8px 24px #0002; }.library-mode-button.is-primary strong { font: 24px var(--serif); color: var(--accent-strong); }.library-mode-button.is-primary small, .library-mode-button.is-primary .mode-icon { color: var(--accent); }.library-mode-button.is-primary .icon { width: 28px; height: 28px; }
.library-mode-button:hover { border-color: var(--accent); background-color: var(--accent-wash); transform: translateY(-3px); }
.grid-mode .shelf-navigation { display: none; }
@media (min-width: 1700px) { .library-view { padding-top: 40px; }.library-mode-button.is-side strong { font-size: 14px; } }
@media (max-width: 1150px) { .library-view { padding: 28px; }.dock-item { gap: 10px; padding: 17px 13px; }.dock-number { display: none; }.books { gap: 45px; } }
@media (max-width: 800px) { .creation-dock { grid-template-columns: repeat(2, 1fr); }.dock-item:nth-child(2) { border-right: 0; }.dock-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.books { gap: 24px; }.book-cover { width: 130px; }.book-display { width: 137px; }.book-display.is-selected { width: 157px; }.book-display.is-selected .book-cover { width: 149px; }.cover-title { font-size: 22px; margin-top: 17px; }.book-display.is-selected .cover-title { font-size: 27px; margin-top: 19px; }.cover-imprint { font-size: 5px; }.cover-subtitle, .book-display.is-selected .cover-subtitle { font-size: 4.5px; }.books { min-height: 280px; }.shelf-floor { bottom: 79px; }.current-book .button { font-size: 11px; padding-inline: 13px; } }
@media (max-width: 600px) { .library-view { padding: 25px 17px; }.book-stage { padding-inline: 0; }.books { gap: 0; min-height: 300px; }.book-display:not(.is-selected) { display: none; }.book-display.is-selected { width: 195px; }.book-display.is-selected .book-cover { width: 175px; }.book-display.is-selected .cover-title { font-size: 33px; margin-top: 24px; }.book-display.is-selected .cover-subtitle { font-size: 6px; }.current-book { flex-wrap: wrap; gap: 16px; }.current-book .button { width: 100%; }.current-book p:not(.eyebrow) { line-height: 1.8; }.dock-item { padding: 16px 10px; }.dock-symbol .icon { width: 18px; }.dock-item small { font-size: 9px; }.grid-mode .books { grid-template-columns: 1fr; width: 100%; }.grid-mode .book-display:not(.is-selected) { display: flex; }.grid-mode .book-display { flex-direction: row; gap: 20px; padding: 15px; }.grid-mode .book-cover, .grid-mode .book-display.is-selected .book-cover { width: 100px; flex-shrink: 0; }.grid-mode .book-display.is-selected .cover-title, .grid-mode .book-display .cover-title { font-size: 20px; margin-top: 5px; }.grid-mode .cover-imprint, .grid-mode .cover-subtitle, .grid-mode .cover-bottom { display: none; }.grid-mode .book-caption { text-align: left; }.grid-mode .books { min-height: 0; } }
@media (max-width: 1150px) { .library-action-dock { padding-inline: 15px; }.library-mode-actions { gap: 8px; }.library-mode-button { gap: 7px; }.library-mode-button.is-primary strong { font-size: 19px; }.library-mode-button.is-side .mode-icon { display: none; } }
@media (max-width: 600px) {
  .library-overview { flex-wrap: wrap; gap: 14px; padding-bottom: 14px; }.current-book-info { flex-basis: 100%; }.current-book-info h1 { font-size: 27px; }.library-overview .segmented { margin-left: auto; }.segment { min-width: 86px; padding-inline: 13px; }
  .shelf-carousel .book-display, .shelf-carousel .book-display.is-selected { display: flex; }
  .library-view { --shelf-cover-width: 200px; --shelf-top-space: 24px; }
  .library-action-dock { margin-top: 9px; padding: 14px 12px; }.library-mode-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.library-mode-button.is-primary { grid-row: 1; min-height: 90px; }.library-mode-button.is-side { grid-row: 2; min-height: 63px; }.library-mode-button.is-primary strong { font-size: 18px; }.library-mode-button.is-primary .icon { width: 21px; height: 21px; }.library-mode-button.is-side .mode-icon { display: flex; }.library-mode-button small { font-size: 8px; }
}
@media (max-height: 820px) and (min-width: 801px) {
  .library-view { --shelf-cover-width: clamp(154px, calc((100svh - 460px) * .71), 238px); --shelf-top-space: 12px; padding-top: 10px; padding-bottom: 10px; }
  .library-overview { padding-bottom: 10px; gap: 24px; }
  .current-book-info h1 { font-size: 28px; margin-bottom: 5px; }
  .book-stage { margin-top: 8px; padding-top: 6px; }
  .books.shelf-carousel { height: calc(var(--shelf-cover-width) / .71 + var(--shelf-top-space) + 36px); }
  .shelf-navigation { margin-bottom: 2px; }
  .library-action-dock { margin-top: 4px; padding-block: 15px; }
  .library-mode-button.is-primary { min-height: 90px; }.library-mode-button.is-side { min-height: 65px; }
}