.article-library,.article-reader{max-width:1320px;margin:0 auto;padding:28px 28px 52px}.article-library__hero{min-height:300px;padding:42px 48px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(125deg,color-mix(in srgb,var(--surface) 92%,var(--primary)),var(--surface2));display:flex;align-items:center;justify-content:space-between;gap:32px;overflow:hidden;position:relative}.article-library__hero:after{content:"";position:absolute;inset:auto -100px -170px auto;width:480px;height:480px;border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);border-radius:50%}.article-library__hero h1{font-size:clamp(2.45rem,5vw,5.2rem);letter-spacing:-.055em;line-height:.95;margin:10px 0 17px;max-width:850px}.article-library__hero p:not(.article-kicker){max-width:760px;font-size:1.05rem;color:var(--muted);margin:0}.article-kicker{margin:0;color:var(--primary);font-size:.76rem;font-weight:900;letter-spacing:.15em}.article-library__mark{width:180px;min-width:180px;aspect-ratio:1;border:1px solid var(--line);border-radius:28px;background:var(--surface);display:grid;place-items:center;align-content:center;box-shadow:var(--shadow-sm);position:relative;z-index:1}.article-library__mark span{font-family:"Yu Mincho",serif;font-size:5rem;color:var(--primary);line-height:1}.article-library__mark small{font-weight:800;color:var(--muted);margin-top:4px}.article-controls{display:flex;gap:14px;margin:22px 0 12px;align-items:center}.article-search{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px;min-height:52px}.article-search span{font-size:1.45rem;color:var(--muted)}.article-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}.article-sort-wrap{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.82rem;font-weight:800}.article-sort-wrap select{min-height:52px;border:1px solid var(--line);border-radius:12px;padding:0 38px 0 13px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700}.article-tag-row{display:flex;gap:8px;flex-wrap:wrap}.article-tag-row button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);padding:8px 12px;font-weight:800;cursor:pointer}.article-tag-row button:hover,.article-tag-row button.active{background:var(--primary);border-color:var(--primary);color:white}.article-library__summary{display:flex;gap:8px;align-items:center;margin:24px 1px 12px;color:var(--muted);font-size:.84rem}.article-library__summary b{color:var(--ink)}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.article-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.article-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:var(--shadow-sm)}.article-card[hidden]{display:none!important}.article-card__cover{height:210px;display:block;position:relative;overflow:hidden;background:var(--surface2)}.article-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.article-card:hover .article-card__cover img{transform:scale(1.025)}.article-card__eyebrow{position:absolute;left:14px;bottom:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);backdrop-filter:blur(8px);padding:6px 9px;border-radius:8px;font-size:.72rem;font-weight:900}.article-card__body{padding:18px;display:flex;flex-direction:column;flex:1}.article-card__meta{display:flex;gap:7px;color:var(--muted);font-size:.74rem;font-weight:700}.article-card h2{font-size:1.35rem;line-height:1.15;margin:10px 0 8px}.article-card h2 a{color:var(--ink);text-decoration:none}.article-card__body>p{color:var(--muted);margin:0 0 15px}.article-card__tags{display:flex;gap:6px;flex-wrap:wrap}.article-card__tags span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--muted);font-size:.7rem;font-weight:800}.article-card__read{margin-top:auto;padding-top:18px;color:var(--primary);text-decoration:none;font-weight:900}.article-card__read span{display:inline-block;transition:transform .18s}.article-card__read:hover span{transform:translateX(3px)}.article-empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:18px;background:var(--surface)}.article-empty span{font:4rem/1 "Yu Mincho",serif;color:var(--primary)}.article-empty h2{margin:10px 0 4px}.article-empty p{margin:0;color:var(--muted)}
.article-breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.8rem;margin:2px 0 24px}.article-breadcrumb a{color:var(--primary);text-decoration:none;font-weight:800}.article-reader__header{max-width:940px;margin:0 auto 28px;text-align:center}.article-reader__header h1{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.95;letter-spacing:-.055em;margin:12px 0 20px}.article-reader__dek{font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:800px;margin:0 auto}.article-reader__meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 13px;color:var(--muted);font-size:.8rem;font-weight:750}.article-reader__header .article-card__tags{justify-content:center}.article-reader__cover{margin:0 auto 38px;max-width:1120px;height:min(48vw,540px);min-height:300px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}.article-reader__cover img{width:100%;height:100%;object-fit:cover}.article-reader__layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:46px;justify-content:center}.article-reader__rail>div{position:sticky;top:94px;border-left:2px solid var(--line);padding-left:15px;display:flex;flex-direction:column;gap:10px}.article-reader__rail span{font-size:.7rem;letter-spacing:.12em;font-weight:900;color:var(--primary);margin-bottom:4px}.article-reader__rail a{color:var(--muted);text-decoration:none;font-size:.78rem;line-height:1.35}.article-reader__rail a:hover{color:var(--primary)}.article-reader__content{font-family:Georgia,"Noto Serif",serif;font-size:1.04rem;line-height:1.9}.article-reader__lead{font-size:1.25rem;line-height:1.72;color:var(--ink);margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--line)}.article-reader__content section{scroll-margin-top:100px}.article-reader__content h2{font-family:Inter,"Segoe UI",sans-serif;font-size:1.65rem;line-height:1.2;margin:42px 0 12px}.article-reader__content p{color:color-mix(in srgb,var(--ink) 86%,var(--muted));margin:0 0 22px}.article-reader__end{font-family:Inter,"Segoe UI",sans-serif;margin-top:48px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface2);display:flex;gap:18px}.article-reader__end>span{font:2.5rem/1 "Yu Mincho",serif;color:var(--primary)}.article-reader__end p{font-size:.88rem;line-height:1.5;margin:4px 0 10px;color:var(--muted)}.article-reader__end div div{display:flex;gap:14px;flex-wrap:wrap}.article-reader__end a,.article-back{color:var(--primary);font-weight:850;text-decoration:none}.article-back{display:block;width:max-content;margin:42px auto 0}
html[data-theme="night"] .article-library__hero{background:linear-gradient(125deg,#141b20,#1c1714)}html[data-theme="night"] .article-library__mark{background:#171d21}.article-card,.article-search,.article-sort-wrap select,.article-tag-row button{background:var(--surface)}
@media(max-width:1050px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-reader__layout{grid-template-columns:1fr}.article-reader__rail{display:none}}
@media(max-width:720px){.article-library,.article-reader{padding:16px 14px 40px}.article-library__hero{padding:28px 24px;min-height:250px}.article-library__mark{display:none}.article-controls{align-items:stretch;flex-direction:column}.article-sort-wrap{justify-content:space-between}.article-sort-wrap select{flex:1}.article-grid{grid-template-columns:1fr}.article-card__cover{height:190px}.article-library__summary{align-items:flex-start;flex-wrap:wrap}.article-reader__header{text-align:left}.article-reader__header .article-card__tags,.article-reader__meta{justify-content:flex-start}.article-reader__cover{height:260px;min-height:0}.article-reader__content{font-size:1rem}.article-reader__end{flex-direction:column}}

/* Phase 6 — Studio-published notebook articles */
.article-notebook-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm)}
.article-notebook-page{min-width:0;background:var(--surface);padding:30px 34px 38px;min-height:560px}
.article-notebook-label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.12em;margin-bottom:26px}
.article-notebook-label span{display:grid;place-items:center;min-width:36px;height:32px;padding:0 8px;border-radius:9px;background:var(--primary);color:white;letter-spacing:0}
.article-notebook-lead{font-family:Georgia,"Noto Serif",serif;font-size:1.15rem;line-height:1.72;margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.article-html-body{font-family:Georgia,"Noto Serif",serif;font-size:1.03rem;line-height:1.85;color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
.article-html-body h2,.article-html-body h3,.article-html-body h4{font-family:Inter,"Segoe UI",sans-serif;color:var(--ink);line-height:1.2;margin:34px 0 12px}.article-html-body h2{font-size:1.55rem}.article-html-body h3{font-size:1.25rem}
.article-html-body p{margin:0 0 20px}.article-html-body ul,.article-html-body ol{padding-left:1.4rem}.article-html-body a{color:var(--primary);font-weight:750}.article-html-body img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}.article-html-body figure{margin:28px 0}.article-html-body figcaption{color:var(--muted);font-size:.78rem;margin-top:7px}
.article-notebook-jp{font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif}.article-notebook-jp .article-html-body{font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif;font-size:1.08rem;line-height:2}.article-jp-title{font-size:1.7rem;margin:0 0 22px}.article-notebook-jp ruby{ruby-position:over}.article-notebook-jp rt{font-size:.57em;color:var(--muted)}
.article-notebook-jp .grammar-role.subject,.article-grammar-legend .subject{color:#7445bd}.article-notebook-jp .grammar-role.object,.article-grammar-legend .object{color:#167dc0}.article-notebook-jp .grammar-role.verb,.article-grammar-legend .verb{color:#d84234}.article-notebook-jp .grammar-role.particle,.article-grammar-legend .particle{color:#df7214}.article-notebook-jp .grammar-role.technical,.article-grammar-legend .technical{color:#078e88}.article-notebook-jp .grammar-role.connector,.article-grammar-legend .connector{color:#66717a}.article-notebook-jp .grammar-role.adjective,.article-grammar-legend .adjective{color:#32954c}.article-notebook-jp .grammar-role.time,.article-grammar-legend .time{color:#a46b0b}
.article-grammar-legend{display:flex;gap:7px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}.article-grammar-legend span{font-size:.68rem;font-weight:850;border:1px solid currentColor;border-radius:7px;padding:4px 7px}
.article-reader__end--wide{max-width:1180px;margin:24px auto 0}
@media(max-width:900px){.article-notebook-wrap{grid-template-columns:1fr}.article-notebook-page{min-height:0}.article-notebook-jp{border-top:1px solid var(--line)}}
@media(max-width:720px){.article-notebook-page{padding:24px 20px 30px}.article-html-body{font-size:1rem}.article-notebook-jp .article-html-body{font-size:1.03rem}}

/* Phase 6.2 — optional single-pane source / Japanese article switch */
.article-language-switch{max-width:900px;margin:0 auto 18px;display:flex;justify-content:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);width:max-content}.article-language-switch button{border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);padding:9px 16px;font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.article-language-switch button.active{background:var(--primary);border-color:var(--primary);color:white}.article-toggle-panel[hidden]{display:none!important}.article-reader__content--switch{max-width:900px;margin:0 auto;padding:12px 10px 8px}.article-reader__content--switch .article-html-body{font-size:1.04rem;line-height:1.9}.article-reader__content--jp{font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif}.article-reader__content--jp .article-html-body{font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif;font-size:1.08rem;line-height:2}.article-reader__content--jp ruby{ruby-position:over}.article-reader__content--jp rt{font-size:.57em;color:var(--muted)}.article-jp-title--switch{font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif;font-size:2rem;margin:0 0 26px}.article-reader__content--jp .grammar-role.subject{color:#7445bd}.article-reader__content--jp .grammar-role.object{color:#167dc0}.article-reader__content--jp .grammar-role.verb{color:#d84234}.article-reader__content--jp .grammar-role.particle{color:#df7214}.article-reader__content--jp .grammar-role.technical{color:#078e88}.article-reader__content--jp .grammar-role.connector{color:#66717a}.article-reader__content--jp .grammar-role.adjective{color:#32954c}.article-reader__content--jp .grammar-role.time{color:#a46b0b}
@media(max-width:720px){.article-language-switch{width:100%}.article-language-switch button{flex:1}.article-reader__content--switch{padding:4px 0}}


/* Phase 8 — article-only monetization */
.article-support-card{max-width:980px;margin:32px auto 8px;padding:18px 20px;border:1px solid var(--line,#d8cec0);border-radius:16px;background:color-mix(in srgb,var(--surface,#fff) 96%,#c99852 4%);display:flex;align-items:center;justify-content:space-between;gap:24px}
.article-support-card__copy{max-width:720px}.article-support-card__copy>span{display:block;color:var(--primary,#a9321b);font-size:.68rem;font-weight:900;letter-spacing:.12em;margin-bottom:4px}.article-support-card__copy>b{font-size:1rem}.article-support-card__copy p{margin:5px 0 0;color:var(--muted,#687077);font-size:.82rem;line-height:1.5}.article-support-card__cta{flex:0 0 auto;border:1px solid var(--primary,#a9321b);border-radius:10px;padding:10px 13px;color:var(--primary,#a9321b);font-size:.78rem;font-weight:850;text-decoration:none;background:var(--surface,#fff)}.article-support-card__cta:hover{background:color-mix(in srgb,var(--primary,#a9321b) 8%,var(--surface,#fff))}@media(max-width:760px){.article-support-card{align-items:flex-start;flex-direction:column}.article-support-card__cta{width:100%;text-align:center}}

/* Phase 9 — search growth, topic clusters, related reading, and ad diagnostics */
.article-tag-row a{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);padding:8px 12px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.article-tag-row a:hover,.article-tag-row a.active{background:var(--primary);border-color:var(--primary);color:white}.article-tag-row a small{font-size:.65rem;opacity:.75}.article-topic-all{color:var(--primary)!important}.article-topic-banner{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.article-topic-banner>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--primary);color:white;font-weight:900}.article-topic-banner div{display:flex;flex-direction:column}.article-topic-banner b{font-size:.86rem}.article-topic-banner a{color:var(--primary);font-size:.76rem;font-weight:800;text-decoration:none;margin-top:2px}
.article-card__tags a{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--muted);font-size:.7rem;font-weight:800;text-decoration:none}.article-card__tags a:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));color:var(--primary)}.article-reader__topics{justify-content:center}.article-reader__topics a{background:var(--surface2)}
.article-growth-block{max-width:1180px;margin:34px auto 0;padding-top:30px;border-top:1px solid var(--line)}.article-growth-heading>span{display:block;color:var(--primary);font-size:.68rem;font-weight:900;letter-spacing:.13em}.article-growth-heading h2{margin:5px 0 16px;font-size:1.45rem}.article-learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.article-learning-grid>a{display:flex;flex-direction:column;min-height:150px;padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .18s ease,transform .18s ease}.article-learning-grid>a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 42%,var(--line))}.article-learning-grid b{font-size:.96rem}.article-learning-grid p{color:var(--muted);font-size:.8rem;line-height:1.5;margin:6px 0 14px}.article-learning-grid span{margin-top:auto;color:var(--primary);font-size:.75rem;font-weight:850}
.article-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.article-related-grid>article{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.article-related-cover{display:block;height:150px;background:var(--surface2)}.article-related-cover img{width:100%;height:100%;object-fit:cover}.article-related-grid>article>div{padding:14px}.article-related-grid small{color:var(--muted);font-size:.68rem;font-weight:750}.article-related-grid h3{font-size:1rem;line-height:1.25;margin:6px 0}.article-related-grid h3 a{color:var(--ink);text-decoration:none}.article-related-grid p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-ad-debug{max-width:980px;margin:28px auto 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--muted)}.article-ad-debug b{display:inline-block;margin-right:8px;color:var(--ink)}.article-ad-debug [data-adsense-state]{font-weight:800;color:var(--primary)}.article-ad-debug p{margin:5px 0 0}.article-ad-debug[data-state="script-loaded"]{border-color:color-mix(in srgb,#2f8f57 45%,var(--line))}.article-ad-debug[data-state="script-error"]{border-color:color-mix(in srgb,#c43d32 55%,var(--line))}
@media(max-width:900px){.article-learning-grid,.article-related-grid{grid-template-columns:1fr}.article-related-grid>article{display:grid;grid-template-columns:170px 1fr}.article-related-cover{height:100%;min-height:140px}}
@media(max-width:720px){.article-reader__topics{justify-content:flex-start}.article-related-grid>article{grid-template-columns:1fr}.article-related-cover{height:170px}.article-growth-block{margin-top:28px;padding-top:24px}}
.article-tag-row button small{font-size:.65rem;opacity:.72;margin-left:4px}

/* Phase 10 — editorial distribution */
.article-share{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:1.6rem 0;padding:1rem 0;border-top:1px solid var(--line,#e7dfd2);border-bottom:1px solid var(--line,#e7dfd2)}
.article-share__label{font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.72;margin-right:.25rem}
.article-share__button{appearance:none;border:1px solid rgba(24,34,48,.16);background:rgba(255,255,255,.58);color:inherit;border-radius:999px;padding:.48rem .78rem;font:inherit;font-size:.86rem;cursor:pointer;text-decoration:none}
.article-share__button:hover{transform:translateY(-1px);border-color:rgba(181,68,45,.42)}
.article-share__status{font-size:.8rem;opacity:.72}
html[data-theme="dark"] .article-share__button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}