/* GRLife v2 design tokens (same values as the homepage, src/home/home.css). Generated header — keep in sync. */
@font-face { font-family: "Geist"; src: url("/fonts/geist/Geist-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2192, U+2197; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist/GeistMono-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2192, U+2197; }
:root {
  --bg: #131313;
  --surface: #0f0f0f;
  --ink: #efebe2;
  --ink-on-light: #141413;
  --muted: #9d9890;
  --rule: #2b2a28;
  --paper: #e7e3da;
  --amber: #ffb547;
  --ember: #ff6b3d;
  --ember-text: #ff8a5c;
  --rose: #ff4f79;
  --ember-y: var(--amber); /* flat: the review retired the gradient */

  --font: "Geist", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, "PingFang SC", "Noto Sans SC", monospace;

  --t-label: 15px;
  --t-body: clamp(17px, .95rem + .25vw, 20px);
  --t-title: clamp(21px, 1rem + .75vw, 28px);
  --t-statement: clamp(28px, 1rem + 2.7vw, 58px);
  --t-display: clamp(46px, .6rem + 6.9vw, 116px);
  --t-mega: clamp(64px, 11.4vw, 176px);

  --r-s: 6px;
  --r-m: 12px;
  --gutter: clamp(16px, 2vw, 28px);
  --section: clamp(96px, 11vw, 168px);
  --gap-s: 12px;
  --gap-m: 24px;
  --gap-l: clamp(40px, 5vw, 72px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-enter: .8s;
  --t-feedback: .18s;
  --stagger: 80ms;
  --surface-2: #1a1918;
  --ok: #8fd694;
  color-scheme: dark;
}
html:lang(zh-Hant) { --font: "Geist", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, "PingFang TC", "Noto Sans TC", monospace; }
html:lang(ko) { --font: "Geist", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace; }
/* Korean breaks lines between words, not between syllables. */
html:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }


/* v2 shared base: one ground, Geist, pills, form fields, focus. */
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
:where(a) { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--ink-on-light); }
:where(input, select, textarea) { color-scheme: dark; }
:root {
        color-scheme: dark;
        --s-paper: var(--bg);
        --s-ink: var(--ink);
        --s-muted: var(--muted);
        --s-line: var(--rule);
        --s-accent: var(--ember-text);
        --s-page-width: 1280px;
        --s-gutter: clamp(20px, 5.3vw, 76px);
        --s-tool-index-width: 64px;
        --s-tool-gap: 24px;
        --s-sans: var(--font);
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; background: var(--s-paper); }
      body {
        margin: 0;
        background: var(--s-paper);
        color: var(--s-ink);
        font-family: var(--font);
        font-size: 16px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      a { color: inherit; }
      a:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 5px; }
      .wrap { width: min(calc(100% - var(--s-gutter) * 2), var(--s-page-width)); margin-inline: auto; }
      .eyebrow, .micro, .index, .status, .photo-caption, .footer-meta {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .075em;
        line-height: 1.4;
      }
      .eyebrow { color: var(--s-muted); }

      .site-header {
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--s-line);
      }
      .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
      .brand-mark { display: block; width: 34px; height: 24px; }
      .brand-name { font-size: 19px; font-weight: 720; letter-spacing: -.04em; }

      .hero { padding: clamp(40px, 5.8vw, 78px) 0 0; }
      .hero-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
        align-items: end;
        gap: clamp(32px, 7vw, 112px);
        padding-bottom: clamp(28px, 4vw, 52px);
      }
      .hero-heading .eyebrow { margin: 0 0 20px; }
      h1 {
        max-width: 970px;
        margin: 0;
        font-size: clamp(58px, 8.3vw, 112px);
        font-weight: 680;
        letter-spacing: -.01em;
        line-height: 1.06;
      }
      h1 .latin { letter-spacing: -.04em; }
      .hero-note { padding: 0 0 4px 18px; border-left: 1px solid var(--s-accent); }
      .hero-note p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; text-wrap: pretty; }
      .hero-note a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        gap: 8px;
        margin-top: 19px;
        color: var(--s-ink);
        min-height: 44px;
        font-size: 14px;
        font-weight: 650;
        text-decoration-color: var(--s-accent);
        text-underline-offset: 5px;
      }
      .hero-note a span { color: var(--s-accent); }

      .photo-story { margin: 0; }
      .photo-window { position: relative; overflow: hidden; height: clamp(228px, 30vw, 374px); background: var(--paper); }
      .photo-window::after {
        position: absolute;
        inset: 45% 0 0;
        content: "";
        background: var(--surface);
        pointer-events: none;
      }
      .photo-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; filter: grayscale(1); }
      .photo-mark, .photo-number { position: absolute; z-index: 1; color: var(--ink-on-light); }
      .photo-mark { top: 22px; left: 24px; display: flex; align-items: center; gap: 10px; text-shadow: none; }
      .photo-mark::before { width: 7px; height: 7px; background: var(--s-accent); content: ""; }
      .photo-number { right: 24px; bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; }
      .photo-caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 11px; color: var(--s-muted); letter-spacing: .04em; }
      .photo-caption span:first-child { color: var(--s-ink); }

      .tool-index { padding-top: clamp(66px, 9vw, 116px); scroll-margin-top: 24px; }
      .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--s-ink); }
      .section-heading h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
      .section-heading p { margin: 0; color: var(--s-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
      .featured-tool {
        display: grid;
        grid-template-columns: var(--s-tool-index-width) minmax(0, 1fr) 160px;
        align-items: center;
        gap: 20px var(--s-tool-gap);
        padding: 32px 0 35px;
        border-bottom: 1px solid var(--s-line);
      }
      .tool-number { color: var(--s-accent); font-size: 13px; font-weight: 700; letter-spacing: .08em; align-self: start; padding-top: 7px; }
      .tool-content { min-width: 0; }
      .tool-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
      .tool-titleline h3 { margin: 0; font-size: clamp(28px, 3.3vw, 40px); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
      .status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); letter-spacing: .035em; }
      .status::before { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); content: ""; }
      .tool-content p { max-width: 650px; margin: 10px 0 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }
      .tool-article-link { display: inline-flex; min-height: 36px; align-items: center; margin-top: 5px; color: var(--muted); font-size: 14px; font-weight: 620; text-decoration-color: var(--s-accent); text-underline-offset: 4px; }
      .tool-article-link:hover { color: var(--s-accent); }
      .tool-open { display: inline-flex; min-height: 44px; justify-self: end; align-items: center; gap: 15px; padding: 10px 17px; border: 1px solid var(--s-ink); text-decoration: none; font-size: 14px; font-weight: 650; transition: background .18s ease, color .18s ease, border-color .18s ease; }
      .tool-open:hover { border-color: var(--s-ink); background: var(--s-ink); color: var(--s-paper); }
      .tool-open span { color: var(--s-accent); font-size: 17px; transition: color .18s ease, transform .18s ease; }
      .tool-open:hover span { color: var(--ember-text); transform: translate(2px, -2px); }

      .planned-tools { display: grid; grid-template-columns: 1fr; }
      .planned-tool { display: grid; grid-template-columns: var(--s-tool-index-width) minmax(0, 1fr) 160px; align-items: center; gap: 14px var(--s-tool-gap); min-height: 104px; padding: 24px 0; border-bottom: 1px solid var(--s-line); }
      .planned-tool h3 { margin: 0; font-size: 18px; font-weight: 620; letter-spacing: -.01em; }
      .planned-tool p { margin: 3px 0 0; color: var(--s-muted); font-size: 15px; }
      .planned-tool .status { justify-self: end; min-width: 0; color: var(--muted); line-height: 1.7; white-space: normal; }
      .planned-tool .status::before { flex-shrink: 0; background: var(--muted); }

      .workflow { margin-top: clamp(76px, 10vw, 132px); padding: clamp(34px, 5vw, 62px) 0; background: var(--s-ink); color: var(--s-paper); }
      .workflow-inner { display: grid; grid-template-columns: .9fr 2fr; gap: clamp(35px, 8vw, 110px); align-items: start; }
      .workflow-title .eyebrow { margin: 2px 0 15px; color: var(--ink-on-light); }
      .workflow-title h2 { max-width: 360px; margin: 0; font-size: clamp(30px, 3.8vw, 44px); font-weight: 620; letter-spacing: -.01em; line-height: 1.25; }
      .workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--muted); }
      .workflow-step { padding: 17px 16px 0 0; }
      .workflow-step .index { color: var(--ember-text); }
      .workflow-step h3 { margin: 15px 0 7px; font-size: 15px; font-weight: 620; }
      .workflow-step p { margin: 0; color: var(--ink-on-light); font-size: 14px; line-height: 1.75; text-wrap: pretty; }

      .community-public { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); align-items: center; gap: clamp(26px, 6vw, 76px); padding-top: clamp(42px, 6vw, 72px); padding-bottom: clamp(42px, 6vw, 72px); border-bottom: 1px solid var(--s-line); }
      .community-public-copy { max-width: 78ch; }
      .community-public-copy .eyebrow { margin: 0 0 8px; }
      .community-public-copy h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }
      .community-public-copy > p:last-child { margin: 0; color: var(--s-muted); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
      .community-stats { display: grid; gap: 5px; min-width: 0; padding: 15px 18px; border: 1px solid var(--s-line); background: transparent; }
      .community-stats-heading { font-size: 13px; font-weight: 650; }
      .community-stats-count, .community-stats-state { margin: 0; color: var(--s-ink); font-size: 20px; font-weight: 650; line-height: 1.35; }
      .community-stats-environment { color: var(--s-accent); font-size: 12px; }
      .community-stats-breakdown { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; padding: 0; color: var(--s-muted); font-size: 12px; list-style: none; }

      .guide-callout { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 0 58px; }
      .guide-callout p { margin: 0; color: var(--muted); font-size: 15px; }
      .guide-callout a { display: inline-flex; min-height: 44px; align-items: center; flex: none; color: var(--s-ink); font-size: 14px; font-weight: 650; text-decoration-color: var(--s-accent); text-underline-offset: 5px; }
      .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
      .footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
      .footer-domain { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 650; text-decoration: none; }
      .footer-guide { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; text-underline-offset: 4px; }
      .footer-meta { color: var(--s-muted); font-weight: 500; letter-spacing: .025em; }

      @media (min-width: 761px) and (max-width: 980px) {
        .hero-heading { grid-template-columns: 1fr; gap: 24px; }
        .hero-note { max-width: 520px; }
        h1 { font-size: clamp(64px, 9vw, 86px); }
        .workflow-inner { grid-template-columns: 1fr; gap: 28px; }
        .community-public { grid-template-columns: 1fr; gap: 21px; }
      }
      @media (max-width: 760px) {
        :root { --s-gutter: 22px; --s-tool-index-width: 32px; --s-tool-gap: 12px; }
        .site-header { height: 66px; }
        .brand-mark { width: 29px; height: 21px; }
        .brand-name { font-size: 18px; }
        .hero { padding-top: 42px; }
        .hero-heading { grid-template-columns: 1fr; gap: 22px; padding-bottom: 27px; }
        .hero-heading .eyebrow { margin-bottom: 14px; }
        h1 { max-width: 620px; font-size: clamp(40px, 10vw, 72px); letter-spacing: -.01em; line-height: 1.12; }
        .hero-note { max-width: 420px; margin-left: 2px; }
        .hero-note p { font-size: 15px; }
        .hero-note a { margin-top: 12px; }
        .photo-window { height: auto; aspect-ratio: 3 / 2; }
        .photo-window img { object-position: 50% 50%; }
        .photo-mark { top: 16px; left: 16px; }
        .photo-number { right: 16px; bottom: 14px; }
        .photo-caption { font-size: 12px; }
        .tool-index { padding-top: 74px; }
        .featured-tool { grid-template-columns: var(--s-tool-index-width) minmax(0, 1fr); gap: 10px var(--s-tool-gap); padding: 24px 0 25px; }
        .tool-number { font-size: 12px; }
        .tool-titleline h3 { font-size: 30px; }
        .tool-content p { font-size: 15px; }
        .tool-open { grid-column: 2; justify-self: start; margin-top: 8px; padding: 11px 14px; }
        .planned-tools { grid-template-columns: 1fr; column-gap: 0; }
        .planned-tool { grid-template-columns: var(--s-tool-index-width) minmax(0, 1fr); min-height: 86px; }
        .planned-tool .status { grid-column: 2; justify-self: start; }
        .workflow { margin-top: 82px; padding: 38px 0 42px; }
        .workflow-inner { grid-template-columns: 1fr; gap: 28px; }
        .workflow-title h2 { max-width: 440px; }
        .workflow-step h3 { font-size: 15px; }
        .guide-callout { align-items: flex-start; flex-direction: column; gap: 11px; padding: 24px 0 38px; }
        .footer-inner { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 12px 18px; }
      }
      @media (max-width: 600px) {
        .workflow-inner { gap: 25px; }
        .workflow-steps { grid-template-columns: 1fr; gap: 0; }
        .workflow-step {
          display: grid;
          grid-template-columns: 70px minmax(0, 1fr);
          grid-template-areas: "index title" ". description";
          column-gap: 12px;
          padding: 16px 0;
          border-bottom: 1px solid var(--muted);
        }
        .workflow-step .index { grid-area: index; }
        .workflow-step h3 { grid-area: title; margin: 0 0 3px; }
        .workflow-step p { grid-area: description; font-size: 15px; }
      }
      @media (max-width: 420px) {
        :root { --s-gutter: 20px; }
        .brand { gap: 7px; }
        .brand-mark { width: 26px; }
        .brand-name { font-size: 17px; }
        h1 { font-size: clamp(38px, 12vw, 52px); }
        .photo-caption { flex-wrap: wrap; gap: 2px 12px; }
        .section-heading p { max-width: 48%; font-size: 12px; text-align: right; }
        .planned-tool h3 { font-size: 16px; }
        .planned-tool p { font-size: 15px; }
        .planned-tool .status { font-size: 12px; }
        .workflow-step p { font-size: 15px; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
      }

.community-stats-details { margin-top: 8px; font-size: 12px; }
.community-stats-details summary { min-height: 32px; cursor: pointer; color: var(--s-muted); }

.firmware-store-entry { border-top: 1px solid var(--s-line); }
.firmware-store-status { color: var(--s-muted); font-size: 12px; font-weight: 600; letter-spacing: .035em; }
.firmware-store-status::before { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--s-accent); content: ""; }
.tool-content .prototype-detail { margin-top: 4px; color: var(--s-muted); font-size: 13px; }
.community-stats > a { display: inline-flex; min-height: 36px; align-items: center; color: var(--s-ink); font-size: 13px; font-weight: 650; text-decoration-color: var(--s-accent); text-underline-offset: 4px; }
.community-stats > a:hover { color: var(--s-accent); }

@media (max-width: 760px) {
}

/* ---- v2 components (homepage system): labels, pills, fields, dialogs, progress, errors ---- */
.eyebrow, .micro, .index, .status { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: lowercase; }
:where(button, input, select, textarea) { font-family: var(--font); }
:where(input[type='text'], input[type='search'], input[type='number'], input:not([type]), select, textarea) {
  border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--surface); color: var(--ink);
  transition: border-color var(--t-feedback) var(--ease-out);
}
:where(input, select, textarea):hover { border-color: var(--muted); }
:where(input, select, textarea):focus-visible { border-color: var(--amber); outline: none; }
input::file-selector-button { border: 1px solid var(--rule) !important; border-radius: 999px !important; background: transparent !important; color: var(--ink) !important; font-weight: 600; cursor: pointer; }
input::file-selector-button:hover { border-color: var(--muted) !important; }
:where(dialog) { border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); color: var(--ink); }
:where(dialog)::backdrop { background: color-mix(in srgb, #000 62%, transparent); }
:where(progress) { accent-color: var(--amber); }
:where(.is-error, [data-error='true']) { color: var(--ember-text); }