/*
Theme Name: Kumotate
Theme URI: https://www.kumotate.com/
Author: ippei
Description: くもたて。手順を見ながらAWSを操作するための、本文と学習の現在地を中心にしたテーマ。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kumotate
Tags: education, one-column, three-columns, custom-menu
*/

/* 色・字体・角丸・影の定義は、このトークン領域に集約する。既定は無彩色の白。ダークは html[data-theme="dark"] を付けたときだけで、OS の設定には追従しない（2026-11-08 にダーク既定を試したが見づらいため白に戻した）。 */
:root{
  --paper:#ffffff; --paper-2:#f3f4f6; --ink:#1f2a37; --ink-2:#465263; --ink-3:#526071;
  --line:#dcdfe4; --line-strong:#6f7a88;
  --amber:#9b5609; --amber-soft:#fbe9d2; --on-amber:#ffffff;
  --blue:var(--ink); --blue-soft:var(--paper-2);
  --green:var(--ink-2); --green-soft:var(--paper-2);
  --code-bg:#1b2430; --code-fg:#e6edf3; --code-control:#344255; --code-control-hover:#405168; --code-border:#64748b;
  --copy-bg:var(--code-control); --copy-border:var(--code-border); --copy-hover:var(--code-control-hover);
  --focus:var(--ink); --button-bg:var(--ink); --button-fg:var(--paper);
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-size-body:16.5px; --line-height-body:1.85; --font-size-small:13.5px;
  --font-size-code:13.25px; --line-height-code:1.6;
  --reading-width:40rem; --site-width:1200px; --tap-size:44px;
  --paragraph-gap:calc(var(--font-size-body) * var(--line-height-body) * 1.1);
  --h2-before:3rem; --h2-after:1.25rem;
  --radius-none:0; --radius-sm:3px; --radius-md:6px; --radius-lg:8px; --radius-pill:999px;
  --shadow-none:none; --shadow-current:inset 3px 0 0 var(--amber);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0f1620; --paper-2:#172030; --ink:#e7ebf0; --ink-2:#b7c1ce; --ink-3:#a6b0bf;
  --line:#334050; --line-strong:#8593a6; --amber:#f0ad55; --amber-soft:#362714; --on-amber:#0f1620;
  --code-bg:#0a0f16; --code-fg:#e6edf3; --code-control:#263447; --code-control-hover:#34465d; --code-border:#8190a3;
  color-scheme:dark;
}

