/* web/themes/neon.css */
:root[data-theme="neon"] {
  --field: #eef1f5;
  --surface: color-mix(in srgb, var(--ink) 2.5%, transparent);
  --pop: color-mix(in srgb, var(--field) 88%, transparent);
  --hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 18%, transparent);
  --ink: #151a2b;
  --mute: #677086;
  --line: #d3d8e1;
  --hair: color-mix(in srgb, var(--ink) 11%, transparent);
  --hair-strong: color-mix(in srgb, var(--ink) 22%, transparent);
  --accent: #5b3df5;
  --btn: var(--accent);
  --on-btn: #fff;
  --busy: #ff2d87;
  --ok: #1fa774;
  --fail: #e0464b;
  --cal-sun: #e0464b;
  --cal-sat: #2f6fdb;
  --kind-event: var(--accent);
  --kind-deadline: var(--fail);
  --kind-task: var(--ok);
  --kind-await: var(--mute);
  --radius: 14px;
  --radius-btn: 999px;
  --card-border: var(--hair);
  --card-shadow: none;
  --card-shadow-hover: none;
  --pop-shadow: 0 14px 36px -24px color-mix(in srgb, var(--accent) 70%, transparent);
  --font: "SUIT Variable", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --beam: linear-gradient(90deg, transparent, #ff7a1a 30%, #ff2d87 55%, #5b3df5 80%, transparent);
  --god-halo: #f2b632;
  --god-line: #151a2b;
  --god-hair: #fff;
  --god-skin: #ffd0b5;
  --god-robe: #5b3df5;
  --god-leaf: #4e9a3c;
  --god-leaf-edge: #2f6b2a;
  --god-leaf-vein: #b9dc8c;
  --cosmos-1: #2f6fe0;
  --cosmos-2: #1fb5c9;
  --cosmos-3: #5fd39b;
  --cosmos-4: #f2b632;
  --cosmos-5: #8b5cf6;
  --cosmos-6: #ec4899;
  --cosmos-7: #ff7a3d;
  --cosmos-deep: #0d0b26;
  --cosmos-star: #f1f0ff;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

:root[data-theme="neon"][data-scheme="dark"] {
  --field: #0d1124;
  --ink: #e4e8f3;
  --mute: #8c94ab;
  --line: #262d45;
  --accent: #8f7bff;
  --ok: #39c98f;
  --fail: #ff6b6f;
  --cal-sun: #ff6b6f;
  --cal-sat: #7aa5ff;
  --god-line: #05070f;
  --god-robe: #8f7bff;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="neon"]:not([data-scheme="light"]) {
    --field: #0d1124;
    --ink: #e4e8f3;
    --mute: #8c94ab;
    --line: #262d45;
    --accent: #8f7bff;
    --ok: #39c98f;
    --fail: #ff6b6f;
    --cal-sun: #ff6b6f;
    --cal-sat: #7aa5ff;
    --god-line: #05070f;
    --god-robe: #8f7bff;
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }
}

:root[data-theme="neon"] .schedule .day, :root[data-theme="neon"] .schedule .undated {
  border-top-width: 2px;
}

:root[data-theme="neon"] .schedule .card.is-check {
  border-color: var(--hair);
}

:root[data-theme="neon"] .schedule .card:not(.is-asking):hover, :root[data-theme="neon"] .schedule .card:not(.is-asking):focus-within {
  border-color: color-mix(in srgb, var(--kind) 45%, var(--hair));
  box-shadow: 0 8px 22px -16px var(--kind);
}

:root[data-theme="neon"] .schedule .card .t:before, :root[data-theme="neon"] .dm .t:before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind) 16%, transparent), 0 0 10px var(--kind);
}

:root[data-theme="neon"] .schedule .card .num, :root[data-theme="neon"] .dm .num {
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 1px 7px;
}

:root[data-theme="neon"] .schedule .card .num:hover, :root[data-theme="neon"] .dm .num:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

:root[data-theme="neon"] .dm .top, :root[data-theme="neon"] .dm .top .prep, :root[data-theme="neon"] .dm .num:not(:hover) {
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
}

:root[data-theme="neon"] .schedule .card .ai {
  opacity: 1;
  width: 20px;
  padding: 0;
  font-size: 0;
}

:root[data-theme="neon"] .schedule .card .ai:before {
  content: "✦";
  font-size: 10px;
}

:root[data-theme="neon"] .schedule .card .ai:hover, :root[data-theme="neon"] .schedule .card.is-asking .ai {
  color: #fff;
  background: linear-gradient(135deg, #ff7a1a, #ff2d87 45%, #5b3df5);
  box-shadow: 0 0 12px -2px #ff2d87;
}

:root[data-theme="neon"] .schedule .ask {
  border-radius: var(--radius-card);
  backdrop-filter: blur(10px);
}

:root[data-theme="neon"] .dm:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #0000, #ff7a1a 30%, #ff2d87 55%, #5b3df5 80%, #0000);
  height: 1px;
  inset: 0 0 auto;
}

:root[data-theme="neon"] .dm.is-sent:before {
  background: linear-gradient(90deg, transparent, var(--ok) 40%, transparent);
}

:root[data-theme="neon"] .dm.is-cancelled:before, :root[data-theme="neon"] .dm.is-loading:before {
  background: var(--hair);
}

:root[data-theme="neon"] .dm .acts .send {
  background: linear-gradient(135deg, #ff7a1a, #ff2d87 45%, #5b3df5);
  box-shadow: 0 8px 20px -10px #ff2d87;
}

:root[data-theme="neon"] .dm .acts .send:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px #ff2d87;
}

/* web/themes/paper.css */
:root[data-theme="paper"] {
  --field: #fff;
  --surface: #fff;
  --pop: #fff;
  --hover: #f1f1ef;
  --scrim: #0f0f0f29;
  --ink: #37352f;
  --mute: #73726e;
  --line: #e9e9e7;
  --hair: #e9e9e7;
  --hair-strong: #d3d1cb;
  --accent: #1f6fc0;
  --btn: #1f6fc0;
  --on-btn: #fff;
  --busy: var(--accent);
  --ok: #3f7a5a;
  --fail: #c4403b;
  --cal-sun: #c4403b;
  --cal-sat: #1f6fc0;
  --kind-event: #337ea9;
  --kind-deadline: #d44c47;
  --kind-task: #448361;
  --kind-await: #9b9a97;
  --radius: 10px;
  --radius-btn: calc(var(--radius)  - 2px);
  --card-border: transparent;
  --card-shadow: 0 0 0 1px #0f0f0f12, 0 2px 4px #0f0f0f0d;
  --card-shadow-hover: 0 0 0 1px #0f0f0f1a, 0 3px 8px #0f0f0f14;
  --pop-shadow: 0 0 0 1px #0f0f0f0f, 0 6px 18px #0f0f0f1a;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --beam: var(--ink);
  --god-halo: #f2b632;
  --god-line: #3a3230;
  --god-hair: #f6f3ec;
  --god-skin: #f1c7a1;
  --god-robe: #5b7fc7;
  --god-leaf: #4e9a3c;
  --god-leaf-edge: #2f6b2a;
  --god-leaf-vein: #b9dc8c;
  --cosmos-1: #2f6fe0;
  --cosmos-2: #1fb5c9;
  --cosmos-3: #5fd39b;
  --cosmos-4: #f2b632;
  --cosmos-5: #8b5cf6;
  --cosmos-6: #ec4899;
  --cosmos-7: #ff7a3d;
  --cosmos-deep: #0d0b26;
  --cosmos-star: #f1f0ff;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

:root[data-theme="paper"][data-scheme="dark"] {
  --field: #191919;
  --surface: #202020;
  --pop: #252525;
  --hover: #2a2a2a;
  --scrim: #00000080;
  --ink: #e3e2e0;
  --mute: #9b9b9b;
  --line: #2f2f2f;
  --hair: #2f2f2f;
  --hair-strong: #454545;
  --accent: #529cca;
  --btn: #1f6fc0;
  --ok: #4dab9a;
  --fail: #e06c6c;
  --cal-sun: #e06c6c;
  --cal-sat: #529cca;
  --kind-event: #529cca;
  --kind-deadline: #e06c6c;
  --kind-task: #4dab9a;
  --kind-await: #7f7f7f;
  --card-shadow: 0 0 0 1px #2f2f2f;
  --card-shadow-hover: 0 0 0 1px #3d3d3d, 0 3px 8px #0000004d;
  --pop-shadow: 0 0 0 1px #2f2f2f, 0 6px 18px #0006;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="paper"]:not([data-scheme="light"]) {
    --field: #191919;
    --surface: #202020;
    --pop: #252525;
    --hover: #2a2a2a;
    --scrim: #00000080;
    --ink: #e3e2e0;
    --mute: #9b9b9b;
    --line: #2f2f2f;
    --hair: #2f2f2f;
    --hair-strong: #454545;
    --accent: #529cca;
    --btn: #1f6fc0;
    --ok: #4dab9a;
    --fail: #e06c6c;
    --cal-sun: #e06c6c;
    --cal-sat: #529cca;
    --kind-event: #529cca;
    --kind-deadline: #e06c6c;
    --kind-task: #4dab9a;
    --kind-await: #7f7f7f;
    --card-shadow: 0 0 0 1px #2f2f2f;
    --card-shadow-hover: 0 0 0 1px #3d3d3d, 0 3px 8px #0000004d;
    --pop-shadow: 0 0 0 1px #2f2f2f, 0 6px 18px #0006;
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }
}

/* web/themes/clear.css */
:root[data-theme="clear"] {
  --field: #f5f5f7;
  --surface: #fff;
  --pop: #fff;
  --hover: #0000000d;
  --scrim: #0000002e;
  --ink: #1d1d1f;
  --mute: #6e6e73;
  --line: #d2d2d7;
  --hair: #0000000f;
  --hair-strong: #d2d2d7;
  --accent: #06c;
  --btn: #0071e3;
  --on-btn: #fff;
  --busy: var(--accent);
  --ok: #1e7a35;
  --fail: #e30000;
  --cal-sun: #d70015;
  --cal-sat: #06c;
  --kind-event: #0071e3;
  --kind-deadline: #ff3b30;
  --kind-task: #34c759;
  --kind-await: #8e8e93;
  --radius: 14px;
  --radius-btn: 980px;
  --card-border: transparent;
  --card-shadow: none;
  --card-shadow-hover: 0 4px 18px #00000012;
  --pop-shadow: 0 8px 30px #0000001a;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --beam: var(--accent);
  --god-halo: #f2b632;
  --god-line: #3a3230;
  --god-hair: #f6f3ec;
  --god-skin: #f1c7a1;
  --god-robe: #3d7bd9;
  --god-leaf: #4e9a3c;
  --god-leaf-edge: #2f6b2a;
  --god-leaf-vein: #b9dc8c;
  --cosmos-1: #2f6fe0;
  --cosmos-2: #1fb5c9;
  --cosmos-3: #5fd39b;
  --cosmos-4: #f2b632;
  --cosmos-5: #8b5cf6;
  --cosmos-6: #ec4899;
  --cosmos-7: #ff7a3d;
  --cosmos-deep: #0d0b26;
  --cosmos-star: #f1f0ff;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

:root[data-theme="clear"][data-scheme="dark"] {
  --field: #000;
  --surface: #1c1c1e;
  --pop: #2c2c2e;
  --hover: #ffffff14;
  --scrim: #00000080;
  --ink: #f5f5f7;
  --mute: #98989d;
  --line: #38383a;
  --hair: #ffffff0f;
  --hair-strong: #48484a;
  --accent: #2997ff;
  --btn: #0071e3;
  --ok: #30d158;
  --fail: #ff453a;
  --cal-sun: #ff453a;
  --cal-sat: #2997ff;
  --kind-event: #0a84ff;
  --kind-deadline: #ff453a;
  --kind-task: #30d158;
  --kind-await: #8e8e93;
  --card-shadow-hover: 0 4px 18px #00000080;
  --pop-shadow: 0 8px 30px #0009;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="clear"]:not([data-scheme="light"]) {
    --field: #000;
    --surface: #1c1c1e;
    --pop: #2c2c2e;
    --hover: #ffffff14;
    --scrim: #00000080;
    --ink: #f5f5f7;
    --mute: #98989d;
    --line: #38383a;
    --hair: #ffffff0f;
    --hair-strong: #48484a;
    --accent: #2997ff;
    --btn: #0071e3;
    --ok: #30d158;
    --fail: #ff453a;
    --cal-sun: #ff453a;
    --cal-sat: #2997ff;
    --kind-event: #0a84ff;
    --kind-deadline: #ff453a;
    --kind-task: #30d158;
    --kind-await: #8e8e93;
    --card-shadow-hover: 0 4px 18px #00000080;
    --pop-shadow: 0 8px 30px #0009;
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }
}

/* web/themes/ink.css */
:root[data-theme="ink"] {
  --field: #fff;
  --surface: #fff;
  --pop: #fff;
  --hover: #f2f2f2;
  --scrim: #00000029;
  --ink: #171717;
  --mute: #666;
  --line: #ebebeb;
  --hair: #ebebeb;
  --hair-strong: #c9c9c9;
  --accent: #171717;
  --btn: #171717;
  --on-btn: #fff;
  --busy: var(--accent);
  --ok: #297a3a;
  --fail: #da2f35;
  --cal-sun: #da2f35;
  --cal-sat: #1d5fc4;
  --kind-event: #171717;
  --kind-deadline: #e5484d;
  --kind-task: #8f8f8f;
  --kind-await: #c9c9c9;
  --radius: 8px;
  --radius-btn: calc(var(--radius)  - 2px);
  --card-border: #ebebeb;
  --card-shadow: none;
  --card-shadow-hover: 0 2px 6px #0000000a;
  --pop-shadow: 0 4px 16px #00000014;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --beam: var(--ink);
  --god-halo: #f2b632;
  --god-line: #171717;
  --god-hair: #fff;
  --god-skin: #d9d9d9;
  --god-robe: #6b6b6b;
  --god-leaf: #4e9a3c;
  --god-leaf-edge: #2f6b2a;
  --god-leaf-vein: #b9dc8c;
  --cosmos-1: #2f6fe0;
  --cosmos-2: #1fb5c9;
  --cosmos-3: #5fd39b;
  --cosmos-4: #f2b632;
  --cosmos-5: #8b5cf6;
  --cosmos-6: #ec4899;
  --cosmos-7: #ff7a3d;
  --cosmos-deep: #0d0b26;
  --cosmos-star: #f1f0ff;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
}

:root[data-theme="ink"][data-scheme="dark"] {
  --field: #0a0a0a;
  --surface: #0a0a0a;
  --pop: #111;
  --hover: #1f1f1f;
  --scrim: #0009;
  --ink: #ededed;
  --mute: #a1a1a1;
  --line: #2e2e2e;
  --hair: #2e2e2e;
  --hair-strong: #454545;
  --accent: #ededed;
  --btn: #ededed;
  --on-btn: #0a0a0a;
  --ok: #3ecf6e;
  --fail: #ff6166;
  --cal-sun: #ff6166;
  --cal-sat: #6aa2ff;
  --kind-event: #ededed;
  --kind-deadline: #ff6166;
  --kind-task: #8f8f8f;
  --kind-await: #454545;
  --card-border: #2e2e2e;
  --god-line: #000;
  --god-hair: #ededed;
  --god-skin: #bdbdbd;
  --god-robe: #5c5c5c;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="ink"]:not([data-scheme="light"]) {
    --field: #0a0a0a;
    --surface: #0a0a0a;
    --pop: #111;
    --hover: #1f1f1f;
    --scrim: #0009;
    --ink: #ededed;
    --mute: #a1a1a1;
    --line: #2e2e2e;
    --hair: #2e2e2e;
    --hair-strong: #454545;
    --accent: #ededed;
    --btn: #ededed;
    --on-btn: #0a0a0a;
    --ok: #3ecf6e;
    --fail: #ff6166;
    --cal-sun: #ff6166;
    --cal-sat: #6aa2ff;
    --kind-event: #ededed;
    --kind-deadline: #ff6166;
    --kind-task: #8f8f8f;
    --kind-await: #454545;
    --card-border: #2e2e2e;
    --god-line: #000;
    --god-hair: #ededed;
    --god-skin: #bdbdbd;
    --god-robe: #5c5c5c;
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }
}

/* web/style.css */
@font-face {
  font-family: SUIT Variable;
  src: url("/SUIT-Variable-q6d32gty.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --column: 720px;
  --radius-card: var(--radius);
  --radius-box: calc(var(--radius)  + 4px);
  --radius-sm: calc(var(--radius) / 2);
  --live-dot: conic-gradient(var(--cosmos-1), var(--cosmos-2), var(--cosmos-3), var(--cosmos-4), var(--cosmos-1));
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--field);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  height: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.bar {
  position: sticky;
  z-index: 2;
  display: flex;
  background: color-mix(in srgb, var(--field) 86%, transparent);
  backdrop-filter: blur(12px);
  align-items:  center;
  gap: 24px;
  padding: 14px 24px;
  top: 0;
}

.mark {
  display: flex;
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
  align-items:  center;
  gap: 4px;
  font-size: 17px;
  font-weight: 750;
}

.god {
  overflow: visible;
  shape-rendering: crispEdges;
  flex: none;
  width: 28px;
  height: 24px;
}

.god .god-halo {
  fill: var(--god-halo);
  animation: 2.4s step-end .6s infinite god-step;
}

.god .god-line, .god .god-eye {
  fill: var(--god-line);
}

.god .god-hair {
  fill: var(--god-hair);
}

.god .god-skin {
  fill: var(--god-skin);
}

.god .god-robe {
  fill: var(--god-robe);
}

.god .god-leaf {
  fill: var(--god-leaf);
}

.god .god-leaf-edge {
  fill: var(--god-leaf-edge);
}

.god .god-leaf-vein {
  fill: var(--god-leaf-vein);
}

.god .god-body {
  animation: 2.4s step-end infinite god-step;
}

.god .god-eye {
  animation: 4.2s step-end infinite god-blink;
}

.god.is-live .god-body {
  animation-duration: .8s;
}

.god.is-live .god-halo {
  animation: 1.6s ease-in-out infinite god-glow;
}

@keyframes god-step {
  50% {
    transform: translateY(-.5px);
  }
}

@keyframes god-blink {
  94% {
    opacity: 0;
  }
}

@keyframes god-glow {
  50% {
    filter: drop-shadow(0 0 1px var(--god-halo)) drop-shadow(0 0 2px var(--god-halo));
    transform: translateY(-.5px);
  }
}

.sources {
  display: flex;
  color: var(--mute);
  gap: 16px;
  margin-left: auto;
  font-size: 13px;
}

.source {
  display: flex;
  cursor: default;
  align-items:  center;
  gap: 6px;
}

.source i {
  background: var(--line);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.source.is-ok i {
  background: var(--ok);
}

.source.is-off {
  opacity: .6;
}

.source.is-busy {
  color: var(--ink);
}

.source.is-busy i {
  background: var(--busy);
  animation: .9s ease-in-out infinite blink;
}

.actions {
  display: flex;
  color: var(--mute);
  gap: 16px;
  font-size: 14px;
}

.actions button:hover:not(:disabled) {
  color: var(--ink);
}

.actions button:disabled {
  opacity: .4;
  cursor: default;
}

.actions .dot {
  display: inline-block;
  background: var(--busy);
  vertical-align: middle;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-left: 6px;
}

.source, .actions > * {
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .source.is-ok {
    display: none;
  }
}

@media (max-width: 760px) {
  .sources {
    display: none;
  }

  .actions {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
  }
}

.column {
  max-width: calc(var(--column)  + 48px);
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 32px;
}

.is-empty .column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.intro .warn {
  color: var(--fail);
  margin: 0 0 20px;
  font-size: 14px;
}

.ask {
  position: relative;
  letter-spacing: -.02em;
  white-space: pre-wrap;
  margin: 48px 0 12px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.45;
}

.ask-n {
  position: absolute;
  display: flex;
  text-align: right;
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  user-select: none;
  flex-direction: column;
  gap: 2px;
  width: 44px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  top: .45em;
  left: -64px;
}

@media (max-width: 880px) {
  .ask-n {
    position: static;
    text-align: left;
    flex-direction: row;
    gap: 8px;
    width: auto;
    margin-bottom: 4px;
  }
}

.app.has-original .ask-n {
  position: static;
  text-align: left;
  flex-direction: row;
  gap: 8px;
  width: auto;
  margin-bottom: 4px;
}

.ask:first-child {
  margin-top: 8px;
}

.answer {
  padding-bottom: 8px;
}

.note {
  color: var(--mute);
  margin: 8px 0;
  font-size: 14px;
}

.ask, .answer {
  animation: .35s ease-out both rise;
}

.error {
  animation: .3s ease-out both fade;
  color: var(--fail);
  font-size: 14px;
}

.tag {
  display: inline-block;
  border-radius: var(--radius-btn);
  color: var(--accent);
  cursor: help;
  border: 1px solid;
  margin: 0 0 10px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 20px;
}

.reuse {
  display: flex;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  animation: .3s ease-out both fade;
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 10px;
  margin: 0 0 10px;
  padding: 5px 10px;
  font-size: 13px;
}

.reuse button {
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 10px;
  transition: opacity .2s, background-color .2s;
  font-size: 12px;
  line-height: 22px;
}

.reuse button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.reuse button:disabled {
  opacity: .45;
  cursor: default;
}

.asks {
  animation: .3s ease-out both fade;
  margin: 12px 0 4px;
}

.shares {
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  animation: .3s ease-out both fade;
  min-height: 120px;
  margin: 16px 0 4px;
  padding: 12px 14px 10px;
  font-size: 14px;
}

.shares.is-loading {
  opacity: .6;
}

.shares header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.shares header span, .shares small, .shares footer span {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.share-group h3 {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
}

.share-group h3 button {
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 400;
}

.share-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-group label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: pointer;
  align-items:  center;
  gap: 8px;
  padding: 3px 0;
}

.share-group input {
  accent-color: var(--accent);
  margin: 0;
}

.share-group .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-group small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  max-width: 22em;
}

.share-group li.is-error small {
  color: var(--fail);
}

.shares footer {
  display: flex;
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
}

.shares footer button {
  border: 1px solid var(--btn);
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  font: inherit;
  cursor: pointer;
  padding: 0 14px;
  transition: opacity .2s;
  font-size: 13px;
  line-height: 28px;
}

.shares footer button:disabled {
  opacity: .4;
  cursor: default;
}

.shares .listing {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 10px;
  margin: 0 0 6px;
  font-size: 12px;
}

.shares .listing.is-warn {
  color: var(--fail);
}

.shares .listing button {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 10px;
  line-height: 24px;
}

.shares .listing button:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 560px) {
  .share-group label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .share-group small {
    grid-column: 2;
    text-align: left;
  }
}

.trail {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
  font-size: 13px;
}

.trail-head {
  display: flex;
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 8px;
  max-width: 100%;
  min-height: 1.9em;
  padding: 0;
}

.trail-head:disabled {
  cursor: default;
}

.trail-head .fold-i {
  margin-left: 0;
}

.trail .stats {
  flex: none;
}

.trail .step {
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
  animation: .3s ease-out both fade, 1.8s ease-in-out .3s infinite breathe;
  min-width: 0;
}

.trail .stats + .step:before {
  content: "·";
  margin-right: 8px;
}

.trail-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s, opacity .28s;
}

.trail.is-open .trail-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.trail-body > div {
  overflow: hidden;
  min-height: 0;
}

.trail .calls > li, .trail .tools li {
  animation: .3s ease-out both fade;
}

.trail ol, .trail ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.trail .call {
  display: grid;
  grid-template-columns: 1.2em 6.6em minmax(40px, 1fr) 4.6em 6.4em 3.4em;
  color: var(--ink);
  align-items:  center;
  gap: 8px;
  line-height: 1.9;
}

.trail .call .n {
  color: var(--mute);
}

.trail .call .add, .trail .call .ms {
  color: var(--mute);
  text-align: right;
}

.trail .bar {
  display: flex;
  overflow: hidden;
  background: var(--field);
  border-radius: 3px;
  height: 6px;
}

.trail .bar b {
  background: var(--line);
}

.trail .bar em {
  background: var(--accent);
}

.trail .call.is-run .ms {
  animation: .9s ease-in-out infinite blink;
}

.trail .calls .tools, .trail .answered {
  margin: 0 0 4px calc(1.2em + 8px);
}

.trail .tools li {
  display: flex;
  align-items:  center;
  gap: 8px;
  line-height: 1.9;
}

.trail .tools li i {
  background: var(--ok);
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.trail .tools li.is-run i {
  background: var(--busy);
  animation: .9s ease-in-out infinite blink;
}

.trail .tools li.is-error i {
  background: var(--fail);
}

.trail .src {
  color: var(--ink);
  flex: none;
}

.trail .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.trail .chars {
  flex: none;
  margin-left: auto;
}

.trail .chars.is-big {
  color: var(--accent);
  font-weight: 600;
}

.trail .answered {
  color: var(--mute);
}

.trail .foot {
  border-top: 1px solid var(--line);
  margin: 6px 0 0;
  padding-top: 6px;
}

@media (max-width: 480px) {
  .trail .call {
    grid-template-columns: 1.2em 6.6em 4.6em 6.4em 1fr;
  }

  .trail .bar {
    display: none;
  }
}

.prose > .block:first-child > :first-child {
  margin-top: 0;
}

.prose p, .prose ul, .prose ol {
  margin: 0 0 12px;
}

.prose ul, .prose ol {
  padding-left: 20px;
}

.prose h1, .prose h2, .prose h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose code {
  font-family: var(--mono);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: 1px 5px;
  font-size: .88em;
}

.prose pre {
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 12px 14px;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose .code-block {
  contain: inline-size;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  margin: 1em 0;
}

.prose > .code-block:first-child {
  margin-top: 0;
}

.prose .code-block pre {
  background: none;
  margin: 0;
  padding-top: 2px;
}

.code-head {
  display: flex;
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
  user-select: none;
  justify-content: flex-end;
  padding: 4px 8px 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.code-head .copy {
  border-radius: var(--radius-sm);
  text-align: end;
  padding: 2px 6px;
}

.code-head .copy:hover:not(:disabled) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.code-act {
  transition: opacity .15s;
}

.code-act.is-wait {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .code-act {
    transition: none;
  }
}

.prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}

.prose th, .prose td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  padding: 7px 14px 7px 0;
}

.prose th {
  font-weight: 650;
}

.prose blockquote {
  border-left: 2px solid var(--line);
  color: var(--mute);
  margin: 0 0 12px;
  padding-left: 14px;
}

.composer {
  position: sticky;
  max-width: calc(var(--column)  + 48px);
  display: flex;
  background: linear-gradient(to top, var(--field) 70%, transparent);
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 24px 24px;
  bottom: 0;
}

.is-empty .composer {
  margin-bottom: calc(58dvh - 80px);
}

.composer .box {
  display: flex;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hair-strong), var(--pop-shadow);
  border-radius: 31px;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 10px 24px;
  transition: box-shadow .2s;
}

.composer .box:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--hair-strong)), var(--pop-shadow);
}

.app.is-over .composer .box {
  box-shadow: 0 0 0 1px var(--accent), var(--pop-shadow);
}

.composer .box-line {
  display: flex;
  align-items:  flex-end;
  gap: 12px;
}

.composer textarea {
  resize: none;
  outline: 0;
  color: var(--ink);
  font: inherit;
  background: none;
  border: 0;
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  font-size: 17px;
  line-height: 1.6;
}

.composer textarea::placeholder {
  color: var(--mute);
}

.send {
  color: var(--accent);
  padding: 10px 0;
  font-size: 14px;
  font-weight: 650;
}

.send:disabled {
  color: var(--mute);
  cursor: default;
}

.composer .send {
  display: flex;
  background: var(--btn);
  color: var(--on-btn);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
  padding: 0;
  transition: background .2s, color .2s;
}

.composer .send:disabled {
  background: var(--hover);
  color: var(--mute);
}

.composer .send:focus-visible {
  border-radius: 50%;
}

.composer .send.orb {
  position: relative;
  overflow: hidden;
  background: var(--cosmos-deep);
}

.orb .sky {
  position: absolute;
  filter: saturate(1.6);
  animation: 16s steps(160, end) infinite orb-hue;
  inset: 0;
}

.orb .sky i {
  position: absolute;
  mix-blend-mode: screen;
  inset: -40%;
}

.orb .c1 {
  background: radial-gradient(circle at 30% 30%, var(--cosmos-5), transparent 38%), radial-gradient(circle at 72% 70%, var(--cosmos-2), transparent 36%);
  animation: 7s steps(70, end) infinite orb-turn;
}

.orb .c2 {
  background: radial-gradient(circle at 70% 28%, var(--cosmos-6), transparent 36%), radial-gradient(circle at 30% 74%, var(--cosmos-4), transparent 34%);
  animation: 11s steps(110, end) infinite reverse orb-turn;
}

.orb .c3 {
  background: radial-gradient(circle at 50% 50%, var(--cosmos-1), transparent 40%), radial-gradient(circle at 62% 38%, var(--cosmos-7), transparent 26%);
  animation: 6s steps(60, end) infinite orb-breathe;
}

.orb .stop {
  position: relative;
  background: var(--cosmos-star);
  opacity: 0;
  border-radius: 2px;
  width: 11px;
  height: 11px;
  transition: opacity .15s;
}

.orb:hover .stop {
  opacity: 1;
}

.orb:focus-visible .stop {
  opacity: 1;
}

@keyframes orb-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orb-breathe {
  50% {
    opacity: .25;
  }
}

@keyframes orb-hue {
  to {
    filter: saturate(1.6) hue-rotate(360deg);
  }
}

.box-hint {
  color: var(--mute);
  margin: 2px 0 0 18px;
  font-size: 12px;
}

.composer .updates-line {
  display: flex;
  color: var(--mute);
  text-align: left;
  align-items:  center;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 0 18px;
  font-size: 12px;
}

.composer .updates-line:hover {
  color: var(--ink);
}

.composer .updates-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-frame {
  position: fixed;
  z-index: 1;
  border: 1px dashed var(--hair-strong);
  border-radius: var(--radius);
  pointer-events: none;
  animation: .15s ease-out both fade;
  bottom: 16px;
}

.drop-frame i {
  position: absolute;
  border: 0 solid var(--accent);
  width: 14px;
  height: 14px;
}

.drop-frame i:first-child {
  border-top-left-radius: var(--radius);
  border-width: 2px 0 0 2px;
  top: -1px;
  left: -1px;
}

.drop-frame i:nth-child(2) {
  border-top-right-radius: var(--radius);
  border-width: 2px 2px 0 0;
  top: -1px;
  right: -1px;
}

.drop-frame i:nth-child(3) {
  border-bottom-left-radius: var(--radius);
  border-width: 0 0 2px 2px;
  bottom: -1px;
  left: -1px;
}

.drop-frame i:nth-child(4) {
  border-bottom-right-radius: var(--radius);
  border-width: 0 2px 2px 0;
  bottom: -1px;
  right: -1px;
}

.sheet {
  position: fixed;
  z-index: 5;
  background: var(--scrim);
  inset: 0;
}

.bar .log {
  position: relative;
  border-radius: var(--radius-btn);
  color: var(--mute);
  white-space: nowrap;
  padding: 4px 10px;
  transition: color .15s, background .15s;
  font-size: 14px;
}

.bar .log:hover, .bar .log[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}

.bar .log .new-dot {
  position: absolute;
  top: 3px;
  right: 2px;
}

.bar .log + .actions {
  margin-left: auto;
}

.recent {
  position: fixed;
  z-index: 5;
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
  outline: none;
  flex-direction: column;
  width: min(360px, 100vw - 32px);
  top: 72px;
  bottom: 16px;
  left: 16px;
}

.recent-top {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  padding: 14px 12px 10px 18px;
}

.recent-top h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.recent-top .icon-btn {
  margin: -1px -6px -1px 0;
}

.recent-list {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 2px 12px 16px;
}

.recent-foot {
  display: grid;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  gap: 8px;
  padding: 10px 18px 12px;
  font-size: 12px;
}

.recent-foot p {
  margin: 0;
}

.mini {
  position: relative;
}

.mini .hit {
  display: grid;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  text-align: left;
  gap: 3px;
  width: 100%;
  padding: 10px 12px 9px;
  transition: box-shadow .15s, border-color .15s;
}

.mini .hit:hover {
  box-shadow: var(--card-shadow-hover);
}

.mini .hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini .row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 20px;
}

.mini .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}

.mini time {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11.5px;
}

.mini .new {
  background: var(--accent);
  border-radius: 50%;
  flex: none;
  align-self:  center;
  width: 7px;
  height: 7px;
}

.mini .sub {
  color: var(--mute);
  align-items:  center;
  gap: 5px;
  font-size: 12px;
  line-height: 17px;
}

.mini .dot {
  background: var(--hair-strong);
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.mini.k-brief .dot, .mini.k-schedule .dot {
  background: var(--kind-event);
}

.mini.k-request .dot, .mini.k-card .dot {
  background: var(--kind-task);
}

.mini.k-send .dot {
  background: var(--accent);
}

.mini.k-memo .dot, .mini.k-source .dot {
  background: var(--kind-await);
}

.mini.k-capture .dot {
  background: var(--kind-deadline);
}

.mini.k-authmail .dot {
  background: var(--accent);
}

.mini.k-authmail.s-unverified .dot {
  background: var(--fail);
}

.mini.k-request.t-reply .dot {
  background: var(--accent);
}

.mini.k-request.t-failed .dot {
  background: var(--fail);
}

.mini.k-request.t-review .dot {
  background: var(--ok);
}

.mini.k-request.t-working .dot {
  position: relative;
  background: none;
}

.mini.k-request.t-working .dot:before {
  content: "";
  position: absolute;
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  border-radius: 50%;
  inset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .mini.k-request.t-working .dot:before {
    animation: none;
  }
}

.mini.k-request.t-waiting .dot {
  box-shadow: inset 0 0 0 1.5px var(--mute);
  background: none;
}

.mini.k-request.t-draft .dot {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: none;
}

.mini.k-request.t-closed .dot {
  background: var(--hair-strong);
}

.mini .num {
  font-family: var(--mono);
  color: var(--mute);
  flex: none;
  font-size: 11px;
}

.mini .row.asked {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
}

.mini.s-running .dot {
  background: var(--busy);
  animation: 1.6s ease-in-out infinite breathe;
}

.mini.s-cut .dot {
  background: var(--fail);
}

.mini .k {
  color: var(--ink);
  flex: none;
  font-weight: 600;
}

.mini .n {
  box-sizing: border-box;
  border: 1px solid var(--hair-strong);
  text-align: center;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 15px;
}

.mini .sep {
  flex: none;
}

.mini .sep:last-child {
  display: none;
}

.mini .l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mini .l .warn {
  color: var(--fail);
}

.mini .l.is-wait {
  opacity: .55;
}

.mini .acts {
  position: absolute;
  display: flex;
  background: var(--surface);
  opacity: 0;
  gap: 2px;
  padding-left: 6px;
  transition: opacity .12s;
  top: 7px;
  right: 7px;
}

.mini:hover .acts, .mini:focus-within .acts {
  opacity: 1;
}

.mini:has( > .acts):-webkit-any(:hover, :focus-within) time {
  visibility: hidden;
}

.mini:has( > .acts):-moz-any(:hover, :focus-within) time {
  visibility: hidden;
}

.mini:has( > .acts):is(:hover, :focus-within) time {
  visibility: hidden;
}

.mini .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 1px 7px;
  font-size: 11.5px;
  line-height: 18px;
}

