/* SugarMount Design System (SDS) v1, hand-written. Generated companions (tools/sds_apps.py via build.py):
   fonts/pretendard.css, sds-apps.css ([data-app] accents). Rules T1-T4 and breakpoints: /design/. */

/* ---------- tokens ---------- */
:root {
  --sds-ref-white:#FFFFFF;--sds-ref-paper:#F6F8FB;--sds-ref-fill:#EEF1F5;
  --sds-ref-line-200:#DCE2EA;--sds-ref-line-300:#C3CCD8;--sds-ref-ink-400:#7C8596;
  --sds-ref-ink-600:#4B5668;--sds-ref-ink-900:#142033;
  --sds-ref-night-950:#0F1622;--sds-ref-night-900:#172131;--sds-ref-night-860:#1B2638;
  --sds-ref-night-820:#1D2940;--sds-ref-night-line:#2A3546;--sds-ref-night-line-strong:#3A4659;
  --sds-ref-night-400:#6A7487;--sds-ref-mist-400:#A7B1BF;--sds-ref-mist-100:#E8EDF4;

  --sds-bg-layer-basement:var(--sds-ref-paper);
  --sds-bg-layer-default:var(--sds-ref-white);
  --sds-bg-layer-floating:var(--sds-ref-white);
  --sds-bg-layer-fill:var(--sds-ref-fill);
  --sds-bg-header:rgb(246 248 251 / .9);
  --sds-fg-neutral:var(--sds-ref-ink-900);
  --sds-fg-heading:var(--sds-ref-ink-900);
  --sds-fg-neutral-muted:var(--sds-ref-ink-600);
  --sds-fg-neutral-inverted:var(--sds-ref-white);
  --sds-stroke-neutral-weak:var(--sds-ref-line-200);
  --sds-stroke-neutral-decor:var(--sds-ref-line-300);
  --sds-stroke-neutral-solid:var(--sds-ref-ink-400);
  --sds-stroke-neutral-contrast:var(--sds-ref-ink-900);
  --sds-crumb-link:var(--sds-ref-ink-400);
  --sds-fg-positive:#0F5F58;--sds-bg-positive-weak:#E6F4F1;
  --sds-fg-warning:#7A4A00;--sds-bg-warning-weak:#FFF4E5;
  --sds-fg-critical:#C00000;--sds-bg-critical-weak:#FFEBEE;
  --sds-bg-informative-weak:#EAF0F7;

  /* accent:neutral defaults, redeclared per [data-app] in sds-apps.css (T1) */
  --sds-bg-accent-solid:#142033;--sds-bg-accent-solid-hover:#26364F;--sds-fg-on-accent:#FFFFFF;
  --sds-fg-accent:#142033;--sds-bg-accent-weak:#EEF1F5;--sds-fg-accent-contrast:#142033;
  --sds-stroke-focus-ring:#142033;--sds-stroke-link:#7C8596;--sds-stroke-link-hover:#142033;

  --sds-mark-top:#FFFFFF;--sds-mark-left:#142033;--sds-mark-right:#4B5668;--sds-mark-edge:#142033;
  --sds-font-smoothing:auto;

  --sds-font-sans:"Pretendard Variable","SDS Fallback Hangul","SDS Fallback Hangul Android","SDS Fallback Latin",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --sds-font-system:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --sds-font-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --sds-text-display-fs:clamp(2rem,1.4rem + 3vw,3rem);--sds-text-display-lh:1.2;--sds-text-display-fw:800;--sds-text-display-ls:-.025em;
  --sds-text-h1-fs:clamp(1.75rem,1.35rem + 2vw,2.5rem);--sds-text-h1-lh:1.25;--sds-text-h1-fw:750;--sds-text-h1-ls:-.02em;
  --sds-text-h2-fs:clamp(1.375rem,1.2rem + .9vw,1.625rem);--sds-text-h2-lh:1.35;--sds-text-h2-fw:700;--sds-text-h2-ls:-.015em;
  --sds-text-h3-fs:1.125rem;--sds-text-h3-lh:1.45;--sds-text-h3-fw:700;--sds-text-h3-ls:-.01em;
  --sds-text-lead-fs:clamp(1.0625rem,1rem + .4vw,1.25rem);--sds-text-lead-lh:1.65;--sds-text-lead-fw:400;--sds-text-lead-ls:-.01em;
  --sds-text-body-fs:1.0625rem;--sds-text-body-lh:1.75;--sds-text-body-fw:400;--sds-text-body-ls:-.005em;
  --sds-text-ui-fs:1rem;--sds-text-ui-lh:1.5;--sds-text-ui-fw:500;--sds-text-ui-ls:-.01em;
  --sds-text-small-fs:.875rem;--sds-text-small-lh:1.5;--sds-text-small-fw:400;--sds-text-small-ls:0;
  --sds-text-label-fs:.8125rem;--sds-text-label-lh:1.4;--sds-text-label-fw:600;--sds-text-label-ls:0;

  --sds-space-1:4px;--sds-space-2:8px;--sds-space-3:12px;--sds-space-4:16px;--sds-space-5:20px;
  --sds-space-6:24px;--sds-space-8:32px;--sds-space-10:40px;--sds-space-12:48px;--sds-space-16:64px;--sds-space-20:80px;
  --sds-gutter:clamp(16px,4vw,24px);
  --sds-width-wide:1120px;--sds-width-read:42rem;--sds-width-toc:220px;
  --sds-header-h:60px;
  --sds-target:48px;--sds-target-nav:44px;--sds-target-min:24px;
  --sds-radius-xs:4px;--sds-radius-s:8px;--sds-radius-m:12px;--sds-radius-l:16px;--sds-radius-pill:999px;--sds-radius-icon:22%;
  --sds-elevation-0:none;
  --sds-elevation-icon:0 1px 2px rgb(20 32 51/.12),0 4px 14px -6px rgb(20 32 51/.35);
  --sds-elevation-3:0 4px 8px rgb(20 32 51/.08),0 12px 32px rgb(20 32 51/.16);
  --sds-elevation-cube:inset 0 -2px 0 rgb(20 32 51/.18);
  --sds-duration-1:120ms;--sds-duration-2:200ms;--sds-duration-3:320ms;
  --sds-ease-standard:cubic-bezier(.2,0,0,1);--sds-ease-arrive:cubic-bezier(.2,.8,.3,1.15);
  --sds-z-header:10;--sds-z-menu:20;--sds-z-skip:30;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root {
  --sds-bg-layer-basement:var(--sds-ref-night-950);
  --sds-bg-layer-default:var(--sds-ref-night-900);
  --sds-bg-layer-floating:var(--sds-ref-night-820);
  --sds-bg-layer-fill:var(--sds-ref-night-860);
  --sds-bg-header:rgb(15 22 34 / .9);
  --sds-fg-neutral:var(--sds-ref-mist-100);
  --sds-fg-heading:var(--sds-ref-mist-100);
  --sds-fg-neutral-muted:var(--sds-ref-mist-400);
  --sds-fg-neutral-inverted:var(--sds-ref-night-950);
  --sds-stroke-neutral-weak:var(--sds-ref-night-line);
  --sds-stroke-neutral-decor:var(--sds-ref-night-line-strong);
  --sds-stroke-neutral-solid:var(--sds-ref-night-400);
  --sds-stroke-neutral-contrast:var(--sds-ref-mist-100);
  --sds-crumb-link:var(--sds-ref-night-400);
  --sds-fg-positive:#9FE1D6;--sds-bg-positive-weak:#0F3B36;
  --sds-fg-warning:#FFD59A;--sds-bg-warning-weak:#4A3410;
  --sds-fg-critical:#F5A3A3;--sds-bg-critical-weak:#4A1F1F;
  --sds-bg-informative-weak:var(--sds-ref-night-860);
  --sds-bg-accent-solid:#E8EDF4;--sds-bg-accent-solid-hover:#FFFFFF;--sds-fg-on-accent:#0F1622;
  --sds-fg-accent:#E8EDF4;--sds-bg-accent-weak:#1B2638;--sds-fg-accent-contrast:#E8EDF4;
  --sds-stroke-focus-ring:#E8EDF4;--sds-stroke-link:#6A7487;--sds-stroke-link-hover:#E8EDF4;
  --sds-mark-top:#E8EDF4;--sds-mark-left:#A7B1BF;--sds-mark-right:#6A7487;--sds-mark-edge:#E8EDF4;
  --sds-font-smoothing:antialiased;
  --sds-elevation-icon:0 0 0 1px var(--sds-stroke-neutral-weak);
  --sds-elevation-3:0 0 0 1px var(--sds-stroke-neutral-decor),0 12px 32px rgb(0 0 0/.5);
  --sds-elevation-cube:inset 0 -2px 0 rgb(0 0 0/.35);
  color-scheme:dark;
}}
:lang(en) { --sds-font-sans:"Pretendard Latin","SDS Fallback Latin",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--sds-text-body-ls:0;}

