@layer reset, tokens, layout, components, utilities;

@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; border-radius: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  html { background: var(--ground); }
  h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
  dialog { padding: 0; border: 0; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --ground: light-dark(#EDEDE8, #030406);
    --surface: light-dark(#F7F7F3, #07090D);
    --raised: light-dark(#E6E6E0, #0C1017);
    --line: light-dark(#D6D6CE, #1B2230);
    --line-2: light-dark(#BDBDB3, #2A3345);
    --field-border-3to1: light-dark(#8A8A80, #4A5568);
    --ink: light-dark(#0A0D13, #E8ECF2);
    --ink-2: light-dark(#3A3F4A, #A8B0BE);
    --ink-3: light-dark(#575C67, #7D8696);
    --signal: light-dark(#AE3C14, #FF8A5C);
    --signal-bg: #FF8A5C;
    --signal-ink: #0A0D13;
    --warn: light-dark(#8A5200, #F5B841);
    --bad: light-dark(#B83224, #FF6B6B);
    --ok: light-dark(#067352, #3DDC97);
    --info: light-dark(#086C72, #5CE1E6);
    --c-eth: light-dark(#5B6CF0, #8C9BFF);
    --c-base: light-dark(#1E8FE0, #4DB8FF);
    --c-arb: light-dark(#A87A00, #F2C94C);
    --c-op: light-dark(#D6456B, #FF7A9A);
    --c-rh: light-dark(#8A5CD6, #B794F6);
    --c-sol: light-dark(#0FA67A, #2FE0A8);
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --gutter: 12px;
    --row-bleed: 12px;
  }
  @media (min-width: 960px) { :root { --gutter: 24px; } }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

@layer layout {
  html { font-size: 17px; }
  @supports (font: -apple-system-body) { html { font: -apple-system-body; } }
  body {
    background: var(--ground); color: var(--ink); font-family: var(--mono); font-size: 0.7941rem; line-height: 1.45;
    font-variant-numeric: tabular-nums; min-height: 100dvh; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .app { min-height: 100dvh; max-width: 600px; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; overflow-x: clip; }
  .side { display: none; }
  .view { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .view > * { min-width: 0; display: block; }
  .tabs {
    position: fixed; inset: auto 0 0 0; z-index: 20; display: flex;
    max-width: 600px; margin: 0 auto; background: var(--raised);
    border-top: 1px solid var(--line); padding: 0 0 env(safe-area-inset-bottom, 0px);
  }
  @media (min-width: 601px) { .app { border-inline: 1px solid var(--line); } }
  @media (min-width: 960px) {
    .app { max-width: 1200px; display: grid; grid-template-columns: 280px minmax(0, 1fr); border-inline: 1px solid var(--line); background: var(--ground); }
    .side {
      display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
      padding: 0 0 12px; border-right: 1px solid var(--line); background: var(--surface);
    }
    .view { padding: 0; background: var(--surface); }
    .tabs { display: none; }
  }
}

@layer components {
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
  ::selection { background: var(--signal-bg); color: var(--signal-ink); }
  .label, .hero small, .seg button { text-transform: lowercase; }
  .label.keep, .hero small .link { text-transform: none; }
  .label { font-size: 0.6471rem; font-weight: 400; color: var(--ink-3); }
  .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
  .ic-sm { width: 14px; height: 14px; }
  .mark { width: 18px; height: 18px; color: var(--ink); flex: none; }
  #mark .planet { fill: var(--planet, var(--signal)); }
  #mark .knock { fill: var(--knock, var(--raised)); }

  .bar {
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-height: calc(38px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(var(--gutter) - 8px) 0 var(--gutter);
    border-bottom: 1px solid var(--line); background: var(--raised);
  }
  .bar-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .bar-r { display: flex; align-items: center; }
  .bar h1, .bar h2 { font-size: 0.7941rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .bar-sub { font-size: 0.7059rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar .ib:first-child { margin-left: -8px; }
  .back { display: inline-flex; align-items: center; gap: 0; min-height: 36px; margin-left: -6px; padding-right: 4px; color: var(--signal); text-decoration: none; font-size: 0.7941rem; white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 55%; }
  .back-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bar-l > h2 { flex: none; }
  .back .ic { width: 18px; height: 18px; }
  .back:active { opacity: .5; }
  .ib {
    width: 36px; height: 36px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2); text-decoration: none; flex: none;
  }
  @media (hover: hover) { .ib:hover { background: var(--line); color: var(--ink); } }
  .ib:disabled { opacity: .4; cursor: default; background: none; }
  .ib.spin .ic { animation: spin 1s steps(8) infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .hero { padding: 10px var(--gutter) 2px; display: flex; flex-direction: column; gap: 1px; }
  .hero small { color: var(--ink-3); font-size: 0.6765rem; display: flex; align-items: center; gap: 8px; }
  .addr + .big, small + .big { margin-top: 2px; }

  .big { font-size: 1.8824rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
  .meta { font-size: 0.6765rem; color: var(--ink-3); }
  .live { display: contents; }
  .big.dim { color: var(--ink-3); }
  .tag.safe { color: var(--info); }
  .finding .mk { width: 1.5ch; flex: none; font-weight: 700; line-height: 1.0588rem; }
  .finding .rm b { white-space: normal; }
  details.passed > summary.row { min-height: 38px; }
  details.passed[open] > summary .sub { display: none; }
  details.passed > div.finding { padding-left: 1.5ch; }
  .finding.risk .mk { color: var(--bad); }
  .finding.check .mk { color: var(--warn); }
  .finding.info .mk { color: var(--ink-3); }
  .finding.ok .mk { color: var(--ok); }
  .sub.warn { color: var(--warn); }
  .re > .link { align-self: flex-end; }
  .list > details.tx:last-child:not([open]) > summary.row { border-bottom: 0; }
  .tx > summary .rm b { white-space: normal; }
  .tx > summary .re { max-width: 48%; overflow-wrap: anywhere; }
  .list.nested { padding: 0 0 0 12px; border-left: 1px solid var(--line); }
  .txd { display: grid; gap: 1px; padding: 6px 0 10px; font-size: 0.7059rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .list > details.tx:last-child > .txd { border-bottom: 0; }
  .txd .kv > :last-child { min-width: 0; }
  .txd small { color: var(--ink-3); font-size: inherit; }
  .txlinks { display: flex; gap: 14px; padding-top: 4px; font-size: 0.6765rem; }
  .txlinks a { color: var(--signal); text-decoration: none; }
  .desk-only { display: none !important; }
  @media (min-width: 1024px) { .desk-only { display: inline-flex !important; } }

  .sim { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gutter) 24px; min-width: 0; }
  .sim-head h2 { font-size: 1rem; font-weight: 600; }
  .sim-head h2 .num { color: var(--ink-2); font-weight: 400; }
  .sim-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 12px; align-items: start; }
  .trace { border: 1px solid var(--line); font-size: 0.7059rem; overflow: auto; max-height: 72vh; padding: 4px 0; }
  .fr, .lg { display: flex; align-items: baseline; gap: 4px; min-height: 22px; padding: 0 8px 0 4px; white-space: nowrap; }
  .lg { gap: 0; margin-left: 14px; }
  .fr:hover { background: var(--raised); }
  .kids { margin-left: 13px; border-left: 1px solid var(--line); }
  .caret { width: 14px; flex: none; border: 0; background: none; color: var(--ink-3); padding: 0; cursor: pointer; }
  .cl { display: flex; align-items: baseline; flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; overflow: hidden; }
  .cl:focus-visible { outline: 1px solid var(--signal); }
  .fr .to, .lg .to { color: var(--info); }
  .fr b, .lg b { font-weight: 600; }
  .fr .args, .lg .args { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .fr .val { color: var(--warn); flex: none; }
  .fr .err { flex: none; }
  .fr.bad b { color: var(--bad); }
  .ty { font-size: 0.6471rem; line-height: 1.4; padding: 0 3px; margin-right: 6px; border: 1px solid currentColor; color: var(--ink-3); flex: none; }
  .ty.call { color: var(--signal); }
  .ty.delegatecall { color: var(--warn); }
  .ty.create, .ty.create2 { color: var(--ok); }
  .ty.log { color: var(--info); }
  .gas { margin-left: auto; padding-left: 12px; color: var(--ink-3); flex: none; }
  .insp { position: sticky; top: calc(48px + env(safe-area-inset-top, 0px)); border: 1px solid var(--line); padding: 8px 10px; font-size: 0.7059rem; max-height: 76vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .insp .ih { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
  .insp .ih span { color: var(--ink-3); font-size: 0.6176rem; }
  .insp .kv { grid-template-columns: 8ch 1fr; }
  .insp .kv > :last-child { min-width: 0; overflow-wrap: anywhere; }
  .insp small { color: var(--ink-3); }
  .insp h4 { margin: 8px 0 2px; }
  .insp .ev { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; border-top: 1px solid var(--line); }
  ul.args { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  ul.args li { overflow-wrap: anywhere; }
  .an { color: var(--ink); }
  .at { color: var(--ink-3); font-size: 0.6176rem; }
  .av { color: var(--ink-2); }
  pre.raw { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--ink-3); font: inherit; font-size: 0.6176rem; max-height: 160px; overflow: auto; }
  table.chg { width: 100%; border-collapse: collapse; font-size: 0.7059rem; }
  .chg th { text-align: left; color: var(--ink-3); font-weight: 400; }
  .chg td, .chg th { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
  .chg td.num, .chg th:last-child { text-align: right; }
  .pos { color: var(--ok); }
  .sim textarea { min-height: 96px; }
  details.abis > summary { display: flex; align-items: center; gap: 8px; }
  details.abis > summary::after { content: "[+]"; color: var(--ink-3); font-size: 0.6765rem; }
  details.abis[open] > summary::after { content: "[−]"; }
  details.abis > summary .num { margin-left: auto; font-size: 0.6765rem; color: var(--ink-3); }
  .sim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sim-head .acts { display: flex; gap: 8px; flex: none; }
  .sim .card { border: 1px solid var(--line); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .overview { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px !important; font-size: 0.7059rem; }
  .okv { display: grid; grid-template-columns: 11ch 1fr; gap: 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
  .okv .k, .raw-in .k { color: var(--ink-3); }
  .raw-in { grid-column: 1 / -1; }
  .raw-in > summary { min-height: 22px; }
  .pill { display: inline-block; padding: 0 6px; border: 1px solid currentColor; font-weight: 600; }
  .pill.ok { color: var(--ok); }
  .pill.bad { color: var(--bad); }
  .role { color: var(--ink-3); margin-right: 1ch; }
  .tabs-x { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
  .tabs-x button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 6px 12px; color: var(--ink-3); font-size: 0.7353rem; cursor: pointer; margin-bottom: -1px; }
  .tabs-x button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); font-weight: 600; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .tt { display: flex; flex-direction: column; font-size: 0.7059rem; }
  .ttr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
  .ttr:last-child { border-bottom: 0; }
  .ttr .k { color: var(--ink-3); }
  .trace-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .trace-head .search { flex: 1; min-width: 200px; max-width: 360px; min-height: 28px; padding: 0 8px; border: 1px solid var(--line-2); background: var(--raised); font-size: 0.7059rem; }
  .trace-head small { color: var(--ink-3); font-size: 0.6765rem; }
  .togs { display: flex; gap: 12px; margin-left: auto; font-size: 0.6765rem; color: var(--ink-2); }
  .tog { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .fr.hit { background: color-mix(in srgb, var(--signal) 14%, transparent); }
  .fr .ret { color: var(--ok); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .evs { display: flex; flex-direction: column; }
  .evr, .st { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.7059rem; }
  .evr:last-child, .st:last-child { border-bottom: 0; }
  .evr.dim { opacity: .55; }
  .evh { display: flex; gap: 8px; align-items: baseline; }
  .evh .to { color: var(--info); }
  .evh small { color: var(--ink-3); }
  table.args { border-collapse: collapse; margin-top: 3px; font-size: 0.6765rem; }
  table.args td { padding: 1px 12px 1px 0; vertical-align: top; overflow-wrap: anywhere; }
  .gp { display: flex; flex-direction: column; gap: 3px; font-size: 0.7059rem; }
  .gpr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 3fr) 18ch; gap: 10px; align-items: center; }
  .gpn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gpr .num { text-align: right; color: var(--ink-3); }
  .gpr progress { width: 100%; height: 8px; appearance: none; border: 0; background: var(--line); }
  .gpr progress::-webkit-progress-bar { background: var(--line); }
  .gpr progress::-webkit-progress-value { background: var(--signal-bg); }
  .gpr progress::-moz-progress-bar { background: var(--signal-bg); }
  .hero small .link { font-weight: 400; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
  a.gh-link { text-decoration: none; color: inherit; }
  a.gh-link .label { color: var(--ink-2); }
  .tag { font-size: 0.6176rem; line-height: 0.9412rem; padding: 0 5px; color: var(--warn); border: 1px solid currentColor; }

  .seg { margin: 8px var(--gutter) 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); }
  .seg button { min-height: 36px; border: 0; background: none; color: var(--ink-3); font-size: 0.7353rem; }
  .seg button + button { border-left: 1px solid var(--line-2); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 600; }

  .list { padding: 0 var(--gutter); display: flex; flex-direction: column; }
  .gh { padding: 10px var(--gutter) 0; display: flex; align-items: center; gap: 8px; }
  .gh::after { content: ""; flex: 1; order: 1; border-top: 1px solid var(--line); }
  .gh .num { order: 2; font-size: 0.6765rem; color: var(--ink-3); }
  .row {
    display: flex; align-items: center; gap: 8px; min-height: 38px; padding-block: 4px; border: 0; border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit; background: none; width: 100%; text-align: left;
  }
  .row:last-child { border-bottom: 0; }
  a.row:active, button.row:active, summary.row:active { background: var(--raised); box-shadow: calc(var(--row-bleed) * -1) 0 0 var(--raised), var(--row-bleed) 0 0 var(--raised); }
  @media (hover: hover) { a.row:hover, button.row:hover, summary.row:hover { background: var(--raised); box-shadow: calc(var(--row-bleed) * -1) 0 0 var(--raised), var(--row-bleed) 0 0 var(--raised); } }
  .rm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.35; text-align: left; }
  .rm b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub { font-size: 0.6765rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .row > .rm > .sub:has(> .dot, > .dots) { flex-wrap: nowrap; align-items: baseline; }
  .row > .rm > .sub > span:last-child { min-width: 0; }
  .re { text-align: right; display: flex; flex-direction: column; gap: 0; flex: none; max-width: 55%; }
  .row:has(> .re) { align-items: flex-start; }
  .ai { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; background-color: #000; background-repeat: no-repeat; border: 1px solid var(--line); }
  .ai.tk { font-size: 0.5294rem; font-weight: 700; font-style: normal; letter-spacing: -.03em; color: #A8B0BE; overflow: hidden; }
  .row:has(.sub) > .val { align-self: flex-start; line-height: 1.0588rem; }
  a.row .val::after { content: " ›"; color: var(--ink-3); }
  .rm b, .re > :first-child { line-height: 1.0588rem; }
  .sub, .re small { line-height: 0.9412rem; }
  .re small { font-size: 0.6765rem; color: var(--ink-3); }
  details.small > summary.row { cursor: pointer; border-bottom: 1px solid var(--line); }
  details.small > summary b::after { content: " [+]"; color: var(--ink-3); font-weight: 400; }
  details.small[open] > summary b::after { content: " [−]"; }
  details.small:last-child > summary.row { border-bottom: 0; }
  details.small[open]:last-child > summary.row { border-bottom: 1px solid var(--line); }
  fieldset.field { border: 0; padding: 0; margin: 0; }
  fieldset.chains-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  fieldset.chains-set legend { padding: 0; margin-bottom: 2px; }
  label.check { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 0.7353rem; }
  label.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--signal-bg); }
  .btns.three { grid-template-columns: 1fr 1fr 1fr; }
  .dot { width: 7px; height: 7px; flex: none; display: inline-block; background: var(--ink-3); }
  .dots { display: inline-flex; gap: 2px; }
  .c-eth { --c: var(--c-eth); } .c-base { --c: var(--c-base); } .c-arb { --c: var(--c-arb); } .c-op { --c: var(--c-op); } .c-rh { --c: var(--c-rh); } .c-sol { --c: var(--c-sol); }
  .dot[class*="c-"] { background: var(--c); }
  .warn { color: var(--warn); }
  .neg { color: var(--bad); }

  .picker { min-height: 28px; display: inline-flex; align-items: center; padding: 0 6px 0 8px; border: 1px solid var(--line-2); font-size: 0.7647rem; font-weight: 600; position: relative; min-width: 0; max-width: 60vw; }
  .picker select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; color: inherit; padding: 4px 18px 4px 0; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  .picker .ic { position: absolute; right: 6px; pointer-events: none; }
  .addr { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .addr .num { font-size: 0.7059rem; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; flex: 1; }
  .pill { min-height: 26px; padding: 0 6px; border: 1px solid var(--line-2); background: none; font-size: 0.6471rem; color: var(--ink-2); flex: none; }
  @media (hover: hover) { .pill:hover { color: var(--ink); border-color: var(--ink-3); } }

  .chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px var(--gutter) 0; }
  .chip { flex: none; min-height: 32px; padding: 0 8px; border: 1px solid var(--line-2); background: none; font-size: 0.7059rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .chip .num { font-size: 0.6471rem; opacity: .8; }
  .chip.failed { border-style: dashed; }

  .banner { margin: 8px var(--gutter) 0; padding: 6px 8px; border: 1px solid var(--line); border-left: 2px solid var(--info); font-size: 0.7059rem; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
  .banner .ic { width: 14px; height: 14px; margin-top: 2px; color: var(--info); }
  .banner.alert { border-left-color: var(--warn); }
  .banner.alert .ic { color: var(--warn); }
  .banner b { color: var(--ink); font-weight: 600; }
  .banner .grow { flex: 1; min-width: 0; }
  .banner button.link { padding: 4px 0; min-height: 28px; margin-block: -4px; }
  .gh .gh-act { order: 2; font-size: 0.6765rem; padding: 4px 0; }
  .sw-row { cursor: pointer; }
  .link { border: 0; background: none; color: var(--signal); font-weight: 600; font-size: inherit; text-decoration: none; min-height: 0; }
  .link:hover { text-decoration: underline; }

  .form { display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gutter); }
  .field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .field label, .field .lbl { font-size: 0.6765rem; color: var(--ink-3); }
  .field :is(input:not([type="checkbox"]), textarea, select) {
    border: 1px solid var(--field-border-3to1); background: var(--raised); color: var(--ink); padding: 8px 10px; font: 0.7941rem var(--mono); width: 100%; min-width: 0; resize: vertical;
  }
  .field input:not([type="checkbox"]) { min-height: 36px; padding-block: 0; }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
  .field input:focus, .field textarea:focus { outline: 2px solid var(--signal); outline-offset: -1px; border-color: var(--signal); }
  .hint { font-size: 0.6765rem; color: var(--ink-3); }
  .err { font-size: 0.7059rem; color: var(--bad); }
  details > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details > summary .ic { transition: transform .15s; }
  details[open] > summary .ic { transform: rotate(90deg); }
  .btn { min-height: 36px; border: 1px solid var(--signal-bg); background: var(--signal-bg); color: var(--signal-ink); font-size: 0.7647rem; font-weight: 600; padding: 0 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .btn:disabled { background: none; color: var(--ink-3); border: 1px dashed var(--line-2); cursor: default; }
  .btn.ghost { background: none; border-color: var(--line-2); color: var(--ink); font-weight: 500; }
  .btn.danger { background: none; border-color: var(--line-2); color: var(--bad); font-weight: 500; }
  @media (hover: hover) { .btn.ghost:not(:disabled):hover, .btn.danger:not(:disabled):hover { border-color: var(--ink-3); } }
  .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px var(--gutter); }
  .btns.one { grid-template-columns: 1fr; }
  .form .btns { padding: 0; }

  .set { display: flex; flex-direction: column; padding: 0 var(--gutter); }
  .set .row { cursor: default; }
  .set a.row, .set button.row { cursor: pointer; }
  .set .val { font-size: 0.6765rem;
 color: var(--ink-2); text-align: right; flex: none; max-width: 50%; }
  .switch { width: 40px; height: 22px; flex: none; border: 1px solid var(--line-2); padding: 2px; display: flex; background: none; }
  .switch::after { content: ""; width: 16px; height: 16px; background: var(--ink-3); transition: transform .12s; }
  .switch[aria-checked="true"] { border-color: var(--signal-bg); }
  .switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--signal-bg); }
  .switch:disabled { opacity: .5; }
  .select-inline { border: 1px solid var(--line-2); background: var(--raised); padding: 4px 8px; font-size: 0.7353rem; color: var(--ink); min-height: 30px; }
  .statement { padding: 6px var(--gutter) 0; font-size: 0.6765rem; color: var(--ink-3); }
  .statement.center { text-align: center; padding-bottom: 12px; }

  .doc article { display: flex; flex-direction: column; gap: 8px; padding: 6px var(--gutter) 24px; max-width: 70ch; font-size: 0.7647rem; line-height: 1.55; color: var(--ink-2); }
  .doc h3 { margin-top: 10px; }
  .doc ul { margin: 0; padding-left: 2ch; display: flex; flex-direction: column; gap: 6px; }
  .doc b { color: var(--ink); font-weight: 600; }
  .doc.view { padding-bottom: 0; }

  .welcome { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--gutter) 10px; }
  .pane { position: relative; border: 1px solid var(--line); }
  .pane > .t { position: absolute; top: -8px; left: 7px; padding: 0 4px; background: var(--surface); color: var(--ink-3); font-size: 0.6471rem; line-height: 0.8235rem; }
  .pane img { width: 100%; height: auto; }
  .out { display: grid; gap: 1px; }
  .out .cmd::before, .prompt-l::before { content: "$ "; color: var(--info); }
  .kv { display: grid; grid-template-columns: 9ch 1fr; gap: 0 8px; }
  .kv > :first-child { color: var(--ink-3); }
  .kv .chains-l { display: flex; flex-wrap: wrap; gap: 0 1ch; }
  .chains-l .c-eth, .chains-l .c-base, .chains-l .c-arb, .chains-l .c-op, .chains-l .c-rh, .chains-l .c-sol { color: var(--c); }
  .prompt-l { color: var(--ink); }
  .prompt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--signal-bg); background: var(--raised); color: var(--ink-3); text-decoration: none; }
  .prompt::before { content: "›"; color: var(--signal); }
  .cur { display: inline-block; width: 7px; height: 15px; background: var(--signal-bg); animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .welcome .btn { justify-content: space-between; }
  .welcome .banner { margin: 0; }

  .checks { display: grid; gap: 1px; font-size: 0.7059rem; }
  .checks:empty { display: none; }
  .checks .okl::before { content: "✓ "; color: var(--ok); }
  .checks .errl { color: var(--bad); }
  .checks .errl b { font-weight: 600; }
  .checks .fix { justify-self: start; margin-top: 4px; }
  .formats .row { min-height: 26px; padding-block: 2px; font-size: 0.7059rem; }
  .formats .row > :first-child { width: 5ch; color: var(--signal); flex: none; }
  .formats .row > :last-child { margin-left: auto; color: var(--ink-3); }
  .formats { padding: 6px 10px 2px; margin-top: 6px; }

  .tabs a { flex: 1; min-height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.6176rem; color: var(--ink-3); text-decoration: none; }
  .tabs a[aria-current="page"] { color: var(--signal); font-weight: 600; }
  .tabs .ic { width: 20px; height: 20px; }

  .brand { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); background: var(--raised); }
  .side .row { padding-inline: 12px; border-bottom: 1px solid var(--line); min-height: 38px; border-left: 2px solid transparent; }
  .side .row[aria-current="page"] { background: var(--raised); border-left-color: var(--signal-bg); }
  .side-list { display: flex; flex-direction: column; }
  .side .sub.num { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
  .side .btn { justify-content: flex-start; }
  .side .btn[aria-current="page"] { border-color: var(--signal-bg); }

  @media (min-width: 960px) {
    .hero .big { font-size: 2.5882rem; }
    .hero { padding-top: 16px; }
    .cols { display: grid; grid-template-columns: 1fr 1fr; }
    .cols .gh, .cols .list { padding-right: calc(var(--gutter) / 2); }
    .cols > div + div .gh, .cols > div + div .list { padding-left: calc(var(--gutter) / 2); padding-right: var(--gutter); }
    .home-addresses, .home-seg, .mobile-only { display: none !important; }
    .home-addresses.in-bundle { display: block !important; }
    .form, .btns, .statement, .welcome { max-width: 640px; }
    :is(o-settings, o-chain) :is(.set, .gh, .statement) { max-width: 860px; }

    .btns { display: flex; flex-wrap: wrap; }
    .btns .btn { min-width: 120px; }
    dialog.sheet .btns { display: grid; }
  }
  @media (max-width: 959px) { .desktop-only, [data-off] { display: none !important; } }

  dialog.sheet { width: min(420px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--line-2); animation: pop .18s cubic-bezier(.2, .8, .2, 1); }
  dialog.sheet::backdrop { animation: fade .18s ease-out; }
  @keyframes rise { from { transform: translateY(12px); opacity: 0; } }
  @keyframes pop { from { transform: scale(.96); opacity: 0; } }
  @keyframes fade { from { opacity: 0; } }

  dialog.sheet::backdrop { background: rgb(0 0 0 / .6); }
  dialog.sheet form, dialog.sheet .sheet-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
  dialog.sheet .sheet-body { max-height: 85dvh; overflow-y: auto; }
  dialog.sheet h2 .num { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; }
  .hold-val { display: flex; flex-direction: column; }
  .list.flush { padding: 0; }
  dialog.sheet p.warn { color: var(--warn); }

  dialog.sheet h2 { font-size: 0.7941rem; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  dialog.sheet p { color: var(--ink-2); font-size: 0.7353rem; }
  dialog.sheet .btns { padding: 2px 0 0; }

  .toasts { position: fixed; z-index: 50; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; pointer-events: none; padding: 0 12px; }
  .toast { animation: rise .22s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2); border-left: 2px solid var(--ok); padding: 8px 12px; font-size: 0.7353rem; display: flex; gap: 14px; align-items: center; max-width: 100%; }
  .toast button { background: none; border: 0; color: var(--signal); font-weight: 600; padding: 4px 0; min-height: 28px; }
  @media (min-width: 960px) { .toasts { bottom: 20px; left: 280px; } }

  .unlock { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 16px; gap: 12px; max-width: 420px; margin: 0 auto; width: 100%; }
  .unlock .mark { width: 32px; height: 32px; --knock: var(--surface); }
  .unlock h1 { font-size: 0.8824rem; font-weight: 600; }
  .unlock p { color: var(--ink-3); font-size: 0.7353rem; }
  .unlock p.err { color: var(--bad); }
  .unlock .link { align-self: flex-start; font-size: 0.7059rem; }

  .progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 2px; margin: 0; border: 0; background: var(--line); color: var(--signal-bg); overflow: hidden; }
  .progress::-webkit-progress-bar { background: var(--line); }
  .progress::-webkit-progress-value { background: var(--signal-bg); transition: width .3s; }
  .progress::-moz-progress-bar { background: var(--signal-bg); }
}

@layer utilities {
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .privacy-blur .view, .privacy-blur .side { filter: blur(18px); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }
}

@layer components {
  .bar, .tabs, .side, .btn, .ib, .chip, .seg, .pill, .row, .switch, .prompt, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .btn:not(:disabled):active, .prompt:active { filter: brightness(.82); }
  .ib:not(:disabled):active, .chip:active, .pill:active, .tabs a:active { background: var(--line); }

  #view { view-transition-name: page; background: var(--surface); position: relative; z-index: 1; }
  .under { position: fixed; inset: 0; z-index: 0; overflow: hidden; max-width: 600px; margin: 0 auto; background: var(--surface); }
  .ptr { position: fixed; z-index: 0; inset: calc(env(safe-area-inset-top, 0px) + 14px) 0 auto; text-align: center; font-size: 0.6765rem; color: var(--ink-3); }
  @media (max-width: 600px) {
    dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
    @keyframes sheet-up { from { transform: translateY(100%); } }
  }
  #view:focus { outline: none; }
  .tabs { view-transition-name: tabs; }
  .side { view-transition-name: side; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-new(tabs), ::view-transition-new(side) { animation: none; }
  ::view-transition-old(tabs), ::view-transition-old(side) { display: none; }
  ::view-transition-group(page) { animation-duration: .34s; }
  [data-nav="push"]::view-transition-new(page) { animation: .34s cubic-bezier(.2, .8, .2, 1) both slide-in; }
  [data-nav="push"]::view-transition-old(page) { animation: .34s cubic-bezier(.2, .8, .2, 1) both park; }
  [data-nav="pop"]::view-transition-new(page) { animation: .34s cubic-bezier(.2, .8, .2, 1) both unpark; }
  [data-nav="pop"]::view-transition-old(page) { animation: .34s cubic-bezier(.2, .8, .2, 1) both slide-out; z-index: 1; }
  [data-nav="push"]::view-transition-new(page), [data-nav="pop"]::view-transition-old(page) { box-shadow: -6px 0 24px rgb(0 0 0 / .3); }
  @keyframes slide-in { from { transform: translateX(100%); } }

  @keyframes slide-out { to { transform: translateX(100%); } }
  @keyframes park { to { transform: translateX(-30%); opacity: .5; } }
  @keyframes unpark { from { transform: translateX(-30%); opacity: .5; } }
}

@layer components {
  o-markets { display: block; }
  o-markets .up { color: var(--ok); }
  o-markets .dn { color: var(--bad); }
  .mk-main, .mk-side { min-width: 0; }
  .mk-problem:empty { display: none; }
  .mk-tools { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 calc(var(--gutter) - 6px); border-bottom: 1px solid var(--line); min-width: 0; }
  .mk-group { display: flex; flex: none; }
  .mk-sep { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line); flex: none; }
  .mk-tb { min-height: 32px; min-width: 32px; padding: 0 7px; border: 0; background: none; color: var(--ink-2); font-size: 0.7059rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
  .mk-tb .ic { width: 16px; height: 16px; }
  .mk-tb[aria-pressed="true"] { color: var(--signal); font-weight: 600; }
  .mk-tb:disabled { opacity: .35; cursor: default; }
  @media (hover: hover) { .mk-tb:not(:disabled):hover { background: var(--raised); } }
  .mk-sym { font-weight: 700; color: var(--ink); font-size: 0.7647rem; flex: none; max-width: 40%; }
  .mk-sym span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-sym .ai, .mk-l1 .ai, .mk-dt .ai { width: 20px; height: 20px; margin-top: 0; }
  .mk-age { flex: 1 1 0; min-width: 0; text-align: right; padding-left: 8px; font-size: 0.6471rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-age.stale, .mk-agetext.stale { color: var(--warn); }

  .mk-stage { position: relative; height: clamp(240px, 58dvh, 520px); }
  .mk-chart-box { position: absolute; inset: 0; }
  .mk-sw { position: absolute; width: 0; height: 0; overflow: hidden; }
  .mk-sw-ink { color: var(--ink); } .mk-sw-ink-2 { color: var(--ink-2); } .mk-sw-ink-3 { color: var(--ink-3); } .mk-sw-line { color: var(--line); }
  .mk-sw-surface { color: var(--surface); } .mk-sw-raised { color: var(--raised); } .mk-sw-ok { color: var(--ok); } .mk-sw-bad { color: var(--bad); }
  .mk-sw-signal { color: var(--signal); } .mk-sw-signal-bg { color: var(--signal-bg); } .mk-sw-signal-ink { color: var(--signal-ink); }
  .mk-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
  .mk-canvas.grab { cursor: grabbing; }
  .mk-canvas:focus-visible { outline-offset: -2px; }
  .mk-latest { position: absolute; left: var(--gutter); bottom: 32px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 0.6471rem; }
  .mk-legend { position: absolute; top: 6px; left: var(--gutter); right: 84px; pointer-events: none; display: grid; gap: 2px; font-size: 0.6765rem; }
  .mk-l1 { display: flex; align-items: center; gap: 2px 8px; flex-wrap: wrap; min-width: 0; }
  .mk-l1 b { font-size: 0.7353rem; font-weight: 600; }
  .mk-ohlc { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--ink-3); }
  .mk-ohlc b { font-weight: 500; }

  .mk-strip { display: none; }
  .mk-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0; }
  .mk-nav { display: flex; align-items: center; align-self: center; }
  .mk-pos { min-width: 3.6em; text-align: center; font-size: 0.6471rem; color: var(--ink-3); }
  .mk-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.6765rem; color: var(--ink-3); }
  .mk-meta b { color: var(--ink); font-weight: 500; }

  .mk-info { display: grid; gap: 10px; padding: 10px var(--gutter) 16px; border-top: 1px solid var(--line); }
  .mk-dt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mk-venue { color: var(--ink-2); }
  .mk-dhead { display: flex; flex-direction: column; }
  .mk-price { font-size: 1.5294rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
  .mk-chg { font-size: 0.7353rem; font-weight: 600; white-space: nowrap; }
  .mk-range { display: grid; gap: 4px; }
  .mk-track { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 4px; margin: 0; border: 0; background: var(--line); color: var(--ink-3); }
  .mk-track::-webkit-progress-bar { background: var(--line); }
  .mk-track::-webkit-progress-value { background: var(--ink-3); border-right: 2px solid var(--signal-bg); }
  .mk-track::-moz-progress-bar { background: var(--ink-3); border-right: 2px solid var(--signal-bg); }
  .mk-ends { display: flex; justify-content: space-between; font-size: 0.6471rem; color: var(--ink-3); }
  .mk-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .mk-kv { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.7059rem; }
  .mk-kv > :first-child { color: var(--ink-3); }
  .mk-perp { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); }
  .mk-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
  .mk-rate { font-size: 1.0588rem; font-weight: 600; }
  .mk-src { font-size: 0.6471rem; color: var(--ink-3); }
  .mk-src b { color: var(--ink-2); font-weight: 500; }
  .mk-info > .btn { justify-self: start; }

  .mk-cols, .mk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 46px auto 66px; gap: 8px; align-items: center; padding: 0 var(--gutter); }
  .mk-cols { min-height: 28px; font-size: 0.6471rem; color: var(--ink-3); border-bottom: 1px solid var(--line); }
  .mk-cols > :first-child { grid-column: 1 / 3; }
  .mk-cols > :not(:first-child) { text-align: right; }
  .mk-row { min-height: 52px; padding-block: 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
  .mk-row:active { background: var(--raised); }
  @media (hover: hover) { .mk-row:hover { background: var(--raised); } }
  .mk-row[aria-current="true"] { background: var(--raised); box-shadow: inset 2px 0 0 var(--signal-bg); }
  .mk-row .ai { margin-top: 0; }
  .mk-symcol { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .mk-symcol b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-symcol .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-spark { width: 46px; height: 20px; display: block; }
  .mk-spark polyline { fill: none; stroke-width: 1.3; stroke-linejoin: round; }
  .mk-spark.up polyline { stroke: var(--ok); }
  .mk-spark.dn polyline { stroke: var(--bad); }
  .mk-spark .base { stroke: var(--line-2); stroke-dasharray: 1 2; }
  .mk-lastcol { display: flex; flex-direction: column; align-items: flex-end; }
  .mk-last { font-weight: 500; }
  .mk-abs { font-size: 0.6471rem; }
  .mk-pct { font-weight: 600; font-size: 0.7059rem; text-align: right; }
  .mk-empty { display: grid; gap: 8px; justify-items: start; padding: 16px var(--gutter); color: var(--ink-3); font-size: 0.7353rem; }

  .mk-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .mk-results { display: flex; flex-direction: column; max-height: 46dvh; overflow-y: auto; }
  .mk-res { display: grid; grid-template-columns: 22px minmax(0, 8em) minmax(0, 1fr) auto 4.5em; gap: 8px; align-items: center; min-height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: inherit; font-size: 0.7059rem; }
  @media (hover: hover) { .mk-res:hover { background: var(--raised); } }
  .mk-res .ai { width: 22px; height: 22px; margin-top: 0; }
  .mk-res b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-desc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-on { font-size: 0.6471rem; color: var(--signal); text-align: right; }

  .mk-sw-p-blue, .mk-ic-blue { color: var(--c-eth); } .mk-bg-blue { background: var(--c-eth); }
  .mk-sw-p-amber, .mk-ic-amber { color: var(--c-arb); } .mk-bg-amber { background: var(--c-arb); }
  .mk-sw-p-pink, .mk-ic-pink { color: var(--c-op); } .mk-bg-pink { background: var(--c-op); }
  .mk-sw-p-cyan, .mk-ic-cyan { color: var(--info); } .mk-bg-cyan { background: var(--info); }
  .mk-sw-p-purple, .mk-ic-purple { color: var(--c-rh); } .mk-bg-purple { background: var(--c-rh); }
  .mk-sw-p-green, .mk-ic-green { color: var(--c-sol); } .mk-bg-green { background: var(--c-sol); }
  .mk-sw-p-orange, .mk-ic-orange { color: var(--signal); } .mk-bg-orange { background: var(--signal); }
  .mk-sw-p-gray, .mk-ic-gray { color: var(--ink-2); } .mk-bg-gray { background: var(--ink-2); }
  .mk-dot { width: 10px; height: 10px; flex: none; }
  .mk-inds { display: flex; flex-direction: column; }
  .mk-ind { display: grid; gap: 6px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
  .mk-ind-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mk-ind-head .sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .mk-ind-head .ib { margin-right: -8px; }
  .mk-ind-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mk-param { display: grid; gap: 2px; font-size: 0.6471rem; color: var(--ink-3); }
  .mk-param input { min-height: 32px; width: 100%; min-width: 0; border: 1px solid var(--field-border-3to1); background: var(--raised); color: var(--ink); padding: 0 8px; font: 0.7647rem var(--mono); }
  .mk-colors { display: flex; flex-wrap: wrap; gap: 6px; }
  .mk-color { width: 26px; height: 26px; border: 2px solid var(--surface); outline: 1px solid var(--line-2); padding: 0; }
  .mk-color[aria-pressed="true"] { outline: 2px solid var(--ink); }
  .mk-chips .chip:disabled { opacity: .4; cursor: default; }
  dialog.sheet textarea#mk-code { border: 1px solid var(--field-border-3to1); background: var(--raised); color: var(--ink); padding: 8px 10px; font: 0.7059rem var(--mono); width: 100%; resize: vertical; word-break: break-all; }
  @media (max-width: 959px) { .mk-fx-t { display: none; } }
  @media (max-width: 959px) {
    .mk:not(.on-chart) .mk-main, .mk.on-chart .mk-side { display: none; }
    .mk-sym, .mk-sym + .mk-sep, .mk-age, .mk-dt, .mk-dhead { display: none; }
    .mk-legend { right: 72px; }
    .mk-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px var(--gutter); border-top: 1px solid var(--line); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
    .mk-pct { justify-self: end; min-width: 66px; padding: 3px 0; text-align: center; color: var(--surface); }
    o-markets .mk-pct.up { background: var(--ok); color: var(--surface); }
    o-markets .mk-pct.dn { background: var(--bad); color: var(--surface); }
    .mk-res { grid-template-columns: 22px minmax(0, 1fr) auto 4.5em; }
    .mk-desc { display: none; }
  }
  @media (max-width: 370px) {
    .mk-cols, .mk-row { grid-template-columns: 28px minmax(0, 1fr) auto 66px; }
    .mk-spark-box, .mk-c-spark { display: none; }
  }
  @media (min-width: 960px) {
    .mk { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .mk-side { border-left: 1px solid var(--line); position: sticky; top: 38px; max-height: calc(100dvh - 38px); overflow-y: auto; }
    .mk-stage { height: clamp(360px, 62dvh, 640px); }
  }
}

@layer components {
  dialog.intro { width: min(560px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); padding: 0; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-direction: column; animation: pop .18s cubic-bezier(.2, .8, .2, 1); }
  dialog.intro:not([open]) { display: none; }
  dialog.intro::backdrop { background: rgb(0 0 0 / .7); }
  .intro-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); font-size: 0.6471rem; color: var(--ink-3); }
  .intro-skip { padding: 8px 0; font-size: 0.7059rem; }
  .intro-step { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px var(--gutter) 16px; }
  .intro-step h2 { font-size: 1.1765rem; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .intro-step h2:focus { outline: none; }
  .intro-step p { color: var(--ink-2); font-size: 0.7647rem; line-height: 1.55; }
  .intro-step .hint { font-size: 0.6765rem; }
  .intro-art { border: 1px solid var(--line); background: var(--raised); }
  .intro-orbit { display: block; width: 100%; height: auto; }
  .intro-term { display: grid; gap: 2px; padding: 10px 12px; font-size: 0.7059rem; }
  .intro-term .cmd::before { content: "$ "; color: var(--info); }
  .intro-term .kv { grid-template-columns: 11ch 1fr; }
  .intro-term .ok { color: var(--ok); }
  .intro-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .intro-lists ul, .intro-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.7353rem; line-height: 1.45; color: var(--ink-2); }
  .intro-lists li { display: grid; grid-template-columns: 1.6ch 1fr; gap: 4px; }
  .intro-lists .can .mk { color: var(--ok); font-weight: 700; }
  .intro-lists .cant .mk { color: var(--bad); font-weight: 700; }
  .intro-points li { padding-left: 2ch; position: relative; }
  .intro-points li::before { content: "›"; position: absolute; left: 0; color: var(--signal); }
  .intro-start { display: grid; gap: 8px; }
  .intro-start .btn { justify-content: flex-start; min-height: 44px; }
  .intro-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .intro-nav .btn.ghost { justify-self: start; }
  .intro-nav .btn:not(.ghost) { justify-self: end; min-width: 96px; }
  .intro-nav .off { visibility: hidden; }
  .intro-dots { display: flex; gap: 6px; }
  .intro-dots i { width: 8px; height: 8px; background: var(--line-2); }
  .intro-dots i.on { background: var(--signal-bg); }
  .welcome-intro { align-self: flex-start; padding: 4px 0; font-size: 0.7059rem; }
  @media (max-width: 600px) {
    dialog.intro { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
    .intro-lists { grid-template-columns: 1fr; }
  }
}