/* Base / accessible controls */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--font-size-body)/var(--line-height-body) var(--font-body)}
/* 日本語は文節で折り返す（Chromium 119 以降。非対応ブラウザーは従来どおり）。狭い画面では行末の空きが目立つので 640px 以上に限る。見出しと本文は行末の孤立を避ける */
body{line-break:strict}
@media(min-width:640px){body{word-break:auto-phrase}}
h1,h2,h3,p,li,dd,figcaption{text-wrap:pretty}
code,pre,.mono,kbd,table{word-break:normal}
[hidden]{display:none!important}
a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px}
/* 本文中のリンクは行の流れを崩さない（WCAG 2.5.8 の文中リンクの例外）。操作領域 44px はナビ・ボタン・単独リンクに限る */
.nav a,.note-btn,.home-text-link,.home-step,.home-topic,.home-latest-note a,.home-resume a,.site-footer a,.page-numbers,.tpl a{display:inline-flex;align-items:center;min-inline-size:var(--tap-size);min-block-size:var(--tap-size);max-inline-size:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{min-inline-size:var(--tap-size);min-block-size:var(--tap-size);cursor:pointer}
button:disabled{cursor:default}
button,summary{-webkit-tap-highlight-color:transparent}
summary{min-block-size:var(--tap-size);align-content:center;cursor:pointer;padding-block:8px}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.45;text-wrap:pretty;overflow-wrap:anywhere}
img,svg{max-inline-size:100%;block-size:auto}
img{vertical-align:middle}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow,.home-eyebrow{margin:0;color:var(--ink-3);font:500 12px/1.7 var(--font-mono);letter-spacing:.04em}
.quiet,.entry-meta,.home-cost-note{font-size:var(--font-size-small);line-height:1.75;color:var(--ink-3)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{position:fixed!important;clip:auto;clip-path:none;inset:8px auto auto 8px;inline-size:auto;block-size:auto;min-block-size:var(--tap-size);margin:0;padding:8px 16px;z-index:1000;background:var(--paper);border:2px solid var(--focus)}

/* Header and search: always available, without taking a second permanent row. */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.admin-bar .top{top:32px}
.top-in{position:relative;display:flex;align-items:center;gap:12px;max-inline-size:var(--site-width);min-block-size:68px;margin-inline:auto;padding:10px 24px}
.brand{display:flex;gap:10px;align-items:center;flex-shrink:0;font-weight:700;text-decoration:none;white-space:nowrap}
.brand .series{font:400 12px/1.5 var(--font-mono);color:var(--ink-2)}
.brand img{max-block-size:32px;max-inline-size:180px;inline-size:auto}
.top-in>nav{min-inline-size:0;margin-inline-start:auto}
.nav{display:flex;gap:2px;list-style:none;padding:0;margin:0}
.nav li{margin:0}
.nav a{padding:8px 10px;font-size:14px;text-decoration:none;border-radius:var(--radius-sm)}
.nav .current-menu-item>a,.nav a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.nav a:hover{background:var(--paper-2)}
.note-btn{padding:8px 12px;border:1px solid var(--amber);border-radius:var(--radius-md);color:var(--amber);background:var(--paper);font-size:13.5px;text-decoration:none;white-space:nowrap}
.note-btn:hover{background:var(--amber-soft)}
.menu-toggle,.search-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-inline-size:var(--tap-size);padding:8px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper);font-size:14px}
.menu-toggle{display:none}
.menu-toggle svg,.search-toggle svg{inline-size:20px;block-size:20px;flex:none}
.site-search{position:absolute;inset:100% 24px auto auto;inline-size:min(32rem,calc(100vw - 32px));padding:16px;border:1px solid var(--line-strong);background:var(--paper)}
.search-form{display:flex;gap:8px;align-items:center;max-inline-size:100%}
.search-form label{display:block;min-inline-size:0;flex:1}
.search-field{inline-size:100%;min-inline-size:0;min-block-size:var(--tap-size);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper)}
.search-form .note-btn{color:var(--ink);border-color:var(--line-strong)}
.search-field::placeholder{color:var(--ink-3);opacity:1}
.wrap{max-inline-size:var(--site-width);margin-inline:auto;padding:32px 24px 64px}
.narrow{max-inline-size:var(--reading-width);margin-inline:auto;min-inline-size:0}

/* Day / course cards. These and paired cost panels are the only content cards. */
.weeks,.home-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-block-start:24px}
.week,.home-week{min-inline-size:0;scroll-margin-top:100px}
.week h2,.home-week-heading h3{font-size:17px;line-height:1.6;margin:0}
.week h2 .mono,.home-week-heading .home-step-number{display:block;margin-block-end:8px;color:var(--ink-3);font:500 12.5px/1.6 var(--font-mono)}
.week h2,.home-week-heading{padding-block-end:12px;border-bottom:1px solid var(--line-strong)}
.week .goal,.home-week-goal{margin:12px 0 20px;font-size:14px;line-height:1.8;color:var(--ink-2)}
.days,.home-day-list{display:grid;gap:10px}
.day{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;min-inline-size:0;min-block-size:var(--tap-size);padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);text-decoration:none}
.day>span{min-inline-size:0}
.day .n{color:var(--ink-3);font:500 13px/1.8 var(--font-mono)}
.day .t{display:block;font-size:15.5px;line-height:1.7;font-weight:500}
.day .chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px}
a.day:hover{border-color:var(--line-strong);text-decoration:none}
.day.now{border-color:var(--amber);box-shadow:var(--shadow-current)}
.day.now .n{color:var(--amber)}
.day.done,.day.planned{opacity:1}
.day.planned{border-style:dashed}
.day.paid{border-color:var(--amber)}
.chip{display:inline-block;padding:2px 6px;border-radius:var(--radius-sm);background:var(--paper-2);color:var(--ink-2);font:400 12px/1.65 var(--font-mono);overflow-wrap:anywhere}
.chip.build,.chip.free,.chip.del,.chip.exam,.chip.soon{color:var(--ink-2);background:var(--paper-2)}
.chip.paid{color:var(--amber);background:var(--amber-soft)}
.completion-label{display:inline-block;margin-inline-start:8px;color:var(--ink-3);font:500 12px/1.6 var(--font-body)}