/* legacy aliases (one release, then delete; new rules never use them) */
:root { --paper:var(--sds-bg-layer-basement);--surface:var(--sds-bg-layer-default);--ink:var(--sds-fg-neutral);--ink-2:var(--sds-fg-neutral-muted);--line:var(--sds-stroke-neutral-weak);--line-strong:var(--sds-stroke-neutral-decor);--radius-s:var(--sds-radius-s);--radius-m:var(--sds-radius-m);--icon-radius:var(--sds-radius-icon);--wide:var(--sds-width-wide);--read:var(--sds-width-read);--gutter:var(--sds-gutter);--font:var(--sds-font-sans);}
:root, [data-app] { --accent:var(--sds-bg-accent-solid);--accent-ink:var(--sds-fg-on-accent);--accent-text:var(--sds-fg-accent);}
:root, [data-app] { --accent-soft:var(--sds-bg-accent-weak);}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box;}
html { -webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:var(--sds-font-sans);scroll-padding-top:calc(var(--sds-header-h) + 20px);}
body { margin:0;background:var(--sds-bg-layer-basement);color:var(--sds-fg-neutral);font-size:var(--sds-text-body-fs);line-height:var(--sds-text-body-lh);font-weight:var(--sds-text-body-fw);letter-spacing:var(--sds-text-body-ls);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:var(--sds-font-smoothing);}
img, svg, video { max-width:100%;height:auto;}
a { color:var(--sds-fg-neutral);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--sds-stroke-link);}
a:hover { text-decoration-thickness:2px;text-decoration-color:var(--sds-stroke-link-hover);}
:focus-visible { outline:3px solid var(--sds-stroke-focus-ring);outline-offset:3px;}
:is(.table-wrap, .shots, .toc, .menu, .toc-inline) :focus-visible, pre:focus-visible { outline-offset:-3px;}
h1, h2, h3, h4 { color:var(--sds-fg-heading);margin:0 0 var(--sds-space-3);}
h1 { font-size:var(--sds-text-h1-fs);line-height:var(--sds-text-h1-lh);font-weight:var(--sds-text-h1-fw);letter-spacing:var(--sds-text-h1-ls);}
h2 { font-size:var(--sds-text-h2-fs);line-height:var(--sds-text-h2-lh);font-weight:var(--sds-text-h2-fw);letter-spacing:var(--sds-text-h2-ls);margin-block-start:var(--sds-space-12);}
h3 { font-size:var(--sds-text-h3-fs);line-height:var(--sds-text-h3-lh);font-weight:var(--sds-text-h3-fw);letter-spacing:var(--sds-text-h3-ls);margin-block-start:var(--sds-space-8);}
h4 { font-size:var(--sds-text-ui-fs);line-height:var(--sds-text-ui-lh);font-weight:700;}
h1, h2, h3, .lead { text-wrap:balance;}
p, li, dd { text-wrap:pretty;}
p, ul, ol, table, dl, figure, pre { margin:0 0 var(--sds-space-4);}
ul, ol { padding-inline-start:1.3em;}
li { margin:var(--sds-space-1) 0;}
strong, b { font-weight:700;}
dt { font-weight:600;margin-block-start:.8em;}
dd { margin:.2em 0 0;}
small, .muted { color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);}
code { font-family:var(--sds-font-mono);font-size:.875em;background:var(--sds-bg-layer-fill);padding:.1em .35em;border-radius:var(--sds-radius-xs);}
pre { background:var(--sds-bg-layer-fill);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);padding:var(--sds-space-4);overflow-x:auto;tab-size:2;font:.875rem/1.6 var(--sds-font-mono);white-space:pre;word-break:normal;overflow-wrap:normal;}
pre code { background:none;padding:0;font-size:inherit;}
:not(pre) > code, .meta a, a[href^="mailto:"], .url { overflow-wrap:anywhere;}
table, .meta, .stat-value, time, .num { font-variant-numeric:tabular-nums;}
.sym, html[lang="en"] [lang="ko"] { font-family:var(--sds-font-system);}

