/* WHY the same system as cad2robot.com and arucostudio.com/about/ (tokens, 1040px column, system fonts):
   they are sibling tools by the same maker, so they should read as one family.
   The accent is the one deliberate difference, so you can tell them apart. It is the rose of the logo's
   heart (#f483a5). Used as TEXT on white that rose is only 2.4:1, so light mode darkens it to #c2255c
   (5.3:1 on the soft panels, 5.7:1 on white, 5.1:1 on the pink tint); dark mode keeps #f483a5 (6.7:1 on the
   soft panels, 7.4:1 on the page). The primary button's text is white on #c2255c (5.7:1) and ink on #f483a5. */
:root {
  --bg: #ffffff; --fg: #191c20; --muted: #5d6570; --line: #e4e7eb; --soft: #f6f7f9;
  --accent: #c2255c; --accent-fg: #ffffff; --accent-soft: #fff0f4; --quote: #3a4049;
  --code-bg: #f3f4f6; --warn: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --fg: #e8eaed; --muted: #9aa2ad; --line: #2c3036; --soft: #1d2024;
    --accent: #f483a5; --accent-fg: #15171a; --accent-soft: #2b1820; --quote: #c9ced6;
    --code-bg: #1d2024; --warn: #e3b341;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
/* WHY height:auto: the width/height attributes reserve the aspect ratio (no layout jump), but
   without it the attribute height wins and the media letterboxes in a tall box. */
img, video { max-width: 100%; height: auto; display: block; }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; }
:not(pre) > code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.text { max-width: 720px; }

/* top bar */
nav.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 22px; height: 56px; }
nav.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--fg); text-decoration: none; margin-right: auto; }
nav.top .brand img { width: 28px; height: 28px; }
nav.top a.link { color: var(--muted); text-decoration: none; font-size: 15px; }
nav.top a.link:hover { color: var(--fg); }
nav.top a.link[aria-current="page"] { color: var(--fg); font-weight: 600; }
@media (max-width: 480px) { nav.top .tag { display: none; } nav.top .wrap { gap: 14px; } nav.top a.link { font-size: 14px; } }
.tag { align-self: flex-start; font-size: 12px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; color: var(--accent); white-space: nowrap; }
nav.top .tag { align-self: center; }

/* hero */
header.hero { padding: 64px 0 28px; text-align: center; }
header.hero .logo { width: 84px; height: 84px; margin: 0 auto 22px; }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 auto 18px; max-width: 820px; }
header.hero .sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 680px; margin: 0 auto 28px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--line); color: var(--fg); background: var(--bg); font-size: 16px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
header.hero .note { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
figure { margin: 0; }
figure.hero-media { margin: 40px auto 0; max-width: 1040px; }
figure img.shot { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; line-height: 1.5; }
figure.hero-media figcaption { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }

/* sections */
section { padding: 56px 0; border-top: 1px solid var(--line); }
h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.2; }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 36px; max-width: 720px; }
h3 { font-size: 20px; margin: 0 0 8px; line-height: 1.3; }
p { margin: 0 0 14px; }

/* philosophy */
.lead-card { border-left: 4px solid var(--accent); background: var(--soft); border-radius: 0 12px 12px 0; padding: 24px 28px; margin-bottom: 28px; }
.lead-card h3 { font-size: 24px; }
.lead-card p { max-width: 720px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: var(--bg); }
.card p { color: var(--muted); }
.card .num { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
blockquote { margin: 12px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); color: var(--quote); font-style: italic; }
blockquote + blockquote { margin-top: 10px; }
blockquote p { margin: 0; color: inherit; }
blockquote cite { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 4px; }
.card p.tip { margin-bottom: 0; }
ul.plain { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
ul.plain li { margin-bottom: 4px; }
.card ul.plain { margin-bottom: 14px; }
.classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.classes li { border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; font-size: 14px; color: var(--muted); }
.classes code { background: none; border: 0; padding: 0; color: var(--fg); font-weight: 600; }

/* today */
.step { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: start; padding: 28px 0; }
.step + .step { border-top: 1px dashed var(--line); }
.step > * { min-width: 0; }
.step.stack { grid-template-columns: 1fr; gap: 20px; }
pre.code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto;
  margin: 0 0 12px; line-height: 1.5; font-size: 13px; }
pre.code .c { color: var(--muted); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.facts .card h3 { font-size: 17px; }
.facts .card p { margin: 0; }
.plan { border: 1px dashed var(--line); border-radius: 12px; padding: 18px 22px; background: var(--soft); }
.plan .tag { display: inline-block; margin-bottom: 8px; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; text-align: center; color: var(--muted); font-size: 14px; }
footer nav a { color: var(--muted); }
footer p { margin: 0 0 8px; }

@media (max-width: 720px) {
  .hide-sm { display: none; }
  nav.top .wrap { gap: 16px; }
  header.hero { padding-top: 40px; }
  .step, .principles, .facts { grid-template-columns: 1fr; }
  .step { gap: 16px; }
  .lead-card { padding: 20px 18px; }
}