@font-face {
    font-family:"Nyv Fraunces";
    src:url("fonts/fraunces-latin.woff2") format("woff2");
    font-display:swap;
    font-style:normal;
    font-weight:100 900;
  }
  @font-face {
    font-family:"Nyv Inter";
    src:url("fonts/inter-latin.woff2") format("woff2");
    font-display:swap;
    font-style:normal;
    font-weight:100 900;
  }
  @font-face {
    font-family:"Nyv Mono";
    src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-display:swap;
    font-style:normal;
    font-weight:100 800;
  }
  :root {
    color-scheme: light dark;
    --paper:#f7f4ee; --paper-2:#f1ece2; --card:#fffdf9;
    --rule:#e4ddd0; --rule-2:#d8cfbe; --ink:#1a1714; --ink-2:#3e3831;
    --muted:#6e675c; --faint:#a79e90; --clay:#c4633d; --clay-ink:#ae522d;
    --clay-soft:#eeddd1; --sage:#4f7a55; --sage-soft:rgba(79,122,85,.10);
    --amber:#9c6a26; --amber-soft:rgba(156,106,38,.10);
    --danger:#b84e4a; --danger-soft:#f6e2df;
    --shadow:0 34px 64px -44px rgba(26,23,20,.45);
    --font-display:"Nyv Fraunces",Georgia,"Times New Roman",serif;
    --font-sans:"Nyv Inter","Segoe UI",system-ui,-apple-system,sans-serif;
    --font-mono:"Nyv Mono","Cascadia Mono",Consolas,monospace;
  }
  @media (prefers-color-scheme:dark) {
    :root {
      --paper:#191612; --paper-2:#211d17; --card:#232019; --rule:#372f26;
      --rule-2:#453c30; --ink:#f1ebdf; --ink-2:#d5cdbd; --muted:#a99e8c;
      --faint:#79705f; --clay:#e28c63; --clay-ink:#e9a07c; --clay-soft:#3a281e;
      --sage:#82be8b; --sage-soft:rgba(130,190,139,.12); --amber:#d8a054;
      --amber-soft:rgba(216,160,84,.12); --danger:#e27672; --danger-soft:#3a2220;
      --shadow:0 34px 64px -40px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"] {
    color-scheme:light;
    --paper:#f7f4ee; --paper-2:#f1ece2; --card:#fffdf9;
    --rule:#e4ddd0; --rule-2:#d8cfbe; --ink:#1a1714; --ink-2:#3e3831;
    --muted:#6e675c; --faint:#a79e90; --clay:#c4633d; --clay-ink:#ae522d;
    --clay-soft:#eeddd1; --sage:#4f7a55; --sage-soft:rgba(79,122,85,.10);
    --amber:#9c6a26; --amber-soft:rgba(156,106,38,.10);
    --danger:#b84e4a; --danger-soft:#f6e2df;
    --shadow:0 34px 64px -44px rgba(26,23,20,.45);
  }
  :root[data-theme="dark"] {
    color-scheme:dark;
    --paper:#191612; --paper-2:#211d17; --card:#232019; --rule:#372f26;
    --rule-2:#453c30; --ink:#f1ebdf; --ink-2:#d5cdbd; --muted:#a99e8c;
    --faint:#79705f; --clay:#e28c63; --clay-ink:#e9a07c; --clay-soft:#3a281e;
    --sage:#82be8b; --sage-soft:rgba(130,190,139,.12); --amber:#d8a054;
    --amber-soft:rgba(216,160,84,.12); --danger:#e27672; --danger-soft:#3a2220;
    --shadow:0 34px 64px -40px rgba(0,0,0,.7);
  }
  * { box-sizing:border-box; }
  html { background:var(--paper); -webkit-text-size-adjust:100%; }
  body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink-2); font-family:var(--font-sans); line-height:1.5; }
  ::selection { background:var(--clay-soft); color:var(--ink); }
  :focus-visible { outline:2px solid var(--clay); outline-offset:3px; border-radius:4px; }
  a { color:var(--clay-ink); text-decoration:none; }
  a:hover { color:var(--ink); }
  .topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(14px); }
  .topbar-in { max-width:1380px; min-height:72px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .lockup { display:flex; align-items:center; gap:11px; color:var(--ink); }
  .mark { width:32px; height:32px; flex:none; }
  .wordmark { font-family:var(--font-display); font-size:22px; letter-spacing:-.025em; line-height:1; }
  .wordmark i { color:var(--clay-ink); font-style:normal; }
  .product { padding-left:11px; border-left:1px solid var(--rule-2); color:var(--muted); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
  .environment { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid color-mix(in srgb,var(--amber) 38%,transparent); border-radius:99px; background:var(--amber-soft); color:var(--amber); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
  .environment::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--amber-soft); }
  .topbar-actions { display:flex; align-items:center; gap:10px; }
  .theme-toggle { min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--rule); border-radius:10px; background:var(--card); color:var(--muted); font:650 11px/1 var(--font-sans); cursor:pointer; }
  .theme-toggle:hover { border-color:var(--rule-2); color:var(--ink); }
  .theme-toggle svg { width:15px; height:15px; }
  .shell { max-width:1380px; margin:0 auto; padding:28px 28px 68px; }
  .shell-app { display:grid; grid-template-columns:224px minmax(0,1fr); gap:42px; align-items:start; }
  .sidebar { position:sticky; top:100px; min-height:calc(100vh - 138px); display:flex; flex-direction:column; padding:8px 0 0; }
  nav { display:grid; gap:6px; }
  nav a, nav button { min-height:44px; display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); font:600 12.5px/1 var(--font-sans); cursor:pointer; text-align:left; }
  nav a:hover, nav button:hover { border-color:var(--rule); background:var(--card); color:var(--ink); }
  nav a.on { border-color:var(--rule); background:var(--card); color:var(--ink); box-shadow:0 8px 24px -20px rgba(26,23,20,.45); }
  nav a.on::after { content:""; width:5px; height:5px; margin-left:auto; border-radius:50%; background:var(--clay); box-shadow:0 0 0 4px var(--clay-soft); }
  .nav-icon { width:17px; height:17px; flex:none; color:var(--faint); }
  nav a.on .nav-icon, nav a:hover .nav-icon { color:var(--clay-ink); }
  .account-panel { margin-top:auto; padding-top:24px; border-top:1px solid var(--rule); }
  .account-label { display:block; color:var(--faint); font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .account-name { display:block; margin-top:5px; color:var(--ink); font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .account-plan { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
  .logout-form { margin:12px 0 0; }
  .logout-form button { width:100%; min-height:38px; justify-content:center; padding:8px 10px; border:1px solid var(--rule); border-radius:9px; background:transparent; color:var(--clay-ink); font-weight:650; cursor:pointer; }
  .logout-form button:hover { background:var(--card); }
  .content { min-width:0; }
  main { min-width:0; min-height:calc(100vh - 210px); }
  .eyebrow { margin:0 0 10px; color:var(--clay-ink); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
  h1 { margin:0 0 18px; color:var(--ink); font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:400; letter-spacing:-.035em; line-height:1.05; }
  h3 { color:var(--ink); font-weight:600; }
  p { margin:0; }
  .lead { max-width:66ch; margin:-6px 0 24px; color:var(--muted); font-size:15px; }
  .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
  .page-head-copy { min-width:0; }
  .page-head h1 { margin-bottom:10px; }
  .page-head .lead { margin:0; }
  .service-state { flex:none; display:inline-flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--sage) 35%,transparent); border-radius:99px; background:var(--sage-soft); color:var(--sage); font:700 9px/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; }
  .service-state::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px var(--sage-soft); }
  .notice { display:flex; gap:12px; margin:0 0 22px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--amber) 34%,transparent); border-radius:12px; background:var(--amber-soft); color:var(--ink-2); font-size:13px; }
  .notice b { color:var(--amber); }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:12px; margin:18px 0; }
  .card { background:var(--card); border:1px solid var(--rule); border-radius:15px; padding:18px 19px; box-shadow:0 1px 2px rgba(26,23,20,.04); }
  .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; }
  .metric-card { min-height:132px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; overflow:hidden; position:relative; }
  .metric-card::after { content:""; position:absolute; right:-28px; bottom:-32px; width:92px; height:92px; border:1px solid var(--rule); border-radius:50%; opacity:.72; }
  .metric-card .n { position:relative; z-index:1; }
  .metric-card .l { max-width:22ch; position:relative; z-index:1; }
  .metric-card.accent { background:linear-gradient(145deg,var(--clay-soft),var(--card) 72%); border-color:color-mix(in srgb,var(--clay) 32%,var(--rule)); }
  .metric-card.success { background:linear-gradient(145deg,var(--sage-soft),var(--card) 72%); border-color:color-mix(in srgb,var(--sage) 28%,var(--rule)); }
  .overview-columns { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:14px; margin-top:14px; }
  .overview-panel { padding:22px; }
  .overview-panel h2 { margin:0 0 14px; color:var(--ink); font-family:var(--font-display); font-size:1.45rem; font-weight:450; letter-spacing:-.025em; }
  .status-list { display:grid; gap:12px; }
  .status-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:12px; border-bottom:1px solid var(--rule); font-size:12.5px; }
  .status-row:last-child { padding-bottom:0; border-bottom:0; }
  .status-row span:first-child { color:var(--muted); }
  .status-row strong { color:var(--ink); font-weight:650; text-align:right; }
  .card .n { color:var(--ink); font-family:var(--font-mono); font-size:1.35rem; font-weight:650; letter-spacing:-.03em; }
  .card .l { margin-top:7px; color:var(--faint); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.13em; line-height:1.5; text-transform:uppercase; }
  table { width:100%; border-spacing:0; border:1px solid var(--rule); border-radius:14px; background:var(--card); overflow:hidden; font-size:.86rem; }
  th { padding:11px 13px; border-bottom:1px solid var(--rule); background:var(--paper-2); color:var(--faint); font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-align:left; text-transform:uppercase; }
  td { padding:11px 13px; border-bottom:1px solid var(--rule); color:var(--ink-2); }
  tr:last-child td { border-bottom:none; }
  tbody tr:hover td { background:color-mix(in srgb,var(--paper-2) 60%,transparent); }
  .ok { color:var(--sage)!important; } .warn { color:var(--amber)!important; } .muted { color:var(--muted)!important; }
  .login { max-width:440px; margin:7vh auto 0; }
  .login-card { padding:30px; border:1px solid var(--rule); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
  .login h1 { font-size:36px; }
  label { display:block; color:var(--muted); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
  input[type=password], input[type=text] { width:100%; margin-top:7px; padding:12px 14px; border:1px solid var(--rule-2); border-radius:10px; background:var(--paper); color:var(--ink); font:1rem var(--font-sans); }
  button.primary { width:100%; margin-top:14px; padding:12px; border:0; border-radius:10px; background:var(--clay); color:#fff; font-size:.95rem; font-weight:700; cursor:pointer; }
  button.primary:hover { background:var(--clay-ink); }
  button.primary:disabled { opacity:.58; cursor:wait; }
  .secondary { width:100%; margin-top:10px; padding:11px 12px; border:1px solid var(--rule-2); border-radius:10px; background:var(--paper); color:var(--ink); font-size:.92rem; font-weight:650; cursor:pointer; }
  .secondary:hover { border-color:var(--clay); color:var(--clay-ink); }
  .secondary:disabled { opacity:.58; cursor:wait; }
  .passkey-status { margin-top:11px; color:var(--muted); font-size:.84rem; }
  .passkey-status.err { color:var(--danger); }
  .passkey-list { display:grid; gap:10px; margin:18px 0 26px; }
  .passkey-item { padding:15px; border:1px solid var(--rule); border-radius:12px; background:var(--paper); }
  .passkey-item-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .passkey-item h3 { margin:0; font-size:.98rem; }
  .passkey-meta { margin-top:6px; color:var(--muted); font-size:.8rem; }
  .passkey-revoke { display:grid; grid-template-columns:1fr 150px auto; gap:8px; align-items:end; margin-top:13px; }
  .passkey-revoke button { min-height:42px; padding:8px 12px; border:1px solid color-mix(in srgb,var(--danger) 45%,transparent); border-radius:9px; background:var(--danger-soft); color:var(--danger); font-weight:700; cursor:pointer; }
  .recovery-divider { display:flex; align-items:center; gap:10px; margin:20px 0 14px; color:var(--faint); font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
  .recovery-divider::before, .recovery-divider::after { content:""; height:1px; flex:1; background:var(--rule); }
  .secret-box { margin:14px 0; padding:13px; border:1px dashed var(--rule-2); border-radius:10px; background:var(--paper); color:var(--ink); font:600 .9rem/1.6 var(--font-mono); overflow-wrap:anywhere; user-select:all; }
  .recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; padding:0; list-style:none; }
  .recovery-codes code { display:block; padding:9px 10px; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); font:.82rem var(--font-mono); text-align:center; user-select:all; }
  .err { margin:14px 0; padding:11px 13px; border:1px solid color-mix(in srgb,var(--danger) 42%,transparent); border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:.88rem; }
  .foot { margin-top:46px; padding-top:20px; border-top:1px solid var(--rule); color:var(--faint); font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; }
  .badge-adm { padding:3px 8px; border:1px solid color-mix(in srgb,var(--clay) 35%,transparent); border-radius:99px; background:var(--clay-soft); color:var(--clay-ink); font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .prose { line-height:1.7; }
  .mt-6 { margin-top:6px; }
  .mt-10 { margin-top:10px; }
  .mt-12 { margin-top:12px; }
  .mt-14 { margin-top:14px; }
  .mt-16 { margin-top:16px; }
  .mb-6 { margin-bottom:6px; }
  .mb-10 { margin-bottom:10px; }
  .text-82 { font-size:.82rem; }
  .text-85 { font-size:.85rem; }
  .text-86 { font-size:.86rem; }
  input.input-search { margin:6px 0 12px; }
  input.input-product { margin:6px 0 4px; }
  .primary-link { display:block; padding:12px; border-radius:10px; background:var(--clay); color:#fff; text-align:center; font-weight:700; }
  .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .form-grid .wide { grid-column:1/-1; }
  select, input[type=email], input[type=tel] { width:100%; margin-top:7px; padding:12px 14px; border:1px solid var(--rule-2); border-radius:10px; background:var(--paper); color:var(--ink); font:1rem var(--font-sans); }
  input[type=checkbox] { width:17px; height:17px; accent-color:var(--clay); }
  .checkline { display:flex; align-items:center; gap:9px; margin-top:12px; color:var(--ink-2); font-size:.9rem; }
  .checkline label { display:inline; color:inherit; font:inherit; letter-spacing:0; text-transform:none; }
  .inline-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .inline-actions form { display:inline; margin:0; }
  .mini-button { min-height:34px; padding:7px 10px; border:1px solid var(--rule-2); border-radius:8px; background:var(--paper); color:var(--ink-2); font-size:.78rem; font-weight:650; cursor:pointer; }
  .mini-button:hover { border-color:var(--clay); color:var(--clay-ink); }
  .mini-button.danger { border-color:color-mix(in srgb,var(--danger) 35%,transparent); color:var(--danger); }
  .status-pill { display:inline-flex; justify-self:start; padding:3px 8px; border:1px solid var(--rule); border-radius:99px; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .status-active { border-color:color-mix(in srgb,var(--sage) 40%,transparent); background:var(--sage-soft); color:var(--sage); }
  .status-paused { border-color:color-mix(in srgb,var(--amber) 40%,transparent); background:var(--amber-soft); color:var(--amber); }
  .product-url { display:block; max-width:360px; overflow:hidden; color:var(--muted); font-family:var(--font-mono); font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
  .monitor-meta { display:grid; gap:4px; min-width:220px; }
  .monitor-meta small { color:var(--muted); font-size:.75rem; line-height:1.35; white-space:normal; }
  .evidence-ref { color:var(--faint); font-family:var(--font-mono); font-size:.68rem; }
  .event-selected td { background:color-mix(in srgb,var(--clay-soft) 55%,var(--card)); }
  .section-title { margin:28px 0 12px; font-family:var(--font-display); font-size:1.55rem; font-weight:400; }
  .upsell { border-color:color-mix(in srgb,var(--clay) 30%,var(--rule)); background:color-mix(in srgb,var(--clay-soft) 35%,var(--card)); }
  @media (max-width:980px) {
    .shell-app { grid-template-columns:190px minmax(0,1fr); gap:24px; }
    .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:760px) {
    .topbar-in { min-height:62px; padding:0 16px; }
    .product { padding-left:8px; font-size:7px; letter-spacing:.12em; }
    .environment { font-size:8px; padding:6px 9px; }
    .theme-toggle [data-theme-label] { display:none; }
    .shell { padding:0 16px 48px; }
    .shell-app { display:flex; flex-direction:column; gap:22px; }
    .sidebar { width:calc(100% + 32px); min-height:0; position:sticky; top:62px; z-index:15; margin-left:-16px; padding:9px 16px; border-bottom:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 93%,transparent); backdrop-filter:blur(14px); overflow-x:auto; scrollbar-width:none; }
    .sidebar::-webkit-scrollbar { display:none; }
    nav { display:flex; min-width:max-content; gap:5px; }
    nav a { min-height:38px; padding:8px 10px; }
    nav a.on::after { display:none; }
    .nav-icon { width:15px; height:15px; }
    .account-panel { display:none; }
    .content { width:100%; }
    .page-head { align-items:flex-start; flex-direction:column; gap:14px; }
    .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .metric-card { min-height:118px; padding:16px; }
    .overview-columns { grid-template-columns:1fr; }
    h1 { font-size:34px; }
    .login { margin-top:4vh; }
    .login-card { padding:24px 20px; }
    .recovery-codes { grid-template-columns:1fr; }
    .passkey-revoke { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    table { display:block; overflow-x:auto; white-space:nowrap; }
    table.responsive-stack { display:block; overflow:visible; border:0; background:transparent; white-space:normal; }
    table.responsive-stack tbody { display:grid; gap:12px; }
    table.responsive-stack tr { display:grid; border:1px solid var(--rule); border-radius:13px; background:var(--card); overflow:hidden; }
    table.responsive-stack tr:first-child { display:none; }
    table.responsive-stack td { display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:start; padding:13px 14px; border-bottom:1px solid var(--rule); white-space:normal; }
    table.responsive-stack td:last-child { border-bottom:0; }
    table.responsive-stack td::before { content:attr(data-label); color:var(--faint); font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.11em; line-height:1.5; text-transform:uppercase; }
    table.responsive-stack .product-url { max-width:100%; }
    table.responsive-stack .monitor-meta { min-width:0; }
    table.responsive-stack .inline-actions { min-width:0; }
    table.responsive-stack select { margin-top:0; }
  }
  @media (max-width:440px) {
    .wordmark { font-size:20px; }
    .mark { width:29px; height:29px; }
    .environment { display:none; }
    .metric-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .metric-card .n { font-size:1.15rem; }
    .metric-card .l { font-size:8px; }
  }