/* Article layout: preserve a readable column even when the site is half a screen. */
.lesson{display:grid;grid-template-columns:216px minmax(0,var(--reading-width)) 176px;grid-template-areas:"rail article toc";gap:28px;justify-content:center;align-items:start}
.article{grid-area:article;min-inline-size:0;max-inline-size:100%}
/* 固定ページ（はじめに等）は本文幅に収める。.article の max-inline-size:100% より後ろに置く */
.article.narrow{max-inline-size:var(--reading-width);margin-inline:0}
.rail{grid-area:rail}
.toc{grid-area:toc}
.rail,.toc{position:sticky;top:88px;min-inline-size:0;max-block-size:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain;font-size:14px;color:var(--ink-2)}
.admin-bar .rail,.admin-bar .toc{top:120px;max-block-size:calc(100vh - 140px)}
.rail summary,.toc summary{font-size:14px;font-weight:700;color:var(--ink)}
.rail h3{margin:24px 0 8px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.rail a,.rail span.item{display:flex;gap:8px;align-items:center;min-inline-size:0;min-block-size:var(--tap-size);padding:8px;font-size:14px;line-height:1.55;text-decoration:none;border-radius:var(--radius-sm)}
.rail .item .mono{flex:none;inline-size:22px;color:var(--ink-3);font-size:12.5px}
.rail .item{overflow-wrap:normal}
.rail .item .chip{flex:none;margin-inline-start:auto;font-size:11.5px;white-space:nowrap}
.rail a.now{color:var(--ink);font-weight:700;background:var(--amber-soft);box-shadow:var(--shadow-current)}
.rail a.now .mono{color:var(--amber)}
.rail a:hover,.toc a:hover{background:var(--paper-2)}
.rail span.item{color:var(--ink-3)}
.rail .completion-label{margin:0;font-size:11.5px}
.progress{height:4px;margin:8px 0 12px;background:var(--paper-2);overflow:hidden;border-radius:var(--radius-sm)}
.progress i{display:block;height:100%;background:var(--ink-2)}
.toc a{display:flex;min-block-size:var(--tap-size);padding:8px 10px;border-inline-start:2px solid var(--line);font-size:13.5px;line-height:1.6;text-decoration:none}
.toc a.now{border-color:var(--ink);font-weight:700;color:var(--ink)}
.toc:empty{display:none}
.daynum{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:600 40px/1.2 var(--font-mono);color:var(--amber);margin-block:8px 12px}
.daynum small{font-size:15px;font-weight:400;color:var(--ink-3)}
.tier{padding:4px 10px;border:1px solid var(--amber);border-radius:var(--radius-sm);font:500 13.5px/1.6 var(--font-body);background:var(--amber-soft);color:var(--amber)}
.tier.free{background:transparent;color:var(--ink-2);border-color:var(--line)}
.article h1,.entry-title{font-size:clamp(25px,2.7vw,32px);line-height:1.5;margin:8px 0 20px}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;border-block:1px solid var(--line);margin:24px 0 32px;padding-block:20px;min-inline-size:0}
.meta>div{min-inline-size:0}
.meta span{display:block;color:var(--ink-3);font-size:13.5px;margin-block-end:4px}
.meta b{font-size:15px;line-height:1.7;font-weight:500;overflow-wrap:anywhere}
.meta b.mono{font-size:13.25px}
.entry-meta{margin:0 0 24px}

