/* Warm Study Notes: one active component stylesheet. Fixed reference in DESIGN_SPEC.md. */
:root{--cream:#fdfaf3;--paper:#fffdf7;--green:#073e2f;--ink:#142d43;--muted:#415773;--sage:#e9f2dc;--line:#e6e4d8;--reading-font:'Avenir Next','Hiragino Sans',Arial,sans-serif;--display-font:'Arial Rounded MT Bold','Hiragino Sans',Arial,sans-serif;--compact-font:'DIN Alternate','Hiragino Sans',Arial,sans-serif;--note-font:'Chalkboard SE','Hiragino Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 var(--reading-font)}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:5px}a:hover{color:#3a743c}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #507dba;outline-offset:4px}[hidden]{display:none!important}[lang=ja]{font-family:'Hiragino Sans','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;letter-spacing:0}img{display:block;max-width:100%;object-fit:contain}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--green);font-family:var(--display-font);font-weight:700;line-height:1.15;letter-spacing:-.035em}p{margin-top:14px;color:var(--muted)}.shell{width:min(1210px,calc(100% - 64px));margin:auto}.skip-link{position:fixed;top:8px;left:8px;z-index:10;background:var(--green);color:white;padding:12px;transform:translateY(-150%)}.skip-link:focus{transform:none}.upcoming,.filter-summary{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.site-header{height:128px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.wordmark{width:460px;height:auto}.main-nav{display:flex;align-items:center;gap:48px;font:28px Arial,sans-serif}.main-nav>a{text-decoration:none}.main-nav>a[aria-current]{font-weight:700;border-bottom:3px solid #91c16f;padding-block:12px}.primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(#4a8541,#32683b);color:white!important;border:1px solid #3c733d;border-radius:42px;min-height:72px;padding:13px 34px;font-weight:700;text-decoration:none}.search-link{display:flex;align-items:center;justify-content:center;width:34px;height:48px}.search-link svg{width:30px;height:30px}.mobile-search,.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:62% 38%;padding:64px 0 45px;min-height:500px;align-items:center}.eyebrow{font-size:24px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;color:var(--green)}.hero h1{font-size:88px;line-height:1.02;letter-spacing:-.045em;margin-top:24px}.hero h1>span{display:block}.hero .intro{font-size:33px;line-height:1.3;margin-top:18px;white-space:nowrap}.hero-goma{height:350px;position:relative;display:flex;align-items:end;justify-content:center}.hero-goma img{position:absolute;width:460px;height:460px;max-width:none;right:-8px;bottom:-58px}.bubble{position:absolute;z-index:1;top:-40px;left:-48px;width:240px;background:#eff3dc;font:30px/1.2 var(--note-font);text-align:center;padding:24px 26px;border-radius:42% 34% 37% 8%;transform:rotate(-9deg);color:#153e38}
.topic-nav{display:flex;align-items:center;gap:0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fffdf780;min-height:96px}.topic{display:flex;align-items:center;justify-content:center;gap:20px;flex:1;min-width:0;min-height:70px;padding:8px 12px;border:0;border-radius:8px;background:none;font-family:var(--compact-font);font-size:25px;white-space:nowrap}.topic+.topic{border-left:1px solid var(--line)}.topic br{display:none}.topic svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.topic:hover,.topic:focus-visible{background:#eff3e5}.topic[aria-pressed=true]{background:#e6efd7}
.library{display:grid;grid-template-columns:240px minmax(0,1fr);gap:29px;margin-top:35px}.learning-paths{display:flex;flex-direction:column;gap:16px;align-self:start}.learning-paths button{min-height:268px;padding:22px 27px;border:1px solid transparent;text-align:left;border-radius:18px;background:#eaf3f7}.learning-paths button:nth-child(2){background:#edf3df}.learning-paths button:nth-child(3){background:#ffeadb}.learning-paths button:nth-child(4){background:#eeebf8}.learning-paths button[aria-pressed=true]{border-color:#568b4d;box-shadow:inset 3px 0 #568b4d}.learning-paths .num{display:block;font:48px/1.2 var(--compact-font);color:#65b3cd;margin-bottom:9px}.learning-paths button:nth-child(2) .num{color:#6b9e53}.learning-paths button:nth-child(3) .num{color:#fb7848}.learning-paths button:nth-child(4) .num{color:#9c87e7}.learning-paths strong{display:block;font:48px/1.1 var(--compact-font);letter-spacing:-.025em}.learning-paths strong>span{float:right;font-size:36px;font-weight:400}.learning-paths small{display:block;font-size:24px;line-height:1.45;color:var(--muted);margin-top:14px}
.feature{container-type:inline-size;display:grid;grid-template-columns:55% 45%;min-height:460px;border:1px solid #dee5dc;border-radius:18px;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(#d8e9ec70 1px,transparent 1px),linear-gradient(90deg,#d8e9ec70 1px,transparent 1px);background-size:24px 24px}.feature-copy{padding:25px}.tag{display:inline-block;font:20px/1.3 var(--compact-font);letter-spacing:.02em;color:#174833;text-transform:uppercase;background:#d9ecbf;border-radius:16px;padding:7px 18px}.feature h2{font:clamp(28px,5.1cqw,50px)/1.08 var(--compact-font);letter-spacing:-.025em;margin-top:22px}.feature h2>a{text-decoration:none}.feature h2 span{display:block;white-space:nowrap}.feature h2 small{font-size:.5em}.feature p{font-size:26px;line-height:1.3;margin-top:24px}.text-link{display:inline-flex;align-items:center;gap:12px;color:#164b32;font-family:var(--compact-font);font-size:34px;font-weight:700;margin-top:25px}.feature-art{display:flex;flex-direction:column;padding:28px 8px 5px 0;justify-content:center;min-width:0}.equation{font-family:'Hiragino Sans',sans-serif;text-align:center;white-space:nowrap;letter-spacing:0;color:#142d43}.feature-art .equation{font-size:64px;word-spacing:-.1em;line-height:1.1}.feature-art img{height:325px;width:100%;max-width:none;margin-top:12px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:30px 0 18px}.section-head h2{font:46px/1.1 var(--compact-font);letter-spacing:-.025em;color:var(--ink)}.reset-filter{border:0;background:none;text-decoration:none;padding:8px 0;color:var(--green);font:27px/1.2 var(--compact-font)}.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.guide-card{position:relative;min-height:400px;border:1px solid var(--line);border-radius:18px;background:#fffdf780;padding:21px 22px;display:flex;flex-direction:column}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;font:20px/1.2 var(--compact-font);color:#68809d}.guide-card .tag{font-size:19px;padding:6px 17px;background:#e0effb;color:#13314a}.guide-card:nth-child(2) .tag,.guide-card[data-category=jlpt] .tag{background:#e8ddfd;color:#463078}.guide-card[data-category=memory] .tag{background:#ffe1ce;color:#aa4828}.guide-card h3{font:28px/1.1 var(--compact-font);letter-spacing:-.02em;color:#102b43;margin-top:18px}.guide-card h3>span{display:block}.guide-card p{font-size:24px;line-height:1.4;margin-top:12px}.card-bottom{margin-top:auto;padding-top:14px;display:flex;justify-content:flex-end}.motif{position:relative;width:210px;height:125px;display:flex;align-items:center;justify-content:center}.motif img{width:180px;height:125px;max-width:none}.motif>span{position:absolute;left:0;top:0;font-size:85px;line-height:1.1}.motif-skate img,.motif-chart img{margin-left:70px;width:165px}.motif-repeat>span{font-size:40px;left:40%;top:30%;color:#bd4e36}.motif-check>span{font-size:44px;left:40%;top:42%}.motif svg{width:130px;height:120px}.empty-state{padding:35px;border:1px solid var(--line);border-radius:18px}.empty-state h3{font-size:35px}.empty-state p{font-size:25px}.empty-state .primary{margin-top:20px;font-size:24px}
.app-cta{display:flex;align-items:center;gap:20px;background:#e8f1d9;border-radius:14px;padding:18px 30px;margin-top:30px;min-height:150px}.cta-text{min-width:0;flex:1}.app-cta h2{font:38px/1.1 var(--compact-font);letter-spacing:-.02em}.app-cta p{font-size:26px;line-height:1.3;margin-top:10px}.app-cta .goma{width:210px;height:210px;margin:-50px -20px -50px 0;max-width:none}.badges{display:flex;align-items:center;gap:18px;flex-shrink:0}.badge{display:flex;align-items:center;justify-content:center;width:200px;height:60px}.badge img{width:100%;height:100%;object-fit:contain}.app-cta h2 em{font-style:italic}
.post-layout{position:relative;display:grid;grid-template-columns:minmax(0,900px) 250px;gap:50px}.post-content{font-size:28px;line-height:1.5;color:var(--muted);min-width:0}.breadcrumb{display:flex;gap:12px;align-items:center;font-size:21px;line-height:1.3;margin:25px 0 30px;color:#66788e;white-space:nowrap}.breadcrumb a{text-decoration:none}.breadcrumb-title{overflow:hidden;text-overflow:ellipsis;max-width:740px}.post-heading{width:980px;max-width:calc(100vw - 70px)}.post-heading .eyebrow,.post-heading .lede{display:none}.post-heading h1{font-size:61px;line-height:1.12;letter-spacing:-.045em}.post-heading h1>span{display:block;white-space:nowrap}.byline{display:flex;align-items:center;gap:16px;font-size:25px;line-height:1.2;margin:24px 0}.byline img{width:52px;height:52px}.post-tags{display:flex;gap:12px;margin-bottom:25px}.post-tags .tag{font-family:var(--reading-font);font-size:23px;line-height:1.2;text-transform:none;letter-spacing:0;padding:7px 20px;background:#e8f1d8}.article-intro{margin:0 0 32px;font-size:28px;line-height:1.5}.post-content h2{font:46px/1.1 var(--compact-font);letter-spacing:-.025em;margin:30px 0 18px}.post-content #why{position:relative}.post-content #why>h2,.post-content #stories>h2{display:flex;align-items:center;gap:18px}.post-content #why>h2:after,.post-content #stories>h2:after{content:'';flex:1;height:1px;background:var(--line)}.post-content #stories,.post-content #kana,.post-content #srs{width:1210px;max-width:calc(100vw - 64px)}#stories>h2{margin-top:32px}.toc{position:absolute;top:86px;right:0;width:270px;padding:20px 24px;border:1px solid var(--line);border-radius:14px;font-size:20px;background:#fffdf780}.toc h2{font:23px/1.2 var(--compact-font);letter-spacing:0}.toc a{display:block;border-left:3px solid #e4e9d9;padding-left:16px;margin-top:17px;text-decoration:none;font:22px/1.3 var(--compact-font);color:var(--muted)}.toc a[aria-current]{border-color:#659c4d;color:var(--green)}.toc details{display:none}.goma-tip{position:absolute;left:calc(100% + 18px);top:-20px;width:285px;display:flex;flex-direction:column-reverse;align-items:end;gap:0}.goma-tip img{width:250px;height:250px;max-width:none;margin-top:-35px}.goma-tip>div{background:#fde7d1;border-radius:43% 38% 40% 7%;transform:rotate(-7deg);padding:20px 24px;width:275px}.goma-tip strong{display:none}.goma-tip p{font:25px/1.3 var(--note-font);color:#173e38;margin:0}
.story-card{display:grid;grid-template-columns:46% 54%;padding:23px;margin-top:20px;border:1px solid #dfe7df;border-radius:18px;background-color:#fffef9;background-image:linear-gradient(#dcebef75 1px,transparent 1px),linear-gradient(90deg,#dcebef75 1px,transparent 1px);background-size:24px 24px;align-items:start}.story-summary{grid-column:1;grid-row:1}.story-heading{display:flex;align-items:center;gap:18px}.story-number{font:42px/1.1 var(--compact-font);padding:10px 17px;border-radius:12px;background:#e8f3fc;color:#4c9fc0}.story-heading .glyph{font:700 108px/1 'Hiragino Sans',sans-serif;color:#102441}.story-name h3{font:32px/1.15 var(--compact-font);text-transform:uppercase;letter-spacing:0;white-space:nowrap;color:#122a40}.story-facts{display:grid;grid-template-columns:max-content 1fr;gap:12px 18px;align-items:center;margin:30px 0 0 100px}.story-facts dt{font-size:25px;line-height:1.3;padding:5px 15px;background:#e7f1f7;border-radius:12px;justify-self:start;color:#2c485f}.story-facts dd{margin:0;font-size:25px;line-height:1.3;white-space:nowrap;color:#192e45}.story-visual{grid-column:2;grid-row:1;min-width:0}.story-visual .equation{word-spacing:-.07em;font-size:72px;line-height:1.1}.story-scene{display:grid;grid-template-columns:66% 34%;align-items:center;margin-top:5px}.story-scene img{width:100%;height:270px;transform:scale(1.08);transform-origin:50% 60%}.story-scene p{font:28px/1.35 var(--note-font);color:#ee6645;margin:0;padding-left:8px}.story-card>.app-cta{grid-column:1/-1;grid-row:2;margin:16px -10px -8px;padding:9px 20px;min-height:115px;border-radius:12px}.story-card>.app-cta h2{font:35px/1.1 var(--compact-font);margin:0}.story-card>.app-cta p{font-size:26px;margin-top:5px}.story-card>.app-cta .goma{width:130px;height:130px;margin:-12px 0}.story-card>.app-cta .badge{width:250px;height:75px}
.kana-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.post-content #kana>h2{font:30px/1.1 var(--compact-font);margin:20px 0 12px}.kana-card{position:relative;min-height:200px;padding:17px 23px;border:1px solid var(--line);border-radius:16px;background:#fffdf780;overflow:hidden}.kana-top{display:flex;align-items:start;justify-content:space-between}.kana-label{display:flex;align-items:center;gap:16px;color:#142d43}.kana-label>span{font-size:70px;line-height:1.1}.kana-label small{font:30px var(--compact-font)}.kana-top>img{position:absolute;right:12px;top:4px;width:220px;height:184px}.kana-top>.motif{position:absolute;right:8px;top:18px;width:155px;height:150px}.kana-top .motif svg{width:125px;height:125px}.kana-card p{position:relative;width:60%;font-size:22px;line-height:1.35;margin-top:10px}.post-content #srs{position:relative;min-height:120px}.post-content #srs>h2{font:30px var(--compact-font);margin:18px 0 8px}.post-content #srs>p{font-size:21px;line-height:1.35;margin:0 290px 0 0}.landscape{position:absolute;right:0;top:5px;width:240px;height:120px}.more-stories-details{margin-top:0}.more-stories-details>summary{display:table;margin:-8px 290px 0 auto;list-style:none;border-radius:30px;background:linear-gradient(#4a8541,#32683b);color:white;padding:10px 24px;font:23px/1.2 var(--compact-font);cursor:pointer}.more-stories-details>summary::-webkit-details-marker{display:none}.more-stories-details[open]>summary{margin-top:15px}.more-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:25px}.mini-story{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.mini-number{font-size:19px;color:#68809d}.mini-top{display:flex;align-items:center;gap:20px}.mini-top .glyph{font-size:90px;color:#142d43}.mini-top h3{font-size:30px}.parts{font-size:24px}.mini-story p{font-size:25px}.editorial-note{font-size:.85em}.more-stories-details .app-cta h2{font-size:33px}.more-stories-details .app-cta .goma{width:120px;height:120px}.related{margin:14px 0 35px}.related .section-head{margin:0 0 10px}.related .section-head h2{font:29px var(--compact-font)}.related .post-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.related .guide-card{display:grid;grid-template-columns:75px minmax(0,1fr);gap:0 10px;min-height:135px;padding:14px 10px;border-radius:12px}.related .card-meta{grid-column:2;grid-row:1;font-size:13px;gap:4px;align-items:start;justify-content:start}.related .card-meta>span:last-child{display:none}.related .tag{font-size:13px;padding:3px 8px}.related .guide-card h3{grid-column:2;grid-row:2;font:19px/1.15 var(--compact-font);margin:5px 0 0}.related .guide-card h3>span{display:inline}.related .guide-card>p{display:none}.related .card-bottom{display:contents}.related .motif{grid-column:1;grid-row:1/3;width:75px;height:85px;align-self:center}.related .motif img{width:75px;height:85px;margin:0}.related .motif>span{display:none}
@media(min-width:701px) and (max-width:1050px){
.shell{width:calc(100% - 48px)}.site-header{height:100px;gap:20px}.wordmark{width:260px}.main-nav{gap:22px;font-size:20px}.primary{min-height:50px;padding:10px 22px}.hero{grid-template-columns:60% 40%;padding:42px 0;min-height:360px}.hero h1{font-size:54px}.hero .eyebrow{font-size:16px}.hero .intro{font-size:23px}.hero-goma{height:230px}.hero-goma img{width:300px;height:300px;bottom:-26px}.bubble{width:170px;top:-20px;left:-15px;font-size:20px;padding:18px}.topic-nav{min-height:70px}.topic{font-size:16px;min-height:50px;gap:10px;padding:6px}.topic svg{width:25px;height:25px}.library{grid-template-columns:150px minmax(0,1fr);gap:20px;margin-top:25px}.learning-paths button{min-height:190px;padding:20px}.learning-paths .num{font-size:34px}.learning-paths strong{font-size:30px}.learning-paths strong>span{font-size:26px}.learning-paths small{font-size:17px}.feature{min-height:330px}.feature-copy{padding:20px}.feature h2{font-size:clamp(28px,5.1cqw,32px)}.feature p{font-size:17px}.feature .tag{font-size:15px}.feature-art .equation{font-size:36px}.feature-art img{height:220px}.text-link{font-size:24px}.section-head h2{font-size:32px}.reset-filter{font-size:20px}.guide-card{min-height:300px;padding:18px}.guide-card h3{font-size:25px}.guide-card p{font-size:18px}.guide-card .tag{font-size:14px}.card-meta{font-size:14px}.motif{width:160px;height:110px}.motif img{width:130px;height:110px}.motif-skate img,.motif-chart img{margin-left:45px}.motif>span{font-size:60px}.motif-repeat>span,.motif-check>span{font-size:30px}.app-cta{gap:14px;padding:20px;flex-wrap:wrap;min-height:120px}.app-cta h2{font-size:28px}.app-cta p{font-size:18px}.app-cta .goma{width:110px;height:110px;margin:-10px}.badge{width:145px;height:44px}.post-layout{grid-template-columns:minmax(0,1fr) 175px;gap:26px}.post-content{font-size:20px}.post-heading{width:calc(100% + 175px)}.post-heading h1{font-size:43px}.breadcrumb{font-size:14px}.byline{font-size:18px}.byline img{width:36px;height:36px}.post-tags .tag{font-size:16px}.article-intro{font-size:20px}.post-content h2{font-size:32px}.toc{width:175px;top:155px;padding:15px}.toc h2{font-size:19px}.toc a{font-size:16px;margin-top:12px;padding-left:8px}.goma-tip{width:175px;left:calc(100% + 22px);top:25px}.goma-tip>div{width:175px;padding:14px}.goma-tip p{font-size:17px}.goma-tip img{width:170px;height:170px}.post-content #stories,.post-content #kana,.post-content #srs{width:calc(100% + 201px);max-width:calc(100vw - 48px)}.story-card{padding:18px;grid-template-columns:45% 55%}.story-heading{gap:8px}.story-heading .glyph{font-size:72px}.story-number{font-size:25px;padding:6px 10px}.story-name h3{font-size:22px}.story-facts{margin:20px 0 0 10px;gap:9px}.story-facts dt,.story-facts dd{font-size:17px}.story-facts dt{padding:4px 8px}.story-visual .equation{font-size:43px}.story-scene img{height:190px}.story-scene p{font-size:19px}.story-card>.app-cta .goma{width:85px;height:85px}.story-card>.app-cta h2{font-size:27px}.story-card>.app-cta p{font-size:18px}.story-card>.app-cta .badge{width:150px;height:45px}.story-card>.app-cta .badges{margin-left:auto}.kana-card{min-height:175px;padding:15px}.kana-label>span{font-size:50px}.kana-label small{font-size:23px}.kana-card p{font-size:17px}.kana-top>img{width:155px;height:145px}.kana-top>.motif{width:105px;height:100px}.kana-top .motif svg{width:90px;height:90px}.post-content #srs>p{font-size:17px;margin-right:190px}.landscape{width:170px;height:100px}.more-stories-details>summary{font-size:18px;margin-right:180px}.related .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related .guide-card h3{font-size:21px}.mini-story p{font-size:19px}}
@media(max-width:700px){
.shell{width:calc(100% - 32px)}.site-header{height:76px;gap:18px}.wordmark{width:232px}.main-nav{display:none}.mobile-search{display:flex;align-items:center;justify-content:center;width:26px;height:44px;margin-left:auto;flex-shrink:0}.mobile-search svg{width:25px;height:25px}.mobile-nav{display:block;position:relative;flex-shrink:0}.mobile-nav summary{display:flex;align-items:center;justify-content:center;list-style:none;font-size:0;width:28px;height:44px;cursor:pointer}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav nav{position:absolute;right:0;top:44px;z-index:5;width:200px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 8px 24px #173e3020}.mobile-nav nav a{display:block;padding:12px;text-decoration:none;font-size:16px}.hero{grid-template-columns:minmax(0,1fr) 128px;padding:21px 0 17px;min-height:256px;align-items:start}.hero .eyebrow{font-size:13px;letter-spacing:0;white-space:nowrap}.hero h1{font-size:33px;line-height:1.07;letter-spacing:-.06em;margin-top:14px;width:278px;max-width:none}.hero .intro{font-size:18px;line-height:1.4;margin-top:13px;white-space:normal}.hero .intro>span{display:block;white-space:nowrap}.hero-goma{height:204px;min-height:204px;margin:0}.hero-goma img{width:190px;height:190px;right:-12px;bottom:-54px}.bubble{width:130px;top:0;left:0;padding:13px 14px;font-size:17px}.topic-nav{border:0;background:none;border-radius:0;gap:2px;padding:0;align-items:start;min-height:118px}.topic{border:0!important;flex:1;flex-direction:column;font:15px/1.2 var(--compact-font);white-space:normal;min-height:110px;gap:9px;padding:7px 0}.topic>span{max-width:75px;white-space:nowrap}.topic br{display:block}.topic svg{width:58px;height:58px;padding:14px;border-radius:50%;background:#eff4df}.topic[aria-pressed=true]{background:none}.topic[aria-pressed=true] svg{background:#dceac9}.library{display:block;margin-top:10px}.learning-paths{display:none}.feature{grid-template-columns:54% 46%;padding:18px 18px 13px;min-height:0;border-radius:14px;background-size:19px 19px}.feature-copy,.feature-art{display:contents}.feature-copy>.tag{grid-column:1/-1;grid-row:1;justify-self:start;font-size:14px;padding:5px 14px;margin:0 0 10px;border-radius:12px}.feature h2{grid-column:1/-1;grid-row:2;font:34px/1.02 var(--compact-font);letter-spacing:-.025em;margin:0 0 14px}.feature h2 small{font-size:.57em}.feature h2 span{white-space:nowrap}.feature-art .equation{grid-column:1/-1;grid-row:3;font-size:50px;line-height:1.1;margin:0 0 10px}.feature p{grid-column:1;grid-row:4;font-size:16px;line-height:1.45;margin:0 3px 0 0}.feature-art img{grid-column:2;grid-row:4;width:calc(100% + 16px);height:200px;margin:0 0 0 -6px;align-self:center}.feature .text-link{grid-column:1/-1;grid-row:5;font:24px/1.2 var(--compact-font);margin:10px 0 0;min-height:35px}.section-head{margin:25px 0 12px;gap:10px}.section-head h2{font:27px var(--compact-font)}.reset-filter{font-size:18px;min-height:35px}.post-grid{grid-template-columns:1fr;gap:10px}.guide-card{display:grid;grid-template-columns:80px minmax(0,1fr);gap:0 13px;min-height:110px;padding:12px 11px;border-radius:13px}.card-meta{grid-column:2;grid-row:1;justify-content:start;align-items:center;gap:12px;font-size:13px}.guide-card .tag{font-size:12px;padding:3px 10px;border-radius:9px}.guide-card h3{grid-column:2;grid-row:2;font:21px/1.12 var(--compact-font);letter-spacing:-.015em;margin:6px 0 0;align-self:start}.guide-card h3>span{display:inline}.guide-card>p{display:none}.card-bottom{display:contents}.card-bottom>.motif{grid-column:1;grid-row:1/3;align-self:center;width:80px;height:82px}.card-bottom>.motif img{width:82px;height:82px;margin:0}.card-bottom>.motif>span{display:none}.app-cta{display:grid;grid-template-columns:minmax(0,1fr) 75px;gap:6px;padding:14px 13px;margin-top:18px;min-height:130px;border-radius:13px}.app-cta .cta-text{grid-column:1/-1;grid-row:1}.app-cta h2{font:23px/1.1 var(--compact-font);letter-spacing:-.02em;white-space:nowrap}.app-cta p{font-size:14px;line-height:1.3;margin-top:6px}.app-cta .goma{grid-column:2;grid-row:1/3;align-self:end;width:98px;height:98px;margin:0 -10px -5px -5px}.app-cta .badges{grid-column:1;grid-row:2;gap:7px;margin:3px 0 0;min-width:0}.app-cta .badge{width:calc(50% - 4px);height:35px;max-width:130px}
.post-layout{display:flex;flex-direction:column;gap:0}.post-content{display:contents;font-size:18px;line-height:1.5}.breadcrumb{order:-3;font-size:12px;gap:8px;margin:18px 0 17px}.breadcrumb-title{max-width:175px}.post-heading{order:-2;width:100%;max-width:none}.post-heading h1{font:700 33px/1.12 var(--display-font);letter-spacing:-.045em}.post-heading h1>span{display:inline;white-space:normal}.byline{font-size:16px;gap:11px;margin:19px 0 17px}.byline img{width:34px;height:34px}.post-tags{gap:7px;margin-bottom:22px}.post-tags .tag{font-size:15px;padding:5px 13px;border-radius:14px;line-height:1.25}.article-intro{display:none}.toc{position:static;order:-1;width:100%;padding:0;margin:0 0 25px;font-size:18px;border-radius:12px}.toc .desktop-toc{display:none}.toc details{display:block}.toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 16px;font:22px var(--compact-font);cursor:pointer;color:#142d43}.toc summary::-webkit-details-marker{display:none}.toc summary:after{content:'';width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;margin-top:-5px}.toc details[open] summary:after{transform:rotate(225deg);margin-top:5px}.toc a{font-size:18px;border:0;border-top:1px solid var(--line);padding:12px 17px;margin:0;min-height:48px}.post-content #why,.post-content #stories,.post-content #kana,.post-content #srs{width:100%;max-width:none}.post-content h2{font:30px/1.1 var(--compact-font);margin:23px 0 14px}.post-content #why>h2{margin-top:0}.post-content #why>p{font-size:18px;line-height:1.5;margin:0}.goma-tip{position:static;left:auto;top:auto;width:100%;display:flex;flex-direction:row;align-items:center;gap:10px;margin:13px 0 8px}.goma-tip img{width:145px;height:145px;transform:scale(1.18);margin:0 -8px 0 0;flex-shrink:0}.goma-tip>div{width:auto;flex:1;padding:15px 13px;border-radius:44% 35% 43% 7%}.goma-tip p{font-size:19px;line-height:1.25}.post-content #stories>h2{margin:10px 0 14px}.post-content #why>h2:after{display:none}.story-card{display:flex;flex-direction:column;padding:16px 12px;margin-top:16px;gap:0;border-radius:14px;background-size:20px 20px}.story-summary{display:contents}.story-heading{order:0;gap:10px}.story-number{font-size:25px;padding:8px 11px;border-radius:8px}.story-heading .glyph{font-size:57px;line-height:1}.story-name h3{font:23px var(--compact-font)}.story-visual{order:1;width:100%;margin-top:10px}.story-visual .equation{font-size:49px;line-height:1.1}#story-2 .equation{font-size:40px}.story-scene{grid-template-columns:56% 44%;margin-top:3px}.story-scene img{height:182px;transform:none}.story-scene p{font-size:17px;line-height:1.3;padding-left:7px}.story-facts{order:2;grid-template-columns:max-content 1fr;margin:10px 0 0;gap:7px 13px}.story-facts dt{font-size:16px;padding:3px 11px;border-radius:7px}.story-facts dd{font-size:17px;line-height:1.3}.story-card>.app-cta{align-self:stretch;order:3;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 8px;margin:12px -4px -7px;padding:8px 10px;min-height:0}.story-card>.app-cta .goma{grid-column:1;grid-row:1;width:44px;height:44px;margin:0}.story-card>.app-cta .cta-text{grid-column:2;grid-row:1;text-align:center}.story-card>.app-cta h2{font:20px/1.1 var(--compact-font);white-space:normal}.story-card>.app-cta p{font-size:15px;margin-top:1px;line-height:1.2}.story-card>.app-cta .badges{grid-column:1/-1;grid-row:2;justify-content:center;width:100%;margin:2px 0 0;gap:8px}.story-card>.app-cta .badge{width:calc(50% - 4px);max-width:155px;height:45px}.kana-grid{grid-template-columns:1fr;gap:12px}.post-content #kana>h2{font-size:25px;margin-top:20px}.kana-card{min-height:165px;padding:15px}.kana-label>span{font-size:57px}.kana-label small{font-size:25px}.kana-top>img{width:165px;height:150px}.kana-top>.motif{width:120px;height:120px}.kana-card p{font-size:16px;line-height:1.4;width:55%;margin-top:8px}.post-content #srs>h2{font-size:26px}.post-content #srs>p{font-size:16px;margin-right:0;padding-right:80px}.landscape{width:100px;height:80px;top:24px}.more-stories-details>summary{margin:15px 0 0;font-size:20px;padding:12px 20px}.more-stories{grid-template-columns:1fr;gap:14px}.mini-story{padding:20px}.mini-number{font-size:14px}.mini-top .glyph{font-size:65px}.mini-top h3{font-size:25px}.parts{font-size:18px}.mini-story p{font-size:18px}.more-stories-details .app-cta{display:flex;flex-wrap:wrap;padding:15px}.more-stories-details .app-cta h2{font-size:25px;white-space:normal}.more-stories-details .app-cta p{font-size:16px}.more-stories-details .app-cta .goma{width:70px;height:70px;margin:0}.more-stories-details .app-cta .badges{width:100%;justify-content:center}.more-stories-details .app-cta .badge{width:140px;height:43px}.related{margin:25px 0}.related .section-head h2{font-size:26px}.related .post-grid{grid-template-columns:1fr;gap:10px}.related .guide-card{grid-template-columns:80px minmax(0,1fr);min-height:100px;padding:12px}.related .guide-card h3{font-size:21px}.related .card-meta{gap:10px}.related .card-meta>span:last-child{display:block}.related .tag{font-size:12px}.related .motif{width:80px;height:75px}.related .motif img{width:80px;height:75px}}
@media(max-width:360px){.wordmark{width:175px}.site-header{gap:12px}.hero{grid-template-columns:minmax(0,1fr) 100px;min-height:240px}.hero h1{font-size:26px;width:235px}.hero .eyebrow{font-size:11px}.hero .intro{font-size:16px}.hero-goma img{width:178px;height:178px;right:-12px;bottom:-28px}.bubble{width:110px;font-size:14px;padding:12px;left:-5px}.topic{font-size:12px}.topic svg{width:49px;height:49px;padding:12px}.feature{padding:16px 13px}.feature h2{font-size:28px}.feature h2 small{font-size:.5em}.feature-art .equation{font-size:45px}.feature p{font-size:14px}.feature-art img{height:200px}.guide-card{grid-template-columns:65px minmax(0,1fr);gap:0 10px;padding:11px 9px}.guide-card h3{font-size:19px}.card-meta{font-size:11px;gap:7px}.guide-card .tag{font-size:11px;padding:3px 7px}.card-bottom>.motif{width:65px}.card-bottom>.motif img{width:67px;height:75px}.app-cta h2{font-size:20px}.app-cta p{font-size:12px}.app-cta .goma{width:80px;height:80px}.post-heading h1{font-size:28px}.post-tags .tag{font-size:13px;padding:4px 10px}.story-visual .equation{font-size:39px}#story-2 .equation{font-size:32px}.story-scene p{font-size:15px}.story-scene img{height:158px}.story-facts dd{font-size:15px}.story-name h3{font-size:20px}.goma-tip img{width:115px;height:115px}.goma-tip p{font-size:17px}.story-card>.app-cta h2{font-size:18px}.story-card>.app-cta p{font-size:13px}.story-card>.app-cta .badge{height:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Compact titles retain the bold weight used by the fixed visual target. */
.feature h2,.section-head h2,.guide-card h3,.learning-paths strong,.app-cta h2,.post-content h2,.story-name h3,.related .section-head h2{font-weight:700}

@media(min-width:1051px){#story-2 .story-scene img{height:230px}#story-2 .story-scene p{font-size:25px;line-height:1.32}}

/* Keep the rotated speech bubble clear of the three-line hero at narrow phone widths. */
@media(min-width:361px) and (max-width:440px){.hero .bubble{left:36px;width:94px;padding:13px 4px}}

/* Let the supporting copy wrap beside Goma instead of running underneath the art. */
@media(max-width:374px){.hero .intro{font-size:16px;max-width:calc(100% - 40px)}.hero .intro>span{white-space:normal}}