/* 来接 · 基础：字体、色板、舞台 */
@font-face { font-family: "Geist"; src: url("Geist.ttf") format("truetype"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Barlow Cond"; src: url("BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }

:root {
  --ink: #121317;
  --ink-2: #1c1e24;
  --ink-3: #30333b;
  --ink-line: #2a2d35;
  --cobalt: #1f4bff;
  --cobalt-d: #1738d1;
  --cobalt-l: #86a0ff;
  --paper: #fcfbf8;
  --paper-2: #f0efea;
  --paper-3: #e6e4de;
  --line: #e4e2dc;
  --muted: #6f727a;
  --on-ink-2: #a2a6b1;
  --amber: #ffb21a;
  --danger: #c4372c;

  --map-ground: #e6e9ed;
  --map-block: #f0f2f4;
  --map-bld: #e4e7eb;
  --map-road: #ffffff;
  --map-case: #d6dadf;
  --map-water: #c9dbea;
  --map-park: #d3e3cf;

  --r-card: 34px;
  --r-ctl: 14px;
  --gap: 12px;

  --f-ui: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --f-plate: "Barlow Cond", "Geist", sans-serif;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--paper-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  text-autospace: ideograph-alpha ideograph-numeric;
  line-break: strict;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* 舞台：窄屏即应用本身；宽屏居中，旁边放状态切换 */
.stage { min-height: 100%; display: grid; place-items: center; }
.app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--map-ground);
  isolation: isolate;
}
.demo { display: none; }

@media (min-width: 560px) {
  body { background: #dfe1e5; overflow-x: hidden; }
  .stage { position: relative; display: block; padding: 24px 0; min-height: 100%; }
  .app {
    width: 390px; height: 844px; max-width: none; margin: 0 auto;
    border-radius: 30px;
    transform: scale(var(--fit, 1)); transform-origin: 50% 0;
    margin-bottom: calc(-844px * (1 - var(--fit, 1)));
    box-shadow: 0 0 0 1px rgba(18,19,23,.06), 0 30px 70px -20px rgba(18,19,23,.28);
  }
  .demo {
    display: flex; flex-direction: column; gap: 6px; position: absolute; width: 148px;
    left: calc(50% + 195px * var(--fit, 1) + 40px); top: calc(24px + 422px * var(--fit, 1)); transform: translateY(-50%);
  }
  .demo h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .demo button {
    height: 40px; padding: 0 14px; border-radius: 12px; text-align: left;
    font-size: 15px; font-weight: 600; color: #4b4e56; transition: background .2s, color .2s;
  }
  .demo button:hover { background: rgba(18,19,23,.06); }
  .demo button[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .demo .auto { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
  .demo .auto[aria-pressed="true"] { background: none; color: var(--ink); }
  .demo .auto::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: #b5b8bf; }
  .demo .auto[aria-pressed="true"]::before { background: var(--cobalt); }
}