.reading-page { background:radial-gradient(ellipse at 75% 0,#d4edff80,transparent 600px),linear-gradient(180deg,#eef8ff 0,#fff 420px); padding:18px 0 30px; color:#10244c; }
.reading-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.73rem; color:#536a91; margin-bottom:19px; }.reading-breadcrumb a { color:#285493; }
.reading-layout { display:grid; grid-template-columns:minmax(0,1fr) 305px; gap:22px; align-items:start; }.reading-main { min-width:0; }.reading-hero { min-height:230px; display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:16px; align-items:center; padding:12px 0 26px; }.reading-eyebrow { display:inline-flex; align-items:center; gap:8px; border-radius:20px; padding:5px 11px 5px 5px; background:#e0efff; color:#006bff; font-size:.69rem; font-weight:700; }.reading-eyebrow > span { display:grid; place-items:center; width:29px; height:31px; border-radius:7px; background:linear-gradient(135deg,#47baff,#0067ff); color:white; }.reading-eyebrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.lipicode-bold .reading-hero h1 { font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.16; font-weight:800; letter-spacing:-.04em; color:#091541; margin:13px 0 12px; }.reading-hero-copy > p { color:#48618b; font-size:.94rem; line-height:1.65; margin:0; }.reading-meta { display:flex; flex-wrap:wrap; gap:9px 16px; padding:0; margin:17px 0 0; list-style:none; font-size:.69rem; color:#4d6892; }.reading-meta li:not(:last-child) { padding-right:15px; border-right:1px solid #d9e9fb; }
.reading-hero-art { position:relative; display:flex; align-items:center; justify-content:center; gap:14px; height:180px; border-radius:50% 38% 44% 32%; background:linear-gradient(130deg,#d5edff,#b2d9ff80); }.reading-hero-tile { display:grid; place-items:center; width:70px; height:95px; transform:rotate(-8deg); border:4px solid #ffffffb0; border-radius:13px; background:linear-gradient(140deg,#1ea5ff,#005eff); color:white; box-shadow:0 8px 17px #0669d42a; }.reading-hero-tile svg { width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.reading-hero-art > b { color:#0878ff; font-size:2.2rem; }.reading-paper { display:grid; align-content:center; gap:9px; width:62px; height:100px; padding:12px; border-radius:9px; transform:rotate(6deg); background:linear-gradient(130deg,#fff,#eef6ff); box-shadow:0 8px 17px #0669d41f; }.reading-paper i { display:block; height:5px; border-radius:4px; background:#9bc8ff; }.reading-paper i:nth-child(2n) { width:70%; }
.reading-content { border:1px solid #dceaff; border-radius:13px; padding:23px; background:#fff; box-shadow:0 5px 20px #10529904; }.reading-section { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:0 0 26px; scroll-margin-top:100px; }.reading-section + .reading-section { padding-top:23px; border-top:1px solid #edf3fc; }.reading-number { display:grid; place-items:center; width:36px; height:36px; color:white; background:linear-gradient(140deg,#18a3ff,#005cff); border-radius:50%; font-weight:700; font-size:1.13rem; box-shadow:0 4px 10px #0875ff20; }.reading-section h2 { margin:3px 0 12px; color:#11244d; font-size:1.22rem; line-height:1.4; letter-spacing:-.025em; }.reading-section p { margin:0 0 14px; color:#48628a; font-size:.9rem; line-height:1.85; }.reading-section p:last-child { margin-bottom:0; }.reading-checklist { list-style:none; padding:15px 18px; margin:16px 0 0; border:1px solid #dceaff; border-radius:9px; background:linear-gradient(120deg,#eff7ff,#f8fbff); }.reading-checklist li { position:relative; padding-left:22px; color:#3f5e89; font-size:.85rem; line-height:1.8; }.reading-checklist li::before { content:"✓"; position:absolute; left:0; color:#0875ff; font-weight:700; }.reading-sources li { font-size:.83rem; line-height:1.8; overflow-wrap:anywhere; }.reading-sources a,.reading-editorial a { color:#0067e8; }.reading-editorial { padding:18px; border:1px solid #e0ebfb; border-radius:10px; background:#f7fbff; scroll-margin-top:100px; }.reading-editorial strong { font-size:.87rem; }.reading-editorial p { color:#607595; font-size:.78rem; line-height:1.8; margin:9px 0; }.reading-editorial a { font-size:.77rem; }
.reading-sidebar { display:grid; gap:14px; }.reading-side-card { padding:17px; border:1px solid #dceaff; border-radius:12px; background:#ffffffed; }.reading-side-card h2 { font-size:.94rem; color:#11244d; margin:0 0 12px; line-height:1.4; letter-spacing:-.02em; }.reading-side-card h2 > span { color:#0875ff; }.reading-side-card > header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.reading-side-card > header > a { color:#0067f2; font-size:.66rem; white-space:nowrap; }.reading-toc ol { padding:0; margin:0; list-style:none; display:grid; gap:5px; }.reading-toc a { display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:8px; font-size:.76rem; line-height:1.55; color:#355889; }.reading-toc li:first-child a { background:#e9f3ff; color:#0065ed; }.reading-toc a:hover { background:#f1f7ff; }.reading-toc a > span { display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:#e1efff; color:#0065ed; font-size:.71rem; font-weight:700; }.reading-toc li:first-child a > span { color:white; background:#0073ff; }
.reading-related { display:grid; }.reading-related > a { display:grid; grid-template-columns:31px minmax(0,1fr) 9px; gap:10px; align-items:center; padding:12px 0; border-top:1px solid #edf3fc; }.reading-related-symbol { display:grid; place-items:center; width:31px; height:35px; border-radius:8px; color:#006aff; background:#e5f1ff; font-size:1.3rem; }.reading-related > a:nth-child(3n+2) .reading-related-symbol { color:#8a39ed; background:#f1e8ff; }.reading-related > a:nth-child(3n) .reading-related-symbol { color:#00af7d; background:#e2faf1; }.reading-related-symbol svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.reading-related strong { display:block; color:#23416f; font-size:.75rem; line-height:1.5; font-weight:600; }.reading-related small { display:block; font-size:.67rem; color:#6b80a0; line-height:1.55; margin-top:4px; }.reading-related b { color:#0875ff; }.reading-side-card p { font-size:.79rem; color:#536e96; line-height:1.7; margin:0 0 14px; }.reading-try { background:linear-gradient(120deg,#e3f2ff,#eff7ff); }.reading-tool-button { display:flex; justify-content:center; align-items:center; gap:12px; border-radius:9px; padding:11px; color:white; background:linear-gradient(115deg,#168aff,#005cff); font-size:.78rem; font-weight:600; }.reading-help { background:#f3f8ff; }.reading-help > a { color:#0067ec; font-size:.78rem; }
.reading-page a:focus-visible { outline:3px solid #74b2ff; outline-offset:3px; }
@media(max-width:1100px) { .reading-layout { grid-template-columns:minmax(0,1fr) 270px; gap:18px; }.reading-hero { grid-template-columns:minmax(0,1fr); }.reading-hero-art { display:none; } }
@media(max-width:800px) { .reading-layout { grid-template-columns:minmax(0,1fr); }.reading-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }.reading-toc { grid-column:1/-1; }.reading-hero { min-height:0; padding:10px 0 25px; }.reading-section { scroll-margin-top:80px; } }
@media(max-width:500px) { .reading-content { padding:17px 13px; }.reading-section { grid-template-columns:28px minmax(0,1fr); gap:10px; }.reading-number { width:28px; height:28px; font-size:.9rem; }.reading-section h2 { font-size:1.08rem; margin-top:0; }.reading-section p { font-size:.85rem; line-height:1.8; }.reading-checklist { padding:12px; }.reading-sidebar { grid-template-columns:1fr; }.reading-breadcrumb { font-size:.67rem; }.lipicode-bold .reading-hero h1 { font-size:1.9rem; }.reading-hero-copy > p { font-size:.86rem; } }
/* A quieter article layout with a comfortable line length and stronger contrast. */
.reading-page { background:linear-gradient(180deg,#f0f7ff 0,#fff 330px); }
.reading-page > .container { max-width:1320px; }
.reading-layout { grid-template-columns:minmax(0,1fr) 285px; gap:25px; }
.reading-hero { display:block; min-height:0; padding:10px 0 24px; }
.reading-eyebrow { background:transparent; border-radius:0; padding:0; gap:10px; color:#46617f; font-size:.67rem; letter-spacing:.05em; }
.reading-eyebrow > span { width:43px; height:46px; border-radius:9px; background:linear-gradient(135deg,#35c5ff,#0066ff); box-shadow:inset 1px 1px 2px #ffffff60; }
.reading-eyebrow svg { width:28px; height:28px; stroke-width:1.6; }
.lipicode-bold .reading-hero h1 { max-width:850px; font-size:clamp(1.8rem,2.6vw,2.5rem); line-height:1.23; margin:15px 0 12px; letter-spacing:-.035em; }
.reading-hero-copy > p { max-width:760px; font-size:.95rem; line-height:1.75; color:#435774; }
.reading-meta { color:#68798f; font-size:.72rem; margin-top:15px; }
.reading-content { padding:25px; box-shadow:none; border-color:#dde6f1; }
.reading-section { grid-template-columns:30px minmax(0,1fr); gap:15px; padding-bottom:24px; }
.reading-section > div { max-width:76ch; }
.reading-number { width:30px; height:30px; font-size:.93rem; box-shadow:none; }
.reading-section h2 { font-size:1.13rem; margin:1px 0 11px; line-height:1.45; color:#152640; }
.reading-section p { color:#3f5069; font-size:.93rem; line-height:1.85; }
.reading-checklist { background:#f6f9fd; border-color:#e0e8f3; }
.reading-checklist li { color:#405570; font-size:.87rem; }
.reading-side-card { border-color:#dde6f1; padding:16px; }
.reading-side-card h2 { color:#1c2e48; font-size:.88rem; }
.reading-toc a { color:#415975; font-size:.76rem; padding:7px; }
.reading-related strong { color:#344a65; font-size:.75rem; }
.reading-related-symbol { border-radius:8px; }
.reading-side-card p { color:#53667f; }
@media(max-width:980px) { .reading-layout { grid-template-columns:minmax(0,1fr) 250px; gap:18px; }.reading-content { padding:20px; } }
@media(max-width:800px) { .reading-layout { grid-template-columns:minmax(0,1fr); }.reading-hero { padding-bottom:22px; } }
@media(max-width:500px) { .reading-content { padding:17px 13px; }.reading-section { grid-template-columns:26px minmax(0,1fr); gap:10px; }.reading-number { width:26px; height:26px; font-size:.82rem; }.reading-section p { font-size:.87rem; }.reading-section h2 { font-size:1.05rem; } }

.reading-examples figure{margin:14px 0 0;padding:10px;border:1px solid #dce9fa;border-radius:10px;background:#f7fbff}.reading-examples img{display:block;width:100%;height:auto;border-radius:6px}.reading-examples figcaption{font-size:.77rem;line-height:1.6;color:#425574;margin-top:9px}.reading-examples figcaption a{color:#0067ff}