#storyReading{box-sizing:border-box;width:min(760px,94vw);max-height:88dvh;padding:24px;border:1px solid #bda77c;border-radius:8px;background:#101c25;color:#eee6d5;font-family:system-ui,sans-serif;font-size:17px;line-height:1.8;text-align:left;overflow:auto}
#storyReading::backdrop{background:#000b}
#storyReading .reading-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:-24px;background:#101c25;padding:12px 0;z-index:1}
#storyReading h2{font-size:23px;margin:0;color:#f2d699}
#storyReading h3{font-size:20px;color:#f2d699;margin:28px 0 8px}
#storyReading button{font:inherit;color:#fff0cb;background:#243440;border:1px solid #bda77c;padding:8px 14px;min-height:44px;flex-shrink:0;cursor:pointer}
#storyReading article{border-top:1px solid #bda77c44;padding:18px 0}
#storyReading a{display:inline-block;color:#f2d699;font-size:18px;font-weight:600;min-height:44px;line-height:1.7;padding:6px 0;text-decoration:underline;text-underline-offset:4px}
#storyReading p{margin:10px 0}
#storyReading .reading-note{color:#bccbd4;font-size:15px}
#storyReading :focus-visible{outline:3px solid #fff1ca;outline-offset:3px}
@media(max-aspect-ratio:4/5){
 #hud{max-width:94%;gap:4px}
 #hud button{min-height:44px;padding:6px;font-size:12px}
 #title .menu{display:grid;grid-template-columns:repeat(2,max-content);gap:10px}
 #title .menu button{min-height:44px}
 #storyReading{padding:18px;font-size:16px}
 #storyReading .reading-heading{top:-18px}
 #storyReading h2{font-size:19px}
}

#storyReading .reading-topics{display:flex;flex-wrap:wrap;gap:8px}
#storyReading .reading-topics a{font-size:15px;padding:6px 12px;border:1px solid #bda77c66;border-radius:4px;box-sizing:border-box}
#storyReading h3{scroll-margin-top:85px}