/* Beginner guides: readable without JavaScript, with fully visible answers. */
.learn-guide,.learn-hub{overflow-wrap:anywhere}
.learn-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding-top:52px;padding-bottom:54px}
.learn-hero h1,.learn-hub h1{font:800 clamp(36px,4.5vw,62px)/1.08 Archivo,sans-serif;letter-spacing:-.04em;margin:14px 0 22px;max-width:20ch}
.learn-intro{font-size:20px;line-height:1.65;max-width:62ch}
.learn-meta{font-size:13px;opacity:.75;margin:22px 0}
.learn-hero figure{margin:0;transform:rotate(2deg)}
.learn-hero img{display:block;width:100%;height:auto;border:1px solid #d6ccbb;border-radius:6px;box-shadow:8px 10px 0 #e7dcc8}
.learn-languages{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}
.learn-languages a{display:inline-block;font-size:13px;text-decoration:none;border:1px solid #b5aa98;border-radius:30px;padding:7px 11px;line-height:1.5}
.learn-languages a:hover,.learn-languages a[aria-current]{color:#fff;background:#273e42;border-color:#273e42}
.learn-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:64px;align-items:start;padding-bottom:80px}
.learn-body{min-width:0;max-width:790px}
.learn-body p{font-size:17px;line-height:1.85;margin:14px 0}
.learn-body h2{font:700 29px/1.3 Archivo,sans-serif;letter-spacing:-.02em;margin:8px 0 22px}
.learn-body h3{font:700 21px/1.4 Archivo,sans-serif;margin:0 0 12px}
.learn-body :is(h2,h3){scroll-margin-top:90px}
.learn-body a{text-underline-offset:3px}
.learn-toc{position:sticky;top:85px;border-top:3px solid #273e42;padding-top:16px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin;padding-right:10px}
.learn-toc h2{font:700 16px/1.4 Archivo,sans-serif;margin:0 0 16px}
.learn-toc ol{padding:0;list-style:none;margin:0}
.learn-toc>ol>li{margin-bottom:18px}
.learn-toc>ol>li>a{font-weight:700;font-size:14px}
.learn-toc ol ol{margin:8px 0 0 10px;border-left:1px solid #bdb19f;padding-left:12px}
.learn-toc ol ol a{font-size:12px;line-height:1.55;display:block;margin:8px 0}
.learn-toc a{text-decoration:none}
.learn-toc a:hover{text-decoration:underline}
.learn-short{border-left:4px solid #c9332a;background:#eee5d5;padding:26px 30px;margin-bottom:36px}
.learn-engine{border:1px solid #a99d8a;border-radius:8px;padding:30px;margin-bottom:60px}
.learn-engine figure{margin:25px 0;padding:20px;background:#fff9ee;border-radius:6px}
.learn-engine figcaption{font-size:13px;margin-bottom:16px}
.learn-chart{display:block;width:100%;height:auto;max-height:150px}
.learn-counts{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px;margin:18px 0}
.learn-counts b{font-size:22px}
.learn-tool-note{font-size:14px!important;border-top:1px solid #bdb19f;padding-top:16px}
.learn-section{margin:0 0 56px}
.learn-number{font:500 14px 'Martian Mono',monospace!important;color:#b52b24;margin:0!important}
.learn-answer{border-top:1px solid #cfc3b1;padding:27px 0 30px}
.learn-answer:last-child{padding-bottom:0}
.learn-related{font-size:14px!important;margin-bottom:0!important}
.learn-related span:first-child{opacity:.75}
.learn-sources{padding:28px 0;border-top:2px solid #273e42}
.learn-sources li{font-size:14px;line-height:1.7;margin:10px 0}
.learn-next{margin-top:24px;padding:30px;background:#eee5d5;border-radius:8px}
.learn-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.learn-tool-grid a{font-size:15px;line-height:1.5}
.learn-footer .learn-brand{font:800 32px Archivo,sans-serif;text-decoration:none;letter-spacing:-.04em}
.learn-footer-links{display:flex;flex-wrap:wrap;gap:16px 28px;margin:24px 0;font-size:14px}
.learn-footer p{font-size:12px}
.learn-hub{padding-top:64px;padding-bottom:80px}
.learn-hub>p{max-width:68ch;line-height:1.8}
.learn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:40px 0 50px}
.learn-card{border:1px solid #bcaf9a;border-radius:8px;padding:26px;text-decoration:none;transition:background .15s}
.learn-card:hover{background:#eee5d5}
.learn-card>span{font-size:13px;color:#b52b24;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.learn-card h2{font:700 23px/1.35 Archivo,sans-serif;letter-spacing:-.02em;margin:18px 0}
.learn-card p{font-size:15px;line-height:1.75;margin:0}
.learn-hub-note{max-width:78ch;border-top:3px solid #273e42;padding-top:24px}
.learn-hub-note p{line-height:1.8}
html[lang=ja] .learn-guide{line-break:strict;overflow-wrap:break-word}
html[lang=ja] body{font-family:"Instrument Sans","Yu Gothic",Meiryo,system-ui,sans-serif}
html[lang=ja] .learn-guide :is(h1,h2,h3){font-family:Archivo,"Yu Gothic",Meiryo,system-ui,sans-serif;word-break:auto-phrase;text-wrap:balance}
html[lang=ja] .learn-hero h1{font-size:clamp(32px,3.5vw,48px);line-height:1.5;letter-spacing:.01em}
html[lang=ja] .learn-body :is(h2,h3){line-height:1.65}
html[lang=ja] .learn-body p{line-height:2}
@media(max-width:1000px){.learn-layout{grid-template-columns:220px minmax(0,1fr);gap:32px}.learn-hero{gap:30px}.learn-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.learn-hero{grid-template-columns:1fr;padding-top:30px;gap:28px;padding-bottom:38px}.learn-hero h1{font-size:40px;max-width:23ch}.learn-hero figure{max-width:550px;transform:none}.learn-layout{display:block}.learn-toc{position:static;max-height:none;overflow:visible;margin-bottom:32px;padding-right:0}.learn-toc>ol{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.learn-toc ol ol{display:none}.learn-intro{font-size:18px}.learn-body p{font-size:16px}.learn-engine,.learn-short,.learn-next{padding:22px}.learn-body h2{font-size:26px}.learn-body h3{font-size:20px}.learn-hub{padding-top:35px}.learn-hub h1{font-size:48px}}
@media(max-width:480px){.learn-cards,.learn-tool-grid{grid-template-columns:1fr}.learn-card{padding:23px}.learn-hero h1{font-size:35px}.learn-engine figure{padding:13px}.learn-languages a{font-size:12px;padding:6px 10px}.learn-body h2{font-size:24px}.learn-body h3{font-size:19px}.learn-counts{gap:8px 16px}.learn-counts b{font-size:20px}html[lang=ja] .learn-hero h1{font-size:30px}}
@media print{.top,.foot,.crumbs,.learn-toc,.learn-languages{display:none!important}.learn-layout,.learn-hero{display:block}.learn-hero figure{max-width:450px}.learn-answer{break-inside:avoid}.learn-body{max-width:none}}