:root{--header-h:58px;--level-h:76px}
body{height:100vh;overflow:hidden}
.site-bar{min-height:var(--header-h);padding:7px 10px;grid-template-columns:1fr auto 1fr;gap:7px}
.home-link strong{font-size:.78rem}.home-link small{display:none}.home-arrow{font-size:1.15rem}
.mini-brand{font-size:.86rem;gap:6px}.brand-book{transform:scale(.84)}
.site-actions{gap:0}.site-actions .action-label{display:none}.quiet-button{padding:7px 8px;font-size:.68rem}
.level-inner{width:calc(100% - 18px);min-height:var(--level-h);grid-template-columns:1fr;gap:2px;padding:5px 0}
.level-copy,.level-status{display:none}
.level-control{gap:1px}
.level-control input[type=range]{height:29px}
.level-labels{font-size:.61rem}
.mobile-reader{height:calc(100vh - var(--header-h) - var(--level-h));padding:8px}
.reader-panel{height:100%;border-radius:20px;display:grid;grid-template-rows:auto 4px minmax(0,1fr)}
.reader-top{grid-template-columns:30px minmax(0,1fr) auto auto;min-height:40px;padding:4px 6px;gap:4px}
.story-picker-button{width:30px;height:30px;padding:0;font-size:.95rem;line-height:1}
.story-position-wrap{min-width:0;overflow:hidden;justify-content:center}
.story-position{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.59rem}
.reading-percent{display:none}
.read-aloud-controls{gap:2px}.read-aloud-button{padding:6px 8px;font-size:.6rem}.read-pause-button,.read-options-button{width:28px;height:28px;padding:0;font-size:0}.read-pause-button::after{font-size:.62rem}.read-pause-button[data-state="pause"]::after{content:"❚❚"}.read-pause-button[data-state="resume"]::after{content:"▶"}.read-options-button{font-size:.62rem}
.read-options{position:fixed;right:8px;top:calc(var(--header-h) + 6px);width:min(280px,calc(100vw - 16px))}
.read-stop-button{font-size:.65rem}
.story-nav-buttons{gap:3px}.story-nav-buttons button{width:29px;height:29px}
.reader-scroll{min-height:0}
.story-header{width:calc(100% - 28px);padding:25px 0 12px}
.story-header{grid-template-columns:minmax(0,1fr);gap:10px}
.story-cover-hero{width:100%;max-width:414px;justify-self:center;border-radius:18px}
.story-header-copy{display:flex;flex-direction:column}
.story-header h1{order:1;margin:0 0 6px;font-size:clamp(1.65rem,7.5vw,2.35rem)}
.story-header .story-eyebrow{order:2}
.story-header .story-subtitle{order:3}
.story-header .story-badges{order:4}
.story-header .story-info{order:5}
.story-subtitle{font-size:.73rem}
.story-badges{margin-top:9px}
.story-article{width:calc(100% - 28px);padding:22px 0 64px}
.story-end{width:calc(100% - 28px);margin:-42px auto 24px}
.story-info-grid{grid-template-columns:1fr;gap:2px;padding:9px 10px}
.story-info-grid dd{margin-bottom:5px}
.unavailable-state,.loading-state,.error-state{margin:28px auto;padding:24px 18px}

.story-dialog{
  margin:0;width:100%;max-width:none;height:min(84vh,760px);max-height:none;padding:0;
  border:0;border-radius:26px 26px 0 0;background:transparent;
  position:fixed;inset:auto 0 0 0;
}
.story-dialog::backdrop{background:rgba(56,48,51,.35);backdrop-filter:blur(2px)}
.story-dialog .library-panel{height:100%;border-radius:26px 26px 0 0;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.story-dialog .library-head{padding:14px 14px 10px}
.story-dialog .library-head h2{font-size:1.15rem}
.close-picker{
  display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:50%;background:#eee8dc;
  cursor:pointer;font-size:1.15rem
}
.story-dialog .story-list{min-height:0}
.continue-card{padding:8px 10px}
.library-tools{padding:9px 10px 6px}
.story-choice{padding:8px 7px}
.story-choice strong{font-size:.76rem}

@media(orientation:landscape) and (max-height:600px){
  :root{--header-h:44px;--level-h:50px;--reader-font:16px;--reader-line:1.58}
  body[data-level="grade1"]{--reader-font:17px;--reader-line:1.62}
  .site-bar{padding:4px 8px}.home-link span:not(.home-arrow){display:none}.mini-brand{font-size:.78rem}
  .level-inner{min-height:var(--level-h);padding:2px 0}.level-control input[type=range]{height:22px}
  .mobile-reader{padding:5px}
  .reader-panel{border-radius:14px}
  .reader-top{min-height:36px;padding:3px 6px}
  .read-aloud-button,.read-pause-button,.read-options-button{padding:5px 6px;font-size:.56rem}
  .story-nav-buttons button{width:28px;height:28px}
  .story-header{padding:16px 0 8px;width:min(700px,calc(100% - 30px))}
  .story-cover-hero{max-width:180px}
  .story-header h1{font-size:1.8rem}
  .story-badges,.story-info{margin-top:7px}
  .story-article{width:min(680px,calc(100% - 30px));padding:15px 0 52px}
  .story-end{width:min(680px,calc(100% - 30px))}
  .story-dialog{height:94vh;width:min(520px,64vw);left:auto}
}

.story-position-wrap{gap:5px}
.reading-percent{font-size:.56rem;min-width:24px}
@media(max-width:430px){
  .filter-tabs button{padding:5px 7px;font-size:.61rem}
  .result-count{font-size:.58rem}
}