/* ---------- layout ---------- */
.container { width:min(100% - 2 * var(--sds-gutter), var(--sds-width-wide));margin-inline:auto;}
main.container { padding-block-end:var(--sds-space-16);}
.page-read main > *:not(.crumbs) { max-width:var(--sds-width-read);}
.page-read main > :is(.shots, .app-tiles, .table-wrap.wide) { max-width:none;}
.app-layout { display:grid;grid-template-columns:minmax(0, 1fr);column-gap:var(--sds-space-12);}
.app-layout > * { min-width:0;}
.skip { position:absolute;left:-9999px;top:var(--sds-space-3);z-index:var(--sds-z-skip);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sds-space-4);background:var(--sds-bg-layer-floating);color:var(--sds-fg-neutral);border:1px solid transparent;border-radius:var(--sds-radius-s);box-shadow:var(--sds-elevation-3);}
.skip:focus { left:var(--sds-space-3);}

/* ---------- header, nav, menu sheet ---------- */
.site-header { position:sticky;top:0;z-index:var(--sds-z-header);background:var(--sds-bg-header);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--sds-stroke-neutral-weak);}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background:var(--sds-bg-layer-basement);} }
.site-header .container { display:flex;align-items:center;gap:var(--sds-space-2);min-height:var(--sds-header-h);}
.brand { display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;margin-inline-end:auto;color:var(--sds-fg-neutral);font-size:1.125rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;}
.brand-mark { display:block;flex:none;width:26px;height:26px;}
.brand-mark .t { fill:var(--sds-mark-top);} .brand-mark .l { fill:var(--sds-mark-left);} .brand-mark .r { fill:var(--sds-mark-right);} .brand-mark .e { stroke:var(--sds-mark-edge);}
.site-nav { display:none;align-items:center;gap:2px;}
.site-nav a, .lang, .menu-button { display:inline-flex;align-items:center;min-height:var(--sds-target-nav);padding:0 var(--sds-space-3);border-radius:var(--sds-radius-pill);font-size:var(--sds-text-ui-fs);font-weight:var(--sds-text-ui-fw);white-space:nowrap;text-decoration:none;}
.site-nav a { color:var(--sds-fg-neutral-muted);}
.site-nav a:hover { color:var(--sds-fg-neutral);background:var(--sds-bg-layer-fill);}
.site-nav a[aria-current="page"] { color:var(--sds-fg-neutral);font-weight:700;text-decoration:underline 2px;text-underline-offset:6px;text-decoration-color:var(--sds-stroke-neutral-contrast);}
.lang { color:var(--sds-fg-neutral);border:1px solid var(--sds-stroke-neutral-solid);}
.lang:hover { background:var(--sds-bg-layer-fill);}
.site-nav .lang { margin-inline-start:var(--sds-space-1);}
.menu-button { gap:6px;color:var(--sds-fg-neutral);background:transparent;border:1px solid var(--sds-stroke-neutral-solid);font-family:inherit;line-height:1.2;cursor:pointer;}
.menu-button:hover { background:var(--sds-bg-layer-fill);}
.menu-button svg { width:18px;height:18px;flex:none;}
@media (max-width: 379.98px) { /* 320 px reflow (WCAG 1.4.10): brand, language and menu must fit in 288 px */
  .site-header .container { gap:var(--sds-space-1);}
  .brand { flex:0 1 auto;min-width:0;gap:8px;font-size:1rem;}
  .brand-name { overflow:hidden;text-overflow:ellipsis;}
  .lang, .menu-button { padding:0 10px;}
  .menu-button { min-width:var(--sds-target-nav);justify-content:center;}
  .menu-button span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} /* icon only; the label stays the accessible name */
}
.menu { position:fixed;inset:var(--sds-header-h) 0 auto 0;z-index:var(--sds-z-menu);margin:0;width:100%;max-width:none;max-height:calc(100dvh - var(--sds-header-h));overflow:auto;padding:var(--sds-space-4) var(--sds-gutter) var(--sds-space-6);background:var(--sds-bg-layer-floating);color:var(--sds-fg-neutral);border:1px solid transparent;border-radius:0 0 var(--sds-radius-l) var(--sds-radius-l);box-shadow:var(--sds-elevation-3);}
.menu::backdrop { inset-block-start:60px;background:rgb(15 22 34 / .4);}
.menu nav { max-width:var(--sds-width-wide);margin-inline:auto;}
.menu-close { float:inline-end;}
.menu-title { clear:both;margin:var(--sds-space-4) 0 var(--sds-space-2);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:var(--sds-text-label-fw);}
.menu p a, .menu-links a { display:inline-block;padding-block:4px;}
.menu-links { list-style:none;padding:var(--sds-space-3) 0 0;margin:var(--sds-space-2) 0 0;display:flex;flex-wrap:wrap;gap:0 var(--sds-space-5);border-top:1px solid var(--sds-stroke-neutral-weak);}
.menu-links li { margin:0;}
@supports not selector(:popover-open) {
  .menu { position:static;display:block;box-shadow:none;max-height:none;border-radius:0;}
  .menu-button, .menu-close { display:none;}
  .site-header { position:static;}
}
@media (min-width: 720px) {
  .site-nav { display:flex;}
  .menu-button, .menu { display:none;}
}
@media (max-height: 30rem) {
  html { scroll-padding-top:0;}
  .site-header { position:static;}
  .menu { inset:0 0 auto 0;max-height:100dvh;}
  .menu-close { position:sticky;top:0;z-index:1;background:var(--sds-bg-layer-floating);}
  .app-layout > :is(.facts, .facts-box), .page-read main > .toc { position:static;}
}

