@layer reset, base, components;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select { font: inherit; }
  button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}
@layer base {
  :root { color-scheme: light dark; --bg: oklch(98% .007 155); --surface: oklch(100% 0 0); --ink: oklch(27% .025 175); --muted: oklch(49% .025 175); --line: oklch(89% .014 165); --accent: oklch(48% .085 173); --soft: oklch(94% .025 164); --orange-bg: oklch(94% .07 77); --orange-ink: oklch(42% .115 51); --red-bg: oklch(94% .04 24); --red-ink: oklch(44% .17 25); }
  body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; }
  a { color: var(--accent); text-underline-offset: 3px; }
  button, summary { cursor: pointer; }
  button:disabled, input:disabled { cursor: not-allowed; opacity: .6; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
  h1 { font-size: 24px; font-weight: 650; }
  h2 { font-size: 20px; font-weight: 650; }
  h3 { font-size: 16px; font-weight: 650; }
  p + p { margin-top: 12px; }
  input, select { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 9px 10px; min-height: 40px; max-width: 100%; }
  label { font-weight: 600; font-size: 13px; }
  button { border: 0; border-radius: 7px; padding: 10px 14px; font-weight: 600; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) { --bg: oklch(20% .014 175); --surface: oklch(25% .014 175); --ink: oklch(94% .012 160); --muted: oklch(74% .014 160); --line: oklch(36% .019 165); --accent: oklch(75% .105 169); --soft: oklch(31% .035 164); --orange-bg: oklch(35% .055 65); --orange-ink: oklch(87% .12 76); --red-bg: oklch(32% .062 24); --red-ink: oklch(85% .09 25); }
  }
  :root[data-color-mode="light"] { color-scheme: light; }
  :root[data-color-mode="dark"] { color-scheme: dark; --bg: oklch(20% .014 175); --surface: oklch(25% .014 175); --ink: oklch(94% .012 160); --muted: oklch(74% .014 160); --line: oklch(36% .019 165); --accent: oklch(75% .105 169); --soft: oklch(31% .035 164); --orange-bg: oklch(35% .055 65); --orange-ink: oklch(87% .12 76); --red-bg: oklch(32% .062 24); --red-ink: oklch(85% .09 25); }
}
@layer components {
  .primary { background: var(--accent); color: var(--surface); text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 7px; padding: 11px 16px; font-weight: 650; }
  .secondary { background: var(--soft); color: var(--accent); }
  .quiet { background: transparent; color: var(--muted); }
  .text-button { padding: 0; background: none; color: var(--accent); font-size: 13px; }
  .muted, .help { color: var(--muted); }
  .help { font-size: 12px; line-height: 1.6; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; font-weight: 750; color: var(--muted); }
  .notice { padding: 12px 14px; background: var(--soft); color: var(--ink); border-radius: 8px; font-size: 13px; margin-block: 18px; }
  .success-text { color: var(--accent); font-size: 13px; }
  .error { color: var(--red-ink); font-size: 13px; }
  .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; background: var(--soft); color: var(--ink); padding: 3px 8px; font-size: 12px; line-height: 1.6; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .badge::before { content: '◷'; font-size: 16px; line-height: 1; }
  .badge.green { background: var(--soft); color: var(--accent); }
  .badge.orange { background: var(--orange-bg); color: var(--orange-ink); }
  .badge.red { background: var(--red-bg); color: var(--red-ink); }
  .popup { background: var(--surface); padding: 18px; font-size: 14px; }
  .popup-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
  .popup-header h1 { font-size: 20px; margin-bottom: 6px; }
  .popup-header p { font-size: 13px; color: var(--muted); }
  .popup #phase { width: 100%; margin-top: 7px; }
  .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
  .section-heading h2 { font-size: 14px; letter-spacing: 0; }
  .unit-label { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); }
  .unit-label select { font-size: 12px; padding: 5px; min-height: 32px; }
  .threshold-row { display: grid; grid-template-columns: 10px 1fr 90px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  .threshold-row input { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .status-dot.orange { background: oklch(71% .16 58); }
  .status-dot.red { background: oklch(58% .2 25); }
  .field-help { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
  .preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--bg); padding: 12px; border-radius: 8px; margin: 18px 0 12px; }
  .preview .eyebrow { width: 100%; }
  .actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .footer-note { border-top: 1px solid var(--line); padding-top: 16px; margin: 20px 0 14px; }
  #form-message:empty { display: none; }
  details { margin-block: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
  summary { font-size: 13px; font-weight: 650; }
  .site { max-width: 1100px; margin: 0 auto; padding: 0 36px; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
  .topbar nav { display: flex; gap: 25px; font-size: 13px; }
  .topbar nav a { text-decoration: none; color: var(--muted); }
  .hero { display: grid; grid-template-columns: 1fr .72fr; gap: 55px; align-items: end; padding: 70px 0 45px; }
  .hero .eyebrow { color: var(--accent); margin-bottom: 22px; display: block; }
  .hero h1 { font-size: clamp(38px, 4.8vw, 58px); line-height: 1.07; letter-spacing: -.045em; font-weight: 650; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero p { color: var(--muted); font-size: 16px; max-width: 400px; }
  .hero .primary { margin-top: 25px; font-size: 13px; }
  .board-demo { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--soft); }
  .board-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; }
  .board-header h2 { font-size: 16px; }
  .board-header .help { font-size: 11px; }
  .board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .demo-column { min-width: 0; }
  .demo-column h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 5px 12px; font-size: 12px; letter-spacing: 0; }
  .count { font-size: 11px; color: var(--muted); font-weight: 400; }
  .task-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px; margin-top: 10px; min-height: 109px; box-shadow: 0 2px 1px oklch(25% .02 160 / .025); }
  .task-card p { font-size: 13px; margin: 8px 0 14px; }
  .task-tag { display: block; width: 32px; height: 4px; border-radius: 4px; background: var(--accent); opacity: .65; }
  .task-tag.alt { background: oklch(66% .08 280); }
  .demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
  .demo-toolbar button { font-size: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  .legend { display: flex; flex-wrap: wrap; gap: 15px; font-size: 11px; color: var(--muted); }
  .legend span { display: flex; align-items: center; gap: 6px; }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; padding: 44px 0 60px; }
  .features article { border-top: 1px solid var(--line); padding-top: 18px; }
  .features .eyebrow { display: block; margin-bottom: 14px; }
  .features p { color: var(--muted); font-size: 13px; margin-top: 10px; }
  .installation { display: grid; grid-template-columns: .7fr 1fr; gap: 60px; border-top: 1px solid var(--line); padding: 50px 0; }
  .installation h2 { font-size: 29px; }
  .installation p { color: var(--muted); margin-top: 15px; font-size: 14px; }
  .steps { margin: 0; padding-left: 20px; font-size: 14px; }
  .steps li { padding: 0 0 20px 10px; }
  .steps li::marker { color: var(--accent); font-weight: 700; }
  .steps strong { display: block; margin-bottom: 6px; }
  code { background: var(--soft); padding: 2px 5px; border-radius: 4px; font-size: 12px; overflow-wrap: anywhere; }
  .copy-field { display: flex; gap: 5px; margin-top: 10px; }
  .copy-field input { width: 100%; min-width: 0; font-size: 11px; color: var(--muted); }
  .copy-field button { font-size: 11px; }
  .site-footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; padding: 25px 0 35px; font-size: 12px; color: var(--muted); }
  .site-footer div { display: flex; gap: 20px; }
  dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 0; width: 440px; max-width: calc(100vw - 32px); box-shadow: 0 24px 100px oklch(10% 0 0 / .2); }
  dialog::backdrop { background: oklch(20% .025 170 / .42); }
  .dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
  .dialog-bar button { background: none; color: var(--ink); padding: 4px 9px; font-size: 20px; }
  dialog iframe { display: block; width: 100%; height: min(660px, 75vh); border: 0; }
  .document { max-width: 720px; margin: 0 auto; padding: 50px 28px; }
  .document h1 { margin: 25px 0; }
  .document h2 { margin: 25px 0 12px; font-size: 18px; }
  .document p, .document li { font-size: 14px; color: var(--muted); }
  @media (max-width: 700px) {
    .site { padding: 0 20px; }
    .topbar { padding: 20px 0; }
    .hero { grid-template-columns: 1fr; padding: 45px 0 30px; gap: 25px; }
    .hero h1 { font-size: 42px; }
    .board-columns { grid-template-columns: 1fr; }
    .features, .installation { grid-template-columns: 1fr; gap: 25px; }
    .board-demo { padding: 18px; }
    .features { padding: 35px 0; }
    .task-card { min-height: auto; }
  }
}