/* AFC_emdash C+A / Design guideline v1 / 2026-09-20 */
:root {
  --palette-101310: #101310;
  --palette-151715: #151715;
  --palette-171917: #171917;
  --palette-174bdb: #174bdb;
  --palette-202320: #202320;
  --palette-202520: #202520;
  --palette-20332b: #20332b;
  --palette-222e46: #222e46;
  --palette-234bc1: #234bc1;
  --palette-243024: #243024;
  --palette-252c32: #252c32;
  --palette-294eb0: #294eb0;
  --palette-2a2e2a: #2a2e2a;
  --palette-2c654c: #2c654c;
  --palette-2e2739: #2e2739;
  --palette-333a33: #333a33;
  --palette-342c22: #342c22;
  --palette-382421: #382421;
  --palette-382d19: #382d19;
  --palette-3d6337: #3d6337;
  --palette-454d45: #454d45;
  --palette-455767: #455767;
  --palette-5d625d: #5d625d;
  --palette-6b4488: #6b4488;
  --palette-767e74: #767e74;
  --palette-78542a: #78542a;
  --palette-79520c: #79520c;
  --palette-8b9689: #8b9689;
  --palette-9b3628: #9b3628;
  --palette-a4bbff: #a4bbff;
  --palette-afdbc2: #afdbc2;
  --palette-b5bcb5: #b5bcb5;
  --palette-b5c9ff: #b5c9ff;
  --palette-bacbd8: #bacbd8;
  --palette-bdd6b4: #bdd6b4;
  --palette-cbd0c8: #cbd0c8;
  --palette-d5bce9: #d5bce9;
  --palette-d9dfd5: #d9dfd5;
  --palette-dcc19d: #dcc19d;
  --palette-e6ede3: #e6ede3;
  --palette-edf2ff: #edf2ff;
  --palette-eef5f1: #eef5f1;
  --palette-efd18d: #efd18d;
  --palette-eff4ed: #eff4ed;
  --palette-f0f1ee: #f0f1ee;
  --palette-f0f2f4: #f0f2f4;
  --palette-f2b3a8: #f2b3a8;
  --palette-f3ce35: #f3ce35;
  --palette-f3eff8: #f3eff8;
  --palette-f3f4ef: #f3f4ef;
  --palette-f7f0e5: #f7f0e5;
  --palette-fcefeb: #fcefeb;
  --palette-fcfcfa: #fcfcfa;
  --palette-fff5dc: #fff5dc;
  --palette-ffffff: #ffffff;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --border-width: 1px;
  --border-accent: 3px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --target: 44px;
  --body-width: 720px;
  --site-width: 1312px;
  --sidebar-width: 248px;
  --toc-width: 192px;
  --gutter-desktop: 64px;
  --gutter-mobile: 20px;
  --font-body: 18px;
  --line-body: 34px;
  --font-small: 14px;
  --line-small: 24px;
  --font-ui: 16px;
  --line-ui: 26px;
  --font-h1: 40px;
  --line-h1: 60px;
  --font-h2: 28px;
  --line-h2: 42px;
  --font-h3: 22px;
  --line-h3: 34px;
  --font-mobile-h1: 30px;
  --line-mobile-h1: 45px;
  --font-mobile-h2: 24px;
  --line-mobile-h2: 36px;
  --font-code: 15px;
  --line-code: 26px;
  --font-wordmark: 216px;
  --line-wordmark: 223px;
  --font-mobile-wordmark: 72px;
  --line-mobile-wordmark: 76px;
  --font-brand: 36px;
  --line-brand: 40px;
  --font-mobile-brand: 28px;
  --line-mobile-brand: 32px;
  --table-min: 640px;
  --diagram-min: 640px;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-brand-family: "DM Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --weight-regular: 400;
  --weight-bold: 700;
  --tracking-body: 0em;
  --tracking-brand: -0.025em;
  --shadow: none;
  --duration: 120ms;
  --image-max: 440px;
}
:root, html.light {
  color-scheme: light;
  --color-bg: #fcfcfa;
  --color-surface: #ffffff;
  --color-subtle: #f0f1ee;
  --color-text: #151715;
  --color-muted: #5d625d;
  --color-border: #cbd0c8;
  --color-control-border: #767e74;
  --color-accent: #151715;
  --color-accent-hover: #333a33;
  --color-inverse: #fcfcfa;
  --color-link: #234bc1;
  --color-focus: #234bc1;
  --color-code-bg: #f0f1ee;
  --color-code-fg: #202520;
  --color-note-bg: #f0f2f4;
  --color-note-fg: #455767;
  --color-tip-bg: #eff4ed;
  --color-tip-fg: #3d6337;
  --color-warning-bg: #fff5dc;
  --color-warning-fg: #79520c;
  --color-danger-bg: #fcefeb;
  --color-danger-fg: #9b3628;
  --color-annotation-bg: #f3eff8;
  --color-annotation-fg: #6b4488;
  --color-easy-bg: #eef5f1;
  --color-easy-fg: #2c654c;
  --color-ai-bg: #edf2ff;
  --color-ai-fg: #294eb0;
  --color-operator-bg: #f7f0e5;
  --color-operator-fg: #78542a;
  --color-art-blue: #174bdb;
  --color-art-yellow: #f3ce35;
}
html.dark {
  color-scheme: dark;
  --color-bg: #171917;
  --color-surface: #202320;
  --color-subtle: #2a2e2a;
  --color-text: #f3f4ef;
  --color-muted: #b5bcb5;
  --color-border: #454d45;
  --color-control-border: #8b9689;
  --color-accent: #f3f4ef;
  --color-accent-hover: #d9dfd5;
  --color-inverse: #171917;
  --color-link: #a4bbff;
  --color-focus: #a4bbff;
  --color-code-bg: #101310;
  --color-code-fg: #e6ede3;
  --color-note-bg: #252c32;
  --color-note-fg: #bacbd8;
  --color-tip-bg: #243024;
  --color-tip-fg: #bdd6b4;
  --color-warning-bg: #382d19;
  --color-warning-fg: #efd18d;
  --color-danger-bg: #382421;
  --color-danger-fg: #f2b3a8;
  --color-annotation-bg: #2e2739;
  --color-annotation-fg: #d5bce9;
  --color-easy-bg: #20332b;
  --color-easy-fg: #afdbc2;
  --color-ai-bg: #222e46;
  --color-ai-fg: #b5c9ff;
  --color-operator-bg: #342c22;
  --color-operator-fg: #dcc19d;
  --color-art-blue: #174bdb;
  --color-art-yellow: #f3ce35;
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) {
  color-scheme: dark;
  --color-bg: #171917;
  --color-surface: #202320;
  --color-subtle: #2a2e2a;
  --color-text: #f3f4ef;
  --color-muted: #b5bcb5;
  --color-border: #454d45;
  --color-control-border: #8b9689;
  --color-accent: #f3f4ef;
  --color-accent-hover: #d9dfd5;
  --color-inverse: #171917;
  --color-link: #a4bbff;
  --color-focus: #a4bbff;
  --color-code-bg: #101310;
  --color-code-fg: #e6ede3;
  --color-note-bg: #252c32;
  --color-note-fg: #bacbd8;
  --color-tip-bg: #243024;
  --color-tip-fg: #bdd6b4;
  --color-warning-bg: #382d19;
  --color-warning-fg: #efd18d;
  --color-danger-bg: #382421;
  --color-danger-fg: #f2b3a8;
  --color-annotation-bg: #2e2739;
  --color-annotation-fg: #d5bce9;
  --color-easy-bg: #20332b;
  --color-easy-fg: #afdbc2;
  --color-ai-bg: #222e46;
  --color-ai-fg: #b5c9ff;
  --color-operator-bg: #342c22;
  --color-operator-fg: #dcc19d;
  --color-art-blue: #174bdb;
  --color-art-yellow: #f3ce35;
}
}
@media (max-width: 767px) {
  :root { --font-h1: 30px; --line-h1: 45px; --font-h2: 24px; --line-h2: 36px; --font-wordmark: 72px; --line-wordmark: 76px; --font-brand: 28px; --line-brand: 32px; }
}

/* Component library additions v1.1 */
:root {
  --space-5: 20px;
  --font-h4: 18px;
  --line-h4: 32px;
  --icon-size: 24px;
  --control-width: 240px;
  --image-height: 240px;
  --modal-width: 640px;
  --color-transparent: transparent;
  --full: 100%;
  --zero: 0;
  --border-none: 0px;
  --ratio-media: 3 / 2;
  --ratio-wide: 16 / 9;
  --button-max: 320px;
  --catalog-nav-width: 216px; --catalog-max: 1440px; --diagram-node-min: 160px; --pressed-offset: 1px; --disabled-opacity: .65; --overlay: rgba(0,0,0,.45); --viewport-space: 100vh;
  --catalog-width: 1120px;
  --panel-width: 720px;
}
:root{--hero-art-width:440px;--hero-art-medium:360px;--hero-art-tablet:320px;--font-wordmark-medium:168px;--line-wordmark-medium:180px;--font-wordmark-tablet:120px;--line-wordmark-tablet:132px;--filter-min:200px}
/* Release design extensions: all visual values are centralized here. */
:root{--z-front:100;--table-cell-min:128px;--tooltip-width:300px;--hero-title-width:1000px}
:root{--hero-title-width:var(--site-width)}