/* app tiles (menu sheet, hub, about, 404) */
.app-tiles { list-style:none;padding:0;margin:0 0 var(--sds-space-4);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--sds-space-2);}
.app-tiles li { margin:0;}
.app-tile { display:grid;justify-items:center;align-content:start;gap:var(--sds-space-2);min-height:72px;height:100%;padding:var(--sds-space-3) var(--sds-space-2);border:1px solid transparent;border-radius:var(--sds-radius-m);color:var(--sds-fg-neutral);text-align:center;text-decoration:none;}
.app-tile .app-icon { width:48px;height:48px;}
.app-tile span { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:600;}
.app-tile:hover { background:var(--sds-bg-accent-weak);color:var(--sds-fg-accent-contrast);}
@media (min-width: 480px) { .app-tiles { grid-template-columns:repeat(4, minmax(0, 1fr));} }
@media (min-width: 720px) { main .app-tiles { grid-template-columns:repeat(6, minmax(0, 1fr));} }

/* ---------- footer, breadcrumbs ---------- */
.site-footer { margin-top:var(--sds-space-8);padding:var(--sds-space-10) 0 var(--sds-space-12);background:var(--sds-bg-layer-default);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);border-top:3px solid var(--sds-stroke-neutral-weak);border-image:var(--sds-brand-spectrum) 1;}
.site-footer .container { display:grid;gap:var(--sds-space-6);grid-template-columns:minmax(0, 1fr);}
.footer-title, .site-footer h2 { margin:0 0 var(--sds-space-2);color:var(--sds-fg-neutral);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);font-weight:700;letter-spacing:0;}
.site-footer p { margin:0 0 var(--sds-space-2);}
.site-footer ul { list-style:none;padding:0;margin:0;columns:2;column-gap:var(--sds-space-6);}
.site-footer li { margin:0;break-inside:avoid;}
.site-footer a { display:inline-block;padding-block:4px;color:var(--sds-fg-neutral);}
.site-footer .brand { padding-block:0;}
.legal { grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sds-space-1) var(--sds-space-5);padding-top:var(--sds-space-4);border-top:1px solid var(--sds-stroke-neutral-weak);}
@media (min-width: 720px) { .site-footer .container { grid-template-columns:1.3fr 1fr 1fr;} }
.crumbs { --sds-stroke-focus-ring:var(--sds-stroke-neutral-contrast);--sds-stroke-link:var(--sds-crumb-link);--sds-stroke-link-hover:var(--sds-stroke-neutral-contrast);margin:var(--sds-space-5) 0 0;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);}
.crumbs ol { list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;}
.crumbs li { margin:0;}
.crumbs li + li::before { content:"›";content:"›" / "";font-family:var(--sds-font-system);color:var(--sds-fg-neutral-muted);padding-inline:6px;}
.crumbs a { display:inline-block;padding-block:2px;color:var(--sds-fg-neutral-muted);}
.crumbs a:hover { color:var(--sds-fg-neutral);}

