:root{--bg: #ffffff;--rail: #f6f8f7;--surface: #ffffff;--ink: #1c2620;--muted: #5d6b63;--accent: #0f3d2e;--accent-2: #1f6b4f;--accent-soft: #e7f0ea;--border: #e4e9e5;--radius: 12px;--sidebar-w: 290px;--content-w: 760px;--header-h: 56px;--tile-back: #e6a93c;--tile-back-edge: #bd831f}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}.app-root{min-height:100vh;display:flex;flex-direction:column;padding-top:var(--header-h)}.site-header{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--header-h);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--accent);color:#fff}.menu-btn{display:inline-flex;background:none;border:none;color:#fff;padding:6px;cursor:pointer;border-radius:8px}.menu-btn:hover{background:#ffffff1f}.site-brand{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-size:1.25rem;font-weight:800;letter-spacing:.04em}.brand-logo{height:28px;width:auto;display:block}.site-brand ruby rt{font-size:.5em;font-weight:600;color:#bcd4c8;letter-spacing:.02em}.site-tagline{color:#bcd4c8;font-size:.78rem;margin-left:auto}.layout{flex:1;display:block;width:100%}.curriculum{position:fixed;top:0;left:0;height:100vh;width:84%;max-width:320px;z-index:50;overflow-y:auto;background:var(--rail);border-right:1px solid var(--border);padding:16px 10px 40px;transform:translate(-100%);transition:transform .25s ease;box-shadow:2px 0 16px #00000026}.curriculum.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;z-index:40;pointer-events:none;transition:background .25s ease}.sidebar-backdrop.show{background:#0006;pointer-events:auto}.curriculum-head{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--muted);padding:4px 8px 10px}.course{border-bottom:1px solid var(--border)}.course:last-child{border-bottom:none}.course-head{width:100%;display:flex;align-items:center;gap:6px;background:none;border:none;padding:12px 8px;cursor:pointer;text-align:left;font-size:.92rem;font-weight:700;color:var(--ink)}.course-head:hover{color:var(--accent)}.course-name{flex:1}.course-count{background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px}.lesson-list{list-style:none;margin:0 0 8px;padding:0}.lesson-link{display:flex;align-items:flex-start;gap:8px;padding:8px 10px 8px 14px;color:var(--muted);text-decoration:none;font-size:.86rem;line-height:1.5;border-left:2px solid transparent}.lesson-link:hover{background:var(--accent-soft);color:var(--ink)}.lesson-link.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:700}.lesson-no{flex-shrink:0;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border-radius:50%;font-size:.72rem;font-weight:700;margin-top:1px}.lesson-link.active .lesson-no{background:var(--accent);color:#fff}.content{width:100%;max-width:var(--content-w);margin:0 auto;padding:18px 16px 48px}.hero h1{font-size:1.55rem;margin:4px 0 10px}.hero p{color:var(--muted);margin:0 0 8px}.hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:999px}.hero-cta:hover{background:var(--accent-2)}.course-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 8px;margin-top:22px}.course-card-title{font-size:1.12rem;margin:0 0 12px;color:var(--accent)}.course-card-lessons{list-style:none;margin:0;padding:0}.course-card-lesson{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;border-top:1px solid var(--border);text-decoration:none;color:inherit}.course-card-lesson:hover .course-card-lesson-title{color:var(--accent)}.course-card-lesson-title{display:block;font-weight:700}.course-card-lesson-desc{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}.empty,.loading{color:var(--muted);padding:24px 0}.crumb{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--muted);margin-bottom:14px}.crumb a{color:var(--accent);text-decoration:none}.crumb a:hover{text-decoration:underline}.back-link{display:inline-flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font-size:.9rem}.back-link:hover{text-decoration:underline}.article h1{font-size:1.6rem;line-height:1.5;margin:2px 0 6px}.article-meta{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.82rem;margin:0 0 20px}.article-body{font-size:1rem}.article-body [id]{scroll-margin-top:calc(var(--header-h) + 8px)}.article-body h2{font-size:1.25rem;margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}.article-body h3{font-size:1.08rem;margin:24px 0 8px}.article-body p{margin:0 0 14px}.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 16px}.article-body li{margin-bottom:6px}.article-body a,.article-body strong{color:var(--accent)}.article-body code{background:#eef2ef;padding:1px 6px;border-radius:5px;font-size:.92em}.article-body blockquote{margin:16px 0;padding:10px 16px;background:var(--accent-soft);border-radius:8px;color:#2a4a3b}.article-body blockquote p:last-child{margin-bottom:0}.article-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}.article-body th,.article-body td{border:1px solid var(--border);padding:8px 10px;text-align:center}.article-body th{background:var(--accent-soft)}.article-body .tiles{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:middle;margin:3px 2px}.article-body .tile{height:46px;aspect-ratio:7 / 10;width:auto;padding:4px;background:#fff;border:1px solid #8c968f;border-radius:7px;box-shadow:0 1px 3px #00000038;object-fit:contain}.article-body .tiles--v{flex-direction:column;gap:3px}.article-body .tile-back{display:inline-block;height:50px;aspect-ratio:7 / 10;padding:0;background:var(--tile-back);border:1px solid var(--tile-back-edge);border-radius:7px;box-shadow:0 1px 3px #00000038,inset 0 0 0 2px #ffffff47}.article-body p>.tiles:only-child .tile{height:54px}.article-body .tile-back{height:46px}.article-body .diagram{margin:18px auto 6px}.article-body .diagram svg{width:100%;height:auto;display:block}.article-body .diagram--board{max-width:360px}.article-body .diagram--strip{max-width:560px}.article-body .diagram--seats{max-width:240px}.article-body .figure-caption{text-align:center;font-size:.8rem;color:var(--muted);margin:-6px 0 18px}.article-body .skip-note{background:#eef4fb;border:1px solid #cfe0f0;border-radius:var(--radius);padding:12px 16px;margin:14px 0 18px;font-size:.9rem;line-height:1.7}.article-body .skip-note strong{color:#1f4e79}.article-body .skip-note a{color:#1f4e79;font-weight:700}.article-body .tool-cta{display:block;background:var(--accent);color:#fff;text-align:center;padding:12px 16px;border-radius:var(--radius);text-decoration:none;font-weight:700;margin:20px 0}.article-body .tool-cta:hover{background:var(--accent-2)}.quiz-test{margin:18px 0 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.quiz-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--accent);color:#fff;font-weight:700}.quiz-score{font-size:.86rem;background:#ffffff29;padding:2px 12px;border-radius:999px}.quiz-q{padding:16px;border-top:1px solid var(--border)}.quiz-q:first-of-type{border-top:none}.quiz-q-title{display:flex;gap:8px;font-weight:700;margin:0 0 12px}.quiz-q-no{flex-shrink:0;background:var(--accent-soft);color:var(--accent);font-size:.78rem;padding:1px 9px;border-radius:999px;height:fit-content}.quiz-choices{list-style:none;margin:0;padding:0;display:grid;gap:8px}.quiz-choice{width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 13px;font-size:.94rem;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}.quiz-choice:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft)}.quiz-choice:disabled{cursor:default}.quiz-choice .quiz-mark{display:inline-flex;width:16px;flex-shrink:0}.quiz-choice.correct{border-color:#1f9d57;background:#e7f6ec;color:#146b3c;font-weight:700}.quiz-choice.correct .quiz-mark{color:#1f9d57}.quiz-choice.wrong{border-color:#d8584f;background:#fbeae8;color:#9c2f28}.quiz-choice.wrong .quiz-mark{color:#d8584f}.quiz-explain{margin:10px 0 0;font-size:.88rem;color:var(--muted);line-height:1.7}.quiz-explain.ok strong{color:#1f9d57}.quiz-explain.ng strong{color:#d8584f}.quiz-reset{display:inline-flex;align-items:center;gap:6px;margin:4px 16px 18px;background:none;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}.quiz-reset:hover{background:var(--accent-soft)}.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:36px}.lesson-nav-link{display:flex;align-items:center;gap:8px;max-width:48%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;text-decoration:none;color:var(--accent);font-weight:700;font-size:.9rem}.lesson-nav-link.next{margin-left:auto;text-align:right}.lesson-nav-link:hover{border-color:var(--accent)}.lesson-nav-link small{display:block;color:var(--muted);font-weight:500;font-size:.72rem}.site-footer{border-top:1px solid var(--border);padding:24px 18px;text-align:center;background:var(--rail)}.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:10px}.footer-links a{color:var(--accent);font-size:.88rem;text-decoration:none}.footer-links a:hover{text-decoration:underline}.footer-note{color:var(--muted);font-size:.78rem;margin:0}@media (min-width: 901px){.menu-btn,.sidebar-backdrop{display:none}.layout{display:grid;grid-template-columns:minmax(var(--sidebar-w),1fr) minmax(0,var(--content-w)) 1fr}.content{grid-column:2;max-width:none;margin:0;padding:32px 36px 64px}.curriculum{position:fixed;top:var(--header-h);left:0;height:calc(100vh - var(--header-h));width:var(--sidebar-w);max-width:none;transform:none;box-shadow:none;transition:none;z-index:20}.site-footer{padding-left:var(--sidebar-w)}}