/* Japanese prose. The target is 36–40 full-width characters, not a fixed sidebar width. */
.entry-content{font-size:var(--font-size-body);line-height:var(--line-height-body);overflow-wrap:anywhere}
.entry-content p{max-inline-size:var(--reading-width);margin:0 0 var(--paragraph-gap)}
.entry-content h2{position:relative;margin:var(--h2-before) 0 var(--h2-after);padding:0 48px 0 0;font-size:24px;line-height:1.5;scroll-margin-top:100px}
.entry-content>h2:first-child{margin-block-start:0}
.entry-content h3{position:relative;margin:32px 0 12px;padding-inline-end:48px;font-size:20px;line-height:1.6;scroll-margin-top:100px}
.entry-content h4{margin:28px 0 12px;font-size:17px}
.heading-anchor{position:absolute;inset:0 0 auto auto;justify-content:center;inline-size:var(--tap-size);block-size:var(--tap-size);padding:0;color:var(--ink-3);font:400 18px/1 var(--font-mono);text-decoration:none}
.entry-content a:not(.heading-anchor){vertical-align:baseline}
.entry-content ul,.entry-content ol{margin:0 0 var(--paragraph-gap);padding-inline-start:1.5em}
.entry-content li{margin-block-end:10px}
.entry-content li>ul,.entry-content li>ol{margin-block-start:12px}
.entry-content li>p:last-child{margin-block-end:0}
.entry-content dl,.trouble{margin:0 0 var(--paragraph-gap)}
.entry-content dt,.trouble dt{font-weight:700;margin-block-start:24px}
.entry-content dd,.trouble dd{margin:8px 0 0;color:var(--ink-2)}
.entry-content figure{margin:var(--paragraph-gap) 0}
.entry-content figure img{display:block;inline-size:100%;block-size:auto;border:1px solid var(--line-strong);border-radius:var(--radius-md)}
.entry-content figcaption{margin-block-start:10px;font-size:var(--font-size-small);line-height:1.8;color:var(--ink-3)}
.entry-content blockquote{margin:var(--paragraph-gap) 0;padding-inline-start:18px;border-inline-start:3px solid var(--line-strong);color:var(--ink-2)}
.entry-content hr{border:0;border-top:1px solid var(--line);margin-block:40px}
.entry-content code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:2px 4px;border-radius:var(--radius-sm)}
.steps{counter-reset:s;list-style:none}
.entry-content .steps{max-inline-size:none;padding:0}
.steps>li{counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:24px 0;border-bottom:1px dashed var(--line)}
.steps>li::before{content:counter(s,decimal-leading-zero);color:var(--ink-2);font:600 18px/1.7 var(--font-mono)}
.steps>li>div{min-inline-size:0}
.steps>li>div>h3:first-child{margin-block-start:0}
pre,.wp-block-code{max-inline-size:100%;margin:24px 0;padding:20px;background:var(--code-bg);color:var(--code-fg);border-radius:var(--radius-md);overflow-x:auto;font:var(--font-size-code)/var(--line-height-code) var(--font-mono);tab-size:2}
.entry-content pre code{background:none;padding:0;font:inherit;white-space:pre;overflow-wrap:normal;word-break:normal}
.code-block{position:relative;min-inline-size:0;margin-block:var(--paragraph-gap);background:var(--code-bg);border-radius:var(--radius-md)}
.code-block pre{margin:0;padding:64px 20px 20px}
.copy{position:absolute;inset:8px 8px auto auto;z-index:1;min-inline-size:96px;min-block-size:var(--tap-size);padding:8px 12px;border:1px solid var(--code-border);border-radius:var(--radius-sm);background:var(--code-control);color:var(--code-fg);font:500 13px/1.5 var(--font-body)}
.copy:hover{background:var(--code-control-hover)}
.copy:focus-visible,.code-block pre:focus-visible{outline-color:var(--code-fg)}
table{border-collapse:collapse;inline-size:100%;font-size:15px;line-height:1.8}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;overflow-wrap:anywhere}
th{font-weight:700;color:var(--ink-2)}
.tbl,.wp-block-table,.table-scroll{max-inline-size:100%;overflow-x:auto}
.table-scroll{margin-block:var(--paragraph-gap)}
.table-scroll table{min-inline-size:28rem}
td.mono,th.mono{text-align:end}
.check{list-style:none}
.entry-content .check{padding:0;display:grid;gap:8px}
.check li{display:flex;gap:12px;align-items:center;margin:0}
.check input{inline-size:20px;block-size:20px;flex:none;margin:0;accent-color:var(--ink)}
.check label{display:flex;align-items:center;min-block-size:var(--tap-size);cursor:pointer}
.callout{margin:var(--paragraph-gap) 0;padding:4px 0 4px 18px;border-inline-start:3px solid var(--line-strong)}
.callout-label{display:block;font-size:var(--font-size-small);font-weight:700;color:var(--ink-2)}
.entry-content .callout .callout-label{margin-block-end:8px}
.callout>b{display:block;margin-block-end:8px}
.callout p:last-child{margin-block-end:0}
.callout.ok{border-color:var(--line-strong)}
.quiz{margin-block:var(--paragraph-gap);padding-block:24px;border-block:1px solid var(--line)}
.quiz>b{display:block;font-size:18px;margin-block-end:12px}
.quiz summary{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.quiz ol{list-style:upper-alpha}
.quiz details{font-size:var(--font-size-body)}
.diagram{max-inline-size:100%;margin-block:var(--paragraph-gap);overflow-x:auto}
.diagram svg{display:block;inline-size:100%;block-size:auto}
.diagram text{fill:var(--ink);font-family:var(--font-mono);font-size:13px}
.diagram .box{fill:var(--paper);stroke:var(--ink-2);stroke-width:1}
.diagram .new{fill:var(--amber-soft);stroke:var(--amber);stroke-width:1.5}
.diagram .zone{fill:none;stroke:var(--line-strong);stroke-dasharray:4 3}
.diagram .lbl{fill:var(--ink-2);font-size:12px}
.diagram .arrow{stroke:var(--ink-2);stroke-width:1.2;fill:none}

/* Costs, paid links and navigation */
.costrow,.split,.home-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:24px}
.costrow>div,.split>div,.home-pricing-card{min-inline-size:0;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:20px}
.costrow .mono{display:block;font:600 21px/1.7 var(--font-mono);overflow-wrap:anywhere}
.split b{display:block;margin-block-end:12px}
.split ul{padding-inline-start:1.3em}
.split .p,.home-pricing-card.is-premium{border-color:var(--amber)}
.paywall{margin:var(--paragraph-gap) 0;padding:24px 0;border-block:2px solid var(--amber)}
.paywall b{display:block;font-size:18px;margin-block-end:12px}
.paywall .price{font:600 22px/1.7 var(--font-mono);color:var(--amber)}
.paywall .price small{display:block;color:var(--ink-3);font:400 var(--font-size-small)/1.8 var(--font-body)}
.paywall .note-btn{margin-block-start:12px}
.locked{display:none}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block-start:40px;padding-block-start:24px;border-top:1px solid var(--line)}
.pager a,.pager .blank{display:block;min-inline-size:0;min-block-size:80px;padding:16px;border:1px solid var(--line-strong);border-radius:var(--radius-md);text-decoration:none;line-height:1.7}
.pager a:hover{text-decoration:underline}
.pager a:last-child{text-align:end}
.pager small{display:block;color:var(--ink-3);font-size:13.5px;margin-block-end:6px}
.pager .blank{border-style:dashed;color:var(--ink-3)}
.lesson-completion{margin-block-start:40px}
.lesson-complete,.home-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-block-size:var(--tap-size);padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-md);font-size:14.5px;line-height:1.5;text-decoration:none;background:var(--paper);color:var(--ink)}
.lesson-complete[aria-pressed="true"]{font-weight:700;border-color:var(--ink)}
.lesson-completion .quiet{margin-block-start:12px}
.ad{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-block-start:32px;padding:12px;border:1px dashed var(--line-strong);font-size:var(--font-size-small);line-height:1.8;color:var(--ink-3)}
.ad .chip{background:transparent;padding:0}
.notice{margin-block:20px;padding-inline-start:16px;border-inline-start:3px solid var(--line-strong)}