/* ---------- buttons, badges, status, chips ---------- */
.button { display:inline-flex;align-items:center;justify-content:center;gap:var(--sds-space-2);min-height:var(--sds-target);padding:0 var(--sds-space-5);border:1px solid transparent;border-radius:var(--sds-radius-pill);background:var(--sds-bg-accent-solid);color:var(--sds-fg-on-accent);font-family:inherit;font-size:var(--sds-text-ui-fs);line-height:1.2;font-weight:600;letter-spacing:var(--sds-text-ui-ls);text-decoration:none;text-align:center;cursor:pointer;}
.button:hover { background:var(--sds-bg-accent-solid-hover);color:var(--sds-fg-on-accent);}
.button--outline { background:transparent;color:var(--sds-fg-accent);border:1.5px solid var(--sds-fg-accent);}
.button--outline:hover { background:var(--sds-bg-accent-weak);color:var(--sds-fg-accent-contrast);border-color:var(--sds-fg-accent-contrast);}
.button--quiet { background:transparent;color:var(--sds-fg-neutral-muted);}
.button--quiet:hover { background:var(--sds-bg-layer-fill);color:var(--sds-fg-neutral);}
.button--s, .card .card-actions .button { min-height:40px;padding:0 var(--sds-space-4);font-size:.9375rem;}
.play-badge::before { content:"";flex:none;width:10px;height:12px;background:currentColor;clip-path:polygon(0 0, 100% 50%, 0 100%);forced-color-adjust:none;} /* clip-path, not transparent borders: forced colors would paint those */
.actions, .card-actions { display:flex;flex-wrap:wrap;gap:var(--sds-space-3);margin:var(--sds-space-5) 0 0;}
.badge { display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border:1px solid transparent;border-radius:var(--sds-radius-pill);background:var(--sds-bg-accent-weak);color:var(--sds-fg-accent-contrast);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:600;letter-spacing:0;white-space:nowrap;vertical-align:middle;}
.badge--soon, .badge--review { background:var(--sds-bg-layer-fill);color:var(--sds-fg-neutral-muted);}
.badge--neutral { background:var(--sds-bg-layer-fill);color:var(--sds-fg-neutral);}
.badge--positive { background:var(--sds-bg-positive-weak);color:var(--sds-fg-positive);}
.badge--warning { background:var(--sds-bg-warning-weak);color:var(--sds-fg-warning);}
.status { display:flex;flex-wrap:wrap;align-items:center;gap:var(--sds-space-1) var(--sds-space-3);margin:var(--sds-space-2) 0;}
.status .brandline { color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}
.trust { list-style:none;padding:0;margin:var(--sds-space-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--sds-space-2);}
.trust li { display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:0;padding:2px 12px;border:1px solid transparent;border-radius:var(--sds-radius-pill);background:var(--sds-bg-accent-weak);color:var(--sds-fg-accent-contrast);font-size:var(--sds-text-small-fs);line-height:1.4;font-weight:600;}
.trust li::before { content:"";flex:none;width:7px;height:7px;border-radius:2px;background:currentColor;}
.chips { list-style:none;padding:0;margin:var(--sds-space-4) 0;display:flex;flex-wrap:wrap;gap:var(--sds-space-2);}
.chips li { margin:0;}
.chips a { display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sds-space-3);border:1px solid var(--sds-stroke-neutral-solid);border-radius:var(--sds-radius-pill);font-size:var(--sds-text-small-fs);font-weight:600;text-decoration:none;}
.chips a:hover { background:var(--sds-bg-layer-fill);}
.cube { display:inline-block;width:.5rem;height:.5rem;flex:none;color:var(--sds-fg-accent);vertical-align:.1em;}

/* ---------- icons, home hero, sugar mountain ---------- */
.app-icon { display:block;flex:none;width:56px;height:56px;border-radius:var(--sds-radius-icon);background:var(--sds-bg-layer-default);box-shadow:var(--sds-elevation-icon);}
.app-icon--lg { width:88px;height:88px;}
.home-hero { display:grid;gap:var(--sds-space-8);align-items:center;padding:var(--sds-space-10) 0 var(--sds-space-5);}
.home-hero h1 { font-size:var(--sds-text-display-fs);line-height:var(--sds-text-display-lh);font-weight:var(--sds-text-display-fw);letter-spacing:var(--sds-text-display-ls);margin-bottom:var(--sds-space-3);}
.home-hero .lead { color:var(--sds-fg-neutral-muted);max-width:30em;}
.count { color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}
.mountain { list-style:none;padding:0;margin:0 auto;display:grid;gap:10px;justify-items:center;}
.mountain li { margin:0;}
.mountain-row, .mountain .row { display:flex;gap:10px;}
.mountain a { display:block;padding:6px;border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);background:var(--sds-bg-layer-default);box-shadow:var(--sds-elevation-cube);}
.mountain .app-icon { width:clamp(44px, 11vw, 76px);height:clamp(44px, 11vw, 76px);box-shadow:none;}
.mountain-base { width:100%;max-width:420px;height:6px;margin:var(--sds-space-2) auto 0;border-radius:var(--sds-radius-pill);background:var(--sds-brand-spectrum, var(--sds-stroke-neutral-decor));}
@media (min-width: 960px) { .home-hero { grid-template-columns:1.05fr 1fr;padding:var(--sds-space-16) 0 var(--sds-space-8);} }

