:root{--bg:#f6f8fb;--surface:#fff;--text:#1f2328;--muted:#57606a;--line:#d0d7de;--line-soft:#e6eaef;--primary:#0b63ce;--primary-hover:#0a56b3;--primary-soft:#eaf2fc;--ok:#1a7f37;--ok-soft:#eaf7ee;--ok-line:#9fd5ae;--ng:#c2261d;--ng-soft:#fdeeec;--ng-line:#f2b8b3;--hint-soft:#fff7e0;--hint-line:#f0d48a;--code-bg:#f3f5f8;--radius:10px;--header-h:56px;--font:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;--mono:"Cascadia Code", Consolas, Menlo, "BIZ UDGothic", monospace}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);margin:0;font-size:16px;line-height:1.7}a{color:var(--primary)}code,pre,.cm-scroller{font-variant-ligatures:none;font-feature-settings:"liga" 0, "calt" 0}code{font-family:var(--mono);background:var(--code-bg);border-radius:4px;padding:.1em .35em;font-size:.9em}pre{font-family:var(--mono);background:var(--code-bg);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.6;overflow-x:auto}pre code{background:0 0;padding:0}.muted{color:var(--muted)}.small{font-size:14px}[hidden]{display:none!important}.btn{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{background:#f3f5f8}.btn:focus-visible,.tab:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #7fb2f0}.btn:disabled{opacity:.55;cursor:wait}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-run{border-color:var(--primary);color:var(--primary)}.btn-run:hover{background:var(--primary-soft)}.btn-quiet{font-weight:500}.btn-lg{padding:11px 22px;font-size:17px}.badge{background:var(--primary-soft);color:#0a4ea3;vertical-align:middle;border:1px solid #bcd3f2;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;line-height:1.4;display:inline-block}.badge-solved{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line);margin-left:10px}.site-header{z-index:10;height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--line);align-items:center;gap:24px;padding:0 20px;display:flex;position:sticky;top:0}.logo{color:var(--text);white-space:nowrap;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex}.logo-mark{color:#fff;width:30px;height:30px;font-family:var(--mono);background:#1f2328;border-radius:7px;place-items:center;font-size:13px;font-weight:800;display:inline-grid}.site-nav{gap:4px;display:flex;overflow-x:auto}.site-nav a{color:var(--muted);white-space:nowrap;border-radius:8px;padding:6px 12px;font-weight:600;text-decoration:none}.site-nav a:hover{color:var(--text);background:#f3f5f8}.site-nav a[aria-current=page]{color:var(--primary);background:var(--primary-soft)}.page{max-width:1080px;margin:0 auto;padding:28px 20px 64px}.page h1{line-height:1.35}.breadcrumb{color:var(--muted);margin:0 0 4px;font-size:14px}.hero{padding:32px 0 24px}.hero h1{margin:0 0 12px;font-size:clamp(28px,4.5vw,42px)}.hero p{font-size:17px}.hero-actions{flex-wrap:wrap;gap:12px;margin:20px 0 8px;display:flex}.roadmap{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0;padding:0;list-style:none;display:grid}.road-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;align-items:flex-start;gap:6px;padding:20px;display:flex}.road-card h2{margin:0;font-size:20px}.road-card p{margin:0}.road-card .btn{margin-top:auto}.road-step{color:var(--primary);letter-spacing:.05em;font-size:13px;font-weight:700}.meter{background:var(--line-soft);border-radius:999px;width:100%;height:8px;margin-top:8px;overflow:hidden}.meter-bar{background:var(--ok);height:100%}.upcoming h2{margin-bottom:0}.upcoming-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:0;list-style:none;display:grid}.upcoming-card{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:14px 16px}.upcoming-card h3{margin:6px 0 2px;font-size:17px}.upcoming-card p{margin:0}.section-title{margin:32px 0 12px;font-size:22px}.course-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.course-card{display:flex}.course-link{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);flex-direction:column;flex:1;gap:4px;padding:18px 20px;text-decoration:none;display:flex}a.course-link:hover{border-color:var(--primary);box-shadow:0 2px 10px #0b63ce1f}.course-card.soon .course-link{background:#fbfcfd;border-style:dashed}.course-card.soon h3,.course-card.soon .course-summary{color:var(--muted)}.course-head{align-items:center;gap:8px;display:flex}.course-mark,.course-crumb-mark{font-family:var(--mono);color:var(--text);border-radius:8px;place-items:center;font-weight:800;display:inline-grid}.course-mark{min-width:40px;height:40px;padding:0 6px;font-size:15px}.course-order{color:var(--muted);font-size:13px;font-weight:700}.course-head .badge{margin-left:auto}.badge-open{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}.badge-soon{color:var(--muted);border-color:var(--line);background:#f3f5f8}.course-link h3{margin:8px 0 0;font-size:20px}.course-summary{margin:0}.course-topics{color:var(--muted);margin:6px 0 4px;padding-left:1.2em;font-size:14px}.course-link .small{margin:0}.course-go{color:var(--primary);margin-top:auto;padding-top:8px;font-weight:700}.top-guide{margin-top:16px}.course-crumb{color:var(--text);white-space:nowrap;border-radius:8px;align-items:center;gap:8px;padding:4px 10px 4px 4px;font-weight:700;text-decoration:none;display:inline-flex}.course-crumb:hover{background:#f3f5f8}.course-crumb-mark{min-width:28px;height:28px;padding:0 4px;font-size:12px}.site-header .site-nav{margin-left:auto}.category-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;display:grid}.category{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px}.category h2{align-items:center;gap:10px;margin:0;font-size:19px;display:flex}.category p{margin:2px 0 8px}.category-no{background:var(--primary-soft);width:28px;height:28px;color:var(--primary);border-radius:50%;place-items:center;font-size:15px;display:inline-grid}.category-count{margin-left:auto;font-weight:500}.drill-list{margin:0;padding:0;list-style:none}.drill-list a{color:var(--text);border-radius:6px;gap:10px;margin:0 -8px;padding:6px 8px;text-decoration:none;display:flex}.drill-list a:hover{background:#f3f5f8}.drill-check{text-align:center;width:1.2em;color:var(--muted)}.drill-list a.done .drill-check{color:var(--ok);font-weight:700}.workbench{height:calc(100vh - var(--header-h));grid-template-columns:minmax(320px,38%) 1fr;display:grid}.project-step .workbench{height:calc(100vh - var(--header-h) - 52px)}.statement{background:var(--surface);border-right:1px solid var(--line);padding:20px 24px 48px;overflow-y:auto}.problem-title{margin:0;font-size:24px}.problem-type{margin:6px 0 16px}.spec{border-left:4px solid var(--primary);background:#f8fafd;border-radius:0 8px 8px 0;margin:10px 0;padding:8px 14px}.spec-label,.section-label{color:var(--primary);letter-spacing:.05em;margin:0;font-size:14px;font-weight:700}.spec-body>:first-child,.md>:first-child{margin-top:0}.spec-body>:last-child,.md>:last-child{margin-bottom:0}.spec-body p,.spec-body ul{margin:4px 0}.html-view{margin:12px 0}.html-view summary{cursor:pointer;color:var(--primary);font-size:15px;font-weight:600}.hints,.solution,.explain{margin-top:24px}.hint-list{margin:8px 0 12px;padding:0;list-style:none}.hint{background:var(--hint-soft);border:1px solid var(--hint-line);border-radius:8px;margin-bottom:8px;padding:8px 12px}.hint-no{color:#7a5a00;font-size:13px;font-weight:700;display:block}.hint .md p{margin:0}.explain{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:8px;padding:12px 14px}.explain .section-label{color:var(--ok)}.lab{flex-direction:column;gap:8px;min-width:0;min-height:0;padding:12px 16px 16px;display:flex}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar-spacer{flex:1}.shortcut-hint{color:var(--muted);margin:-4px 0 0;font-size:12px}.editor-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex:55%;min-height:200px;overflow:hidden}.code-editor,.code-editor .cm-editor{height:100%}.code-editor .cm-editor.cm-focused{outline:none}.editor-wrap:focus-within{border-color:#7fb2f0;box-shadow:0 0 0 2px #cfe1f8}.pass-banner{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--radius);color:#135c28;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;display:flex}.pass-banner .btn{margin-left:auto}.pass-mark{font-size:24px}.output{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;flex:40%;min-height:180px;display:flex;overflow:hidden}.tabs{border-bottom:1px solid var(--line);background:#fafbfc;align-items:center;gap:2px;padding:0 6px;display:flex}.tab{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;align-items:center;gap:6px;padding:8px 12px 6px;font-size:14px;font-weight:600;display:inline-flex}.tab[aria-selected=true]{color:var(--text);border-bottom-color:var(--primary)}.tab-badge{border:1px solid;border-radius:999px;padding:0 8px;font-size:12px}.tab-badge.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}.tab-badge.error{color:var(--ng);background:var(--ng-soft);border-color:var(--ng-line)}.running{color:var(--muted);margin-left:auto;padding-right:8px;font-size:13px}.panel{flex:1;padding:10px 12px;overflow:auto}.preview-panel{padding:0;display:flex}.preview-frame{background:#fff;border:none;flex:1;width:100%;min-height:160px}.preview-frame.tall{border:1px solid var(--line);border-radius:var(--radius);min-height:460px}.console-panel{font-family:var(--mono);font-size:14px}.console-panel .muted{font-family:var(--font)}.console-line{border-bottom:1px solid var(--line-soft);white-space:pre-wrap;word-break:break-word;padding:4px 6px}.console-warn{background:var(--hint-soft)}.console-error{background:var(--ng-soft);color:#8f1c15;border-left:3px solid var(--ng)}.console-tag{font-family:var(--font);margin-right:8px;font-size:13px;font-weight:700}.console-loc{font-family:var(--font);border:1px solid var(--ng-line);background:#fff;border-radius:4px;margin-right:8px;padding:0 6px;font-size:13px;font-weight:700}.console-explain{font-family:var(--font);color:var(--text);margin-top:4px}.results-summary{margin:0 0 8px;font-weight:700}.results-summary.ok{color:var(--ok)}.results-summary.ng{color:var(--ng)}.grade-note{color:var(--ng);margin:0;font-weight:600}.result-list{margin:0;padding:0;list-style:none}.result{border-radius:6px;grid-template-columns:auto 1fr;gap:2px 10px;margin-bottom:4px;padding:6px 8px;display:grid}.result.ok{background:var(--ok-soft)}.result.ng{background:var(--ng-soft)}.result-mark{white-space:nowrap;font-size:14px;font-weight:700}.result.ok .result-mark{color:var(--ok)}.result.ng .result-mark{color:var(--ng)}.result-message{border-color:var(--ng-line);white-space:pre-wrap;background:#fff;grid-column:2;margin:2px 0 0}.step-nav{border-bottom:1px solid var(--line);background:#fafbfc;align-items:center;gap:16px;height:52px;padding:0 20px;display:flex;overflow-x:auto}.step-nav-title{color:var(--text);white-space:nowrap;font-weight:700;text-decoration:none}.step-chips{gap:6px;margin:0;padding:0;list-style:none;display:flex}.step-chip{border:1px solid var(--line);background:var(--surface);min-width:32px;height:32px;color:var(--muted);border-radius:999px;place-items:center;padding:0 8px;font-size:14px;font-weight:700;text-decoration:none;display:inline-grid}.step-chip.done{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}.step-chip.current{border:2px solid var(--primary);color:var(--primary)}.step-chip.goal{padding:0 12px}.step-overview{margin:20px 0 24px;padding:0;list-style:none}.step-overview a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);align-items:flex-start;gap:14px;margin-bottom:8px;padding:12px 16px;text-decoration:none;display:flex}.step-overview a:hover{border-color:var(--primary)}.step-overview .md p{margin:0}.step-no{background:var(--primary-soft);width:30px;height:30px;color:var(--primary);border-radius:50%;flex:none;place-items:center;font-weight:700;display:inline-grid}.step-overview .done .step-no{background:var(--ok-soft);color:var(--ok)}.complete-hero{text-align:center;margin-bottom:20px}.complete-hero h1{margin:0 0 4px}.complete-mark{margin:0;font-size:48px}.complete-grid{grid-template-columns:1fr 1fr;align-items:start;gap:24px;display:grid}.complete-preview{display:flex}.complete-next h2{margin-top:0}.todo-steps{padding-left:1.4em}.todo-steps li{margin-bottom:10px}.todo-steps p{margin:4px 0 0}.challenges{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}.guide .md{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);max-width:820px;padding:8px 32px 24px}.guide h2{border-bottom:1px solid var(--line-soft);margin-top:32px;padding-bottom:4px}.guide blockquote{background:var(--hint-soft);border-left:4px solid var(--hint-line);border-radius:0 8px 8px 0;margin:12px 0;padding:8px 14px}.guide blockquote p{margin:0}.selftest{border-collapse:collapse;font-size:14px}.selftest td,.selftest th{border:1px solid var(--line);vertical-align:top;padding:4px 8px}.selftest pre{background:0 0;border:none;margin:0;padding:0}@media (max-width:900px){.workbench,.project-step .workbench{grid-template-columns:1fr;height:auto}.statement{border-right:none;border-bottom:1px solid var(--line);padding:16px 16px 24px;overflow:visible}.lab{padding:12px 16px 24px}.editor-wrap{flex:none;height:360px}.output{flex:none;height:340px}.complete-grid{grid-template-columns:1fr}.shortcut-hint{display:none}}@media (max-width:600px){.site-header{gap:8px;padding:0 12px}.site-header:has(.course-crumb) .logo-text{display:none}.logo-text{font-size:15px}.course-crumb{padding-right:4px}.logo-mark{font-size:14px}.page{padding:20px 16px 48px}.guide .md{padding:4px 16px 16px}.step-nav{padding:0 12px}}