/* Opt-in reading layout for evaluating the word journey before publication. */
html.reading-layout body[data-scene="0"] main{grid-template-columns:54% 46%}
html.reading-layout body[data-scene="0"] .paper,
html.reading-layout body[data-scene="0"] .paper-back{width:min(76%,460px)}
html.reading-layout body[data-scene="0"] .paper{transform:rotate(-2deg)}
html.reading-layout body[data-scene="0"] .sticker{display:none}

html.reading-layout body[data-scene="1"] main{display:flex;flex-direction:column;overflow:visible}
html.reading-layout body[data-scene="1"] .art{width:100%;min-height:0;padding:76px 102px 44px;overflow:hidden;border-right:0;border-bottom:1px solid #ffffff1b;background:radial-gradient(ellipse at 50% 35%,#302953 0%,#15172b 58%,#101425 100%)}
html.reading-layout body[data-scene="1"] .scene-marker{z-index:2}
html.reading-layout body[data-scene="1"] .infographic-preview{display:block;width:min(100%,650px)!important;max-width:650px;max-height:none!important;margin:0 auto;cursor:zoom-in;filter:drop-shadow(0 25px 55px #0008)}
html.reading-layout body[data-scene="1"] .infographic-preview>.infographic-window{display:block;width:100%!important;max-width:none!important;aspect-ratio:720/934;transform:none!important;border-radius:14px;box-shadow:0 0 0 1px #ffffff35}
html.reading-layout body[data-scene="1"] .infographic-preview .infographic-window img{display:block;width:100%;height:auto;max-height:none!important;transform:none!important;filter:none}
html.reading-layout body[data-scene="1"] .infographic-preview>span:last-child{display:block;max-width:none;margin:15px auto 0;text-align:center;color:#f8c879;font-size:13px;letter-spacing:.02em}
html.reading-layout body[data-scene="1"] .info-side-next{display:flex;align-items:center;justify-content:center;position:absolute;right:20px;top:50%;z-index:6;width:66px;height:66px;border:1px solid #f5a52470;border-radius:50%;background:#f5a524;color:#111827;font-size:32px;box-shadow:0 15px 35px #0008;transition:transform .2s,box-shadow .2s}
html.reading-layout body[data-scene="1"] .info-side-next:hover{transform:translateX(5px);box-shadow:0 15px 45px #f5a52440}
html.reading-layout body[data-scene="1"] .work{width:100%}
html.reading-layout body[data-scene="1"] .work-inner{width:min(100%,800px);margin:auto;padding:28px 24px 22px}
html.reading-layout body[data-scene="1"] .lesson-label{margin-bottom:12px}
html.reading-layout body[data-scene="1"] #info-stage .pretitle{margin-bottom:7px}
html.reading-layout body[data-scene="1"] #info-title{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
html.reading-layout body[data-scene="1"] #info-title br{display:none}
html.reading-layout body[data-scene="1"] #info-stage .instruction{margin-bottom:12px}
html.reading-layout body[data-scene="1"] .word-connections{display:flex;gap:24px;margin:0}
html.reading-layout body[data-scene="1"] .word-connections>div{flex:1;padding:10px 0}
html.reading-layout body[data-scene="1"] .word-connections p{font-size:18px}
html.reading-layout body[data-scene="1"] .expand-info{display:none}
html.reading-layout body[data-scene="1"] .controls{width:100%;position:sticky;bottom:0;z-index:7;background:#0d1220f5;backdrop-filter:blur(14px)}
html.reading-layout body[data-scene="1"] .art.no-info-image{padding:55px 20px;min-height:150px}

@media(max-width:700px){
  html.reading-layout body[data-scene="0"] main{display:flex}
  html.reading-layout body[data-scene="0"] .art{height:380px;min-height:0}
  html.reading-layout body[data-scene="0"] .paper,
  html.reading-layout body[data-scene="0"] .paper-back{width:min(67%,270px)}
  html.reading-layout body[data-scene="0"] .paper figcaption strong{font-size:clamp(20px,6vw,30px)}
  html.reading-layout body[data-scene="1"] .art{height:auto;min-height:0;padding:53px 10px 22px}
  html.reading-layout body[data-scene="1"] .scene-marker{top:18px}
  html.reading-layout body[data-scene="1"] .infographic-preview{width:min(100%,500px)!important;max-height:none!important;display:block;margin:auto}
  html.reading-layout body[data-scene="1"] .infographic-preview>.infographic-window{width:100%!important;max-width:none!important;transform:none!important}
  html.reading-layout body[data-scene="1"] .infographic-preview>span:last-child{font-size:11px;margin-top:10px}
  html.reading-layout body[data-scene="1"] .info-side-next{top:auto;right:15px;bottom:63px;width:51px;height:51px;font-size:25px}
  html.reading-layout body[data-scene="1"] .work-inner{padding:22px 18px 14px}
  html.reading-layout body[data-scene="1"] .word-connections{display:block}
  html.reading-layout body[data-scene="1"] .word-connections p{font-size:17px}
  html.reading-layout body[data-scene="1"] .controls{position:sticky;bottom:0}
  html.reading-layout #infographic-dialog{width:100vw;max-width:none;height:100svh;max-height:none;padding:12px;background:#f3f0e8;overflow:auto}
  html.reading-layout #infographic-dialog .infographic-window{width:720px;max-width:none;aspect-ratio:720/934}
  html.reading-layout #infographic-dialog .infographic-window img{width:720px;max-width:none}
}
@media(max-width:700px) and (max-height:850px){
  html.reading-layout body[data-scene="0"] .art{height:330px}
  html.reading-layout body[data-scene="0"] .paper,
  html.reading-layout body[data-scene="0"] .paper-back{width:min(62%,235px)}
}