.community-library { pointer-events: auto; background: #06100c; color: #c9e8d3; }
.library-approach { position: relative; height: calc(100svh + 360px); }
.library-scene { height: 100svh; min-height: 620px; position: sticky; top: 0; overflow: hidden; isolation: isolate; background: #071b14; }
.library-stage { position: absolute; width: max(100%, 150svh); height: 100%; left: 50%; transform: translateX(-50%); }
.library-exterior-art { width: 100%; height: 100%; object-fit: fill; display: block; image-rendering: pixelated; }
.library-byte { position: absolute; z-index: 2; width: clamp(92px, 8.8vw, 150px); height: auto; left: calc(18% + var(--library-progress, 0) * 54%); bottom: 22%; transform: translateX(-50%) scaleX(var(--byte-dir, 1)); filter: drop-shadow(4px 6px 0 #06100c80); }
.library-route { position: absolute; left: 22%; width: 44%; bottom: 21%; height: 2px; border-top: 2px dashed #edd89790; }
.library-route::after { content: '›'; position: absolute; right: -15px; top: -23px; font: 32px var(--f-pixel); color: #efdca3; }
.library-route i { display: block; width: calc(var(--library-progress, 0) * 100%); height: 2px; background: #ffc15c; }
.library-door-glow { position: absolute; left: 69%; top: 52%; width: 8%; height: 20%; background: #ffd28514; filter: blur(14px); pointer-events: none; animation: library-lamp 6s ease-in-out infinite; }
.library-copy { position: absolute; z-index: 3; top: 12%; left: max(5%, calc((100% - 1450px) / 2)); width: min(42%, 660px); text-shadow: 0 3px 0 #03100c, 0 0 14px #03100c; }
.library-kicker { color: #f6c260; text-transform: uppercase; margin: 0 0 18px; font: 600 13px/1.5 var(--f-mono); letter-spacing: .065em; }
.library-kicker::after { content: ''; display: inline-block; width: 38px; border-top: 1px solid #f6c260; margin: 0 0 4px 16px; }
.library-copy h2, .reading-header h2 { margin: 0; color: #bdeccb; font: 700 clamp(46px, 4.2vw, 64px)/1.02 var(--f-pixel); letter-spacing: -.02em; }
.library-intro { margin: 20px 0 0; font: 14px/1.75 var(--f-mono); }
.library-enter, .library-link { border: 1px solid #98c7ad; box-shadow: 3px 3px 0 #020c0780, inset 0 0 0 2px #072317; background: #07150e; color: #bcebd3; min-height: 44px; padding: 11px 18px; cursor: pointer; text-decoration: none; font: 600 14px/1.4 var(--f-mono); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background .18s, border-color .18s; }
.library-enter { margin-top: 26px; color: #ffcf73; border: 2px solid #eaba57; padding: 13px 24px; font: 600 23px/1.2 var(--f-pixel); }
.library-enter:hover, .library-link.amber:hover { background: #2a2814; border-color: #ffe1a0; }
.library-enter:disabled { opacity: .7; cursor: wait; }
.library-link:hover { background: #183e2b; }
.library-link.amber { border-color: #edbd59; color: #ffcf73; }
.library-controls { position: absolute; z-index: 3; left: 5%; bottom: 17%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #06130edb; }
.library-controls p { margin: 0 14px 0 0; color: #ecddb6; font: 12px/1.5 var(--f-mono); }
.library-step { width: 44px; height: 44px; background: #06160e; border: 1px solid #94bca3; color: #cfecd5; cursor: pointer; font: 26px/1 var(--f-pixel); touch-action: none; }
.library-step:hover { background: #193d28; }
.library-audio.music-bar { display: none; position: relative; left: auto; bottom: auto; width: max-content; }
.library-lang { position: absolute; z-index: 4; right: 5%; top: 28px; display: flex; gap: 3px; }
.library-lang button { min-height: 44px; padding: 5px 9px; border: 1px solid transparent; background: #07170dcc; color: #b6cfbd; cursor: pointer; font: 12px var(--f-mono); }
.library-lang button[aria-pressed=true] { border-color: #90bfa0; color: #d2eed6; }
.library-scene::after { content: ''; position: absolute; z-index: 5; inset: 0; background: #07120d; opacity: 0; pointer-events: none; transition: opacity .18s; }
.library-approach.entering .library-scene::after { opacity: clamp(0, calc((var(--library-progress, 0) - .8) * 5), 1); }

.library-interior { position: relative; isolation: isolate; padding: 88px 4% 32px; min-height: 1000px; overflow: hidden; background: #06120d; }
.library-interior-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: fill; image-rendering: pixelated; filter: brightness(.7); }
.library-interior::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.library-interior::before { content: ''; position: absolute; z-index: -1; right: 3%; top: 48%; width: 100px; height: 100px; background: radial-gradient(circle,#ffc15c29,transparent 70%); filter: blur(10px); pointer-events: none; animation: library-lamp 6s ease-in-out infinite; }
.reading-inner { width: 71%; max-width: 1220px; margin-left: 4%; position: relative; }
.reading-header { position: relative; padding-bottom: 30px; max-width: 90%; }
.reading-header h2 { font-size: clamp(42px, 4vw, 65px); text-shadow: 0 3px 0 #00140b; }
.reading-header .library-intro { max-width: 700px; display: inline-block; padding: 5px 8px 5px 0; margin-top: 14px; }
.reading-header .library-kicker, .reading-header .library-intro { text-shadow: 0 2px 0 #03100c, 0 0 8px #03100c; }
.reading-header .library-lang { right: 0; top: -36px; }
.library-collections { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
.library-board { position: relative; min-width: 0; padding: 20px 15px 15px; border: 6px solid #5d4b2b; outline: 1px solid #a0824b; background: repeating-linear-gradient(0deg, #ffffff02 0px 1px, transparent 1px 6px), #092219; box-shadow: inset 0 0 0 2px #102f23, inset 0 0 22px #020c08, 5px 7px 0 #020a0780; }
.library-board::before, .library-board::after { content: ''; position: absolute; top: 2px; width: 5px; height: 5px; background: #c08b39; box-shadow: 0 2px 0 #261f14; }
.library-board::before { left: 2px; } .library-board::after { right: 2px; }
.library-board-head { margin-bottom: 17px; border-bottom: 1px solid #58765a; padding-bottom: 12px; }
.library-board-head h3 { color: #bbefd4; font: 700 clamp(24px, 2.2vw, 36px)/1.15 var(--f-pixel); margin: 0; }
.library-board-head p { text-transform: uppercase; color: #a5cbbc; letter-spacing: .06em; font: 10px/1.5 var(--f-mono); margin: 6px 0 0; }
.library-card-list { display: grid; gap: 12px; }
.library-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 130px; padding: 12px; background: linear-gradient(110deg,#ffedc3, #e9d9b0 68%, #f4e5c1); color: #102218; text-decoration: none; box-shadow: 3px 4px 0 #020a0780, inset 0 0 0 1px #ecce90; border: 1px solid #b49964; transition: background .18s, box-shadow .18s; }
.library-card::before { content: ''; position: absolute; left: 12px; top: -3px; width: 6px; height: 6px; background: #ffc15c; box-shadow: 1px 2px 0 #7b4d1b; }
.library-card:hover { background: #fff2d2; box-shadow: 3px 4px 0 #020a0780, inset 0 0 0 2px #9a752e; }
.library-card:focus-visible { outline-color: #ffe2a0; }
.library-cover { flex: none; width: clamp(65px, 6vw, 98px); height: auto; border: 1px solid #385737; }
.library-card-copy { min-width: 0; flex: 1; }
.library-card h4 { font: 700 clamp(16px, 1.35vw, 21px)/1.18 var(--f-pixel); margin: 0 0 9px; overflow-wrap: anywhere; }
.library-category { background: #bbd5af; color: #153321; display: inline-block; border-radius: 12px; padding: 3px 7px; font: 9px/1.4 var(--f-mono); }
.library-read { display: block; margin-top: 8px; font: 600 11px/1.4 var(--f-mono); color: #674619; }
.library-author { font: 10px/1.6 var(--f-mono); overflow-wrap: anywhere; }
.library-card-arrow { font: 30px/1 var(--f-pixel); color: #506147; }
.square-card { min-height: 111px; }
.library-filters { display: flex; gap: 5px; margin-bottom: 12px; }
.library-filters button { flex: 1; min-width: 0; min-height: 44px; cursor: pointer; padding: 7px 4px; background: #06170f; border: 1px solid #6b9e84; color: #cbe9d6; font: 11px/1.4 var(--f-mono); }
.library-filters button[aria-pressed=true] { background: #b4efce; color: #062819; box-shadow: inset 0 0 0 2px #82baa1; }
.library-board-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.library-board-actions .library-link { font-size: 11px; padding: 9px 10px; }
.library-empty { border: 1px dashed #6a987d; background: #071a12; padding: 22px 18px; min-height: 265px; }
.library-empty h4 { font: 600 27px/1.2 var(--f-pixel); margin: 0 0 14px; }
.library-empty p { font: 12px/1.8 var(--f-mono); }
.library-empty .library-link { font-size: 12px; margin-top: 15px; }
.reading-audio.music-bar { display: none; position: relative; bottom: auto; left: auto; width: max-content; }
.library-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes library-lamp { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

@media (min-width: 1800px) { .reading-inner { margin-left: max(4%, calc((100vw - 1650px) / 2)); } }
@media (max-width: 1100px) {
  .reading-inner { width: 87%; margin-left: 0; }
  .library-interior { padding-left: 3%; padding-right: 3%; }
  .library-interior-art { opacity: .45; object-fit: cover; object-position: right bottom; filter: none; }
  .library-card { gap: 10px; padding: 10px; }
  .library-board { padding: 16px 12px 12px; }
}
@media (max-width: 760px) {
  .library-approach { height: calc(100svh + 240px); }
  .library-scene { min-height: 600px; }
  .library-stage { width: max(100%, 90svh); left: 35%; }
  .library-copy { top: 8%; left: 6%; width: 84%; padding: 0 0 20px; background: linear-gradient(90deg,#06160fe8, #06160f80, transparent); }
  .library-copy h2 { font-size: clamp(36px,9.5vw,54px); max-width: 360px; }
  .library-kicker { font-size: 10px; margin-bottom: 12px; }
  .library-intro { font-size: 12px; margin-top: 14px; max-width: 340px; }
  .library-enter { margin-top: 18px; padding: 10px 14px; font-size: 19px; }
  .library-byte { width: 90px; left: calc(43% + var(--library-progress, 0) * 29%); }
  .library-route { left: 46%; width: 20%; }
  .library-controls { bottom: 16%; left: 6%; gap: 6px; padding: 4px 6px; }
  .library-controls p { font-size: 10px; max-width: 190px; margin-right: 2px; }
  .library-lang { top: 8px; right: 4%; }
  .library-interior { padding: 112px 16px 230px; min-height: 0; }
  .library-interior-art { object-fit: contain; object-position: bottom right; opacity: 1; height: auto; top: auto; bottom: 0; }
  .library-interior::after { background: linear-gradient(#06120d 0%,#06120d 65%,transparent 92%); }
  .library-interior::before { top: auto; bottom: 100px; width: 60px; height: 60px; }
  .reading-inner { width: 100%; margin: 0; }
  .reading-header { max-width: none; padding-bottom: 24px; }
  .reading-header h2 { font-size: 44px; }
  .reading-header .library-lang { top: -46px; right: 0; }
  .library-collections { grid-template-columns: 1fr; gap: 24px; }
  .library-board { padding: 18px 12px 14px; border-width: 5px; }
  .library-board-head h3 { font-size: 31px; }
  .library-card h4 { font-size: 20px; }
  .library-card { min-height: 128px; }
  .library-cover { width: 73px; }
  .library-category { font-size: 8px; }
  .library-author { font-size: 9px; }
  .library-filters button { font-size: 10px; }
  .library-board-actions .library-link { font-size: 10px; }
}
@media (max-width: 360px) {
  .library-card { gap: 9px; padding: 10px 8px; }
  .library-cover { width: 58px; }
  .library-card h4 { font-size: 18px; }
  .library-controls p { max-width: 150px; }
  .library-filters { gap: 3px; }
  .library-filters button { font-size: 9px; }
}
@media (max-height: 620px) and (min-width: 480px) and (min-aspect-ratio: 6/5) {
  .library-approach { height: calc(100svh + 250px); }
  .library-scene { height: 100svh; min-height: 0; }
  .library-copy { top: 76px; width: 48%; }
  .library-copy h2 { font-size: 34px; }
  .library-copy .library-kicker { margin-bottom: 6px; font-size: 10px; }
  .library-copy .library-intro { margin-top: 8px; font-size: 11px; line-height: 1.5; }
  .library-enter { margin-top: 10px; padding: 8px 12px; font-size: 17px; }
  .library-controls { left: 55%; bottom: 17%; }
  .library-controls p { max-width: 120px; font-size: 10px; margin-right: 0; }
  .library-byte { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-approach { height: auto; }
  .library-scene { position: relative; }
  .library-controls, .library-route { display: none; }
  .library-byte { left: 50%; }
}