.mini .acts button:hover {
  color: var(--ink);
  background: var(--hover);
}

@media (hover: none) {
  .mini .acts {
    position: static;
    opacity: 1;
    background: none;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

.bin-ask {
  display: flex;
  animation: .12s ease-out bin-ask-in;
  align-items:  center;
  gap: 2px;
  font-size: 12px;
}

.bin-ask .q {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  margin-right: 4px;
}

.bin-ask button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  flex: none;
  padding: 1px 8px;
  font-size: 11.5px;
  line-height: 18px;
}

.bin-ask button:hover {
  color: var(--ink);
  background: var(--hover);
}

.bin-ask button.is-go {
  color: var(--ink);
  font-weight: 600;
}

.mini .bin-ask {
  position: absolute;
  background: var(--surface);
  height: 22px;
  bottom: 6px;
  left: 13px;
  right: 7px;
}

.mini:has( > .bin-ask) .sub {
  visibility: hidden;
}

.mini .auth-open {
  position: absolute;
  border: 1px solid var(--btn);
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  text-decoration: none;
  padding: 0 10px;
  transition: opacity .15s;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  top: 32px;
  right: 9px;
}

.mini .auth-open:hover {
  opacity: .88;
}

.mini .auth-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini .auth-open.is-again {
  border-color: var(--hair-strong);
  background: var(--surface);
  color: var(--ink);
}

.mini:has( > .auth-open) .sub {
  padding-right: 104px;
}

.mini:has( > .bin-ask) > .auth-open {
  visibility: hidden;
}

@keyframes bin-ask-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bin-ask {
    animation: none;
  }
}

@media (hover: none) {
  .mini .bin-ask {
    position: static;
    background: none;
    height: auto;
    margin-top: 4px;
  }

  .mini:has( > .bin-ask) .sub {
    visibility: visible;
  }
}

.stack {
  position: relative;
  isolation: isolate;
}

.stack:not(.is-single) {
  padding-bottom: 10px;
}

.stack > .mini:not(.behind) {
  z-index: 2;
}

.stack:not(.is-single) > .mini:not(.behind) .hit {
  background: linear-gradient(var(--surface), var(--surface)), var(--field);
}

.mini.behind {
  position: absolute;
  pointer-events: none;
  inset: 5px 7px;
}

.mini.behind.b1 {
  z-index: 1;
}

.mini.behind.b2 {
  inset: 10px 14px 0;
}

.mini.behind .hit {
  overflow: hidden;
  background: var(--field);
  height: 100%;
}

.mini.behind .hit > * {
  visibility: hidden;
}

.mini.behind {
  transition: translate .2s;
}

.stack:hover .mini.b1 {
  translate: 3px 1px;
}

.stack:has(.hit[aria-expanded="true"]) .mini.b1 {
  translate: 3px 1px;
}

.stack:hover .mini.b2 {
  translate: 6px 2px;
}

.stack:has(.hit[aria-expanded="true"]) .mini.b2 {
  translate: 6px 2px;
}

.mini .hit[aria-expanded="true"] {
  box-shadow: 0 0 0 1px var(--hair-strong), var(--card-shadow-hover);
}

.mini .hit[aria-current="true"], .mini .hit[aria-current="true"]:hover {
  box-shadow: 0 0 0 1.5px var(--accent), var(--card-shadow);
}

.spread {
  --d: min(360px, calc(100vw - 32px));
  position: fixed;
  z-index: 5;
  top: 72px;
  bottom: 16px;
  left: calc(var(--d)  + 24px);
  width: min(var(--d), calc(100vw - var(--d)  - 40px));
  display: flex;
  pointer-events: none;
  flex-direction: column;
}

.spread-gap {
  flex: 0 1 var(--at, 0px);
  min-height: 0;
}

.spread-box {
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
  pointer-events: auto;
  flex-direction: column;
  flex: none;
  max-height: 100%;
}

.spread-top {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 6px;
  padding: 10px 10px 2px 16px;
  font-size: 12px;
}

.spread-top .t {
  flex: 1;
}

.spread-top b {
  color: var(--ink);
  font-weight: 600;
}

.spread-top button:not(.icon-btn) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 8px;
  font-size: 12px;
}

.spread-top button:not(.icon-btn):hover {
  color: var(--ink);
  background: var(--hover);
}

.spread-top .icon-btn {
  margin: -2px -6px -2px 0;
}

.spread-top .back {
  display: none;
}

.spread-list {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  flex: auto;
  gap: 8px;
  min-height: 0;
  padding: 6px 12px 14px;
}

.spread-foot {
  display: flex;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:  center;
  gap: 6px;
  padding: 8px 12px 10px;
  font-size: 12px;
}

.spread-foot p {
  color: var(--ink);
  flex: 100%;
  margin: 0 0 2px 4px;
  line-height: 1.5;
}

.spread-foot button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 10px;
}

.spread-foot button:hover {
  color: var(--ink);
  background: var(--hover);
}

.spread-foot button.is-warn {
  color: var(--fail);
  font-weight: 600;
}

.trash-note {
  color: var(--mute);
  margin: 4px 16px;
  font-size: 12px;
  line-height: 1.5;
}

.spread-list .hint {
  color: var(--mute);
  margin: 12px 4px;
  font-size: 12.5px;
}

.recent .due-open {
  display: flex;
  box-sizing: border-box;
  border-radius: var(--radius-btn);
  text-align: left;
  word-break: keep-all;
  color: var(--ink);
  align-items:  flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 19px;
}

.recent .due-open:before {
  content: "";
  background: var(--accent);
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6.5px;
}

.recent .due-open:hover, .recent .due-open[aria-expanded="true"] {
  background: var(--hover);
}

.recent .due-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini .n.has-due {
  border-color: var(--accent);
  color: var(--accent);
}

.mini.is-done .hit .row {
  opacity: .58;
}

.mini.is-done .hit:-webkit-any(:hover, :focus-visible, [aria-current="true"]) .row {
  opacity: 1;
}

.mini.is-done .hit:-moz-any(:hover, :focus-visible, [aria-current="true"]) .row {
  opacity: 1;
}

.mini.is-done .hit:is(:hover, :focus-visible, [aria-current="true"]) .row {
  opacity: 1;
}

.spread-day {
  color: var(--mute);
  margin: 6px 4px -2px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
}

.spread-day:first-child {
  margin-top: 0;
}

.spread-box.is-console, .requests .console {
  --q-bg: color-mix(in srgb, var(--ink) 90%, var(--accent));
  --q-ink: color-mix(in srgb, var(--field) 94%, transparent);
  --q-mute: color-mix(in srgb, var(--field) 58%, transparent);
  --q-line: color-mix(in srgb, var(--field) 16%, transparent);
  --q-dot: color-mix(in srgb, var(--field) 9%, transparent);
  --q-accent: color-mix(in srgb, var(--accent) 55%, var(--field));
  --q-ok: color-mix(in srgb, var(--ok) 65%, var(--field));
  --q-fail: color-mix(in srgb, var(--fail) 65%, var(--field));
  --q-busy: color-mix(in srgb, var(--busy) 65%, var(--field));
  background-color: var(--q-bg);
  background-image: radial-gradient(var(--q-dot) 1px, transparent 1.3px);
  color: var(--q-ink);
  background-size: 14px 14px;
}

:root[data-scheme="dark"] :is(.spread-box.is-console, .requests .console) {
  --q-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
  --q-ink: var(--ink);
  --q-mute: var(--mute);
  --q-line: color-mix(in srgb, var(--ink) 16%, transparent);
  --q-dot: color-mix(in srgb, var(--ink) 9%, transparent);
  --q-accent: var(--accent);
  --q-ok: var(--ok);
  --q-fail: var(--fail);
  --q-busy: var(--busy);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) :is(.spread-box.is-console, .requests .console) {
    --q-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
    --q-ink: var(--ink);
    --q-mute: var(--mute);
    --q-line: color-mix(in srgb, var(--ink) 16%, transparent);
    --q-dot: color-mix(in srgb, var(--ink) 9%, transparent);
    --q-accent: var(--accent);
    --q-ok: var(--ok);
    --q-fail: var(--fail);
    --q-busy: var(--busy);
  }
}

.spread-box.is-console {
  border-color: var(--q-line);
}

.is-console .spread-top {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--q-mute);
  font-size: 11px;
}

.is-console .spread-top b {
  color: var(--q-ink);
}

.is-console .spread-top button:not(.icon-btn), .is-console .spread-foot button {
  color: var(--q-mute);
}

.is-console .spread-top button:not(.icon-btn):hover, .is-console .spread-foot button:hover {
  color: var(--q-ink);
  background: color-mix(in srgb, var(--q-ink) 10%, transparent);
}

.is-console .spread-foot {
  border-top-color: var(--q-line);
  color: var(--q-mute);
}

.is-console .turn-head {
  margin: 2px 4px;
}

.turn-head .main, .requests .console .c-head .main {
  color: var(--q-ink);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.turn-head .aux {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--q-mute);
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.is-console .spread-day.lane {
  display: flex;
  font-family: var(--mono);
  letter-spacing: .08em;
  color: var(--q-mute);
  align-items:  center;
  gap: 6px;
  margin: 10px 4px 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
}

.is-console .spread-day.lane b {
  color: var(--q-ink);
  font-weight: 600;
}

.is-console .spread-day.lane.t-reply {
  color: var(--q-accent);
}

.is-console .mini.k-request .dot {
  background: var(--q-mute);
  box-shadow: none;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

:is(.is-console, .requests .console) .lamp {
  background: var(--q-mute);
  box-shadow: none;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.is-console .mini.k-request.t-reply .dot {
  background: var(--q-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 24%, transparent);
}

:is(.is-console, .requests .console) .t-reply .lamp {
  background: var(--q-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 24%, transparent);
}

.is-console .mini.k-request.t-failed .dot {
  background: var(--q-fail);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-fail) 22%, transparent);
}

:is(.is-console, .requests .console) .t-failed .lamp {
  background: var(--q-fail);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-fail) 22%, transparent);
}

.is-console .mini.k-request.t-review .dot {
  background: var(--q-ok);
}

:is(.is-console, .requests .console) .t-review .lamp {
  background: var(--q-ok);
}

.is-console .mini.k-request.t-working .dot {
  background: var(--q-busy);
}

:is(.is-console, .requests .console) .t-working .lamp {
  background: var(--q-busy);
}

.requests .console .c-row.t-working .lamp, .is-console .mini.k-request.t-working .dot {
  position: relative;
  background: none;
}

.requests .console .c-row.t-working .lamp:before {
  content: "";
  position: absolute;
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  border-radius: 50%;
  inset: -2px;
}

.is-console .mini.k-request.t-waiting .dot {
  box-shadow: inset 0 0 0 1.5px var(--q-mute);
  background: none;
}

:is(.is-console, .requests .console) .t-waiting .lamp {
  box-shadow: inset 0 0 0 1.5px var(--q-mute);
  background: none;
}

.is-console .mini.k-request.t-draft .dot {
  box-shadow: inset 0 0 0 1.5px var(--q-accent);
  background: none;
}

:is(.is-console, .requests .console) .t-draft .lamp {
  box-shadow: inset 0 0 0 1.5px var(--q-accent);
  background: none;
}

.is-console .mini.k-request.t-closed .dot {
  background: var(--q-line);
}

:is(.is-console, .requests .console) .t-closed .lamp {
  background: var(--q-line);
}

@media (prefers-reduced-motion: reduce) {
  .requests .console .c-row.t-working .lamp:before {
    animation: none;
  }
}

.is-console .mini .hit {
  border-color: var(--q-line);
  background: color-mix(in srgb, var(--q-ink) 3%, transparent);
  box-shadow: none;
  border-radius: 8px;
}

.is-console .mini .hit:hover {
  background: color-mix(in srgb, var(--q-ink) 8%, transparent);
  box-shadow: none;
}

.is-console .mini .hit:focus-visible {
  outline-color: var(--q-accent);
}

.is-console .mini .hit[aria-current="true"], .is-console .mini .hit[aria-current="true"]:hover {
  border-color: var(--q-accent);
  box-shadow: inset 0 0 0 1px var(--q-accent);
}

.is-console .mini .t {
  color: var(--q-ink);
}

.is-console .mini :is(time, .sub, .num, .acts button) {
  color: var(--q-mute);
}

.is-console .mini .num {
  color: var(--q-ink);
}

.is-console .mini .row.asked {
  color: color-mix(in srgb, var(--q-ink) 84%, transparent);
}

.is-console .mini.t-reply .row.asked {
  color: var(--q-ink);
}

.is-console .mini .acts {
  background: var(--q-bg);
}

.is-console .mini .new {
  background: var(--q-accent);
}

.turn-head .main .part, .requests .console .c-head .main .part {
  white-space: nowrap;
}

.spread-foot button.is-go {
  color: var(--ink);
  font-weight: 600;
}

.recent-trash {
  border-top: 1px solid var(--hair);
  padding: 6px 10px 0;
}

.recent-trash + .recent-foot {
  border-top: 0;
  padding-top: 4px;
}

.recent .trash-open {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 4px 8px;
  font-size: 12px;
}

.recent .trash-open:hover {
  color: var(--ink);
  background: var(--hover);
}

.spread-box.is-trash .mini .acts {
  opacity: 1;
}

.spread-box.is-trash .mini .acts button {
  color: var(--ink);
}

.spread-box.is-trash .mini time {
  visibility: hidden;
}

.recent .trash-open .n {
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.recent .trash-open[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}

.recent-toast-slot {
  position: relative;
  height: 0;
}

.recent-toast {
  position: absolute;
  z-index: 1;
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--pop-shadow);
  align-items:  center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  font-size: 12.5px;
  bottom: 10px;
  left: 12px;
  right: 12px;
}

.recent-toast .t {
  color: var(--ink);
  flex: none;
}

.recent-toast .s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  flex: 1;
  min-width: 0;
}

.recent-toast.is-fail .t {
  color: var(--fail);
  flex: 1;
}

.recent-toast button:not(.icon-btn) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  flex: none;
  padding: 2px 8px;
  font-size: 12px;
}

.recent-toast button:not(.icon-btn):hover {
  color: var(--ink);
  background: var(--hover);
}

.recent-toast .undo {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 1127px) {
  .app.has-original .spread {
    width: var(--d);
    left: 16px;
  }

  .app.has-original .spread-gap {
    display: none;
  }

  .app.has-original .spread-box {
    flex: auto;
  }

  .app.has-original .spread-box:not(.is-console) {
    background: linear-gradient(var(--pop), var(--pop)), var(--field);
  }

  .app.has-original .spread-top {
    padding: 12px 12px 4px 8px;
  }

  .app.has-original .spread-top .back {
    display: inline-block;
  }

  .app.has-original .spread-top .close {
    display: none;
  }
}

@media (max-width: 699px) {
  .spread {
    width: var(--d);
    left: 16px;
  }

  .spread-gap {
    display: none;
  }

  .spread-box {
    flex: auto;
  }

  .spread-box:not(.is-console) {
    background: linear-gradient(var(--pop), var(--pop)), var(--field);
  }

  .spread-top {
    padding: 12px 12px 4px 8px;
  }

  .spread-top .back {
    display: inline-block;
  }

  .spread-top .close {
    display: none;
  }
}

@media (max-width: 640px) {
  .spread, .app.has-original .spread {
    width: auto;
    inset: 0;
  }

  .spread-box {
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  .app.panel-front .original {
    z-index: 6;
  }
}

@media (min-width: 761px) {
  .recent-beside .original.first {
    right: auto;
    left: min(calc(var(--recent-edge)  + 32px), calc(100vw - 16px - var(--original-w)));
  }

  .recent-beside.recent-two .original.second {
    top: 72px;
    right: auto;
    left: var(--second-left);
    width: var(--second-w);
    animation-name: source-in;
  }

  .recent-beside.recent-two .app.has-second .original.first {
    bottom: 16px;
  }

  .recent-beside:not(.recent-two) .original.second {
    top: calc(58% + 6px);
    right: auto;
    left: min(calc(var(--recent-edge)  + 32px), calc(100vw - 16px - var(--original-w)));
    animation-name: source-up;
  }

  .recent-beside:not(.recent-two) .app.has-second .original.first {
    bottom: calc(42% + 6px);
  }
}

@media (min-width: 1200px) {
  .recent-open:not(.recent-beside) .original.second {
    left: calc(var(--recent-edge)  + 16px);
  }
}

.recent .more {
  border-radius: var(--radius-btn);
  color: var(--mute);
  align-self:  center;
  margin-top: 4px;
  padding: 5px 12px;
  font-size: 12px;
}

.recent .more:hover {
  color: var(--ink);
  background: var(--hover);
}

.recent .talks h4 {
  color: var(--mute);
  margin: 10px 6px 4px;
  font-size: 12px;
  font-weight: 600;
}

.recent .talks .hint {
  color: var(--mute);
  margin: 0 6px;
  font-size: 12px;
}

.recent .talks ul {
  display: grid;
  list-style: none;
  gap: 1px;
  margin: 0;
  padding: 0;
}

.recent .talks li {
  display: flex;
  border-radius: var(--radius-btn);
  align-items:  center;
  min-width: 0;
}

.recent .talks li:hover, .recent .talks li:focus-within {
  background: var(--hover);
}

.recent .talks .go {
  display: flex;
  text-align: left;
  color: var(--ink);
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.recent .talks .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.recent .talks time, .recent .talks .st {
  color: var(--mute);
  flex: none;
  font-size: 11.5px;
}

.recent .talks .rm {
  border-radius: var(--radius-btn);
  color: var(--mute);
  opacity: 0;
  flex: none;
  padding: 2px 8px;
  font-size: 11.5px;
}

.recent .talks li:hover .rm, .recent .talks li:focus-within .rm {
  opacity: 1;
}

.recent .talks .rm:hover {
  color: var(--ink);
  background: var(--field);
}

.recent .talks .bin-ask {
  flex: none;
  padding-right: 2px;
}

.recent .talks .bin-ask .q {
  flex: none;
}

.recent .talks .bin-ask button:hover {
  background: var(--field);
}

@media (hover: none) {
  .recent .talks .rm {
    opacity: 1;
  }
}

.recent-skeleton {
  display: grid;
  gap: 8px;
}

.mini.is-ghost {
  display: grid;
  box-sizing: border-box;
  border-radius: var(--radius-card);
  background: var(--hover);
  animation: 1.6s ease-in-out infinite breathe;
  align-content:  center;
  gap: 9px;
  height: 58px;
  padding: 0 12px;
}

.mini.is-ghost span {
  border-radius: var(--radius-sm);
  background: var(--hair);
  width: 62%;
  height: 9px;
}

.mini.is-ghost span + span {
  width: 38%;
}

.recent-state {
  text-align: center;
  color: var(--mute);
  padding: 32px 12px;
  font-size: 13px;
}

.recent-state p {
  margin: 0;
}

.recent-state .hint {
  margin-top: 6px;
  font-size: 12px;
}

.recent-state button {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  margin-top: 12px;
  padding: 5px 14px;
  font-size: 13px;
}

.recent .look {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.recent .look div {
  display: flex;
  align-items:  center;
  gap: 2px;
}

.recent .look span {
  color: var(--mute);
  flex: none;
  width: 40px;
  font-size: 12px;
}

.recent .look button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 8px;
  transition: color .15s, background .15s;
}

.recent .look button:hover {
  color: var(--ink);
  background: var(--hover);
}

.recent .look button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
}

.recent-foot .links {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 12px;
}

.recent-foot .links button {
  position: relative;
  color: var(--mute);
}

.recent-foot .links button:hover {
  color: var(--ink);
}

.recent-foot .links .new-dot {
  margin-left: 4px;
}

.recent-foot .src {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.recent-foot .src .is-off {
  color: var(--fail);
}

.fly {
  position: fixed;
  z-index: 8;
  pointer-events: none;
}

.fly-card {
  display: grid;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--pop-shadow);
  color: var(--mute);
  align-content:  center;
  gap: 1px;
  height: 100%;
  padding: 0 12px;
  font-size: 11.5px;
}

.fly-card b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.original.result .acts {
  display: flex;
  gap: 2px;
}

.original.result .body {
  white-space: normal;
}

.original.result .ask {
  color: var(--mute);
  margin: 0 0 10px;
}

.original .schedule {
  width: auto;
  margin: 4px 0 12px;
  transform: none;
}

.original .schedule header h3 {
  display: none;
}

.problem-line {
  color: var(--fail);
  flex-basis: 100%;
  order: -1;
  margin: 0;
  font-size: 12px;
}

.talk-end {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 24px;
}

.talk-end .copy-all {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 10px;
  font-size: 12px;
}

.talk-end .copy-all:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

@media (max-width: 640px) {
  .recent {
    border: 0;
    border-radius: 0;
    width: auto;
    inset: 0;
  }
}

::view-transition-old(root) {
  animation-duration: .2s;
}

::view-transition-new(root) {
  animation-duration: .2s;
}

.today {
  position: absolute;
  background: var(--field);
  border-left: 1px solid var(--line);
  display: flex;
  animation: .18s ease-out slide-left;
  flex-direction: column;
  width: min(420px, 92vw);
  padding: 20px 20px 16px;
  inset: 0 0 0 auto;
}

.today header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-bottom: 12px;
}

.today h3 {
  margin: 0;
  font-size: 15px;
}

.today .range {
  display: flex;
  color: var(--mute);
  gap: 12px;
  font-size: 13px;
}

.today .range button.is-on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.today .list {
  overflow-y: auto;
  flex: 1;
  transition: opacity .2s;
}

.today .list.is-stale {
  opacity: .5;
}

.requests .groups {
  display: flex;
  gap: 16px;
  margin: -4px 0 10px;
  font-size: 13px;
}

.requests .groups button {
  display: inline-flex;
  color: var(--mute);
  align-items: baseline;
  gap: 5px;
  padding: 4px 1px;
}

.requests .groups button:hover {
  color: var(--ink);
}

.requests .groups button.is-on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.requests .groups b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.requests .groups .asks {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.requests .console {
  display: grid;
  border-radius: var(--radius-card);
  gap: 4px;
  margin: 0 0 12px;
  padding: 14px 12px 12px;
}

.requests .console .c-head {
  margin: 0 4px 2px;
}

.requests .console .c-tabs {
  position: sticky;
  z-index: 1;
  display: flex;
  border-bottom: 1px solid var(--q-line);
  background: var(--q-bg);
  flex-wrap: wrap;
  column-gap: 16px;
  margin: 2px -12px 4px;
  padding: 0 16px;
  top: 0;
}

.requests .console .c-tab {
  display: inline-flex;
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--q-mute);
  align-items:  center;
  gap: 6px;
  padding: 8px 1px 7px;
  font-size: 11.5px;
  line-height: 16px;
}

.requests .console .c-tab b {
  font-variant-numeric: tabular-nums;
  color: var(--q-ink);
  font-weight: 600;
}

.requests .console .c-tab.t-reply {
  color: var(--q-accent);
}

.requests .console .c-tab:hover, .requests .console .c-tab[aria-selected="true"] {
  color: var(--q-ink);
}

.requests .console .c-tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--q-accent);
}

.requests .console .c-tab:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: -2px;
}

.requests .console .c-panel {
  display: grid;
  animation: .14s ease-out fade;
  gap: 4px;
}

.requests .console .c-tools {
  display: flex;
  font-family: var(--mono);
  letter-spacing: .08em;
  color: var(--q-mute);
  align-items:  center;
  gap: 6px;
  margin: 0 4px 2px;
  font-size: 10.5px;
  line-height: 20px;
}

.requests .console .c-empty {
  color: var(--q-mute);
  margin: 6px 4px;
  font-size: 12px;
}

.requests .console .c-detail {
  color: var(--ink);
}

.requests .console .c-detail > .dm {
  max-width: none;
  margin: 2px 0 6px;
}

@media (prefers-reduced-motion: reduce) {
  .requests .console .c-panel {
    animation: none;
  }
}

.requests .console .c-row {
  display: grid;
  box-sizing: border-box;
  border: 1px solid var(--q-line);
  background: color-mix(in srgb, var(--q-ink) 3%, transparent);
  color: var(--q-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
}

.requests .console .c-row:hover {
  background: color-mix(in srgb, var(--q-ink) 8%, transparent);
}

.requests .console .c-row:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}

.requests .console .c-row[aria-expanded="true"] {
  border-color: var(--q-accent);
  box-shadow: inset 0 0 0 1px var(--q-accent);
}

.requests .console .r1 {
  display: flex;
  align-items:  center;
  gap: 7px;
  min-width: 0;
  line-height: 20px;
}

.requests .console .c-row .num {
  font-family: var(--mono);
  color: var(--q-ink);
  flex: none;
  font-size: 11px;
}

.requests .console .r1 .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
}

.requests .console .c-row time {
  font-family: var(--mono);
  color: var(--q-mute);
  flex: none;
  font-size: 11px;
}

.requests .console .r2 {
  display: flex;
  color: var(--q-mute);
  gap: 8px;
  min-width: 0;
  padding-left: 14px;
  font-size: 12px;
  line-height: 17px;
}

.requests .console .r2 .s {
  font-family: var(--mono);
  flex: none;
  font-size: 11px;
}

.requests .console .r2 .asked {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--q-ink) 84%, transparent);
  min-width: 0;
}

.requests .console .t-reply .r2 .asked {
  color: var(--q-ink);
}

.requests .console .c-tools .close-all {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  font: inherit;
  color: var(--q-ink);
  margin-left: auto;
  padding: 0 8px;
}

.requests .console :-webkit-any(.confirm, .closed-all) {
  display: flex;
  color: var(--q-ink);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 18px;
}

.requests .console :-moz-any(.confirm, .closed-all) {
  display: flex;
  color: var(--q-ink);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 18px;
}

.requests .console :is(.confirm, .closed-all) {
  display: flex;
  color: var(--q-ink);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 18px;
}

.requests .console :-webkit-any(.confirm, .closed-all) button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--q-ink);
  padding: 1px 10px;
}

.requests .console :-moz-any(.confirm, .closed-all) button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--q-ink);
  padding: 1px 10px;
}

.requests .console :is(.confirm, .closed-all) button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--q-ink);
  padding: 1px 10px;
}

.requests .console .confirm .go {
  border-color: var(--q-accent);
  color: var(--q-accent);
  font-weight: 600;
}

.requests .console .c-tools .close-all:hover:not(:disabled) {
  background: var(--hover);
}

.requests .console :-webkit-any(.confirm, .closed-all) button:hover:not(:disabled) {
  background: var(--hover);
}

.requests .console :-moz-any(.confirm, .closed-all) button:hover:not(:disabled) {
  background: var(--hover);
}

.requests .console :is(.confirm, .closed-all) button:hover:not(:disabled) {
  background: var(--hover);
}

.is-console .lane-more {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--q-ink);
  place-self:  flex-start start;
  margin: 0 4px;
  padding: 1px 10px;
  font-size: 12px;
  line-height: 18px;
}

.is-console .lane-more:hover {
  background: var(--hover);
}

.today h4, .today summary {
  color: var(--mute);
  margin: 0;
  padding: 10px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.today summary {
  cursor: pointer;
  border-top: 1px solid var(--line);
}

.today h4 b, .today summary b {
  color: var(--ink);
  margin-left: 4px;
  font-weight: 600;
}

.today ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.today li {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

.today li:last-child {
  border-bottom: 0;
}

.today .who {
  display: flex;
  color: var(--mute);
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.today .who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today .who time {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.today .subject {
  font-weight: 600;
}

.today .subject small {
  color: var(--mute);
  font-weight: 400;
}

.today .snippet {
  color: var(--mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin: 2px 0 0;
  font-size: 13px;
}

.today .junk-known, .today .known {
  color: var(--accent);
}

.today .known {
  margin: 2px 0 0;
  font-size: 13px;
}

.today .usage {
  color: var(--mute);
  margin: 12px 0 0;
  font-size: 12px;
}

.schedule {
  container-type: inline-size;
  animation: .3s ease-out both fade;
  width: min(100vw - 48px, 1040px);
  margin: 8px 0 20px 50%;
  transform: translateX(-50%);
}

.schedule header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.schedule h3 {
  margin: 0;
  font-size: 15px;
}

.schedule header small {
  color: var(--mute);
  font-size: 12px;
}

.schedule .week {
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.schedule .day {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding-top: 6px;
}

.schedule .day.is-today {
  border-top-color: var(--accent);
}

.schedule .day.is-past {
  opacity: .55;
}

.schedule h4 {
  color: var(--mute);
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
}

.schedule h4 em {
  color: var(--accent);
  margin-left: 6px;
  font-style: normal;
}

.schedule .dlong {
  display: none;
}

.schedule .day.is-sun h4 {
  color: var(--cal-sun);
}

.schedule .day.is-sat h4 {
  color: var(--cal-sat);
}

.schedule h4 :-webkit-any(.d-off, .d-obs) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
  margin-left: 6px;
  font-weight: 500;
}

.schedule h4 :-moz-any(.d-off, .d-obs) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
  margin-left: 6px;
  font-weight: 500;
}

.schedule h4 :is(.d-off, .d-obs) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
  margin-left: 6px;
  font-weight: 500;
}

.schedule h4 .d-obs {
  color: var(--mute);
  opacity: .8;
}

.schedule.month header nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.schedule.month header nav button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  padding: 3px 8px;
  transition: color .15s, background .15s;
  font-size: 12px;
}

.schedule.month header nav button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.schedule.month header nav button:disabled {
  opacity: .45;
  cursor: default;
}

.schedule.month .m-line {
  color: var(--ink);
  min-height: 1.5em;
  margin: -4px 0 10px;
  font-size: 13px;
}

.schedule.month[aria-busy] .m-grid {
  opacity: .7;
  transition: opacity .2s;
}

.schedule.month .m-grid {
  border-top: 1px solid var(--line);
}

.schedule.month .m-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule.month .m-wd {
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
}

.schedule.month .m-day {
  display: flex;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  height: 88px;
  padding: 4px 6px;
}

.schedule.month .m-day + .m-day {
  border-left: 1px solid var(--hair);
}

.schedule.month .m-day.is-out > * {
  opacity: .4;
}

.schedule.month .m-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  border-radius: var(--radius-sm);
}

.schedule.month .m-day.is-picked {
  background: var(--hover);
}

.schedule.month .d-num {
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  align-self:  flex-start;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 600;
}

.schedule.month .d-num:hover {
  text-decoration: underline;
}

.schedule.month .m-day.is-sun .d-num {
  color: var(--cal-sun);
}

.schedule.month :is(.m-wd, .m-day, .p-head b).is-sun {
  color: var(--cal-sun);
}

.schedule.month .m-day.is-sat .d-num {
  color: var(--cal-sat);
}

.schedule.month :is(.m-wd, .m-day, .p-head b).is-sat {
  color: var(--cal-sat);
}

.schedule.month :-webkit-any(.d-off, .d-obs, .d-att) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.45;
}

.schedule.month :-moz-any(.d-off, .d-obs, .d-att) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.45;
}

.schedule.month :is(.d-off, .d-obs, .d-att) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.45;
}

.schedule.month .d-off {
  color: var(--cal-sun);
}

.schedule.month .d-obs {
  color: var(--mute);
  opacity: .75;
}

.schedule.month .d-att {
  border-radius: var(--radius-sm);
  background: var(--hover);
  color: var(--ink);
  align-self:  flex-start;
  padding: 0 5px;
}

.schedule.month .d-cards {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
  margin-top: auto;
  font-size: 11px;
}

.schedule.month button.card-ref {
  color: var(--accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.schedule.month button.card-ref:hover {
  text-decoration: underline;
}

.schedule.month button.card-ref.is-closed {
  opacity: .5;
}

.schedule.month .d-more {
  color: var(--mute);
  font: inherit;
  padding: 0 1px;
}

.schedule.month .d-marks {
  display: none;
}

.schedule.month .m-pick {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 6px;
  font-size: 13px;
}

.schedule.month .p-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
}

.schedule.month .p-head .p-close {
  margin-left: auto;
}

.schedule.month .m-pick ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule.month .m-pick li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
}

.schedule.month .m-pick li.is-closed .p-t {
  color: var(--mute);
}

.schedule.month .m-pick li small, .schedule.month .p-none {
  color: var(--mute);
  font-size: 12px;
}

.schedule.month .p-none {
  margin: 0;
}

@container (width <= 560px) {
  .schedule.month .m-day {
    height: 46px;
    padding: 3px 4px;
  }

  .schedule.month :is(.m-day .d-off, .m-day .d-obs, .m-day .d-att, .d-cards) {
    display: none;
  }

  .schedule.month .d-marks {
    display: flex;
    gap: 3px;
    margin-top: auto;
  }

  .schedule.month .d-marks i {
    background: var(--mute);
    border-radius: 50%;
    width: 5px;
    height: 5px;
  }

  .schedule.month .d-marks i.mk-att {
    background: var(--accent);
  }

  .schedule.month header {
    flex-wrap: wrap;
  }
}

.schedule .card {
  --kind: var(--kind-event);
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding: 9px 11px 10px;
  transition: border-color .2s, box-shadow .2s, opacity .2s;
  font-size: 12px;
  line-height: 1.45;
}

.schedule .card:hover, .schedule .card:focus-within {
  box-shadow: var(--card-shadow-hover);
}

.schedule .card.is-deadline {
  --kind: var(--kind-deadline);
}

.schedule .card.is-task {
  --kind: var(--kind-task);
}

.schedule .card.is-await {
  --kind: var(--kind-await);
}

.schedule .card.is-check {
  border-style: dashed;
  border-color: var(--hair-strong);
  box-shadow: none;
}

.schedule .card.is-done b, .schedule .card.is-dismissed b, .schedule .card.is-cancelled b {
  text-decoration: line-through;
  text-decoration-color: var(--hair-strong);
}

.schedule .card.is-done, .schedule .card.is-dismissed, .schedule .card.is-cancelled, .schedule .card.is-snoozed {
  opacity: .45;
}

.schedule .card .top {
  display: flex;
  align-items:  center;
  gap: 6px;
  min-height: 20px;
}

.schedule .card .t {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.schedule .card .t:before, .dm .t:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: var(--kind);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 1px;
}

.schedule .card .num, .dm .num {
  font: 500 10.5px / 1.5 var(--mono);
  color: var(--mute);
  flex: none;
  margin-left: auto;
  transition: color .2s, border-color .2s;
}

.schedule .card .num:hover, .dm .num:hover {
  color: var(--accent);
}

.schedule .card b {
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 600;
}

.schedule .card .meta, .schedule .card .src {
  color: var(--mute);
  overflow-wrap: anywhere;
  font-size: 11px;
}

.schedule .card .src {
  opacity: .8;
}

.schedule .card .chk {
  color: var(--fail);
  font-size: 11px;
}

.schedule .card .moved {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.schedule .card .acts {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 2px;
  margin: 6px 0 0 -8px;
  transition: opacity .2s;
  font-size: 11px;
}

.schedule .card .acts span {
  padding: 2px 8px;
}

.schedule .card .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 8px;
  transition: color .15s, background .15s;
}

