:root{
  --ink:#4f4650;
  --muted:#786f75;
  --paper:#fbf5e8;
  --cream:#fffaf0;
  --pink:#e98aa5;
  --pink-deep:#c76382;
  --mint:#8bc6b4;
  --mint-deep:#5c9b8f;
  --aqua:#83bfc0;
  --aqua-deep:#4f8f8d;
  --lavender:#b7a2cf;
  --lavender-deep:#8f76ad;
  --gold:#e2bd5c;
  --gold-deep:#b58a2b;
  --source:#8c745d;
  --source-soft:#eee2d2;
  --line:rgba(111,92,82,.14);
  --shadow:0 18px 45px rgba(93,72,65,.13);
  --soft-shadow:0 8px 22px rgba(93,72,65,.10);
  --header-h:70px;
  --level-h:80px;
  --reader-font:19px;
  --reader-line:1.72;
  font-family:ui-rounded,"Avenir Next","Nunito","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{height:100%;background:var(--paper)}
body{
  margin:0;min-height:100%;color:var(--ink);
  background:
    radial-gradient(circle at 12% 1%,rgba(233,138,165,.11),transparent 27rem),
    radial-gradient(circle at 90% 7%,rgba(139,198,180,.14),transparent 29rem),
    linear-gradient(180deg,#fffaf1 0%,var(--paper) 64%,#f6eddc 100%);
}
body[data-level="grade1"]{--reader-font:21px;--reader-line:1.78}
body[data-level="grade4"]{--reader-font:19.5px;--reader-line:1.74}
body[data-level="grade7"]{--reader-font:18.5px;--reader-line:1.7}
body[data-level="original"]{
  --reader-font:18.5px;--reader-line:1.7;
  background:linear-gradient(180deg,#fbf7ef,#f2eadf);
}
button,a,input,textarea{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid rgba(79,143,141,.48);outline-offset:3px;
}
button{touch-action:manipulation}
[hidden]{display:none!important}

.site-bar{
  position:sticky;z-index:60;top:0;min-height:var(--header-h);
  margin-top:0;border-top:0;box-shadow:none;
  padding:10px clamp(14px,3vw,34px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:rgba(255,250,240,.93);border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.home-link{justify-self:start;display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;line-height:1.05}
.home-link strong{display:block;font-size:.94rem}.home-link small{display:block;margin-top:3px;color:var(--muted);font-size:.7rem}
.home-arrow{font-size:1.35rem}
.mini-brand{border:0;background:none;display:flex;align-items:center;gap:9px;font-weight:850;font-size:1rem;cursor:pointer}
.brand-book{position:relative;width:24px;height:18px;display:inline-block}
.brand-book:before,.brand-book:after{
  content:"";position:absolute;top:1px;width:11px;height:16px;border:2px solid var(--gold-deep);
  background:#fff7d9;
}
.brand-book:before{left:1px;border-radius:5px 1px 1px 5px;transform:skewY(-6deg)}
.brand-book:after{right:1px;border-radius:1px 5px 5px 1px;transform:skewY(6deg)}
.site-actions{justify-self:end;display:flex;gap:5px;align-items:center}
.quiet-button,.icon-button{
  border:0;background:transparent;border-radius:999px;padding:9px 11px;
  font-weight:750;cursor:pointer;text-decoration:none;color:inherit;
}
.quiet-button:hover,.icon-button:hover{background:rgba(131,191,192,.13)}

.level-strip{
  position:sticky;z-index:55;top:var(--header-h);
  border-bottom:1px solid var(--line);
  background:rgba(251,245,232,.94);backdrop-filter:blur(15px);
}
.level-inner{
  width:min(1120px,calc(100% - 28px));margin:0 auto;
  min-height:var(--level-h);display:grid;grid-template-columns:auto minmax(280px,620px) auto;
  gap:20px;align-items:center;padding:9px 0;
}
.level-copy span,.picker-kicker,.story-eyebrow{
  display:block;color:var(--aqua-deep);font-size:.66rem;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;
}
.level-copy strong{display:block;margin-top:2px;font-size:.92rem}
.level-control{display:grid;gap:3px}
.level-control input[type=range]{
  --fill:0%;
  appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0;
}
.level-control input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:99px;background:
  linear-gradient(90deg,var(--aqua-deep) 0 var(--fill),#ddd7cc var(--fill) 100%);
}
.level-control input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:#ddd7cc}
.level-control input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--aqua-deep)}
.level-control input[type=range]::-webkit-slider-thumb{
  appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;
  border:3px solid white;background:var(--aqua-deep);box-shadow:0 2px 7px rgba(73,83,78,.22);
}
.level-control input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border:3px solid white;border-radius:50%;background:var(--aqua-deep);
}
.level-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:0;font-size:.65rem;font-weight:800;color:var(--muted)}
.level-labels button{border:0;background:transparent;padding:2px 0;cursor:pointer;color:inherit}
.level-labels button:first-child{text-align:left}.level-labels button:last-child{text-align:right}
.level-labels button.is-active{color:var(--aqua-deep);font-weight:950}
.level-status{text-align:right;min-width:122px}
.level-status strong{display:block;font-size:.85rem}
.level-status small{display:block;margin-top:2px;color:var(--muted);font-size:.66rem}

.library-panel{
  border:1px solid var(--line);background:rgba(255,250,240,.88);
  border-radius:24px;box-shadow:var(--soft-shadow);overflow:hidden;
}
.library-head{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.library-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.library-head-copy{min-width:0}
.library-head h2{margin:2px 0 0;font-size:1.28rem;letter-spacing:-.02em}
.library-head p{margin:4px 0 0;color:var(--muted);font-size:.76rem;line-height:1.4}
.creekside-library-guide{flex:0 0 56px;width:56px;height:66px;margin:-4px 0 -8px}
.creekside-library-guide img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.close-picker{display:none}
.continue-card{
  margin:11px 0 0;width:100%;border:0;border-radius:14px;padding:10px 11px;
  background:linear-gradient(135deg,rgba(139,198,180,.22),rgba(131,191,192,.13));
  text-align:left;cursor:pointer;
}
.continue-card span{display:block;color:var(--mint-deep);font-size:.61rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.continue-card strong{display:block;margin-top:2px;font-size:.82rem}
.continue-card small{display:block;margin-top:3px;color:var(--muted);font-size:.65rem}
.library-tools{padding:11px 12px 8px;display:grid;gap:8px}
.search-wrap{position:relative}
.search-wrap:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted);font-size:1.1rem}
.story-search{
  width:100%;height:38px;border:1px solid var(--line);border-radius:12px;
  background:#fffdf8;padding:0 11px 0 35px;color:var(--ink);
}
.library-filter{display:flex;align-items:center;justify-content:space-between;gap:8px}
.filter-tabs{display:flex;background:#eee8db;border-radius:999px;padding:3px}
.filter-tabs button{border:0;background:transparent;border-radius:999px;padding:5px 9px;font-size:.65rem;font-weight:800;cursor:pointer}
.filter-tabs button.is-active{background:#fff;box-shadow:0 1px 4px rgba(70,60,52,.10);color:var(--aqua-deep)}
.result-count{font-size:.62rem;color:var(--muted);font-weight:750}
.story-list{padding:4px 8px 18px;overflow:auto;scrollbar-width:thin}
.story-list-empty{padding:24px 14px;text-align:center;color:var(--muted);font-size:.8rem}
.story-collection{padding-top:7px}
.story-collection+.story-collection{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.story-collection>h3,.story-tradition>h4{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:#665b57}
.story-collection>h3{position:sticky;top:-4px;z-index:2;padding:9px 8px 8px;background:rgba(255,250,240,.97);font-size:.93rem;letter-spacing:-.01em}
.story-collection>h3 span,.story-tradition>h4 span{display:grid;place-items:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:#eee6d8;color:var(--muted);font-size:.58rem}
.story-tradition{margin:5px 0 12px;padding:0 2px 5px}
.story-tradition>h4{padding:7px 7px 4px;color:var(--aqua-deep);font-size:.68rem;line-height:1.25}
.story-choice{
  width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;
  border:0;border-radius:15px;background:transparent;padding:7px 7px;text-align:left;cursor:pointer;
}
.story-choice:hover{background:rgba(131,191,192,.10)}
.story-choice.is-current{background:rgba(139,198,180,.18)}
.story-choice.is-unavailable{opacity:.62}
.story-cover{display:grid;place-items:center;width:44px;height:54px;border-radius:9px;background:linear-gradient(145deg,#fff8eb,#eee5d7);overflow:hidden;box-shadow:0 3px 9px rgba(88,68,53,.10)}
.story-cover img{width:86%;height:86%;object-fit:contain}
.story-cover.has-custom-cover img{width:100%;height:100%;object-fit:cover}
.story-choice.is-current .story-cover{outline:2px solid var(--mint);outline-offset:1px}
.story-choice strong{display:block;font-size:.78rem;line-height:1.18}
.story-choice small{display:block;margin-top:3px;color:var(--muted);font-size:.61rem;line-height:1.2}
.story-choice-status{min-width:45px;text-align:right}
.story-choice-status span{display:block;font-size:.57rem;font-weight:850;color:var(--mint-deep)}
.story-choice.is-unavailable .story-choice-status span{color:var(--muted)}
.mini-progress{margin-top:4px;margin-left:auto;width:42px;height:4px;border-radius:9px;background:#ded9cf;overflow:hidden}
.mini-progress i{display:block;height:100%;background:var(--aqua-deep);border-radius:inherit}

.reader-panel{
  min-width:0;border:1px solid var(--line);border-radius:28px;background:rgba(255,253,247,.94);
  box-shadow:var(--shadow);overflow:hidden;
}
.reader-top{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  min-height:50px;padding:7px 12px;border-bottom:1px solid var(--line);background:rgba(255,250,240,.72);
}
.story-picker-button{
  border:0;border-radius:999px;background:#e6f0ed;padding:8px 11px;font-size:.72rem;font-weight:850;cursor:pointer;
}
.read-aloud-controls{position:relative;display:flex;align-items:center;gap:5px}
.read-aloud-button,.read-pause-button,.read-options-button{
  border:0;border-radius:999px;padding:8px 10px;font-size:.68rem;font-weight:850;cursor:pointer;white-space:nowrap;
}
.read-aloud-button{background:#dceee8;color:#315f57}
.read-aloud-button:hover{background:#cce5dd}.read-aloud-button:disabled{opacity:.6;cursor:not-allowed}
.read-pause-button{background:#efe9df;color:#5e5448}
.read-pause-button:hover:not(:disabled){background:#e5ddd0}.read-pause-button:disabled{opacity:.55;cursor:not-allowed}
.read-options-button{background:transparent;color:var(--muted)}.read-options-button:hover{background:#eee8dd}
.read-options{
  position:absolute;z-index:12;right:0;top:calc(100% + 8px);width:min(290px,calc(100vw - 32px));padding:10px;
  border:1px solid var(--line);border-radius:14px;background:#fffdf8;box-shadow:var(--soft-shadow);display:grid;gap:8px;
}
.read-stop-button{
  justify-self:start;border:0;border-radius:8px;padding:6px 8px;background:#f3e2dc;color:#8a3c31;
  font-size:.68rem;font-weight:850;cursor:pointer;
}
.read-stop-button:hover:not(:disabled){background:#eccfc6}
.read-stop-button:disabled{opacity:.55;cursor:not-allowed}
.read-options label{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;color:var(--muted);font-size:.65rem;font-weight:800}
.read-options select{min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px 7px;color:var(--ink);font-size:.7rem}
.story-position{text-align:center;font-size:.66rem;color:var(--muted);font-weight:750}
.story-nav-buttons{display:flex;gap:4px}
.story-nav-buttons button{
  border:0;width:34px;height:34px;border-radius:50%;background:transparent;font-size:1.12rem;cursor:pointer;
}
.story-nav-buttons button:hover{background:#eee8dd}
.reading-progress-track{height:4px;background:#e6e0d6}
.reading-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--mint-deep),var(--aqua-deep));transition:width .15s linear}
.reader-scroll{overflow:auto;scroll-behavior:auto;overscroll-behavior:contain}
.story-header{
  width:min(900px,calc(100% - 44px));margin:0 auto;padding:34px 0 20px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px;align-items:start;
  border-bottom:1px solid rgba(108,94,83,.10);
}
.story-cover-hero{display:grid;place-items:center;width:210px;aspect-ratio:4/5;border-radius:20px;background:linear-gradient(145deg,#fff8eb,#eee5d7);overflow:hidden;box-shadow:0 10px 24px rgba(88,68,53,.12)}
.story-cover-hero img{width:88%;height:88%;object-fit:contain}
.story-cover-hero.has-custom-cover img{width:100%;height:100%;object-fit:cover}
.story-header-copy{min-width:0}
.creekside-reading-companion{display:flex;align-items:center;gap:7px;max-width:210px;margin-top:12px;color:var(--muted);font-size:.66rem;line-height:1.25}
.creekside-reading-companion img{width:48px;height:54px;flex:0 0 auto;object-fit:contain;object-position:bottom}
.story-eyebrow{color:var(--pink-deep)}
body[data-level="original"] .story-eyebrow{color:var(--source)}
.story-header h1{
  margin:5px 0 8px;font-size:clamp(2rem,5vw,3.3rem);line-height:1.02;letter-spacing:-.045em;color:#544a51;
}
.story-subtitle{margin:0;color:var(--muted);font-size:.8rem;line-height:1.4}
.story-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.story-badge{
  display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border-radius:999px;
  background:#edf3ef;color:#5d796e;font-size:.62rem;font-weight:850;
}
body[data-level="original"] .story-badge{background:var(--source-soft);color:var(--source)}
.story-info{margin-top:12px;font-size:.7rem}
.story-info summary{cursor:pointer;color:var(--aqua-deep);font-weight:850}
body[data-level="original"] .story-info summary{color:var(--source)}
.story-info-grid{
  display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;margin-top:9px;padding:10px 12px;
  border-radius:12px;background:#f5f1e8;color:var(--muted);
}
.story-info-grid dt{font-weight:850;color:#68605e}.story-info-grid dd{margin:0}
.story-article{
  width:min(720px,calc(100% - 44px));margin:0 auto;padding:28px 0 70px;
  font-family:Georgia,"Times New Roman",serif;font-size:var(--reader-font);line-height:var(--reader-line);
  color:#433e42;text-rendering:optimizeLegibility;
}
.story-article p{margin:0 0 1.05em}
.story-article h2,.story-article h3,.story-article h4{
  font-family:ui-rounded,"Avenir Next","Nunito","Trebuchet MS",system-ui,sans-serif;
  line-height:1.15;color:#534a50;margin:1.6em 0 .55em;letter-spacing:-.02em;
}
.story-article h2{font-size:1.45em}.story-article h3{font-size:1.22em}.story-article h4{font-size:1.08em}
.story-illustration{
  margin:1.15em auto 1.8em;max-width:100%;overflow:hidden;border-radius:14px;
  background:#f0e7d9;box-shadow:0 8px 20px rgba(88,68,53,.12);
}
.story-illustration img{display:block;width:100%;height:auto}
.story-article blockquote{margin:1.3em 0;padding:.1em 0 .1em 1.1em;border-left:4px solid rgba(139,198,180,.55);color:#625a5f}
.story-article ul,.story-article ol{padding-left:1.45em;margin:1em 0}
.story-article li{margin:.32em 0}
.story-article hr{border:0;border-top:1px solid rgba(100,87,78,.18);margin:2em auto;width:45%}
.story-article a{color:#3f7d79;text-underline-offset:2px}
.story-article code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.85em;background:#eee8df;padding:.1em .25em;border-radius:4px}
body[data-level="original"] .reader-panel{background:#fcfaf4}
body[data-level="original"] .story-article{color:#3f3a36}
body[data-level="original"] .reading-progress-fill{background:var(--source)}

.story-end{
  width:min(720px,calc(100% - 44px));margin:-45px auto 30px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:17px;border-top:1px solid rgba(100,87,78,.10);
}
.story-end button{border:0;border-radius:999px;background:#eee9df;padding:9px 12px;font-size:.7rem;font-weight:800;cursor:pointer}
.story-end span{font-size:.65rem;color:var(--muted);font-weight:750}

.unavailable-state,.loading-state,.error-state{
  width:min(650px,calc(100% - 36px));margin:54px auto;text-align:center;padding:30px 24px;
  border-radius:24px;background:#f7f2e7;
}
.empty-book{width:64px;height:48px;margin:0 auto 14px;position:relative}
.empty-book:before,.empty-book:after{content:"";position:absolute;top:3px;width:29px;height:42px;background:#fff;border:2px solid #b49b78}
.empty-book:before{left:2px;border-radius:10px 2px 2px 10px;transform:rotate(-3deg)}
.empty-book:after{right:2px;border-radius:2px 10px 10px 2px;transform:rotate(3deg)}
.unavailable-state h2,.error-state h2{margin:0;font-size:1.3rem}
.unavailable-state p,.error-state p{margin:8px auto 0;max-width:470px;color:var(--muted);font-size:.82rem;line-height:1.45}
.available-levels{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:15px}
.available-levels button{border:0;border-radius:999px;background:#dfeee9;padding:8px 11px;font-size:.72rem;font-weight:850;cursor:pointer}
.loading-dots{display:inline-flex;gap:5px}
.loading-dots i{width:8px;height:8px;border-radius:50%;background:var(--aqua-deep);animation:pulse 1s infinite alternate}
.loading-dots i:nth-child(2){animation-delay:.2s}.loading-dots i:nth-child(3){animation-delay:.4s}
@keyframes pulse{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}

.toast{
  position:fixed;z-index:100;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#504a4d;color:white;padding:9px 13px;border-radius:999px;font-size:.7rem;font-weight:750;
  transition:opacity .18s ease,transform .18s ease;
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}


/* Refinement pass: large-corpus browsing and long-form reading */
.story-position-wrap{
  min-width:0;display:flex;justify-content:center;align-items:baseline;gap:7px;
  white-space:nowrap;
}
.reading-percent{
  min-width:28px;color:var(--aqua-deep);font-size:.62rem;font-weight:900;
}
body[data-level="original"] .reading-percent{color:var(--source)}
body[data-level="original"] .reader-panel{
  border-color:rgba(140,116,93,.22);
  box-shadow:0 18px 45px rgba(89,70,52,.10);
}
body[data-level="original"] .story-header h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;letter-spacing:-.035em;color:#4b423b;
}
body[data-level="original"] .story-header{
  border-bottom-color:rgba(140,116,93,.18);
}
body[data-level="original"] .story-article blockquote{
  border-left-color:rgba(140,116,93,.48);
}
.filter-tabs button[data-filter="recent"].is-active{
  color:var(--lavender-deep);
}
.story-choice-status span:first-child{white-space:nowrap}
@media(max-width:600px){.creekside-reading-companion{display:none}}