.story-tile { grid-column:1/-1; min-height:120px; }
#story { overflow:auto; background:var(--cream,#fffdf6); }
.story-panel { width:min(100%,760px); margin:auto; padding:20px 20px 48px; box-sizing:border-box; }
.story-panel h2 { font-size:clamp(1.6rem,5vw,2.4rem); margin:24px 0; }
.story-panel .btn { min-height:52px; min-width:52px; margin:6px; white-space:normal; }
.story-top,.story-book,.story-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.story-note { font-size:1rem; line-height:1.6; }
.story-consent { display:block; margin:24px 0; line-height:1.6; }
.story-consent input { width:24px; height:24px; vertical-align:middle; }
.story-panel textarea { display:block; width:100%; min-height:180px; box-sizing:border-box; font:inherit; font-size:1.4rem; padding:16px; }
.story-grades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-grades .btn { font-size:1.2rem; padding:20px 8px; }
.story-time { font-size:2rem; font-variant-numeric:tabular-nums; }
.story-panel progress { width:100%; height:20px; }
.story-transcript { height:38vh; overflow:hidden; pointer-events:none; user-select:none; font-size:1.6rem; line-height:1.7; white-space:pre-wrap; padding:16px; background:white; border-radius:16px; }
.story-page { font-family:var(--read,Georgia,serif); font-size:clamp(1.4rem,5vw,2rem); line-height:1.7; white-space:pre-wrap; padding:24px; background:white; border-radius:16px; min-height:35vh; overflow-wrap:anywhere; }
.story-nav p { font-size:1.1rem; }
@media(max-width:360px) { .story-panel { padding:12px; } .story-grades { grid-template-columns:1fr; } .story-page { padding:16px; } }