.schedule .card .acts button:hover {
  color: var(--ink);
  background: var(--hover);
}

@media (hover: hover) {
  .schedule .card.is-open .acts {
    opacity: .35;
  }

  .schedule .card.is-open:hover .acts, .schedule .card.is-open:focus-within .acts {
    opacity: 1;
  }
}

.schedule .card .ai {
  display: grid;
  border-radius: var(--radius-btn);
  color: var(--mute);
  flex: none;
  place-items:  center;
  height: 20px;
  padding: 0 6px;
  transition: color .2s, background .2s, box-shadow .2s, opacity .2s;
  font-size: 11px;
}

.schedule .card .ai:hover, .schedule .card.is-asking .ai {
  color: var(--ink);
  background: var(--hover);
}

@media (hover: hover) {
  .schedule .card .ai {
    opacity: .5;
  }

  .schedule .card:hover .ai, .schedule .card:focus-within .ai, .schedule .card.is-asking .ai {
    opacity: 1;
  }
}

.schedule .card.is-asking {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.schedule .day.is-past:has(.is-asking) {
  opacity: 1;
}

.schedule .ask-row {
  grid-column: 1 / -1;
}

.schedule .ask, .board .ask {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  animation: .2s ease-out both rise;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.55;
}

.schedule .card .ask {
  margin: 8px -5px -4px;
}

.schedule .ask .head, .board .ask .head {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.schedule .ask .head button:not(.icon-btn), .board .ask .head button:not(.icon-btn) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  width: 20px;
  height: 20px;
}

.schedule .ask .head button:not(.icon-btn):hover, .board .ask .head button:not(.icon-btn):hover {
  color: var(--ink);
  background: var(--hover);
}

.schedule .ask .head .icon-btn, .board .ask .head .icon-btn {
  margin: -4px -6px -4px 0;
}

.schedule .ask .talk, .board .ask .talk {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule .ask .q, .board .ask .q, .schedule .ask .a, .board .ask .a {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.schedule .ask .q, .board .ask .q {
  color: var(--mute);
  font-size: 12px;
}

.schedule .ask .q:before, .board .ask .q:before {
  content: "› ";
  color: var(--accent);
}

.schedule .ask .a.wait, .board .ask .a.wait {
  color: var(--mute);
  animation: 1.4s ease-in-out infinite blink;
}

.schedule .ask .a.err, .board .ask .a.err {
  color: var(--fail);
}

.schedule .ask .ask-suggest, .board .ask .ask-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
}

.schedule .ask .ask-suggest button, .board .ask .ask-suggest button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  background: none;
  padding: 3px 10px;
  transition: background .15s, border-color .15s;
  font-size: 12px;
}

.schedule .ask .ask-suggest button:hover, .board .ask .ask-suggest button:hover {
  border-color: var(--accent);
  background: var(--hover);
}

.schedule .ask input, .board .ask input {
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  color: var(--ink);
  font: inherit;
  background: none;
  width: 100%;
  padding: 7px 2px;
  transition: border-color .2s, box-shadow .2s;
}

.schedule .ask input:focus, .board .ask input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.schedule .ask input::placeholder, .board .ask input::placeholder {
  color: color-mix(in srgb, var(--mute) 70%, transparent);
}

.schedule .undated {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.schedule .undated .card {
  max-width: 520px;
}

.dm {
  --kind: var(--accent);
  position: relative;
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 7px;
  max-width: 520px;
  min-height: 112px;
  margin: 10px 0 16px;
  padding: 13px 15px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.dm.is-sent {
  --kind: var(--ok);
}

.dm.is-cancelled {
  --kind: var(--mute);
  opacity: .5;
}

.dm .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.dm b {
  letter-spacing: -.01em;
  font-size: 15px;
  font-weight: 600;
}

.dm b small {
  color: var(--mute);
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
}

.dm .text, .dm textarea {
  border-left: 2px solid var(--hair-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 2px 0 2px 11px;
}

.dm textarea {
  box-sizing: border-box;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
  font: inherit;
  resize: none;
  field-sizing: content;
  background: none;
  border-radius: 0;
  width: 100%;
  transition: border-color .2s;
}

.dm textarea:focus {
  outline: none;
  border-left-color: var(--accent);
}

.dm .acts {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
}

.dm .acts .send {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  letter-spacing: .01em;
  padding: 5px 18px;
  transition: opacity .15s, transform .15s, box-shadow .2s;
  font-weight: 600;
}

.dm .acts .send:hover:not(:disabled) {
  opacity: .88;
}

.dm .acts button:not(:-webkit-any(.send, .icon-btn)) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 4px 10px;
  transition: color .15s, background .15s;
}

.dm .acts button:not(:-moz-any(.send, .icon-btn)) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 4px 10px;
  transition: color .15s, background .15s;
}

.dm .acts button:not(:is(.send, .icon-btn)) {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 4px 10px;
  transition: color .15s, background .15s;
}

.dm .acts button:not(:-webkit-any(.send, .icon-btn)):hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.dm .acts button:not(:-moz-any(.send, .icon-btn)):hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.dm .acts button:not(:is(.send, .icon-btn)):hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.dm .acts button:disabled {
  opacity: .55;
}

.dm.is-sent .acts span {
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.dm .err {
  color: var(--fail);
  font-size: 12px;
}

.schedule .ask .dm {
  margin: 2px 0 0;
}

@container (width <= 560px) {
  .schedule .week {
    display: block;
    margin-bottom: 0;
  }

  .schedule .day {
    border-top: 0;
    margin-bottom: 14px;
    padding-top: 0;
  }

  .schedule .day.is-empty {
    display: none;
  }

  .schedule h4 {
    color: var(--ink);
    font-size: 13px;
  }

  .schedule .dlong {
    display: inline;
  }

  .schedule .dshort {
    display: none;
  }

  .schedule .card {
    font-size: 13px;
  }
}

@keyframes sweep {
  to {
    transform: translateX(260%);
  }
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  50% {
    opacity: .25;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes breathe {
  50% {
    opacity: .45;
  }
}

@keyframes slide {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}

@keyframes slide-left {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .bar {
    gap: 12px;
    padding: 12px 16px;
  }

  .sources {
    display: none;
  }

  .actions {
    margin-left: auto;
  }

  .column, .composer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ask {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}

.prose .block {
  animation: .4s ease-out both fade;
}

@media (prefers-reduced-motion: reduce) {
  .ask, .answer, .error, .reuse, .shares, .asks, .prose .block, .trail .step, .trail .calls > li, .trail .tools li {
    animation: none;
  }

  .trail-body {
    transition: none;
  }
}

.dm .rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
}

.dm .rows dt {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.85;
}

.dm .rows dd {
  display: flex;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  margin: 0;
}

.dm .person small {
  color: var(--mute);
  font-family: var(--mono);
  margin-left: 5px;
  font-size: 11px;
}

.dm .person em, .dm .rows dd > small {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--mute);
  margin-left: 6px;
  padding: 0 7px;
  font-size: 10.5px;
  font-style: normal;
}

.dm .rows dd > small.turn:before {
  content: "";
  display: inline-block;
  vertical-align: 1px;
  background: var(--mute);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 5px;
}

.dm .rows dd > small.t-reply {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.dm .rows dd > small.t-reply:before {
  background: var(--accent);
}

.dm .rows dd > small.t-failed:before {
  background: var(--fail);
}

.dm .rows dd > small.t-review:before {
  background: var(--ok);
}

.dm .rows dd > small.t-working:before {
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  width: 9px;
  height: 9px;
  margin: -1.5px 3.5px -1.5px -1.5px;
}

@media (prefers-reduced-motion: reduce) {
  .dm .rows dd > small.t-working:before {
    animation: none;
  }
}

.dm .rows dd > small.t-waiting:before, .dm .rows dd > small.t-draft:before {
  box-shadow: inset 0 0 0 1.5px var(--mute);
  background: none;
}

.dm .rows dd > small.t-closed:before {
  background: var(--hair-strong);
}

.dm .person em {
  border-color: color-mix(in srgb, var(--fail) 40%, transparent);
  color: var(--fail);
}

.dm .rows .change {
  border-radius: var(--radius-btn);
  color: var(--accent);
  padding: 0 8px;
  font-size: 12px;
}

.dm .rows .change:hover:not(:disabled) {
  background: var(--hover);
}

.dm .rows dd.files {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.dm .rows .file {
  display: flex;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}

.dm .rows .file > small {
  color: var(--mute);
  font-size: 11.5px;
}

.dm .rows .file.is-asking {
  color: var(--mute);
  font-size: 12px;
}

.dm .top .prep {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--mute);
  letter-spacing: 0;
  padding: 0 7px;
  font-size: 10.5px;
}

.dm .quote {
  color: var(--mute);
  font-size: 11.5px;
}

.dm.is-channel b small, .dm.is-channel .quote {
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
  word-break: keep-all;
}

.dm.is-channel .quote code {
  font: inherit;
  white-space: nowrap;
}

.dm .triage {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px 8px;
  font-size: 12px;
  line-height: 17px;
}

.dm .triage.t-reply {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hair));
}

.dm .triage .verdict {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
}

.dm .triage .kind {
  color: var(--ink);
  font-weight: 600;
}

.dm .triage.t-reply .kind {
  color: var(--accent);
}

.dm .triage .count {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.dm .triage .by {
  color: var(--mute);
  margin-left: auto;
  font-size: 11px;
}

.dm .triage .tag, .requests .console .r2 .tag {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  color: var(--ok);
  flex: none;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
}

.dm .triage .why {
  color: var(--mute);
}

.dm .triage .why:before {
  content: "근거 · ";
  font-style: normal;
}

.dm .triage .went, .dm .triage .wants {
  color: var(--ink);
  margin: 0;
  padding-left: 16px;
}

.dm .triage li {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 17px;
}

.dm .triage .items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding-left: 18px;
}

.dm .triage .items li {
  display: list-item;
  list-style: decimal;
}

.dm .triage .items li > span {
  display: block;
}

.dm .triage .items .it-q {
  color: var(--ink);
}

.dm .triage .items .it-a {
  color: var(--ink);
  font-weight: 600;
}

.dm .triage .items .it-ev {
  color: var(--mute);
}

.dm .triage .items.is-stale {
  opacity: .55;
}

.dm .triage .state {
  color: var(--mute);
  margin: 0;
}

.dm .triage .t-acts {
  display: flex;
  gap: 6px;
}

.dm .triage .t-acts button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 3px 10px;
  transition: background .15s;
}

.dm .triage .t-acts button:hover:not(:disabled) {
  background: var(--hover);
}

.dm .triage .t-acts button:disabled {
  opacity: .55;
}

.dm .thread {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 3px;
  height: 200px;
}

.dm .thread .text {
  margin-bottom: 6px;
}

.dm .live {
  position: relative;
  display: grid;
  grid-template-rows: 1.6em 1.6em 1.6em;
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  background: var(--field);
  padding: 7px 10px 6px;
  font-size: 12px;
}

.dm .live .run {
  position: absolute;
  overflow: hidden;
  border-radius: inherit;
  color: var(--ink);
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  padding: 1.5px;
  transition: opacity .3s;
  inset: -1px;
}

.dm .live .run:before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background: conic-gradient(var(--cosmos-1), var(--cosmos-2), var(--cosmos-3), var(--cosmos-4), var(--cosmos-1));
  width: calc(100% + 120px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dm .live .run.is-on {
  opacity: 1;
}

.dm .live .run.is-on:before {
  animation: 6s steps(24, end) infinite live-band;
}

@keyframes live-band {
  from {
    transform: translate(-50%, -50%)rotate(0);
  }

  to {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm .live .run.is-on:before {
    animation: none;
  }
}

.dm .live .now, .dm .live .tool, .dm .live .last {
  display: flex;
  white-space: nowrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.dm .live .now span:first-child, .dm .live .tool .what, .dm .live .last span {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dm .live .now {
  color: var(--ink);
}

.dm .live .last, .dm .live .clock, .dm .live .tool .tag, .dm .live .tool .none {
  color: var(--mute);
}

.dm .live .clock, .dm .log time {
  font-variant-numeric: tabular-nums;
}

.dm .acts .log-toggle {
  margin-left: auto;
}

.dm .log {
  display: flex;
  list-style: none;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.dm .log li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: 10px;
}

.dm .log time, .dm .log .empty, .dm .log .is-tool span {
  color: var(--mute);
}

.dm .pick {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  background: var(--field);
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.dm .pick input {
  box-sizing: border-box;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  background: none;
  width: 100%;
  padding: 6px 9px;
}

.dm .pick input:focus {
  outline: none;
  border-color: var(--accent);
}

.dm .pick ul {
  list-style: none;
  overflow-y: auto;
  height: 168px;
  margin: 0;
  padding: 0;
}

.dm .pick li button {
  display: flex;
  border-radius: var(--radius-btn);
  color: var(--ink);
  text-align: left;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
}

.dm .pick li button:hover {
  background: var(--hover);
}

.dm .pick li small {
  color: var(--mute);
  flex: none;
  font-size: 11px;
}

.dm .pick .empty {
  color: var(--mute);
  padding: 5px 8px;
}

.dm .pick .none {
  display: flex;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px;
  padding-top: 6px;
  font-size: 12px;
}

.dm .pick .none span {
  margin-right: 4px;
}

.dm .pick .none button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 2px 9px;
}

.dm .pick .none button:hover {
  background: var(--hover);
}

.dm .pick li.remote .group {
  display: block;
  color: var(--mute);
  padding: 8px 8px 2px;
  font-size: 11.5px;
}

.dm .pick li.remote .empty {
  display: block;
}

.dm .results {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  background: var(--field);
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
  font-size: 12px;
}

.dm .results .head {
  display: flex;
  align-items:  center;
  gap: 8px;
  min-width: 0;
}

.dm .results .title {
  color: var(--ink);
  flex: none;
  font-weight: 600;
}

.dm .results .sum {
  color: var(--mute);
  word-break: keep-all;
  overflow-wrap: anywhere;
  flex: auto;
  min-width: 0;
}

.dm .results .head button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  flex: none;
  padding: 2px 9px;
}

.dm .results .head button:hover:not(:disabled) {
  background: var(--hover);
}

.dm .results ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.dm .results li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.dm .results li .name {
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
  padding: 1px 0;
}

.dm .results li button.name:hover {
  text-decoration: underline;
}

.dm .results li small {
  color: var(--mute);
  word-break: keep-all;
  flex: none;
  font-size: 11px;
}

.dm .results li.skipped .name {
  color: var(--mute);
}

.dm .results .note {
  color: var(--mute);
  margin: 0;
}

.dm .doc {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  font-size: 12px;
}

.dm .doc .what {
  margin-right: auto;
}

.dm .doc.is-edit {
  flex-direction: column;
  align-items: stretch;
}

.dm .doc .row {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.dm .doc button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 2px 9px;
  font-size: 12px;
}

.dm .doc button.go {
  border-color: var(--accent);
  color: var(--accent);
}

.dm .doc button:hover:not(:disabled) {
  background: var(--hover);
}

.remote-agents {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-box);
  flex-direction: column;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.remote-agents .head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.remote-agents h4 {
  margin: 0;
  font-size: 13px;
}

.remote-agents button:not(.icon-btn) {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 2px 9px;
  font-size: 12px;
}

.remote-agents button:not(.icon-btn):hover:not(:disabled) {
  background: var(--hover);
}

.remote-agents button.danger {
  border-color: var(--kind-deadline);
  color: var(--kind-deadline);
}

.remote-agents ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.remote-agents li {
  display: flex;
  border-bottom: 0;
  align-items:  center;
  gap: 8px;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.remote-agents li .name {
  color: var(--ink);
}

.remote-agents li small {
  color: var(--mute);
  word-break: keep-all;
  margin-right: auto;
}

.remote-agents .dot {
  background: var(--hair-strong);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.remote-agents .dot.is-on {
  background: var(--ok);
}

.remote-agents .group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.remote-agents .group + .group {
  border-top: 1px solid var(--hair);
  padding-top: 8px;
}

.remote-agents .sum {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 20px;
}

.remote-agents .sum span {
  flex: 1;
  min-width: 0;
}

.remote-agents .sum b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}

.remote-agents .body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s;
}

.remote-agents.is-open .body {
  grid-template-rows: 1fr;
}

.remote-agents .body > div {
  display: flex;
  overflow: clip;
  overflow-clip-margin: 4px;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.remote-agents .body .group:first-child {
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .remote-agents .body {
    transition: none;
  }
}

.remote-agents li.session {
  padding-left: 15px;
}

.remote-agents li.session.is-off .name {
  color: var(--mute);
}

.remote-agents .note {
  color: var(--mute);
  margin: 0;
  font-size: 12px;
}

.remote-agents .code {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.remote-agents .code .line {
  display: flex;
  color: var(--mute);
  justify-content: space-between;
  align-items:  center;
  margin-top: 4px;
  font-size: 12px;
}

.remote-agents pre {
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 6px 8px;
  font: 11.5px / 1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.remote-agents a.btn {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  text-decoration: none;
  padding: 2px 9px;
  font-size: 12px;
}

.remote-agents a.btn:hover {
  background: var(--hover);
}

.remote-agents .skills li.how {
  display: block;
  padding: 2px 0 6px;
}

.remote-agents .skills .code .note {
  margin: 0;
}

.remote-agents .skills .gets {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  color: var(--mute);
  align-items:  center;
  gap: 6px 8px;
  margin-top: 4px;
  font-size: 12px;
}

.remote-agents .skills .gets a.btn {
  text-align: center;
}

.app {
  --original-w: clamp(360px, calc((100vw - var(--column)  - 48px) / 2 - 32px), 560px);
}

@media (min-width: 761px) {
  .app .column, .app .composer {
    transition: margin-left .25s, margin-right .25s;
  }

  .app.has-original .column, .app.has-original .composer {
    margin-left: max(0px, min(calc((100vw - var(--column)  - 48px) / 2), calc(100vw - var(--original-w)  - 32px - var(--column)  - 48px)));
    margin-right: calc(var(--original-w)  + 32px);
    width: auto;
  }
}

.original {
  position: fixed;
  z-index: 4;
  width: var(--original-w);
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
  animation: .25s ease-out both source-in;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 0;
  font-size: 13px;
  line-height: 1.6;
  top: 72px;
  bottom: 16px;
  right: 16px;
}

@keyframes source-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@media (min-width: 1200px) {
  .original.second {
    animation-name: source-in-left;
    left: 16px;
    right: auto;
  }

  .app.has-second .column, .app.has-second .composer {
    margin-left: calc(var(--original-w)  + 32px);
    margin-right: calc(var(--original-w)  + 32px);
    width: auto;
    max-width: none;
  }
}

@media (max-width: 1199px) {
  .app.has-second .original.first {
    bottom: calc(42% + 6px);
  }

  .app.has-second .original.first .rows > :not(:nth-last-child(-n+2)) {
    display: none;
  }

  .original.second {
    animation-name: source-up;
    top: calc(58% + 6px);
  }
}

@keyframes source-in-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@keyframes source-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.original .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  font-size: 11px;
}

.original .close {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 10px;
  font-size: 12px;
}

.original .close:hover {
  color: var(--ink);
  background: var(--hover);
}

.original h3 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.original .rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0;
}

.original .rows dt {
  color: var(--mute);
  font-size: 12px;
}

.original .rows dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.original .notes {
  display: flex;
  border-top: 1px solid var(--hair);
  list-style: none;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 0 0;
}

.original .notes button {
  display: flex;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: left;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
}

.original .notes button:hover {
  background: var(--hover);
}

.original .notes b {
  color: var(--accent);
  flex: none;
  font-weight: 600;
}

.original .body {
  border-top: 1px solid var(--hair);
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-height: 0;
  margin: 0 -16px;
  padding: 10px 16px 16px;
}

.original mark {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
}

.original mark sup {
  color: var(--accent);
  margin-right: 2px;
  font-size: 10px;
  font-weight: 600;
}

.original mark.is-focus {
  animation: 1.2s ease-out mark-focus;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@keyframes mark-focus {
  0% {
    box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 1px transparent;
  }

  29% {
    box-shadow: inset 40em 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 1px var(--accent);
  }

  100% {
    box-shadow: inset 40em 0 #0000, 0 0 0 1px #0000;
  }
}

.original .files {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.original .files button {
  color: var(--accent);
  text-align: left;
  overflow-wrap: anywhere;
  padding: 0;
}

.original .files button:hover {
  text-decoration: underline;
}

.original .files button.on {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.original .files span {
  color: var(--mute);
}

.original .file-sum {
  border-radius: var(--radius-card);
  background: var(--field);
  white-space: normal;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.original .file-sum p {
  margin: 0;
}

.original .file-sum ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.original .sec + .sec {
  margin-top: 16px;
}

.original .sec h4 {
  color: var(--mute);
  letter-spacing: .02em;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
}

.original .cells {
  overflow-x: auto;
}

.original .cells table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 12px;
  line-height: 1.45;
}

.original .cells td {
  border: 1px solid var(--hair);
  vertical-align: top;
  min-width: 5em;
  max-width: 28em;
  padding: 3px 8px;
}

.original .cells tr.head td {
  background: var(--field);
  font-weight: 600;
}

.original .cells tr.gap td {
  color: var(--mute);
  text-align: center;
}

.original .cells tr.placed td {
  color: var(--mute);
  max-width: none;
}

.original .cells tr.placed img {
  display: block;
  max-width: calc(var(--original-w)  - 64px);
  border: 1px solid var(--hair);
  height: auto;
  margin: 2px 0 4px;
}

.original .sec .pic {
  color: var(--mute);
}

.original .sec .pic img {
  display: block;
  border: 1px solid var(--hair);
  max-width: 100%;
  height: auto;
  margin: 4px 0 2px;
}

.original .loading, .original .err {
  color: var(--mute);
  margin: 0;
}

.original .err {
  color: var(--fail);
}

.original .quiet {
  color: var(--mute);
  margin: 0;
}

.original-link {
  margin: 6px 0;
}

.original-link button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 10px;
  font-size: 12px;
}

.original-link button:hover {
  color: var(--ink);
  background: var(--hover);
}

button.ref {
  color: var(--accent);
  font: inherit;
  padding: 0 1px;
  font-weight: 600;
}

button.ref:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .original {
    border-radius: var(--radius-box) var(--radius-box) 0 0;
    animation-name: source-up;
    width: auto;
    height: 72dvh;
    inset: auto 0 0;
  }

  .original.second {
    top: auto;
  }

  .app.has-second .original.first {
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .original, .original mark.is-focus {
    animation: none;
  }

  .original mark.is-focus {
    box-shadow: 0 0 0 1px var(--accent);
  }

  .app .column, .app .composer {
    transition: none;
  }
}

.original .flow {
  --g-bg: color-mix(in srgb, var(--ink) 90%, var(--accent));
  --g-ink: color-mix(in srgb, var(--field) 94%, transparent);
  --g-mute: color-mix(in srgb, var(--field) 58%, transparent);
  --g-line: color-mix(in srgb, var(--field) 24%, transparent);
  --g-dot: color-mix(in srgb, var(--field) 13%, transparent);
  --g-accent: color-mix(in srgb, var(--accent) 55%, var(--field));
  --g-warm: color-mix(in srgb, var(--kind-deadline) 55%, var(--kind-task));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 14px;
}

:root[data-scheme="dark"] .original .flow {
  --g-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
  --g-ink: var(--ink);
  --g-mute: var(--mute);
  --g-line: color-mix(in srgb, var(--ink) 26%, transparent);
  --g-dot: color-mix(in srgb, var(--ink) 14%, transparent);
  --g-accent: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .original .flow {
    --g-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
    --g-ink: var(--ink);
    --g-mute: var(--mute);
    --g-line: color-mix(in srgb, var(--ink) 26%, transparent);
    --g-dot: color-mix(in srgb, var(--ink) 14%, transparent);
    --g-accent: var(--accent);
  }
}

.original .flow .g-top {
  display: flex;
  font-family: var(--mono);
  letter-spacing: .05em;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  align-items: baseline;
  gap: 10px;
  min-height: 20px;
  font-size: 11px;
}

.original .flow .g-top .tag {
  color: var(--accent);
  font-weight: 700;
}

.original .flow .g-top .tag:before {
  content: "";
  display: inline-block;
  background: var(--accent);
  vertical-align: 1px;
  width: 6px;
  height: 6px;
  margin-right: 6px;
}

.original .flow .g-top .legend {
  overflow: hidden;
  text-overflow: ellipsis;
}

.original .flow .g-top .keys {
  letter-spacing: 0;
  margin-left: auto;
}

.original .flow .g-top .keys i {
  display: inline-block;
  border: 1.2px solid var(--ink);
  vertical-align: 0;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin: 0 1px 0 6px;
}

.original .flow .g-top .keys .k-self {
  background: var(--accent);
  border-color: var(--accent);
}

.original .flow .g-top .keys .k-ghost {
  border-style: dashed;
  border-color: var(--mute);
}

.original .flow .g-frame {
  position: relative;
  padding: 4px;
}

.original .flow .g-frame:before, .original .flow .g-frame:after {
  content: "";
  position: absolute;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  width: 12px;
  height: 12px;
}

.original .flow .g-frame:before {
  border-bottom: 0;
  border-right: 0;
  top: 0;
  left: 0;
}

.original .flow .g-frame:after {
  border-top: 0;
  border-left: 0;
  bottom: 0;
  right: 0;
}

.original .flow .g-box {
  overflow: hidden auto;
  background: var(--g-bg);
  border-radius: 8px;
  min-height: 220px;
  max-height: 560px;
}

.original .flow .g-wait {
  display: grid;
  font-family: var(--mono);
  color: var(--g-mute);
  place-items:  center;
  min-height: 220px;
  font-size: 12px;
}

.original .flow svg.g {
  display: block;
  font-family: var(--font);
}

.original .flow svg.g text {
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: var(--g-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.original .flow .g-bg {
  fill: var(--g-bg);
}

.original .flow .g-dot {
  fill: var(--g-dot);
}

.original .flow .g-rails line {
  stroke: var(--g-line);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.original .flow .g-tip {
  fill: var(--g-accent);
}

.original .flow .e {
  fill: none;
  stroke: var(--g-line);
  stroke-width: 1.2;
  stroke-linecap: round;
  transition: opacity .18s, stroke-width .18s;
}

.original .flow .e-reply, .original .flow .e-forward, .original .flow .e-quote {
  stroke: var(--g-accent);
  opacity: .85;
}

.original .flow .e-forward {
  stroke-dasharray: 5 3;
}

.original .flow .e-quote {
  stroke-dasharray: 1.5 3.5;
  opacity: .7;
}

.original .flow .e.skip {
  opacity: .45;
}

.original .flow .e.faint {
  opacity: .22;
}

.original .flow .e-sent {
  stroke: var(--g-ink);
  opacity: .5;
}

.original .flow .e-received, .original .flow .e-cc {
  opacity: .45;
}

.original .flow .e-cc {
  stroke-dasharray: 1.5 3.5;
}

.original .flow .e-attached, .original .flow .e-item {
  opacity: .6;
}

.original .flow .e-revision {
  stroke-dasharray: 3 3;
  opacity: .6;
}

.original .flow .e-answers, .original .flow .e-closes {
  stroke: var(--g-warm);
  stroke-dasharray: 3 3;
  opacity: .7;
}

.original .flow .e.lit {
  opacity: 1;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px var(--g-accent));
}

.original .flow .e.dim {
  opacity: .12;
}

.original .flow .n {
  cursor: pointer;
  outline: none;
  transition: opacity .18s;
}

.original .flow .n .hit {
  fill: transparent;
}

.original .flow .n .dot {
  fill: var(--g-bg);
  stroke: var(--g-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: stroke-width .18s;
}

.original .flow .n.self .dot {
  fill: var(--g-accent);
  stroke: var(--g-accent);
}

.original .flow .n-ghost .dot {
  stroke: var(--g-mute);
  stroke-dasharray: 2.5 2.5;
}

.original .flow .n-person .dot {
  fill: var(--g-mute);
  stroke: none;
}

.original .flow .n-person.self .dot {
  fill: var(--g-accent);
}

.original .flow .n-file .dot {
  stroke-width: 1.2;
}

.original .flow .n-item .dot {
  stroke: var(--g-mute);
}

.original .flow .n-item.open .dot {
  fill: var(--g-warm);
  stroke: var(--g-warm);
}

.original .flow .n .halo {
  fill: var(--g-accent);
  opacity: .5;
}

.original .flow .n .ring {
  fill: none;
  stroke: var(--g-accent);
  stroke-width: 1.2;
}

.original .flow .n .t1, .original .flow .n .t3 {
  font-family: var(--mono);
  fill: var(--g-mute);
  font-size: 10.5px;
}

.original .flow .n .t2 {
  fill: var(--g-ink);
  font-size: 12px;
  font-weight: 600;
}

.original .flow .n-ghost .t2 {
  fill: var(--g-mute);
  font-weight: 400;
}

.original .flow .n.current .t2, .original .flow .n.picked .t2 {
  fill: var(--g-accent);
}

.original .flow .n.lit .t1, .original .flow .n.lit .t3 {
  fill: var(--g-ink);
}

.original .flow .n.dim {
  opacity: .28;
}

.original .flow .n.picked .dot {
  stroke: var(--g-accent);
  stroke-width: 2.2;
}

.original .flow .n:focus-visible .dot {
  stroke: var(--g-accent);
  stroke-width: 2.2;
}

@media (prefers-reduced-motion: reduce) {
  .original .flow .n, .original .flow .e, .original .flow .n .dot {
    transition: none;
  }
}

.original .flow .inspect {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-direction: column;
  gap: 2px;
  min-height: 104px;
  padding: 8px 0 6px;
}

.original .flow .inspect .kind {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
  font-size: 10.5px;
}

.original .flow .inspect .title {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.original .flow .inspect .meta {
  color: var(--mute);
  font-size: 13px;
}

.original .flow .inspect .gist {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--mute);
  -webkit-box-orient: vertical;
  font-size: 13px;
}

.original .flow .inspect .act {
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  align-self:  flex-start;
  margin-top: 4px;
  padding: 2px 10px;
  font-size: 12px;
}

.original .flow .inspect .act:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.original .flow .g-acts {
  display: flex;
  align-items:  center;
  gap: 6px;
  min-height: 30px;
  margin: 6px 0 2px;
}

.original .flow .g-acts .for {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  flex: 1;
  min-width: 0;
  font-size: 11px;
}

.original .flow .g-acts button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  border-radius: 999px;
  padding: 3px 10px;
  transition: border-color .15s, color .15s;
  font-size: 12px;
}

.original .flow .g-acts button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.original .flow .g-acts button:disabled {
  opacity: .5;
}

.original .flow .open {
  min-height: 44px;
}

.original .flow h4 {
  letter-spacing: .02em;
  color: var(--mute);
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
}

.original .flow ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.original .flow .open li {
  padding: 2px 0;
}

.original .flow .open .row {
  display: block;
  text-align: left;
  border-radius: 6px;
  width: 100%;
  margin: 0 -4px;
  padding: 2px 4px;
}

.original .flow .open .row:hover, .original .flow .open .row.picked {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.original .flow .num {
  font-family: var(--mono);
  color: var(--mute);
  margin-right: 6px;
  font-size: 12px;
}

.original .flow .k {
  color: var(--mute);
  margin-right: 6px;
}

.original .flow .open .tag {
  border: 1px solid var(--g-warm);
  color: var(--g-warm);
  border-radius: 999px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
}

.original .flow .open time {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

.original .flow .empty, .original .flow .note {
  color: var(--mute);
  min-height: 21px;
  margin: 0;
}

.memo {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  min-height: 84px;
  margin: 10px 0 16px;
  padding: 12px 15px 10px;
  font-size: 13px;
  line-height: 1.55;
}

.memo .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.memo .num {
  font-variant-numeric: tabular-nums;
}

.memo .text, .memo textarea {
  border-left: 2px solid var(--hair-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 2px 0 2px 11px;
  font-size: 14px;
}

.memo textarea {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
  font: inherit;
  resize: none;
  field-sizing: content;
  background: none;
  border-radius: 0;
  width: 100%;
  transition: border-color .2s;
  font-size: 14px;
}

.memo textarea:focus {
  outline: none;
  border-left-color: var(--accent);
}

.memo .refs {
  color: var(--mute);
  margin: 0;
  padding-left: 13px;
  font-size: 12px;
}

.memo .acts {
  display: flex;
  color: var(--mute);
  align-items:  center;
  gap: 6px;
  min-height: 28px;
  font-size: 12px;
}

.memo .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 4px 10px;
  transition: color .15s, background .15s, opacity .15s;
}

.memo .acts button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.memo .acts button:disabled {
  opacity: .55;
}

.memo .acts .send, .memo .acts .send:hover:not(:disabled) {
  background: var(--btn);
  color: var(--on-btn);
  padding: 4px 16px;
  font-weight: 600;
}

.memo .acts .send:hover:not(:disabled) {
  opacity: .88;
}

.memo .err {
  color: var(--fail);
}

.memo.is-deleted .text {
  color: var(--mute);
}

.memo.is-gone {
  color: var(--mute);
  min-height: 0;
}

.authmail {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  min-height: 84px;
  margin: 10px 0 16px;
  padding: 12px 15px;
  font-size: 13px;
  line-height: 1.55;
}

.authmail .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.authmail .top time {
  font-variant-numeric: tabular-nums;
}

.authmail .head {
  color: var(--ink);
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.authmail .proof {
  color: var(--mute);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12px;
}

.authmail .opens {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
}

.authmail .opens a {
  border: 1px solid var(--btn);
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  text-decoration: none;
  padding: 0 16px;
  transition: opacity .15s;
  font-size: 13px;
  font-weight: 600;
  line-height: 28px;
}

.authmail .opens a:hover {
  opacity: .88;
}

.authmail .opens a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.authmail .opens a.again {
  border-color: var(--hair-strong);
  color: var(--ink);
  background: none;
}

.authmail.s-unverified {
  border-color: color-mix(in srgb, var(--fail) 45%, var(--card-border));
}

.authmail.s-unverified .head {
  color: var(--fail);
}

.authmail.s-past .head {
  color: var(--mute);
}

.authmail.is-gone {
  color: var(--mute);
  min-height: 0;
}

.today.memos .list .memo {
  box-shadow: none;
  animation: none;
  max-width: none;
  margin: 0 0 10px;
}

.today.memos .more {
  border-radius: var(--radius-btn);
  color: var(--mute);
  width: 100%;
  padding: 8px;
  font-size: 13px;
}

.today.memos .more:hover {
  color: var(--ink);
  background: var(--hover);
}

.attached {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.attached li {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  overflow: hidden;
  align-items:  center;
  gap: 8px;
  max-width: 300px;
  padding: 3px 4px 3px 8px;
  font-size: 13px;
  line-height: 1.5;
}

.attached .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attached .ext {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
  flex: none;
  font-size: 10px;
}

.attached .meta {
  font-family: var(--mono);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11px;
}

.attached .is-error {
  border-color: var(--fail);
}

.attached .is-error .meta {
  color: var(--fail);
}

.attached .upbar {
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
}

.attached .upbar span {
  display: block;
  background: var(--accent);
  transform-origin: left;
  height: 100%;
  transition: transform .2s;
}

.attached .x {
  display: inline-grid;
  color: var(--mute);
  place-items:  center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
}

.attached .x:hover {
  color: var(--ink);
}

.ask-files {
  display: flex;
  letter-spacing: 0;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

.ask-files button {
  color: var(--accent);
  text-align: left;
  overflow-wrap: anywhere;
}

.ask-files button:hover {
  text-decoration: underline;
}

.original .modes {
  display: flex;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 14px;
}

.original .modes button {
  color: var(--mute);
}

.original .modes button.on {
  color: var(--ink);
  font-weight: 600;
}

.original .modes .tabs {
  display: flex;
  gap: 14px;
}

.original .modes .links {
  display: flex;
  align-items:  center;
  gap: 14px;
  margin-left: auto;
}

.original .modes:has(.explanation-entry) {
  flex-wrap: wrap;
}

.original .modes:has(.explanation-entry) .links {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.original .modes .download, .original .modes .open, .original .modes .revise, .original .edition a {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}

.original .modes .open {
  display: inline-flex;
  align-items:  center;
  gap: 3px;
}

.original .modes .download:hover, .original .modes .open:hover, .original .modes .revise:hover:not(:disabled), .original .edition a:hover {
  text-decoration: underline;
}

.original .modes .revise:disabled, .original .modes .open:disabled {
  color: var(--mute);
  cursor: default;
}

.original .edition .lost {
  color: var(--fail);
  font-style: normal;
}

.original .edition {
  display: flex;
  color: var(--mute);
  align-items: baseline;
  gap: 10px;
  margin: -6px 0 12px;
  font-size: 13px;
}

.original .archive {
  white-space: normal;
}

.original .archive .head {
  word-break: keep-all;
  margin: 0;
}

.original .archive .note {
  color: var(--mute);
  margin: 2px 0 0;
  font-size: 13px;
}

.original .archive ol {
  display: flex;
  border-top: 1px solid var(--hair);
  list-style: none;
  flex-direction: column;
  gap: 1px;
  margin: 10px -6px 0;
  padding: 8px 0 0;
}

.original .archive li > button, .original .archive li > .off {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: left;
  align-items: baseline;
  column-gap: 12px;
  width: 100%;
  padding: 4px 6px;
  line-height: 1.5;
}

.original .archive li > button:hover, .original .archive li > button[aria-current="true"] {
  background: var(--hover);
}

.original .archive li > button[aria-current="true"] .n {
  font-weight: 600;
}

.original .archive .p {
  overflow-wrap: anywhere;
}

.original .archive .dir, .original .archive .off .n {
  color: var(--mute);
}

.original .archive .z {
  display: flex;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  gap: 8px;
  font-size: 12px;
}

.original .archive .s {
  grid-column: 1 / -1;
  color: var(--mute);
  font-size: 12px;
}

.original .archive .s.fail {
  color: var(--fail);
}

.original .packed {
  color: var(--mute);
  white-space: normal;
  overflow-wrap: anywhere;
  margin: -6px 0 12px;
  font-size: 13px;
}

.original .packed button {
  color: var(--accent);
}

.original .packed button:hover {
  text-decoration: underline;
}

.original-page {
  height: 100vh;
  display: flex;
  background: var(--surface);
  flex-direction: column;
  height: 100dvh;
}

.edit-bar {
  display: flex;
  border-bottom: 1px solid var(--hair);
  flex: none;
  align-items:  center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 16px;
  font-size: 13px;
}

.edit-bar h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.edit-bar .ver {
  color: var(--mute);
  white-space: nowrap;
  flex: none;
}

.edit-bar .state {
  display: inline-flex;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.edit-bar .state.is-ok {
  color: var(--ok);
}

.edit-bar .state.is-fail, .edit-alert.is-fail p, .original-page > .err {
  color: var(--fail);
}

.edit-bar .acts {
  display: flex;
  flex: none;
  align-items:  center;
  gap: 8px;
  margin-left: auto;
}

.edit-bar .acts button, .edit-bar .acts a, .edit-alert button {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  justify-content: center;
  align-items:  center;
  min-height: 30px;
  padding: 0 16px;
  transition: color .15s, background .15s, border-color .15s;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.edit-bar .acts button:hover:not(:disabled), .edit-bar .acts a:hover, .edit-alert button:hover {
  background: var(--hover);
}

.edit-bar .acts .primary, .edit-bar .acts .primary:hover:not(:disabled), .edit-alert .primary, .edit-alert .primary:hover {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--on-btn);
}

.edit-bar .acts button:disabled {
  opacity: .45;
  cursor: default;
}

.edit-bar .acts button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edit-bar .acts a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edit-alert button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edit-alert .danger {
  color: var(--fail);
}

.edit-alert.is-risk b, .edit-bar .state .lost {
  color: var(--fail);
  font-style: normal;
  font-weight: 600;
}

.edit-alert {
  display: flex;
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
  flex: none;
  align-items:  center;
  gap: 6px 8px;
  padding: 8px 16px;
  font-size: 13px;
}

.edit-alert p {
  flex: 320px;
  margin: 0;
}

.original-page > .err {
  margin: 12px 16px;
}

.original-page > .wait {
  color: var(--mute);
  margin: 12px 16px;
}

.original-page > iframe {
  background: var(--surface);
  animation: .2s ease-out fade;
  border: 0;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.edit-bar .busy {
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  border-radius: 50%;
  flex: none;
  width: .6em;
  height: .6em;
}

@media (prefers-reduced-motion: reduce) {
  .edit-bar .busy {
    animation: none;
  }
}

@media (max-width: 640px) {
  .edit-bar {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 6px 12px;
  }

  .edit-bar h1 {
    flex: 100%;
  }

  .edit-alert {
    padding: 8px 12px;
  }
}

.original .pages .note {
  color: var(--mute);
  margin: 0 0 10px;
  font-size: 13px;
}

.original .page {
  margin: 0 0 14px;
}

.original .page img, .original .picture img {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hair);
  width: 100%;
  height: auto;
}

.original .page figcaption {
  text-align: center;
  color: var(--mute);
  margin-top: 4px;
  font-size: 12px;
}

.original .picture {
  margin: 0;
}

.original .picture figcaption {
  margin-top: 8px;
}

.original .picture .image-text {
  color: var(--mute);
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-size: 14px;
}

.original .picture .kind-guess {
  display: inline-block;
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  color: var(--mute);
  margin-left: 8px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
}

.similar-images {
  margin-top: 12px;
}

.similar-images .toggle {
  border-radius: var(--radius-btn);
  color: var(--mute);
  margin-left: -8px;
  padding: 3px 8px;
  transition: color .15s, background .15s;
  font-size: 13px;
}

.similar-images .toggle:hover {
  color: var(--ink);
  background: var(--hover);
}

.similar-images .body {
  animation: .18s similar-in;
  margin-top: 6px;
}

@keyframes similar-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
}

.similar-images .note {
  color: var(--mute);
  margin: 4px 0;
  font-size: 13px;
}

.similar-images .note.is-err {
  color: var(--fail);
}

.similar-images ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.similar-images li button {
  display: block;
  text-align: left;
  color: var(--mute);
  width: 100%;
  padding: 0;
  font-size: 12px;
}

.similar-images .frame {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--surface);
  border-radius: 6px;
  transition: border-color .15s;
}

.similar-images li button:hover .frame {
  border-color: var(--hair-strong);
}

.similar-images li button:hover .t {
  color: var(--ink);
}

.similar-images .frame img {
  display: block;
  object-fit: contain;
  border: 0;
  width: 100%;
  height: 100%;
}

.similar-images .t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .similar-images .body {
    animation: none;
  }
}

.schedule .reservations {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  font-size: .92em;
}

.schedule .reservations h4 {
  opacity: .7;
  margin: 0 0 2px;
  font-size: .85em;
}

.schedule .reservation {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.schedule .reservation time {
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.schedule .reservation button {
  margin-left: auto;
}

.dm .acts input[type="datetime-local"] {
  font: inherit;
  padding: 2px 6px;
}

.prose button.mail, .talk button.mail {
  color: var(--accent);
  font: inherit;
  padding: 0 2px;
  font-weight: 600;
}

.prose button.mail:hover, .talk button.mail:hover {
  text-decoration: underline;
}

.schedule .card .orig {
  color: var(--accent);
  font: inherit;
  margin-left: 6px;
  padding: 0 4px;
  font-size: 11px;
}

.schedule .card .orig:hover {
  text-decoration: underline;
}

.schedule .card .more {
  font: inherit;
  align-self:  flex-start;
  padding: 0 6px;
  font-size: 11px;
}

.schedule .card .more-row {
  display: flex;
  gap: 2px;
}

.schedule .card ul.brief {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
}

.schedule .card ul.brief li.g {
  color: var(--mute);
  margin-top: 4px;
  font-size: 11px;
}

.schedule .card ul.brief .n {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.prose button.card-ref, .talk button.card-ref, .original button.card-ref, .dm button.card-ref {
  color: var(--accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.prose button.card-ref:hover, .talk button.card-ref:hover, .original button.card-ref:hover, .dm button.card-ref:hover {
  text-decoration: underline;
}

.file-ref {
  color: var(--accent);
  font: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 1px;
}

.file-ref:hover {
  text-decoration-color: currentColor;
}

.file-ref[aria-busy="true"] {
  color: var(--mute);
  cursor: progress;
}

.file-ref[aria-busy="true"]:after, .file-ref[data-err]:after {
  display: inline-block;
  text-decoration: none;
  margin-left: 6px;
  font-size: .86em;
}

.file-ref[aria-busy="true"]:after {
  content: "여는 중";
  color: var(--mute);
}

.file-ref[data-err]:after {
  content: attr(data-err);
  color: var(--fail);
}

.pcard .pc-line .file-ref:focus-visible {
  outline-offset: -2px;
}

.pcard .pc-file {
  display: inline-flex;
  max-width: 100%;
}

.pcard .pc-file > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.pcard .pc-file > .pc-file-pre {
  flex: 0 auto;
  min-width: 0;
}

.pcard .pc-file > .file-ref {
  flex: none;
  max-width: 70%;
}

.pcard .pc-file > .pc-file-post {
  flex: none;
}

.secret {
  display: inline-block;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--mute);
  font: inherit;
  letter-spacing: .08em;
  vertical-align: .1em;
  margin: 0 1px;
  padding: 0 6px;
  font-size: .72em;
  line-height: 1.6;
}

button.secret {
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

button.secret:hover {
  border-color: var(--accent);
  color: var(--accent);
}

button.secret:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.secret.is-gone {
  cursor: default;
  border-style: dashed;
}

.secret-pop {
  position: fixed;
  z-index: 70;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  animation: .15s ease-out both secret-in;
  width: 300px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}

@keyframes secret-in {
  from {
    opacity: 0;
  }
}

.secret-pop form {
  display: grid;
  gap: 8px;
}

.secret-pop h4 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
}

.secret-pop .note {
  color: var(--mute);
  margin: 0;
  font-size: 12px;
}

.secret-pop .note.err {
  color: var(--fail);
}

.secret-pop input {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  width: 100%;
  padding: 0 10px;
  line-height: 30px;
}

.secret-pop input:focus {
  border-color: var(--accent);
  outline: none;
}

.secret-pop .value {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--field);
  font-family: var(--mono);
  word-break: break-all;
  user-select: all;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.secret-pop .acts {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.secret-pop .acts button {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 12px;
  font-size: 12px;
  line-height: 26px;
}

.secret-pop .acts button:hover {
  background: var(--hover);
}

.secret-pop .acts button.primary {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--on-btn);
}

.secret-pop .acts button:disabled {
  opacity: .4;
  cursor: default;
}

@keyframes live-spin {
  to {
    transform: rotate(360deg);
  }
}

button.card-ref[data-run], .live-hash[data-run] {
  position: relative;
  -webkit-text-fill-color: transparent;
}

.live-hash[data-run] {
  --hash-x: 0px;
}

button.card-ref[data-run]:after, .live-hash[data-run]:after {
  content: attr(data-card);
  position: absolute;
  display: flex;
  padding: inherit;
  -webkit-text-fill-color: currentColor;
  pointer-events: none;
  justify-content: flex-end;
  align-items:  center;
  inset: 0;
}

button.card-ref[data-run]:before, .live-hash[data-run]:before {
  --hash-d: .52em;
  content: "";
  position: absolute;
  left: calc(var(--hash-x, 1px)  + (1ch - var(--hash-d)) / 2);
  width: var(--hash-d);
  height: var(--hash-d);
  margin-top: calc(var(--hash-d) / -2 - .02em);
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  pointer-events: none;
  border-radius: 50%;
  top: 50%;
}

@media (prefers-reduced-motion: reduce) {
  button.card-ref[data-run]:before, .live-hash[data-run]:before {
    animation: none;
  }
}

.schedule .card ul.brief button.n {
  font: inherit;
  color: var(--mute);
  padding: 0;
}

.schedule .card ul.brief button.n:hover {
  color: var(--accent);
  text-decoration: underline;
}

.original.workcard .acts {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 2px;
  margin-left: -8px;
  font-size: 12px;
}

.original.workcard .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.original.workcard .acts button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.original.workcard .acts span {
  padding: 3px 8px;
}

.original.workcard .body {
  white-space: normal;
}

.original.workcard section + section {
  margin-top: 16px;
}

.original.workcard h4 {
  color: var(--mute);
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
}

.original.workcard details.ev-fold, .original.workcard details.ev-fold + section {
  margin-top: 16px;
}

.original.workcard details.ev-fold summary {
  color: var(--mute);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.original.workcard details.ev-fold[open] summary {
  margin-bottom: 6px;
}

.original.workcard.is-live .body > .dm {
  box-shadow: none;
  animation: none;
  background: none;
  border: 0;
  border-radius: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.original.workcard.is-live .body > .dm + section {
  border-top: 1px solid var(--hair);
  margin-top: 14px;
  padding-top: 12px;
}

.original.workcard.is-live .dm > .thread {
  height: auto;
}

.original.workcard.is-live .dm > .top {
  justify-content: normal;
}

.original.workcard.is-live .dm .rows {
  row-gap: 4px;
}

.original.workcard.is-live .dm .acts {
  flex-wrap: nowrap;
  gap: 6px;
  margin-left: 0;
}

.original.workcard.is-live .dm .acts span {
  padding: 0;
}

.original.workcard.is-live .dm .acts button:not(:-webkit-any(.send, .icon-btn)) {
  padding: 4px 10px;
}

.original.workcard.is-live .dm .acts button:not(:-moz-any(.send, .icon-btn)) {
  padding: 4px 10px;
}

.original.workcard.is-live .dm .acts button:not(:is(.send, .icon-btn)) {
  padding: 4px 10px;
}

.original.workcard.is-live .dm .acts .send, .original.workcard.is-live .dm .acts .send:hover:not(:disabled) {
  background: var(--btn);
  color: var(--on-btn);
  padding: 5px 18px;
}

.original.workcard ul {
  display: grid;
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.original.workcard .meta {
  display: block;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.original.workcard q {
  display: block;
  margin-top: 2px;
}

.original.workcard .orig {
  color: var(--accent);
  font: inherit;
  text-decoration: none;
  margin-left: -4px;
  padding: 0 4px;
  font-size: 12px;
}

.original.workcard .orig:hover {
  text-decoration: underline;
}

.original.workcard .later button {
  display: grid;
  border-radius: var(--radius-btn);
  color: inherit;
  font: inherit;
  text-align: left;
  gap: 1px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 6px 8px;
  transition: background .15s;
}

.original.workcard .later button:hover {
  background: var(--hover);
}

.original.workcard .gist {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mute);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
}

.original.workcard .hist {
  gap: 4px;
  font-size: 12px;
}

.original.workcard .hist .meta {
  display: inline;
}

.original.workcard .chk {
  color: var(--fail);
  margin: 0 0 12px;
  font-size: 12px;
}

.board {
  container-type: inline-size;
  margin: 14px 0 6px;
  font-size: 13px;
  line-height: 1.5;
}

.board:not(.is-loading) {
  animation: .2s ease-out both fade;
}

.board.is-loading {
  min-height: 120px;
}

.board .wait {
  color: var(--mute);
  animation: 1.4s ease-in-out infinite blink;
  margin: 0;
}

.board header {
  display: grid;
  border-bottom: 1px solid var(--line);
  gap: 2px;
  padding-bottom: 6px;
}

.board.is-bare header {
  border-bottom: 0;
  gap: 0;
  padding: 0;
}

.board header h3 {
  margin: 0;
  font-size: 15px;
}

.board .sum {
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 600;
}

.board .sum .part, .today .board-today .part {
  white-space: nowrap;
}

.board .sum .warn, .today .board-today .warn {
  color: var(--fail);
}

.board .tidy {
  display: flex;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items:  center;
  column-gap: 2px;
  margin: 0 -8px 0 0;
  font-size: 12px;
}

.board .tools {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 2px;
  margin-right: -8px;
  font-size: 12px;
}

.board .tools .when {
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

.board .tools .fresh {
  color: var(--accent);
  padding: 3px 4px;
}

.board .tools button, .board .tidy button, .board .btns button, .board .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.board .tools button:hover:not(:disabled), .board .tidy button:hover:not(:disabled), .board .btns button:hover:not(:disabled), .board .acts button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.board button:disabled {
  opacity: .5;
  cursor: default;
}

.board .grp h4, .board .aside summary, .board .handled summary {
  color: var(--mute);
  margin: 14px 0 2px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
}

.board .grp h4 b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  font-weight: 600;
}

.board .aside summary, .board .handled summary {
  border-top: 1px solid var(--line);
  cursor: pointer;
  padding-top: 10px;
}

.board ol.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board .row {
  border-bottom: 1px solid var(--hair);
  padding: 8px 0;
  transition: opacity .2s;
}

.board .row:last-child {
  border-bottom: 0;
}

.board .row.is-closed {
  opacity: .55;
}

.board .row.is-closed:hover, .board .row.is-closed:focus-within {
  opacity: 1;
}

.board .row.tickrow {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 24px;
  align-items:  start;
  column-gap: 10px;
}

.board .row .tick {
  box-sizing: border-box;
  border: 1.5px solid var(--hair-strong);
  cursor: pointer;
  background: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 0;
  transition: border-color .15s, background .15s;
}

.board .row .tick.is-none {
  cursor: default;
  border: 0;
}

.board .row .tick.is-hint {
  border-color: var(--accent);
}

.board .row .tick:hover:not(.is-none) {
  border-color: var(--ink);
}

.board .row .tick[aria-checked="true"] {
  border-color: var(--mute);
  background: var(--mute);
}

.board .row .tick[aria-checked="true"]:after {
  content: "";
  display: block;
  border: solid var(--field);
  border-width: 0 1.5px 1.5px 0;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  transform: rotate(45deg);
}

.board .row .cell {
  min-width: 0;
}

.board .row .more {
  display: inline-grid;
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  place-items:  center;
  width: 24px;
  height: 22px;
  padding: 0;
  transition: color .15s, background .15s;
  line-height: 1;
}

.board .row .more:hover, .board .row .more[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}

.board .row.tickrow {
  position: relative;
}

.board .row .acts {
  position: absolute;
  z-index: 1;
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--mute);
  opacity: 0;
  transform-origin: right bottom;
  pointer-events: none;
  align-items:  center;
  gap: 1px;
  padding: 2px;
  transition: opacity .14s, transform .2s cubic-bezier(.2,.8,.2,1);
  font-size: 12px;
  bottom: -11px;
  right: 0;
  transform: translateY(4px)scale(.98);
}

.board .row .acts button {
  opacity: 0;
  padding: 2px 8px;
  transition: opacity .18s, transform .24s cubic-bezier(.2,.8,.2,1), color .15s, background .15s;
  transform: translateX(6px);
}

.board .row:hover .acts, .board .row:focus-within .acts, .board .row .acts.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 70ms;
  transform: none;
}

.board .row:hover .acts button, .board .row:focus-within .acts button, .board .row .acts.is-open button {
  opacity: 1;
  transform: none;
}

.board .row:hover .acts button:first-child, .board .row:focus-within .acts button:first-child, .board .row .acts.is-open button:first-child {
  transition-delay: 90ms;
}

.board .row:hover .acts button:nth-child(2), .board .row:focus-within .acts button:nth-child(2), .board .row .acts.is-open button:nth-child(2) {
  transition-delay: .12s;
}

.board .row:hover .acts button:nth-child(3), .board .row:focus-within .acts button:nth-child(3), .board .row .acts.is-open button:nth-child(3) {
  transition-delay: .15s;
}

.board .row:hover .acts button:nth-child(n+4), .board .row:focus-within .acts button:nth-child(n+4), .board .row .acts.is-open button:nth-child(n+4) {
  transition-delay: .18s;
}

.board.is-bare .row .acts {
  bottom: -13px;
}

.board .row.is-asking .acts {
  display: none;
}

@media (hover: hover) {
  .board .row.tickrow {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .board .row .more {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board .row .acts, .board .row .acts button {
    transition: opacity .12s;
    transform: none;
  }
}

.board .line {
  display: grid;
  gap: 2px;
}

.board .byline {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  font-size: 12px;
}

.board .ttl {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.board .row.is-closed .ttl {
  font-weight: 500;
}

.board .row.is-asking .ttl {
  color: var(--accent);
}

.board .sub {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.board .byline .sub {
  font-size: inherit;
}

.board button.card-ref {
  color: var(--mute);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.board button.card-ref:hover {
  color: var(--ink);
  text-decoration: underline;
}

.board .orig {
  color: var(--mute);
  font: inherit;
  padding: 0;
  font-size: 12px;
}

.board .byline .orig, .board .why .orig, .board .advice .orig {
  color: var(--mute);
  padding: 0;
}

.board .byline .orig {
  margin-left: 0;
}

.board .why .orig, .board .advice .orig {
  margin-left: 6px;
}

.board .orig:hover {
  color: var(--ink);
  text-decoration: underline;
}

.board .byline .ask-ref[aria-expanded="true"] {
  color: var(--accent);
}

.board .why, .board .advice, .board .dups {
  color: var(--mute);
  overflow-wrap: anywhere;
  margin: 2px 0 0;
  font-size: 12px;
}

.board .chip {
  color: var(--ink);
  margin-right: 6px;
  font-weight: 600;
}

.board .chip.is-ok {
  color: var(--ok);
}

.board .chip.is-warn {
  color: var(--fail);
}

.board .advice {
  color: var(--ink);
}

.board .advice .by {
  color: var(--mute);
  margin-right: 6px;
  font-weight: 500;
}

.board .dups button.card-ref {
  margin-left: 4px;
}

.board .why button.trail-ref {
  margin-left: 6px;
}

.board .dups .join {
  color: var(--accent);
  font: inherit;
  margin-left: 6px;
  padding: 0 4px;
}

.board .dups .join:hover {
  text-decoration: underline;
}

.board .row.is-aside .ttl {
  font-weight: 500;
}

.board .btns {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 2px;
  margin: 3px 0 0 -8px;
  font-size: 12px;
}

.board .tidy button.is-first, .board .btns button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.board .btns .as {
  padding: 3px 8px;
}

.board .err {
  color: var(--fail);
  margin: 4px 0 0;
  font-size: 12px;
}

.board .err button {
  color: var(--accent);
  font: inherit;
}

.board .rhythm {
  border-bottom: 1px solid var(--line);
  margin: 8px 0 0;
  padding: 6px 0 8px;
  font-size: 13px;
}

.board .rhythm .r-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
}

.board .rhythm .r-head b {
  font-size: 12px;
  font-weight: 600;
}

.board .rhythm .r-head .when {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.board .rhythm button.r-head {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  padding: 0;
}

.board .rhythm .r-say {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.board .rhythm button.r-head:hover :-webkit-any(.r-say, .when) {
  color: var(--ink);
}

.board .rhythm button.r-head:hover :-moz-any(.r-say, .when) {
  color: var(--ink);
}

.board .rhythm button.r-head:hover :is(.r-say, .when) {
  color: var(--ink);
}

.board .rhythm :-webkit-any(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm :-moz-any(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm :is(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm button.r-head:hover :-webkit-any(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm button.r-head:hover :-moz-any(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm button.r-head:hover :is(.r-say, .when).is-warn {
  color: var(--fail);
}

.board .rhythm .r-detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 4px 0 6px;
  font-size: 12px;
}

.board .rhythm .r-detail > div {
  display: contents;
}

.board .rhythm .r-detail dt {
  color: var(--mute);
}

.board .rhythm .r-detail dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.board .rhythm .r-detail .is-warn dd {
  color: var(--fail);
}

.board .rhythm .r-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board .rhythm .r-lines li {
  display: flex;
  align-items: baseline;
  column-gap: 6px;
  padding: 2px 0;
}

.board .rhythm .r-text {
  overflow-wrap: anywhere;
  flex: 1 1 0;
  min-width: 0;
}

.board .rhythm .r-acts {
  flex: none;
}

.board .rhythm .r-lines li.is-stack {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

.board .rhythm li.is-stack .r-acts {
  grid-column: 2;
  margin-left: -8px;
}

.board .rhythm li.is-stack .err {
  grid-column: 2;
}

.board .rhythm li.is-closed .r-text {
  color: var(--mute);
}

.board .rhythm .r-acts, .board .rhythm .r-foot {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  margin: 0 -8px 0 0;
  font-size: 12px;
}

.board .rhythm .r-foot {
  justify-content: flex-end;
  margin-top: 4px;
}

.board .rhythm .r-foot.confirm > span {
  flex: 16em;
  padding: 3px 0;
}

.board .rhythm .r-why {
  padding: 3px 8px;
}

.board .rhythm li.is-pick .r-acts {
  flex-wrap: nowrap;
  min-width: 0;
}

.board .rhythm li.is-pick .r-why {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 auto;
  min-width: 0;
}

.board .rhythm li.is-pick :-webkit-any(.as, button) {
  flex: none;
}

.board .rhythm li.is-pick :-moz-any(.as, button) {
  flex: none;
}

.board .rhythm li.is-pick :is(.as, button) {
  flex: none;
}

.board .rhythm .as {
  padding: 3px 8px;
}

.board .rhythm :-webkit-any(.r-acts, .r-foot) button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.board .rhythm :-moz-any(.r-acts, .r-foot) button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.board .rhythm :is(.r-acts, .r-foot) button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.board .rhythm :-webkit-any(.r-acts, .r-foot) button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.board .rhythm :-moz-any(.r-acts, .r-foot) button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.board .rhythm :is(.r-acts, .r-foot) button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.board .rhythm :-webkit-any(.r-acts, .r-foot) button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.board .rhythm :-moz-any(.r-acts, .r-foot) button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.board .rhythm :is(.r-acts, .r-foot) button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.board .rhythm .r-closed summary {
  color: var(--mute);
  cursor: pointer;
  margin: 6px 0 2px;
  font-size: 11px;
  font-weight: 600;
}

.board .rhythm .err {
  flex-basis: 100%;
  margin: 0;
}

.board .rhythm .r-meet {
  border-top: 1px dashed var(--line);
  margin-top: 8px;
  padding-top: 6px;
}

.board .rhythm .r-meet-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin: 0 0 2px;
}

.board .rhythm .r-meet-h b {
  font-size: 12px;
  font-weight: 600;
}

.board .rhythm :-webkit-any(.r-meet-h, .r-text) .when {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.board .rhythm :-moz-any(.r-meet-h, .r-text) .when {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.board .rhythm :is(.r-meet-h, .r-text) .when {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.board .rhythm .r-made {
  color: var(--mute);
  margin-left: 8px;
  font-size: 12px;
}

.board .rhythm .r-made .card-ref {
  margin-right: 2px;
}

.board .rhythm li.is-meet .r-acts {
  flex-wrap: nowrap;
  margin-left: 0;
}

.board .rhythm li.is-meet input {
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  color: var(--ink);
  font: inherit;
  background: none;
  flex: auto;
  min-width: 0;
  padding: 3px 2px;
  transition: border-color .2s;
}

.board .rhythm li.is-meet input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.board .rhythm li.is-meet input::placeholder {
  color: color-mix(in srgb, var(--mute) 70%, transparent);
}

.board .why .risk {
  color: var(--fail);
  margin-right: 6px;
}

.board .empty {
  color: var(--mute);
  margin: 10px 0 0;
}

.board .row .dm, .board .row .ask {
  margin-top: 8px;
}

.board.is-bare .headline, .original.day .headline {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.board.is-bare .headline .part {
  white-space: nowrap;
}

.board.is-bare .headline .warn {
  color: var(--fail);
}

.board.is-bare .first {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.board.is-bare .first .k {
  color: var(--mute);
  margin-right: 8px;
  font-size: 12px;
}

.board.is-bare .first .sub {
  margin-left: 8px;
}

.board.is-bare .first .ttl {
  font-size: 13px;
  font-weight: 500;
}

.board.is-bare .first .sub {
  font-size: 12px;
}

.board.is-bare .aux {
  color: var(--mute);
  margin: 4px 0 0;
  font-size: 12px;
}

.board .tidy p {
  min-width: 0;
  margin: 0;
}

.board.is-bare footer .tidy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  margin-bottom: 2px;
}

.board.is-bare footer .tidy b {
  color: var(--ink);
  font-weight: 500;
}

.board.is-bare .tidy .part {
  white-space: nowrap;
}

.board.is-bare .grp h4 {
  margin: 22px 0 0;
  font-size: 12px;
}

.board.is-bare .grp h4 b {
  color: var(--mute);
  font-weight: 400;
}

.board.is-bare .row {
  padding: 12px 0;
}

.board.is-bare .ttl {
  font-size: 14px;
  line-height: 1.45;
}

.board.is-bare .why {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
}

.board.is-bare .chip, .board.is-bare .advice .by {
  font-size: 12px;
}

.board.is-bare .btns {
  margin-top: 6px;
}

.board.is-bare .aside summary, .board.is-bare .handled summary {
  margin: 0;
  padding: 11px 0;
  font-size: 12px;
  font-weight: 500;
}

.board.is-bare .grp + details {
  margin-top: 18px;
}

.board.is-bare footer {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding: 10px 0 16px;
}

.today .board-today {
  border-bottom: 1px solid var(--line);
  margin: 0 0 12px;
  padding-bottom: 10px;
}

.today .board-today h4 {
  padding-top: 0;
}

.today .board-today p {
  font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
  font-size: 13px;
}

.today .board-today .err {
  color: var(--fail);
  font-size: 12px;
}

.today .board-today ol.next {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0;
  font-size: 13px;
}

.today .board-today ol.next li {
  display: flex;
  overflow-wrap: anywhere;
  border-bottom: 0;
  gap: 8px;
  padding: 1px 0;
  font-size: 13px;
}

.today .board-today ol.next .t {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 36px;
}

.today .board-today .hint {
  color: var(--mute);
  font-size: 12px;
}

.today .board-today .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: -8px;
  font-size: 13px;
}

.today .board-today .btns button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.today .board-today .btns button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.today .board-today .btns button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.original.day .day-nav {
  display: flex;
  align-items:  center;
  gap: 2px;
  margin: -4px 0 0 -8px;
}

.original.day .day-nav button:not(.icon-btn) {
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  padding: 2px 8px;
}

.original.day .day-nav button:not(.icon-btn):hover:not(:disabled) {
  background: var(--hover);
}

.original.day .day-nav button:disabled {
  color: var(--mute);
  opacity: .45;
}

.original.day .day-nav .step {
  font-size: 16px;
  line-height: 1.3;
}

.original.day .day-nav .date {
  font-size: 16px;
  font-weight: 600;
}

.original.day .day-nav .to-today {
  color: var(--accent);
  margin-left: 4px;
  font-size: 12px;
}

.original.day .day-nav .icon-btn {
  margin: 0 -6px 0 auto;
}

.original.day .days {
  display: grid;
  border-top: 1px solid var(--hair);
  overflow-y: auto;
  list-style: none;
  gap: 0;
  max-height: 40%;
  margin: 0 -8px;
  padding: 4px 0;
}

.original.day .days button {
  display: flex;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: left;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 4px 8px;
}

.original.day .days button:hover {
  background: var(--hover);
}

.original.day .days button[aria-current] {
  font-weight: 600;
}

.original.day .days .n {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 400;
}

.original.day .tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 -10px -8px;
}

.original.day .tabs button {
  color: var(--mute);
  font: inherit;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid #0000;
  padding: 4px 8px 5px;
  font-weight: 600;
}

.original.day .tabs button:hover:not(:disabled) {
  color: var(--ink);
}

.original.day .tabs button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.original.day .tabs button:disabled {
  opacity: .45;
}

.original.day .body {
  transition: opacity .15s;
}

.original.day .body.is-stale {
  opacity: .55;
}

.original.day .body .board {
  margin-top: 2px;
}

.original.day .none {
  color: var(--mute);
  margin: 6px 0;
}

.original.day .none p {
  margin: 0 0 8px;
}

.original.day .none button {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 3px 10px;
  font-size: 12px;
}

.original.day .breakdown {
  color: var(--mute);
  margin: 2px 0 8px;
  font-size: 12px;
}

.original.talk ol.talk-log {
  display: grid;
  list-style: none;
  white-space: normal;
  margin: 0;
  padding: 0;
}

.original.talk ol.talk-log li {
  border-bottom: 1px solid var(--hair);
  padding: 8px 0;
}

.original.talk ol.talk-log li.is-focus {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  margin: 0 -8px;
  padding: 8px;
}

.original.talk ol.talk-log .who {
  font-size: 12.5px;
  font-weight: 600;
}

.original.talk ol.talk-log .t {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  font-size: 12px;
}

.original.talk ol.talk-log p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 2px 0 0;
  line-height: 1.55;
}

.original.talk ol.talk-log .gone, .original.talk ol.talk-log .att {
  color: var(--mute);
  font-size: 12.5px;
}

.original.talk ol.talk-log .att {
  margin-left: 6px;
}

.original.day ol.log {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.original.day ol.log li {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  border-bottom: 1px solid var(--hair);
  gap: 10px;
  padding: 10px 0;
}

.original.day ol.log .t {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  line-height: 1.5;
}

.original.day ol.log .main {
  overflow-wrap: anywhere;
}

.original.day ol.log .ttl {
  display: block;
  line-height: 1.5;
}

.original.day ol.log .byline {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-top: 1px;
  font-size: 12px;
}

.original.day ol.log .what {
  font-weight: 600;
}

.original.day ol.log .card-ref, .original.day ol.log .orig {
  color: var(--mute);
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.original.day ol.log .card-ref:hover, .original.day ol.log .orig:hover {
  color: var(--ink);
  text-decoration: underline;
}

.original.day ol.log li.is-undone .ttl {
  color: var(--mute);
  text-decoration: line-through;
}

.original.day details.tidied {
  margin-top: 6px;
}

.original.day details.tidied summary {
  color: var(--mute);
  cursor: pointer;
  padding: 11px 0;
  font-size: 12px;
  font-weight: 500;
}

.original.day details.tidied[open] summary {
  margin-bottom: 4px;
}

.original .mh {
  --g-bg: color-mix(in srgb, var(--ink) 90%, var(--accent));
  --g-ink: color-mix(in srgb, var(--field) 94%, transparent);
  --g-mute: color-mix(in srgb, var(--field) 58%, transparent);
  --g-line: color-mix(in srgb, var(--field) 30%, transparent);
  --g-dot: color-mix(in srgb, var(--field) 13%, transparent);
  --g-accent: color-mix(in srgb, var(--accent) 55%, var(--field));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:root[data-scheme="dark"] .original .mh {
  --g-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
  --g-ink: var(--ink);
  --g-mute: var(--mute);
  --g-line: color-mix(in srgb, var(--ink) 30%, transparent);
  --g-dot: color-mix(in srgb, var(--ink) 14%, transparent);
  --g-accent: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .original .mh {
    --g-bg: color-mix(in srgb, var(--surface) 55%, var(--field));
    --g-ink: var(--ink);
    --g-mute: var(--mute);
    --g-line: color-mix(in srgb, var(--ink) 30%, transparent);
    --g-dot: color-mix(in srgb, var(--ink) 14%, transparent);
    --g-accent: var(--accent);
  }
}

.original .mh-top {
  display: flex;
  font-family: var(--mono);
  letter-spacing: .05em;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  align-items: baseline;
  gap: 10px;
  min-height: 18px;
  font-size: 11px;
}

.original .mh-top .tag {
  color: var(--accent);
  cursor: default;
  margin: 0;
  font-weight: 700;
}

.original .mh-top .tag:before {
  content: "";
  display: inline-block;
  background: var(--accent);
  vertical-align: 1px;
  width: 6px;
  height: 6px;
  margin-right: 6px;
}

.original .mh-top .legend {
  overflow: hidden;
  text-overflow: ellipsis;
}

.original .mh-top .keys {
  letter-spacing: 0;
  margin-left: auto;
}

.original .mh-top .keys i {
  display: inline-block;
  border-top: 1.5px solid var(--ink);
  vertical-align: 3px;
  width: 14px;
  margin: 0 4px 0 8px;
}

.original .mh-top .keys .k-cc {
  border-top-style: dashed;
  border-top-color: var(--mute);
}

.original .mh-frame {
  position: relative;
  padding: 3px;
}

.original .mh-frame:before, .original .mh-frame:after {
  content: "";
  position: absolute;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  width: 10px;
  height: 10px;
}

.original .mh-frame:before {
  border-bottom: 0;
  border-right: 0;
  top: 0;
  left: 0;
}

.original .mh-frame:after {
  border-top: 0;
  border-left: 0;
  bottom: 0;
  right: 0;
}

.original .mh-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--g-bg);
  transition: height .22s;
}

.original .mh-svg {
  display: block;
  font-family: var(--font);
}

.original .mh .e {
  fill: none;
  stroke: var(--g-line);
  stroke-width: 1.2;
  transition: stroke .15s, stroke-width .15s;
}

.original .mh .e.to {
  animation: .28s ease-out backwards mh-draw;
}

.original .mh .e.cc {
  stroke-dasharray: 3 3;
  animation: .28s ease-out backwards mh-fade;
}

.original .mh .e.hot {
  stroke: var(--g-accent);
  stroke-width: 1.6;
}

@keyframes mh-draw {
  from {
    stroke-dasharray: 0 1;
  }

  to {
    stroke-dasharray: 1 0;
  }
}

@keyframes mh-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.original .mh-n {
  cursor: pointer;
  outline: none;
}

.original .mh-n .hit {
  fill: transparent;
}

.original .mh-n .dot {
  fill: var(--g-ink);
  stroke: var(--g-bg);
  stroke-width: 1.5;
  transition: fill .15s, stroke .15s;
}

.original .mh-n.cc .dot {
  fill: var(--g-bg);
  stroke: var(--g-mute);
  stroke-width: 1.2;
}

.original .mh-n.group .dot {
  fill: var(--g-dot);
  stroke: var(--g-mute);
  stroke-width: 1.2;
}

.original .mh-n.me .dot {
  fill: var(--g-accent);
  stroke: var(--g-accent);
}

.original .mh .t1 {
  fill: var(--g-ink);
  font-size: 12px;
}

.original .mh .t2 {
  fill: var(--g-mute);
  font-size: 11px;
}

.original .mh-n.me .t1 {
  fill: var(--g-accent);
  font-weight: 600;
}

.original .mh-n:hover .t1, .original .mh-cap.fold:hover .t2 {
  fill: var(--g-accent);
}

.original .mh-n:focus-visible .t1 {
  fill: var(--g-accent);
}

.original .mh .mh-chev {
  color: var(--g-mute);
  transition: color .15s;
}

.original .mh-n.group:-webkit-any(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-n.group:-moz-any(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-n.group:is(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-cap.fold:-webkit-any(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-cap.fold:-moz-any(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-cap.fold:is(:hover, :focus-visible) .mh-chev {
  color: var(--g-accent);
}

.original .mh-n:focus-visible .dot {
  stroke: var(--g-accent);
  stroke-width: 2;
}

.original .mh .cap {
  fill: var(--g-mute);
  font-family: var(--mono);
  letter-spacing: .06em;
  font-size: 10px;
}

.original .mh-cap.fold {
  cursor: pointer;
  outline: none;
}

.original .mb > * + * {
  margin-top: 8px;
}

.original .mb-fold {
  border-left: 2px solid var(--hair);
  white-space: normal;
  margin-left: 1px;
  padding-left: 10px;
}

.original .mb-fold.strip {
  border-left-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
}

.original .mb-head {
  display: flex;
  border-radius: var(--radius-sm);
  color: var(--mute);
  text-align: left;
  align-items:  center;
  gap: 8px;
  width: calc(100% + 6px);
  margin-left: -6px;
  padding: 3px 6px;
  transition: background .15s, color .15s;
  font-size: 12.5px;
}

.original .mb-head:hover {
  background: var(--hover);
  color: var(--ink);
}

.original .mb-tag {
  font-family: var(--mono);
  letter-spacing: .06em;
  color: var(--accent);
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
}

.original .mb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.original .mb-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-left: auto;
  font-size: 11px;
}

.original .mb-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s;
}

.original .mb-fold.is-open .mb-wrap {
  grid-template-rows: 1fr;
}

.original .mb-inner {
  overflow: hidden;
  min-height: 0;
}

.original .mb-part {
  color: var(--mute);
  padding: 6px 0 2px;
}

.original .mb-part + .mb-part {
  border-top: 1px dashed var(--hair);
}

.original .mb-part header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 2px;
}

.original .mb-plabel {
  font-family: var(--mono);
  letter-spacing: .04em;
  font-size: 10.5px;
}

.original .mb-keep {
  border-radius: var(--radius-btn);
  color: var(--accent);
  margin-left: auto;
  padding: 2px 8px;
  transition: background .15s;
  font-size: 12px;
}

.original .mb-keep:hover:not(:disabled) {
  background: var(--hover);
}

.original .mb-keep:disabled {
  color: var(--mute);
}

.original .mb-err {
  color: var(--fail);
  margin: 0 0 4px;
  font-size: 12px;
}

.original .mb-ptext {
  white-space: pre-wrap;
  font-size: 13px;
}

.original .mb-img {
  display: inline-block;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  color: var(--mute);
  font-family: var(--mono);
  white-space: nowrap;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.7;
}

.original .rows.has-graph > .who {
  display: none;
}

@media (max-width: 1199px) {
  .app.has-second .original .mh {
    display: none;
  }

  .app.has-second .original.second .rows.has-graph > .who {
    display: block;
  }
}

.original .notes .miss {
  color: var(--mute);
  white-space: nowrap;
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
}

.tether {
  position: fixed;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  inset: 0;
}

.tether-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: .85;
}

.tether-dot {
  fill: var(--accent);
}

.tether-arrow {
  position: fixed;
  z-index: 7;
  border: 1px solid var(--accent);
  background: var(--pop);
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
}

.tether-arrow:before {
  content: "";
  position: absolute;
  border-left: 1.5px solid var(--accent);
  border-top: 1.5px solid var(--accent);
  width: 6px;
  height: 6px;
  top: 6px;
  left: 5px;
  transform: rotate(45deg);
}

.tether-arrow.down:before {
  top: 3px;
  transform: rotate(225deg);
}

.original .top .pair {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
  margin: 0 auto 0 10px;
}

.pair-n {
  display: inline-flex;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  letter-spacing: .02em;
  justify-content: center;
  align-items:  center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.original .top .to-answer {
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.original .top .to-answer:hover {
  color: var(--accent);
}

.original .top .to-answer:focus-visible {
  color: var(--accent);
}

.answer[data-pair] {
  position: relative;
}

.answer[data-pair]:before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 1px;
  width: 2px;
  top: 22px;
  bottom: 10px;
  left: -12px;
}

.answer .turn-pair {
  position: absolute;
  top: 2px;
  left: -19px;
}

@media (max-width: 640px) {
  .answer[data-pair]:before {
    left: -8px;
  }

  .answer .turn-pair {
    left: -15px;
  }
}

.answer.is-pair-flash:before {
  animation: .9s ease-out pair-flash;
}

@keyframes pair-flash {
  0%, 30% {
    background: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

.original .mc {
  display: flex;
  white-space: normal;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.original .mc-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.original .mc-row {
  display: flex;
  border-radius: var(--radius-sm);
  animation: .24s ease-out both mc-in;
  animation-delay: calc(var(--i, 0) * 40ms);
  align-items: baseline;
  gap: 8px;
  padding: 3px 8px;
  transition: background .15s;
}

.original .mc.mc-still .mc-row {
  animation: none;
}

@keyframes mc-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

.original .mc-row.is-core-hot {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.original .mc-main {
  display: flex;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.original .mc-main:disabled {
  cursor: default;
  color: inherit;
}

.original .mc-kind {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
  flex: none;
  width: 2.6em;
  font-size: 11px;
}

.original .mc-row.k-gist .mc-kind {
  color: var(--accent);
}

.original .mc-text {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.original .mc-side {
  display: flex;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  flex: none;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}

.original .mc-card {
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 5px;
  transition: border-color .15s;
}

.original .mc-card:hover {
  border-color: var(--accent);
}

.original .mc-card:focus-visible {
  border-color: var(--accent);
}

.original .mc-more {
  color: var(--mute);
  font-family: var(--mono);
  cursor: pointer;
  background: none;
  border: 0;
  align-self:  flex-start;
  margin: 0 8px 4px;
  padding: 0;
  font-size: 11px;
}

.original .mc-more:hover {
  color: var(--ink);
}

.original mark.core {
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 60%, transparent);
  background: none;
  border-radius: 0;
  padding: 0;
  transition: background .15s;
}

.original mark.core.is-core-hot {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.original mark:not(.core).is-core-hot {
  box-shadow: 0 0 0 1px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .original .mh-box, .original .mh .e, .original .mh-n .dot, .original .mb-head, .original .mb-wrap, .original .mb-keep, .original .mc-row, .original .mc-card, .original mark.core, .original .top .to-answer {
    transition: none;
  }

  .answer.is-pair-flash:before, .original .mh .e.to, .original .mh .e.cc, .original .mc-row {
    animation: none;
  }
}

.copy {
  display: inline-grid;
}

.copy > [data-l] {
  grid-area: 1 / 1;
  visibility: hidden;
}

.copy[data-copy="idle"] > [data-l="idle"], .copy[data-copy="done"] > [data-l="done"], .copy[data-copy="fail"] > [data-l="fail"] {
  visibility: visible;
}

.sr {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

.answer .answer-files {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12.5px;
}

.answer-files .h {
  color: var(--mute);
  margin-right: 2px;
}

.answer-files .f {
  display: inline-flex;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  background: var(--surface);
  align-items:  center;
  gap: 6px;
  min-width: 0;
  max-width: min(100%, 360px);
  padding: 3px 10px 3px 4px;
  transition: background .12s;
}

.answer-files .f:hover:not(:disabled) {
  background: var(--hover);
}

.answer-files .f:disabled {
  cursor: progress;
}

.answer-files .x {
  border-radius: var(--radius-sm);
  background: var(--hover);
  color: var(--mute);
  text-transform: uppercase;
  flex: none;
  padding: 0 5px;
  font-size: 10.5px;
  line-height: 17px;
}

.answer-files .n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.answer-files .w {
  color: var(--mute);
  flex: none;
}

.answer-files .more {
  color: var(--mute);
  padding: 3px 6px;
}

.answer-files .more:hover {
  color: var(--ink);
}

.answer-files .err {
  color: var(--fail);
  flex-basis: 100%;
}

.answer .copy-row {
  color: var(--mute);
  margin: 8px 0 0;
  transition: opacity .15s;
  font-size: 13px;
}

.answer .copy-row.is-wait {
  visibility: hidden;
  opacity: 0;
}

.answer .copy-row .copy {
  text-align: start;
}

.answer .copy-row .copy:hover:not(:disabled) {
  color: var(--ink);
}

.dm .acts .copy {
  margin-left: auto;
}

.dm.is-sent .acts .copy span {
  color: inherit;
}

@media (max-width: 480px) {
  .actions .copy-all {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .answer .copy-row {
    transition: none;
  }
}

.dm .mode {
  color: var(--mute);
  font-size: 12px;
}

.dm .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm .field > span {
  color: var(--mute);
  font-size: 11px;
}

.dm .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dm .chip {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  background: none;
  padding: 2px 9px;
  transition: color .2s, border-color .2s;
  font-size: 12px;
}

button.chip {
  cursor: pointer;
}

.dm .chip small {
  color: var(--mute);
  margin-left: 6px;
  font-size: 11px;
}

.dm .chip.is-off {
  color: var(--mute);
  text-decoration: line-through;
  border-style: dashed;
}

.dm .base {
  color: var(--mute);
  font-size: 12px;
}

.dm .base summary {
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
}

.dm .base summary:hover {
  color: var(--ink);
}

.dm .base .rows {
  margin-top: 6px;
}

.dm .base .rows dd.text {
  display: block;
  color: var(--ink);
  border-left: 0;
  padding: 0;
}

.dm.is-calendar input:not([type="checkbox"]) {
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  color: var(--ink);
  font: inherit;
  background: none;
  border-radius: 0;
  min-width: 0;
  padding: 0 2px;
  transition: border-color .2s;
  line-height: 1.7;
}

.dm.is-calendar input:not([type="checkbox"]):focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.dm.is-calendar input:disabled {
  color: var(--mute);
}

.dm.is-calendar .title {
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
}

.dm.is-calendar input.title, .dm.is-calendar input.place {
  box-sizing: border-box;
  width: 100%;
}

.dm.is-calendar .rows dd.when {
  align-items:  center;
  gap: 4px 12px;
}

.dm.is-calendar .when .span {
  display: inline-flex;
  color: var(--mute);
  align-items:  center;
  gap: 6px;
}

.dm.is-calendar .allday {
  display: inline-flex;
  color: var(--mute);
  cursor: pointer;
  align-items:  center;
  gap: 5px;
  font-size: 12px;
}

.dm.is-calendar .allday input {
  accent-color: var(--accent);
  margin: 0;
}

.dm.is-calendar .rows dd.chips {
  gap: 6px;
}

.dm.is-calendar .miss {
  color: var(--mute);
  font-size: 12px;
}

.dm.is-calendar .rows dd.seg {
  gap: 6px;
}

.dm.is-calendar .seg button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 1px 10px;
  transition: color .2s, border-color .2s, background .2s;
  font-size: 12px;
}

.dm.is-calendar .seg button:hover:not(:disabled) {
  color: var(--ink);
}

.dm.is-calendar .seg button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.dm.is-calendar .acts {
  flex-wrap: wrap;
}

.dm.is-calendar :is(.err, .mode, .acts span) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.dm.is-calendar .acts .asking {
  display: inline-flex;
  color: var(--ink);
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
}

.dm.is-calendar .acts .danger {
  color: var(--fail);
}

.dm.is-calendar .acts .danger:hover:not(:disabled) {
  color: var(--fail);
  background: color-mix(in srgb, var(--fail) 10%, transparent);
}

.dm.is-print .title {
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
}

.dm.is-print .pmark {
  border: 1px solid color-mix(in srgb, var(--kind-deadline) 45%, var(--hair));
  border-radius: var(--radius-sm);
  color: var(--kind-deadline);
  letter-spacing: 0;
  cursor: help;
  padding: 0 6px;
  font-size: 11px;
}

.dm.is-print .pthumbs {
  display: flex;
  align-items:  flex-end;
  gap: 8px;
}

.dm.is-print .pthumb {
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  cursor: zoom-in;
  width: 76px;
  padding: 0;
  transition: border-color .15s;
}

.dm.is-print .pthumb:hover {
  border-color: var(--accent);
}

.dm.is-print .pthumb:focus-visible {
  border-color: var(--accent);
}

.dm.is-print .pthumb img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.dm.is-print .pmore {
  border-radius: var(--radius-btn);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  font-size: 12px;
}

.dm.is-print .pmore:hover {
  color: var(--ink);
  background: var(--hover);
}

.dm.is-print select, .dm.is-print input.pcopies {
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  color: var(--ink);
  font: inherit;
  background: none;
  border-radius: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0 2px;
  transition: border-color .2s;
  line-height: 1.7;
}

.dm.is-print input.pcopies {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 3.2em;
}

.dm.is-print :-webkit-any(select, input):focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.dm.is-print :-moz-any(select, input):focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.dm.is-print :is(select, input):focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.dm.is-print :-webkit-any(select, input):disabled {
  color: var(--mute);
}

.dm.is-print :-moz-any(select, input):disabled {
  color: var(--mute);
}

.dm.is-print :is(select, input):disabled {
  color: var(--mute);
}

.dm.is-print .rows dd.pprinter {
  align-items:  center;
}

.dm.is-print :-webkit-any(.pstate, .pnote) {
  color: var(--mute);
  font-size: 12px;
}

.dm.is-print :-moz-any(.pstate, .pnote) {
  color: var(--mute);
  font-size: 12px;
}

.dm.is-print :is(.pstate, .pnote) {
  color: var(--mute);
  font-size: 12px;
}

.dm.is-print .pwhy {
  color: var(--accent);
  font-size: 12px;
}

.dm.is-print .rows dd.seg {
  gap: 6px;
}

.dm.is-print .seg button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 1px 10px;
  transition: color .2s, border-color .2s, background .2s;
  font-size: 12px;
}

.dm.is-print .seg button:hover:not(:disabled) {
  color: var(--ink);
}

.dm.is-print .seg button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.dm.is-print .acts {
  flex-wrap: wrap;
}

.dm.is-print :is(.err, .mode, .acts span) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.dm.is-print .psteps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  list-style: none;
  gap: 3px;
  margin: 2px 0 0;
  padding: 0;
}

.dm.is-print .psteps li {
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--mute);
  text-align: center;
  white-space: nowrap;
  padding: 2px 6px;
  transition: color .2s, border-color .2s, background .2s;
  font-size: 11px;
  line-height: 18px;
}

.dm.is-print .psteps li .t {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm.is-print .psteps li.s-done {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--hair));
  background: color-mix(in srgb, var(--ok) 12%, var(--field));
  color: var(--ink);
}

.dm.is-print .psteps li.s-now {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
  color: var(--ink);
  font-weight: 600;
}

.dm.is-print .psteps li.s-fail {
  border-color: color-mix(in srgb, var(--fail) 50%, var(--hair));
  color: var(--fail);
}

.dm.is-print .psteps li.s-skip {
  background: none;
  border-style: dashed;
}

.dm.is-print .run {
  position: absolute;
  overflow: hidden;
  border-radius: inherit;
  color: var(--ink);
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  padding: 1.5px;
  transition: opacity .3s;
  inset: 0;
}

.dm.is-print .run:before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background: conic-gradient(var(--cosmos-1), var(--cosmos-2), var(--cosmos-3), var(--cosmos-4), var(--cosmos-1));
  width: calc(100% + 120px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dm.is-print .run.is-on {
  opacity: 1;
}

.dm.is-print .run.is-on:before {
  animation: 6s steps(24, end) infinite live-band;
}

@media (prefers-reduced-motion: reduce) {
  .dm.is-print .run.is-on:before {
    animation: none;
  }
}

.original.print-pages .phead {
  color: var(--mute);
  margin: 0;
  font-size: 12px;
}

.original.print-pages .err {
  color: var(--fail);
  margin: 0;
}

.original.print-pages .ppages {
  display: flex;
  overflow: auto;
  list-style: none;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-height: 0;
  margin: 0 -16px;
  padding: 4px 16px 16px;
}

.original.print-pages .ppages li {
  display: flex;
  flex-direction: column;
  align-items:  center;
  gap: 4px;
}

.original.print-pages .ppages img {
  display: block;
  aspect-ratio: auto 210 / 297;
  border: 1px solid var(--hair);
  background: var(--field);
  box-shadow: var(--card-shadow);
  width: 100%;
  height: auto;
}

.original.print-pages .pno {
  color: var(--mute);
  font: 11px / 1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}

.dm.is-removed {
  --kind: var(--mute);
}

.dm.is-removed b.title {
  color: var(--mute);
  text-decoration: line-through;
}

.dm.is-removed .rows dd, .dm.is-removed .chip {
  color: var(--mute);
}

.answer .cut-body, .answer .cut-body > div {
  display: contents;
}

.answer.is-cut .cut-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s, opacity .28s;
}

.answer.is-cut .cut-body > div {
  display: block;
  overflow: hidden;
  min-height: 0;
}

.answer.is-cut.is-open .cut-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.answer.is-folding:not(.is-open) .cut-body {
  animation: .28s both cut-fold;
}

@keyframes cut-fold {
  from {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  to {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.cut-head {
  display: flex;
  color: var(--mute);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 8px;
  max-width: 100%;
  min-height: 1.9em;
  margin: 0 0 4px;
  padding: 0;
  font-size: 13px;
}

.cut-head:hover {
  color: var(--ink);
}

.cut-head .fold-i {
  margin-left: 0;
}

.answer .resumed {
  color: var(--mute);
  margin: 0 0 4px;
  font-size: 13px;
}

.reuse.is-cut-row {
  border-left-color: var(--fail);
  background: color-mix(in srgb, var(--fail) 6%, transparent);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.reuse.is-cut-row .why {
  color: color-mix(in srgb, var(--fail), var(--ink) 30%);
}

.reuse.is-cut-row .progress {
  display: grid;
  flex-basis: 100%;
  gap: 2px;
}

.reuse.is-cut-row .progress p, .reuse.is-cut-row .progress ul {
  margin: 0;
}

.reuse.is-cut-row .progress .head {
  color: var(--ink);
}

.reuse.is-cut-row .progress ul {
  padding-left: 1.2em;
}

.reuse.is-cut-row .progress :-webkit-any(ul, .hint) {
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
}

.reuse.is-cut-row .progress :-moz-any(ul, .hint) {
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
}

.reuse.is-cut-row .progress :is(ul, .hint) {
  color: color-mix(in srgb, var(--mute), var(--ink) 20%);
}

.history .state.is-running {
  color: var(--accent);
}

.history .state.is-cut {
  color: var(--fail);
}

@media (prefers-reduced-motion: reduce) {
  .answer.is-cut .cut-body {
    transition: none;
  }

  .answer.is-folding:not(.is-open) .cut-body {
    animation: none;
  }
}

.sources {
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  height: 20px;
  line-height: 20px;
}

.source.is-off {
  order: -1;
}

.new-dot {
  display: inline-block;
  background: var(--accent);
  vertical-align: middle;
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.actions .updates {
  position: relative;
}

.actions .updates .new-dot {
  position: absolute;
  top: 1px;
  right: -8px;
}

.today.updates .head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}

.today.updates .head b {
  font-weight: 600;
}

.today.updates .kind {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--mute);
  padding: 0 5px;
  font-size: 12px;
}

.today.updates .card {
  color: var(--mute);
  font-size: 12px;
}

.today.updates .head .new-dot {
  align-self:  center;
  margin-left: auto;
}

.today.updates .body {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.updates-line {
  display: none;
}

@media (max-width: 480px) {
  .actions .updates {
    display: none;
  }

  .updates-line {
    display: flex;
    color: var(--mute);
    text-align: left;
    align-items:  center;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 12px;
    font-size: 13px;
  }

  .updates-line:hover {
    color: var(--ink);
  }

  .updates-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.git-connect {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  height: 18px;
  margin-left: 2px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 16px;
}

.git-connect:hover {
  background: var(--hover);
}

.git-pop {
  position: fixed;
  z-index: 40;
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  animation: .2s ease-out both fade;
  flex-direction: column;
  gap: 8px;
  width: min(380px, 100vw - 32px);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  top: 56px;
  right: 16px;
}

.git-pop b {
  font-size: 14px;
  font-weight: 600;
}

.git-pop p, .git-pop ol {
  margin: 0;
}

.git-pop ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
}

.git-pop .now {
  color: var(--mute);
}

.git-pop code {
  font-family: var(--mono);
  overflow-wrap: anywhere;
  font-size: 12px;
}

.git-pop a {
  color: inherit;
}

.git-pop .row {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-top: 4px;
}

.git-pop input {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
}

.git-pop .send {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  font: inherit;
  cursor: pointer;
  border: 0;
  padding: 4px 16px;
}

.git-pop .send:disabled {
  opacity: .5;
  cursor: default;
}

.git-pop .mini {
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  margin: 0 4px;
  padding: 0 6px;
  font-size: 12px;
}

.git-pop .mini:hover {
  color: var(--ink);
}

.git-pop .err {
  color: var(--fail);
  font-size: 12px;
}

.original[data-over], .app.panel-front .original[data-over] {
  z-index: 19;
}

.float-win {
  position: fixed;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  outline: none;
}

.float-win > .original.float {
  position: absolute;
  z-index: auto;
  animation: none;
  width: auto;
  height: auto;
  inset: 0;
}

.float-win:focus-visible > .original.float {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.float-win .original.float > .top {
  cursor: grab;
  touch-action: none;
  user-select: none;
  margin: -14px -16px -4px;
  padding: 10px 12px 4px 16px;
}

.float-win.is-moving, .float-win.is-moving .original.float > .top {
  cursor: grabbing;
}

.float-win.is-moving, .float-win.is-sizing {
  user-select: none;
}

.float-win.is-leaving {
  pointer-events: none;
}

.float-win.is-wait {
  visibility: hidden;
  pointer-events: none;
}

.float-win .fw-edge {
  position: absolute;
  z-index: 1;
  touch-action: none;
}

.float-win .fw-edge.n, .float-win .fw-edge.s {
  cursor: ns-resize;
  height: 8px;
  left: 10px;
  right: 10px;
}

.float-win .fw-edge.n {
  top: -4px;
}

.float-win .fw-edge.s {
  bottom: -4px;
}

.float-win .fw-edge.e, .float-win .fw-edge.w {
  cursor: ew-resize;
  width: 8px;
  top: 10px;
  bottom: 10px;
}

.float-win .fw-edge.e {
  right: -4px;
}

.float-win .fw-edge.w {
  left: -4px;
}

.float-win .fw-edge.ne, .float-win .fw-edge.se, .float-win .fw-edge.sw, .float-win .fw-edge.nw {
  width: 14px;
  height: 14px;
}

.float-win .fw-edge.ne {
  cursor: nesw-resize;
  top: -4px;
  right: -4px;
}

.float-win .fw-edge.se {
  cursor: nwse-resize;
  bottom: -4px;
  right: -4px;
}

.float-win .fw-edge.sw {
  cursor: nesw-resize;
  bottom: -4px;
  left: -4px;
}

.float-win .fw-edge.nw {
  cursor: nwse-resize;
  top: -4px;
  left: -4px;
}

.tether.float-lines {
  z-index: 30;
}

.tether-arrow.float-arrow {
  z-index: 31;
}

.ask button.card-ref, .thread button.card-ref {
  color: var(--accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.ask button.card-ref:hover, .thread button.card-ref:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .float-win {
    height: min(78dvh, 640px, var(--fn, 640px));
    width: auto;
    inset: auto 0 0;
  }

  .float-win:not(.is-front):not(.is-leaving) {
    visibility: hidden;
  }

  .float-win > .original.float {
    border-radius: var(--radius-box) var(--radius-box) 0 0;
  }

  .float-win .original.float > .top {
    cursor: auto;
  }
}

.capture-dock {
  position: fixed;
  z-index: 9;
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  white-space: nowrap;
  animation: .22s cubic-bezier(.2,.8,.2,1) capture-in;
  align-items:  center;
  gap: 4px;
  max-width: min(680px, 100vw - 24px);
  padding: 4px 4px 4px 12px;
  font-size: 13px;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes capture-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

.capture-dock .what {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.capture-dock .what.is-err {
  color: var(--fail);
  white-space: normal;
}

.capture-dock.is-failed {
  white-space: normal;
}

.capture-dock .count {
  font-variant-numeric: tabular-nums;
  margin-right: 1px;
}

.capture-dock .clock {
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  font-weight: 600;
}

.capture-dock .meta, .capture-dock .note {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.capture-dock .note {
  padding: 0 4px;
}

.capture-dock .meta .size {
  display: inline-block;
  text-align: right;
  min-width: 3.8em;
}

.capture-dock .dot {
  background: var(--fail);
  animation: 1.6s ease-in-out infinite breathe;
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.capture-dock .dot.is-paused {
  background: var(--mute);
  animation: none;
}

.capture-dock button:not(.icon-btn), .capture-dock .link {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 9px;
  transition: color .15s, background .15s;
}

.capture-dock button:not(.icon-btn):hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.capture-dock button:disabled {
  opacity: .5;
  cursor: default;
}

.capture-dock button.is-first {
  color: var(--on-btn);
  background: var(--btn);
  font-weight: 600;
}

.capture-dock button.is-first:hover:not(:disabled) {
  color: var(--on-btn);
  background: var(--btn);
  opacity: .9;
}

.capture-dock button.is-warn {
  color: var(--fail);
  font-weight: 600;
}

.capture-dock button.mic.is-on {
  color: var(--ink);
}

.capture-dock .link {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  max-width: 260px;
}

.capture-dock .bar {
  position: relative;
  overflow: hidden;
  background: var(--hair);
  border-radius: 2px;
  width: 120px;
  height: 4px;
}

.capture-dock .bar i {
  position: absolute;
  background: var(--accent);
  transition: width .3s;
  inset: 0 auto 0 0;
}

@media (max-width: 560px) {
  .capture-dock {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    top: auto;
    bottom: 84px;
  }

  .capture-dock .meta {
    display: none;
  }
}

.capture-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  margin: 10px 0 4px;
  padding: 12px 14px;
}

.capture-card .head {
  display: grid;
  gap: 2px;
}

.capture-card .head b {
  font-weight: 600;
}

.capture-card .head .sub {
  color: var(--mute);
  font-size: 13px;
}

.capture-card .row {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  margin-top: 10px;
}

.capture-card .opt {
  display: inline-flex;
  color: var(--mute);
  cursor: pointer;
  align-items:  center;
  gap: 6px;
  font-size: 13px;
}

.capture-card .opt input {
  accent-color: var(--accent);
}

.capture-card .seg {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  padding: 2px;
}

.capture-card .seg button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 10px;
  font-size: 13px;
}

.capture-card .seg button.is-on {
  color: var(--ink);
  background: var(--hover);
}

.capture-card .start {
  border-radius: var(--radius-btn);
  color: var(--on-btn);
  background: var(--btn);
  padding: 5px 14px;
  font-weight: 600;
}

.capture-card .start:disabled {
  opacity: .55;
  cursor: default;
}

.capture-card .results {
  display: grid;
  border-top: 1px solid var(--hair);
  list-style: none;
  gap: 4px;
  margin: 10px 0 0;
  padding: 10px 0 0;
}

.capture-card .results button {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  border-radius: var(--radius-sm);
  text-align: left;
  align-items:  center;
  gap: 10px;
  width: 100%;
  padding: 4px;
}

.capture-card .results button:hover {
  background: var(--hover);
}

.capture-card .results img {
  object-fit: cover;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--field);
  width: 56px;
  height: 34px;
}

.capture-card .results .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.capture-card .results .meta {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.capture-view .media {
  display: block;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--field);
  object-fit: contain;
  width: 100%;
  max-height: 70vh;
}

.capture-view .shot {
  position: relative;
  user-select: none;
}

.capture-view .shot.is-cropping {
  cursor: crosshair;
  touch-action: none;
}

.capture-view .shot.is-cropping .media {
  opacity: .55;
}

.capture-view .crop {
  position: absolute;
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events: none;
}

.capture-view .meta {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
  font-size: 12px;
}

.capture-view .meta .cut {
  color: var(--fail);
}

.capture-view .acts {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 2px;
  margin: 8px 0 0;
}

.capture-view .acts .set {
  display: inline-flex;
  align-items:  center;
  gap: 2px;
}

.capture-view .acts button, .capture-view .acts .btn {
  border-radius: var(--radius-btn);
  color: var(--mute);
  text-decoration: none;
  padding: 4px 8px;
  transition: color .15s, background .15s;
  font-size: 13px;
}

.capture-view .acts button:hover:not(:disabled), .capture-view .acts .btn:hover {
  color: var(--ink);
  background: var(--hover);
}

.capture-view .acts button:disabled {
  opacity: .5;
  cursor: default;
}

.capture-view .acts .is-first {
  color: var(--accent);
  font-weight: 600;
}

.capture-view .acts .btn.open {
  display: inline-flex;
  align-items:  center;
  gap: 3px;
}

.capture-view .edition {
  margin: 4px 0 0;
}

.capture-view .acts .hint {
  color: var(--mute);
  margin-right: auto;
  font-size: 12px;
}

.capture-view .note {
  color: var(--mute);
  animation: .2s capture-note;
  margin: 6px 0 0;
  font-size: 12px;
}

@keyframes capture-note {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
}

.capture-view .shot-text {
  color: var(--mute);
  margin-top: 12px;
  font-size: 13px;
}

.capture-view .shot-text summary {
  cursor: pointer;
}

.capture-view .shot-text p {
  white-space: pre-wrap;
  margin: 6px 0 0;
}

.capture-card .opts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-pick {
  position: fixed;
  z-index: 60;
  display: flex;
  background: var(--scrim);
  backdrop-filter: brightness(.45);
  outline: none;
  animation: .16s ease-out area-in;
  flex-direction: column;
  inset: 0;
}

@keyframes area-in {
  from {
    opacity: 0;
  }
}

.area-bar {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  white-space: nowrap;
  align-self:  center;
  align-items:  center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  margin: 12px 12px 10px;
  padding: 4px 4px 4px 12px;
  font-size: 13px;
}

.area-bar .what {
  display: inline-flex;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.area-bar .dims {
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  font-weight: 600;
}

.area-bar .hint, .area-bar .keys {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mute);
  font-size: 12px;
}

.area-bar .keys {
  border-left: 1px solid var(--hair);
  margin: 0 6px 0 auto;
  padding-left: 10px;
}

@media (max-width: 720px) {
  .area-bar .hint, .area-bar .keys {
    display: none;
  }

  .area-bar .what {
    margin-right: 6px;
  }
}

.area-bar button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 10px;
  transition: color .15s, background .15s, opacity .15s;
}

.area-bar button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.area-bar button.is-first {
  color: var(--on-btn);
  background: var(--btn);
  font-weight: 600;
}

.area-bar button.is-first:hover:not(:disabled) {
  color: var(--on-btn);
  background: var(--btn);
  opacity: .9;
}

.area-bar button:disabled {
  opacity: .45;
  cursor: default;
}

.area-stage {
  position: relative;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  flex: 1;
  margin: 0 16px 16px;
}

.area-stage.is-move, .area-stage.is-move .box {
  cursor: move;
}

.area-stage canvas.dim, .area-stage canvas.lit {
  position: absolute;
  display: block;
  pointer-events: none;
}

.area-stage canvas.dim {
  outline: 1px solid var(--hair);
  filter: brightness(.45);
}

.area-stage .box {
  position: absolute;
  outline: 1px solid var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-btn) 55%, transparent);
  cursor: move;
}

.area-stage .box i {
  position: absolute;
  border: 1px solid var(--accent);
  background: var(--pop);
  border-radius: 2px;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
}

.area-stage .box .h-nw {
  cursor: nwse-resize;
  top: 0;
  left: 0;
}

.area-stage .box .h-n {
  cursor: ns-resize;
  top: 0;
  left: 50%;
}

.area-stage .box .h-ne {
  cursor: nesw-resize;
  top: 0;
  left: 100%;
}

.area-stage .box .h-e {
  cursor: ew-resize;
  top: 50%;
  left: 100%;
}

.area-stage .box .h-se {
  cursor: nwse-resize;
  top: 100%;
  left: 100%;
}

.area-stage .box .h-s {
  cursor: ns-resize;
  top: 100%;
  left: 50%;
}

.area-stage .box .h-sw {
  cursor: nesw-resize;
  top: 100%;
  left: 0;
}

.area-stage .box .h-w {
  cursor: ew-resize;
  top: 50%;
  left: 0;
}

.area-stage .box.is-small .h-n, .area-stage .box.is-small .h-e, .area-stage .box.is-small .h-s, .area-stage .box.is-small .h-w {
  display: none;
}

.area-stage .size, .area-stage .loupe .at {
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  font: 11px / 18px var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 4px;
  padding: 1px 6px;
}

.area-stage .size {
  position: absolute;
  pointer-events: none;
  bottom: calc(100% + 6px);
  left: 0;
}

.area-stage .size.is-in {
  top: 6px;
  bottom: auto;
  left: 6px;
}

.area-stage .loupe {
  position: absolute;
  pointer-events: none;
}

.area-stage .loupe canvas {
  display: block;
  box-sizing: content-box;
  border: 1px solid var(--hair-strong);
  background: var(--field);
  box-shadow: var(--pop-shadow);
  image-rendering: pixelated;
  border-radius: 6px;
}

.area-stage .loupe .cross {
  position: absolute;
  outline: 1px solid var(--accent);
  width: 4px;
  height: 4px;
  top: 57px;
  left: 57px;
}

.area-stage .loupe .at {
  display: inline-block;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .capture-dock, .capture-view .note, .area-pick, .capture-dock .dot {
    animation: none;
  }
}

.original.report .body {
  white-space: normal;
}

.original.report .rbar {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 6px;
  font-size: 12px;
}

.original.report .rbar select, .original.report .rexport select, .original.report .rexport input {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  padding: 2px 6px;
}

.original.report .rexport input {
  width: 100%;
}

.original.report .rbar button, .original.report .rexport .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.original.report .rbar button:hover:not(:disabled), .original.report .rexport .acts button:hover:not(:disabled), .original.report .rbar button[aria-pressed="true"], .original.report .rbar button[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}

.original.report .rbar button:disabled {
  opacity: .5;
}

.original.report .scope {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 11px;
}

.original.report .scope.internal {
  color: var(--kind-deadline);
  border-color: color-mix(in srgb, var(--kind-deadline) 40%, transparent);
}

.original.report .scope.shared {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.original.report .orig {
  color: var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: none;
  margin-right: 8px;
  padding: 0;
}

.original.report .orig:hover {
  text-decoration: underline;
}

.original.report h4 {
  color: var(--mute);
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
}

.original.report .meta {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.original.report .refs {
  border-top: 1px solid var(--hair);
  margin-top: 20px;
  padding-top: 10px;
}

.original.report .refs ul, .original.report .rdiff ul, .original.report .rexport ul {
  display: grid;
  list-style: none;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.original.report .refs li {
  font-size: 12px;
}

.original.report .src {
  display: inline-block;
  color: var(--mute);
  min-width: 5.5em;
  margin-right: 6px;
  font-size: 11px;
}

.original.report .refs q {
  display: block;
  color: var(--mute);
  margin: 1px 0 0 calc(5.5em + 6px);
}

.original.report .rdiff section + section {
  margin-top: 16px;
}

.original.report .rdiff .rows .g {
  display: contents;
}

.original.report .rdiff .secs {
  gap: 10px;
}

.original.report .rdiff .sh {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.original.report .rdiff .st {
  color: var(--mute);
  flex: none;
  min-width: 2.5em;
  font-size: 11px;
}

.original.report .rdiff .added .st {
  color: var(--ok);
}

.original.report .rdiff .removed .st {
  color: var(--fail);
}

.original.report .rdiff .removed .h {
  color: var(--mute);
  text-decoration: line-through;
}

.original.report .rdiff .h {
  font-weight: 600;
}

.original.report .rdiff .ops {
  display: grid;
  list-style: none;
  gap: 1px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
}

.original.report .rdiff .ops li {
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  padding: 1px 6px 1px 0;
}

.original.report .rdiff .ops .add {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.original.report .rdiff .ops .del {
  color: var(--mute);
  background: color-mix(in srgb, var(--fail) 8%, transparent);
}

.original.report .rdiff .op {
  display: inline-block;
  text-align: center;
  color: var(--mute);
  width: 1.4em;
}

.original.report .rexport {
  border-top: 1px solid var(--hair);
  padding: 10px 0 2px;
  font-size: 12px;
}

.original.report .rexport .rows {
  align-items:  center;
  gap: 6px 12px;
}

.original.report .rexport .acts {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  margin-top: 8px;
}

.original.report .rexport .acts .go {
  background: var(--btn);
  color: var(--on-btn);
}

.original.report .rexport .acts .go:hover:not(:disabled) {
  background: var(--btn);
  color: var(--on-btn);
  filter: brightness(1.08);
}

.original.report .rexport .acts .go:disabled {
  opacity: .5;
}

.original.report .rexport .warn {
  color: var(--kind-deadline);
  margin: 8px 0 0;
}

.original.report .rexport > .warn:first-child {
  color: var(--mute);
  margin: 0;
}

.original.report .rows .q {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.original.report .rexport .err {
  margin: 8px 0 0;
}

.original.report .rexport .history {
  margin-top: 8px;
}

.answer-files .f.report .n {
  font-variant-numeric: tabular-nums;
}

.prose button.report-ref, .original button.report-ref {
  color: var(--accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
}

.prose button.report-ref:hover, .original button.report-ref:hover {
  text-decoration: underline;
}

.rid {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .92em;
}

.original.report .rbar .rid {
  color: var(--ink);
  margin-left: 2px;
}

.answer-files .rid-pair {
  display: inline-flex;
  align-items:  center;
  gap: 2px;
  min-width: 0;
  max-width: min(100%, 420px);
}

.answer-files .rid-copy, .pcard .rid-copy {
  border-radius: var(--radius-btn);
  color: var(--mute);
  flex: none;
  padding: 3px 6px;
  transition: color .15s, background .15s;
  font-size: 12px;
}

.answer-files .rid-copy:hover:not(:disabled), .pcard .rid-copy:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.pcard .pc-rid-row {
  display: flex;
  align-items:  center;
  gap: 2px;
  min-width: 0;
}

.pcard .pc-rid-row > .pc-line {
  flex: auto;
  width: auto;
  min-width: 0;
  margin-right: 0;
}

.pcard .pc-main .rid {
  margin-left: 8px;
}

.original.gantt .body {
  white-space: normal;
}

.original.gantt .ghead {
  color: var(--ink);
  margin: 2px 0 0;
  font-size: 13px;
}

.original.gantt .gtools {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 10px;
  font-size: 12px;
}

.original.gantt .gtools select {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  padding: 2px 6px;
}

.original.gantt .gtools label {
  display: inline-flex;
  align-items:  center;
  gap: 4px;
}

.original.gantt .glegend {
  margin-left: auto;
}

.original.gantt .glg {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  width: 14px;
  height: 8px;
  margin: 0 4px 0 8px;
}

.original.gantt .glg.plan {
  border: 1px solid var(--mute);
}

.original.gantt .glg.act {
  background: var(--accent);
  height: 5px;
}

.original.gantt .glg.now {
  border-left: 1px dashed var(--accent);
  border-radius: 0;
  width: 0;
  height: 11px;
}

.original.gantt .warn, .original.gantt .glint, .original.gantt .gread {
  color: var(--mute);
  margin: 0;
}

.original.gantt .glint, .original.gantt .gread {
  margin-top: 8px;
  font-size: 11px;
}

.original.gantt .gchart {
  font-size: 12px;
}

.original.gantt .gaxis, .original.gantt .ggrid {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
}

.original.gantt .gaxis {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  height: 18px;
  font-size: 10px;
}

.original.gantt .gtrack {
  position: relative;
}

.original.gantt .ggrid .gtrack {
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}

.original.gantt .gtick {
  position: absolute;
  white-space: nowrap;
  padding-left: 2px;
}

.original.gantt .gvline {
  position: absolute;
  border-left: 1px solid var(--hair);
  top: 0;
  bottom: 0;
}

.original.gantt .glabels > div {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  height: 26px;
  padding-right: 8px;
}

.original.gantt .gp {
  border-top: 1px solid var(--hair);
  font-weight: 600;
}

.original.gantt .gp .gn {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
}

.original.gantt .gt {
  padding-left: 8px;
}

.original.gantt .gid {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  flex: none;
}

.original.gantt .gid:hover {
  color: var(--accent);
  text-decoration: underline;
}

.original.gantt .gtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.original.gantt .gt.late .gid, .original.gantt .gt.blocked .gid {
  color: var(--fail);
}

.original.gantt .gt.hold .gtitle, .original.gantt .gt.cancel .gtitle {
  color: var(--mute);
}

.original.gantt .gt.cancel .gtitle {
  text-decoration: line-through;
}

.original.gantt .grow {
  position: absolute;
  height: 26px;
  left: 0;
  right: 0;
}

.original.gantt .grow.gproj {
  border-top: 1px solid var(--hair);
}

.original.gantt .gplan, .original.gantt .gact {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
}

.original.gantt .gplan {
  border: 1px solid var(--mute);
  height: 12px;
  top: 7px;
}

.original.gantt .gact {
  background: var(--accent);
  height: 6px;
  top: 10px;
}

.original.gantt .grow.done .gact {
  background: var(--ok);
}

.original.gantt .grow.blocked .gact {
  background: var(--fail);
}

.original.gantt .grow.late .gplan {
  border-color: var(--fail);
}

.original.gantt .grow.hold .gplan, .original.gantt .grow.cancel .gplan {
  opacity: .6;
  border-style: dashed;
}

.original.gantt .gnote {
  position: absolute;
  color: var(--mute);
  white-space: nowrap;
  font-size: 10px;
  line-height: 16px;
  top: 5px;
}

.original.gantt .gnote b {
  color: var(--fail);
  font-weight: 600;
}

.original.gantt .gdue {
  position: absolute;
  background: var(--ink);
  width: 8px;
  height: 8px;
  top: 9px;
  transform: translateX(-50%)rotate(45deg);
}

.original.gantt .gfar {
  position: absolute;
  color: var(--mute);
  font-size: 10px;
  top: 5px;
  right: 4px;
}

.original.gantt .gtoday {
  position: absolute;
  border-left: 1px dashed var(--accent);
  pointer-events: none;
  top: 0;
  bottom: 0;
}

.original.gantt .gdeps {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  top: 0;
  left: 0;
}

.original.gantt .gdeps path {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1;
}

.original.gantt .gchecks {
  border-top: 1px solid var(--hair);
  margin-top: 12px;
  padding-top: 8px;
}

.original.gantt .gchecks h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.original.gantt .gchecks ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.original.gantt .gchecks a {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.original.gantt .gtag {
  display: inline-block;
  border-radius: var(--radius-btn);
  color: var(--fail);
  border: 1px solid;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 11px;
}

.original.gantt .gwhy {
  color: var(--mute);
  font-size: 12px;
}

.inbox {
  position: sticky;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  background: linear-gradient(to bottom, var(--field) 72%, transparent);
  margin: -16px -24px 0;
  padding: 0 24px;
  transition: grid-template-rows .2s, margin-bottom .2s;
}

.inbox.has-items {
  grid-template-rows: 1fr;
  margin-bottom: 8px;
}

.is-empty .inbox, .is-empty .inbox.has-items {
  margin-bottom: auto;
}

.inbox-fold {
  overflow: hidden;
  min-height: 0;
  margin: 0 -12px;
  padding: 0 12px;
}

.inbox-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--inbox-cols, 4), minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0 16px;
}

.inbox-card {
  display: flex;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--mute);
  text-align: left;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 7px 10px 8px;
  font-size: 12px;
  line-height: 1.45;
}

.inbox-card:hover {
  border-color: color-mix(in srgb, var(--ink) 24%, var(--card-border));
}

.inbox-card.is-open {
  border-color: var(--accent);
}

.inbox-top {
  display: flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.inbox-n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.inbox-turn {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  min-width: 0;
  font-weight: 600;
}

.inbox-turn.t-failed {
  color: var(--fail);
}

.inbox-turn.t-review {
  color: var(--ok);
}

.inbox-at {
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-left: auto;
}

.inbox-title, .inbox-ask {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.inbox-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.inbox-card.inbox-more {
  border-color: var(--hair);
  box-shadow: none;
  background: none;
  justify-content: center;
}

.inbox-more-n {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.inbox-card.is-leaving {
  position: absolute;
  pointer-events: none;
  animation: .18s ease-in forwards inbox-out;
}

@keyframes inbox-out {
  to {
    opacity: 0;
    transform: scale(.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inbox {
    transition: none;
  }

  .inbox-card.is-leaving {
    animation: none;
    opacity: 0;
  }
}

.att {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 2px;
  max-width: 560px;
  margin: 10px 0 16px;
  padding: 10px 14px 8px;
  font-size: 13px;
  line-height: 1.5;
}

.att.is-loading {
  box-shadow: none;
  animation: none;
  background: none;
  border-style: dashed;
}

.att.is-gone {
  color: var(--mute);
}

.att .again {
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 3px 9px;
  transition: background .15s;
}

.att .again:hover {
  background: var(--hover);
}

.att .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.att .top .n {
  font-variant-numeric: tabular-nums;
}

.att ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.att-line {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr) auto auto;
  border-top: 1px solid var(--hair);
  align-items: baseline;
  column-gap: 10px;
  min-height: 34px;
  padding: 5px 0;
}

.att-line:first-child {
  border-top: 0;
}

.att-line .when {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.att-line .what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.att-line .what b {
  color: var(--ink);
  word-break: keep-all;
  font-weight: 600;
}

.att-line .time, .att-line .days {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.att-line .att-note {
  overflow-wrap: anywhere;
}

.att-line .att-note:before {
  content: "· ";
  color: var(--mute);
}

.att-line .company, .att-line .gone {
  color: var(--mute);
  font-size: 11.5px;
}

.att-line.is-conflict .company {
  color: var(--busy);
}

.att-line .num {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11px;
}

.att-line .acts {
  display: flex;
  white-space: nowrap;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
}

.att-line .acts .att-ask {
  color: var(--ink);
  margin-right: 2px;
}

.att-line .acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 9px;
  transition: color .15s, background .15s, opacity .15s;
}

.att-line .acts button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.att-line .acts button:disabled {
  opacity: .55;
}

.att-line .acts .danger, .att-line .acts .danger:hover:not(:disabled) {
  color: var(--fail);
}

.att-line .err {
  grid-column: 2 / -1;
  color: var(--fail);
  font-size: 12px;
}

.att-line.is-deleted .when, .att-line.is-deleted .what b, .att-line.is-deleted .time, .att-line.is-deleted .days, .att-line.is-deleted .att-note {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.att-missing {
  color: var(--mute);
  margin: 2px 0 0;
  font-size: 12px;
}

@media (max-width: 560px) {
  .att-line {
    grid-template-columns: 6.4em minmax(0, 1fr) auto;
  }

  .att-line .num, .att-line .acts .att-ask {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .att {
    animation: none;
  }
}

.help {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 10px 0 16px;
  padding: 14px 16px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.help p {
  margin: 0;
}

.help .h-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help .h-guide + .h-guide, .help.is-all .h-guide {
  border-top: 1px solid var(--hair);
  padding-top: 12px;
}

.help.is-all .h-guide {
  animation: .2s ease-out both fade;
}

.help .h-head {
  color: var(--ink);
  font-weight: 600;
}

.help dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
}

.help dl > div {
  display: contents;
}

.help dt {
  color: var(--mute);
  font-size: 12px;
  line-height: 26px;
}

.help dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.help .h-ex, .help .h-name {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  background: none;
  padding: 3px 10px;
  transition: border-color .2s, background-color .2s;
  font-size: 12.5px;
  line-height: 18px;
}

.help .h-ex:hover, .help .h-name:hover, .help .h-name[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--hover);
}

.help .h-ex:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.help .h-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.help .h-note {
  color: var(--mute);
  font-size: 12px;
}

.help .h-hint {
  color: var(--mute);
  font-size: 11.5px;
}

@media (max-width: 560px) {
  .help dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .help dt {
    line-height: 1.4;
  }

  .help dd {
    margin-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help, .help.is-all .h-guide {
    animation: none;
  }
}

.m-peek {
  position: fixed;
  z-index: 35;
  pointer-events: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  animation: .12s ease-out both fade;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 8px 6px 6px;
  font-size: 12.5px;
  line-height: 1.5;
}

.m-peek.is-placed {
  transition: left .12s ease-out, top .12s ease-out;
}

.m-peek .pk-head {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 8px 4px;
  font-size: 11.5px;
}

.m-peek .pk-head b {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.m-peek .pk-off {
  color: var(--cal-sun);
}

.m-peek ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
}

.m-peek .pk-card {
  display: flex;
  color: var(--ink);
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
}

.m-peek .pk-card + .pk-card {
  border-top: 1px solid var(--hair);
}

.m-peek .pk-top {
  display: flex;
  color: var(--mute);
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
}

.m-peek .pk-num {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.m-peek .pk-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}

.m-peek .is-closed .pk-title {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.m-peek .pk-who, .m-peek .pk-quote {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.m-peek .pk-quote {
  border-left: 2px solid var(--hair-strong);
  margin-top: 2px;
  padding-left: 6px;
}

.m-peek .pk-more {
  color: var(--mute);
  margin: 4px 8px 0;
  font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
  .m-peek {
    animation: none;
  }

  .m-peek.is-placed {
    transition: none;
  }
}

.icon-btn {
  display: inline-grid;
  border-radius: var(--radius-sm);
  color: var(--mute);
  flex: none;
  place-items:  center;
  block-size: 28px;
  inline-size: 28px;
  padding: 0;
  transition: color .15s, background .15s;
}

.icon-btn:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.icon-btn:disabled {
  opacity: .45;
  cursor: default;
}

.icon-btn svg {
  display: block;
}

:is(.requests .console, .is-console) .icon-btn {
  color: var(--q-mute);
}

:is(.requests .console, .is-console) .icon-btn:hover:not(:disabled) {
  color: var(--q-ink);
  background: color-mix(in srgb, var(--q-ink) 10%, transparent);
}

.original .top .icon-btn {
  margin: -1px -6px -1px 0;
}

.recent-toast .icon-btn, .capture-dock .icon-btn {
  margin: -4px -4px -4px 0;
}

.fold-i {
  display: inline-block;
  vertical-align: -.18em;
  flex: none;
  margin-left: 3px;
  transition: transform .18s;
}

.icon-btn .fold-i, .fold-i:only-child {
  margin: 0;
}

.secret-pop .sp-top {
  display: flex;
  color: var(--mute);
  justify-content: space-between;
  align-items:  center;
  margin: -6px -8px 2px 0;
  font-size: 11px;
}

.fold-i.is-open, details[open] > summary .fold-i {
  transform: rotate(180deg);
}

summary:has( > .fold-i) {
  list-style: none;
}

summary:has( > .fold-i)::-webkit-details-marker {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn, .fold-i {
    transition: none;
  }
}

.pcard {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 12px 16px 10px;
  font-size: 13px;
  line-height: 1.5;
}

.pcard.is-loading, .pcard.is-gone {
  box-shadow: none;
  animation: none;
  background: none;
  border-style: dashed;
  justify-content: center;
  min-height: 96px;
}

.pcard .pc-wait {
  color: var(--mute);
  margin: 0;
  font-size: 12px;
}

.pcard.in-panel {
  box-shadow: none;
  animation: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 6px;
}

.pcard.in-panel.is-loading {
  min-height: 0;
}

.pcard .pc-top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.pcard .pc-top-r {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.pcard .pc-key, .pcard .pc-mono {
  font-family: var(--mono);
}

.pcard .pc-asof {
  font-variant-numeric: tabular-nums;
}

.pcard .pc-pill {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: none;
  padding: 1px 9px;
  transition: background .15s, color .15s;
  font-size: 11px;
}

.pcard .pc-pill:hover {
  background: var(--hover);
  color: var(--ink);
}

.pcard .pc-pill.is-ink {
  color: var(--ink);
}

.pcard .pc-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.pcard .pc-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.pcard .pc-state {
  background: var(--hover);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}

.pcard .pc-due {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 12px;
}

.pcard .pc-sub {
  color: var(--mute);
  font-size: 12px;
}

.pcard .pc-head {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.pcard .pc-sum {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
}

.pcard .pc-sum p {
  color: var(--mute);
  flex: auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
}

.pcard .pc-cols {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 6px;
  padding-top: 10px;
}

.pcard .pc-col {
  display: flex;
  flex-direction: column;
  flex: 300px;
  gap: 14px;
  min-width: 0;
}

.pcard .pc-sec {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pcard .pc-sh {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 11px;
}

.pcard .pc-line {
  display: flex;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: baseline;
  gap: 10px;
  width: calc(100% + 12px);
  min-height: 24px;
  margin: 0 -6px;
  padding: 1px 6px;
}

.pcard button.pc-line, .pcard .pc-line.is-card {
  cursor: pointer;
  transition: background .15s;
}

.pcard button.pc-line:hover, .pcard .pc-line.is-card:hover {
  background: var(--hover);
}

.pcard button.pc-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pcard .pc-line button.card-ref:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pcard .pc-line.is-closed .pc-main {
  color: var(--mute);
}

.pcard .pc-lead {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12px;
}

.pcard .pc-line button.card-ref {
  color: var(--accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
}

.pcard .pc-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
}

.pcard .pc-meta {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
  font-size: 12px;
}

.pcard .pc-tag {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
}

.pcard .pc-more, .pcard .pc-link {
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-self:  flex-start;
  padding: 0;
  font-size: 11px;
}

.pcard .pc-more:hover, .pcard .pc-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.pcard .pc-more.is-plain {
  cursor: default;
  text-decoration: none;
}

.pcard .pc-link.is-accent {
  color: var(--accent);
}

.pcard .pc-stages {
  display: flex;
  gap: 4px;
  padding-top: 2px;
}

.pcard .pc-stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 3px;
  min-width: 0;
}

.pcard .pc-stage i {
  background: var(--hair-strong);
  border-radius: 2px;
  height: 4px;
}

.pcard .pc-stage.is-done i {
  background: var(--mute);
}

.pcard .pc-stage.is-now i {
  background: var(--accent);
}

.pcard .pc-st {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  font-size: 12px;
}

.pcard .pc-stage.is-now .pc-st {
  color: var(--ink);
  font-weight: 600;
}

.pcard .pc-sd {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.pcard .pc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px;
}

.pcard .pc-chip {
  display: inline-flex;
  background: var(--hover);
  border-radius: 999px;
  align-items: baseline;
  gap: 4px;
  padding: 1px 9px;
  font-size: 12px;
}

.pcard .pc-chip small {
  color: var(--mute);
  font-size: 11px;
}

.pcard .pc-empty {
  border-top: 1px solid var(--hair);
  color: var(--mute);
  margin: 6px 0 0;
  padding-top: 10px;
  font-size: 12px;
}

.pcard .pc-foot {
  display: flex;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding-top: 8px;
  font-size: 11px;
}

.pcard .pc-fold {
  margin-left: auto;
}

.pboard .pb-rows {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 6px;
}

.pboard .pb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name due" "kind kind" "line line";
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  column-gap: 12px;
  width: calc(100% + 12px);
  margin: 0 -6px;
  padding: 5px 6px;
  transition: background .15s;
}

.pboard .pb-row:hover {
  background: var(--hover);
}

.pboard .pb-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pboard .pb-name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.pboard .pb-row.is-paused .pb-name {
  color: var(--mute);
}

.pboard .pb-due {
  grid-area: due;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.pboard .pb-kind {
  grid-area: kind;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  font-size: 12px;
}

.pboard .pb-line {
  grid-area: line;
}

.pcard .pc-warn {
  color: var(--fail);
}

.pcard [data-fresh] {
  animation: 1.6s ease-out pc-fresh;
}

@keyframes pc-fresh {
  from {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }

  to {
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard [data-fresh] {
    animation: none;
  }
}

.original.rpanel .body {
  white-space: normal;
}

.rcard .pc-top > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rcard .pc-top-r {
  white-space: nowrap;
  flex: none;
}

.pcard .rc-attn, .rlist .rc-attn {
  color: var(--accent);
}

.pcard button.rc-attn {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.pcard button.rc-attn:hover {
  text-decoration: underline;
}

.pcard button.rc-attn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.pcard .rc-sum {
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.pcard .rc-sum.is-fold {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.pcard .rc-sum-more {
  margin-top: -2px;
}

.pcard .rc-sum.is-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--mute);
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.55;
}

.pcard .pc-line.rc-two {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.pcard a.pc-line {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}

.pcard a.pc-line:hover {
  background: var(--hover);
}

.pcard a.pc-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pcard .pc-line.rc-two.no-lead {
  grid-template-columns: minmax(0, 1fr);
}

.pcard .rc-l2 {
  grid-column: 2 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  min-width: 0;
  font-size: 12px;
}

.pcard .rc-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 10px;
  padding: 4px 0;
}

.pcard .rc-item + .rc-item, .pcard .rc-rev + .rc-rev, .pcard .rc-sugg + .rc-sugg {
  border-top: 1px solid var(--hair);
}

.pcard .rc-it {
  overflow-wrap: anywhere;
}

.pcard .rc-im {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.pcard .rc-id {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--mute);
  -webkit-box-orient: vertical;
  font-size: 12px;
}

.pcard .rc-item.is-closed .rc-it {
  color: var(--mute);
}

.pcard .rc-rev {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  gap: 2px;
  padding: 4px 0;
}

.pcard .rc-rh {
  display: flex;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  align-items:  center;
  gap: 6px;
  font-size: 12px;
}

.pcard .rc-rh b {
  color: var(--ink);
  font-weight: 600;
}

.pcard .rc-rc, .pcard .rc-diff {
  list-style: none;
  align-self: stretch;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.pcard .rc-rc li {
  overflow-wrap: anywhere;
}

.pcard .rc-diff {
  background: var(--hover);
  overflow-wrap: anywhere;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.55;
}

.pcard .rc-diff .is-add:before {
  content: "+ ";
  color: var(--accent);
}

.pcard .rc-diff .is-del {
  color: var(--mute);
  text-decoration: line-through;
}

.pcard .rc-diff .is-del:before {
  content: "− ";
}

.pcard .rc-diff .is-more {
  color: var(--mute);
}

.pcard .rc-sugg {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  padding: 4px 0;
}

.pcard .rc-two.no-lead .rc-l2 {
  grid-column: 1 / -1;
}

.pcard .rc-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
}

.pcard .rc-rows > .rc-two, .pcard .rc-rows > .rc-sugg {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.pcard .rc-mm {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.pcard .rc-mm > .rc-sg-t {
  flex: 0 auto;
}

.pcard .rc-mm > .rc-sg-acts {
  flex: none;
  margin-left: auto;
}

.pcard .rc-sg-t {
  overflow: hidden;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  min-width: 0;
  padding: 0;
}

.pcard button.rc-sg-t, .pcard a.rc-sg-t {
  cursor: pointer;
}

.pcard button.rc-sg-t:hover, .pcard a.rc-sg-t:hover {
  text-decoration: underline;
}

.pcard .rc-sg-acts {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  min-width: 118px;
}

.pcard .rc-sg-state {
  color: var(--mute);
  font-size: 12px;
}

.pcard .rc-sugg.is-yes .rc-sg-state {
  color: var(--ink);
}

.pcard .rc-sugg.is-no .rc-sg-t {
  color: var(--mute);
}

.pcard .rc-sg-err {
  grid-column: 2 / -1;
  color: var(--fail);
  font-size: 12px;
}

.pcard .rc-lastrev {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 2px 0 0;
  font-size: 12px;
}

.pcard .rc-lastrev span {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.rlist .rl-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rlist .rl-glance {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.rlist .rl-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rlist .rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rlist .rl-chips button {
  display: inline-flex;
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  align-items: baseline;
  gap: 5px;
  padding: 2px 10px;
  transition: background .15s, color .15s;
  font-size: 12px;
}

.rlist .rl-chips button small {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.rlist .rl-chips button:hover {
  background: var(--hover);
  color: var(--ink);
}

.rlist .rl-chips button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.rlist .rl-chips button.is-zero:not([aria-pressed="true"]) small {
  color: var(--hair-strong);
}

.rlist .rl-find {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.rlist .rl-find input {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  flex: auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
}

.rlist .rl-find input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.rlist .pc-pill {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: none;
  padding: 1px 9px;
  font-size: 11px;
}

.rlist .pc-pill:hover {
  background: var(--hover);
}

.rlist .rl-rows {
  display: flex;
  flex-direction: column;
}

.rlist .rl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  align-items: baseline;
  gap: 3px 10px;
  margin: 0 -8px;
  padding: 8px;
  transition: background .15s;
}

.rlist .rl-row:first-child {
  border-top: 0;
}

.rlist .rl-row:hover, .rlist .rl-row.is-picked {
  background: var(--hover);
}

.rlist .rl-open {
  display: flex;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.rlist .rl-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.rlist .rl-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rlist .rl-state {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  white-space: nowrap;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}

.rlist .rl-at {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.rlist .rl-meta {
  grid-column: 1 / -1;
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12px;
}

.rlist .rl-tag {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
}

.rlist .rl-tag:hover, .rlist .rl-tag[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}

.rlist .rl-empty {
  color: var(--mute);
  margin: 8px 0;
}

.rlist .rl-empty.is-error {
  color: var(--fail);
}

.rlist .rl-more {
  color: var(--mute);
  margin: 8px 0 0;
  font-size: 12px;
}

.rlist [data-fresh] {
  animation: 1.6s ease-out pc-fresh;
}

@media (prefers-reduced-motion: reduce) {
  .rlist [data-fresh] {
    animation: none;
  }
}

.rlist .rl-tidy {
  display: flex;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

.rlist .rt-head {
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}

.rlist .rt-rows {
  display: flex;
  flex-direction: column;
}

.rlist .rt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  border-top: 1px solid var(--hair);
  align-items: baseline;
  gap: 1px 10px;
  padding: 7px 0;
}

.rlist .rt-row:first-child {
  border-top: 0;
}

.rlist .rt-title {
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
}

.rlist .rt-title:hover {
  text-decoration: underline;
}

.rlist .rt-row.is-made .rt-title {
  color: var(--mute);
  font-weight: 500;
}

.rlist .rt-idle {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.rlist .rt-why {
  grid-column: 1 / -1;
  color: var(--mute);
  font-size: 12px;
}

.rlist .rt-why b {
  color: var(--ink);
  font-weight: 600;
}

.rlist .rt-acts, .rlist .rt-foot {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  min-height: 26px;
  margin: 2px -8px 0;
  font-size: 12px;
}

.rlist .rt-acts {
  grid-column: 1 / -1;
}

.rlist .rt-acts .bin-ask {
  flex: auto;
  align-self:  center;
  padding-left: 8px;
}

.rlist .rt-foot {
  justify-content: flex-end;
  margin: 0 -8px 0 0;
}

.rlist .rt-foot.confirm > span {
  flex: 16em;
  padding: 3px 0;
}

.rlist :-webkit-any(.rt-acts, .rt-foot) .as {
  padding: 3px 8px;
}

.rlist :-moz-any(.rt-acts, .rt-foot) .as {
  padding: 3px 8px;
}

.rlist :is(.rt-acts, .rt-foot) .as {
  padding: 3px 8px;
}

.rlist :-webkit-any(.rt-acts, .rt-foot) > button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.rlist :-moz-any(.rt-acts, .rt-foot) > button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.rlist :is(.rt-acts, .rt-foot) > button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  transition: color .15s, background .15s;
}

.rlist :-webkit-any(.rt-acts, .rt-foot) > button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.rlist :-moz-any(.rt-acts, .rt-foot) > button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.rlist :is(.rt-acts, .rt-foot) > button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.rlist :-webkit-any(.rt-acts, .rt-foot) > button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.rlist :-moz-any(.rt-acts, .rt-foot) > button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.rlist :is(.rt-acts, .rt-foot) > button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.rlist .rt-err {
  grid-column: 1 / -1;
  color: var(--fail);
  font-size: 12px;
}

.rlist .rt-more {
  color: var(--mute);
  align-self:  flex-start;
  font-size: 12px;
}

.rlist .rt-more:hover {
  color: var(--ink);
  text-decoration: underline;
}

.rlist .rl-chips .rl-bin {
  margin-left: auto;
}

.rlist .rl-rows.is-bin .rl-row {
  cursor: default;
}

.rlist .rl-rows.is-bin .rl-row.is-back .rl-title {
  color: var(--mute);
}

.rcard .rc-bin {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 12px;
}

.recent-foot .links .cnt {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: 5px;
  font-size: 11px;
}

.icard {
  position: relative;
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  animation: .3s ease-out both fade;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin: 10px 0 16px;
  padding: 12px 15px;
  font-size: 13px;
  line-height: 1.55;
}

.icard .run {
  position: absolute;
  overflow: hidden;
  border-radius: inherit;
  color: var(--ink);
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  padding: 1.5px;
  transition: opacity .3s;
  inset: -1px;
}

.icard .run:before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background: conic-gradient(var(--cosmos-1), var(--cosmos-2), var(--cosmos-3), var(--cosmos-4), var(--cosmos-1));
  width: calc(100% + 120px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icard .run.is-on {
  opacity: 1;
}

.icard .run.is-on:before {
  animation: 6s steps(24, end) infinite live-band;
}

.icard .top {
  display: flex;
  color: var(--mute);
  letter-spacing: .02em;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.icard .head {
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.icard .k {
  color: var(--mute);
  letter-spacing: .02em;
  margin: 0;
  font-size: 11px;
}

.icard .m {
  color: var(--mute);
  font-size: 12px;
}

.icard ul, .icard ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icard .irows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.icard .irows.is-loading {
  min-height: 96px;
}

.icard .irow {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-direction: column;
  gap: 5px;
  padding-top: 9px;
}

.icard .ihead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.icard .ihead .name {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
}

.icard .ihead .m {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.icard .path {
  overflow: hidden;
  color: var(--mute);
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
}

.icard .path.is-web {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.icard .path.is-web .site {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.icard .path.is-web a {
  color: var(--accent);
  font-family: var(--font);
  text-decoration: none;
  flex: none;
}

.icard .path.is-web a:hover {
  text-decoration: underline;
}

.icard .path.is-web a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.icard .isteps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 3px;
}

.icard .isteps li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--mute);
  text-align: center;
  white-space: nowrap;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 18px;
}

.icard .isteps li .t {
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.icard .isteps li .fill {
  position: absolute;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transition: width .4s ease-out;
  inset: 0 auto 0 0;
}

.icard .isteps li.s-done {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--hair));
  background: color-mix(in srgb, var(--ok) 12%, var(--field));
  color: var(--ink);
}

.icard .isteps li.s-now {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
  color: var(--ink);
  font-weight: 600;
}

.icard .isteps li.s-fail {
  border-color: color-mix(in srgb, var(--fail) 50%, var(--hair));
  color: var(--fail);
}

.icard .isteps li.s-skip {
  background: none;
  border-style: dashed;
}

.icard .idoc, .icard .iproj {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}

.icard .idoc .title, .icard .icands .title {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.icard .idoc .is-latest {
  color: var(--ok);
}

.icard .idoc .is-old {
  color: var(--fail);
}

.icard .idoc.is-none {
  color: var(--mute);
  font-size: 12px;
}

.icard .iproj button, .icard .iacts button, .icard .icands button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 12px;
  transition: background-color .15s;
  font-size: 12px;
  line-height: 24px;
}

.icard .iproj button {
  border-color: var(--hair);
  padding: 0 10px;
}

.icard .iproj button:hover, .icard .iacts button:hover, .icard .icands button:hover {
  background: var(--hover);
}

.icard button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icard button:disabled {
  cursor: default;
  opacity: .55;
}

.icard .icands button.go {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--on-btn);
  font-weight: 600;
}

.icard .icands {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--field);
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
}

.icard .icands li {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 8px;
  min-height: 28px;
}

.icard .icands .confirm {
  display: inline-flex;
  color: var(--ink);
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 8px;
  font-size: 12px;
}

.icard .iacts {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px 8px;
  margin-top: 2px;
}

.icard .iacts .err {
  color: var(--fail);
  font-size: 12px;
}

.icard .iskip {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-direction: column;
  gap: 3px;
  padding-top: 9px;
}

.icard .iskip li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.icard .iskip .name {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
}

.icard .iskip .why {
  color: var(--fail);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .icard, .icard .run.is-on:before {
    animation: none;
  }

  .icard .isteps li .fill {
    transition: none;
  }
}

.inline-reply {
  display: grid;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: .3s ease-out both fade;
  gap: 8px;
  margin: 2px 0 16px;
  padding: 8px 0 2px 12px;
  transition: border-color .2s;
}

.inline-reply:focus-within {
  border-left-color: var(--accent);
}

.inline-reply p {
  margin: 0;
}

.inline-reply-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-reply-opts button {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  gap: 2px;
  max-width: 100%;
  padding: 7px 12px;
  transition: border-color .2s, background-color .2s;
  font-size: 14px;
}

.inline-reply-opts button > span {
  display: inline-flex;
  overflow-wrap: anywhere;
  align-items: baseline;
  gap: 6px;
}

.inline-reply-opts button small {
  color: var(--mute);
  font-size: 12px;
}

.inline-reply-opts button em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.inline-reply-opts button.is-rec {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.inline-reply-opts button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.inline-reply-opts button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.inline-reply-send:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.inline-reply-opts button:disabled {
  cursor: default;
  opacity: .55;
}

.inline-reply-why {
  color: var(--mute);
  font-size: 12px;
}

.inline-reply-why span {
  color: var(--accent);
  margin-right: 4px;
  font-weight: 600;
}

.inline-reply-line {
  display: flex;
  align-items:  flex-end;
  gap: 8px;
}

.inline-reply-line textarea {
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  resize: none;
  field-sizing: content;
  background: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  max-height: 9.5em;
  padding: 4px 0;
  transition: border-color .2s;
  font-size: 14px;
  line-height: 1.5;
}

.inline-reply-line textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.inline-reply-line textarea::placeholder {
  color: var(--mute);
}

.inline-reply-send {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  flex: none;
  padding: 5px 12px;
  transition: border-color .2s, color .2s, opacity .2s;
  font-size: 13px;
}

.inline-reply-send:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.inline-reply-send:disabled {
  cursor: default;
  opacity: .45;
}

.inline-reply.is-done, .inline-reply.is-past {
  border-left-color: var(--line);
  animation: none;
  padding-top: 2px;
}

.inline-reply-said {
  display: flex;
  color: var(--mute);
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.inline-reply-said span:last-child {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.inline-reply-tag {
  color: var(--accent);
  flex: none;
  font-size: 11px;
  font-weight: 600;
}

.ask-reply {
  display: block;
  letter-spacing: 0;
  color: var(--mute);
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .inline-reply {
    animation: none;
  }
}

.composer .box-line {
  position: relative;
}

.am-chip {
  display: inline-flex;
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--hair);
  white-space: nowrap;
  background: none;
  border-radius: 16px;
  flex: none;
  align-items:  center;
  gap: 6px;
  height: 32px;
  margin-bottom: 4px;
  padding: 0 12px;
  transition: color .15s, box-shadow .15s;
  font-size: 13px;
}

.am-chip:hover, .am.is-open .am-chip {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}

.am-chip .am-model {
  color: var(--ink);
  font-weight: 600;
}

.am-chip.is-picked {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.am-chip.is-picked .am-model {
  color: var(--accent);
}

.am-once {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
}

.am-pop {
  position: fixed;
  z-index: 40;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--pop);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hair-strong), var(--pop-shadow);
  text-align: left;
  animation: .14s ease-out fade;
  flex-direction: column;
  padding: 14px 14px 12px;
  font-size: 14px;
}

.am-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-height: 0;
}

.am-model-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  max-height: min(28dvh, 280px);
}

.am-footer {
  border-top: 1px solid var(--hair);
  flex: none;
  margin-top: 10px;
  padding-top: 10px;
}

.am-footer .am-actions {
  margin-top: 0;
}

.am-head {
  flex: none;
  margin: 0 0 10px 4px;
  font-size: 13px;
  font-weight: 600;
}

.am-group {
  border: 0;
  min-width: 0;
  margin: 0 0 8px;
  padding: 0;
}

.am-group legend {
  color: var(--mute);
  padding: 0 0 4px 4px;
  font-size: 12px;
}

.am-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items:  center;
  gap: 10px;
  padding: 6px 8px;
}

.am-opt:hover {
  background: var(--hover);
}

.am-opt.is-on {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.am-opt.is-off {
  opacity: .55;
}

.am-opt input {
  accent-color: var(--accent);
  margin: 0;
}

.am-name {
  min-width: 0;
}

.am-rec {
  color: var(--accent);
  margin-left: 6px;
  font-size: 11px;
  font-style: normal;
}

.am-base {
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--hair);
  border-radius: 999px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
}

.am-ev {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.am-note {
  color: var(--mute);
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 1.55;
}

.am-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.am-btn {
  border-radius: var(--radius-btn);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  background: none;
  padding: 7px 14px;
  font-size: 13px;
}

.am-btn.is-primary {
  color: var(--on-btn);
  background: var(--btn);
  box-shadow: none;
}

.am-btn:disabled {
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--hair);
  cursor: default;
  background: none;
}

.am-status {
  margin: 8px 4px 0;
  font-size: 12px;
}

.am-billing {
  color: var(--mute);
  font-size: 11px;
}

.am-connection > .am-btn {
  margin: 8px 4px 0;
}

.am-api-usage {
  background: var(--field);
  border-radius: var(--radius-sm);
  margin: 8px 4px;
  padding: 10px 12px;
  font-size: 12px;
}

.am-api-usage p {
  margin: 0 0 4px;
}

.am-api-usage strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.am-api-usage a {
  color: var(--accent);
}

.am-key-entry {
  margin: 12px 4px 0;
}

.am-key-entry > label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.am-key-entry input {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--field);
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
}

.am-key-entry input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .am-chip .am-model {
    display: none;
  }

  .am-ev {
    white-space: normal;
    text-align: right;
  }

  .trail-head {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .trail .stats {
    flex: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-pop {
    animation: none;
  }
}

.mail-accounts {
  overflow: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  font: inherit;
  width: min(480px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
  padding: 24px;
  font-size: 14px;
  line-height: 1.65;
}

.mail-accounts::backdrop {
  background: color-mix(in srgb, var(--field) 80%, transparent);
}

.mail-accounts header, .mail-accounts .actions {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.mail-accounts h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.mail-accounts .purpose {
  margin: 12px 0 20px;
}

.mail-accounts article {
  border-top: 1px solid var(--hair);
  overflow-wrap: anywhere;
  padding: 14px 0;
}

.mail-accounts article p {
  margin: 6px 0;
}

.mail-accounts article small {
  display: block;
  color: var(--mute);
}

.mail-accounts form {
  display: grid;
  gap: 14px;
}

.mail-accounts label {
  display: grid;
  text-align: left;
  gap: 5px;
}

.mail-accounts input, .mail-accounts select {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
}

.mail-accounts details label {
  margin-top: 8px;
}

.mail-accounts .hint, .mail-accounts .actions button:not(.connect), .mail-accounts header button {
  color: var(--mute);
  font-size: 12px;
}

.mail-accounts .actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 12px;
}

.mail-accounts button.connect, .mail-accounts button.connect:hover {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  padding: 8px 16px;
}

.mail-accounts button:disabled {
  opacity: .5;
  cursor: default;
}

.mail-accounts .error {
  color: var(--fail);
}

.mail-accounts .add {
  color: var(--accent);
  margin-top: 12px;
}

.pins {
  position: sticky;
  z-index: 3;
}

.pins.is-wide {
  height: 0;
}

.pins-rail {
  position: absolute;
  display: flex;
  color: var(--ink);
  flex-direction: column;
  width: 256px;
  min-height: 0;
  font-size: 13px;
  line-height: 1.45;
  top: 0;
  right: calc(100% + 88px);
}

.pins-roots {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pins-head {
  display: flex;
  border-bottom: 1px solid var(--hair);
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 0 6px 6px 8px;
}

.pins-head h2 {
  color: var(--ink);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.pins-count {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.pins-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 0 auto;
  min-height: 0;
}

.pins-empty {
  color: var(--mute);
  margin: 8px 8px 0;
  font-size: 12px;
}

.pins-group h3 {
  color: var(--mute);
  letter-spacing: .02em;
  margin: 10px 0 2px;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
}

.pins-group ul, .pins-sheet ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pins-row {
  list-style: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.pins-row-main {
  display: flex;
  align-items:  flex-start;
  gap: 2px;
}

.pins-ref {
  display: flex;
  border-radius: var(--radius-sm);
  text-align: left;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  padding: 5px 4px 5px 6px;
  transition: background .15s;
}

.pins-ref:hover {
  background: var(--hover);
}

.pins-row.is-open .pins-ref {
  box-shadow: inset 2px 0 0 var(--accent);
}

.pins-t {
  display: flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.pins-mark {
  display: inline-grid;
  flex: none;
  place-items:  center;
  width: 14px;
  height: 14px;
}

.pins-mark.new-dot {
  width: 6px;
  height: 6px;
  margin: 0 4px;
}

.pins-mark.is-warn {
  color: var(--fail);
}

.pins-mark.is-ok {
  color: var(--ok);
}

.pins-n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.pins-title {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
}

.pins-row.is-closed .pins-title {
  color: var(--mute);
  font-weight: 500;
}

.pins-line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mute);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-left: 20px;
  font-size: 12px;
}

.pins-row.tone-warn .pins-line {
  color: var(--fail);
}

.pins-more {
  margin-top: 2px;
}

.pins-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 0 6px 24px;
}

.pins-acts button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 2px 8px;
  transition: color .15s, background .15s;
  font-size: 12px;
}

.pins-acts button.is-first {
  color: var(--accent);
  font-weight: 600;
}

.pins-acts button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.pins-acts button:disabled, .pins-chips button:disabled {
  opacity: .5;
  cursor: default;
}

.pins-err {
  color: var(--fail);
  margin: 0 0 6px 24px;
  font-size: 12px;
}

.pins-menu {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  margin: 2px 0 8px 20px;
  padding: 8px 10px;
  font-size: 12px;
}

.pins-menu-h {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-weight: 600;
}

.pins-menu-now {
  color: var(--ink);
  font-weight: 400;
}

.pins-link {
  color: var(--accent);
  margin-left: 6px;
  font-size: 12px;
}

.pins-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.pins-chips button {
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: 2px 8px;
  transition: border-color .15s, background .15s;
  font-size: 12px;
}

.pins-chips button:hover:not(:disabled) {
  background: var(--hover);
}

.pins-chips button[aria-checked="true"] {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.pins-menu-rule {
  color: var(--mute);
  margin: -4px 0 8px;
}

.pins-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -4px 0 8px;
}

.pins-pick input {
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  flex: 140px;
  min-width: 0;
  padding: 2px 6px;
  font-size: 12px;
}

.pins-pick button {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  padding: 2px 10px;
  font-size: 12px;
}

.pins-unpin {
  color: var(--fail);
  font-size: 12px;
}

.pins-unpin:hover:not(:disabled) {
  text-decoration: underline;
}

.pins-foot {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-direction: column;
  flex: none;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
}

.pins-confirm {
  display: flex;
  border-radius: var(--radius-sm);
  text-align: left;
  flex-direction: column;
  align-items:  flex-start;
  padding: 5px 8px;
  transition: background .15s;
}

.pins-confirm:hover, .pins-later:hover {
  background: var(--hover);
}

.pins-confirm-n {
  color: var(--accent);
  font-weight: 600;
}

.pins-confirm-why {
  color: var(--mute);
  font-size: 12px;
}

.pins-later {
  border-radius: var(--radius-sm);
  color: var(--mute);
  text-align: left;
  padding: 4px 8px;
  transition: color .15s, background .15s;
  font-size: 12px;
}

.pins-later:hover {
  color: var(--ink);
}

.pins.is-narrow.has-items {
  background: var(--field);
  margin: -16px -24px 0;
  padding: 8px 24px 4px;
}

.pins.is-narrow.has-items + .inbox {
  margin-top: 0;
}

.pins-line-row {
  display: flex;
  contain: inline-size;
  align-items:  center;
  gap: 6px;
}

.pins-fold {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  text-align: left;
  flex: 1;
  align-items:  center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  transition: border-color .15s;
  font-size: 13px;
  line-height: 1.45;
}

.pins-fold:hover {
  border-color: color-mix(in srgb, var(--ink) 24%, var(--card-border));
}

.pins-fold-head {
  color: var(--ink);
  flex: none;
  font-weight: 700;
}

.pins-fold-text {
  overflow: hidden;
  color: var(--mute);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.pins-fold-confirm {
  border-radius: var(--radius-box);
  color: var(--accent);
  flex: none;
  padding: 6px 10px;
  transition: background .15s;
  font-size: 13px;
  font-weight: 600;
}

.pins-fold-confirm:hover {
  background: var(--hover);
}

.pins-drop {
  position: absolute;
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  flex-direction: column;
  max-height: min(70dvh, 560px);
  padding: 10px 6px 8px;
  font-size: 13px;
  line-height: 1.45;
  top: calc(100% - 2px);
  left: 24px;
  right: 24px;
}

.pins-drop .pins-roots {
  max-height: 100%;
}

@media (max-width: 640px) {
  .pins.is-narrow.has-items {
    margin: -16px -16px 0;
    padding: 8px 16px 4px;
  }

  .pins-drop, .pins.is-narrow .pins-sheet-wrap {
    left: 16px;
    right: 16px;
  }
}

.pins-sheet-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 360px;
  top: 0;
  left: -76px;
}

.pins.is-narrow .pins-sheet-wrap {
  width: auto;
  max-width: 480px;
  top: calc(100% - 2px);
  left: 24px;
  right: 24px;
}

.pins-sheet {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  flex-direction: column;
  min-height: 0;
  font-size: 13px;
  line-height: 1.45;
}

.pins-sheet-top {
  display: flex;
  border-bottom: 1px solid var(--hair);
  flex: none;
  justify-content: space-between;
  align-items:  center;
  padding: 8px 8px 6px 14px;
}

.pins-sheet-top h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.pins-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 14px 6px;
}

.pins-sheet-sec {
  padding: 10px 0;
}

.pins-sheet-sec + .pins-sheet-sec {
  border-top: 1px solid var(--hair);
}

.pins-sheet-sec h3 {
  color: var(--ink);
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
}

.pins-sheet-sec.is-empty h3 {
  color: var(--mute);
  margin: 0;
  font-weight: 600;
}

.pins-fold-h {
  display: inline-flex;
  align-items:  center;
  gap: 4px;
  font-weight: 700;
}

.pins-sheet-note {
  color: var(--mute);
  margin: 0 0 6px;
  font-size: 12px;
}

.pins-sheet-row {
  color: var(--ink);
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.45;
}

.pins-sheet-row + .pins-sheet-row {
  border-top: 1px dashed var(--hair);
}

.pins-sheet-ref {
  display: flex;
  text-align: left;
  white-space: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.pins-sheet-ref:hover .pins-title {
  text-decoration: underline;
}

.pins-sheet-row .pins-line {
  margin: 1px 0 0;
  padding-left: 0;
}

.pins-sheet-row .pins-acts {
  margin-left: -8px;
  padding: 4px 0 0;
}

.pins-sheet-row.is-undone {
  opacity: .6;
}

.pins-done-note {
  color: var(--mute);
  padding: 2px 8px;
  font-size: 12px;
}

.original .top .top-btns {
  display: inline-flex;
  align-items:  center;
  gap: 2px;
}

.original .top .pin-toggle {
  margin-right: 0;
}

.pin-toggle.is-pinned {
  color: var(--accent);
}

.pin-toggle.is-pinned svg {
  fill: currentColor;
}

.pin-error {
  color: var(--fail);
  letter-spacing: 0;
  white-space: nowrap;
  margin-right: 4px;
  font-size: 12px;
}

.workflows .wf-body {
  border-top: 1px solid var(--hair);
  overflow-y: auto;
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  margin: 0 -16px;
  padding: 18px 20px 28px;
}

.wf-heading h3 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.wf-heading p, .wf-parties, .wf-foot {
  color: var(--mute);
  margin: 8px 0;
  font-size: 12px;
}

.wf-heading > button, .wf-expand, .wf-inspect > button, .wf-notice button {
  color: var(--accent);
  font-size: 12px;
}

.wf-list {
  display: grid;
  margin-top: 16px;
}

.wf-group {
  display: grid;
  border-top: 1px solid var(--hair);
  text-align: left;
  overflow-wrap: anywhere;
  gap: 5px;
  width: 100%;
  padding: 16px 0;
}

.wf-group strong {
  font-size: 15px;
  font-weight: 600;
}

.wf-group span {
  color: var(--mute);
  font-size: 12px;
}

.wf-group:hover strong {
  color: var(--accent);
}

.wf-kindline, .wf-context {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 14px 0;
  font-size: 12px;
}

.wf-context {
  padding: 0 16px;
}

.wf-context button {
  color: var(--accent);
  text-align: left;
}

.wf-diagram {
  position: relative;
  margin: 20px 0 14px;
}

.wf-lines {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  width: 100%;
  height: 100%;
  inset: 0;
}

.wf-lines > path {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.25px;
}

.wf-lines marker path {
  fill: var(--hair-strong);
}

.wf-columns, .wf-branch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
}

.wf-columns {
  color: var(--mute);
  margin-bottom: 16px;
  font-size: 12px;
}

.wf-branch {
  margin-bottom: 24px;
}

.wf-branch h4 {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.wf-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.wf-node {
  position: relative;
  display: grid;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
  align-content:  start;
  gap: 6px;
  width: 100%;
  min-height: 76px;
  padding: 10px;
}

.wf-node strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.6;
}

.wf-node span, .wf-node small, .wf-placeholder {
  color: var(--mute);
  font-size: 12px;
}

.wf-node[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--hover);
}

.wf-node.is-candidate {
  border-style: dashed;
}

.wf-placeholder {
  position: relative;
  padding: 12px 0;
}

.wf-inspect {
  border-top: 1px solid var(--hair);
  padding: 16px 0;
}

.wf-inspect h4 {
  overflow-wrap: anywhere;
  margin: 6px 0 12px;
  font-size: 15px;
}

.wf-status {
  color: var(--mute);
  font-size: 12px;
}

.wf-inspect blockquote {
  border-left: 2px solid var(--hair-strong);
  overflow-wrap: anywhere;
  margin: 12px 0;
  padding-left: 12px;
  font-size: 13px;
}

.wf-inspect > p {
  color: var(--mute);
  font-size: 12px;
}

.wf-evidence {
  display: grid;
  list-style: none;
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
}

.wf-evidence li {
  display: grid;
  overflow-wrap: anywhere;
  gap: 4px;
  font-size: 13px;
}

.wf-evidence li > span, .wf-exclude {
  color: var(--mute);
  font-size: 12px;
}

.wf-evidence button {
  text-align: left;
  justify-self: start;
}

.wf-evidence button:not(.wf-exclude) {
  color: var(--accent);
}

.wf-relations {
  border-top: 1px solid var(--hair);
  padding-top: 12px;
}

.wf-relations h4 {
  margin: 0 0 10px;
  font-size: 13px;
}

.wf-relations > div {
  display: grid;
  overflow-wrap: anywhere;
  gap: 3px;
  margin-bottom: 14px;
  font-size: 12px;
}

.wf-relations button {
  color: var(--accent);
  justify-self: start;
}

.wf-notice {
  color: var(--mute);
  font-size: 12px;
}

.wf-error {
  color: var(--fail);
  font-size: 13px;
}

.wf-search {
  display: grid;
  color: var(--mute);
  gap: 6px;
  margin: 18px 0;
  font-size: 12px;
}

.wf-search input {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 9px 10px;
  font-size: 13px;
}

.wf-pages {
  display: flex;
  color: var(--mute);
  justify-content: space-between;
  align-items:  center;
  margin: 16px 0;
  font-size: 12px;
}

@container (width <= 520px) {
  .wf-columns {
    display: none;
  }

  .wf-branch {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .wf-stage:before {
    content: attr(data-label);
    color: var(--mute);
    font-size: 12px;
  }
}

.lan-access {
  overflow: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  font: inherit;
  width: min(480px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
  padding: 24px;
  font-size: 14px;
  line-height: 1.65;
}

.lan-access::backdrop {
  background: color-mix(in srgb, var(--field) 80%, transparent);
}

.lan-access header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.lan-access h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.lan-access h3 {
  color: var(--mute);
  margin: 24px 0 2px;
  font-size: 13px;
  font-weight: 600;
}

.lan-access .purpose {
  margin: 12px 0 18px;
}

.lan-access header button, .lan-access small, .lan-access .empty, .lan-access .hint {
  color: var(--mute);
  font-size: 12px;
}

.lan-access small {
  display: block;
}

.lan-access .address {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.lan-access .address > span, .lan-access .code span, .lan-access .who span, .lan-access .me span {
  color: var(--mute);
  font-size: 13px;
}

.lan-access .address code {
  font-family: var(--mono);
  overflow-wrap: anywhere;
  font-size: 14px;
}

.lan-access button.copy {
  color: var(--accent);
  font-size: 12px;
}

.lan-access .code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--surface);
  align-items: baseline;
  gap: 2px 14px;
  margin-top: 16px;
  padding: 14px 16px;
}

.lan-access .code strong {
  font-family: var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 650;
}

.lan-access .code .copy, .lan-access .code .again {
  justify-self: end;
}

.lan-access .code .again {
  color: var(--mute);
  font-size: 12px;
}

.lan-access .code .make {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  justify-self: start;
  padding: 8px 16px;
}

.lan-access ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lan-access li {
  border-top: 1px solid var(--hair);
  padding: 10px 0;
}

.lan-access .who, .lan-access .me {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lan-access .me {
  margin: 0 0 14px;
}

.lan-access .who .cut {
  color: var(--mute);
  margin-left: auto;
  font-size: 12px;
}

.lan-access .who .cut:hover, .lan-access .lan-ask .danger {
  color: var(--fail);
}

.lan-access .lan-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-size: 12px;
}

.lan-access .lan-ask button {
  color: var(--mute);
  font-size: 12px;
}

.lan-access .lan-ask .danger {
  font-weight: 600;
}

.lan-access > .cut {
  color: var(--fail);
  font-size: 13px;
}

.lan-access .hint {
  margin: 20px 0 0;
}

.lan-access .warn, .lan-access .error {
  color: var(--fail);
  margin: 10px 0 0;
  font-size: 13px;
}

.lan-access button:disabled {
  opacity: .5;
  cursor: default;
}

.date-pick {
  overflow: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-box);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  width: min(340px, 100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

.date-pick[open] {
  animation: .14s ease-out date-pick-in;
}

@keyframes date-pick-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .date-pick[open] {
    animation: none;
  }
}

.date-pick::backdrop {
  background: var(--scrim);
}

.date-pick .dp-box {
  padding: 18px 18px 14px;
}

.date-pick h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.date-pick .dp-subject {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0 0;
  font-size: 12px;
}

.date-pick .dp-quick {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  margin-top: 14px;
}

.date-pick .dp-quick button {
  display: grid;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  text-align: center;
  word-break: keep-all;
  gap: 1px;
  padding: 6px 4px;
  transition: border-color .15s, color .15s, background .15s;
  font-size: 12px;
  line-height: 1.35;
}

.date-pick .dp-quick button:hover {
  background: var(--hover);
}

.date-pick .dp-quick button span {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.date-pick .dp-quick button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.date-pick .dp-head {
  display: flex;
  align-items:  center;
  gap: 2px;
  margin: 12px 0 4px;
}

.date-pick .dp-head h3 {
  font-variant-numeric: tabular-nums;
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.date-pick .dp-head button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
}

.date-pick .dp-head button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.date-pick .dp-head button:disabled {
  opacity: .35;
  cursor: default;
}

.date-pick table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.date-pick th {
  color: var(--mute);
  padding: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
}

.date-pick td {
  text-align: center;
  padding: 1px 0;
}

.date-pick :-webkit-any(th.is-sun, .dp-day.is-sun) {
  color: var(--cal-sun);
}

.date-pick :-moz-any(th.is-sun, .dp-day.is-sun) {
  color: var(--cal-sun);
}

.date-pick :is(th.is-sun, .dp-day.is-sun) {
  color: var(--cal-sun);
}

.date-pick :-webkit-any(th.is-sat, .dp-day.is-sat) {
  color: var(--cal-sat);
}

.date-pick :-moz-any(th.is-sat, .dp-day.is-sat) {
  color: var(--cal-sat);
}

.date-pick :is(th.is-sat, .dp-day.is-sat) {
  color: var(--cal-sat);
}

.date-pick .dp-day {
  display: inline-flex;
  aspect-ratio: 1;
  border-radius: var(--radius-btn);
  font-variant-numeric: tabular-nums;
  justify-content: center;
  align-items:  center;
  width: 100%;
  max-width: 38px;
  transition: background .12s, color .12s;
}

.date-pick button.dp-day:hover:not(:disabled) {
  background: var(--hover);
}

.date-pick .dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  font-weight: 650;
}

.date-pick .dp-day:-webkit-any(.is-out, :disabled) {
  opacity: .35;
  cursor: default;
}

.date-pick .dp-day:-moz-any(.is-out, :disabled) {
  opacity: .35;
  cursor: default;
}

.date-pick .dp-day:is(.is-out, :disabled) {
  opacity: .35;
  cursor: default;
}

.date-pick .dp-day.is-picked, .date-pick button.dp-day.is-picked:hover {
  background: var(--btn);
  box-shadow: none;
  color: var(--on-btn);
  font-weight: 650;
}

.date-pick .dp-day:focus-visible {
  outline-offset: 1px;
  border-radius: var(--radius-btn);
}

.date-pick footer {
  display: flex;
  border-top: 1px solid var(--hair);
  align-items:  center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 12px;
}

.date-pick .dp-say {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
}

.date-pick .dp-say.is-empty {
  color: var(--mute);
}

.date-pick footer button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 5px 12px;
  font-size: 13px;
}

.date-pick footer button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.date-pick footer .is-go, .date-pick footer .is-go:hover:not(:disabled) {
  background: var(--btn);
  color: var(--on-btn);
  font-weight: 600;
}

.date-pick footer .is-go:disabled {
  opacity: .45;
  cursor: default;
}

.library-panel {
  container-type: inline-size;
}

.library-panel .lib-header {
  display: flex;
  border-bottom: 1px solid var(--hair);
  flex: none;
  justify-content: space-between;
  align-items:  flex-start;
  padding: 18px 24px 14px;
}

.lib-home {
  letter-spacing: -.02em;
  font-size: 16px;
  font-weight: 700;
}

.lib-header p {
  color: var(--mute);
  margin: 3px 0 0;
  font-size: 12px;
}

.lib-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: 24px;
}

.lib-intro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.lib-intro h2, .lib-detail-title h2 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.35;
}

.lib-intro span, .lib-section > small, .lib-rights, .lib-citation small, .lib-picker small {
  color: var(--mute);
  font-size: 12px;
}

.lib-tabs {
  display: flex;
  border-bottom: 1px solid var(--hair);
  gap: 24px;
  margin: 20px 0;
}

.lib-tabs button {
  color: var(--mute);
  border-bottom: 2px solid #0000;
  padding: 8px 0;
}

.lib-tabs button[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 650;
}

.lib-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lib-filters label, .lib-editor label, .lib-picker > label:first-child {
  display: grid;
  color: var(--mute);
  gap: 4px;
  font-size: 12px;
}

.lib-search {
  grid-column: 1 / -1;
}

.lib-body input:not([type="checkbox"]), .lib-body select, .lib-body textarea {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  font-size: 14px;
}

.lib-body textarea {
  resize: vertical;
}

.lib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.lib-tags button {
  border: 1px solid var(--hair);
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 3px 8px;
  font-size: 12px;
}

.lib-tags button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: 24px;
}

.lib-tile {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-self:  start;
  min-width: 0;
}

.lib-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items:  center;
  width: 100%;
}

.lib-cover img {
  position: absolute;
  object-fit: contain;
  width: 100%;
  height: 100%;
  min-height: 0;
  inset: 0;
}

.lib-cover > span {
  display: grid;
  text-align: center;
  color: var(--mute);
  font-size: 24px;
}

.lib-cover small {
  margin-top: 8px;
  font-size: 11px;
}

.lib-tile:hover .lib-cover {
  border-color: var(--accent);
}

.lib-tile-copy {
  width: 100%;
  padding: 10px 0 0;
}

.lib-tile-copy > small, .lib-detail-title > small {
  color: var(--mute);
  font-size: 11px;
}

.lib-tile h3 {
  overflow-wrap: anywhere;
  margin: 3px 0;
  font-size: 16px;
  font-weight: 650;
}

.lib-tile p {
  color: var(--mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin: 4px 0;
  font-size: 12px;
}

.lib-keywords {
  color: var(--mute);
  overflow-wrap: anywhere;
  font-size: 12px;
}

.lib-empty {
  border-top: 1px solid var(--hair);
  margin-top: 24px;
  padding: 46px 12px;
}

.lib-empty h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.lib-empty p {
  color: var(--mute);
  max-width: 40em;
  font-size: 14px;
}

.lib-pages, .lib-actions {
  display: flex;
  border-top: 1px solid var(--hair);
  flex-wrap: wrap;
  align-items:  center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
}

.lib-pages {
  font-size: 12px;
}

.lib-pages span {
  color: var(--mute);
  margin-right: auto;
}

.lib-body button:disabled {
  opacity: .45;
  cursor: default;
}

.lib-back {
  color: var(--mute);
  margin-bottom: 24px;
  font-size: 12px;
}

.lib-detail-title p {
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.8;
}

.lib-gallery {
  display: grid;
  gap: 20px;
  margin: 24px 0 8px;
}

.lib-gallery figure {
  margin: 0;
}

.lib-image-open {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  overflow: hidden;
  display: block;
  width: 100%;
}

.lib-image-open img {
  display: block;
  object-fit: contain;
  width: 100%;
  max-height: 640px;
}

.lib-gallery figcaption {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-top: 8px;
  font-size: 12px;
}

.lib-gallery figcaption > span {
  flex: 1;
  min-width: 140px;
}

.lib-gallery figcaption label {
  flex-basis: 100%;
}

.lib-gallery .is-unselected .lib-image-open {
  opacity: .45;
}

.lib-missing {
  background: var(--surface);
  border: 1px dashed var(--hair-strong);
  color: var(--mute);
  padding: 28px 16px;
  font-size: 13px;
}

.lib-body a, .lib-related button {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.lib-rights {
  margin: 8px 0 28px;
}

.lib-section {
  border-top: 1px solid var(--hair);
  padding: 20px 0;
}

.lib-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
}

.lib-section p, .lib-section li {
  font-size: 14px;
}

.lib-section p {
  margin: 5px 0;
}

.lib-section ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.lib-section li + li {
  margin-top: 14px;
}

.lib-section li a {
  font-size: 12px;
}

.lib-section blockquote {
  border-left: 2px solid var(--hair-strong);
  color: var(--mute);
  margin: 8px 0 0;
  padding-left: 12px;
  font-size: 12px;
}

.lib-editor {
  display: grid;
  gap: 14px;
}

.lib-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lib-related {
  display: grid;
  justify-items: start;
  gap: 8px;
  font-size: 13px;
}

.lib-picker {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
}

.lib-citation {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 13px;
}

.lib-actions {
  position: sticky;
  background: var(--field);
  padding: 16px 0;
  font-size: 13px;
  bottom: -24px;
}

.lib-primary {
  background: var(--btn);
  color: var(--on-btn);
  border-radius: var(--radius-btn);
  padding: 9px 16px;
  font-weight: 600;
}

.lib-notice, .lib-error {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  padding: 8px 12px;
  font-size: 13px;
}

.lib-error button {
  text-decoration: underline;
}

.lib-lightbox {
  border: 1px solid var(--hair-strong);
  background: var(--field);
  color: var(--ink);
  border-radius: var(--radius-box);
  width: min(95vw, 1600px);
  max-height: 95vh;
  padding: 20px;
}

.lib-lightbox::backdrop {
  background: color-mix(in srgb, var(--ink) 65%, transparent);
}

.lib-lightbox header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  font-size: 14px;
}

.lib-lightbox > img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  max-height: 78vh;
  margin: auto;
}

.lib-lightbox p {
  color: var(--mute);
  font-size: 12px;
}

.lib-lightbox-acts {
  display: inline-flex;
  flex: none;
  align-items:  center;
  gap: 16px;
}

.lib-lightbox .lib-edit {
  display: inline-flex;
  color: var(--accent);
  text-decoration: none;
  align-items:  center;
  gap: 3px;
}

.lib-lightbox .lib-edit:hover {
  text-decoration: underline;
}

.lib-lightbox .lib-edit:disabled {
  color: var(--mute);
  cursor: default;
  text-decoration: none;
}

.lib-lightbox .lib-edition {
  margin: 12px 0 0;
}

.lib-answer {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--radius-box);
  background: var(--surface);
  align-items:  flex-start;
  gap: 18px;
  margin: 16px 0;
  padding: 18px;
}

.lib-answer > div {
  flex: 1;
  min-width: 0;
}

.lib-answer small, .lib-answer-status {
  color: var(--mute);
  font-size: 12px;
}

.lib-answer h3 {
  overflow-wrap: anywhere;
  margin: 6px 0 10px;
  font-size: 17px;
}

.lib-answer p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.7;
}

.lib-answer-cover {
  background: var(--field);
  flex: 0 0 112px;
  padding: 0;
}

.lib-answer-cover img {
  display: block;
  object-fit: contain;
  width: 112px;
  height: 164px;
}

.lib-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.lib-answer-actions button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-box);
  padding: 8px 12px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .lib-answer {
    flex-direction: column;
  }

  .lib-answer-cover {
    flex-basis: auto;
  }
}

@container (width <= 460px) {
  .lib-body {
    padding: 18px;
  }

  .library-panel .lib-header {
    padding: 14px 18px;
  }

  .lib-grid {
    grid-template-columns: 1fr;
  }

  .lib-intro {
    flex-direction: column;
    align-items:  flex-start;
    gap: 4px;
  }

  .lib-actions {
    bottom: -18px;
  }
}

.topic-ask {
  animation: none;
}

.topic-ask .topic-ask-cancel {
  color: var(--mute);
  border-color: #0000;
  align-self:  center;
  padding: 6px 10px;
  font-size: 13px;
}

.topic-ask .inline-reply-opts .topic-ask-cancel:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
  border-color: #0000;
}

.split-line {
  color: var(--mute);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.split-line.is-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0 0 18px;
}

.split-link {
  color: var(--ink);
  text-align: start;
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: 3px;
}

.split-link:hover {
  text-decoration-color: currentColor;
}

.split-act {
  border-radius: var(--radius-btn);
  color: var(--accent);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.split-act:hover:not(:disabled) {
  background: var(--hover);
}

.split-act:disabled, .split-here:disabled {
  cursor: default;
  opacity: .55;
}

.split-err {
  color: var(--fail);
  font-size: 12px;
}

.talk-end {
  flex-wrap: wrap;
  align-items:  flex-start;
  gap: 6px 16px;
}

.talk-end:has(.talk-links) {
  border-top: 1px solid var(--hair);
  margin-top: 6px;
  padding-top: 10px;
}

.talk-links {
  display: grid;
  animation: .3s ease-out both fade;
  flex: 320px;
  gap: 4px;
  min-width: 0;
}

.talk-related {
  display: flex;
  color: var(--mute);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.talk-related .h {
  font-weight: 600;
}

.talk-related .g {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  min-width: 0;
  max-width: 100%;
}

.talk-related .why {
  margin-right: 2px;
}

.talk-related button {
  display: inline-flex;
  border-radius: var(--radius-btn);
  color: var(--ink);
  text-align: start;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 1px 6px;
}

.talk-related button .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 26em;
}

.talk-related button time {
  color: var(--mute);
  flex: none;
  font-size: 11.5px;
}

.talk-related button:hover {
  background: var(--hover);
}

.answer .copy-row .split-here {
  opacity: 0;
  margin-left: 14px;
  transition: opacity .15s;
}

.answer:hover .copy-row .split-here {
  opacity: 1;
}

.answer .copy-row .split-here:focus-visible {
  opacity: 1;
}

.answer .copy-row .split-here:hover:not(:disabled) {
  color: var(--ink);
}

@media (hover: none) {
  .answer .copy-row .split-here {
    opacity: 1;
  }
}

.split-ask {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-left: 14px;
}

.split-ask .q {
  color: var(--ink);
  margin-right: 2px;
}

.split-ask button {
  border-radius: var(--radius-btn);
  color: var(--mute);
  padding: 1px 8px;
}

.split-ask button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.split-ask .is-go {
  color: var(--accent);
  font-weight: 600;
}

.copy-row .split-err {
  margin-left: 10px;
}

.composer .topic-toast {
  position: absolute;
  z-index: 2;
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--pop-shadow);
  align-items:  center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 8px 8px 14px;
  font-size: 12.5px;
  bottom: calc(100% - 4px);
  left: 24px;
  right: 24px;
}

.topic-toast .t {
  color: var(--ink);
  flex: none;
}

.topic-toast .s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  flex: 1;
  min-width: 0;
}

.topic-toast.is-fail .t {
  color: var(--fail);
  flex: 1;
}

.topic-toast .undo {
  border-radius: var(--radius-btn);
  color: var(--accent);
  flex: none;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.topic-toast .undo:hover:not(:disabled) {
  background: var(--hover);
}

.original.conv .ask {
  letter-spacing: 0;
  color: var(--ink);
  animation: none;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.original.conv .conv-turn + .conv-turn {
  border-top: 1px solid var(--hair);
  margin-top: 14px;
  padding-top: 14px;
}

.mini .sub .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  flex: none;
  max-width: 45%;
}

.recent .talks .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
  flex: none;
  max-width: 38%;
  font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
  .answer .copy-row .split-here {
    transition: none;
  }
}

.vault {
  box-sizing: border-box;
  word-break: keep-all;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  max-width: 560px;
  margin: 8px 0 20px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
}

.vault header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.vault h3 {
  margin: 0;
  font-size: 15px;
}

.vault header small {
  color: var(--mute);
  font-size: 12px;
}

.vault .v-form, .vault .v-gate {
  display: grid;
  gap: 8px;
}

.vault label, .vault .v-row, .vault .v-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items:  center;
  gap: 6px 10px;
}

.vault label > span, .vault .v-row > span, .vault .v-item dt {
  color: var(--mute);
  font-size: 12px;
}

.vault .v-row p {
  margin: 0;
}

.vault input {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  width: 100%;
  padding: 0 10px;
  line-height: 30px;
}

.vault input:focus {
  border-color: var(--accent);
  outline: none;
}

.vault .v-note {
  color: var(--mute);
  margin: 2px 0 0;
  font-size: 12px;
}

.vault .v-note.is-err {
  color: var(--fail);
}

.vault .v-item {
  margin: 0 0 10px;
}

.vault .v-item dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.vault .v-list {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.vault .v-list li {
  border-bottom: 1px solid var(--line);
}

.vault .v-list button {
  display: flex;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 4px;
}

.vault .v-list button:hover {
  background: var(--hover);
}

.vault .v-list b {
  font-weight: 600;
}

.vault .v-list span {
  overflow: hidden;
  color: var(--mute);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.vault .v-list small {
  color: var(--mute);
  white-space: nowrap;
  margin-left: auto;
  font-size: 12px;
}

.vault .v-list.is-trash b {
  color: var(--mute);
  font-weight: 400;
}

.vault .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.vault .acts button {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: none;
  padding: 0 12px;
  font-size: 12px;
  line-height: 26px;
}

.vault .acts button:hover {
  background: var(--hover);
}

.vault .acts button.primary {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--on-btn);
}

.vault .acts button.danger {
  border-color: var(--fail);
  color: var(--fail);
}

.vault .acts button:disabled {
  opacity: .4;
  cursor: default;
}

.vault button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.vault .v-confirm {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
}

.vault .v-confirm p {
  margin: 0 0 8px;
}

.vault .v-gate {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.vault .v-link {
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
}

@media (max-width: 520px) {
  .vault label, .vault .v-row, .vault .v-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* web/owner-auth.css */
.owner-page {
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 64px 24px 32px;
}

.owner-brand {
  letter-spacing: -.04em;
  margin-bottom: 64px;
  font-size: 24px;
  font-weight: 750;
}

.owner-brand span {
  color: var(--mute);
  letter-spacing: 0;
  margin-left: 12px;
  font-size: 15px;
  font-weight: 450;
}

.owner-card h1 {
  letter-spacing: -.04em;
  margin: 8px 0 20px;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.4;
}

.owner-kicker {
  color: var(--mute);
  margin: 0;
  font-size: 13px;
}

.owner-lead {
  color: var(--mute);
  margin-bottom: 32px;
}

.owner-card label, .owner-dialog label {
  display: block;
  margin: 16px 0 8px;
  font-size: 14px;
}

.owner-card input:not([type="checkbox"]), .owner-dialog input {
  display: block;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
}

.owner-primary, .owner-secondary {
  border-radius: var(--radius-btn);
  min-height: 44px;
  padding: 10px 16px;
}

.owner-primary {
  display: block;
  background: var(--btn);
  color: var(--on-btn);
  width: 100%;
  margin-top: 24px;
  font-weight: 600;
}

.owner-secondary {
  border: 1px solid var(--hair-strong);
  background: var(--surface);
}

.owner-text {
  display: block;
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 20px auto;
}

.owner-page button:disabled, .owner-dialog button:disabled {
  opacity: .5;
  cursor: default;
}

.owner-note, .owner-foot {
  color: var(--mute);
  font-size: 13px;
}

.owner-foot {
  border-top: 1px solid var(--hair);
  margin-top: 56px;
  padding-top: 20px;
}

.owner-error {
  color: var(--fail);
  margin: 16px 0 0;
}

.owner-codes {
  list-style: none;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
  margin: 20px 0;
  padding: 14px 16px;
}

.owner-codes li {
  font: 13px / 1.7 var(--mono);
  padding: 4px 0;
}

.owner-check {
  align-items:  center;
  gap: 10px;
  display: flex !important;
}

.owner-dialog {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-box);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  width: min(560px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
  padding: 24px;
}

.owner-dialog::backdrop {
  background: var(--scrim);
}

.owner-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
}

.owner-dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.owner-dialog h3 {
  margin: 28px 0 8px;
  font-size: 15px;
}

.owner-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.owner-list li {
  display: flex;
  border-bottom: 1px solid var(--hair);
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  padding: 12px 0;
}

.owner-list small {
  display: block;
  color: var(--mute);
  font-size: 12px;
}

.owner-list button {
  color: var(--mute);
  white-space: nowrap;
}

.owner-inline {
  display: flex;
  align-items:  end;
  gap: 8px;
}

.owner-inline input {
  flex: 1;
  min-width: 0;
}

.owner-inline button {
  flex: none;
}

.owner-dialog-foot {
  border-top: 1px solid var(--hair);
  margin-top: 28px;
  padding-top: 20px;
}

@media (max-width: 560px) {
  .owner-page {
    padding-top: 32px;
  }

  .owner-brand {
    margin-bottom: 40px;
  }

  .owner-card h1 {
    font-size: 25px;
  }
}

.owner-address {
  color: var(--mute);
  overflow-wrap: anywhere;
  margin: 0 0 20px;
  font-size: 12px;
}

.owner-address strong {
  display: block;
  color: var(--ink);
  margin-top: 4px;
  font-weight: 500;
}

.owner-enrollment {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
  margin: 20px 0;
  padding: 16px;
}

.owner-enrollment p {
  margin: 0 0 12px;
}

.owner-enrollment .owner-text {
  margin: 16px 0 0;
}

.owner-enrollment-code {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin: 16px 0;
}

.owner-enrollment-code code {
  font: 16px / 1.5 var(--mono);
  overflow-wrap: anywhere;
}

.owner-enroll-start {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.owner-dialog {
  overflow: auto;
}

.owner-list li > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

@media (max-width: 560px) {
  .owner-inline, .owner-enrollment-code {
    flex-direction: column;
    align-items: stretch;
  }

  .owner-inline button {
    width: 100%;
  }
}

/* web/document-ai.css */
.original-workspace {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.original-workspace > iframe {
  background: var(--surface);
  border: 0;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.document-ai {
  display: flex;
  border-left: 1px solid var(--hair-strong);
  background: var(--field);
  color: var(--ink);
  flex-direction: column;
  flex: 0 0 clamp(370px, 25vw, 520px);
  min-width: 0;
  min-height: 0;
  font-size: 14px;
  line-height: 1.65;
}

.document-ai[hidden] {
  display: none;
}

.document-ai-head {
  display: flex;
  border-bottom: 1px solid var(--hair);
  flex: none;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  padding: 17px 22px 15px;
}

.document-ai-head h2 {
  letter-spacing: -.03em;
  margin: 1px 0 0;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.document-ai-head small, .document-ai-note, .document-ai-head > button {
  color: var(--mute);
  font-size: 12px;
}

.document-ai-head > button {
  padding: 6px 0 6px 12px;
}

.document-ai-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: 0 22px 22px;
}

.document-ai-intro {
  color: var(--mute);
  margin: 18px 0 20px;
  font-size: 13px;
}

.document-ai h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.document-ai-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.document-ai-section-head > button {
  color: var(--accent);
  padding: 3px 0 3px 8px;
  font-size: 12px;
}

.document-ai-target {
  border-bottom: 1px solid var(--hair);
  padding: 0 0 22px;
}

.document-ai-scope {
  display: flex;
  border-bottom: 1px solid var(--hair-strong);
  gap: 20px;
  margin: 9px 0 0;
}

.document-ai-scope > button {
  color: var(--mute);
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
  padding: 8px 0;
  font-size: 13px;
}

.document-ai-scope > button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 650;
}

.document-ai-selected {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  overflow-wrap: anywhere;
  margin: 12px 0 16px;
  padding: 9px 10px;
  font-size: 13px;
}

.document-ai-search-label, .document-ai-section-picker > label {
  display: block;
  color: var(--mute);
  margin-bottom: 5px;
  font-size: 12px;
}

.document-ai input[type="search"], .document-ai textarea {
  display: block;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  font-size: 13px;
}

.document-ai input[type="search"] {
  min-height: 38px;
}

.document-ai textarea {
  resize: vertical;
  min-height: 130px;
  max-height: 40vh;
  margin-top: 9px;
  line-height: 1.75;
}

.document-ai :-webkit-any(input, textarea)::placeholder {
  color: var(--mute);
  opacity: 1;
}

.document-ai :-moz-any(input, textarea)::placeholder {
  color: var(--mute);
  opacity: 1;
}

.document-ai :is(input, textarea)::placeholder {
  color: var(--mute);
  opacity: 1;
}

.document-ai-section-picker {
  margin-bottom: 18px;
}

.document-ai-note {
  margin: 8px 0 0;
}

.document-ai-note.is-warning {
  color: var(--fail);
}

.document-ai-outline-button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 12px;
}

.document-ai-search-results {
  overflow-y: auto;
  border: 1px solid var(--hair);
  border-top: 0;
  max-height: 260px;
}

.document-ai-search-results > button {
  display: grid;
  text-align: left;
  border-bottom: 1px solid var(--hair);
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  line-height: 1.5;
}

.document-ai-search-results > button:last-of-type {
  border-bottom: 0;
}

.document-ai-search-results > button:hover {
  background: var(--hover);
}

.document-ai-search-results small {
  color: var(--mute);
  font-size: 11px;
}

.document-ai-search-results span {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.document-ai-search-results p {
  color: var(--mute);
  margin: 0;
  padding: 10px;
  font-size: 12px;
}

.document-ai-compose {
  padding: 21px 0;
}

.document-ai-deep {
  display: flex;
  cursor: pointer;
  align-items:  flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}

.document-ai-deep input {
  accent-color: var(--accent);
  margin: 5px 0 0;
}

.document-ai-deep small {
  display: block;
  color: var(--mute);
  font-size: 12px;
}

.document-ai-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.document-ai-actions > button {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-btn);
  min-height: 38px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 550;
}

.document-ai-primary {
  border: 1px solid var(--btn);
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
}

.document-ai-actions > .document-ai-primary {
  border-color: var(--btn);
}

.document-ai button:disabled {
  opacity: .45;
  cursor: default;
}

.document-ai :-webkit-any(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document-ai :-moz-any(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document-ai :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document-ai-message {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  overflow-wrap: anywhere;
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
}

.document-ai-message.is-error, .document-ai-error {
  border-color: var(--fail);
  color: var(--fail);
}

.document-ai-message button {
  display: block;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-top: 6px;
  font-size: 12px;
}

.document-ai-result {
  border-top: 1px solid var(--hair-strong);
  padding-top: 18px;
}

.document-ai-result .document-ai-section-head {
  flex-wrap: wrap;
  row-gap: 4px;
}

.document-ai-recovery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 14px;
  font-size: 12px;
}

.document-ai-recovery :-webkit-any(a, button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-ai-recovery :-moz-any(a, button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-ai-recovery :is(a, button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-ai-recovery p {
  border-left: 2px solid var(--hair-strong);
  color: var(--mute);
  background: var(--surface);
  flex: 100%;
  margin: 0;
  padding: 8px 10px;
}

.document-ai-result-state {
  display: inline-flex;
  color: var(--mute);
  align-items:  center;
  gap: 7px;
  font-size: 12px;
}

.document-ai-result-state > i {
  display: block;
  background: var(--live-dot);
  animation: 2s steps(8, end) infinite live-spin;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.document-ai-answer {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 16px 0 12px;
  font-size: 14px;
}

.document-ai-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0 0 12px;
}

.document-ai-sources > button {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

.document-ai-source-list {
  margin: 12px 0;
}

.document-ai-source-list > summary {
  color: var(--mute);
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
}

.document-ai-source-list .document-ai-sources {
  padding: 9px 0 0;
}

.document-ai-check {
  background: var(--surface);
  border-left: 2px solid var(--hair-strong);
  margin: 14px 0;
  padding: 9px 11px;
  font-size: 12px;
}

.document-ai-check.is-passed {
  border-color: var(--ok);
}

.document-ai-check.is-failed {
  border-color: var(--fail);
  color: var(--fail);
}

.document-ai-check b {
  font-weight: 550;
}

.document-ai-check p {
  margin: 4px 0 0;
}

.document-ai-change {
  border-top: 1px solid var(--hair);
}

.document-ai-change summary {
  cursor: pointer;
  overflow-wrap: anywhere;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 550;
}

.document-ai-diff {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
}

.document-ai-diff > div {
  border-left: 2px solid var(--hair-strong);
  padding-left: 10px;
}

.document-ai-diff > div:last-child {
  border-color: var(--accent);
}

.document-ai-diff small {
  color: var(--mute);
  font-size: 11px;
}

.document-ai-diff p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 13px;
}

.document-ai-protected {
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  margin-top: 12px;
  padding: 12px;
  font-size: 13px;
}

.document-ai-protected p {
  margin: 0 0 10px;
}

.document-ai-result-actions {
  display: grid;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  font-size: 12px;
}

.document-ai-result-actions button {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: start;
}

.document-ai-empty {
  border-top: 1px solid var(--hair);
  color: var(--mute);
  margin: 7px 0 0;
  padding-top: 16px;
  font-size: 13px;
}

.document-ai-foot {
  display: grid;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  flex: none;
  gap: 2px;
  padding: 10px 22px 12px;
  font-size: 11px;
  line-height: 1.6;
}

.document-ai-foot > button {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: start;
  margin-top: 5px;
  font-size: 12px;
}

.edit-bar .acts button[aria-pressed="true"] {
  background: var(--hover);
  border-color: var(--accent);
}

@media (max-width: 1100px) {
  .original-workspace {
    position: relative;
  }

  .document-ai {
    position: absolute;
    z-index: 2;
    width: min(460px, 94%);
    top: 0;
    bottom: 0;
    right: 0;
  }
}

@media (max-width: 520px) {
  .document-ai {
    border-left: 0;
    width: 100%;
  }

  .document-ai-head, .document-ai-foot, .document-ai-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .document-ai-result-state > i {
    animation: none;
  }
}

/* web/select.css */
.select-control {
  --select-height: 36px;
  --select-padding-block: 6px;
  --select-padding: 10px;
  --select-arrow-inset: 10px;
  position: relative;
  display: inline-grid;
  vertical-align: middle;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.select-control.is-compact {
  --select-height: 30px;
  --select-padding-block: 4px;
  --select-padding: 8px;
  --select-arrow-inset: 8px;
  font-size: 12px;
}

.select-control > .select-input {
  box-sizing: border-box;
  display: block;
  min-height: var(--select-height);
  padding: var(--select-padding-block) var(--select-padding);
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline-end: calc(var(--select-arrow-inset)  + 16px + 8px);
  line-height: 1.5;
}

.select-control > .select-arrow {
  position: absolute;
  color: var(--mute);
  pointer-events: none;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.select-control > .select-arrow:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--select-arrow-inset);
}

.select-control > .select-arrow:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--select-arrow-inset);
}

.select-control > .select-arrow:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: var(--select-arrow-inset);
}

.select-control > .select-arrow:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--select-arrow-inset);
}

.select-control > .select-arrow:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--select-arrow-inset);
}

.select-control > .select-arrow:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--select-arrow-inset);
}

.select-control > .select-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.select-control:has( > .select-input:disabled) {
  opacity: .55;
}

.select-control > .select-input:disabled {
  cursor: default;
}

.select-control.is-listbox > .select-input {
  appearance: auto;
  -webkit-appearance: auto;
  padding-inline-end: var(--select-padding);
}

/* web/drawing-preview.css */
.drawing-preview {
  margin: 4px 0 14px;
}

.drawing-preview-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.drawing-preview-tools small {
  color: var(--mute);
  margin-left: 4px;
}

.drawing-preview-tools > div {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.drawing-preview-tools button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 28px;
  min-height: 28px;
  padding: 2px 6px;
}

.drawing-preview-tools button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 6%, var(--field));
}

.drawing-preview-tools button:disabled {
  color: var(--mute);
  cursor: default;
  opacity: .55;
}

.drawing-preview-tools output {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  min-width: 42px;
}

.drawing-preview-area {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
  touch-action: none;
  cursor: grab;
  height: 360px;
}

.drawing-preview-area:active {
  cursor: grabbing;
}

.drawing-preview-area img {
  display: block;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.drawing-preview-message {
  position: absolute;
  display: flex;
  color: var(--mute);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  gap: 10px;
  margin: 0;
  padding: 20px;
  font-size: 13px;
  inset: 0;
}

.drawing-preview-message p {
  margin: 0;
}

.drawing-preview-message button {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drawing-preview-hint {
  color: var(--mute);
  margin: 6px 0 0;
  font-size: 12px;
}

/* node_modules/@xterm/xterm/css/xterm.css */
.xterm {
  cursor: text;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.xterm.focus, .xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  z-index: 5;
  top: 0;
}

.xterm .xterm-helper-textarea {
  position: absolute;
  opacity: 0;
  z-index: -5;
  white-space: nowrap;
  overflow: hidden;
  resize: none;
  border: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  top: 0;
  left: -9999em;
}

.xterm .composition-view {
  color: #fff;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  background: #000;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  background-color: #000;
  inset: 0;
}

.xterm .xterm-screen {
  position: relative;
}

.xterm .xterm-screen canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  line-height: normal;
  top: 0;
  left: -9999em;
}

.xterm.enable-mouse-events {
  cursor: default;
}

.xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.column-select.focus {
  cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug), .xterm .xterm-message {
  position: absolute;
  z-index: 10;
  color: #0000;
  pointer-events: none;
  inset: 0;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: #0000;
}

.xterm .xterm-accessibility-tree {
  user-select: text;
  white-space: pre;
  font-family: monospace;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: -moz-fit-content;
  width: fit-content;
}

.xterm .live-region {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  left: -9999px;
}

.xterm-dim {
  opacity: 1 !important;
}

.xterm-underline-1 {
  text-decoration: underline;
}

.xterm-underline-2 {
  text-decoration: double underline;
}

.xterm-underline-3 {
  text-decoration: wavy underline;
}

.xterm-underline-4 {
  text-decoration: dotted underline;
}

.xterm-underline-5 {
  text-decoration: dashed underline;
}

.xterm-overline {
  text-decoration: overline;
}

.xterm-overline.xterm-underline-1 {
  text-decoration: overline underline;
}

.xterm-overline.xterm-underline-2 {
  text-decoration: overline double underline;
}

.xterm-overline.xterm-underline-3 {
  text-decoration: overline wavy underline;
}

.xterm-overline.xterm-underline-4 {
  text-decoration: overline dotted underline;
}

.xterm-overline.xterm-underline-5 {
  text-decoration: overline dashed underline;
}

.xterm-strikethrough {
  text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
  z-index: 6;
  position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
  z-index: 7;
}

.xterm-decoration-overview-ruler {
  z-index: 8;
  position: absolute;
  pointer-events: none;
  top: 0;
  right: 0;
}

.xterm-decoration-top {
  z-index: 2;
  position: relative;
}

.xterm .xterm-scrollable-element > .scrollbar {
  cursor: default;
}

.xterm .xterm-scrollable-element > .scrollbar > .scra {
  cursor: pointer;
  font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
  opacity: 1;
  z-index: 11;
  background: none;
  transition: opacity .1s linear;
}

.xterm .xterm-scrollable-element > .invisible {
  opacity: 0;
  pointer-events: none;
}

.xterm .xterm-scrollable-element > .invisible.fade {
  transition: opacity .8s linear;
}

.xterm .xterm-scrollable-element > .shadow {
  position: absolute;
  display: none;
}

.xterm .xterm-scrollable-element > .shadow.top {
  display: block;
  box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
  width: 100%;
  height: 3px;
  top: 0;
  left: 3px;
}

.xterm .xterm-scrollable-element > .shadow.left {
  display: block;
  box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
  width: 3px;
  height: 100%;
  top: 3px;
  left: 0;
}

.xterm .xterm-scrollable-element > .shadow.top-left-corner {
  display: block;
  width: 3px;
  height: 3px;
  top: 0;
  left: 0;
}

.xterm .xterm-scrollable-element > .shadow.top.left {
  box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}

/* web/term.css */
.term-menu {
  flex-shrink: 0;
}

.term-toggle {
  white-space: nowrap;
  color: var(--mute);
  border-radius: var(--radius-btn);
  padding: 4px 10px;
  font-size: 14px;
}

.term-toggle:hover, .term-toggle[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}

.app > .bar > .actions {
  margin-left: auto;
}

.term-picker {
  position: fixed;
  z-index: 230;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--pop);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--pop-shadow);
  padding: 16px;
  font-size: 13px;
}

.term-picker p {
  color: var(--mute);
  line-height: 1.7;
}

.term-picker button {
  display: flex;
  text-align: left;
  border-radius: var(--radius-sm);
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 8px;
}

.term-picker button > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.term-picker button:hover {
  background: var(--hover);
}

.term-picker button:disabled {
  opacity: .5;
  cursor: default;
}

.term-picker small {
  color: var(--mute);
  flex-shrink: 0;
  margin-left: auto;
}

.term-picker-actions {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 8px;
  margin: 12px 0;
  padding-bottom: 12px;
}

.term-picker-actions button {
  color: var(--accent);
  width: auto;
}

@media (max-width: 380px) {
  .app > .bar {
    gap: 6px;
  }

  .app > .bar .log, .app > .bar .term-toggle {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
  }
}

.term-window {
  --term-background: var(--surface);
  position: fixed;
  display: flex;
  overflow: hidden;
  resize: both;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--pop-shadow);
  color: var(--ink);
  background: var(--term-background);
  flex-direction: column;
  width: min(760px, 100vw - 24px);
  min-width: 320px;
  max-width: calc(100vw - 16px);
  height: min(540px, 100dvh - 32px);
  min-height: 240px;
  max-height: calc(100dvh - 16px);
}

.term-window[data-tone="blue"], .term-tone-options [data-tone="blue"] {
  --term-tint: var(--cosmos-1);
}

.term-tone-options [data-tone="default"] {
  --term-tint: var(--surface);
}

.term-window[data-tone="cyan"], .term-tone-options [data-tone="cyan"] {
  --term-tint: var(--cosmos-2);
}

.term-window[data-tone="green"], .term-tone-options [data-tone="green"] {
  --term-tint: var(--cosmos-3);
}

.term-window[data-tone="forest"], .term-tone-options [data-tone="forest"] {
  --term-tint: var(--ok);
}

.term-window[data-tone="purple"], .term-tone-options [data-tone="purple"] {
  --term-tint: var(--cosmos-5);
}

.term-window[data-tone="pink"], .term-tone-options [data-tone="pink"] {
  --term-tint: var(--cosmos-6);
}

.term-window[data-tone="orange"], .term-tone-options [data-tone="orange"] {
  --term-tint: var(--cosmos-7);
}

.term-window[data-tone="amber"], .term-tone-options [data-tone="amber"] {
  --term-tint: var(--cosmos-4);
}

.term-window[data-tone="red"], .term-tone-options [data-tone="red"] {
  --term-tint: var(--fail);
}

.term-window[data-tone="gray"], .term-tone-options [data-tone="gray"] {
  --term-tint: var(--kind-await);
}

.term-window:not([data-tone="default"]) {
  --mute: var(--ink);
  --term-background: color-mix(in srgb, var(--term-tint) var(--term-strength, 40%), var(--surface));
}

.term-window > header {
  display: flex;
  border-bottom: 1px solid var(--line);
  cursor: move;
  touch-action: none;
  flex-shrink: 0;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  padding: 12px 16px;
}

.term-window > header strong {
  font-size: 14px;
}

.term-window > header span {
  color: var(--mute);
  margin-left: 12px;
  font-size: 12px;
}

.term-tools {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items:  center;
  gap: 6px 12px;
  padding: 6px 12px;
  font-size: 12px;
}

.term-tools > span {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

.term-font, .term-actions {
  display: flex;
  align-items:  center;
  gap: 2px;
}

.term-font {
  border-right: 1px solid var(--line);
  padding-right: 10px;
}

.term-font output {
  text-align: center;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 42px;
  font-size: 11px;
}

.term-tools .icon-btn {
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  padding: 6px;
}

.term-tools .icon-btn:hover, .term-tools .icon-btn[aria-pressed="true"] {
  background: var(--hover);
  color: var(--ink);
}

.term-tools .icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.term-tools button:disabled {
  opacity: .45;
  cursor: default;
}

.term-input-prompt {
  position: absolute;
  z-index: 3;
  display: grid;
  overflow: auto;
  background: var(--pop);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--pop-shadow);
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.term-input-prompt > label {
  font-size: 12px;
  font-weight: 600;
}

.term-input-entry {
  display: flex;
  align-items:  center;
  gap: 4px;
}

.term-input-entry input {
  font: inherit;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
}

.term-input-entry input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.term-input-prompt small {
  color: var(--mute);
  font-size: 11px;
  line-height: 1.6;
}

.term-input-prompt p {
  color: var(--fail);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.term-color-prompt strong {
  font-size: 12px;
}

.term-color-prompt {
  gap: 6px;
  padding: 8px;
}

.term-color-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.term-color-head .icon-btn {
  width: 22px;
  height: 22px;
  padding: 3px;
}

.term-color-strength {
  display: flex;
  align-items:  center;
  gap: 6px;
  font-size: 11px;
}

.term-color-strength input {
  accent-color: var(--accent);
  flex: 1;
  width: 0;
  min-width: 0;
  height: 16px;
  margin: 0;
}

.term-color-strength output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  min-width: 28px;
}

.term-tone-options {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
}

.term-tone-options button {
  display: grid;
  border-radius: var(--radius-sm);
  place-items:  center;
  height: 28px;
  padding: 3px;
}

.term-tone-options button:hover, .term-tone-options button[aria-pressed="true"] {
  background: var(--hover);
}

.term-tone-options button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.term-tone-swatch {
  display: grid;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--term-tint, var(--surface)) 60%, var(--surface));
  place-items:  center;
  width: 20px;
  height: 20px;
}

.term-screen {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 12px;
}

.term-screen[hidden] {
  display: none;
}

.term-screen .xterm-viewport {
  background: var(--term-background);
  overflow-y: hidden !important;
}

.term-screen .xterm-screen {
  margin: 0;
}

.term-window > footer {
  color: var(--mute);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  padding: 6px 16px;
  font-size: 11px;
}

.term-pin {
  display: flex;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items:  end;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
}

.term-pin label {
  display: grid;
  gap: 4px;
}

.term-pin input {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  max-width: 200px;
  padding: 6px 8px;
}

.term-pin button {
  background: var(--btn);
  color: var(--on-btn);
  border-radius: var(--radius-btn);
  padding: 6px 12px;
}

.term-pin small {
  color: var(--mute);
}

.term-error {
  color: var(--fail);
  background: var(--term-background);
  flex-shrink: 0;
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
}

.term-history {
  overflow: auto;
  font: 12px / 1.5 var(--mono);
  white-space: pre;
  flex: 1;
  margin: 0;
  padding: 12px 16px;
}

.term-tether {
  position: fixed;
  z-index: 209;
  pointer-events: none;
  width: 100%;
  height: 100%;
  inset: 0;
}

.term-tether path {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.5;
}

.term-manage-shade {
  position: fixed;
  z-index: 240;
  display: flex;
  background: var(--scrim);
  justify-content: center;
  align-items:  center;
  padding: 24px;
  inset: 0;
}

.term-manage {
  display: flex;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: calc(100dvh - 48px);
}

.term-manage > header {
  display: flex;
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items:  start;
  gap: 20px;
  padding: 20px 24px;
}

.term-manage h2 {
  margin: 0;
  font-size: 18px;
}

.term-manage header p {
  color: var(--mute);
  margin: 4px 0 0;
  font-size: 13px;
}

.term-manage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
  overflow: auto;
  min-height: 0;
}

.term-catalog {
  border-right: 1px solid var(--line);
  overflow: auto;
  min-width: 0;
  padding: 16px 24px;
}

.term-catalog nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  font-size: 12px;
}

.term-catalog nav button {
  border-radius: var(--radius-btn);
  padding: 5px 8px;
}

.term-catalog nav .is-on {
  background: var(--hover);
  font-weight: 700;
}

.term-catalog ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.term-catalog li {
  border-top: 1px solid var(--line);
  padding: 15px 0;
}

.term-session-title {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
}

.term-session-title strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.term-session-title span {
  color: var(--mute);
  margin-left: auto;
  font-size: 11px;
}

.term-session-title [data-state="running"] {
  color: var(--ok);
}

.term-session-title [data-state="failed"], .term-session-title [data-state="missing"] {
  color: var(--fail);
}

.term-catalog li p {
  color: var(--mute);
  overflow-wrap: anywhere;
  margin: 3px 0 8px;
  font-size: 12px;
}

.term-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
}

.term-session-actions button {
  color: var(--accent);
  padding: 3px 0;
}

.term-catalog h3 {
  color: var(--mute);
  margin: 24px 0 8px;
  font-size: 12px;
}

.term-create {
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  min-width: 0;
  margin: 0;
  padding: 20px 24px 24px;
}

.term-create h3 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 15px;
}

.term-new {
  color: var(--accent);
  align-self:  flex-start;
  padding: 3px 0;
  font-size: 12px;
}

.term-create label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.term-create input, .term-create select {
  font: inherit;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--field);
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
}

.term-create p, .term-manage-note {
  color: var(--mute);
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
}

.term-create .term-create-submit {
  border-radius: var(--radius-btn);
  background: var(--btn);
  color: var(--on-btn);
  padding: 9px 14px;
  font-size: 13px;
}

.term-create small {
  color: var(--mute);
  font-size: 11px;
}

.term-create .term-manage-error {
  color: var(--fail);
}

.term-manage button:disabled {
  opacity: .5;
  cursor: default;
}

@media (max-width: 760px) {
  .term-manage-shade {
    padding: 8px;
  }

  .term-manage {
    max-height: calc(100dvh - 16px);
  }

  .term-manage-grid {
    grid-template-columns: 1fr;
  }

  .term-catalog {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .term-create {
    overflow: visible;
  }

  .term-manage > header {
    padding: 16px;
  }

  .term-window {
    resize: none;
    min-width: 0;
    bottom: 8px;
    width: calc(100vw - 16px) !important;
    height: 70dvh !important;
    top: auto !important;
    left: 8px !important;
  }

  .term-tether {
    display: none;
  }

  .term-window > header {
    cursor: default;
  }

  .term-window > header span {
    display: block;
    margin-left: 0;
  }
}