/* Roadmap-first homepage: plain sections; no decorative hero or content panels. */
.home-learning{min-inline-size:0}
.home-hero{display:grid;grid-template-columns:minmax(0,var(--reading-width)) minmax(320px,1fr);gap:24px 48px;align-items:start;padding-block:8px 32px}
.home-hero-text{min-inline-size:0}
.home-learn{margin-block:24px 8px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2)}
.home-learn-title{margin:0 0 8px;font-size:15px;font-weight:700}
.home-learn ul{margin:0;padding-inline-start:1.3em;font-size:15px;line-height:1.8}
.home-learn li{margin-block-end:6px}
.home-learn-sub{margin:14px 0 6px;font-size:14px;font-weight:700;color:var(--ink-2)}
.home-diagram{margin:8px 0 0;min-inline-size:0;max-inline-size:560px;inline-size:100%;justify-self:end}
.diagram-head{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-block-end:8px}
/* 現在位置「n / 5 · Day」は画面には出さず、読み上げ用にだけ残す（2026-11-08） */
.diagram-status{margin:0}
.diagram-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}
.diagram-track::-webkit-scrollbar{display:none}
.diagram-track:focus-visible{outline-offset:2px}
.diagram-slide{flex:0 0 100%;min-inline-size:0;margin:0;padding:16px 16px 14px;scroll-snap-align:start;scroll-snap-stop:always}
.diagram-title{display:flex;gap:10px;align-items:baseline;margin:0 0 8px;font-size:15px;font-weight:700}
.diagram-title .diagram-day{font:500 12px/1.6 var(--font-mono);color:var(--amber)}
.diagram-controls{display:flex;align-items:center;justify-content:center;gap:0;margin-block-start:2px}
.diagram-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--tap-size);block-size:var(--tap-size);padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink)}
.diagram-btn svg{box-sizing:content-box;inline-size:14px;block-size:14px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper)}
.diagram-btn:hover svg{background:var(--paper-2)}
.diagram-btn:disabled{opacity:.35;cursor:default}
.diagram-dots{display:flex;gap:0}
.diagram-dot{display:inline-flex;align-items:center;justify-content:center;inline-size:28px;min-inline-size:28px;block-size:var(--tap-size);padding:0;border:0;background:transparent}
.diagram-dot span{display:block;inline-size:6px;block-size:6px;border-radius:var(--radius-pill);background:var(--line-strong)}
.diagram-dot[aria-selected="true"] span{inline-size:16px;background:var(--amber)}
.diagram-dot:hover span{background:var(--ink-2)}
.diagram-slide svg{display:block;inline-size:100%;block-size:auto;font-family:var(--font-body)}
.home-diagram .box{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.2}
.home-diagram .box.accent{stroke:var(--amber);stroke-width:1.6}
.home-diagram .box.optional{stroke-dasharray:4 3}
.home-diagram .zone{fill:var(--paper-2);stroke:var(--line-strong);stroke-dasharray:5 4;stroke-width:1}
.home-diagram .label{fill:var(--ink);font-size:14px;font-weight:700}
.home-diagram .sub{fill:var(--ink-2);font-size:11.5px}
.home-diagram .day,.home-diagram .zone-label,.home-diagram .zone-note{fill:var(--ink-3);font-family:var(--font-mono);font-size:10.5px}
.home-diagram .zone-label{font-size:12px;font-weight:500}
.home-diagram .arrow{fill:none;stroke:var(--ink-2);stroke-width:1.4;marker-end:var(--arrow)}
.home-diagram .arrow.optional{stroke-dasharray:4 3}
.home-diagram .arrowhead{fill:var(--ink-2)}
.home-diagram figcaption{margin-block-start:8px;font-size:var(--font-size-small);line-height:1.8;color:var(--ink-2)}
.home-hero-title{margin:12px 0 20px;font-size:32px;line-height:1.5}
.home-hero-lead{margin:0 0 24px;line-height:var(--line-height-body)}
.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block:20px}
.home-button.is-primary{color:var(--button-fg);background:var(--button-bg);border-color:var(--button-bg)}
.home-button.is-primary:hover{background:var(--ink-2)}
.home-hero-facts{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:0;margin:20px 0 0;color:var(--ink-2);font-size:14px}
.home-hero-facts strong{font-weight:500}
.home-section{margin-block-start:48px;scroll-margin-top:100px}
.home-section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-block-end:20px}
.home-section-heading>div{min-inline-size:0}
.home-section-heading h2{margin:8px 0 12px;font-size:24px}
.home-section-heading p{max-inline-size:var(--reading-width);margin:0;color:var(--ink-2)}
.home-section-heading .home-eyebrow{color:var(--ink-3)}
.home-text-link{font-size:14.5px}
.home-steps{display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:16px 0;list-style:none}
.home-step{gap:8px;font-size:14.5px}
.home-step-number{font:500 12.5px/1.7 var(--font-mono);color:var(--ink-3)}
.home-latest-note{display:flex;flex-wrap:wrap;gap:8px 16px;margin-block:16px;color:var(--ink-2);font-size:14px}
.home-topics{display:flex;flex-wrap:wrap;gap:8px 24px;margin-block:16px}
.home-topic{gap:8px;font-size:14.5px}
.home-topic small{font-size:12.5px;color:var(--ink-3)}
.home-article-grid{display:block;max-inline-size:var(--reading-width)}
.home-article-card{margin:0;border-bottom:1px solid var(--line)}
.home-article-link{display:block;padding-block:24px;text-decoration:none;min-inline-size:0}
.home-card-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--ink-3);font-size:13.5px}
.home-card-title{margin:8px 0 12px;font-size:20px;line-height:1.7;text-decoration:underline;text-underline-offset:.2em}
.home-card-excerpt{margin:0 0 12px;font-size:var(--font-size-body);line-height:var(--line-height-body)}
.home-card-tags{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13.5px;color:var(--ink-3)}
.home-card-tag.is-paid,.home-card-price{color:var(--amber)}
.home-card-footer{margin-block-start:12px;font-size:14px}
.home-empty{max-inline-size:var(--reading-width);padding-block:16px}
.home-empty h3{font-size:18px}
.home-empty p{margin-block:12px 20px}
.home-pricing-card h3{margin:8px 0 12px;font-size:20px}
.home-pricing-count{font-size:14px;color:var(--ink-3)}
.home-feature-list{padding-inline-start:1.2em;line-height:1.9}
.home-feature-list li{margin-block-end:8px}
.home-cost-disclosure{border-block-start:1px solid var(--line);padding-block:12px}
.home-cost-disclosure summary{font-size:15px;font-weight:500}
.home-cost-disclosure .tbl{margin-block:20px}
/* はじめにページはロードマップと同じ幅（サイト幅いっぱい）で組む。段落も本文幅の上限を外す */
.article-wide .entry-content p{max-inline-size:none}
.article-wide .home-cost-disclosure{margin-block-end:var(--paragraph-gap)}
.home-final-cta{max-inline-size:var(--reading-width);padding-block-start:24px;border-top:1px solid var(--line)}
.home-final-cta h2{font-size:24px}
.home-final-cta p{margin-block:12px 20px}
.home-editorial{max-inline-size:var(--reading-width)}