/* ---------- section head, app rows, principles ---------- */
.section-head { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sds-space-1) var(--sds-space-3);margin-block-start:var(--sds-space-12);}
.section-head h2 { margin:0;display:inline-flex;align-items:center;gap:var(--sds-space-2);}
.section-head .cube { color:var(--sds-fg-neutral);}
.group { margin-top:var(--sds-space-8);}
.group-title, .group h3:not(.app-row-title) { margin:0 0 var(--sds-space-1);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-ui-fs);line-height:var(--sds-text-ui-lh);font-weight:700;letter-spacing:0;}
main > section > .group-title, main > .group-title { margin-block-start:var(--sds-space-6);}
.app-rows { list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0, 1fr);column-gap:var(--sds-space-10);border-top:1px solid var(--sds-stroke-neutral-weak);}
.app-row { margin:0;padding:18px 0;display:grid;grid-template-columns:56px minmax(0, 1fr);gap:var(--sds-space-4);align-items:start;border-bottom:1px solid var(--sds-stroke-neutral-weak);}
.app-row-title, .app-row h4 { margin:0;font-size:1.125rem;line-height:1.4;font-weight:800;letter-spacing:-.01em;}
.brandline { margin:0;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}
.app-row .status { margin:2px 0 0;}
.more-link { margin:var(--sds-space-6) 0 0;font-weight:700;}
.app-row-desc { margin:4px 0 0;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:1.55;}
.tagline { margin:var(--sds-space-1) 0 0;}
.links { display:flex;flex-wrap:wrap;gap:0 var(--sds-space-4);margin-top:var(--sds-space-1);font-size:var(--sds-text-small-fs);}
.links a { display:inline-block;padding-block:3px;font-weight:600;}
.links .muted-link { color:var(--sds-fg-neutral-muted);font-weight:400;}
@media (min-width: 960px) { .app-rows { grid-template-columns:1fr 1fr;} }
.principles { list-style:none;padding:0;margin:var(--sds-space-4) 0 0;display:grid;gap:var(--sds-space-6);grid-template-columns:minmax(0, 1fr);}
.principles li { margin:0;padding-top:var(--sds-space-3);border-top:3px solid var(--sds-stroke-neutral-contrast);}
.principles h3 { margin:0 0 6px;}
.principles p { margin:0;color:var(--sds-fg-neutral-muted);}
@media (min-width: 720px) { .principles { grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--sds-space-8);} }

/* ---------- app hero, hand hero, lead, eyebrow ---------- */
.lead { font-size:var(--sds-text-lead-fs);line-height:var(--sds-text-lead-lh);font-weight:var(--sds-text-lead-fw);letter-spacing:var(--sds-text-lead-ls);color:var(--sds-fg-neutral);}
.eyebrow { display:block;margin:0 0 var(--sds-space-1);color:var(--sds-fg-accent);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:700;}
.app-hero { display:grid;grid-template-columns:auto minmax(0, 1fr);gap:var(--sds-space-1) var(--sds-space-5);align-items:center;padding:var(--sds-space-8) 0 var(--sds-space-2);}
.app-hero .app-icon { grid-row:span 2;width:72px;height:72px;}
.app-hero h1 { margin:0;}
.app-hero > :not(.app-icon, .eyebrow, h1) { grid-column:1 / -1;}
.app-hero .lead { margin:var(--sds-space-3) 0 0;max-width:34em;}
.app-hero .tagline { font-size:var(--sds-text-lead-fs);line-height:var(--sds-text-lead-lh);margin-top:var(--sds-space-3);max-width:34em;}
@media (min-width: 480px) { .app-hero .app-icon { width:96px;height:96px;} }
.hero { padding:var(--sds-space-6) 0 var(--sds-space-2);}
.hero > .app-icon { width:88px;height:88px;margin-bottom:var(--sds-space-4);}
.hero h1 { margin-bottom:var(--sds-space-3);}
.hero .lead { margin-bottom:var(--sds-space-3);}
.notfound { padding:var(--sds-space-20) 0;max-width:var(--sds-width-read);}
.notfound .actions { margin-block-start:var(--sds-space-8);}

/* ---------- facts, stat, features, related ---------- */
.facts, .facts-box { align-self:start;margin-top:var(--sds-space-8);}
.facts h2 { margin-top:0;}
.facts table { background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);border-collapse:separate;border-spacing:0;overflow:hidden;}
.facts tbody th { width:34%;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:600;}
.facts td { font-size:var(--sds-text-ui-fs);line-height:var(--sds-text-ui-lh);}
.facts-box { background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);padding:var(--sds-space-5) var(--sds-space-6);}
.facts-box h2 { margin:0 0 10px;font-size:var(--sds-text-h3-fs);line-height:var(--sds-text-h3-lh);}
.facts-box dl { margin:0;}
.facts-box dt { margin-top:var(--sds-space-3);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);}
.facts-box dt:first-child { margin-top:0;}
.facts-box dd { margin:2px 0 0;font-size:var(--sds-text-ui-fs);}
@media (min-width: 960px) {
  .app-layout { grid-template-columns:minmax(0, 1fr) 340px;}
  .app-layout > * { grid-column:1;}
  .app-layout > :is(.facts, .facts-box) { grid-column:2;grid-row:1 / span 99;position:sticky;top:calc(var(--sds-header-h) + 24px);}
}
.stat { margin:var(--sds-space-6) 0;padding:var(--sds-space-4) var(--sds-space-5);background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);}
.stat-value { margin:0 0 var(--sds-space-1);font-size:var(--sds-text-h2-fs);line-height:var(--sds-text-h2-lh);font-weight:700;letter-spacing:var(--sds-text-h2-ls);color:var(--sds-fg-neutral-muted);}
.stat-value strong, .stat-value > span { color:var(--sds-fg-neutral);}
.stat-value strong { font-weight:800;}
figcaption { color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);}
.features { list-style:none;padding:0;margin:0;display:grid;gap:0 var(--sds-space-8);grid-template-columns:minmax(0, 1fr);}
.features li { margin:0;padding:var(--sds-space-4) 0;border-top:1px solid var(--sds-stroke-neutral-weak);}
.features h3 { margin:0 0 var(--sds-space-1);display:flex;align-items:baseline;gap:var(--sds-space-2);}
.features h3::before { content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--sds-fg-accent);transform:translateY(-.1em);}
.features p { margin:0;color:var(--sds-fg-neutral-muted);}
@media (min-width: 720px) { .features { grid-template-columns:1fr 1fr;} }
.related { list-style:none;padding:0;margin:var(--sds-space-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--sds-space-4);}
.related li { margin:0;width:88px;text-align:center;font-size:var(--sds-text-small-fs);line-height:1.35;}
.related a { display:grid;justify-items:center;gap:var(--sds-space-2);}

