/* 並行オブジェクト指向プログラミング（JavaScript 版）
   親サイトと同じ配色（法政 紺 #003f8c / 橙 #f08300）。 */
:root{
  --bg-0:#fff; --surface:#fff; --surface-soft:#f7f9fd; --surface-strong:#eef3fa;
  --border:rgba(0,63,140,.14); --border-strong:rgba(0,63,140,.28);
  --text:#16223a; --text-body:#3b4a66; --text-mute:#7c89a3;
  --primary:#003f8c; --primary-soft:#e6eef9;
  --accent:#f08300; --accent-strong:#d97200; --accent-soft:#fff1de;
  --grad:linear-gradient(135deg,#003f8c 0%,#2a6ec3 55%,#f08300 100%);
  --shadow-1:0 1px 2px rgba(15,30,60,.04),0 8px 24px rgba(15,30,60,.06);
  --shadow-2:0 2px 6px rgba(15,30,60,.06),0 18px 44px rgba(15,30,60,.10);
  --radius:16px; --radius-lg:22px;
  --mono:'Space Grotesk',ui-monospace,SFMono-Regular,Menlo,monospace;
  --code:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Inter','Noto Sans JP',system-ui,-apple-system,sans-serif;color:var(--text);
  background:var(--bg-0);line-height:1.75;overflow-x:hidden;min-height:100vh}
body::before,body::after{content:'';position:fixed;width:50vmax;height:50vmax;border-radius:50%;
  filter:blur(140px);opacity:.16;z-index:-1;pointer-events:none}
body::before{background:radial-gradient(circle,#003f8c 0%,transparent 60%);top:-24vmax;left:-20vmax}
body::after{background:radial-gradient(circle,#f08300 0%,transparent 60%);bottom:-26vmax;right:-22vmax}
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(0,63,140,.04) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,63,140,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
          mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}

.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);background:rgba(255,255,255,.8);
  border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1000px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.06em;font-size:.76rem;white-space:nowrap}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--primary-soft)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.crumbs{margin-left:auto;display:flex;gap:6px;font-size:.78rem;overflow-x:auto}
.crumbs a{padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-mute);white-space:nowrap}
.crumbs a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}

.wrap{max-width:1000px;margin:0 auto;padding:0 22px 80px}
.hero{padding:52px 0 6px}
.badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);
  border:1px solid rgba(240,131,0,.3);padding:5px 14px;border-radius:999px}
.hero h1{margin:16px 0 0;font-size:clamp(1.9rem,5vw,3rem);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.hero .lead{margin:16px 0 0;max-width:66ch;color:var(--text-body)}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stats .stat{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.stats .stat b{font-family:var(--mono);font-size:1.3rem;color:var(--primary);line-height:1}
.stats .stat span{font-size:.78rem;color:var(--text-mute)}

.callout{display:flex;gap:13px;align-items:flex-start;margin:26px 0 0;padding:16px 20px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent-soft),rgba(255,255,255,.6));border:1px solid rgba(240,131,0,.32);
  font-size:.92rem;color:#5a4525}
.callout .ic{flex:none;font-size:1.05rem}
.callout code{background:rgba(255,255,255,.7)}

.jump{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.jump a{padding:6px 13px;font-size:.82rem;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text-body)}
.jump a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}

.demo-sec{margin:52px 0 0;scroll-margin-top:96px}
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:2px solid var(--border)}
.sec-head .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:#fff;background:var(--grad);
  padding:4px 10px;border-radius:7px}
.sec-head h2{margin:0;font-size:1.35rem;letter-spacing:-.01em}
.sec-head .sub-en{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.demo-sec .lead{margin:16px 0 0;color:var(--text-body)}
.demo-sec .explain{margin:14px 0 0;font-size:.92rem;color:var(--text-body);
  border-left:3px solid var(--accent);padding-left:14px}

.demo{margin:18px 0 0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow-1);overflow:hidden}
.demo-stage{background:#fff;display:flex;justify-content:center;padding:12px}
.demo canvas{display:block;max-width:100%}
.demo-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:11px 15px;
  border-top:1px solid var(--border);background:var(--surface-soft)}
.demo-btn{font:inherit;font-size:.83rem;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:var(--primary);color:#fff;transition:filter .15s,transform .15s}
.demo-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.demo-btn.alt{background:var(--accent-strong)}
.demo-stat{font-size:.82rem;color:var(--text-mute)}
.demo-stat b{font-family:var(--mono);color:var(--primary)}
.demo-range{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-body)}
.demo-range input{width:140px}
.demo-range b{font-family:var(--mono);font-size:.76rem;color:var(--primary);min-width:62px}

.srcbox{margin:14px 0 0}
.src-toggle{font:inherit;font-size:.8rem;color:var(--text-mute);background:var(--surface);cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:6px 14px}
.src-toggle:hover{border-color:var(--accent);color:var(--accent-strong)}
.srcbox pre{margin:10px 0 0;padding:16px 18px;border-radius:var(--radius);background:#0f1b2e;color:#dbe6f5;
  overflow-x:auto;font-family:var(--code);font-size:.8rem;line-height:1.6}
.srcbox pre[hidden]{display:none}
.orig{margin:14px 0 0;font-size:.82rem;color:var(--text-mute)}
.orig .dead{color:#b45309}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.cards>*{min-width:0}
.card{padding:16px 19px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow-1)}
.card h3{margin:0 0 7px;font-size:.93rem;display:flex;align-items:center;gap:8px}
.card h3::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none}
.card p{margin:0;font-size:.85rem;color:var(--text-body)}

code{font-family:var(--code);font-size:.88em;background:var(--surface-strong);border-radius:5px;padding:1px 6px}
/* <pre> の中の <code> に、本文用の薄い背景が当たると
   濃紺の上に白文字＋白背景で「文字が見えない」状態になる。必ず打ち消すこと。 */
pre code,.srcbox pre code{background:none;color:inherit;padding:0;border-radius:0;font-size:1em}
.foot{margin-top:60px;padding-top:22px;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-mute);
  display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .sp{margin-left:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 日本語 / English の切替ボタン */
.lang-pick{display:flex;gap:4px;margin-left:8px;flex:none}
.lang-pick button{font:inherit;font-size:.74rem;font-weight:600;padding:5px 11px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-mute);
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.lang-pick button:hover{border-color:var(--accent);color:var(--accent-strong)}
.lang-pick button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
@media (max-width:640px){.crumbs a:nth-child(2){display:none}}
/* 英語表示では見出しと sub-en が同じ文になるので、重複を隠す */
html[lang="en"] .sec-head .sub-en{display:none}