/* Generic lists and references remain plain and readable. */
.post-list{margin-block:24px}
.post-list>a{display:block;padding-block:20px;border-bottom:1px solid var(--line)}
.post-list .quiet{display:block;margin-block-start:8px}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.tpl{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:16px;border-bottom:1px solid var(--line)}
.tpl .quiet{display:block}
.badge{font-size:13px;color:var(--ink-2)}
.badge.wip{color:var(--ink-2)}
.page-numbers{justify-content:center;min-inline-size:var(--tap-size);padding:8px;margin:16px 4px 0 0;border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
.page-numbers.current{font-weight:700;background:var(--paper-2)}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-block-start:48px;padding-block-start:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px;line-height:1.8}
.site-footer ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}
@media(max-width:1120px){
  .lesson{grid-template-columns:minmax(0,var(--reading-width));grid-template-areas:"rail" "toc" "article";gap:12px}
  .rail,.toc,.admin-bar .rail,.admin-bar .toc{position:static;max-block-size:none;overflow:visible;border-bottom:1px solid var(--line)}
  .rail details>div{max-block-size:60vh;overflow-y:auto}
  .toc details>nav{max-block-size:60vh;overflow-y:auto}
  .rail summary,.toc summary{padding:10px 0}
  .article{margin-block-start:20px}
  .brand .series{display:none}
  .menu-toggle{display:inline-flex}
  .nav{display:none;position:absolute;inset:100% 16px auto 16px;padding:12px;background:var(--paper);border:1px solid var(--line-strong);flex-direction:column;max-block-size:70vh;overflow-y:auto}
  .nav.open{display:flex}
}
@media(max-width:1000px){.weeks,.home-weeks{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero{grid-template-columns:minmax(0,1fr)}.home-diagram{max-inline-size:var(--reading-width)}}
@media(max-width:782px){.admin-bar .top{top:46px}}
@media(max-width:640px){
  .top-in{gap:8px;padding:8px 16px;min-block-size:64px}
  .top-in>nav{margin-inline-start:auto}
  .brand{font-size:16px}
  .brand img{max-inline-size:96px}
  .menu-toggle span,.search-toggle span{display:none}
  .note-btn{font-size:12.5px;padding-inline:8px}
  .site-search{inset-inline:16px;inline-size:auto}
  .wrap{padding:24px 20px 48px}
  .weeks,.home-weeks,.costrow,.split,.home-pricing-grid,.ref-grid{grid-template-columns:minmax(0,1fr)}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .article h1,.entry-title,.home-hero-title{font-size:25px}
  .entry-content h2{font-size:22px}
  .entry-content h3{font-size:19px}
  .home-section-heading h2,.home-final-cta h2{font-size:22px}
  .home-section{margin-block-start:40px}
  .home-actions{align-items:stretch;flex-direction:column}
  .home-actions .home-button{inline-size:100%}
  .home-hero-facts{display:block}
  .home-hero-facts li{margin-block-end:8px}
  .home-steps{gap:0 16px}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a:last-child{text-align:start}
  .code-block pre{padding-inline:16px}
  .steps>li{grid-template-columns:minmax(0,1fr);gap:4px}
  .steps>li::before{line-height:1.4}
}
@media(prefers-reduced-motion:no-preference){
  a,button{transition:color 150ms,border-color 150ms,background-color 150ms}
  .diagram-track{scroll-behavior:smooth}
}