:root{--bg:#07111f;--panel:#0c1a2c;--line:#20354e;--text:#f2f7fb;--muted:#8ea2b8;--cyan:#30d8ff;--lime:#b8f23a;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background-color:var(--bg);color:var(--text);font-family:Inter,"Helvetica Neue","Noto Sans JP",sans-serif;line-height:1.7;background-image:linear-gradient(rgba(48,216,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(48,216,255,.035) 1px,transparent 1px);background-size:48px 48px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.site-header{width:min(calc(100% - 48px),var(--max));height:86px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.16em;font-weight:600}.brand b,.eyebrow{color:var(--cyan)}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--cyan);color:#04101c;font-weight:800;clip-path:polygon(12% 0,100% 0,100% 72%,72% 100%,0 100%,0 12%)}.header-link{font-size:11px;letter-spacing:.18em;color:var(--muted)}main{overflow:hidden}.hero{width:min(calc(100% - 48px),var(--max));margin:auto;min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:center;padding:72px 0 84px}.eyebrow{margin:0 0 22px;font-size:11px;font-weight:700;letter-spacing:.2em}.eyebrow span{display:inline-block;width:25px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}.hero h1{font-size:clamp(46px,6vw,78px);line-height:1.13;letter-spacing:-.055em;margin:0;font-weight:800}.hero h1 em{color:var(--lime);font-style:normal}.hero-lead{max-width:590px;margin:28px 0 34px;color:#a9bbcd;font-size:16px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button-primary,.button-ghost{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:0 24px;font-size:13px;font-weight:700;transition:.25s}.button-primary{background:var(--cyan);color:#05111e}.button-primary:hover{background:var(--lime);transform:translateY(-2px)}.button-ghost{border:1px solid var(--line);color:#c2cfdb}.button-ghost:hover{border-color:var(--cyan);color:var(--cyan)}.stats{display:flex;gap:46px;margin:48px 0 0}.stats div{display:flex;flex-direction:column}.stats dt{font-size:24px;font-weight:700;line-height:1.2}.stats dd{margin:5px 0 0;color:#657d95;font-size:9px;letter-spacing:.18em}.hero-visual{position:relative;border:1px solid #28425c;background:linear-gradient(145deg,rgba(18,43,65,.92),rgba(7,17,31,.96));padding:20px;box-shadow:0 28px 80px rgba(0,0,0,.38)}.hero-visual:before,.hero-visual:after{content:"";position:absolute;width:18px;height:18px;border-color:var(--cyan)}.hero-visual:before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}.hero-visual:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}.visual-label,.visual-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:#6f89a2}.visual-label{margin-bottom:16px}.visual-footer{margin-top:16px}.visual-footer span:first-child{color:var(--lime)}.maze-grid{position:relative;aspect-ratio:1;background-image:linear-gradient(#31506c 1px,transparent 1px),linear-gradient(90deg,#31506c 1px,transparent 1px);background-size:20% 20%;border:1px solid #31506c;background-color:#091728}.route{position:absolute;background:rgba(184,242,58,.8);box-shadow:0 0 14px rgba(184,242,58,.45)}.r1{left:10%;top:80%;width:1px;height:10%}.r2{left:10%;top:80%;width:20%;height:1px}.r3{left:30%;top:40%;width:1px;height:40%}.r4{left:30%;top:40%;width:40%;height:1px}.r5{left:70%;top:20%;width:1px;height:20%}.r6{left:70%;top:20%;width:20%;height:1px}.mouse-chip,.goal-chip{position:absolute;display:grid;place-items:center;width:12%;aspect-ratio:1;background:#112941;border:1px solid var(--cyan)}.mouse-chip{left:4%;bottom:4%}.goal-chip{right:4%;top:4%;border-color:var(--lime)}.mouse-chip img,.goal-chip img{width:70%;height:70%;object-fit:contain}.lessons,.guide{padding:100px max(24px,calc((100vw - var(--max))/2))}.lessons{background:#091524;border-block:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:44px}.section-heading h2,.guide h2{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.04em;margin:0}.section-heading>p{max-width:380px;color:var(--muted);font-size:13px;text-align:right}.lesson-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.lesson-card{position:relative;min-height:260px;padding:26px;background:var(--panel);transition:.25s}.lesson-card:hover{z-index:1;background:#122940;box-shadow:0 0 0 1px var(--cyan);transform:translateY(-4px)}.lesson-card.featured{background:linear-gradient(145deg,#113044,#0d2136)}.lesson-card.competition{background:linear-gradient(145deg,#233318,#101f22)}.lesson-number{font-size:12px;color:var(--cyan);font-weight:700}.lesson-level{float:right;color:#617b93;font-size:8px;letter-spacing:.12em;border:1px solid #29425b;padding:3px 7px}.lesson-card h3{font-size:21px;margin:62px 0 10px}.lesson-card p{margin:0;color:var(--muted);font-size:12px}.card-arrow{position:absolute;right:24px;bottom:20px;color:var(--cyan);font-size:20px}.guide{margin:auto}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:100px}.steps article{border-top:1px solid var(--line);padding:24px 4px}.steps span{color:var(--cyan);font-size:11px}.steps h3{font-size:18px;margin:22px 0 8px}.steps p{font-size:13px;color:var(--muted);margin:0}.command-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding:56px;background:var(--panel);border:1px solid var(--line)}.command-copy>p:last-child{color:var(--muted);font-size:13px}.command-copy code{color:var(--lime)}.commands{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.commands article{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.commands code{font-size:13px;color:var(--cyan)}.commands p{font-size:11px;color:var(--muted);margin:8px 0 0}.commands b{color:#c8d6e3;font-weight:500}footer{width:min(calc(100% - 48px),var(--max));margin:auto;padding:34px 0 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#536b82;font-size:9px;letter-spacing:.16em}@media(max-width:920px){.hero{grid-template-columns:1fr;gap:50px}.hero-visual{max-width:560px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.command-panel{grid-template-columns:1fr;padding:36px;gap:40px}}@media(max-width:600px){.site-header,.hero,footer{width:calc(100% - 32px)}.hero{padding:56px 0 70px;min-height:auto}.hero h1{font-size:43px}.hero-lead{font-size:14px}.stats{gap:28px}.lessons,.guide{padding:72px 16px}.section-heading{display:block}.section-heading>p{text-align:left}.lesson-grid,.steps,.commands{grid-template-columns:1fr}.lesson-card{min-height:220px}.steps{gap:0}.command-panel{padding:26px 20px}.hero-visual{padding:14px}.button-primary,.button-ghost{width:100%}footer{display:block}footer span{display:block;margin:6px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* A small, readable example beneath the command reference. */
.command-panel > *, .code-example > * { min-width: 0; }
.command-copy > p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.code-example { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 40px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); }
.example-label { margin: 0 0 12px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.example-copy h3 { margin: 0 0 14px; color: var(--text); font-size: 22px; line-height: 1.5; }
.example-copy > p:not(.example-label) { color: #a9bbcd; font-size: 13px; line-height: 1.9; }
.example-copy .example-note { margin: 20px 0 0; padding-left: 14px; border-left: 2px solid var(--lime); }
.example-note code { color: var(--lime); font-weight: 700; }
.example-editor { overflow: hidden; background: #06101d; border: 1px solid #29425b; border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.example-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: #a9bbcd; font-size: 11px; }
.example-toolbar span:last-child { color: var(--cyan); }
.example-editor pre { margin: 0; padding: 24px 18px; overflow-x: auto; color: #e2ecf5; font-size: 14px; line-height: 1.9; tab-size: 2; }
.example-editor code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.syntax-keyword { color: #c4a7ff; }
.syntax-method { color: var(--cyan); }
.syntax-value { color: var(--lime); }
.example-caption { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); color: #a9bbcd; font-size: 9px; letter-spacing: .16em; }
.example-caption span { margin: 0 10px; color: var(--cyan); }
@media (max-width: 920px) {
  .code-example { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .example-editor pre { padding: 20px 12px; font-size: 12px; }
}

/* Research credits and navigation */
.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 64px 0 56px;
  border-top: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: normal;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(48,216,255,.3);
}
.footer-label { margin: 0 0 20px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.footer-title { margin: 0; color: var(--text); font-size: clamp(24px,3vw,34px); font-weight: 700; line-height: 1.55; letter-spacing: .02em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.footer-research { min-width: 0; border-left: 1px solid var(--line); padding-left: 32px; }
.footer-research h2 { margin: 0 0 12px; color: var(--text); font-size: 15px; }
.footer-research p { margin: 0 0 20px; line-height: 1.9; }
.footer-paper { display: block; padding: 14px 0; border-top: 1px solid var(--line); color: #c2cfdb; line-height: 1.8; overflow-wrap: anywhere; }
.footer-paper small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.site-footer a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 5px; }
.site-footer a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
@media (max-width: 600px) {
  .site-footer { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 32px; }
  .footer-research { border-left: 0; padding-left: 0; }
}