/* ---------- steps, tables, notes, FAQ ---------- */
.steps { list-style:none;padding:0;counter-reset:step;}
.steps li { counter-increment:step;position:relative;margin:var(--sds-space-4) 0;padding-inline-start:44px;}
.steps li::before { content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--sds-radius-s);background:var(--sds-bg-accent-solid);color:var(--sds-fg-on-accent);box-shadow:var(--sds-elevation-cube);font-size:.875rem;line-height:1;font-weight:800;}
.steps figure { margin:var(--sds-space-3) 0 0;}
.table-wrap { overflow-x:auto;margin:0 0 var(--sds-space-5);background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);}
.table-wrap table { margin:0;}
table { width:100%;border-collapse:collapse;font-size:var(--sds-text-ui-fs);line-height:var(--sds-text-ui-lh);}
th, td { text-align:start;vertical-align:top;padding:var(--sds-space-3) var(--sds-space-4);border-bottom:1px solid var(--sds-stroke-neutral-weak);}
tr:last-child > th, tr:last-child > td { border-bottom:0;}
thead th { background:var(--sds-bg-layer-fill);font-weight:600;white-space:nowrap;}
tbody th { width:32%;color:var(--sds-fg-neutral-muted);font-weight:600;}
caption { padding:var(--sds-space-2) var(--sds-space-4);text-align:start;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}
.num { text-align:end;}
.note { margin:0 0 var(--sds-space-4);padding:var(--sds-space-3) var(--sds-space-4);background:var(--sds-bg-informative-weak);border-inline-start:3px solid var(--sds-stroke-neutral-contrast);border-radius:var(--sds-radius-s);color:var(--sds-fg-neutral);}
[data-app] .note { background:var(--sds-bg-accent-weak);border-inline-start-color:var(--sds-fg-accent-contrast);}
.note a { text-decoration-color:currentColor;}
[data-app] .note a, [data-app] .note .eyebrow { color:var(--sds-fg-accent-contrast);}
.note > :last-child { margin-bottom:0;}
.note--positive, [data-app] .note--positive { background:var(--sds-bg-positive-weak);border-inline-start-color:var(--sds-fg-positive);}
.note--warning, [data-app] .note--warning { background:var(--sds-bg-warning-weak);border-inline-start-color:var(--sds-fg-warning);}
.note--critical, [data-app] .note--critical { background:var(--sds-bg-critical-weak);border-inline-start-color:var(--sds-fg-critical);}
[data-app] :is(.note--positive, .note--warning, .note--critical) a { color:var(--sds-fg-neutral);}
.faq { margin-top:var(--sds-space-3);border-top:1px solid var(--sds-stroke-neutral-weak);max-width:var(--sds-width-read);}
.faq details { border-bottom:1px solid var(--sds-stroke-neutral-weak);}
.faq summary { position:relative;display:block;min-height:48px;padding:12px 40px 12px 0;list-style:none;cursor:pointer;font-size:var(--sds-text-ui-fs);line-height:var(--sds-text-ui-lh);font-weight:600;}
.faq summary::-webkit-details-marker { display:none;}
.faq summary::after { content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--sds-fg-neutral-muted);border-bottom:2px solid var(--sds-fg-neutral-muted);transform:translateY(-70%) rotate(45deg);}
.faq details[open] > summary::after { transform:translateY(-30%) rotate(-135deg);}
.faq details > div { padding:0 0 var(--sds-space-4);color:var(--sds-fg-neutral);}
.faq details > div > :last-child { margin-bottom:0;}

/* ---------- TOC, meta, related links ---------- */
.toc { display:none;}
.toc-title { margin:0 0 var(--sds-space-2);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-label-fs);line-height:var(--sds-text-label-lh);font-weight:700;}
.toc ol, .toc-inline ol { list-style:none;padding:0;margin:0;}
.toc li, .toc-inline li { margin:0;}
.toc a, .toc-inline a { display:block;padding-block:6px;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:1.45;text-decoration-line:none;}
.toc a:hover, .toc-inline a:hover { color:var(--sds-fg-neutral);text-decoration-line:underline;}
.toc-inline { margin:var(--sds-space-4) 0 var(--sds-space-6);padding:0 var(--sds-space-4);background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);}
.toc-inline summary { min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:var(--sds-text-small-fs);font-weight:600;}
.toc-inline ol { padding-bottom:var(--sds-space-3);}
@media (min-width: 1100px) {
  .toc-inline { display:none;}
  .toc { display:block;}
  .page-read main:has(> .toc) { display:grid;grid-template-columns:minmax(0, var(--sds-width-read)) var(--sds-width-toc);column-gap:56px;align-items:start;}
  .page-read main:has(> .toc) > * { grid-column:1;}
  .page-read main > .toc { grid-column:2;grid-row:1 / span 999;position:sticky;top:calc(var(--sds-header-h) + 24px);max-height:calc(100dvh - 120px);overflow:auto;padding-top:var(--sds-space-8);}
}
.meta, .updated { margin:0 0 var(--sds-space-5);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);line-height:var(--sds-text-small-lh);}
.meta a { color:var(--sds-fg-neutral-muted);}
.related-links { list-style:none;padding:0;margin:var(--sds-space-4) 0;border-top:1px solid var(--sds-stroke-neutral-weak);}
.related-links li { margin:0;padding:var(--sds-space-3) 0;border-bottom:1px solid var(--sds-stroke-neutral-weak);}
.related-links a { font-weight:600;}
.related-links .sub { margin:2px 0 0;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}

