/* The existing petrol/teal interface, with book proportions and touch reading. */
.shelf { grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-rows: auto; height: auto; max-height: max(390px,calc(100dvh - 295px)); scroll-snap-type: y proximity; align-items: stretch; padding-bottom: 12px; }
.shelf .book { min-height: 0; align-self: stretch; }
.shelf .cover { flex: none; width: 100%; aspect-ratio: 2/3; min-height: 0; }
.shelf .cover-img { object-fit: contain; object-position: center; }
.shelf .book-body { min-height: 92px; }
.shelf .book-body h3 { -webkit-line-clamp: 3; }
.shelf .book-body .meta { flex-wrap: wrap; white-space: normal; }
.catalog-book .pick { min-width: 44px; min-height: 44px; }
.catalog-cover .cover-kind { top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 5px 7px; border-radius: 6px; background: #09232bd9; letter-spacing: .07em; }
.locked-label::before { content: '◈ '; }
.catalog-book:has(.locked-label) .cover-img { opacity: .8; }
.library-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; }
.package-choice { display: flex; gap: 14px; padding: 22px; align-items: flex-start; cursor: pointer; }
.package-choice input { width: 22px; height: 22px; flex: none; accent-color: #5bc8b5; }
.package-choice h3 { margin: 0 0 8px; }
.book-description { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 26px; padding: 34px; max-width: 720px; }
.description-cover { width: 100%; aspect-ratio: 2/3; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 30px #0005; }
.description-close { position: absolute; right: 8px; top: 8px; min-width: 44px; }
.learning-reader { display: grid; gap: 14px; min-width: 0; outline: none; }
.learning-reader-top { flex-wrap: nowrap; min-width: 0; }
.reader-title { font-size: clamp(16px,2vw,23px); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reader-language { width: auto; min-width: 66px; max-width: 220px; flex: none; padding: 8px; font-size: 12px; }
.reader-mode { display: flex; gap: 6px; flex-wrap: wrap; }
.reader-mode .btn { font-size: 12px; min-height: 40px; }
.learning-reader-content { min-width: 0; }
.learning-reader progress { width: 100%; height: 4px; accent-color: #6bd7c1; border: 0; display: block; margin-bottom: 18px; }
.learning-page { padding: 0; overflow: hidden; touch-action: pan-y; min-height: 400px; }
.learning-page.illustrated { display: grid; grid-template-columns: minmax(240px,.9fr) minmax(300px,1.1fr); }
.learning-page figure { margin: 0; background: #09252d; position: relative; display: flex; flex-direction: column; justify-content: center; }
.learning-page figure img { width: 100%; max-height: 70dvh; object-fit: contain; }
.learning-page figcaption { padding: 10px 16px; font-size: 10px; color: var(--faint); }
.learning-page-body { padding: clamp(24px,4vw,56px); max-width: 850px; margin: auto; }
.learning-page-body h2 { font-size: clamp(24px,3.3vw,38px); line-height: 1.15; }
.learning-page-body p { font-size: clamp(17px,1.5vw,20px); line-height: 1.75; white-space: pre-line; }
.learning-page-body .chapter-source { font-size: 12px; line-height: 1.5; padding-top: 18px; border-top: 1px solid var(--line); }
.learning-reader-nav { position: sticky; bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #0c2832f5; align-items: center; flex-wrap: wrap; z-index: 2; }
.learning-reader .book-frame { min-height: 460px; height: calc(100dvh - 265px); }
.learning-reader .btn,.reader-acts .btn { min-height: 44px; }
.learning-reader:fullscreen,.learning-reader.window-fullscreen,.reader.window-fullscreen { background: #0e2631; width: 100%; height: 100dvh; padding: max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); box-sizing: border-box; overflow-y: auto; }
.learning-reader.window-fullscreen,.reader.window-fullscreen { position: fixed; inset: 0; z-index: 100; }
.learning-reader.window-fullscreen,.learning-reader:fullscreen { display: flex; flex-direction: column; }
.learning-reader.window-fullscreen .learning-reader-content,.learning-reader:fullscreen .learning-reader-content { flex: 1; }
.learning-reader.window-fullscreen .learning-reader-nav,.learning-reader:fullscreen .learning-reader-nav { flex: none; }
.learning-reader.window-fullscreen .book-frame,.learning-reader:fullscreen .book-frame { height: calc(100dvh - 155px); }
.learning-reader.window-fullscreen .learning-reader-top,.learning-reader:fullscreen .learning-reader-top { position: sticky; top: 0; z-index: 3; background: #0e2631f5; padding-bottom: 8px; }
.test-scope { display: flex; flex-wrap: wrap; gap: 7px; }
.test-scope .btn[aria-pressed=true] { background: #236b65; border-color: #64cbb5; }
.test-book-list { max-height: 230px; overflow-y: auto; display: grid; gap: 8px; }
.test-book-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.test-book-choice img { width: 32px; height: 46px; object-fit: contain; border-radius: 3px; }
.learning-public { max-width: 1240px; margin: auto; padding: 28px clamp(18px,4vw,52px) 60px; }
.learning-public header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 32px; }
.learning-public .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 21px; }
.learning-public .brand img { width: 34px; height: 34px; }
.public-intro { max-width: 720px; padding: 4px 0 12px; }
.public-intro h1 { font-size: clamp(32px,5vw,58px); line-height: 1.1; margin: 12px 0; }
.public-intro p { font-size: 17px; line-height: 1.7; }
.public-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.public-tabs .btn[aria-pressed=true] { background: #276c65; border-color: #64cbb5; }
.learning-public .shelf { max-height: none; overflow: visible; padding-right: 0; }
.public-test { max-width: 760px; margin: auto; }
.public-question { padding: 24px; margin-bottom: 18px; }
.public-question h3 { margin-top: 0; line-height: 1.5; }
.public-question label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; margin-top: 9px; line-height: 1.6; }
.public-question input { accent-color: #6bd7c1; flex: none; width: 20px; height: 20px; }
.public-result { padding: 24px; margin-bottom: 24px; }
.public-ask { max-width: 760px; margin: auto; }
.public-answer { padding: 24px; margin-top: 20px; white-space: pre-line; line-height: 1.8; }
.studio-editor { display: grid; gap: 16px; max-width: 900px; width: 100%; min-width: 0; margin: auto; }
.studio-editor > * { min-width: 0; }
.learning-public .status { white-space: normal; line-height: 1.6; border-radius: 12px; }
.studio-list { display: grid; gap: 9px; max-height: 360px; overflow: auto; }
.studio-book { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px; overflow-wrap: anywhere; }
.studio-book img { width: 44px; height: 66px; object-fit: contain; border-radius: 4px; }
.studio-book input[type=checkbox] { width: 22px; height: 22px; accent-color: #6bd7c1; }
.studio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.studio-grid .wide { grid-column: 1/-1; }
.reader:fullscreen { background: #0e2631; padding: 20px; overflow: auto; }
@media(min-width:1500px) { .shelf { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media(max-width:1100px) { .shelf { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:800px) { .shelf { grid-template-columns: repeat(3,minmax(0,1fr)); } .learning-page.illustrated { grid-template-columns: 1fr; } .learning-page figure img { max-height: 43dvh; } }
@media(max-width:600px) { .shelf { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .shelf .book-body { padding: 10px; min-height: 90px; } .cover-kind { font-size: 9px; } .book-description { grid-template-columns: 1fr; max-height: 85dvh; overflow: auto; } .description-cover { width: 110px; margin: auto; } .learning-page { min-height: 0; } .learning-reader-nav { bottom: 6px; gap: 7px; } .learning-reader-nav .btn { font-size: 12px; padding: 10px; } .learning-reader .book-frame { min-height: 400px; } .reader-title { max-width: 45vw; } .learning-public { padding-top: 18px; } .learning-public header { padding-bottom: 10px; } .studio-grid { grid-template-columns: 1fr; } .learning-public .library-actions { justify-content: flex-end; } }
@media(prefers-reduced-motion:reduce) { .cover-img,.book { transition: none; } }