/* Reading and comparisons follow the existing blue, Japanese multi-page site. */
.reading-topics { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:1.3rem; font-size:.75rem; color:var(--blue-dark); }
.reading-topics a { padding:.25rem 0; }
.reading-topic-section { margin:2rem 0 2.5rem; scroll-margin-top:calc(var(--header-height) + 1rem); }
.reading-topic-section>h2 { font-size:1.2rem; margin-bottom:1rem; }
.reading-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.reading-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:.7rem; overflow:hidden; background:#fff; }
.reading-card:hover { border-color:#a8cce9; }
.reading-art { position:relative; display:flex; align-items:center; justify-content:center; min-height:9.5rem; padding:2.6rem 1rem 1.3rem; background:#eef6fc; }
.reading-art--compare { background:#f1f3fb; }
.reading-art-topic { position:absolute; top:.8rem; left:1rem; color:#536f89; font-size:.65rem; font-weight:600; }
.reading-art-icons { display:flex; align-items:center; justify-content:center; gap:1rem; }
.reading-art-icons img { width:3.2rem; height:3.2rem; border-radius:.75rem; background:white; box-shadow:0 .2rem 1rem #183f6a0c; }
.reading-card-copy { display:flex; flex-direction:column; flex:1; padding:1.05rem; }
.reading-kicker { display:flex; flex-wrap:wrap; gap:.7rem; font-size:.65rem; color:var(--blue-dark); font-weight:600; margin:0 0 .5rem; }
.reading-kicker span { color:var(--muted); font-weight:400; }
.reading-card :is(h2,h3) { font-size:.95rem; line-height:1.65; margin:0 0 .65rem; letter-spacing:-.01em; }
.reading-card-copy>p:not(.reading-kicker) { font-size:.72rem; line-height:1.85; color:#536579; margin-bottom:.9rem; }
.reading-card time { margin-top:auto; font-size:.6rem; color:var(--muted); }
.reading-layout { display:grid; grid-template-columns:minmax(0,1fr) 14rem; gap:2.7rem; align-items:start; }
.reading-article { min-width:0; max-width:44rem; padding-bottom:1rem; }
.reading-header h1 { font-size:1.8rem; line-height:1.55; margin:.55rem 0 .9rem; }
.reading-deck { color:#52667a; font-size:.87rem; line-height:1.9; }
.reading-byline { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; color:var(--muted); font-size:.63rem; margin:1rem 0 1.3rem; }
.reading-header>.reading-art { min-height:8.5rem; margin:0 0 1.7rem; border-radius:.7rem; }
.reading-header .reading-art-icons { gap:1.75rem; }
.reading-header .reading-art-icons img { width:4.6rem; height:4.6rem; border-radius:1rem; }
.reading-prose { font-size:.82rem; line-height:2.05; }
.reading-prose p { margin:.8rem 0 1rem; }
.reading-prose :is(ul,ol) { margin:1rem 0; padding-left:1.5rem; }
.reading-prose li { margin:.45rem 0; }
.reading-toc { margin:1.8rem 0 2rem; padding:1.2rem 1.4rem; background:var(--soft); border-left:3px solid #98c5e9; border-radius:0 .4rem .4rem 0; font-size:.75rem; }
.reading-toc>p { font-weight:650; margin-bottom:.6rem; }
.reading-toc ol { padding-left:1.1rem; }
.reading-toc li { padding:.2rem 0; }
.reading-toc a { color:var(--blue-dark); }
.reading-section { margin:2rem 0; scroll-margin-top:calc(var(--header-height) + 1rem); }
.reading-section h2 { font-size:1.14rem; line-height:1.65; margin:0 0 1rem; letter-spacing:-.02em; }
.reading-sources a { color:var(--blue-dark); text-decoration:underline; text-underline-offset:.15em; }
.reading-table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:.5rem; }
.reading-table { border-collapse:collapse; width:100%; min-width:30rem; font-size:.69rem; line-height:1.8; table-layout:fixed; }
.reading-table caption { text-align:left; padding:.7rem .85rem; font-size:.63rem; color:var(--muted); background:#fff; }
.reading-table :is(th,td) { vertical-align:top; padding:.85rem .7rem; text-align:left; border-top:1px solid var(--line); border-right:1px solid var(--line); }
.reading-table th { background:#f2f7fb; font-weight:600; }
.reading-table tr>:last-child { border-right:0; }
.reading-table th:first-child { width:21%; }
.reading-figure { margin:1.7rem 0; padding:1rem; background:var(--soft); border-radius:.5rem; }
.reading-figure img { max-height:23rem; width:auto; margin:auto; object-fit:contain; }
.reading-figure figcaption { font-size:.62rem; color:var(--muted); margin-top:.7rem; }
.reading-prose details { border-bottom:1px solid var(--line); padding:.85rem 0; }
.reading-prose summary { cursor:pointer; font-weight:600; }
.reading-app-links { display:grid; gap:.6rem; }
.reading-app-links a { display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.5rem; }
.reading-app-links img { width:2.5rem; height:2.5rem; border-radius:.6rem; }
.reading-app-links a>span:nth-child(2) { flex:1; min-width:0; }
.reading-app-links strong { display:block; font-size:.78rem; }
.reading-app-links small { display:block; font-size:.61rem; color:var(--muted); margin-top:.15rem; }
.reading-app-links a>span:last-child { color:var(--blue-dark); }
.reading-sources { border-top:1px solid var(--line); padding-top:1.5rem; }
.reading-sources ol { padding-left:1.2rem; font-size:.65rem; line-height:1.9; }
.reading-sources li { margin:.5rem 0; scroll-margin-top:calc(var(--header-height) + 1rem); }
.reading-aside { padding-top:.2rem; }
.reading-aside>section>h2 { font-size:.88rem; margin-bottom:.9rem; }
.reading-aside .reading-card { margin-bottom:1rem; }
.reading-aside .reading-art { min-height:7rem; }
.reading-aside .reading-art-icons img { width:2.5rem; height:2.5rem; border-radius:.6rem; }
.reading-aside .reading-art-icons { gap:.6rem; }
.reading-aside .reading-card :is(h2,h3) { font-size:.77rem; }
.reading-aside .reading-card-copy>p:not(.reading-kicker) { display:none; }
.reading-aside .reading-card-copy { padding:.75rem; }
.reading-index-link { display:block; color:var(--blue-dark); font-size:.7rem; padding:.5rem 0; }
@media(min-width:1100px) { .desktopnav { gap:1rem; } .desktopnav a { white-space:nowrap; font-size:.75rem; } .search-desktop { width:13rem; } }
@media(max-width:1190px) and (min-width:1100px) { .header-con { gap:.85rem; } .desktopnav { gap:.75rem; } .search-desktop { width:10rem; } }
@media(max-width:1099px) { .reading-layout { grid-template-columns:minmax(0,1fr) 11.5rem; gap:1.5rem; } .reading-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .reading-header h1 { font-size:1.55rem; } }
@media(max-width:767px) { .reading-topics { gap:.45rem 1rem; } .reading-grid { grid-template-columns:1fr; gap:1rem; } .reading-topic-section { margin:1.5rem 0 2rem; } .reading-card { display:grid; grid-template-columns:5.8rem minmax(0,1fr); } .reading-art { min-height:100%; padding:2.1rem .6rem .7rem; } .reading-art-topic { left:.5rem; top:.55rem; font-size:.55rem; } .reading-art-icons { flex-wrap:wrap; gap:.3rem; max-width:4.6rem; } .reading-art-icons img { width:2rem; height:2rem; border-radius:.5rem; } .reading-art--blog .reading-art-icons img { width:3.1rem; height:3.1rem; border-radius:.7rem; } .reading-card-copy { padding:.8rem; } .reading-card :is(h2,h3) { font-size:.82rem; margin-bottom:.4rem; } .reading-card-copy>p:not(.reading-kicker) { font-size:.65rem; margin-bottom:.55rem; } .reading-layout { display:block; } .reading-article { max-width:none; } .reading-header h1 { font-size:1.5rem; } .reading-deck { font-size:.78rem; } .reading-header>.reading-art { min-height:10rem; } .reading-header .reading-art-icons { max-width:none; gap:.8rem; } .reading-header .reading-art-icons img { width:3.6rem; height:3.6rem; border-radius:.8rem; } .reading-prose { font-size:.79rem; } .reading-section h2 { font-size:1.05rem; } .reading-toc { padding:1rem 1.1rem; } .reading-aside { border-top:1px solid var(--line); padding-top:1.5rem; } .reading-aside .reading-card-copy>p:not(.reading-kicker) { display:block; } .reading-aside .reading-art { min-height:100%; } .reading-aside .reading-art-icons img { width:2rem; height:2rem; } .reading-aside .reading-art-icons { gap:.3rem; } }
@media(max-width:767px) { .reading-card-copy>p:not(.reading-kicker),.reading-aside .reading-card-copy>p:not(.reading-kicker) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .reading-header>.reading-art { min-height:7rem; } }
/* Official screens replace the sparse icon-only header artwork. */
.reading-visual { margin:0 0 1.6rem; padding:1rem 1rem .65rem; border:1px solid var(--line); border-radius:.7rem; background:#f4f7fb; }
.reading-visual-grid { display:flex; gap:1rem; align-items:stretch; }
.reading-visual-group { flex:1; min-width:0; }
.reading-visual-app { display:flex; align-items:center; gap:.5rem; margin:0 0 .8rem; font-size:.7rem; font-weight:650; }
.reading-visual-app img { width:1.7rem; height:1.7rem; border-radius:.4rem; }
.reading-visual-shots { display:flex; align-items:center; justify-content:center; gap:.7rem; }
.reading-screen.screen-thumb { display:block; flex:1; min-width:0; max-width:13rem; padding:0; border:1px solid #dce5ed; border-radius:.45rem; overflow:hidden; background:white; box-shadow:0 .25rem .7rem #18374a0a; }
.reading-screen img { display:block; width:100%; height:auto; max-height:17rem; object-fit:contain; object-position:center; }
.reading-visual--compare .reading-visual-grid { gap:.8rem; }
.reading-visual--compare .reading-visual-app { min-height:2rem; font-size:.65rem; }
.reading-visual--compare .reading-screen { max-width:100%; }
.reading-visual-group--landscape .reading-visual-shots { flex-direction:column; gap:.5rem; }
.reading-visual-group--landscape .reading-screen { flex:auto; width:100%; }
.reading-visual-group--landscape .reading-screen img { max-height:8.2rem; }
.reading-visual figcaption { font-size:.6rem; color:var(--muted); margin-top:.65rem; }
@media(max-width:767px) { .reading-visual { padding:.7rem .6rem .6rem; } .reading-visual-grid { overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:.3rem; } .reading-visual-app { font-size:.7rem; } .reading-visual--blog .reading-visual-group { min-width:100%; } .reading-visual--blog .reading-visual-shots { justify-content:flex-start; overflow-x:auto; padding-bottom:.3rem; scroll-snap-type:x proximity; } .reading-visual--blog .reading-screen { flex:0 0 43%; scroll-snap-align:start; max-width:none; } .reading-screen img { max-height:15rem; } .reading-visual--compare .reading-visual-group { flex:0 0 74%; scroll-snap-align:start; } .reading-visual--compare .reading-visual-app { font-size:.72rem; } .reading-visual--compare .reading-screen { max-width:11rem; } .reading-visual-group--landscape .reading-screen { max-width:100%; } .reading-visual-group--landscape .reading-screen img { max-height:8rem; } }

/* Icon-derived gradients, clear app identities and verified store ratings. */
.reading-art--screens,.reading-aside .reading-art--screens {
  container-type:inline-size; position:relative; display:block; isolation:isolate; overflow:hidden;
  width:100%; aspect-ratio:16/10; min-height:0; padding:0;
  background:linear-gradient(120deg,var(--cover-light) 0%,var(--cover-middle) 60%,var(--cover-deep) 100%);
}
.reading-art--compare.reading-art--screens { background:linear-gradient(120deg,var(--cover-light),var(--cover-middle) 48%,var(--cover-second)); }
.reading-art--screens::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,var(--cover-light),#ffffff50 60%,transparent); opacity:.7; }
.reading-card-screens,.reading-aside .reading-card-screens {
  position:absolute; top:-14%; left:20%; width:94%; height:133%; max-height:none;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:stretch; gap:2.5cqw; overflow:visible;
  transform:rotate(-10deg); opacity:.22; filter:saturate(.7);
}
.reading-cover-panel { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #ffffffb3; border-radius:3cqw; background:#fff; }
.reading-cover-panel:nth-child(2) { transform:translateY(10%); }
.reading-cover-panel:nth-child(3) { transform:translateY(-4%); }
.reading-card-screens .reading-card-screen,.reading-aside .reading-card-screens .reading-card-screen { display:block; width:100%; height:100%; min-width:0; max-width:none; max-height:none; object-fit:cover; object-position:center; border-radius:0; }
.reading-cover-panel--landscape { gap:2cqw; justify-content:center; background:#eff3fa; }
.reading-cover-panel--landscape .reading-card-screen { flex:1; min-height:0; }
.reading-cover-identities { position:absolute; z-index:2; top:28%; left:6cqw; right:6cqw; }
.reading-cover-identity { display:flex; align-items:center; gap:5cqw; min-width:0; }
.reading-cover-icon { display:block; flex:none; padding:1cqw; border:1px solid #ffffffe6; border-radius:6cqw; background:#fff; box-shadow:0 2cqw 6cqw #103a6524; }
.reading-cover-icon img { display:block; width:24cqw; height:24cqw; border-radius:5cqw; }
.reading-cover-details { display:flex; flex-direction:column; gap:2.3cqw; min-width:0; }
.reading-cover-name { color:#13263c; font-size:7cqw; font-weight:800; line-height:1.22; letter-spacing:-.035em; overflow-wrap:anywhere; text-align:left; }
.reading-cover-rating { display:flex; align-items:center; gap:2cqw; color:#263649; line-height:1; white-space:nowrap; }
.reading-cover-rating strong { font-size:4.8cqw; font-weight:750; }
.reading-cover-stars { position:relative; display:inline-block; color:#9eabb7; font-size:4.3cqw; letter-spacing:.04em; line-height:1; }
.reading-cover-stars>span { position:absolute; left:0; top:0; display:block; overflow:hidden; white-space:nowrap; color:#b77b00; }
.reading-cover-brand { position:absolute; right:5cqw; bottom:4cqw; z-index:2; display:flex; align-items:center; padding:1.7cqw 2.4cqw; border:1px solid #ffffffe6; border-radius:2cqw; background:#fffffff2; }
.reading-cover-brand svg { display:block; width:29cqw; height:auto; }
.reading-cover-source { position:absolute; left:6cqw; bottom:5.5cqw; z-index:2; color:#46566a; font-size:2.8cqw; line-height:1; }
.reading-art--compare .reading-cover-identities { display:grid; grid-template-columns:repeat(var(--cover-count),minmax(0,1fr)); align-items:start; gap:3cqw; top:14%; }
.reading-art--compare .reading-cover-identity { flex-direction:column; gap:2.5cqw; }
.reading-art--compare .reading-cover-icon { padding:.8cqw; border-radius:4.5cqw; }
.reading-art--compare .reading-cover-icon img { width:16cqw; height:16cqw; border-radius:3.8cqw; }
.reading-art--compare .reading-cover-details { align-items:center; gap:1.8cqw; width:100%; }
.reading-art--compare .reading-cover-name { font-size:3.9cqw; line-height:1.25; min-height:2.5em; display:flex; align-items:center; justify-content:center; text-align:center; }
.reading-art--compare .reading-cover-rating { gap:1cqw; }
.reading-art--compare .reading-cover-rating strong { font-size:3.7cqw; }
.reading-art--compare .reading-cover-stars { font-size:2.8cqw; letter-spacing:0; }
@media(max-width:767px) {
  .reading-card { display:flex; flex-direction:column; }
  .reading-art--screens,.reading-aside .reading-art--screens { aspect-ratio:16/9; min-height:0; padding:0; }
  .reading-card-copy,.reading-aside .reading-card-copy { padding:1rem; }
  .reading-card :is(h2,h3),.reading-aside .reading-card :is(h2,h3) { font-size:.95rem; }
  .reading-card-copy>p:not(.reading-kicker),.reading-aside .reading-card-copy>p:not(.reading-kicker) { -webkit-line-clamp:2; font-size:.72rem; }
  .reading-cover-identities { top:24%; }
  .reading-art--compare .reading-cover-identities { top:10%; }
}

/* Continuous editorial grids and larger comparison compositions. */
.reading-index-grid { margin:1.6rem 0 2.5rem; }
.listing-header+.reading-index-grid { margin-top:0; }
.reading-art--compare.reading-art--screens,.reading-aside .reading-art--compare.reading-art--screens { aspect-ratio:4/3; }
.reading-art--compare .reading-card-screens { left:-6%; width:116%; gap:2cqw; opacity:.52; filter:saturate(1.08); transform:rotate(-12deg); }
.reading-art--compare.reading-art--screens::after { background:linear-gradient(125deg,var(--cover-light),transparent 75%),linear-gradient(0deg,var(--cover-middle),transparent 45%); opacity:.48; }
.reading-art--compare .reading-cover-identities { top:10%; left:4.5cqw; right:4.5cqw; gap:3cqw; }
.reading-art--compare .reading-cover-identity { position:relative; gap:3cqw; }
.reading-art--compare .reading-cover-icon { padding:1cqw; border:0; border-radius:6cqw; transform:rotate(-8deg); box-shadow:0 2.5cqw 6cqw #103a6540; }
.reading-art--compare .reading-cover-icon img { width:var(--compare-icon-size); height:var(--compare-icon-size); border-radius:5cqw; }
.reading-art--compare .reading-cover-identity:nth-child(2) .reading-cover-icon { transform:rotate(7deg); }
.reading-art--compare .reading-cover-identity:nth-child(3) .reading-cover-icon { transform:rotate(-5deg); }
.reading-art--compare .reading-cover-details { gap:2cqw; padding:2.3cqw 1cqw; border:1px solid #ffffffbf; border-radius:2.5cqw; background:#ffffffed; box-shadow:0 1.2cqw 3cqw #103a6510; }
.reading-art--compare .reading-cover-name { font-size:4.2cqw; }
.reading-art--compare .reading-cover-name { flex-wrap:wrap; column-gap:.25em; }
.reading-cover-name-part { display:inline-block; max-width:100%; white-space:normal; }
.reading-art--compare .reading-cover-rating strong { font-size:4cqw; }
.reading-art--compare .reading-cover-stars { font-size:2.9cqw; }
.reading-cover-vs { position:absolute; top:8cqw; right:-4.75cqw; z-index:3; display:flex; align-items:center; justify-content:center; width:6.5cqw; height:6.5cqw; border:1px solid #ffffffd9; border-radius:50%; background:#fff2c0; color:#344051; font-size:2.5cqw; font-weight:850; box-shadow:0 1cqw 2cqw #183c601a; }
.reading-art--compare .reading-cover-source { padding:1.3cqw 1.7cqw; left:4.5cqw; bottom:4cqw; border-radius:1.5cqw; background:#ffffffe6; }
@media(max-width:767px) { .reading-index-grid { margin-top:1.2rem; } }
/* Card metadata and unframed media follow the latest annotated layout. */
.reading-card-meta { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; }
.reading-card-meta .reading-kicker { margin:0; min-width:0; }
.reading-card-meta time { flex:none; margin:0; font-size:.6rem; white-space:nowrap; }
.reading-cover-brand { right:2.5cqw; bottom:2.5cqw; padding:0; border:0; border-radius:0; background:none; }
.reading-cover-brand svg { width:32cqw; filter:drop-shadow(0 1px 1px #ffffffb3); }
.reading-cover-identity { gap:4cqw; }
.reading-cover-details { gap:1.4cqw; }
.reading-cover-stars { color:#718096; }
.reading-cover-stars>span { color:#e66b00; text-shadow:0 1px #ffffffb3; }
.reading-art--compare .reading-cover-identity { gap:1.5cqw; }
.reading-art--compare .reading-cover-details { gap:1.3cqw; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.reading-art--compare .reading-cover-name { min-height:2.5em; text-shadow:0 1px 2px #fff; }
.reading-art--compare .reading-cover-rating { text-shadow:0 1px 2px #fff; }
.reading-art--compare.reading-art--screens::after { opacity:.65; }
.reading-visual { padding:0; border:0; border-radius:0; background:none; }
.reading-screen.screen-thumb { flex:0 1 auto; width:auto; border:0; border-radius:0; background:transparent; box-shadow:none; }
.reading-screen img { width:auto; max-width:100%; }
@media(max-width:767px) { .reading-visual { padding:0; } .reading-visual--blog .reading-screen { flex:0 0 43%; } .reading-card-meta time { font-size:.59rem; } }