/* ---------- shots, boxes, list cards ---------- */
.shots { list-style:none;padding:var(--sds-space-1) 2px var(--sds-space-4);margin:var(--sds-space-6) 0 var(--sds-space-2);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;}
.shots li { flex:0 0 auto;margin:0;scroll-snap-align:start;}
.shots figure { margin:0;}
.shots img { display:block;width:auto;height:clamp(300px, 52vw, 460px);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-l);background:var(--sds-bg-layer-fill);}
.shots figcaption { margin-top:var(--sds-space-2);max-width:260px;}
.box, .two-col > * { background:var(--sds-bg-layer-default);border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);padding:var(--sds-space-5) var(--sds-space-6);}
.box { margin:var(--sds-space-6) 0;}
.box > :first-child, .two-col > * > :first-child { margin-top:0;}
.box > :last-child, .two-col > * > :last-child { margin-bottom:0;}
.two-col { display:grid;gap:var(--sds-space-4);grid-template-columns:minmax(0, 1fr);margin-bottom:var(--sds-space-4);}
@media (min-width: 720px) { .two-col { grid-template-columns:1fr 1fr;} }
.card-list { list-style:none;padding:0;margin:0;border-top:1px solid var(--sds-stroke-neutral-weak);}
.card-list > .card { margin:0;padding:var(--sds-space-4) 0;display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sds-space-1) var(--sds-space-4);align-items:center;border-bottom:1px solid var(--sds-stroke-neutral-weak);}
.card-list > .card :is(h2, h3) { margin:0;font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em;}
.card-list > .card .status { margin:0;}
.card-list > .card .sub { margin:0;color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}
.card-list > .card .card-actions { margin:var(--sds-space-2) 0 0;}
@media (min-width: 480px) {
  .card-list > .card { grid-template-columns:minmax(0, 1fr) auto;}
  .card-list > .card > :not(.card-actions) { grid-column:1;}
  .card-list > .card .card-actions { grid-column:2;grid-row:1 / span 4;margin:0;}
}

/* ---------- forced colors (Windows contrast themes) ---------- */
@media (forced-colors: active) {
  .menu { border-color:CanvasText;}
  .button--outline { border-color:ButtonText;}
  .play-badge::before { background:LinkText;}
  :focus-visible { outline-color:Highlight;}
}

/* ---------- motion: everything behind the reduced-motion guard ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation:auto;}
  .app-row .app-icon, main[data-app] :is(.app-hero, .hero) > .app-icon { view-transition-name:var(--sds-vt, none);}
  a, .button, .app-tile, .lang, .menu-button { transition:background-color var(--sds-duration-1) var(--sds-ease-standard), color var(--sds-duration-1) var(--sds-ease-standard);}
  .menu:popover-open { animation:sds-sheet var(--sds-duration-2) var(--sds-ease-arrive);}
  .faq summary::after { transition:transform var(--sds-duration-2) var(--sds-ease-standard);}
  .mountain .app-icon { animation:sds-drop var(--sds-duration-3) var(--sds-ease-arrive) both;animation-delay:calc(var(--i, 0) * 55ms + 120ms);}
  .mountain a { transition:transform var(--sds-duration-1) var(--sds-ease-standard);}
  .mountain a:hover { transform:translateY(-4px);}
  @keyframes sds-sheet { from { opacity:0;transform:translateY(-8px);} to { opacity:1;transform:none;} }
  @keyframes sds-drop { from { opacity:0;transform:translateY(-28px);} to { opacity:1;transform:none;} }
}

/* ---------- AX notes: search, inquiry, figures ---------- */
.ax-search label { display:block;font-weight:600;margin-bottom:var(--sds-space-2);}
.ax-search input { width:100%;min-height:var(--sds-target);padding:0 var(--sds-space-4);border:1px solid var(--sds-stroke-neutral-contrast);border-radius:var(--sds-radius-m);background:var(--sds-bg-layer-default);color:inherit;font:inherit;}
.ax-results { list-style:none;padding:0;}
.ax-results li { padding:var(--sds-space-3) 0;border-bottom:1px solid var(--sds-stroke-neutral-weak);}
.ax-results .meta, .card .meta { display:block;margin:var(--sds-space-1) 0 0;}
.ax-cta { margin:var(--sds-space-6) 0;padding:var(--sds-space-5);background:var(--sds-bg-accent-weak);border-radius:var(--sds-radius-l);}
.ax-cta--inline { padding:var(--sds-space-3) var(--sds-space-4);border-radius:var(--sds-radius-m);}
.ax-cta p:last-child { margin:0;}
.ax-cta-title { font-weight:700;}
.ax-fig img { display:block;border:1px solid var(--sds-stroke-neutral-weak);border-radius:var(--sds-radius-m);}
.ax-fig figcaption { margin-top:var(--sds-space-2);color:var(--sds-fg-neutral-muted);font-size:var(--sds-text-small-fs);}

@media print {
  .ax-search, .ax-cta { display:none;}
  .site-header, .site-footer, .crumbs, .actions, .card-actions, .menu, .toc, .toc-inline, .skip { display:none;}
  body { background:#fff;color:#000;}
}