:root {
  color-scheme: light;
  --bg: #e2e2e2;
  --card: #f3f3f3;
  --ink: #1b1d22;
  --muted: #5e6573;
  --line: #e3e5ea;
  --accent: #2c5dcd;
  --accent-ink: #ffffff;
  --danger: #a33b3b;
  --side: 244px;
  --dock: 12px;
  --canvas: #f8f8f8;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181818;
  --card: #141414;
  --ink: #f3f3f3;
  --muted: #8e8e8e;
  --line: #2c2c2c;
  --accent: #f3f3f3;
  --accent-ink: #111111;
  --danger: #ffb4b4;
  --canvas: #101010;
}

* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
[hidden] { display: none !important; }
html, body { height: 100%; background: var(--canvas); }
body {
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.gate, .modal {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
#lock {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
}
.modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  overflow: auto;
  background: rgb(0 0 0 / 38%);
}
.born {
  position: fixed;
  z-index: 40;
  top: var(--dock);
  right: var(--dock);
  bottom: var(--dock);
  left: calc(var(--side) + (var(--dock) * 2));
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background: var(--canvas);
}
@media (max-width: 699px) {
  .born {
    left: var(--dock);
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
}
.born__box {
  display: grid;
  justify-items: center;
  width: min(440px, 100%);
  text-align: center;
}
.born.is-mods .born__box { width: min(520px, 100%); }
.born__step { width: 100%; }
.born__mods {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
}
.born__mod {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
}
.born__mod svg { flex: none; width: 22px; height: 22px; }
.born__mod span { display: grid; gap: 4px; min-width: 0; }
.born__mod b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.born__mod small { color: var(--muted); font-size: 14px; font-weight: 450; line-height: 1.35; }
.born__mod i {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent);
}
.born__mod.is-on {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent);
}
.born__mod.is-on i { background: var(--ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .born__mod:hover { background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
}
.born__mark {
  width: 40px;
  height: 40px;
  margin: 0 0 8px;
}
:root:not([data-theme="dark"]) .born__mark { filter: invert(1); }
.born__ask {
  margin: 0;
  font-size: 28px;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.born__note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
#projectBornName {
  width: 100%;
  height: 48px;
  margin-top: 22px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
#projectBornName:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, transparent);
}
#projectBornName::placeholder { color: var(--muted); }
:root[data-theme="dark"] #projectBornName,
:root[data-theme="dark"] #projectBornName:focus {
  background: transparent;
  border-color: transparent;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}
:root[data-theme="dark"] #projectBornName:focus { box-shadow: inset 0 0 0 1px #6a6a6a; }
.born__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
.born__back,
.born__split .born__next {
  height: 46px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
}
.born__back {
  border: 0;
  background: #e2e2e2;
  color: #111111;
  cursor: pointer;
}
:root[data-theme="dark"] .born__back {
  background: #2c2c2c;
  color: #f5f5f5;
}
.born__next:disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
input.code {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .32em;
  text-align: center;
  padding-left: calc(12px + .32em);
}
#lock .lock-ask { position: relative; width: min(280px, 100%); padding: 20px; border: 0; }
#lock input {
  height: 42px;
  text-align: center;
  letter-spacing: .18em;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 12px;
}
:root:not([data-theme="dark"]) #lock {
  background: var(--canvas);
}
:root:not([data-theme="dark"]) #lock .lock-ask {
  background: #fcfcfc;
}
html[data-desk="1"] #gate { display: none; }
#gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  place-items: stretch;
  padding: 0;
  overflow: auto;
  background: #101010;
  color: #f3f3f3;
}
html[data-join="1"] #gate .gate__form,
html[data-join="1"] #gate .gate__brand,
html[data-join="1"] #gate .gate__mark { visibility: hidden; }
#gate .gate__pane {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 96px 48px 48px;
}
#gate .gate__brand {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f3f3f3;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
#gate .gate__brand img {
  width: 28px;
  height: 28px;
  display: block;
}
#gate .gate__form {
  width: min(640px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
}
#gate .gate__lead {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(640px, 100%);
  margin: 0 0 16px;
  text-align: center;
}
#gate:has(#gateStart[hidden]) .gate__lead { display: none; }
#gate .gate__form h1.gate__hello {
  width: auto;
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 60px;
  font-weight: 520;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #f6f4ef;
}
html[data-os="mac"] #gate .gate__form h1.gate__hello {
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
#gate .gate__lead p {
  margin: 0;
  max-width: 36em;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 450;
  font-synthesis: none;
  color: #f4f2ee;
  line-height: 1.35;
}
#gate .gate__form h1 {
  width: min(440px, 100%);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
#gate .gate__form .muted { width: min(440px, 100%); color: #8e8e8e; font-size: 15px; }
#gateStart > #gateGoogle,
#gateStart > #gateApple,
#gateStart > #gateOr,
#gateStart > #gateMailPane,
#gateStart > #gateBtn,
#gateStart > #gateLegal { transition: opacity .24s ease; }
#gateStart.is-code { position: relative; }
#gateStart.is-code > #gateGoogle,
#gateStart.is-code > #gateApple,
#gateStart.is-code > #gateOr,
#gateStart.is-code > #gateMailPane,
#gateStart.is-code > #gateBtn,
#gateStart.is-code > #gateLegal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
#gateStart.is-code > #gateCodePane {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 16px 16px 14px;
  animation: gate-code .36s cubic-bezier(.16, 1, .3, 1) both;
}
#gate #gateCodeHint {
  flex: none;
  margin: 2px 0 0;
  color: #c8c8c8;
  text-align: center;
}
#gate #gateCodeMail { color: #9a9a9a; }
#gate #gateCodeMail:hover,
#gate #gateCodeMail:focus,
#gate #gateCodeMail:focus-visible { color: #f5f5f5; }
#gate .gate__code {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}
#gate .gate__link {
  align-self: center;
  width: 100%;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  color: #c8c8c8;
  font: inherit;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: color .2s ease;
}
#gate .gate__link:hover,
#gate .gate__link:focus,
#gate .gate__link:focus-visible {
  color: #f5f5f5;
  outline: none;
  box-shadow: none;
}
#gate .gate__link.is-wait,
#gate .gate__link:disabled,
#gate .gate__link:disabled:hover,
#gate .gate__link:disabled:focus {
  opacity: 1;
  color: #6f6f6f;
  cursor: default;
  outline: none;
  box-shadow: none;
}
@keyframes gate-code {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #gateStart > #gateGoogle,
  #gateStart > #gateApple,
  #gateStart > #gateOr,
  #gateStart > #gateMailPane,
  #gateStart > #gateBtn,
  #gateStart > #gateLegal,
  #gateStart.is-code > #gateCodePane { transition: none; animation: none; }
}
#gate #gateJoin { box-shadow: none; }
#gate .gate__split:has(.gate__half[hidden]) { grid-template-columns: 1fr; }
#gate .gate__box {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  padding: 18px 16px 14px;
  border-radius: 22px;
  background: #161616;
  box-shadow: inset 0 0 0 1px #3a3a3a;
}
#gate #gateMailPane,
#gate #gatePassPane,
#gate #gateCodePane { display: grid; gap: 8px; }
#gate #gateCode { letter-spacing: normal; text-align: left; font-size: 15px; font-weight: 450; }
#gate .gate__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#gate .gate__half {
  height: 46px;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: #2c2c2c;
  color: #f5f5f5;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background .16s ease;
}
#gate #gatePassStep,
#gate #gateRegStep { display: grid; gap: 12px; }
#gate .field span { color: #8e8e8e; }
#gate input {
  height: 48px;
  padding: 0 16px;
  background: transparent;
  border-color: transparent;
  border-radius: 14px;
  color: #f3f3f3;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}
#gate input:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #6a6a6a;
}
#gate .err { color: #ffb4b4; }
#gate .gate__soc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: #2c2c2c;
  color: #f5f5f5;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}
#gate .gate__soc img { width: 18px; height: 18px; flex: none; display: block; }
#gate .gate__soc svg { width: 17px; height: 17px; flex: none; display: block; }
#gate .gate__or {
  margin: 2px 0 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 16px;
}
#gate .gate__mail { display: grid; gap: 8px; }
#gate input::placeholder { color: #9a9a9a; }
#gate input.is-bad,
#gate input.is-bad:focus { box-shadow: inset 0 0 0 1.5px #e5484d; }
#gate .gate__mailerr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #e5484d;
  font-size: 13px;
  line-height: 1.3;
}
#gate .gate__mailerr svg { flex: none; }
#gate .gate__legal {
  margin: -2px 0 0;
  text-align: center;
  color: #8d8d8d;
  font-size: 12px;
  line-height: 1.4;
}
#gate .gate__legal button {
  border: 0;
  padding: 0;
  background: none;
  color: #7eb0ff;
  font: inherit;
  cursor: pointer;
}
#gate .gate__app {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: #2a2a2a;
  color: #f3f3f3;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#gate .gate__app svg { display: block; flex: none; }
#gate .gate__app [data-for] { display: none; }
html[data-app="windows"] #gate .gate__app [data-for="windows"],
html:not([data-app]) #gate .gate__app [data-for="windows"],
html[data-app="android"] #gate .gate__app [data-for="android"],
html[data-app="ios"] #gate .gate__app [data-for="ios"],
html[data-app="ios"] #gate .gate__app [data-for="apple"],
html[data-app="mac"] #gate .gate__app [data-for="mac"],
html[data-app="mac"] #gate .gate__app [data-for="apple"] { display: block; }
#gate .gate__actions { display: flex; gap: 8px; }
#gate .gate__actions .btn { flex: 1; border-radius: 12px; }
#gate .btn {
  height: 46px;
  min-height: 46px;
  padding: 0 16px;
  line-height: 1;
  background: #ffffff;
  color: #111111;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 550;
}
#gate .btn--ghost {
  background: transparent;
  color: #f3f3f3;
  border-color: #3a3a3a;
}
#gate .gate__soc {
  transition: background .16s ease;
}
#gate .btn:not(.btn--ghost) {
  box-shadow: inset 0 0 0 1px transparent;
  transition: background .16s ease, box-shadow .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  #gate .gate__soc:hover,
  #gate .gate__soc:focus,
  #gate .gate__soc:focus-visible {
    background: #3a3a3a;
    border: 0;
    outline: none;
    box-shadow: none;
    filter: none;
  }
  #gate .gate__half:hover,
  #gate .gate__half:focus,
  #gate .gate__half:focus-visible {
    background: #3a3a3a;
    border: 0;
    outline: none;
    box-shadow: none;
    filter: none;
  }
  #gate .btn:not(.btn--ghost):hover {
    background: #f2f2f2;
    color: #111111;
    box-shadow: inset 0 0 0 1px #c8c8c8;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #gate .gate__soc,
  #gate .gate__half,
  #gate .btn:not(.btn--ghost) { transition: none; }
}
#gate .gate__ask {
  margin: 0;
  font-size: 28px;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
#gate .gate__note {
  margin: 0 0 4px;
  color: #9a9a9a;
  font-size: 15px;
  line-height: 1.4;
}
#gate .gate__mods { display: grid; gap: 8px; }
#gate .gate__mod {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #2c2c2c;
  color: #f5f5f5;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
}
#gate .gate__mod svg { flex: none; }
#gate .gate__mod i {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px #6a6a6a;
}
#gate .gate__mod.is-on {
  background: #343434;
  box-shadow: inset 0 0 0 1px #6e6e6e;
}
#gate .gate__mod.is-on i { background: #f3f3f3; box-shadow: none; }
#gate.is-mods #gateJoin {
  width: min(520px, 100%);
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#gate.is-mods .gate__mods { gap: 12px; }
#gate.is-mods .gate__mod {
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px 18px;
  border-radius: 18px;
  background: #161616;
  box-shadow: inset 0 0 0 1px #3a3a3a;
}
#gate.is-mods .gate__mod svg { width: 22px; height: 22px; }
#gate.is-mods .gate__mod-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
#gate.is-mods .gate__mod-copy b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#gate.is-mods .gate__mod-copy small {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.35;
}
#gate.is-mods .gate__mod.is-on,
#gate.is-mods .gate__mod.is-on:hover {
  background: #222222;
  box-shadow: inset 0 0 0 1px #3a3a3a;
}
@media (hover: hover) and (pointer: fine) {
  #gate .gate__mod:hover { background: #3a3a3a; }
  #gate .gate__mod.is-on:hover { background: #3e3e3e; }
  #gate.is-mods .gate__mod:hover { background: #1c1c1c; box-shadow: inset 0 0 0 1px #3a3a3a; }
  #gate.is-mods .gate__mod.is-on:hover { background: #262626; box-shadow: inset 0 0 0 1px #3a3a3a; }
}
#gate .gate__switch { color: #8e8e8e; }
#gate .gate__switch:hover { color: #f3f3f3; }
#gate .gate__pane { z-index: 2; }
#gate .gate__mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  z-index: 1;
}
#gate .gate__film {
  position: absolute;
  top: 50%;
  right: 188px;
  height: min(86dvh, calc(100% - 48px));
  aspect-ratio: 831 / 1024;
  transform: translateY(-50%);
  opacity: 1;
}
#gate .gate__film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  pointer-events: none;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1441px) {
  #gate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
  }
  #gate .gate__brand {
    position: fixed;
    top: 28px;
    left: 60px;
  }
  #gate .gate__pane {
    flex: 0 1 auto;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  #gate .gate__mark {
    flex: none;
    display: flex;
    align-items: center;
    min-height: 0;
  }
  #gate .gate__film {
    position: relative;
    top: auto;
    right: auto;
    height: min(86dvh, calc(100dvh - 48px));
    transform: none;
  }
}
@media (max-width: 1440px) {
  html:has(#gate:not([hidden])),
  html:has(#gate:not([hidden])) body {
    height: auto;
    min-height: 100%;
  }
  #gate {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 100svh;
    min-height: 100lvh;
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }
  #gate .gate__mark { display: none; }
  #gate input,
  #gate #gateCode { font-size: 16px; }
}
@media (max-width: 1440px) {
  #gate .gate__pane {
    min-height: 100svh;
    min-height: 100lvh;
  }
}
@media (max-width: 860px) {
  #gate .gate__pane { padding: 88px 20px 32px; }
  #gate .gate__brand { left: 20px; }
  #gate .gate__form h1.gate__hello { font-size: 40px; }
  #gate .gate__lead p { font-size: 16px; }
  #gate .gate__form h1 { font-size: 32px; }
  #gate input,
  #gate #gateCode { font-size: 16px; }
}
#gate.is-ask,
#gate.is-login,
#gate.is-mods { grid-template-columns: minmax(0, 1fr); }
#gate.is-ask .gate__mark,
#gate.is-login .gate__mark,
#gate.is-mods .gate__mark,
#gate.is-ask .gate__brand,
#gate.is-login .gate__brand,
#gate.is-mods .gate__brand { display: none; }
#gate.is-ask #gateJoin,
#gate.is-login #gateJoin {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
#gate.is-ask #gateJoinName,
#gate.is-login #gateJoinLogin,
#gate.is-login #gateJoinSecret,
#gate.is-mods #gateJoinMods {
  display: grid;
  justify-items: center;
  width: 100%;
  text-align: center;
}
#gate.is-ask .gate__askmark,
#gate.is-login .gate__askmark,
#gate.is-mods .gate__askmark { margin-right: auto; margin-left: auto; }
#gate.is-ask #gateJoinName .gate__ask,
#gate.is-ask #gateJoinName .gate__note,
#gate.is-login #gateJoinLogin .gate__ask,
#gate.is-login #gateJoinLogin .gate__note,
#gate.is-login #gateJoinSecret .gate__ask,
#gate.is-mods #gateJoinMods .gate__ask,
#gate.is-mods #gateJoinMods .gate__note { text-align: center; }
#gate.is-ask #gateJoinName .gate__note,
#gate.is-login #gateJoinLogin .gate__note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}
#gate.is-ask #gateJoinName input,
#gate.is-login #gateJoinLogin input,
#gate.is-login #gateJoinSecret input { margin-top: 22px; justify-self: stretch; width: 100%; text-align: left; }
#gate.is-login #gateJoinLogin input::placeholder,
#gate.is-login #gateJoinSecret input::placeholder { text-align: left; }
#gate.is-ask #gateJoinName .gate__name {
  position: relative;
  justify-self: stretch;
  width: 100%;
  margin-top: 22px;
}
#gate.is-ask #gateJoinName .gate__name input { margin-top: 0; padding-right: 52px; }
#gate.is-login #gateJoinLogin .gate__login {
  position: relative;
  justify-self: stretch;
  width: 100%;
  margin-top: 22px;
}
#gate.is-login #gateJoinLogin .gate__login input { margin-top: 0; padding-right: 46px; }
#gate.is-login #gateJoinSecret .gate__secret {
  position: relative;
  justify-self: stretch;
  width: 100%;
  margin-top: 22px;
}
#gate.is-login #gateJoinSecret .gate__secret input { margin-top: 0; padding-right: 46px; }
#gate .gate__peek {
  position: absolute;
  top: 0;
  right: 4px;
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  color: #9a9a9a;
  cursor: pointer;
}
#gate .gate__peek svg { display: block; }
#gate .gate__peek .gate__peek-open { display: none; }
#gate .gate__peek.is-on .gate__peek-shut { display: none; }
#gate .gate__peek.is-on .gate__peek-open { display: block; }
#gate .gate__peek:hover,
#gate .gate__peek:focus,
#gate .gate__peek:focus-visible,
#gate .gate__peek:active {
  color: #9a9a9a;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#gate .gate__fill {
  position: absolute;
  top: 0;
  right: 4px;
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  color: #9a9a9a;
  cursor: pointer;
}
#gate .gate__fill svg { display: block; }
#gate .gate__fill:hover,
#gate .gate__fill:focus,
#gate .gate__fill:focus-visible,
#gate .gate__fill:active {
  color: #9a9a9a;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#gate .gate__face {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px #4a4a4a;
  color: #c8c8c8;
  cursor: pointer;
}
#gate .gate__face svg { display: block; }
#gate .gate__face img {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}
#gate .gate__face.is-on svg { display: none; }
#gate .gate__face.is-on img { display: block; }
#gate.is-ask #gateJoinName .gate__name:focus-within .gate__face,
#gate.is-ask #gateJoinName .gate__name:focus-within .gate__face img {
  box-shadow: inset 0 0 0 1px #6a6a6a;
}
#gate .gate__face:hover,
#gate .gate__face:focus,
#gate .gate__face:focus-visible,
#gate .gate__face:active {
  color: #c8c8c8;
  background: transparent;
  outline: none;
  box-shadow: inset 0 0 0 1px #4a4a4a;
  -webkit-tap-highlight-color: transparent;
}
#gate .gate__face-file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
}
#gate .gate__face:hover,
#gate .gate__face:focus,
#gate .gate__face:focus-visible,
#gate .gate__face:active {
  color: #c8c8c8;
  background: transparent;
  outline: none;
  box-shadow: inset 0 0 0 1px #4a4a4a;
  -webkit-tap-highlight-color: transparent;
}
#gate.is-mods #gateJoinMods .gate__note { margin-bottom: 0; }
#gate.is-mods .gate__mods { justify-self: stretch; width: 100%; margin-top: 22px; }
#gate.is-ready { grid-template-columns: minmax(0, 1fr); }
#gate.is-ready .gate__mark,
#gate.is-ready .gate__brand,
#gate.is-ready .gate__app { display: none; }
#gate.is-ready .gate__form { width: min(560px, 100%); }
#gate.is-ready #gateJoin {
  width: min(520px, 100%);
  padding: 0;
  background: transparent;
  box-shadow: none;
  justify-items: center;
  text-align: center;
}
#gate.is-ready #gateJoinDone {
  display: grid;
  justify-items: center;
  gap: 14px;
}
#gate.is-ready .gate__ready-mark {
  width: 84px;
  height: 84px;
  margin: 0 0 10px;
  animation: gate-mark 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#gate.is-ready .gate__ask {
  max-width: 11em;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 520;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: center;
  color: #f6f4ef;
  animation: gate-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
#gate.is-ready .gate__note {
  margin: 0;
  max-width: 22em;
  color: #c8c4bc;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 450;
  font-synthesis: none;
  line-height: 1.35;
  animation: gate-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}
#gate.is-ready .gate__split { display: none; }
#gate.is-ready.is-ready-hold .gate__split { display: grid; }
#gate.is-leave {
  animation: gate-leave 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes gate-mark {
  from { opacity: 0; transform: scale(0.9); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes gate-line {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes gate-leave {
  to { opacity: 0; }
}
@media (max-width: 860px) {
  #gate.is-ready .gate__ask { font-size: 36px; }
  #gate.is-ready .gate__note { font-size: 18px; }
}
#gate .gate__askmark {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 0 8px;
}
:root:not([data-theme="dark"]) #lock input,
:root:not([data-theme="dark"]) #lock input:focus {
  background: #ffffff;
  border-color: transparent;
  outline: none;
}
.pin {
  -webkit-text-security: disc;
  text-security: disc;
}
.pin.is-shown {
  -webkit-text-security: none;
  text-security: none;
}
.lock-go {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.card--gate { width: min(420px, 100%); display: grid; gap: 12px; }
.card--langs {
  width: min(520px, 100%);
  max-height: min(520px, calc(100dvh - 48px));
  padding: 14px;
  gap: 10px;
  background: #eeeeee;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.card--langs > h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.card--langs .modal__x { top: 8px; right: 8px; width: 28px; height: 28px; }
.lang-find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.lang-find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.lang-find svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.lang-find input,
.lang-find input:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.lang-find input::-webkit-search-cancel-button,
.lang-find input::-webkit-search-decoration { display: none; }
.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: auto;
  align-content: start;
  min-height: 0;
}
.lang-opt {
  display: grid;
  gap: 1px;
  justify-items: start;
  min-height: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lang-opt b { font-size: 14px; font-weight: 650; }
.lang-opt span { color: var(--muted); font-size: 12px; }
.lang-opt.is-on { background: color-mix(in srgb, var(--ink) 7%, #ffffff); }
.lang-empty { grid-column: 1 / -1; margin: 8px 4px; }
:root[data-theme="dark"] .card--langs {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.card--gate.card--keys {
  width: min(680px, 100%);
  max-height: min(560px, calc(100dvh - 48px));
  padding: 14px;
  gap: 12px;
  background: #eeeeee;
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .card--gate.card--keys {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.card--keys > h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.keys { display: grid; gap: 16px; align-content: start; overflow: auto; max-height: min(420px, calc(100dvh - 180px)); }
.keys h3 { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.keys__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.keys__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.keys__row > span:first-child { min-width: 0; }
.keys__bind { display: inline-flex; gap: 4px; flex: none; }
.keys kbd {
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  font: 550 12px/1.3 inherit;
  text-align: center;
}
:root[data-theme="dark"] .keys kbd {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
@media (max-width: 699px) {
  .keys__grid { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .lang-find {
  background: #242424;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .lang-find input,
:root[data-theme="dark"] .lang-find input:focus {
  background: transparent;
  border: 0;
  color: #f3f3f3;
  box-shadow: none;
}
:root[data-theme="dark"] .lang-find:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}
:root[data-theme="dark"] .lang-opt.is-on,
:root[data-theme="dark"] .lang-opt:hover { background: #242424; }
@media (max-width: 519px) {
  .lang-grid { grid-template-columns: 1fr 1fr; }
}
@media (hover: hover) {
  .lang-opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.gate__switch {
  justify-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.gate__switch:hover { color: var(--ink); }
.set-form input[readonly] { color: var(--muted); }
.card--gate.seek {
  width: min(520px, 100%);
  align-content: start;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .card--gate.seek {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.seek__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: #e2e2e2;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .seek__field {
  background: #181818;
  color: #8e8e8e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.seek__field svg { flex: none; display: block; }
.seek__field input {
  width: auto;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.seek__field input:focus { border: 0; outline: none; }
.seek__field input::-webkit-search-cancel-button,
.seek__field input::-webkit-search-decoration { display: none; }
:root[data-theme="dark"] .seek__field input { background: transparent; border: 0; color: #f3f3f3; }
.seek__field { padding-right: 6px; }
.seek__cat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  margin: 0;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 9px;
  background: #eeeeee;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.seek__cat svg { display: block; color: var(--muted); transition: transform .12s ease; }
.seek__cat.is-on svg { transform: rotate(180deg); }
.seek__cat:hover,
.seek__cat.is-on { background: #e6e6e6; }
:root[data-theme="dark"] .seek__cat {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
:root[data-theme="dark"] .seek__cat:hover,
:root[data-theme="dark"] .seek__cat.is-on { background: #303030; }
.ctx button.is-on { background: #ececec; }
:root[data-theme="dark"] .ctx button.is-on { background: #3a3a3a; }
.seek__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seek__chips button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: #eeeeee;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.seek__chips button.is-on { background: color-mix(in srgb, var(--ink) 10%, #eeeeee); }
:root[data-theme="dark"] .seek__chips button {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .seek__chips button.is-on { background: #242424; }
.seek__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.seek__pill {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.seek__pill.is-on { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .seek__pill.is-on { background: #2a2a2a; color: #f3f3f3; }
.seek__list {
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: min(420px, calc(100dvh - 280px));
  margin: 0;
  padding: 0;
  overflow: auto;
}
.seek__empty { margin: 0; padding: 8px 4px 4px; color: var(--muted); }
.seek__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.seek__row.is-on,
.seek__row:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
:root[data-theme="dark"] .seek__row.is-on,
:root[data-theme="dark"] .seek__row:hover { background: #2a2a2a; }
.seek__ico { display: grid; place-items: center; color: var(--muted); }
.seek__ico svg, .seek__ico img { display: block; }
.seek__main { min-width: 0; display: grid; }
.seek__main b,
.seek__main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seek__main b { font-weight: 650; }
.seek__main span, .seek__kind { color: var(--muted); font-size: 12px; }
.seek__kind { white-space: nowrap; }
.seek__x {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.seek__x svg { display: block; }
.seek__x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.modal .card { border: 0; }
.modal form.is-busy > .muted,
.modal form.is-busy > .field,
.modal form.is-busy > .rule-box,
.modal form.is-busy > .row,
.modal form.is-busy > .modal__pick,
.modal form.is-busy > .modal__chosen { display: none; }
.modal__pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal__service {
  border: 0;
  border-radius: 14px;
  min-height: 124px;
  padding: 18px 12px;
  background: var(--bg);
  color: inherit;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  cursor: pointer;
}
.modal__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  font-weight: 650;
}
.modal__service b { font-weight: 650; text-align: center; }
.modal__chosen {
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  cursor: pointer;
}
.modal__chosen b { color: var(--ink); font-weight: 650; }
:root[data-theme="dark"] .modal__service { background: #181818; }
:root[data-theme="dark"] .modal__mark { background: #2a2a2a; }
@media (hover: hover) and (pointer: fine) {
  .modal__service:hover { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
  :root[data-theme="dark"] .modal__service:hover { background: #222; }
}
.modal__wait {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 0 8px;
}
.modal__wait p { margin: 0; color: var(--muted); }
.modal__spin {
  width: 28px;
  height: 28px;
  border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: modal-spin .7s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .modal__spin { animation: none; border-top-color: var(--ink); }
}
.card h2 { font-size: 18px; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.muted { color: var(--muted); }
.err { color: var(--danger); }

.field__icon { position: relative; z-index: 2; }
.field__icon input { padding-right: 44px; }
.field__mark {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.field__mark svg { display: block; }
.field__icons {
  position: absolute;
  z-index: 3;
  right: 0;
  top: calc(100% + 6px);
  width: min(280px, 100%);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.field { display: grid; gap: 6px; }
.field span { color: var(--muted); font-size: 13px; }
.field textarea { min-height: 170px; max-height: 45vh; line-height: 1.5; }
.field .field__hint { justify-self: end; font-size: 12px; }
.skills-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.skills-row:last-of-type { border-bottom: 0; }
.rule-box { display: grid; gap: 2px; }
.rule-box textarea { min-height: 88px; max-height: 220px; resize: vertical; line-height: 1.45; }
.rule-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.rule-switch i {
  position: relative;
  flex: none;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: #d5d5d5;
}
.rule-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}
.rule-switch.is-on i { background: var(--ink); }
.rule-switch.is-on i::after { left: 16px; }
:root[data-theme="dark"] .rule-switch i { background: #3a3a3a; }
:root[data-theme="dark"] .rule-switch.is-on i { background: #f3f3f3; }
:root[data-theme="dark"] .rule-switch.is-on i::after { background: #181818; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field__icon input { padding-right: 44px; }
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.task-input):not(.rem-draft__title):not([data-seek]):not(.aim__q):not(.lang-find__q):not(.room-find__q):not(.market__q):not(.set-find__q),
:root[data-theme="dark"] textarea {
  background: #242424;
  border-color: #3a3a3a;
  color: #f3f3f3;
}
:root[data-theme="dark"] #lock input,
:root[data-theme="dark"] #lock input:focus {
  border-color: transparent;
  outline: none;
}
:root[data-theme="dark"] .btn {
  background: #ffffff;
  color: #111111;
}
:root[data-theme="dark"] .btn--ghost {
  background: transparent;
  color: #f3f3f3;
  border-color: #3a3a3a;
}
textarea { resize: vertical; }

.btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.app {
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--side) 1fr;
  gap: var(--dock);
  padding: var(--dock);
  background: var(--canvas);
}
.app.is-rise { animation: app-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes app-rise {
  from { transform: translateY(12px); }
  to { transform: none; }
}
.app:has(.room),
.app:has(.studio),
.app:has(.oh) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-right: 0;
}
.work:has(.room),
.work:has(.oh) { height: 100%; min-height: 0; overflow: hidden; }
.side {
  position: sticky;
  top: var(--dock);
  align-self: start;
  height: calc(100dvh - (var(--dock) * 2));
  overflow: hidden;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dock);
  background: transparent;
}
.side__isle {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  padding: 18px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
}
.side__back {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  padding: 6px;
  background: var(--card);
}
.app.is-side-fold { --side: 48px; }
.app.is-side-fold .side { overflow: visible; }
.app.is-side-fold .side__isle,
.app.is-side-fold .side__back { border-radius: 28px; }
.app.is-side-fold .side__isle { padding: 10px 4px 6px; }
.app.is-side-fold .side__label,
.app.is-side-fold .nav > span,
.app.is-side-fold .nav__event,
.app.is-side-fold .nav__age,
.app.is-side-fold .mail__count,
.app.is-side-fold .mail-quota,
.app.is-side-fold .side-pass__none,
.app.is-side-fold .side .side-pass__create span { display: none; }
@media (min-width: 700px) {
  .app.is-side-fold #sideMain > .side__label {
    display: block;
    height: 18px;
    margin: 10px 0 6px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    white-space: nowrap;
    user-select: none;
  }
  .app.is-side-fold #sideMain > .side__label + nav + .side__label { margin-top: 20px; }
}
.app.is-side-fold .nav {
  justify-content: center;
  gap: 0;
  padding-inline: 8px;
}
.app.is-side-fold .side-pass .nav--sub { padding-left: 8px; }
.app.is-side-fold .side__rule,
.app.is-side-fold .side-pass__rule { margin-inline: 4px; }
.app.is-side-fold .side .side-pass__create {
  width: 40px;
  margin-inline: auto;
  padding: 10px;
}
.app.is-side-fold .side .side-pass__create svg { margin-left: 0; }
.app.is-side-fold .side { z-index: 4; }
.app.is-side-fold .side__back { position: relative; z-index: 3; }
.app.is-side-fold .nav--back { justify-content: center; }
.app.is-side-fold .side__back .side__fold {
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  background: #eeeeee;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: background .12s ease;
  z-index: 3;
}
:root[data-theme="dark"] .app.is-side-fold .side__back .side__fold {
  background: #181818;
  color: #8e8e8e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.app.is-side-fold .side__back .side__fold::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  right: 100%;
  width: 12px;
}
.app.is-side-fold .side__back.is-fold-arm .side__fold {
  opacity: 1;
  pointer-events: auto;
}
.app.is-side-fold .side__back:has(.nav--back[hidden]) { justify-content: center; }
.app.is-side-fold .side__back:has(.nav--back[hidden]) .side__fold {
  position: static;
  top: auto;
  left: auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
}
.app.is-side-fold .side__back:has(.nav--back[hidden]) .side__fold::before { content: none; }
.side-tip {
  position: fixed;
  z-index: 80;
  transform: translateY(-50%);
  max-width: 240px;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
:root[data-theme="dark"] .side-tip { background: #181818; color: #f3f3f3; }
.side-seek { margin: 0; }
.side__dock { display: contents; }
.side__top { display: contents; }
.side__mods { display: contents; }
.app.is-side-fold .side__fold--main {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  justify-content: center;
  margin-inline: auto;
  padding: 0;
  background: transparent;
}
.side__label { margin: 10px 8px 6px; color: var(--muted); font-size: 12px; }
#sideChats .side__label { margin-top: 16px; }
#sideMain > #sideModules + .side__label,
#sideMain > .side__label + nav + .side__label { margin-top: 20px; }
#navPersonal {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.side__projects { flex: none; margin-top: 8px; }
.side__projects .side__label { margin-top: 8px; }
.side__split {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.side nav { display: grid; gap: 2px; }
.work-fold { display: grid; min-width: 0; }
.work-fold__row {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 10px;
}
.work-fold__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 2px 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.work-fold__ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.work-fold__ico > svg {
  grid-area: 1 / 1;
  display: block;
}
.work-fold__ico > .work-fold__chev { display: none; }
.work-fold__row:hover .work-fold__folder,
.work-fold__row:focus-within .work-fold__folder { display: none; }
.work-fold__row:hover .work-fold__chev,
.work-fold__row:focus-within .work-fold__chev { display: block; }
.work-fold.is-open .work-fold__chev { transform: rotate(90deg); }
.app.is-side-fold .work-fold__row:hover .work-fold__folder,
.app.is-side-fold .work-fold__row:focus-within .work-fold__folder { display: block; }
.app.is-side-fold .work-fold__row:hover .work-fold__chev,
.app.is-side-fold .work-fold__row:focus-within .work-fold__chev { display: none; }
.work-fold__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-fold__add {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}
.work-fold__add svg { display: block; }
.work-fold.is-shut .work-fold__chats { display: none; }
.work-fold__chats { display: grid; gap: 2px; }
.nav.work-fold__chat { position: relative; padding-left: 38px; }
.work-chat__live {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  pointer-events: none;
  color: var(--ink);
  animation: work-chat-spin 3.4s linear infinite;
}
.work-chat__live i {
  position: absolute;
  left: 5.5px;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform-origin: 1.5px 7px;
  animation: work-chat-glow 1.8s ease-in-out infinite;
}
.work-chat__live i:nth-child(2) { transform: rotate(120deg); animation-delay: -.6s; }
.work-chat__live i:nth-child(3) { transform: rotate(240deg); animation-delay: -1.2s; }
@keyframes work-chat-spin { to { transform: rotate(360deg); } }
@keyframes work-chat-glow {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .work-chat__live,
  .work-chat__live i { animation: none; }
  .work-chat__live i { opacity: .75; }
}
.work-fold__chat > span:not(.work-chat__live):not(.nav__age) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app.is-side-fold .work-fold__chats,
.app.is-side-fold .work-fold__add,
.app.is-side-fold .work-fold__name { display: none; }
.app.is-side-fold .work-fold__row,
.app.is-side-fold .work-fold__open { justify-content: center; }
.app.is-side-fold .work-fold__open { padding: 8px; }
.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .38;
}
.nav.is-on { background: var(--bg); }
.nav.is-on .nav__dot {
  opacity: 1;
  background: var(--accent);
}
.nav--back {
  width: auto;
  flex: 1;
  min-width: 0;
  color: var(--muted);
  gap: 6px;
  padding: 8px 10px;
}
.app:not(.is-side-fold) .side__back .nav--back {
  flex: none;
  margin-left: auto;
}
.side__fold {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side__fold svg { display: block; }
.side__fold.side__fold--main {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
}
.app.is-side-fold .side__fold.side__fold--main { justify-content: center; padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .side__fold:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .app.is-side-fold .side__back .side__fold:hover {
    background: color-mix(in srgb, var(--ink) 7%, #eeeeee);
  }
  :root[data-theme="dark"] .app.is-side-fold .side__back .side__fold:hover {
    background: color-mix(in srgb, var(--ink) 7%, #181818);
  }
  #sideFoldMain:hover { background: #f6f6f6; }
  :root[data-theme="dark"] #sideFoldMain:hover { background: #222222; }
}
.nav > svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
  opacity: .72;
}
.nav__logo {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
  border-radius: 5px;
  object-fit: cover;
}
.nav.is-on > svg { opacity: 1; }
.nav > svg.is-tint { opacity: 1; }
.nav--event { align-items: center; }
.nav--event > svg { align-self: center; }
.nav--event[data-pin] { cursor: grab; }
.nav__event {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.nav__event b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__event small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.nav__age {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav--back > svg { opacity: 1; }
.side__rule {
  height: 0;
  margin: 2px 8px 8px;
  border-top: 1px solid var(--line);
}
.side__foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 0 14px;
  pointer-events: none;
}
.side__me {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - 46px);
  margin-right: auto;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(8px);
}
.side__logo {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: #f7f7f7;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.side__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
:root[data-theme="dark"] .side__logo {
  background: #2c2c2c;
  color: #f3f3f3;
}
html[data-tint="1"]:not([data-theme="dark"]) .side__logo {
  background: color-mix(in srgb, var(--tint-side) 62%, #fff);
}
.side__me span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.side__set {
  width: 38px;
  height: 38px;
  flex: none;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  transform: translateY(8px);
}
.app.is-side-fold .side__foot { justify-content: center; padding-right: 0; padding-left: 0; }
.app.is-side-fold .side__me { display: none; }
.app.is-side-fold .side__set { justify-self: center; }
@media (min-width: 700px) {
  .app.is-side-fold .side__foot {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: auto;
    bottom: 10px;
    padding: 0;
  }
  .app.is-side-fold .side__me {
    display: flex;
    justify-content: center;
    width: 38px;
    height: 38px;
    max-width: none;
    margin: 0;
    transform: none;
  }
  .app.is-side-fold .side__me #sideName { display: none; }
  .app.is-side-fold .side__set { transform: none; }
  .app.is-side-fold #sideMain,
  .app.is-side-fold .side-pass__list,
  .app.is-side-fold #navProject {
    padding-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .app.is-side-fold .side__isle {
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 10px;
    border-radius: 0;
  }
  .app.is-side-fold #sideMain {
    gap: 10px;
    overflow: hidden;
  }
  .app.is-side-fold #sideMain > .side__label { display: none; }
  .app.is-side-fold .side__dock {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 28px;
  }
  .app.is-side-fold #navPersonal,
  .app.is-side-fold #navProjects {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    align-content: start;
    padding: 6px 4px;
    border-radius: 28px;
  }
  .app.is-side-fold #navProjects { flex: none; overflow: visible; }
  .app.is-side-fold:has(#view > .home) #sideMain { display: contents; }
  .app.is-side-fold:has(#view > .home) .side__dock,
  .app.is-side-fold:has(#view > .home) #navPersonal,
  .app.is-side-fold:has(#view > .home) #navProjects { gap: 8px; }
  .app.is-side-fold .side__foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 4px;
    border-radius: 28px;
  }
  .app.is-side-fold #sideProject,
  .app.is-side-fold .side-pass {
    border-radius: 28px;
    padding: 6px 4px;
    overflow: hidden;
  }
  :root:not([data-theme="dark"]) .app.is-side-fold .side__dock,
  :root:not([data-theme="dark"]) .app.is-side-fold #navPersonal,
  :root:not([data-theme="dark"]) .app.is-side-fold #navProjects,
  :root:not([data-theme="dark"]) .app.is-side-fold .side__foot,
  :root:not([data-theme="dark"]) .app.is-side-fold #sideProject,
  :root:not([data-theme="dark"]) .app.is-side-fold .side-pass {
    background: #eeeeee;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  }
  :root[data-theme="dark"] .app.is-side-fold .side__dock,
  :root[data-theme="dark"] .app.is-side-fold #navPersonal,
  :root[data-theme="dark"] .app.is-side-fold #navProjects,
  :root[data-theme="dark"] .app.is-side-fold .side__foot,
  :root[data-theme="dark"] .app.is-side-fold #sideProject,
  :root[data-theme="dark"] .app.is-side-fold .side-pass {
    background: #181818;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
  }
  .app.is-side-fold:has(#view > .home) .side__mods { display: contents; }
  .app.is-side-fold:has(#view > .home) #navPersonal,
  .app.is-side-fold:has(#view > .home) #navProjects {
    flex: none;
    margin: 0;
  }
  .app.is-side-fold:has(#view > .home) .side__foot { margin-top: auto; }
}
#sideMain {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
}
.app.is-side-fold .side__projects { display: contents; }
.side-pass__list,
#navProject {
  padding-bottom: 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
#sideProject,
.side-pass {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#sideProject > nav {
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.side-pass .nav--sub { padding-left: 30px; }
.pass-icons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pass-icons__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.pass-icons__bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: center;
  position: relative;
  min-height: 40px;
}
.pass-icons__bar--plain {
  display: flex;
  justify-content: center;
}
.pass-icons__pager {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  transform: translateX(-50%);
}
.pass-icons__bar--plain .pass-icons__pager {
  position: static;
  height: auto;
  transform: none;
}
.pass-icons__pager .pass-icon { width: 40px; }
.pass-icons__count {
  min-width: 44px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pass-icon.is-off { visibility: hidden; }
.pass-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--swatch, transparent);
}
.pass-swatch--plain {
  background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%);
}
.pass-icon.is-on .pass-swatch { outline: 2px solid var(--ink); outline-offset: 2px; }
.pass-icon {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pass-icon svg { display: block; }
.pass-icon.is-on { background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
:root[data-theme="dark"] .pass-icon.is-on { background: #2a2a2a; }
.side-pass__list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-pass__folders {
  flex: none;
  display: grid;
  align-content: start;
  gap: 2px;
}
.side-pass__none {
  margin: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.side-pass__create {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #e2e2e2;
  color: #111111;
  cursor: pointer;
}
.side-pass__create svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: -24px;
}
.side-pass__trash { flex: none; }
.side-pass__rule { margin: 12px 8px 8px; }
.mail-quota {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 12px 8px 0;
}
.mail-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;
  max-width: min(420px, calc(100% - 220px));
  min-width: 40px;
  padding: 0;
  border-radius: 10px;
  background: #eeeeee;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.mail-box__id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 4px;
}
.mail-box__ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.mail-box__ico svg { display: block; }
.mail-box.is-icon {
  width: 40px;
  padding: 0;
  justify-content: flex-start;
  gap: 0;
}
.mail-box.is-icon .mail-box__id { gap: 0; padding-right: 0; }
.mail-box.is-icon #mailBoxName { display: none; }
.mail-box.is-slide #mailBoxName,
.mail-box.is-slide .mail-box__arrow,
.mail-box.is-slide .mail-box__list { display: none; }
.mail-box.is-slide .mail-box__more { display: flex; }
.mail-box.is-slide .mail-box__shift { display: grid; }
.mail-box.is-icon .mail-box__more { display: none; }
#mailBox { flex: none; margin-top: 0; }
#mailBoxName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.mail-box__more {
  position: relative;
  align-items: center;
}
.mail-box__more:not([hidden]) { display: flex; }
.mail-box__arrow,
.mail-box__shift {
  width: 32px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.mail-box__more:not([hidden]) .mail-box__shift { display: grid; }
.mail-box__arrow svg,
.mail-box__shift svg { display: block; }
.mail-box.is-open .mail-box__arrow svg { transform: rotate(180deg); }
.mail-box.is-slide .mail-box__shift svg { transform: rotate(180deg); }
.mail-box__list {
  display: none;
  position: absolute;
  z-index: 8;
  right: 0;
  top: 100%;
  width: max-content;
  min-width: 280px;
  max-width: min(520px, 80vw);
  padding-top: 6px;
}
.mail-box.is-open .mail-box__list { display: block; }
.mail-box.is-slide .mail-box__id { gap: 0; padding-right: 0; }
.mail-box.is-slide .mail-box__arrow,
.mail-box.is-slide .mail-box__list { display: none; }
.mail-box__tray {
  position: absolute;
  z-index: 7;
  left: calc(100% + 8px);
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  max-width: min(560px, 48vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
  transition: transform .16s ease, opacity .16s ease;
}
.mail-box.is-slide .mail-box__tray {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mail-box__scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.mail-box__chip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 280px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
}
.mail-box__plus {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.mail-box__plus svg { display: block; width: 16px; height: 16px; }
.mail-box__plus:hover { background: color-mix(in srgb, var(--ink) 8%, var(--card)); }
.mail-box__chip .mail-box__pick { padding: 0; }
.mail-box__chip .mail-box__pen {
  width: 22px;
  height: 22px;
  margin-right: -6px;
  display: none;
}
.mail-box__chip:hover .mail-box__pen { display: grid; }
.mail-box__menu {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.mail-box__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px 28px;
  gap: 8px;
  align-items: center;
  padding: 2px 6px 2px 12px;
}
.mail-box__add {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.mail-box__pick {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-box__mark {
  display: grid;
  place-items: center;
  color: var(--ink);
}
.mail-box__mark svg { display: block; }
.mail-box__pen {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.mail-box__pen:hover,
.mail-box__arrow:hover,
.mail-box__shift:hover,
.mail-box__add:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
:root[data-theme="dark"] .mail-box {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .mail-box__menu,
:root[data-theme="dark"] .mail-box__chip,
:root[data-theme="dark"] .mail-box__plus { background: #181818; }
:root[data-theme="dark"] .mail-box__plus:hover { background: #222222; }
:root[data-theme="dark"] .mail-box__menu,
:root[data-theme="dark"] .mail-box__add { border-color: #2c2c2c; }
.mail__avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.mail-google { width: 100%; }
.mail-quota__track {
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.mail-quota__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--ink);
}
.mail-quota__bar.is-full { background: var(--danger); }
.mail-quota p { color: var(--muted); font-size: 12px; }
#passSideFolders .nav[data-folder]:not([data-folder=""]) { cursor: grab; }
#navPersonal .nav { cursor: grab; }
#navPersonal .nav.is-drag {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: grabbing;
}
#navPersonal .nav.is-drag > * { visibility: hidden; }
.pass-drag {
  position: fixed;
  z-index: 70;
  max-width: 220px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  color: #111111;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
:root[data-theme="dark"] .pass-drag { background: #2a2a2a; color: #f3f3f3; }
body.is-pass-drag { user-select: none; cursor: grabbing; }
.side-pass .nav.is-drag {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: grabbing;
}
.side-pass .nav.is-drag > * { visibility: hidden; }
body.is-cal-drag { user-select: none; }
.pass-line.is-drag > * { visibility: hidden; }
.pass-line.is-drag::before,
.pass-line.is-drag:hover::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
:root[data-theme="dark"] .side { color: #f3f3f3; }
:root:not([data-theme="dark"]) .side__isle,
:root:not([data-theme="dark"]) .side__back {
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .side__isle,
:root[data-theme="dark"] .side__back {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
@media (min-width: 700px) {
  :root:not([data-theme="dark"]) .app.is-side-fold .side__isle,
  :root[data-theme="dark"] .app.is-side-fold .side__isle {
    background: transparent;
    box-shadow: none;
  }
}
:root[data-theme="dark"] .side__label { color: #9a9a9a; }
:root[data-theme="dark"] .side .nav--back { color: #8e8e8e; }
:root[data-theme="dark"] .side__split,
:root[data-theme="dark"] .side__rule { border-top-color: #2c2c2c; }
:root[data-theme="dark"] .side .nav.is-on,
:root[data-theme="dark"] .side .nav.is-on:hover {
  background: #2a2a2a;
  color: #f3f3f3;
}
:root[data-theme="dark"] .side .btn--ghost {
  color: #f3f3f3;
  border-color: #2c2c2c;
}

.work { min-width: 0; display: flex; flex-direction: column; }
#view { padding: 20px; display: grid; gap: 14px; align-content: start; }
#view:has(.room),
#view:has(.studio),
#view:has(.oh) { height: 100%; min-height: 0; overflow: hidden; padding-right: 0; }
#view:has(.studio),
#view:has(.oh) { align-content: stretch; grid-template-rows: minmax(0, 1fr); padding: 0; }
.app:has(.oh) .dock { display: none; }
iframe.oh-canvas { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #f8f8f8; }
.room.room--hands { position: relative; gap: 0; height: 100%; min-height: 0; overflow: hidden; }
#view:has(.room--hands) .room.room--hands .room__browser { margin-top: 0; margin-bottom: 0; }
.room.room--hands .room__browser,
.room.room--hands .room__dock { position: relative; z-index: 1; }
.room.room--hands > .room__stage > iframe.oh-canvas,
.room.room--hands.is-panel > .room__stage > iframe.oh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  flex: none;
}
.room.room--hands.is-panel .room__browser {
  background: transparent;
  box-shadow: inset 1px 0 0 color-mix(in srgb, #000 8%, transparent);
}
:root[data-theme="dark"] .room.room--hands.is-panel .room__browser {
  background: transparent;
  box-shadow: inset 1px 0 0 color-mix(in srgb, #fff 10%, transparent);
}
.room--hands.is-panel .room__top {
  background: #eeeeee;
  border-radius: 16px 0 0 0;
}
:root[data-theme="dark"] .room--hands.is-panel .room__top { background: #181818; }
:root[data-theme="dark"] .room.room--hands.is-panel .room__view,
.room.room--hands.is-panel .room__view {
  margin: 0;
  background: transparent;
  pointer-events: none;
  border-radius: 0;
}
.room--hands.is-panel .room__view p { visibility: hidden; }
.room.room--hands.is-panel .room__view.is-live {
  background: #e2e2e2;
  pointer-events: auto;
}
:root[data-theme="dark"] .room.room--hands.is-panel .room__view.is-live { background: #101010; }
.room--hands .room__view.is-live > iframe.room__page {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
@media (max-width: 699px) {
  .room.room--hands > .room__stage > iframe.oh-canvas,
  .room--hands.is-panel > .room__stage > iframe.oh-canvas { position: static; inset: auto; width: 100%; height: 100%; }
  .room--hands.is-panel .room__browser { background: #eeeeee; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
  :root[data-theme="dark"] .room--hands.is-panel .room__browser { background: #181818; }
  .room--hands.is-panel .room__view { pointer-events: auto; }
  .room--hands.is-panel .room__view p { visibility: visible; }
}
iframe.oh-canvas.is-wait { opacity: 0; }
body:not([data-oh-ready]) #ohNav,
body:not([data-oh-ready]) #ohList { opacity: 0; }
#view:has(.oh) { background: var(--canvas); }
#ohPark {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
#ohPark,
#ohPark iframe.oh-canvas { pointer-events: none; }
#ohPark iframe.oh-canvas { width: 100%; height: 100%; }
:root[data-theme="dark"] iframe.oh-canvas,
:root[data-theme="dark"] .oh { background: #101010; }
/* Тест ИИ. Внешний вид раздела правится в этом блоке: цвета, шрифты, ширина колонки, радиусы.
   Ниже в правилах только var(--ai-*), тёмная тема меняет значения токенов, а не правила. */
:root {
  --ai-font: -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --ai-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ai-col: 720px;
  --ai-size: 14px;
  --ai-leading: 24px;
  --ai-radius: 12px;
  --ai-radius-box: 15px;
  --ai-radius-small: 4px;
  --ai-muted: #666;
  --ai-faint: #8e8e8e;
  --ai-danger: #e76a5e;
  --ai-strong: #1b1d22;
  --ai-check: #1b1d22;
  --ai-user-bg: #e8e8e8;
  --ai-user-ink: #1b1d22;
  --ai-rule: #dcdcdc;
  --ai-quote-rule: #cfcfcf;
  --ai-inline-bg: #ececec;
  --ai-inline-ink: #1b1d22;
  --ai-inline-line: #dcdcdc;
  --ai-table-head: #f5f5f5;
  --ai-table-line: #dcdcdc;
  --ai-scroll: color-mix(in srgb, #6f6f6f 35%, transparent);
  --ai-code-bg: #1e1e1e;
  --ai-code-ink: #d4d4d4;
  --ai-code-line: #404040;
  --ai-code-chip: #313131;
  --ai-plate-bg: #eeeeee;
  --ai-plate-ink: #1b1d22;
  --ai-chip-bg: #e3e3e3;
  --ai-hover: color-mix(in srgb, #000 8%, transparent);
  --ai-hover-ink: #1b1d22;
  --ai-send-off: #8e8e8e;
  --ai-card-bg: #f3f3f3;
  --ai-card-line: #dcdcdc;
  --ai-ok: #2f9e44;
}
:root[data-theme="dark"] {
  --ai-muted: #979797;
  --ai-strong: #fff;
  --ai-check: #f3f3f3;
  --ai-user-bg: #313131;
  --ai-user-ink: #ececec;
  --ai-rule: #404040;
  --ai-quote-rule: #404040;
  --ai-inline-bg: #282828;
  --ai-inline-ink: #f3f3f3;
  --ai-inline-line: #282828;
  --ai-table-head: #202020;
  --ai-table-line: #404040;
  --ai-scroll: color-mix(in srgb, #979797 30%, transparent);
  --ai-plate-bg: #202020;
  --ai-plate-ink: #fff;
  --ai-chip-bg: #2a2a2a;
  --ai-hover: color-mix(in srgb, #fff 10%, transparent);
  --ai-hover-ink: #fff;
  --ai-send-off: #fff;
  --ai-card-bg: #202020;
  --ai-card-line: #333;
  --ai-ok: #3fb950;
}
.app:has(.try) { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.work:has(.try) { height: 100%; min-height: 0; overflow: hidden; }
#view:has(.try) { height: 100%; min-height: 0; overflow: hidden; padding: 0; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.try.is-home { justify-content: flex-start; padding-top: max(4rem, 28vh); padding-bottom: 40px; }
.try.is-talk { justify-content: flex-start; }
.try.is-new .try__log { justify-content: center; }
.try__log { display: none; }
.try.is-talk .try__log { display: flex; flex: 1 1 auto; min-height: 0; width: min(var(--ai-col), 100%); margin: 0 auto; padding: 16px 0 32px; overflow: auto; flex-direction: column; scrollbar-width: none; }
.try__log::-webkit-scrollbar { width: 0; height: 0; }
.try__start { display: flex; flex-direction: column; gap: 6px; }
.try__start-title { margin: 0; font-size: calc(var(--ai-size) + 1px); font-weight: 600; }
.try__start-hint { margin: 0; color: var(--ai-faint); font-size: var(--ai-size); line-height: var(--ai-leading); }
.try__start-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.try__start-chip { padding: 7px 14px; border: 1px solid var(--ai-card-line); border-radius: 999px; background: transparent; color: var(--ai-muted); font: inherit; font-size: var(--ai-size); line-height: 20px; text-align: left; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.try__start-chip:hover { background: var(--ai-hover); border-color: transparent; color: var(--ai-hover-ink); }
/* Вход в «Тест ИИ» — это новый чат: заголовок и поле ввода по центру, без пустой ленты. */
.try.is-welcome { justify-content: center; padding-bottom: max(24px, 12vh); }
.try.is-welcome .try__log { display: none; }
.try.is-welcome .try__chat { justify-content: center; }
.try.is-welcome .try__hold { width: min(680px, 100%); gap: 8px; }
.try.is-welcome .try__plate { width: min(560px, 100%); margin: 10px auto 0; border-radius: 18px; }
/* Статус связи — строка переписки, а не часть поля: на входе его нет и в «Новом чате». */
.try.is-welcome .try__status { display: none; }
/* Заголовок беседы и точка состояния рождаются вместе с первой репликой: пока беседы нет,
   углу нечего показывать — так же пусто, как в «Новом чате». */
.try.is-welcome .try__head { display: none; }
/* Заголовок повторяет .home__hello h1 из «Нового чата» до последнего значения. */
.try__hello { display: grid; justify-items: center; gap: 8px; margin: 0; }
.try__hi { margin: 0; min-height: 1.15em; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 520; font-synthesis: none; letter-spacing: -0.02em; line-height: 1.2; text-align: center; }
@media (max-width: 699px) {
  .try__hi { font-size: 32px; }
}
html[data-os="mac"] .try__hi { font-weight: 450; -webkit-font-smoothing: antialiased; }
.try__hi.is-in { letter-spacing: 0; }
/* Выбор модели: список всплывает над полем ввода, фильтр сверху. */
.try__models { position: absolute; left: 12px; bottom: 58px; z-index: 30; display: flex; flex-direction: column; gap: 6px; width: min(320px, calc(100% - 24px)); max-width: calc(100vw - 48px); padding: 8px; border: 1px solid var(--ai-card-line); border-radius: 12px; background: var(--ai-card-bg); box-shadow: 0 12px 32px color-mix(in srgb, #000 18%, transparent); }
.try__models-find { width: 100%; margin: 0; padding: 7px 9px; border: 1px solid var(--ai-rule); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; }
.try__models-find:focus { outline: none; border-color: var(--ai-strong); }
.try__models-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow: auto; }
.try__models-row { flex: 0 0 auto; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: var(--ai-size); line-height: 20px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.try__models-row:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__models-row.is-on { font-weight: 600; }
.try__models-row.is-on::after { content: "✓"; float: right; margin-left: 8px; }
.try__models-empty { margin: 6px 2px; color: var(--ai-muted); font-size: 12px; }

.try__user { align-self: flex-end; width: fit-content; max-width: 100%; margin-top: 24px; padding: 10px 16px; border-radius: var(--ai-radius); background: var(--ai-user-bg); color: var(--ai-user-ink); font-size: var(--ai-size); line-height: var(--ai-leading); white-space: pre-wrap; overflow-wrap: anywhere; }
.try__agent { position: relative; margin-top: 24px; max-width: 100%; color: inherit; font-size: var(--ai-size); line-height: var(--ai-leading); overflow-wrap: anywhere; }
.try__copy { position: absolute; top: -4px; right: 0; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ai-card-line); border-radius: 6px; background: var(--ai-card-bg); color: var(--ai-muted); opacity: 0; transition: opacity .15s ease, color .15s ease; cursor: pointer; }
.try__agent:hover .try__copy, .try__copy:focus-visible { opacity: 1; }
.try__copy:hover { color: inherit; }
.try__copy.is-done { color: var(--ai-ok); opacity: 1; }
.try__agent p, .try__say p, .try__mind p { margin: 0; line-height: var(--ai-leading); }
.try__agent p + p, .try__say p + p, .try__mind p + p { margin-top: 12px; }
.try__agent ul, .try__agent ol, .try__say ul, .try__say ol, .try__mind ul, .try__mind ol { margin: 8px 0; padding: 0 0 0 8px; list-style: disc; line-height: var(--ai-leading); }
.try__agent ol, .try__say ol, .try__mind ol { list-style: decimal; }
.try__agent li, .try__say li, .try__mind li { padding: 2px 0 2px 8px; margin-left: 20px; }
.try__agent pre, .try__say pre, .try__mind pre, .try__detail pre { margin: 8px 0; padding: 1em; border-radius: var(--ai-radius-small); border: 1px solid var(--ai-code-bg); background: var(--ai-code-bg); color: var(--ai-code-ink); overflow: auto; font-family: var(--ai-mono); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.try__agent code, .try__say code, .try__mind code { font-family: var(--ai-mono); font-size: 0.92em; }
.try__agent :not(pre) > code, .try__say :not(pre) > code, .try__mind :not(pre) > code { padding: 0.05em 0.4em; border-radius: var(--ai-radius-small); border: 1px solid var(--ai-inline-line); background: var(--ai-inline-bg); color: var(--ai-inline-ink); }
.try__agent a, .try__say a, .try__mind a { color: inherit; text-decoration: underline; }
.try :is(.try__agent, .try__say, .try__mind) :is(h1, h2, h3, h4, h5, h6) { margin: 16px 0 10px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; }
.try :is(.try__agent, .try__say, .try__mind) :is(h1, h2) { font-size: 18px; }
.try :is(.try__agent, .try__say, .try__mind) h3 { font-size: 16px; }
.try :is(.try__agent, .try__say, .try__mind) :is(h4, h5, h6) { font-size: var(--ai-size); }
.try :is(.try__agent, .try__say, .try__mind) > :first-child { margin-top: 0; }
.try :is(.try__agent, .try__say, .try__mind) :is(ul, ol) :is(ul, ol) { margin: 2px 0; }
.try :is(.try__agent, .try__say, .try__mind) li:has(> .md-task) { list-style: none; margin-left: 12px; }
.md-task { display: inline-block; width: 12px; height: 12px; margin: 0 8px 0 0; border: 1.5px solid var(--ai-faint); border-radius: 3px; vertical-align: -1px; box-sizing: border-box; }
.md-task.is-done { border-color: var(--ai-check); background: var(--ai-check); }
.try :is(.try__agent, .try__say, .try__mind) blockquote { margin: 8px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--ai-quote-rule); color: var(--ai-muted); }
.try :is(.try__agent, .try__say, .try__mind) hr { margin: 16px 0; border: 0; border-top: 1px solid var(--ai-rule); }
.md-table { max-width: 100%; margin: 16px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--ai-scroll) transparent; }
.md-table.is-left { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
.md-table.is-right { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px); }
.md-table.is-left.is-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.md-table::-webkit-scrollbar { height: 8px; }
.md-table::-webkit-scrollbar-track { background: transparent; }
.md-table::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ai-scroll); }
.md-table table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ai-table-line); border-radius: var(--ai-radius); overflow: hidden; font-size: var(--ai-size); line-height: 20px; }
.md-table th, .md-table td { max-width: 448px; padding: 8px 12px; border-right: 1px solid var(--ai-table-line); border-bottom: 1px solid var(--ai-table-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.md-table th { background: var(--ai-table-head); color: var(--ai-strong); font-weight: 600; vertical-align: middle; }
.md-table th:last-child, .md-table td:last-child { border-right: 0; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-code { position: relative; margin: 8px 0; border-radius: 8px; background: var(--ai-code-bg); }
.md-code__bar { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.15s ease; }
.md-code:hover .md-code__bar,
.md-code__bar:focus-within { opacity: 1; }
.md-code__lang { display: none; }
.md-code__copy { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ai-code-line); border-radius: 2px; background: var(--ai-code-chip); color: var(--ai-code-ink); font: inherit; line-height: 0; cursor: pointer; }
.md-code__copy:hover { background: var(--ai-code-line); }
.md-code__done { display: none; padding: 0 2px; font: 500 11px/1 var(--ai-font); line-height: 15px; }
.md-code__copy.is-done { padding: 4px 6px; }
.md-code__copy.is-done svg { display: none; }
.md-code__copy.is-done .md-code__done { display: inline; }
.md-code pre { margin: 0; padding: 13px; border: 0; border-radius: 0; background: transparent; color: var(--ai-code-ink); font: 13px/1.5 var(--ai-mono); scrollbar-width: thin; scrollbar-color: var(--ai-scroll) transparent; }
/* Prism token names, VS Code Dark+ values: the pair the stock OpenHands chat renders with. */
:is(.md-code, .try__detail) .token.comment { color: #6a9955; }
:is(.md-code, .try__detail) .token.keyword, :is(.md-code, .try__detail) .token.boolean, :is(.md-code, .try__detail) .token.tag, :is(.md-code, .try__detail) .token.entity, :is(.md-code, .try__detail) .token.doctype { color: #569cd6; }
:is(.md-code, .try__detail) .token.keyword.control-flow, :is(.md-code, .try__detail) .token.keyword.module, :is(.md-code, .try__detail) .token.decorator { color: #c586c0; }
:is(.md-code, .try__detail) .token.string, :is(.md-code, .try__detail) .token.char, :is(.md-code, .try__detail) .token.builtin, :is(.md-code, .try__detail) .token.deleted { color: #ce9178; }
:is(.md-code, .try__detail) .token.number, :is(.md-code, .try__detail) .token.symbol, :is(.md-code, .try__detail) .token.unit, :is(.md-code, .try__detail) .token.inserted { color: #b5cea8; }
:is(.md-code, .try__detail) .token.constant, :is(.md-code, .try__detail) .token.property, :is(.md-code, .try__detail) .token.attr-name, :is(.md-code, .try__detail) .token.variable { color: #9cdcfe; }
:is(.md-code, .try__detail) .token.function { color: #dcdcaa; }
:is(.md-code, .try__detail) .token.class-name { color: #4ec9b0; }
:is(.md-code, .try__detail) .token.selector { color: #d7ba7d; }
:is(.md-code, .try__detail) .token.regex { color: #d16969; }
:is(.md-code, .try__detail) .token.operator, :is(.md-code, .try__detail) .token.punctuation { color: #d4d4d4; }
.try__fold { width: 100%; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--ai-muted); display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; font-size: var(--ai-size); font-weight: 400; line-height: 20px; }
.try__fold svg { flex: 0 0 auto; }
.try__fold b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__fold i { margin-left: auto; flex: 0 0 auto; font-style: normal; }
.try__gray, .try__out { margin: 4px 0 0 24px; color: var(--ai-muted); font-size: var(--ai-size); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.try__out { display: none; margin-left: 24px; }
.try__act.is-open .try__out { display: block; }
.try__think.is-open .try__gray { display: block; }
.try__gray { display: none; }
.try__aside { margin: 4px 0 0 24px; color: var(--ai-muted); font-size: var(--ai-size); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.try__think.is-open > .try__fold .try__chevron, .try__act.is-open .try__chevron { transform: rotate(180deg); }
.try__bulb { flex: 0 0 auto; }
.try__row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; border: 0; background: transparent; color: var(--ai-muted); font-size: var(--ai-size); font-weight: 400; line-height: 20px; text-align: left; cursor: pointer; padding: 4px 0; }
.try__name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.try__mono { font-family: var(--ai-mono); font-weight: 650; letter-spacing: -0.02em; }
.try__row .try__chevron { margin-left: 8px; flex: 0 0 auto; }
.try__mind, .try__detail { display: none; }
.try__think.is-open .try__mind { display: block; margin: 4px 0 0 24px; padding: 8px 0; color: var(--ai-muted); font-size: var(--ai-size); line-height: 20px; }
.try__act.is-open .try__detail { display: block; margin: 6px 0 4px; }
.try__detail pre { color: var(--ai-code-ink); }
.try__say { padding: 8px 0; font-size: var(--ai-size); line-height: var(--ai-leading); }
#tryList { display: grid; gap: 2px; }
#tryList .nav { min-width: 0; }
#tryList .nav > span:not(.nav__age):not(.work-chat__live) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__frame { display: block; max-width: min(var(--ai-col), 100%); margin-top: 8px; border-radius: 8px; }
.try__tasks { margin-top: 24px; border: 1px solid var(--ai-card-line); border-radius: var(--ai-radius); background: var(--ai-card-bg); overflow: hidden; }
.try__tasks-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ai-card-line); color: var(--ai-strong); font-size: 12px; font-weight: 600; line-height: 16px; }
.try__tasks-list { margin: 0; padding: 4px 0; list-style: none; }
.try__task { display: flex; align-items: flex-start; gap: 10px; padding: 6px 12px; color: var(--ai-strong); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.try__task .try__mark { flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; }
.try__task.is-done { color: var(--ai-muted); }
.try__task.is-doing .try__mark { animation: try-spin 6s linear infinite; }
.try__task.is-doing { font-weight: 600; }
.try__error { margin-top: 16px; color: var(--ai-danger); font-size: var(--ai-size); line-height: 20px; white-space: pre-wrap; }
.try__again { margin-top: 8px; padding: 4px 10px; border: 1px solid var(--ai-card-line); border-radius: 6px; background: transparent; color: var(--ai-danger); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; white-space: normal; }
.try__again:hover { background: var(--ai-chip-bg); }
.try__rid { display: block; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: inherit; opacity: 0.5; font-family: var(--ai-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.02em; text-align: left; cursor: pointer; user-select: all; }
.try__rid:hover, .try__rid.is-done { opacity: 1; }
.try__error .try__rid { display: inline-block; margin: 8px 0 0 10px; opacity: 0.6; }
.try__live { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ai-faint); font-size: var(--ai-size); line-height: 20px; }
.try__live.is-stop::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .7; }
.try__stopped { margin-left: 8px; color: var(--ai-faint); font-size: 12px; white-space: nowrap; }
.try__spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: try-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes try-spin { to { transform: rotate(360deg); } }
.try__head { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; width: 100%; max-width: 100%; height: 40px; min-height: 40px; }
.try__dot { position: relative; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: default; }
.try__dot::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ai-faint); }
.try__dot[data-state="ready"]::before { background: var(--ai-ok); }
.try__dot.is-live::before { background: var(--ai-ok); animation: try-pulse 1.3s ease-in-out infinite; }
.try__dot.is-bad::before { background: var(--ai-danger); }
@keyframes try-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.try__lead { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
.try__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ai-strong); font-size: 15px; line-height: 20px; }
.try__more { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); cursor: pointer; }
.try__more:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__menu { position: absolute; top: 30px; left: 0; z-index: 30; display: flex; flex-direction: column; gap: 1px; min-width: 236px; padding: 5px; border: 1px solid var(--ai-card-line); border-radius: 11px; background: var(--ai-card-bg); box-shadow: 0 14px 36px color-mix(in srgb, #000 26%, transparent); }
.try__menu[hidden] { display: none; }
.try__menu button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.try__menu button svg { flex: 0 0 auto; color: var(--ai-muted); }
.try__menu button:hover { background: var(--ai-hover); }
.try__menu button:hover svg { color: var(--ai-hover-ink); }
.try__menu button[hidden] { display: none; }
.try__menu-cut { height: 1px; margin: 4px 6px; background: var(--ai-rule); }
.try__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.try__tool { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); cursor: pointer; }
.try__tool:hover, .try__tool[aria-pressed="true"] { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; width: 100%; align-items: stretch; }
.try__chat { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.try__side { flex: 0 0 clamp(280px, 30vw, 400px); display: flex; flex-direction: column; min-height: 0; margin-left: 16px; padding-left: 12px; border-left: 1px solid var(--ai-rule); }
.try__side[hidden] { display: none; }
.try__tabs { display: flex; align-items: center; gap: 2px; height: 40px; min-height: 40px; border-bottom: 1px solid var(--ai-rule); }
.try__tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.try__tab:hover { color: var(--ai-hover-ink); background: var(--ai-hover); }
.try__tab[aria-selected="true"] { color: var(--ai-hover-ink); background: var(--ai-hover); }
.try__tab-close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); cursor: pointer; }
.try__tab-close:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 4px 16px; scrollbar-width: thin; scrollbar-color: var(--ai-scroll) transparent; font-size: 13px; line-height: 20px; }
.try__pane::-webkit-scrollbar { width: 8px; }
.try__pane::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ai-scroll); }
.try__pane-head { display: flex; align-items: center; gap: 6px; padding: 0 0 8px; border-bottom: 1px solid var(--ai-rule); color: var(--ai-muted); font-size: 12px; }
.try__pane-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ai-mono); color: var(--ai-hover-ink); }
.try__pane-note { margin: 10px 0 0; color: var(--ai-faint); }
.try__tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.try__tabs::-webkit-scrollbar { display: none; }
.try__tab span { white-space: nowrap; }
.try__pane-count { margin-left: auto; color: var(--ai-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.try__plan, .try__tasks, .try__commits { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.try__task { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 6px; }
.try__task[data-state="doing"] { background: var(--ai-hover); }
.try__task-mark { flex: 0 0 14px; width: 14px; line-height: 18px; text-align: center; color: var(--ai-faint); font-size: 12px; }
.try__task[data-state="doing"] .try__task-mark { color: var(--ai-strong); }
.try__task[data-state="done"] .try__task-mark { color: #2f9e44; }
.try__task-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.try__task-title { color: var(--ai-strong); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.try__task[data-state="done"] .try__task-title { color: var(--ai-faint); text-decoration: line-through; }
.try__task-notes { color: var(--ai-muted); font-size: 11px; line-height: 15px; }
.try__plan-order { flex: 0 0 16px; color: var(--ai-faint); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
.try__commit { display: flex; flex-direction: column; gap: 1px; padding: 6px; border: 0; width: 100%; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.try__commit:hover, .try__commit.try__diff-on { background: var(--ai-hover); }
.try__commit-sha { color: var(--ai-faint); font-family: var(--ai-mono); font-size: 11px; }
.try__commit-subject { color: var(--ai-strong); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__commit-meta { color: var(--ai-muted); font-size: 11px; }
.try__usage { display: flex; flex-direction: column; padding-top: 6px; }
.try__usage-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 6px; color: var(--ai-muted); font-size: 13px; }
.try__usage-row span:last-child { color: var(--ai-strong); font-variant-numeric: tabular-nums; }
.try__usage-row.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ai-rule); color: var(--ai-strong); }
.try__usage-context { padding: 10px 6px 0; }
.try__usage-bar { height: 6px; border-radius: 3px; background: var(--ai-rule); overflow: hidden; }
.try__usage-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ai-strong); }
.try__files-list { display: flex; flex-direction: column; padding-top: 6px; }
.try__file { display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.try__file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__file svg { flex: 0 0 auto; color: var(--ai-muted); }
.try__file:hover { background: var(--ai-hover); }
.try__file.is-dir { font-weight: 500; }
.try__file.is-on { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__file-view { margin-top: 8px; border-top: 1px solid var(--ai-rule); padding-top: 8px; }
.try__file-view pre { margin: 0; padding: 10px; border-radius: 8px; background: var(--ai-code-bg); color: var(--ai-code-ink); font-family: var(--ai-mono); font-size: 12px; line-height: 18px; overflow: auto; max-height: 46vh; }
.try__term { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.try__term-line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ai-mono); font-size: 12px; line-height: 18px; }
.try__term-prompt { color: var(--ai-faint); }
.try__term-cmd { color: var(--ai-hover-ink); }
.try__term-out { margin: 0 0 4px; padding: 8px; border-radius: 8px; background: var(--ai-code-bg); color: var(--ai-code-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ai-mono); font-size: 12px; line-height: 18px; }
.try__pane-shot { display: block; width: 100%; margin-top: 10px; border: 1px solid var(--ai-rule); border-radius: 8px; }
.try__group { margin-top: 14px; }
.try__group + .try__think { margin-top: 6px; }
.try__group-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--ai-muted); font: inherit; font-size: var(--ai-size); line-height: 20px; text-align: left; cursor: pointer; }
.try__group-head .try__chevron { flex: 0 0 auto; }
.try__group.is-open .try__group-head .try__chevron { transform: rotate(180deg); }
.try__group-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__group-side { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.try__group-body { display: none; margin-top: 6px; }
.try__group.is-open .try__group-body { display: block; }
.try__group-body .try__act:first-child { margin-top: 0; }
.try__pane-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ai-muted); cursor: pointer; }
.try__pane-btn:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__pane-head > .try__pane-btn:last-child { margin-left: auto; }
.try__pane-head > .try__pane-count + .try__pane-btn { margin-left: 0; }
.try__crumb { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; font-family: var(--ai-mono); }
.try__crumb::-webkit-scrollbar { display: none; }
.try__crumb-seg { padding: 0 2px; border: 0; background: transparent; color: var(--ai-hover-ink); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.try__crumb-seg:hover:not(:disabled) { text-decoration: underline; }
.try__crumb-seg:disabled { color: var(--ai-strong); cursor: default; }
.try__crumb-sep { color: var(--ai-faint); font-size: 12px; }
.try__file-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.try__file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ai-muted); font-family: var(--ai-mono); font-size: 11px; }
.try__file-bar .try__pane-btn { margin-left: auto; }
.try__changes { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.try__change { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.try__change:hover, .try__change.try__diff-on { background: var(--ai-hover); }
.try__change-mark { flex: 0 0 16px; width: 16px; height: 16px; line-height: 16px; border-radius: 4px; text-align: center; font-family: var(--ai-mono); font-size: 10px; font-weight: 600; }
.try__change-mark[data-state="M"] { background: rgba(240, 170, 60, 0.18); color: #b7791f; }
.try__change-mark[data-state="A"] { background: rgba(60, 170, 90, 0.16); color: #2f855a; }
.try__change-mark[data-state="D"] { background: rgba(220, 70, 70, 0.16); color: #c53030; }
.try__change-mark[data-state="R"] { background: rgba(90, 120, 220, 0.16); color: #3b5bdb; }
.try__change-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ai-mono); font-size: 12px; }
.try__diff-wrap { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ai-rule); }
.try__diff { margin: 0; padding: 8px; border-radius: 8px; background: var(--ai-code-bg); color: var(--ai-code-ink); white-space: pre; overflow: auto; max-height: 52vh; font-family: var(--ai-mono); font-size: 12px; line-height: 17px; }
.try__diff .is-add { color: #4ade80; }
.try__diff .is-del { color: #f87171; }
.try__diff .is-hunk { color: #7dd3fc; }
.try__diff .is-meta { color: var(--ai-faint); }
.try__term-form { position: sticky; bottom: -1px; display: flex; gap: 6px; margin-top: 10px; padding: 8px 0 2px; }
.try__term-in { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--ai-rule); border-radius: 6px; background: transparent; color: var(--ai-strong); font-family: var(--ai-mono); font-size: 12px; }
.try__term-in:focus { outline: 2px solid rgba(76, 110, 245, 0.45); outline-offset: -1px; }
.try__term-go { flex: 0 0 auto; padding: 6px 10px; border: 0; border-radius: 6px; background: var(--ai-hover); color: var(--ai-hover-ink); font: inherit; font-size: 12px; cursor: pointer; }
.try__term-go:hover { background: var(--ai-rule); }
.try__term-go:disabled { opacity: 0.5; cursor: default; }
.try__tasks-bar { margin-top: 8px; }
.try__pane-link { display: block; margin-top: 6px; color: var(--ai-hover-ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) {
  .try__side { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); margin: 0; padding: 8px 12px; border-left: 1px solid var(--ai-rule); background: var(--ai-card-bg); z-index: 25; }
  .try__tab span { display: none; }
  .try__tab { padding: 5px; }
}
.desk__show { flex: 0 0 auto; margin-left: 8px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.desk__show:hover, .desk__show[aria-pressed="true"] { background: var(--ai-hover); color: var(--ai-hover-ink); }
.desk { flex: 0 0 300px; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-left: 12px; border-left: 1px solid var(--ai-rule); color: var(--ai-strong); }
.desk[hidden] { display: none; }
.desk__head { display: flex; align-items: center; gap: 8px; height: 40px; min-height: 40px; padding: 0 10px; }
.desk__head strong { font-size: 13px; font-weight: 600; }
.desk__x { margin-left: auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.desk__x:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.desk__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 16px; scrollbar-width: thin; }
.desk__label { margin: 12px 4px 4px; color: var(--ai-muted); font-size: 11px; line-height: 16px; }
.desk__empty { margin: 0 4px 6px; color: var(--ai-faint); font-size: 12px; line-height: 16px; }
.desk__dir { padding: 3px 6px; color: var(--ai-muted); font-size: 12px; line-height: 18px; font-family: var(--ai-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk__row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.desk__row:hover, .desk__row.is-on { background: var(--ai-hover); }
.desk__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ai-mono); font-size: 12px; }
.desk__mark { flex: 0 0 14px; width: 14px; font-family: var(--ai-mono); font-size: 10px; font-weight: 600; text-align: center; }
.desk__mark[data-kind="A"] { color: #4ade80; }
.desk__mark[data-kind="M"] { color: #fbbf24; }
.desk__file-name { margin: 10px 4px 4px; color: var(--ai-muted); font-family: var(--ai-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk__diff, .desk__file { margin: 0; padding: 8px; border-radius: 8px; background: var(--ai-code-bg); color: var(--ai-code-ink); white-space: pre; overflow: auto; max-height: 40vh; font-family: var(--ai-mono); font-size: 12px; line-height: 17px; }
.desk__diff .is-add { color: #4ade80; }
.desk__diff .is-del { color: #f87171; }
.desk__scopes { display: flex; gap: 4px; margin: 0 0 6px; }
.desk__scopes button { padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); font: inherit; font-size: 12px; cursor: pointer; }
.desk__scopes button[aria-pressed="true"], .desk__scopes button:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.desk__about { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ai-faint); font-size: 11px; }
.desk__row:has(.desk__about) { flex-wrap: wrap; }
.desk__new { margin: 6px 4px 0; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ai-muted); font: inherit; font-size: 12px; cursor: pointer; }
.desk__new:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.desk__skill { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.desk__skill[hidden] { display: none; }
.desk__skill input, .desk__skill textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--ai-rule); border-radius: 6px; background: transparent; color: var(--ai-strong); font: inherit; font-size: 12px; }
.desk__skill textarea { min-height: 120px; resize: vertical; font-family: var(--ai-mono); }
.desk__skill input:focus, .desk__skill textarea:focus { outline: 2px solid rgba(76, 110, 245, 0.45); outline-offset: -1px; }
.desk__skill-bar { display: flex; gap: 6px; }
.desk__skill-bar button { padding: 4px 8px; border: 0; border-radius: 6px; background: var(--ai-hover); color: var(--ai-hover-ink); font: inherit; font-size: 12px; cursor: pointer; }
@media (max-width: 960px) {
  .desk { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 100%); margin: 0; padding-bottom: 8px; border-left: 1px solid var(--ai-rule); background: var(--canvas); z-index: 25; }
}
.try {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 16px;
  background: var(--canvas);
  font-family: var(--ai-font);
  -webkit-font-smoothing: antialiased;
}
.try__stage { flex: 1 1 auto; min-height: 0; }
.try__hold { width: min(var(--ai-col), 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
/* Длинные строки (код, URL) не должны расширять колонку чата: без этого на телефоне
   лента распирает .try за пределы #view и кнопка отправки уезжает за край экрана. */
.try,
.try__body,
.try__chat,
.try__hold,
.try__log,
.try__plate { min-width: 0; max-width: 100%; }
.try :is(.try__agent, .try__user, .try__say, .try__mind, .try__think, .try__detail, .try__group) { min-width: 0; max-width: 100%; }
.try :is(.try__agent, .try__say, .try__mind, .try__detail) :is(pre, table, img, iframe, video) { max-width: 100%; }
.try :is(.try__agent, .try__say, .try__mind) pre { overflow-wrap: anywhere; }
.try__plate {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  border-radius: var(--ai-radius-box);
  background: var(--ai-plate-bg);
  color: var(--ai-plate-ink);
}
.try__files { display: flex; align-items: center; gap: 16px; width: 100%; overflow-x: auto; padding-bottom: 16px; }
.try__chip { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px; max-width: 160px; padding: 4px 12px; border-radius: 8px; background: var(--ai-chip-bg); flex: 0 0 auto; }
.try__chip-name { max-width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: var(--ai-size); font-weight: 400; line-height: 20px; }
.try__chip-meta { display: flex; align-items: center; gap: 8px; color: var(--ai-muted); font-size: 9px; font-weight: 400; line-height: 20px; }
.try__shot { position: relative; width: 51px; height: 49px; min-width: 51px; border-radius: 8px; background: var(--ai-chip-bg); overflow: hidden; flex: 0 0 auto; }
.try__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.try__x { position: absolute; top: 4px; right: 4px; z-index: 1; width: 16px; height: 16px; border: 0; border-radius: 999px; background: var(--ai-plate-bg); color: var(--ai-plate-ink); opacity: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.try__chip:hover .try__x, .try__shot:hover .try__x, .try__x:focus-visible { opacity: 1; }
@media (hover: none) { .try__x { opacity: 1; } }
.try__text { box-sizing: border-box; width: 100%; min-height: 20px; max-height: 400px; margin: 0 0 18px; overflow: auto; outline: none; color: inherit; font-size: 16px; font-weight: 400; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.try__text:empty:before { content: attr(data-placeholder); color: var(--ai-muted); pointer-events: none; font-size: 16px; font-weight: 400; line-height: 20px; }
.try__bar { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.try__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.try__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.try__plus, .try__mic, .try__model { border: 0; background: transparent; color: var(--ai-muted); cursor: pointer; transition: background-color 75ms, color 75ms; }
.try__plus, .try__mic { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0; }
.try__plus { width: 24px; height: 24px; }
.try__mic { width: 32px; height: 32px; }
.try__plus:hover, .try__mic:hover, .try__model:hover { color: var(--ai-hover-ink); background: var(--ai-hover); }
.try__mic.is-on { color: var(--ai-danger); }
.try__mic.is-on svg { fill: currentColor; }
.try__mic.is-busy svg { animation: try-spin .8s linear infinite; }
.try__model { display: inline-flex; align-items: center; gap: 4px; max-width: 160px; min-width: 0; padding: 0 6px; border: 1px solid transparent; border-radius: 100px; font-size: var(--ai-size); font-weight: 400; line-height: 20px; white-space: nowrap; }
.try__model span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__model svg { width: 1em; height: 1em; }
.try__key { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; min-width: 0; padding: 0 8px; border: 1px solid var(--ai-rule); border-radius: 100px; background: transparent; color: var(--ai-muted); cursor: pointer; font-size: 12px; line-height: 18px; white-space: nowrap; transition: background-color 75ms, color 75ms; }
.try__key[hidden] { display: none; }
.try__key span { overflow: hidden; text-overflow: ellipsis; }
.try__key:hover, .try__key[aria-expanded="true"] { color: var(--ai-hover-ink); background: var(--ai-hover); }
.try__key-pop input { width: 100%; margin: 8px 0 0; padding: 7px 9px; border: 1px solid var(--ai-rule); border-radius: 8px; background: var(--ai-plate); color: var(--ai-strong); font: inherit; font-size: 13px; }
.try__key-pop input:focus { outline: none; border-color: var(--ai-strong); }
.try__key-note { margin: 6px 0 0; font-size: 11px; line-height: 15px; color: var(--ai-muted); }
.try__key-err { margin: 6px 0 0; font-size: 11px; line-height: 15px; color: var(--ai-danger, #e2564a); }
.try__key-err[hidden] { display: none; }
.try__key-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.try__key-btn { padding: 4px 9px; border: 1px solid var(--ai-rule); border-radius: 999px; background: transparent; color: var(--ai-strong); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; }
.try__key-btn:hover { background: var(--ai-hover); }
.try__status { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ai-muted); font-size: 11px; font-weight: 400; line-height: 20px; transition: opacity 500ms; }
.try__status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try__status i { width: 24px; height: 24px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; }
.try__status.is-gone { opacity: 0; }
.try__send { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--ai-strong); background: transparent; color: var(--ai-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.try__send:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.try__send:disabled { border-color: var(--ai-send-off); color: var(--ai-send-off); cursor: not-allowed; }
.try__send svg, .try__mic svg { width: 16px; height: 16px; }
/* Плашка «Теста ИИ» повторяет поле «Нового чата»: те же размеры, отступы, кнопки и состояния.
   Функциональность прежняя — вложения, выбор модели, ключ, статус, контекст, микрофон. */
.try .try__plate {
  width: min(560px, 100%);
  margin: 0 auto;
  gap: 8px;
  min-height: 112px;
  padding: 14px 12px 10px 16px;
  border-radius: 18px;
  background: #eeeeee;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .try .try__plate {
  background: #1c1c1c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.try .try__text {
  min-height: 52px;
  max-height: 140px;
  margin: 0;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.4;
}
.try .try__text:empty::before {
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.try .try__bar { gap: 8px; }
.try .try__left,
.try .try__right { gap: 2px; }
.try .try__plus,
.try .try__mic,
.try .try__send { width: 34px; height: 34px; border-radius: 10px; }
.try .try__plus,
.try .try__mic,
.try .try__ring { color: var(--muted); }
.try .try__plus svg,
.try .try__mic svg { width: 18px; height: 18px; }
.try .try__model {
  height: 34px;
  gap: 6px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
}
.try .try__send { border: 0; color: var(--muted); }
.try .try__send.is-ready { background: var(--ink); color: var(--canvas); }
.try .try__status { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  /* Микрофон ведёт себя как .home__mic: на наведении меняется только подложка. */
  .try .try__mic:hover { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); }
  :root[data-theme="dark"] .try .try__mic:hover { background: color-mix(in srgb, #f3f3f3 7%, #181818); }
  .try .try__plus:hover,
  .try .try__model:hover,
  .try .try__ring:hover,
  .try .try__model[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); color: var(--ink); }
  :root[data-theme="dark"] .try .try__plus:hover,
  :root[data-theme="dark"] .try .try__model:hover,
  :root[data-theme="dark"] .try .try__ring:hover,
  :root[data-theme="dark"] .try .try__model[aria-expanded="true"] { background: color-mix(in srgb, #f3f3f3 7%, #181818); color: #f3f3f3; }
}
.try__plus svg { width: 13px; height: 13px; }
.try__note { margin: 0; font-size: 12px; line-height: 1.3; color: var(--ai-danger); }
.try__note:empty { display: none; }
.try__drop { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: var(--ai-radius-box); background: color-mix(in srgb, #fff 10%, transparent); color: #fff; font-size: var(--ai-size); pointer-events: none; }
.settings {
  width: min(680px, 100%);
  margin: 8px auto 48px;
  display: grid;
  gap: 28px;
  align-content: start;
}
.settings .head h1 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.settings .card { border: 0; }
.modal--set { overflow: hidden; background: rgb(0 0 0 / 58%); }
.set-win {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, calc(100% - 8px));
  height: min(680px, calc(100dvh - 48px));
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 24px 80px rgb(0 0 0 / 50%), inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.set-win__bar { padding: 16px 52px 10px 20px; }
.set-win__bar h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.set-win__body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.set-win::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 231px;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.set-win__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 10px 12px;
  border-right: 1px solid var(--line);
}
.set-win__find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 0;
  margin: 0 2px 8px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.set-win__find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, var(--line)); }
.set-win__tools { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; }
.set-win__tools .set-win__find { flex: 1; margin: 0; }
.set-win__back {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.set-win__back[hidden] { display: none; }
.set-win__find svg { flex: none; }
.mod-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.mod-card {
  display: flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 12px;
  width: 220px;
  max-width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.mod-card svg { flex: none; opacity: .8; }
.set-win__find input,
:root[data-theme="dark"] .set-win__find input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  box-shadow: none;
}
.set-win__nav { display: grid; align-content: start; gap: 2px; overflow: auto; }
.set-win__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.set-win__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-win__item svg { flex: none; opacity: .72; }
.set-win__item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.set-win__item.is-on { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.set-win__item.is-on svg { opacity: 1; }
.set-win__item[hidden] { display: none; }
.set-win__pane { min-width: 0; min-height: 0; overflow: auto; padding: 4px 22px 28px; }
.modal--set .settings { width: min(640px, 100%); margin: 0; gap: 18px; }
.modal--set .settings .head h1 { font-size: 22px; }
@media (max-width: 640px) {
  .modal--set { padding: 0; }
  .set-win { width: 100%; height: 100dvh; border-radius: 0; }
  .set-win__body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); }
  .set-win::before { display: none; }
  .set-win__side { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}
.set-block { display: grid; gap: 8px; }
.set-label { margin: 0 2px; color: var(--muted); font-size: 13px; font-weight: 550; }
.set-panel {
  display: grid;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.set-mods { display: grid; gap: 2px; padding: 8px; }
.set-mods .nav { width: 100%; }
.plan-card { gap: 6px; padding: 18px; }
.plan-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-card__head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.plan-card__price { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.plan-card .muted { margin: 0; font-size: 13px; line-height: 1.4; }
.plan-card .btn { justify-self: start; margin-top: 6px; }
.plan-meter { margin-top: 8px; width: min(260px, 100%); height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.plan-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width 0.2s ease; }
#planBox > .set-panel > .err,
#planBox > .set-panel > .muted { margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.4; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.set-panel > .set-row { margin: 0; padding: 16px 18px; background: transparent; }
.set-panel > .set-row + .set-row { box-shadow: inset 0 1px 0 var(--line); }
.set-row > div:first-child { min-width: 0; }
.set-row h2 { margin: 0; font-size: 14px; font-weight: 650; }
.set-row .muted,
.set-row .err { margin: 2px 0 0; font-size: 13px; line-height: 1.4; }
.set-form { gap: 12px; padding: 18px; }
.set-form h2 { margin: 0; font-size: 15px; font-weight: 650; }
.set-form .btn { margin-top: 4px; justify-self: start; }
.set-panel .btn--ghost,
:root[data-theme="dark"] .set-panel .btn--ghost {
  flex: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 13px;
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.use-card { display: grid; gap: 0; padding: 18px; }
.use-row { display: grid; gap: 10px; }
.use-row + .use-row { padding-top: 18px; border-top: 1px solid var(--line); }
.use-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.use-top h2 { margin: 0; font-size: 16px; font-weight: 650; }
.use-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.use-top span, .use-pct { color: var(--muted); font-size: 13px; white-space: nowrap; }
.talk:not(.is-empty) .home__ask.is-capped,
.home__ask.is-capped,
.aide__form.is-capped {
  min-height: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  box-shadow: none;
}
.home__ask.is-capped > :not(.use-lock),
.aide__form.is-capped > :not(.use-lock) { display: none !important; }
.home__ask.is-capped .use-lock,
.aide__form.is-capped .use-lock {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f4f4f4;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: auto;
}
:root[data-theme="dark"] .home__ask.is-capped .use-lock,
:root[data-theme="dark"] .aide__form.is-capped .use-lock {
  background: #222222;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.work-compose:has(.is-capped) .work-queue,
.home__stack:has(.is-capped) .home__under,
.work-compose:has(.is-capped) .home__under { display: none; }
.use-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.use-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #4c8bf5;
}
.use-note { margin: 0; color: var(--muted); font-size: 13px; }
.set-push { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.set-row select#mailFrom { flex: none; max-width: min(280px, 100%); }
.set-row .pick--select { width: auto; min-width: 168px; max-width: 240px; flex: none; }
.set-panel .pick__btn,
:root[data-theme="dark"] .set-panel .pick__btn,
.set-panel .pick__menu,
:root[data-theme="dark"] .set-panel .pick__menu {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
}
.set-panel .pick__btn,
:root[data-theme="dark"] .set-panel .pick__btn {
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 13px;
}
.set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings .blank { min-height: 240px; }
.ctx {
  position: fixed;
  z-index: 90;
  min-width: 180px;
  max-height: min(360px, calc(100vh - 16px));
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.ctx button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 0 8px 0 10px;
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
}
.ctx button:disabled { opacity: .45; cursor: default; }
.ctx__ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
}
.ctx__ico svg { display: block; }
.ctx__rule {
  height: 0;
  margin: 4px 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
:root[data-theme="dark"] .ctx { background: #242424; border-color: #3a3a3a; color: #f3f3f3; }
:root:not([data-theme="dark"]) .ctx.ctx--side {
  background: #eeeeee;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .ctx.ctx--side {
  background: #181818;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.tip {
  position: fixed;
  z-index: 90;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  white-space: nowrap;
  animation: tip-in .16s ease;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.tip.is-side { animation-name: tip-side; }
@keyframes tip-side {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tip { animation: none; }
}
:root[data-theme="dark"] .tip { background: #242424; border-color: #3a3a3a; }
.tip--dock {
  z-index: 200;
  padding: 7px 12px;
  border: 0;
  border-radius: 12px;
  background: #eeeeee;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
}
:root[data-theme="dark"] .tip--dock { background: #2a2a2a; color: #f3f3f3; }
.ctx--dock { min-width: 0; }
.ctx--dock button { justify-content: center; text-align: center; }
#view:has(.pass-page) { min-height: 100dvh; }
.pass-page { display: grid; gap: 14px; align-content: start; min-height: 100%; padding-bottom: 112px; }
.pass-hello {
  display: grid;
  place-items: center;
  min-height: min(460px, calc(100dvh - 240px));
  padding: 12px 0 28px;
}
.pass-hello__card {
  width: min(440px, 100%);
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .pass-hello__card {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.pass-hello__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.pass-hello__copy { display: grid; gap: 8px; }
.pass-hello h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 450;
  letter-spacing: -0.02em;
}
.pass-hello__copy p {
  margin: 0;
  max-width: 36ch;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: 14px;
  line-height: 1.5;
}
.pass-hello__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pass-hello__err { margin: 0; color: var(--danger, #c4493c); font-size: 13px; }
.pass-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-find { display: flex; align-items: center; min-width: 0; flex: 1; }
.pass-find__btn,
.pass-find__x {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.pass-find__btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e2e2e2;
}
:root[data-theme="dark"] .pass-find__btn,
:root[data-theme="dark"] .pass-find__field { background: #181818; }
.pass-find__field {
  display: none;
  align-items: center;
  gap: 8px;
  width: min(480px, 100%);
  height: 40px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: #e2e2e2;
  color: var(--ink);
}
.pass-find.is-open .pass-find__btn { display: none; }
.pass-find.is-open .pass-find__field { display: flex; }
.pass-find__field svg { flex: none; color: var(--muted); }
.pass-find__field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}
.pass-find__field input::-webkit-search-cancel-button { display: none; }
.pass-find__x { width: 32px; height: 32px; border-radius: 999px; color: var(--muted); }
.pass-find__x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.pass-bar .side-pass__create {
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0;
  border-radius: 999px;
}
.pass-bar .side-pass__create svg { width: 18px; height: 18px; margin-left: 0; }
.pass-top, .task-top { display: none; }
.pass-list, .pass-rows { display: grid; width: 100%; }
.pass-rows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pass-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-width: 0;
  position: relative;
  min-height: 52px;
  padding: 10px 6px 10px 14px;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.pass-line::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: calc(-20px - 8px);
  right: calc(-20px - 8px);
  border-radius: 14px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.pass-line > * { position: relative; z-index: 1; min-width: 0; }
.pass-line.is-on { background: transparent; }
.pass-line.is-on::before { background: #f3f3f3; }
:root[data-theme="dark"] .pass-line.is-on { background: transparent; }
:root[data-theme="dark"] .pass-line.is-on::before { background: #222; }
.pass-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.pass-mark svg {
  width: 22px;
  height: 22px;
  opacity: .82;
}
.pass-mark svg.is-tint { opacity: 1; }
.pass-body {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.pass-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.pass-title {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pass-meta {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eeeeee;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  font-size: 13px;
  line-height: 1.2;
}
:root[data-theme="dark"] .pass-pill {
  background: #181818;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.pass-meta .pass-pill {
  gap: 5px;
  min-width: 0;
  min-height: 26px;
  padding: 2px 8px;
  color: var(--ink);
  font-size: 12px;
}
:root[data-theme="dark"] .pass-meta .pass-pill { color: var(--ink); }
.pass-meta .pass-pill > svg { width: 13px; height: 13px; color: var(--ink); }
.pass-pill > svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.pass-pill > span:not(.pass-dots) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pass-line > .pass-pill--secret,
.pass-line > .pass-side {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  align-self: center;
  gap: 8px;
  min-width: max-content;
  max-width: none;
  padding-right: 2px;
}
.pass-link {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 999px;
  background: #eeeeee;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  text-decoration: none;
}
:root[data-theme="dark"] .pass-link {
  background: #181818;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.pass-link svg { width: 15px; height: 15px; }
button.pass-pill {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.pass-pill.is-copied {
  justify-content: center;
  gap: 0;
}
button.pass-pill.is-copied svg { width: 14px; height: 14px; color: var(--ink); }
.pass-pill__acts { display: inline-flex; align-items: center; gap: 0; flex: none; }
.pass-dots,
.pass-plain {
  color: currentColor;
  font-size: 13px;
  line-height: 1.2;
}
.pass-dots { letter-spacing: .16em; }
.pass-plain {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pass-pill__copy,
.pass-pill__eye {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pass-pill__copy svg,
.pass-pill__eye svg { width: 14px; height: 14px; }
.pass-pill__copy.is-on,
.pass-pill__eye.is-on { color: var(--ink); }
.pass-more {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pass-folders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pass-folder, .pass-folder-form input {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
}
.pass-folder { cursor: pointer; }
.pass-folder.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pass-folder--add { background: transparent; }
.pass-folder-form input { width: 160px; }
.pass-edit__foot { width: 100%; align-items: center; }
.pass-edit__switches { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.pass-edit__foot .pass-switch { margin-left: 0; }
.pass-edit__foot .pass-kind { margin-left: 16px; }
.pass-hist { display: grid; margin-top: 4px; }
.pass-hist__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  position: relative;
  padding: 10px 0;
}
.pass-hist__row::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.pass-hist__row:first-child::before { top: 50%; }
.pass-hist__row:last-child::before { bottom: 50%; }
.pass-hist__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  justify-self: center;
  background: var(--card);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 55%, transparent);
  position: relative;
  z-index: 1;
}
.pass-hist__row.is-now .pass-hist__dot { background: var(--ink); box-shadow: none; }
.pass-hist__main { display: grid; gap: 2px; min-width: 0; }
.pass-hist__pass {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pass-hist__when { color: var(--muted); font-size: 12px; }
.pass-hist__acts { display: flex; align-items: center; gap: 2px; }
.pass-share { display: grid; gap: 12px; }
.pass-share__opts { display: grid; gap: 8px; }
.pass-share .pass-switch { margin-left: 0; width: 100%; justify-content: space-between; }
.pass-share__link { display: flex; gap: 8px; align-items: center; }
.pass-share__link input { flex: 1; min-width: 0; }
.pass-share > .btn { justify-self: start; }
#passCardBox, #passServerBox { display: grid; gap: 12px; }
.pass-split { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
.pass-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}
.pass-kind .pick--select { width: auto; min-width: 168px; flex: none; }
.pass-edit__foot .pass-kind .pick__btn { width: auto; min-width: 168px; padding: 8px 12px; }
.pass-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.pass-switch input {
  appearance: none;
  width: 36px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5d7dc;
  position: relative;
  cursor: pointer;
  flex: none;
}
.pass-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.pass-switch input:checked { background: #1b1d22; }
.pass-switch input:checked::after { transform: translateX(14px); background: #fff; }
.pass-switch input:focus { outline: none; border-color: transparent; }
:root[data-theme="dark"] .pass-switch input { background: #3a3a3a; }
:root[data-theme="dark"] .pass-switch input::after { background: #f3f3f3; }
:root[data-theme="dark"] .pass-switch input:checked { background: #f3f3f3; }
:root[data-theme="dark"] .pass-switch input:checked::after { background: #181818; }
@media (hover: hover) and (pointer: fine) {
  .pass-line:hover::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .pass-line.is-on:hover::before { background: #f3f3f3; }
  :root[data-theme="dark"] .pass-line.is-on:hover::before { background: #222; }
  .pass-more:hover, .pass-pill__copy:hover, .pass-pill__eye:hover, .pass-link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
  .pass-chip:hover, .task-chip:hover { color: var(--ink); }
  .pass-icon:hover, .field__mark:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .pass-icon.is-on:hover { background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
  :root[data-theme="dark"] .pass-icon.is-on:hover { background: #2a2a2a; }
  .pass-trash__row:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}
.pass-trash { display: grid; gap: 2px; }
.pass-trash__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  cursor: pointer;
}
.pass-trash__row b { font-weight: 650; overflow-wrap: anywhere; }
.pass-trash__row span { flex: none; color: var(--muted); font-size: 13px; }
.pass-peek, .mail-acts {
  position: fixed;
  z-index: 30;
  left: calc(var(--side) + (var(--dock) * 2) + 16px);
  right: 88px;
  bottom: 16px;
  margin: 0;
  border: 0;
}
.pass-peek {
  z-index: 52;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.pass-peek > div { flex: 1 1 140px; min-width: 0; }
:root[data-theme="dark"] .pass-peek {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.mail-acts {
  z-index: 52;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  right: 16px;
  background: var(--card);
}
:root[data-theme="dark"] .mail-acts { background: #181818; }
.mail:has(.mail-acts:not([hidden])) { padding-bottom: 96px; }
.mail-acts b { flex: none; font-weight: 650; }
.mail-acts__row { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.mail-acts button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}
.mail-acts button:disabled { cursor: default; opacity: .45; }
.pass-peek b { display: block; overflow-wrap: anywhere; }
#peekPass { max-height: 4.5em; overflow: auto; }
.pass-secret { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pass-secret > div { min-width: 0; }
.pass-secret input { width: auto; flex: 1; min-width: 0; }
.pass-eye {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.pass-eye.is-on { border-color: var(--accent); color: var(--accent); }
.gen-pass {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.gen-pass__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-wrap: anywhere;
  max-height: 120px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.45;
  user-select: text;
}
.gen-meta { margin: 0; color: var(--muted); font-size: 13px; }
.gen-meta b { color: var(--ink); font-weight: 650; }
.gen-meta b.is-weak { color: var(--danger); }
.gen-sets { display: grid; gap: 8px; }
.card--gen {
  width: min(520px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 0;
}
.modal .card.card--nest {
  background: var(--card);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .modal .card.card--nest {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .gen-pass__text {
  background: #242424;
  border-color: #3a3a3a;
  color: #f3f3f3;
}
.pass-screen {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 38%);
  overflow: auto;
}
.pass-screen .card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  display: grid;
  gap: 12px;
  background: #eeeeee;
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .pass-screen .card {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.pass-screen h2 { padding-right: 28px; }
.pass-screen textarea {
  min-height: 88px;
  max-height: 240px;
  resize: vertical;
}
.pass-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
}
.pass-x svg { display: block; }
@media (max-width: 699px) {
  .pass-peek, .mail-acts { left: 16px; }
  .pass-peek { flex-direction: column; align-items: stretch; }
  .pass-top, .task-top {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px 2px;
  }
  .pass-chip, .task-chip {
    flex: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
  }
  .pass-chip.is-on, .task-chip.is-on {
    background: color-mix(in srgb, var(--ink) 10%, var(--card));
    color: var(--ink);
  }
  :root[data-theme="dark"] .pass-chip.is-on,
  :root[data-theme="dark"] .task-chip.is-on {
    background: #2c2c2c;
    color: #f3f3f3;
  }
}
.head { display: grid; gap: 4px; }
.head h1 { font-size: 26px; }
.head p { color: var(--muted); }
.today {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.today__card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.today__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 6px;
}
.today__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.today__all {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 4px 2px;
}
.today__row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 8px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.today__row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.today__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.today__row.is-new .today__name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-1px);
}
.today__meta { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.today__row.is-late .today__meta { color: #b85c5c; }
.today__empty { margin: 0; padding: 8px 8px 12px; color: var(--muted); }
@media (max-width: 860px) {
  .today { grid-template-columns: 1fr; }
}
.work:has(.home) { min-height: calc(100dvh - (var(--dock) * 2)); }
.work:has(.talk) {
  height: calc(100dvh - (var(--dock) * 2));
  overflow: hidden;
}
#view:has(.home),
#view:has(.talk) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.room {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.room__stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.room__browser {
  position: relative;
  flex: none;
  width: max(520px, calc(100% - 480px));
  min-width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: -20px;
  border-radius: 16px 0 0 16px;
  background: #eeeeee;
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--ink) 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
#view:not(:has(.talk:not(.is-empty))) .room__browser { margin-bottom: -20px; }
:root[data-theme="dark"] .room__browser {
  background: #181818;
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.room__edge {
  position: absolute;
  z-index: 2;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px 0 0 16px;
  background: transparent;
  cursor: col-resize;
}
.room__edge:hover,
.room__edge:active,
.room__edge:focus,
.room__edge:focus-visible {
  background: transparent;
  outline: none;
}
.room.is-drag .room__view iframe { pointer-events: none; }
.room__top {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.room__mode {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.room__mode button {
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.room__mode button.is-on { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.room__mode button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.room__browser.is-ide .room__nav,
.room__browser.is-ide .room__find,
.room__browser.is-ide .room__pick,
.room__browser.is-ide .room__size,
.room__browser.is-ide .room__out,
.room__browser.is-ide .room__more { display: none; }
.room__browser.is-ide .room__view { place-items: stretch; }
.room__browser.is-code .room__nav,
.room__browser.is-code .room__find,
.room__browser.is-code .room__pick,
.room__browser.is-code .room__size,
.room__browser.is-code .room__out,
.room__browser.is-code .room__more { display: none; }
.room__browser.is-code .room__view { place-items: stretch; }
.room__code {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg);
  color: var(--ink);
}
.room__tree {
  width: 220px;
  flex: 0 0 220px;
  overflow: auto;
  border-right: 1px solid var(--line);
  padding: 8px 0;
}
.room__tree p { margin: 0; padding: 8px 12px; color: var(--muted); }
.room__tree button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.room__tree button.is-on { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.room__pad { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.room__pad-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.room__pad-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room__pad textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  resize: none;
  background: transparent;
  color: inherit;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 12px;
}
.room__nav { display: flex; flex: none; gap: 2px; }
.room__nav-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.room__nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.room__nav-btn:disabled { opacity: .35; cursor: default; }
.room__find {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  border-radius: 9px;
  background: #e2e2e2;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .room__find {
  background: #101010;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.room__find-mark {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
}
.room__find-mark > * { grid-area: 1 / 1; }
.room__find svg { flex: none; display: block; }
.room__find-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
}
.room__find-glass[hidden],
.room__find-icon[hidden] { display: none !important; }
.room__find:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.room__find input,
.room__find input:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 32px;
  appearance: none;
  -webkit-appearance: none;
}
.room__find input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .room__find:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}
:root[data-theme="dark"] .room__find input,
:root[data-theme="dark"] .room__find input:focus {
  background: transparent;
  border: 0;
  color: #f3f3f3;
  box-shadow: none;
}
.room__size { position: relative; flex: none; }
.room__sizes {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .14),
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.room__sizes[hidden] { display: none; }
:root[data-theme="dark"] .room__sizes {
  background: #242424;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .4),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room__fit-now {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="dark"] .room__fit-now {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room__fit-now svg { display: block; }
.room__fit {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.room__fit:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.room__fit.is-on {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="dark"] .room__fit.is-on {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room__fit svg,
.room__more svg { display: block; }
.room__view {
  flex: 1;
  min-height: 0;
  margin: 0 0 10px 10px;
  display: grid;
  place-items: center;
  border-radius: 12px 0 0 12px;
  background: #e2e2e2;
  color: var(--muted);
  font-size: 13px;
}
:root[data-theme="dark"] .room__view { background: #101010; }
.room__view p { margin: 0; }
.room__view.is-live { display: flex; flex-direction: column; overflow: hidden; }
.room__view.is-review {
  display: block;
  overflow: auto;
  padding: 12px;
  color: var(--ink);
  text-align: left;
}
.room__sheet { display: flex; flex-direction: column; gap: 4px; min-height: 100%; }
.room__file-name { margin: 0 0 8px; font-weight: 550; }
.room__back,
.room__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.room__back { width: auto; align-self: flex-start; color: var(--muted); }
.room__file:hover,
.room__back:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.room__diff { display: flex; flex-direction: column; gap: 2px; }
.room__line {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.room__line.is-add { color: #3c9d62; }
.room__line.is-del { color: #d4534b; }
.room__line.is-ctx { color: var(--muted); }
.room__view { position: relative; }
.room__view > iframe.room__ide.room__ide-park {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.room__browser.is-ide .room__device { visibility: hidden; position: absolute; width: 0; height: 0; }
.room__view iframe,
.room__device iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #101010;
}
.room.is-full { gap: 0; }
.room.is-full .room__stage { display: none; }
.room.is-full .room__browser {
  flex: 1;
  width: 100% !important;
  min-width: 0;
  max-width: none;
}
.room__dock {
  display: none;
  flex: none;
  align-self: flex-start;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  margin: 8px 12px 0 0;
  padding: 2px;
  border-radius: 8px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="dark"] .room__dock {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room.is-browser-off .room__browser { display: none; }
.room.is-browser-off .room__dock { display: flex; }
.room__dock-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.room__dock-btn svg { display: block; width: 16px; height: 16px; }
.room__dock-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.room--hands .room__hand {
  height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="dark"] .room--hands .room__hand {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room--hands .room__hand.is-on {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: none;
}
.room__out,
.room__more,
.room__pick {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="dark"] .room__out,
:root[data-theme="dark"] .room__more,
:root[data-theme="dark"] .room__pick {
  background: #242424;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.room__pick.is-on {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: none;
}
:root[data-theme="dark"] .room__pick.is-on {
  background: #f3f3f3;
  color: #111;
}
.room__out:disabled,
.room__pick:disabled { opacity: .45; cursor: default; }
.room__view.is-live.is-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #d5d5d5;
}
:root[data-theme="dark"] .room__view.is-live.is-fit { background: #0c0c0c; }
.room__device {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.room__view.is-live:not(.is-fit) .room__device {
  flex: 1 1 auto;
  min-height: 0;
  width: calc(100% + 1px);
  height: auto;
  margin: 0 0 0 -1px;
}
.room__view.is-fit .room__device {
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  background: #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.room__view.is-fit .room__device iframe {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  transform-origin: top left;
}
@media (max-width: 699px) {
  .app:has(.room) { padding-right: var(--dock); }
  #view:has(.room) { padding-right: 20px; }
  .room { flex-direction: column; }
  .room__browser {
    width: 100% !important;
    height: 220px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 16px;
  }
  .room__view { margin: 0 10px 10px; border-radius: 12px; }
  .room__edge { display: none; }
  .room.is-browser-off .room__dock {
    align-self: flex-end;
    margin: 0 12px 12px 0;
  }
}
#view:has(.talk:not(.is-empty)) { padding-bottom: 0; }
.talk {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.talk__log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(792px, 100%);
  margin: 0 auto;
  padding: 8px 0 18px;
  position: relative;
}
.oh-tape { display: flex; flex-direction: column; gap: 16px; }
.oh-tape article { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oh-tape .oh-kind { margin: 0; color: var(--muted); font-size: 12px; }
.oh-tape p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.oh-frame { display: block; width: min(100%, 720px); height: auto; border-radius: 12px; background: #111; }
.talk:not(.is-empty) .talk__log { padding-bottom: 18px; }
.room .talk:not(.is-empty) .work-compose {
  flex: none;
  align-self: center;
  width: min(760px, 100%);
  margin: 8px auto 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room .talk:not(.is-empty) .work-compose .home__ask { width: 100%; margin: 0; }
.work-queue {
  border-radius: 16px;
  padding: 8px 8px 4px;
  background: #e6e6e6;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .work-queue {
  background: #141414;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.work-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.work-queue__x,
.work-queue__icon,
.work-queue__go {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.work-queue__x { width: 24px; height: 24px; font-size: 16px; }
.work-queue__go { flex: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.work-queue__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.work-queue__x:hover,
.work-queue__go:hover,
.work-queue__icon:hover { color: var(--ink); }
.work-queue__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0 0 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, #f4f4f4);
}
:root[data-theme="dark"] .work-queue__row { background: #1c1c1c; }
.work-queue__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.room .talk:not(.is-empty) .home__ask { margin-top: 0; margin-bottom: 0; }
.talk.is-empty .talk__log { display: none; }
.talk:not(.is-empty) .home__hello { display: none; }
.talk:not(.is-empty) .home__ask {
  flex: none;
  align-self: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: min(760px, 100%);
  min-height: 0;
  gap: 2px;
  margin: 10px auto 12px;
  padding: 4px 6px;
  border-radius: 22px;
}
.talk:not(.is-empty) .home__ask.is-tall { align-items: flex-end; }
.talk:not(.is-empty) .home__row,
.talk:not(.is-empty) .home__tools,
.talk:not(.is-empty) .home__acts { display: contents; }
.talk:not(.is-empty) .home__clip { order: 1; }
.talk:not(.is-empty) .home__model { order: 3; }
.talk:not(.is-empty) .home__mic { order: 4; }
.talk:not(.is-empty) .home__send { order: 5; }
.talk:not(.is-empty) .talk__err { order: 6; flex: 1 0 100%; }
.talk:not(.is-empty) .home__ask textarea,
.talk:not(.is-empty) .home__ask textarea:focus,
:root[data-theme="dark"] .talk:not(.is-empty) .home__ask textarea,
:root[data-theme="dark"] .talk:not(.is-empty) .home__ask textarea:focus,
html[data-tint="1"][data-theme="dark"] .talk:not(.is-empty) .home__ask textarea,
html[data-tint="1"][data-theme="dark"] .talk:not(.is-empty) .home__ask textarea:focus {
  order: 2;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 22px;
  max-height: 160px;
  padding: 6px 4px;
  line-height: 22px;
}
.room .home__ask {
  min-height: 0;
  gap: 0;
  padding: 4px 6px;
  border-radius: 22px;
}
.room .home__row {
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
.room .home__model { flex: none; height: 32px; }
.room .home__ask.is-tall .home__row { align-items: flex-end; }
.room .home__ask textarea,
.room .home__ask textarea:focus,
:root[data-theme="dark"] .room .home__ask textarea,
:root[data-theme="dark"] .room .home__ask textarea:focus,
html[data-tint="1"][data-theme="dark"] .room .home__ask textarea,
html[data-tint="1"][data-theme="dark"] .room .home__ask textarea:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 22px;
  max-height: 160px;
  padding: 6px 4px;
  line-height: 22px;
  scrollbar-width: auto;
}
.room .home__ask textarea::-webkit-scrollbar { display: block; width: auto; height: auto; }
@media (max-width: 699px) {
  .talk:not(.is-empty) .home__ask { width: 100%; }
}
.talk__err {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}
.talk__wait { color: var(--muted); }
.work-turn { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.work-meta { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.work-copy {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.work-copy:hover,
.work-copy.is-done { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.work-file {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 2px 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.work-file:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.work-when { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }
.work-took {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
p.work-took { cursor: default; }
.work-took .work-chev,
.work-fold__btn .work-chev { flex: none; transform: rotate(-90deg); }
.work-took.is-open .work-chev,
.work-fold.is-open > .work-fold__btn .work-chev { transform: none; }
.work-trace { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.work-fold__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.work-fold__body {
  margin: 4px 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
}
.work-plan { display: grid; gap: 8px; white-space: normal; }
.work-plan p,
.work-live .work-plan p { display: block; margin: 0; white-space: normal; }
.work-plan__head { font-weight: 600; }
.work-plan__label { margin: 10px 0 0; }
.work-now { margin: 0; color: var(--muted); font-size: 13px; }
.work-beat { display: block; margin: 2px 0 0; color: var(--ink); font-size: 15px; font-weight: 400; line-height: 1.45; white-space: pre-wrap; }
.work-live p.work-beat { display: block; }
.room .work-text,
.room .work-note,
.room .work-live { font-size: 15px; font-weight: 400; }
.room .work-head { margin: 10px 0 4px; font-size: 15px; font-weight: 650; }
.room .aide__msg.work-text strong { font-weight: 650; }
.room .aide__msg.work-text p { margin: 0; }
.room .aide__msg.work-text p + p { margin-top: 10px; }
.work-key {
  display: inline-block;
  margin: 0 1px;
  padding: 0 5px;
  border-radius: 5px;
  background: #e6e6e6;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: 1px;
}
:root[data-theme="dark"] .work-key { background: #2a2a2a; color: #ececec; }
.work-used { margin: 2px 0 8px; color: var(--muted); font-size: 14px; font-weight: 450; }
.talk .aide__msg--user.work-user {
  align-self: stretch;
  width: 100%;
  max-width: none;
  padding: 12px 16px;
  border-radius: 16px;
  background: #f4f4f4;
  font-weight: 400;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: pointer;
}
.talk .aide__msg--user.work-user:hover,
.talk .aide__msg--user.work-user:focus {
  background: #f4f4f4;
}
:root[data-theme="dark"] .talk .aide__msg--user.work-user:hover,
:root[data-theme="dark"] .talk .aide__msg--user.work-user:focus {
  background: #222222;
}
.talk .work-user > p:not(.work-quote-line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.talk .work-user.is-edit {
  cursor: text;
}
.talk .work-user.is-edit > p:not(.work-quote-line),
.talk .work-user.is-edit > .work-user-body { display: none; }
.talk .work-user.is-run {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.work-halt {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 32px;
  height: 32px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
  cursor: pointer;
}
.work-halt:hover {
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}
.work-user__edit {
  display: block;
  width: 100%;
  max-height: 50vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  resize: none;
  outline: none;
  overflow: auto;
}
.work-user__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.work-user__bar .work-halt { margin: 0; }
.work-user__send {
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--canvas);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.work-user__send:disabled {
  background: transparent;
  color: var(--muted);
  cursor: default;
}
.work-pair { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: none; }
.talk .work-pair > :not(.work-user) { margin-left: 16px; margin-right: 16px; }
.talk.talk--ai,
.talk.talk--oh {
  --oh-text: var(--ink);
  --oh-muted: var(--muted);
}
.talk.talk--ai .talk__log,
.talk.talk--oh .talk__log { gap: 0; padding: 8px 22px 28px; }
.talk.talk--ai .work-pair,
.talk.talk--oh .work-pair { gap: 0; }
.talk.talk--ai .work-pair > *,
.talk.talk--oh .work-pair > * { margin-left: 0; margin-right: 0; }
.talk.talk--ai .oh-user,
.talk.talk--oh .oh-user,
.talk.talk--oh .work-user.oh-user {
  align-self: flex-end;
  width: fit-content;
  max-width: min(100%, 640px);
  background: #f4f4f4;
  color: var(--ink);
  box-shadow: none;
}
.talk.talk--oh .work-user.oh-user.is-edit { width: min(100%, 640px); }
.talk.talk--oh .work-user > p:not(.work-quote-line) {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
:root[data-theme="dark"] .talk.talk--ai .oh-user,
:root[data-theme="dark"] .talk.talk--oh .oh-user,
:root[data-theme="dark"] .talk.talk--oh .work-user.oh-user {
  background: #2a2a2a;
  color: #ececec;
}
.talk.talk--ai .oh-agent,
.talk.talk--oh .oh-agent { color: var(--ink); }
.talk.talk--oh .oh-agent.work-text,
.talk.talk--oh .work-user-body { font-size: 14px; line-height: 24px; }
.talk.talk--oh .oh-agent.work-text p,
.talk.talk--oh .work-user-body p { display: block; margin: 0; line-height: 24px; overflow-wrap: break-word; word-break: normal; }
.talk.talk--oh .oh-agent,
.talk.talk--oh .oh-fold-body { overflow-wrap: break-word; word-break: normal; }
.talk.talk--oh .work-key,
.talk.talk--oh .work-path { white-space: nowrap; }
.talk.talk--oh .oh-agent.work-text p + p,
.talk.talk--oh .work-user-body p + p { margin-top: 12px; }
.talk.talk--oh .work-h1 { margin: 16px 0 12px; font-size: 20px; font-weight: 550; line-height: 28px; }
.talk.talk--oh .work-h2 { margin: 16px 0 10px; font-size: 18px; font-weight: 550; line-height: 24px; letter-spacing: -0.01em; }
.talk.talk--oh .work-h3 { margin: 12px 0 8px; font-size: 16px; font-weight: 550; line-height: 24px; }
.talk.talk--oh .work-h4,
.talk.talk--oh .work-h5,
.talk.talk--oh .work-h6 { margin: 12px 0 6px; font-size: 14px; font-weight: 550; line-height: 22px; }
.talk.talk--oh .work-h5,
.talk.talk--oh .work-h6 { font-weight: 450; color: var(--muted); }
.talk.talk--oh .work-head:first-child { margin-top: 0; }
.talk.talk--oh .work-alert { margin: 12px 0; padding: 8px 12px; border-left: 4px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 0 6px 6px 0; }
.talk.talk--oh .work-alert__title { margin: 0 0 4px; font-weight: 650; }
.talk.talk--oh .work-check { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 3px; font-size: 11px; line-height: 12px; text-align: center; vertical-align: -1px; }
.talk.talk--oh .work-check.is-on { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.talk.talk--oh .work-code-wrap { position: relative; margin: 0 0 12px; }
.talk.talk--oh .work-code-wrap .work-code { margin: 0; }
.talk.talk--oh .work-code-lang { display: block; margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.talk.talk--oh .work-code-copy { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.talk.talk--oh .work-shot { display: block; max-width: 100%; margin: 8px 0; border-radius: 8px; }
.talk.talk--oh .work-list .work-list { margin: 4px 0; }
.talk.talk--oh .work-quote-block {
  margin: 8px 0 12px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--muted);
}
.talk.talk--oh .work-rule { margin: 14px 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.talk.talk--oh .work-table-wrap {
  margin: 16px 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  overflow: auto;
}
.talk.talk--oh .work-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.talk.talk--oh .work-table th {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.talk.talk--oh .work-table th,
.talk.talk--oh .work-table td { border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.talk.talk--oh .work-table th:last-child,
.talk.talk--oh .work-table td:last-child { border-right: 0; }
.talk.talk--ai .oh-fold > button,
.talk.talk--oh .oh-fold > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
}
.talk.talk--ai .oh-fold > button:hover,
.talk.talk--oh .oh-fold > button:hover { color: var(--ink); }
.talk.talk--ai .oh-fold:not(.is-open) > .oh-fold-body,
.talk.talk--oh .oh-fold:not(.is-open) > .oh-fold-body { display: none; }
.talk .oh-wait { margin: 8px 0; color: var(--muted); font-size: 14px; }
.talk.talk--ai .oh-fold-body,
.talk.talk--oh .oh-fold-body { color: var(--muted); }
.talk.talk--oh .oh-fold-body.oh-think {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.talk.talk--oh .oh-fold__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk.talk--oh .oh-fold__side { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.talk.talk--oh .oh-spin {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-top-color: var(--ink);
  border-radius: 50%;
  display: inline-block;
  animation: oh-spin .8s linear infinite;
}
@keyframes oh-spin { to { transform: rotate(360deg); } }
.talk.talk--oh .oh-card { margin: 6px 0 6px 22px; }
.talk.talk--oh .oh-card__title { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.talk.talk--oh .oh-card__out {
  margin: 0;
  white-space: pre-wrap;
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.talk.talk--oh .oh-tasks-card {
  margin: 8px 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.talk.talk--oh .oh-tasks-card__title {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 13px;
  font-weight: 550;
}
.talk.talk--oh .work-code .is-key { color: #569cd6; }
.talk.talk--oh .work-code .is-str { color: #ce9178; }
.talk.talk--oh .work-code .is-note { color: #6a9955; }
.talk.talk--oh .work-code .is-tag { color: #569cd6; }
.talk.talk--oh .work-code .is-num { color: #b5cea8; }
@keyframes stream-word-fade {
  from { opacity: 0.15; }
  to { opacity: 1; }
}
.stream-word-fade {
  animation: stream-word-fade 280ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .stream-word-fade { animation: none; }
}
.talk.talk--oh .work-details { margin: 8px 0; }
.talk.talk--oh .work-details summary { cursor: pointer; }
.talk.talk--oh .work-user-body.is-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.talk.talk--oh .work-more {
  display: none;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 2px 10px;
  cursor: pointer;
}
.talk.talk--oh .oh-user:hover .work-more { display: inline-flex; }
.talk .work-user.is-edit > .work-more { display: none; }
.talk.talk--oh .work-copy--hover {
  display: none;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.talk.talk--oh .oh-agent:hover .work-copy--hover { display: inline-flex; }
.talk.talk--oh .work-path {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.talk.talk--oh .oh-think p { margin: 0; line-height: 24px; }
.talk.talk--oh .oh-think p + p { margin-top: 12px; }
.talk.talk--oh .oh-think ul,
.talk.talk--oh .oh-think ol { margin: 8px 0; padding-left: 1.25em; }
.talk.talk--oh .oh-think li { margin: 2px 0; }
.talk.talk--oh .oh-think-code {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.12);
  white-space: pre-wrap;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] .talk.talk--ai .oh-fold-body,
:root[data-theme="dark"] .talk.talk--oh .oh-fold-body { color: #cfcfcf; }
:root[data-theme="dark"] .talk.talk--oh .oh-fold-body.oh-think { color: var(--ink); }
.talk .work-pair .work-user.is-run { position: sticky; top: 0; z-index: 2; }
.talk .work-pair .work-user.is-run.is-edit { position: static; }
.talk .work-user p { margin: 0; }
.talk .work-user .work-back {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}
.talk .work-user .work-back:hover { color: var(--ink); }
.talk .work-user .work-back:disabled { cursor: default; opacity: .45; }
.room .work-user .work-quote-line {
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 28%, transparent);
  color: var(--muted);
  font-size: 13px;
}
.work-quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 100%;
  margin: 0 4px 6px;
  padding: 8px 8px 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.work-quote[hidden] { display: none; }
.work-quote p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.work-quote button {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.work-links { margin: 2px 0 0; }
.work-links summary { cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink); }
.work-links a { display: block; margin-top: 6px; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; color: var(--muted); }
.work-links a:hover { color: var(--ink); }
.work-reply {
  position: fixed;
  z-index: 40;
  transform: translate(-50%, calc(-100% - 8px));
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: #242424;
  color: #f4f4f4;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.work-edits {
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.work-edits p { margin: 0 0 4px; font-size: 13px; font-weight: 550; }
.work-edit { display: grid; padding: 3px 0; font-size: 13px; }
.work-edit > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-edit__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.work-edit__btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-edit__btn .work-chev { transform: rotate(-90deg); }
.work-edit.is-open .work-chev { transform: none; }
.work-diff {
  margin: 6px 0 4px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #141414;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.work-diff__line {
  display: grid;
  grid-template-columns: 36px 14px minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px;
  white-space: pre;
}
.work-diff__n { color: #6e6e6e; text-align: right; }
.work-diff__t { overflow: hidden; text-overflow: ellipsis; }
.work-diff__line.is-add { background: rgba(60, 157, 98, 0.18); color: #c8f0d4; }
.work-diff__line.is-del { background: rgba(212, 83, 75, 0.18); color: #ffd0cb; }
.work-diff__line.is-ctx { color: #d5d5d5; }
.work-counts { display: inline-flex; gap: 6px; margin-left: auto; font-weight: 550; }
.work-add { color: #3c9d62; font-weight: 550; }
.work-del { color: #d4534b; font-weight: 550; }
.work-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.work-open__ask { font-size: 14px; font-weight: 600; line-height: 1.35; }
.work-open__url {
  max-width: 100%;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.work-open__yes {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.work-open__yes:disabled { cursor: default; opacity: .45; }
.work-stuck { margin-top: 8px; }
.work-open__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.work-open__no {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.work-open__no:hover { color: var(--ink); }
.work-open__no:disabled { cursor: default; opacity: .45; }
.work-vault,
.work-pay,
.work-desk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.work-vault__ask,
.work-vault__where,
.work-desk__ask,
.work-desk__where { margin: 0; }
.work-vault__where,
.work-desk__where { color: var(--muted); }
.work-asks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 8px 0 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.work-asks label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.work-asks input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.work-asks input:focus-visible,
.work-asks button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.work-asks__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.work-asks .work-open__yes,
.work-asks .work-open__no { min-height: 44px; }
.room__view.is-plan { color: var(--ink); }
.room__brief {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 18px 32px;
  color: var(--ink);
}
.room__brief h1 {
  margin: 4px 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}
.room__brief h2 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}
.room__brief h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.room__brief p,
.room__brief li {
  font-size: 14px;
  line-height: 1.5;
}
.room__brief p { margin: 0 0 10px; }
.room__brief .room__lead {
  margin: 0 0 18px;
  color: var(--muted);
}
.room__brief ul,
.room__brief ol {
  margin: 0 0 12px;
  padding: 0 0 0 18px;
}
.room__brief li { margin: 4px 0; }
.room__callout {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.room__plan {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 12px 14px 14px;
  box-sizing: border-box;
}
.room__plan textarea {
  flex: 1;
  min-height: 180px;
  resize: none;
  overflow: auto;
  font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.room__plan-go:disabled,
.room__plan-no:disabled { cursor: default; opacity: .45; }
.work-live { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
.work-live > p { display: flex; align-items: center; gap: 8px; margin: 0; }
.work-slow { color: var(--muted); }
.work-text { white-space: normal; }
.work-head { margin: 14px 0 6px; font-size: 15px; font-weight: 650; line-height: 1.35; }
.work-text .work-head:first-child,
.work-note .work-head:first-child { margin-top: 0; }
.work-line { margin: 0 0 16px; }
.work-list { margin: 0 0 10px; padding: 0 0 0 18px; list-style: disc; }
.work-code { margin: 0 0 12px; padding: 10px 12px; overflow: auto; font-size: 13px; line-height: 1.45; border-radius: 8px; background: var(--line); }
ol.work-list { list-style: decimal; }
.work-list li { margin: 3px 0; }
.work-table-wrap { margin: 4px 0 16px; max-width: 100%; overflow-x: auto; }
.work-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.work-table th,
.work-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  white-space: normal;
  overflow-wrap: normal;
}
.work-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.work-table tbody tr:last-child td { border-bottom: 0; }
.work-table .is-right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.work-table .is-center { text-align: center; }
.work-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.work-link:hover { color: var(--ink); }
.work-note { color: var(--ink); margin-top: 6px; }
#chatList .nav,
#workList .nav { min-width: 0; }
#chatList .nav__dot,
#workList .nav__dot { display: none; }
#chatList .nav > span,
#workList .nav > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-ready {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
@media (min-width: 700px) {
  .app.is-side-fold #chatList .nav__dot,
  .app.is-side-fold #workList .nav__dot { display: block; }
}
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 0;
}
.home__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.home__when { display: grid; gap: 2px; min-width: 0; }
.home__day { font-size: 15px; font-weight: 600; }
.home__date,
.home__time { color: var(--muted); font-size: 15px; }
.home__time { font-variant-numeric: tabular-nums; }
.home__tune {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #eeeeee;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.home__tune svg { display: block; }
:root[data-theme="dark"] .home__tune { background: #181818; }
.home__hello {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.home__greet {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(680px, 100%);
  transform: translateY(-7vh);
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 520;
  font-display: swap;
  src: url("/fonts/newsreader-520.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url("/fonts/newsreader-450.woff2") format("woff2");
}
.home__hello h1 {
  margin: 0;
  min-height: 1.15em;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 520;
  font-synthesis: none;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}
html[data-os="mac"] .home__hello h1 {
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
.home__hello h1.is-in { letter-spacing: 0; }
.home__mist {
  display: inline-block;
  white-space: pre;
  letter-spacing: -0.02em;
  transform-origin: center center;
  animation: home-mist 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes home-mist {
  0% { opacity: 0; filter: blur(18px); transform: scale(1.55); }
  42% { opacity: .72; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home__mist { animation: none; filter: none; transform: none; }
}
.home__ask {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 112px;
  margin-top: 10px;
  padding: 14px 12px 10px 16px;
  border-radius: 18px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .home__ask {
  background: #1c1c1c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.home__ask textarea,
.home__ask textarea:focus,
:root[data-theme="dark"] .home__ask textarea,
:root[data-theme="dark"] .home__ask textarea:focus,
html[data-tint="1"][data-theme="dark"] .home__ask textarea,
html[data-tint="1"][data-theme="dark"] .home__ask textarea:focus {
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  max-height: 140px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1.4;
}
.home__ask textarea::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.home__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.home__model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}
.talk--ai .home__model { cursor: default; }
.home__model-effort { color: #7a7a7a; font-weight: 500; }
:root:not([data-theme="dark"]) .home__model-effort { color: #8b909a; }
.home__model svg { display: block; color: var(--muted); }
.aim {
  position: fixed;
  z-index: 92;
  min-width: 228px;
}
.aim__menu,
.aim__sub {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: none;
}
:root[data-theme="dark"] .aim__menu,
:root[data-theme="dark"] .aim__sub,
:root[data-theme="dark"] .aim__tip {
  background: #242424;
  border-color: #3a3a3a;
  color: #f3f3f3;
  box-shadow: none;
}
.aim__row,
.aim__opt,
.aim__add {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 450;
  text-align: left;
  cursor: pointer;
}
.aim__meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #8d8d8d;
  font-weight: 450;
}
.aim__meta svg,
.aim__opt svg,
.aim__mark { display: block; flex: none; }
.aim__mark { width: 14px; color: inherit; }
.aim__switch {
  width: 30px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: #d7d7d7;
  position: relative;
}
:root[data-theme="dark"] .aim__switch { background: #3f3f3f; }
.aim__switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
  transition: transform .12s ease;
}
.aim__switch.is-on { background: #ececec; }
.aim__switch.is-on i { transform: translateX(12px); }
.aim__fly {
  position: absolute;
  left: 100%;
  padding-left: 6px;
  min-width: 168px;
}
.aim__fly.is-left { left: auto; right: 100%; padding-left: 0; padding-right: 6px; }
.aim__sub { min-width: 168px; }
.aim__sub--models { min-width: 228px; }
.aim__find {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0 2px 2px;
  padding: 0 8px;
}
.aim__q,
.aim__q:focus {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.aim__q::placeholder { color: #8d8d8d; }
.aim__rule { height: 0; margin: 4px 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.aim__tip {
  position: absolute;
  left: 100%;
  width: 196px;
  margin-left: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: none;
}
.aim__tip.is-left { left: auto; right: 100%; margin-left: 0; margin-right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .aim__row.is-hot,
  .aim__row:hover,
  .aim__opt:hover,
  .aim__add:hover { background: #ececec; }
  :root[data-theme="dark"] .aim__row.is-hot,
  :root[data-theme="dark"] .aim__row:hover,
  :root[data-theme="dark"] .aim__opt:hover,
  :root[data-theme="dark"] .aim__add:hover { background: #3a3a3a; }
}
.home__acts {
  display: flex;
  align-items: center;
  gap: 2px;
}
.home__clip,
.home__mic,
.home__send {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.home__clip svg,
.home__mic svg,
.home__send svg { display: block; }
.home__mic.is-on {
  background: var(--ink);
  color: var(--canvas);
}
.home__mic.is-on svg rect { fill: currentColor; }
.home__send:disabled { cursor: default; opacity: .35; }
.home__ask.is-ready .home__send {
  background: var(--ink);
  color: var(--canvas);
  opacity: 1;
}
.home__stack {
  position: relative;
  width: min(560px, 100%);
}
.home__stack > .home__ask { width: 100%; }
.work-compose { position: relative; }
.work-context {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.work-context__ring {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.work-context__ring svg { display: block; }
.work-context__ring.is-hot { color: #c4554a; }
.work-context__card {
  position: absolute;
  z-index: 6;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(320px, 78vw);
  padding: 12px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: 0 12px 40px color-mix(in srgb, #000 28%, transparent);
}
.work-context__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.work-context__pct {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.work-context__sum,
.work-context__note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.work-context__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.work-context__list li {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
}
.work-context__list i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
}
.work-context__list b {
  font-weight: 500;
  color: var(--muted);
}
.home__under {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}
.talk:not(.is-empty) .home__stack {
  width: min(760px, 100%);
  flex: none;
  align-self: center;
  margin: 8px auto 22px;
  z-index: 4;
  background: var(--canvas);
}
.talk:not(.is-empty) .home__stack > .home__ask { margin: 0; }
.home__under[hidden] { display: none; }
.home__folder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  margin: 0;
  padding: 0 8px 0 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
}
.home__folder svg { display: block; flex: none; }
.home__folder span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home__board { display: none; }
.home.is-tune .home__hello { display: none; }
.home.is-tune .home__board { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .home__tune:hover,
  .home__clip:hover,
  .home__mic:hover,
  .home__model:hover,
  .home__model[aria-expanded="true"],
  .home__folder:hover,
  .home__folder[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); }
  :root[data-theme="dark"] .home__tune:hover,
  :root[data-theme="dark"] .home__clip:hover,
  :root[data-theme="dark"] .home__mic:hover,
  :root[data-theme="dark"] .home__model:hover,
  :root[data-theme="dark"] .home__model[aria-expanded="true"],
  :root[data-theme="dark"] .home__folder:hover,
  :root[data-theme="dark"] .home__folder[aria-expanded="true"] { background: color-mix(in srgb, #f3f3f3 7%, #181818); }
  .home__mic.is-on:hover { background: #2c3038; color: #f3f3f3; }
  :root[data-theme="dark"] .home__mic.is-on:hover { background: #d5d5d5; color: #111; }
}
@media (max-width: 699px) {
  .home__hello h1 { font-size: 32px; }
}
.work:has(.blank) { min-height: calc(100dvh - (var(--dock) * 2)); }
#view:has(.blank) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#view:has(> .blank) > .blank,
.inv:has(.blank) { flex: 1; min-height: 0; }
.inv:has(.blank) { grid-template-rows: auto auto minmax(0, 1fr); }
.blank {
  display: grid;
  place-items: center;
  min-height: 240px;
}
.inv:has(.blank) #invBody > .blank { height: 100%; }
.blank__card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(240px, 100%);
  padding: 36px 28px 32px;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  color: var(--muted);
  text-align: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.blank__card strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.fault__card { width: min(420px, 100%); }
.blank__card svg {
  width: 28px;
  height: 28px;
  color: var(--ink);
}
.blank__card img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
:root[data-theme="dark"] .blank__card {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}

.chips, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 10px;
}
button.chip { cursor: pointer; }
.chip.is-on { border-color: var(--accent); color: var(--accent); }

.kpis, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpis article, .project { display: grid; gap: 6px; }
.project .btn { justify-self: start; }
.kpis article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.kpis span { color: var(--muted); font-size: 13px; }
.kpis b { font-size: 22px; }

.table-wrap { overflow: auto; border: 0; border-radius: 16px; background: var(--card); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tr[data-open] { cursor: pointer; }

.split { display: grid; grid-template-columns: 280px 1fr; gap: 12px; min-height: 420px; }
.list { display: grid; align-content: start; gap: 6px; }
.studio { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; align-content: stretch; min-width: 0; height: 100%; min-height: 0; }
.studio .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio .btn { width: auto; }
.studio .list__item { width: 100%; color: inherit; font: inherit; }
.studio__body { display: grid; grid-template-columns: var(--studio-list, 240px) 8px minmax(0, 1fr); gap: 8px; align-items: stretch; min-height: 0; height: 100%; }
.studio__list { min-width: 0; }
.studio__grip { cursor: col-resize; border-radius: 99px; background: var(--line); }
.studio__stage { display: flex; gap: 0; min-width: 0; min-height: 0; height: 100%; }
.studio__pane { min-width: 160px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.studio__tabs { display: none; }
.studio__tab { border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }
.studio__tab.is-on { border-color: var(--accent); }
.studio__chat { display: grid; gap: 8px; align-content: start; }
.studio__pane--chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.studio__pane--chat .studio__tasks { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; }
.studio__said { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.studio__tasks { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.studio__tasks li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.studio__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.studio__bar .btn { text-decoration: none; }
.studio__frame { display: grid; justify-items: center; align-items: stretch; min-height: 0; height: calc(100% - 48px); background: #101010; border-radius: 12px; overflow: hidden; }
.studio__frame iframe, .studio__pane--screen iframe, .studio .room__ide { width: 100%; height: 100%; min-height: 280px; border: 0; background: #fff; }
.studio__frame.is-phone iframe { width: 390px; max-width: 100%; height: 700px; border-radius: 24px; }
.studio__pane--ide { display: grid; align-content: start; gap: 8px; }
.studio__pane--ide .room__ide { height: 420px; }
@media (max-width: 699px) {
  .studio__body { display: block; min-height: 0; }
  .studio__grip { display: none; }
  .studio__list { display: none; margin-bottom: 12px; }
  .studio[data-tab="projects"] .studio__list { display: grid; }
  .studio__stage { display: block; min-height: 0; }
  .studio__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .studio__pane { display: none; min-width: 0; }
  .studio[data-tab="chat"] .studio__pane--chat,
  .studio[data-tab="preview"] .studio__pane--preview,
  .studio[data-tab="ide"] .studio__pane--ide,
  .studio[data-tab="screen"] .studio__pane--screen { display: grid; }
}
.list__item {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  display: grid;
  gap: 4px;
}
.list__item.is-on { border-color: var(--accent); }
.msgs { display: grid; gap: 8px; max-height: 420px; overflow: auto; margin: 12px 0; }
.msg { display: grid; gap: 2px; }
.msg--out { justify-items: end; }
.msg time { color: var(--muted); font-size: 12px; }
.stack { display: grid; gap: 8px; }
.is-done { opacity: .6; }
.tasks .rem-item.is-done { opacity: 1; }
.plain { margin: 8px 0; padding-left: 18px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(88px, 150px) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.bar i { display: block; height: 8px; background: var(--line); border-radius: 99px; }
.bar i b { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 88px; }
.chart i { flex: 1; min-width: 2px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; }
.tag { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.mini { height: 4px; margin-top: 4px; background: var(--line); border-radius: 99px; }
.mini i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.mini.is-hot i { background: var(--danger); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager { display: flex; gap: 8px; align-items: center; }
.form { display: grid; gap: 10px; }
.check { display: flex; gap: 8px; align-items: center; }
.check input { width: auto; }
.mono { font-variant-numeric: tabular-nums; word-break: break-all; }

@media (hover: hover) and (pointer: fine) {
  .nav, .btn, .side-pass__create, .pass-x, .pass-eye, .ctx button, .pick__btn, .list__item, .card.project, tr[data-open], button.chip, .rem-main, .rem-check, .rem-bubble, .rem-info, .rem-chip {
    transition: background .12s ease, color .12s ease, border-color .12s ease, filter .12s ease;
  }
  .nav:hover, button.chip:hover, .rem-main:hover, .rem-bubble:hover, .rem-chip:hover, .work-fold__row:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .work-fold__row:hover .work-fold__folder,
  .work-fold__row:focus-within .work-fold__folder { display: none; }
  .work-fold__row:hover .work-fold__chev,
  .work-fold__row:focus-within .work-fold__chev { display: block; }
  .work-fold__row:hover .work-fold__add,
  .work-fold__row:focus-within .work-fold__add { opacity: 1; }
  .work-fold__add:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
  .app.is-side-fold .work-fold__row:hover .work-fold__folder,
  .app.is-side-fold .work-fold__row:focus-within .work-fold__folder { display: block; }
  .app.is-side-fold .work-fold__chev { display: none; }
  .nav:hover .nav__dot { opacity: .72; }
  .nav:hover > svg { opacity: 1; }
  .nav.is-on:hover .nav__dot { opacity: 1; }
  .rem-info:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .rem-bubble.is-on:hover { background: var(--accent); }
  .rem-check:hover { border-color: var(--accent); }
  .nav.is-on, .nav.is-on:hover { background: var(--bg); }
  .btn:hover, .side-pass__create:hover { filter: brightness(.9); }
  .btn:disabled:hover { filter: none; }
  .btn--ghost:hover, .pass-x:hover, .pass-eye:hover, .pick__btn:hover {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink);
    filter: none;
  }
  .ctx button:hover {
    background: #ececec;
    color: inherit;
    filter: none;
  }
  :root[data-theme="dark"] .ctx button:hover { background: #3a3a3a; color: #f3f3f3; }
  .ctx button:disabled:hover,
  :root[data-theme="dark"] .ctx button:disabled:hover { background: transparent; color: inherit; }
  .list__item:hover, .card.project:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  tr[data-open]:hover td, .inv tbody tr:hover td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
@media (hover: none), (pointer: coarse) {
  .work-fold__add { opacity: 1; }
}
.nav.is-drop,
.nav.is-drop:hover,
.nav.is-on.is-drop,
.nav.is-on.is-drop:hover,
.side-pass__trash.is-drop,
.side-pass__trash.is-drop:hover,
.task-chip.is-drop,
.pass-chip.is-drop {
  background: color-mix(in srgb, var(--ink) 14%, var(--card));
  transition: background .12s ease;
}
:root[data-theme="dark"] .side .nav.is-drop,
:root[data-theme="dark"] .side .nav.is-drop:hover,
:root[data-theme="dark"] .side .nav.is-on.is-drop,
:root[data-theme="dark"] .side .nav.is-on.is-drop:hover,
:root[data-theme="dark"] .side .side-pass__trash.is-drop,
:root[data-theme="dark"] .side .side-pass__trash.is-drop:hover {
  background: #343434;
  color: #f3f3f3;
}
.nav:focus-visible, .btn:focus-visible, .list__item:focus-visible, .rem-main:focus-visible, .rem-check:focus-visible, .rem-bubble:focus-visible, .rem-info:focus-visible, .rem-chip:focus-visible, .bell__main:focus-visible, .bell__check:focus-visible, .bell__drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .nav, .btn, .side__fold, .list__item, .card.project, tr[data-open], input, select, textarea { transition: none; }
  .app.is-rise,
  #gate.is-ready .gate__ready-mark,
  #gate.is-ready .gate__ask,
  #gate.is-ready .gate__note,
  #gate.is-leave { animation: none; }
}

[hidden] { display: none !important; }
.form__note, .empty, .mesh-ok { color: var(--muted); font-size: 13px; }
.srv-bar { display: grid; gap: 14px; min-width: 0; max-width: 100%; }
.srv-bar__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}
.srv-bar__title { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; }
.srv-bar__title h1 { font-size: 26px; }
.srv-bar__title p { color: var(--muted); }
.srv-bar__tools, .srv-bar__filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.srv-bar__tools { flex: 1 1 520px; max-width: 100%; justify-content: flex-end; }
.srv-bar__filters { justify-content: flex-start; gap: 8px 16px; }
.srv-bar__filters .chips + .chips { padding-left: 16px; border-left: 1px solid var(--line); }
.srv-bar .chips { min-width: 0; }
.srv-bar .chip { background: var(--bg); }
.srv-bar__dns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.srv-dns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.srv-dns > span { color: var(--muted); font-size: 13px; font-weight: 650; min-width: 3.2rem; }
.node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.node--child { margin-left: 28px; }
.node__ord { display: grid; gap: 4px; }
.node__open, .xbtn, .acct-pick, .name-pick__btn, .mesh-arch button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.xbtn, .mesh-arch button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
}
.xbtn:disabled { opacity: .35; cursor: default; }
.node__open { min-width: 0; padding: 0; }
.node__name { font-weight: 650; }
.node__sub, .node__via span, .node__stat span { color: var(--muted); font-size: 13px; }
.node__via { display: grid; min-width: 0; }
.node__stat { grid-column: 2; }
.node__act, .acct-picks, .mesh-arch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.node__act { justify-self: end; }
.wl-row { display: grid; gap: 6px; }
.look-prev {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg);
}
.look-prev.is-off { opacity: .45; }
.look-prev__top { font-weight: 700; }
.look-prev__sub { color: var(--muted); font-size: 13px; }
.node-fields, .node-happ { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.node__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.node__bars { display: grid; gap: 8px; }
.node__cell { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.node__cell b { display: block; word-break: break-all; }
.node__cell span { color: var(--muted); font-size: 12px; }
.node__cell.is-hot b { color: var(--danger); }
.meter { display: grid; gap: 4px; }
.meter__top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
.meter__track { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.meter__fill.is-hot { background: var(--danger); }
.node-install__cmd {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  font-size: 13px;
}
.card--sheet { width: min(640px, 100%); display: grid; gap: 12px; position: relative; }
.xbtn.modal__x {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  text-align: center;
  cursor: pointer;
}
.card--gate:has(.modal__x) { position: relative; }
.card--gate:has(.modal__x) > h2 { padding-right: 36px; }
.xbtn.modal__x svg { display: block; }
.toast {
  position: fixed;
  z-index: 70;
  right: 16px;
  bottom: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.name-pick {
  position: fixed;
  z-index: 80;
  display: grid;
  max-height: 220px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.name-pick__btn, .acct-pick { padding: 8px 10px; }
.acct-pick {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 100%;
}
.acct-pick span { color: var(--muted); font-size: 12px; word-break: break-all; }
.tag--dead, .tag--none { color: var(--danger); }
.mesh-line { margin: 4px 0; }
.nodes { display: grid; gap: 8px; }
.rem-head { display: grid; gap: 12px; }
.rem-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; }
.rem-lists { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.rem-bubble {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  line-height: 1.2;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rem-bubble.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rem-bubble--add { width: 36px; padding: 6px 0; font-size: 18px; line-height: 1; }
.rem-bubble-form input { width: 148px; border-radius: 999px; padding: 6px 12px; }
.rem-list-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rem-push { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rem-card { display: grid; gap: 4px; }
.rem-add {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.rem-compose { display: grid; min-width: 0; }
.rem-compose-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rem-compose-top input { flex: 1; min-width: 0; }
.rem-compose-notes, .rem-compose-tools { display: none; }
.rem-add.is-open .rem-compose-notes { display: block; }
.rem-add.is-open .rem-compose-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 8px; }
.rem-compose-notes { font-size: 14px; padding-top: 0; padding-bottom: 4px; }
.rem-compose-notes::placeholder { color: var(--muted); }
.rem-info {
  display: none;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  font-weight: 650;
  line-height: 1;
  flex: 0 0 auto;
}
.rem-add.is-open .rem-info { display: grid; }
.rem-chip {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink);
}
.rem-add input { border: 0; border-radius: 0; background: transparent; padding: 12px 0; }
.rem-add input:focus { border-color: transparent; }
.rem-add .rem-at {
  display: none;
  width: min(240px, 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}
.rem-add.is-date .rem-at { display: block; }
.rem-add .rem-at:focus { border-color: var(--accent); }
.rem-dot, .rem-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  flex: 0 0 auto;
  padding: 0;
}
.rem-dot { display: block; margin-top: 13px; }
.rem-check {
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  color: var(--accent-ink);
}
.rem-check svg { display: none; width: 14px; height: 14px; }
.rem-check.is-on,
.rem-check.is-press {
  background: var(--accent);
  border-color: var(--accent);
}
.rem-check.is-on svg,
.rem-check.is-press svg { display: block; }
.rem-check.is-on.is-lift,
.rem-check.is-press.is-lift {
  background: transparent;
  border-color: var(--muted);
}
.rem-check.is-on.is-lift svg,
.rem-check.is-lift svg { display: none; }
.rem-list, .rem-done { display: grid; }
.rem-item + .rem-item { border-top: 1px solid var(--line); }
.tasks #remList .rem-item + .rem-item { border-top: 0; }
.tasks #remList .rem-item { position: relative; cursor: pointer; }
.tasks #remList .rem-item::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: calc(-20px - 8px);
  right: calc(-20px - 8px);
  border-radius: 14px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.tasks #remList .rem-draft::before,
.tasks #remList .rem-item:focus-within:has(.rem-title-edit)::before,
.tasks #remList .rem-item:focus-within:has(.rem-notes-edit)::before {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.tasks #remList .rem-item > * { position: relative; z-index: 1; }
.tasks #remList .rem-item:has(.pick__menu:not([hidden])),
.tasks #remList .rem-item:has(.rem-draft__time:not([hidden])) { z-index: 4; }
.rem-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-radius: 10px;
}
.rem-tools { position: relative; display: flex; gap: 2px; align-items: center; }
.rem-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--t-muted, var(--muted));
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.rem-icon svg { display: block; overflow: visible; }
.rem-icon.rem-subadd {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 2px);
}
@media (hover: hover) and (pointer: fine) {
  .tasks #remList .rem-item:hover .rem-subadd,
  .tasks #remList .rem-item:focus-within .rem-subadd { display: grid; }
}
@media (hover: none) {
  .rem-icon.rem-subadd { display: grid; }
}
.rem-icon.is-on { color: var(--t-ink, var(--ink)); background: color-mix(in srgb, currentColor 12%, transparent); }
.tasks #remList .rem-group { display: grid; }
.tasks #remList .rem-item.is-sub { padding-left: 34px; }
.tasks #remList > .rem-item.is-out {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.tasks #remList .rem-draft.is-sub .rem-draft__tools { display: none; }
.tasks #remList .rem-title:not(.rem-title-edit),
.tasks #remList .rem-notes:not(.rem-notes-edit) { user-select: none; cursor: text; }
.tasks #remList .rem-item.is-nest::before,
.tasks #remList .rem-group.is-nest > .rem-item::before { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.tasks #remList .rem-group.is-drag .rem-row { visibility: hidden; }
.tasks #remList .rem-group.is-drag .rem-item::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tasks #remList .rem-item.is-drag .rem-row { visibility: hidden; }
.tasks #remList .rem-item.is-drag::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.task-drag {
  position: fixed;
  z-index: 70;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 12px 28px color-mix(in srgb, #000 24%, transparent);
}
:root[data-theme="dark"] .task-drag { background: #181818; color: #f3f3f3; }
body.is-task-drag { user-select: none; cursor: grabbing; }
body.is-task-drag .tasks #remList .rem-item.is-drag,
body.is-task-drag .tasks #remList .rem-item.is-drag::before { cursor: grabbing; }
.tasks #remList .rem-item.is-flash::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rem-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.rem-title { font-weight: 500; overflow-wrap: anywhere; }
.rem-item.is-done .rem-title { color: var(--muted); }
.rem-notes, .rem-when { font-size: 13px; }
.rem-notes { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-when { color: var(--accent); }
.rem-when.is-late { color: var(--danger); }
.rem-edit { display: grid; gap: 10px; padding: 0 0 12px 32px; }
.rem-del { color: var(--danger); }
.rem-done { margin-top: 4px; }
.rem-done summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
@media (hover: hover) and (pointer: fine) {
  .xbtn, .node__open, .acct-pick, .name-pick__btn, .mesh-arch button {
    transition: background .12s ease, border-color .12s ease;
  }
  .xbtn:hover, .node__open:hover, .acct-pick:hover, .name-pick__btn:hover, .mesh-arch button:hover {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xbtn, .node__open, .acct-pick, .name-pick__btn, .mesh-arch button { transition: none; }
}
@media (max-width: 699px) {
  .app { grid-template-columns: 1fr; }
  .pass-line { column-gap: 8px; padding: 8px 8px 8px 12px; }
  .work:has(.blank) { min-height: 0; }
  #view:has(.blank) { flex: none; }
  .modal, .pass-screen { left: 0; }
  .pass-peek, .mail-acts { left: 16px; }
  .set-pair { grid-template-columns: 1fr; }
  .set-row { align-items: stretch; flex-direction: column; }
  .set-panel > .set-row .btn,
  .set-panel > .set-row .set-push { align-self: flex-start; }
  .set-row .pick--select { width: 100%; min-width: 0; max-width: none; }
  .set-panel > .set-row select#mailFrom { width: 100%; max-width: none; }
  .tint__row { align-items: stretch; flex-direction: column; }
  .tint__ctrl { width: 100%; }
  .split, .grid2, .bar, .node-fields, .node-happ { grid-template-columns: 1fr; }
  .node { grid-template-columns: auto minmax(0, 1fr); }
  .node__act { grid-column: 1 / -1; }
  #nodesHome,
  #nodesHome .stack { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .srv-bar__top { display: grid; grid-template-columns: minmax(0, 1fr); }
  .srv-bar__tools { justify-content: stretch; align-items: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .srv-bar__tools .btn { width: 100%; min-width: 0; white-space: normal; line-height: 1.25; }
  .srv-bar__filters { align-items: stretch; }
  .srv-bar__dns { grid-template-columns: 1fr; }
  .srv-bar .chip { min-height: 36px; }
  .rem-head { align-items: stretch; }
  .rem-edit { padding-left: 0; }
  .rem-push .btn, .rem-list-tools .btn { flex: 1 1 auto; }
  .rem-bubble { max-width: 100%; }
}

.tasks .fault {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 280px);
  padding: 12px 0 36px;
}
.tasks {
  --t-bg: transparent;
  --t-card: var(--card);
  --t-line: var(--line);
  --t-ink: var(--ink);
  --t-muted: var(--muted);
  --t-late: #b85c5c;
  --t-pill: color-mix(in srgb, var(--ink) 8%, var(--card));
  --t-btn: var(--ink);
  --t-btn-ink: var(--bg);
  display: grid;
  gap: 16px;
  color: var(--t-ink);
}
:root[data-theme="dark"] .tasks {
  --t-bg: #181818;
  --t-card: #141414;
  --t-line: #2c2c2c;
  --t-ink: #f3f3f3;
  --t-muted: #8e8e8e;
  --t-late: #e7a3a3;
  --t-pill: #2a2a2a;
  --t-btn: #ffffff;
  --t-btn-ink: #111111;
}
:root[data-theme="dark"] #view:has(.tasks) { background: transparent; }
.task-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.task-head__tools { display: flex; align-items: center; gap: 4px; }
.task-seek {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #eeeeee;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.task-seek svg { display: block; }
:root[data-theme="dark"] .task-seek {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.task-seek:hover { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); }
:root[data-theme="dark"] .task-seek:hover { background: color-mix(in srgb, #f3f3f3 7%, #181818); }
.task-more {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-muted);
  cursor: pointer;
}
.task-done-count {
  margin: 22px 0 4px;
  color: var(--t-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.task-done-empty {
  margin: 28px 0 8px;
  color: var(--t-muted);
  font-size: 14px;
  text-align: center;
}
.task-sec { margin-top: 8px; }
.task-sec.is-drop > .task-sec__head,
.task-sec__head.is-drop { border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.task-sec__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 36px;
  cursor: grab;
  user-select: none;
}
.task-sec__name {
  margin: 0;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.task-all { margin-top: 28px; }
.task-all:first-child { margin-top: 0; }
.task-all__name {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.task-all__sub { margin: 16px 0 6px; }
.task-sec__hide {
  position: absolute;
  left: -26px;
  top: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  margin: auto 0;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t-muted);
  cursor: pointer;
}
.task-sec__hide svg { display: block; transform: rotate(90deg); }
.task-sec.is-shut .task-sec__hide svg { transform: none; }
.task-sec.is-shut .task-sec__body { display: none; }
.task-sec.is-drag { opacity: .55; }
.task-pill-btn, .task-submit {
  border: 0;
  background: var(--t-btn);
  color: var(--t-btn-ink);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 650;
}
.task-pill-btn { padding: 10px 16px; white-space: nowrap; }
#taskAddToggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 0;
}
#taskAddToggle svg { display: block; width: 18px; height: 18px; }
.task-submit { width: 100%; padding: 12px 16px; font-size: 16px; }
.task-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.task-stat {
  display: grid;
  gap: 6px;
  background: var(--t-card);
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
}
.task-stat span { color: var(--t-muted); font-size: 13px; }
.task-stat b { font-size: 32px; font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; }
.task-form {
  display: grid;
  gap: 12px;
  background: var(--t-card);
  border: 0;
  border-radius: 16px;
  padding: 16px;
}
.task-form h2 { font-size: 16px; font-weight: 650; }
.task-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-field { display: grid; gap: 6px; min-width: 0; }
.task-field span { color: var(--t-muted); font-size: 13px; }
.tasks .task-input {
  width: 100%;
  background: var(--t-card);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--t-ink);
}
.tasks .task-input:focus { border-color: #6d6d6d; }
.task-check { display: flex; gap: 8px; align-items: center; }
.task-check input { width: auto; accent-color: var(--t-ink); }
.task-filters, .task-folders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-folder-on { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.task-folder {
  border: 1px solid var(--t-line);
  background: var(--t-card);
  color: var(--t-ink);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-folder.is-on {
  background: var(--t-btn);
  color: var(--t-btn-ink);
  border-color: var(--t-btn);
  font-weight: 650;
}
.task-folder--add { background: transparent; color: var(--t-muted); }
.task-folder-form { width: 168px; flex: 0 0 auto; max-width: 100%; }
.task-folder-form .task-input { border-radius: 999px; padding: 7px 14px; }
.tasks .tag { border-color: var(--t-line); color: var(--t-muted); }
.task-tab {
  border: 0;
  background: transparent;
  color: var(--t-muted);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.task-tab.is-on { background: var(--t-pill); color: var(--t-ink); font-weight: 650; }
.task-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: var(--t-muted);
  padding: 28px 12px 8px;
}
.task-empty strong { color: var(--t-ink); font-weight: 650; }
.task-empty-ico {
  width: 28px;
  height: 22px;
  margin-bottom: 6px;
  background:
    linear-gradient(var(--t-muted), var(--t-muted)) 0 2px / 18px 2px,
    linear-gradient(var(--t-muted), var(--t-muted)) 0 10px / 26px 2px,
    linear-gradient(var(--t-muted), var(--t-muted)) 0 18px / 16px 2px;
  background-repeat: no-repeat;
}
.task-push { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.task-link { border: 0; background: transparent; color: var(--t-muted); cursor: pointer; padding: 0; }
.task-muted, .task-pri { color: var(--t-muted); font-size: 13px; }
.tasks .rem-when { color: var(--t-muted); }
.tasks .rem-when.is-late { color: var(--t-late); }
.rem-draft .rem-row { align-items: start; }
.rem-draft .rem-check { margin-top: 5px; pointer-events: none; }
.tasks #remList .rem-draft { cursor: text; }
.rem-draft__main { display: grid; gap: 6px; min-width: 0; padding: 2px 0; }
.tasks .rem-main:has(.rem-draft__tools) { display: grid; gap: 6px; }
.tasks .rem-main { cursor: default; }
.tasks .rem-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tasks .rem-meta:empty { display: none; }
.tasks .rem-title,
.tasks .rem-draft__title,
.tasks .rem-title-edit,
:root[data-theme="dark"] .tasks input.rem-draft__title {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--t-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  caret-color: var(--t-ink);
  appearance: none;
  -webkit-appearance: none;
}
.tasks #remList .rem-item.is-sub .rem-title,
.tasks #remList .rem-group:not(:has(> .rem-item.is-sub)) > .rem-item .rem-title {
  font-weight: 450;
}
.tasks #remList .rem-title,
.tasks #remList .rem-title-edit,
.tasks #remList .rem-draft__title,
.tasks #remList .rem-notes {
  max-width: calc(50% + 7ch);
}
.tasks #remList .rem-notes {
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.4;
}
.tasks .rem-title-edit,
.tasks .rem-notes-edit {
  cursor: text;
  user-select: text;
  overflow: visible;
  outline: none;
}
.tasks .rem-draft__title::placeholder { color: var(--t-muted); font-weight: 400; }
.tasks .rem-draft__title:focus,
.tasks .rem-title-edit:focus,
.tasks .rem-notes-edit:focus,
.tasks .rem-draft__title:focus-visible,
.tasks .rem-title-edit:focus-visible,
.tasks .rem-notes-edit:focus-visible,
:root[data-theme="dark"] .tasks input.rem-draft__title:focus {
  outline: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.rem-draft__tools { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.rem-draft__cap { font-size: 13px; font-weight: 400; }
.rem-draft__cap:empty { display: none; }
.pick--icon { position: relative; width: auto; }
.pick--icon .pick__btn,
.rem-draft__ico {
  width: auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--t-muted);
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
}
.pick--icon .pick__btn::after { content: none; }
.pick--icon .pick__btn.is-on,
.rem-draft__ico.is-on { color: var(--t-ink); background: color-mix(in srgb, currentColor 14%, transparent); }
.rem-draft__clock { position: relative; }
.rem-draft__time {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  padding: 8px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: var(--t-card);
}
.rem-draft__date,
.rem-draft__time .task-input { width: auto; padding: 7px 10px; border-radius: 12px; }
.tasks .rem-check {
  --task-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm0 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --task-box-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm0 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Crect x='3' y='3' width='10' height='10' rx='2' fill='%23fff'/%3E%3C/svg%3E");
  display: block;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--t-ink) 38%, transparent);
  -webkit-mask: var(--task-box) center / 16px 16px no-repeat;
  mask: var(--task-box) center / 16px 16px no-repeat;
  box-shadow: none;
  line-height: 0;
}
.tasks #remList .rem-item:not(.rem-draft) .rem-row { align-items: start; }
.tasks #remList .rem-item:not(.rem-draft) .rem-check {
  align-self: start;
  margin-top: 6px;
}
.rem-fold {
  position: absolute;
  z-index: 2;
  left: -26px;
  top: 11px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t-muted, var(--muted));
  cursor: pointer;
  pointer-events: none;
}
.rem-fold svg,
.rem-fold__n { grid-area: 1 / 1; }
.rem-fold svg {
  display: block;
  opacity: 0;
  transform: rotate(90deg);
}
.rem-fold__n {
  display: none;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rem-group.is-fold .rem-fold { pointer-events: auto; }
.rem-group.is-fold .rem-fold svg { transform: none; }
.rem-group.is-fold .rem-fold__n { display: block; }
.rem-group.is-fold > .rem-item.is-sub:not(.rem-draft) { display: none; }
.tasks #remList .rem-item:hover .rem-fold,
.rem-fold:focus-visible { pointer-events: auto; }
.tasks #remList .rem-item:hover .rem-fold svg,
.rem-fold:focus-visible svg { opacity: 1; }
.tasks #remList .rem-item:hover .rem-fold__n,
.rem-fold:focus-visible .rem-fold__n { display: none; }
@media (hover: none) {
  .rem-fold { pointer-events: auto; }
  .rem-group:not(.is-fold) .rem-fold svg { opacity: 1; }
}
.tasks #remList .rem-item:not(.rem-draft) .rem-main {
  align-self: start;
  margin-top: 1px;
}
.tasks .rem-check svg,
.tasks .rem-check::after { display: none; }
.tasks .rem-check.is-on,
.tasks .rem-check.is-press {
  background: var(--task-dot, var(--t-ink));
  border: 0;
  -webkit-mask-image: var(--task-box-on);
  mask-image: var(--task-box-on);
}
.tasks .rem-check.is-on.is-lift,
.tasks .rem-check.is-press.is-lift {
  background: color-mix(in srgb, var(--t-ink) 38%, transparent);
  border: 0;
  -webkit-mask-image: var(--task-box);
  mask-image: var(--task-box);
}
.tasks .btn { background: var(--t-btn); color: var(--t-btn-ink); }
.tasks .btn--ghost { background: transparent; color: var(--t-ink); border: 1px solid var(--t-line); }
.tasks .rem-item + .rem-item { border-top-color: var(--t-line); }
.tasks :focus-visible { outline: 2px solid #6a6a6a; outline-offset: 2px; }
:root[data-theme="dark"] .work:has(.tasks) { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .task-tab, .task-folder, .task-pill-btn, .task-submit, .task-link { transition: background .12s ease, color .12s ease, filter .12s ease; }
  .tasks .task-tab:hover { background: color-mix(in srgb, var(--t-ink) 8%, transparent); }
  .tasks .task-tab.is-on:hover { background: var(--t-pill); }
  .tasks .task-folder:hover { background: color-mix(in srgb, var(--t-ink) 8%, var(--t-card)); }
  .tasks .task-folder.is-on:hover { background: var(--t-btn); filter: brightness(.96); }
  .tasks .task-pill-btn:hover, .tasks .task-submit:hover { filter: brightness(.86); }
  .tasks .task-more:hover { background: color-mix(in srgb, var(--t-ink) 8%, transparent); }
  .tasks #remList .rem-item:hover::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .tasks .rem-main:hover { background: transparent; }
  .tasks .rem-check:hover:not(.is-on):not(.is-lift) {
    background: var(--task-dot, var(--t-ink));
    border: 0;
    -webkit-mask-image: var(--task-box-on);
    mask-image: var(--task-box-on);
  }
  .rem-icon:hover, .pick__opt:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .task-tab, .task-folder, .task-pill-btn, .task-submit, .task-link, .tasks .rem-check, .tasks .rem-check::after, .bell__check, .bell__check::after { transition: none; }
}

.pick { position: relative; min-width: 0; }
.pick--select { width: 100%; }
.pick__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.pick__opt:disabled { opacity: .4; cursor: default; }
.pick__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.pick__btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .65;
  flex: 0 0 auto;
}
.pick__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 180px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.pick__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.pick__opt::before { content: ""; width: 1em; flex: 0 0 auto; }
.pick__opt.is-on::before { content: "✓"; }
.pick__opt--folder::before,
.pick__opt--folder.is-on::before { content: none; width: 0; }
.pick__opt--folder svg { width: 18px; height: 18px; flex: none; display: block; }
.pick__opt--folder > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__opt--folder .pick__mark { margin-left: auto; width: 1em; flex: none; text-align: center; visibility: hidden; }
.pick__opt--folder.is-on .pick__mark { visibility: visible; }
:root[data-theme="dark"] .pick__btn,
:root[data-theme="dark"] .pick__menu {
  background: #242424;
  border-color: #3a3a3a;
  color: #f3f3f3;
}
.tasks .pick__btn { background: var(--t-card); border-color: var(--t-line); color: var(--t-ink); }
.tasks .pick--icon .pick__btn,
.tasks .rem-draft__ico {
  width: auto;
  border: 0;
  background: transparent;
  color: var(--t-muted);
}
.tasks .pick--icon .pick__btn.is-on,
.tasks .rem-draft__ico.is-on { color: var(--t-ink); background: color-mix(in srgb, currentColor 14%, transparent); }
.task-more {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--t-muted);
  padding: 0;
  cursor: pointer;
}
.task-advanced { display: grid; gap: 12px; }
.task-pop {
  --pop-bg: var(--card);
  --pop-line: var(--line);
  position: fixed;
  z-index: 58;
  width: min(340px, calc(100vw - 20px));
  background: var(--pop-bg);
  color: var(--ink);
  border: 0;
  border-radius: 16px;
  max-height: calc(100dvh - 20px);
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.task-pop.is-prep { opacity: 0; }
.task-pop.is-leave {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.task-pop form {
  display: grid;
  gap: 10px;
  width: auto;
  max-height: calc(100dvh - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  background: transparent;
  border: 0;
  padding: 14px;
}
.task-pop::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--pop-bg);
  border: 1px solid var(--pop-line);
  pointer-events: none;
}
.task-pop[data-side="left"]::after {
  right: -7px;
  top: calc(var(--arrow-y) - 6px);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.task-pop[data-side="below"]::after {
  top: -7px;
  left: calc(var(--arrow-x) - 6px);
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.task-pop[data-side="above"]::after {
  bottom: -7px;
  left: calc(var(--arrow-x) - 6px);
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}
.task-pop[data-side=""]::after { display: none; }
.modal .card--warn {
  width: min(400px, 100%);
  gap: 6px;
  padding: 16px 16px 14px;
  background: #eeeeee;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.modal .card--warn h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.modal .card--warn .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.modal .card--warn .row {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
}
.modal .card--warn .btn {
  width: auto;
  min-height: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.25;
}
.modal .card--warn .btn--ghost {
  background: #e4e4e4;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.modal .card--warn .btn--danger {
  background: #e5484d;
  color: #fff;
}
:root[data-theme="dark"] .modal .card--warn {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .modal .card--warn .btn--ghost {
  background: #2e2e2e;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
:root[data-theme="dark"] .task-pop {
  --pop-bg: #2a2a2a;
  --pop-line: #3a3a3a;
  background: #2a2a2a;
  color: #f3f3f3;
  border-color: #3a3a3a;
}
.task-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-pop__head h2 { font-size: 18px; font-weight: 700; }
.task-pop__group { display: grid; }
.task-pop__line {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .task-pop__line { border-top-color: #3a3a3a; }
.task-pop__line > span { color: var(--muted); }
:root[data-theme="dark"] .task-pop__line > span { color: #bdbdbd; }
.task-pop .pick__btn, .task-pop .task-input:not(#popTitle):not(#popNotes) { background: transparent; }
.task-pop #popTitle,
.task-pop #popNotes {
  background: var(--t-card);
  border: 1px solid var(--t-line);
}
:root[data-theme="dark"] .task-pop #popTitle,
:root[data-theme="dark"] .task-pop #popNotes {
  background: #242424;
  border-color: #3a3a3a;
  color: #f3f3f3;
}
#popNotes {
  min-height: 72px;
  overflow: auto;
  resize: none;
}
.task-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }
.task-confirm__actions .task-submit { width: auto; }
@media (prefers-reduced-motion: reduce) {
  .task-pop { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .btn:not(.btn--ghost):hover,
  :root[data-theme="dark"] .side-pass__create:hover,
  :root[data-theme="dark"] .task-submit:hover,
  :root[data-theme="dark"] .task-pill-btn:hover {
    background: #d5d5d5;
    color: #111111;
    filter: none;
  }
  :root[data-theme="dark"] .btn--ghost:hover,
  :root[data-theme="dark"] .tasks .btn--ghost:hover,
  .modal .btn--ghost:hover,
  .pass-screen .btn--ghost:hover,
  .gate .btn--ghost:hover,
  .pass-screen .pass-x:hover,
  .pass-screen .pass-eye:hover,
  .modal .pass-eye:hover,
  .bell__x:hover,
  .bell__row:hover,
  .bell__drop:hover,
  .bell__check:hover,
  .aide__x:hover,
  .modal .xbtn:hover,
  .modal .modal__x:hover,
  .task-pop .rem-icon:hover,
  .task-pop .pick__btn:hover,
  .tasks .btn--ghost:hover {
    background: color-mix(in srgb, var(--ink) 14%, var(--card));
    color: var(--ink);
    filter: none;
  }
  .task-confirm .task-submit:hover,
  .task-pop .task-submit:hover,
  .pass-screen .btn:not(.btn--ghost):hover,
  .modal .btn:not(.btn--ghost):hover {
    filter: brightness(.86);
  }
  .modal .card--warn .btn--ghost:hover {
    background: #d8d8d8;
    color: var(--ink);
    filter: none;
  }
  :root[data-theme="dark"] .modal .card--warn .btn--ghost:hover {
    background: #3a3a3a;
    color: #f3f3f3;
    filter: none;
  }
  .modal .card--warn .btn--danger:hover,
  :root[data-theme="dark"] .modal .card--warn .btn--danger:hover {
    background: #d33b40;
    color: #fff;
    filter: none;
  }
}

.dock {
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
#view:has(.tasks) { padding-bottom: 80px; }
.bell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: #eeeeee;
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .bell {
  background: #222222;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.bell.is-open { width: min(400px, calc(100vw - 32px)); height: calc(100dvh - 32px); }
.bell.is-open .bell__bar { display: none; }
.bell.is-open .bell__sheet { flex: 1; min-height: 0; }
.bell.is-open .bell__list { max-height: none; flex: 1; }
.tone {
  min-height: calc(100dvh - (var(--dock) * 2) - 40px);
  display: flex;
}
.tone .bell {
  width: min(400px, 100%);
  min-height: calc(100dvh - (var(--dock) * 2) - 40px);
  max-width: 100%;
}
.tone .bell__sheet { flex: 1; min-height: 0; }
.tone .bell__list { max-height: none; flex: 1; }
.bell__sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 4px 14px;
}
.bell__head b { font-size: 15px; }
.bell__x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
}
.bell__x svg { display: block; }
.bell__list {
  display: grid;
  align-content: start;
  gap: 2px;
  overflow: auto;
  max-height: min(420px, calc(100dvh - 140px));
  padding: 4px 6px 14px;
}
.bell__empty { margin: 0; padding: 8px 8px 12px; color: var(--muted); }
.bell__day { display: grid; gap: 2px; }
.bell__day + .bell__day { margin-top: 10px; }
.bell__label {
  margin: 4px 8px 2px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.bell__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  padding: 2px 2px 2px 4px;
  cursor: pointer;
}
.bell__row.is-busy { opacity: 0.45; pointer-events: none; }
.bell__gap { width: 28px; height: 28px; }
.bell__gift {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.bell__gift svg { display: block; width: 18px; height: 18px; opacity: .72; }
.bell__main {
  display: grid;
  gap: 1px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 6px 4px;
  cursor: pointer;
  font: inherit;
}
.bell__main b {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bell__row.is-new .bell__main b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.bell__main span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bell__time {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bell__check,
.bell__drop {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.bell__check {
  width: 22px;
  height: 22px;
  margin: 3px;
  border: 2px solid color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 999px;
  color: transparent;
  background: transparent;
}
.bell__check::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--task-dot, var(--ink));
  transform: scale(0);
  transition: transform .16s ease;
}
.bell__check svg { display: none; }
.bell__drop svg { display: block; }
.bell__check:hover { border-color: var(--task-dot, var(--ink)); }
.bell__check:hover::after { transform: scale(1); }
.bell__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 52px;
  height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.bell__bar svg { display: block; flex: none; }
.bell__count {
  min-width: 1.2em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.aide {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: calc(100vw - 96px);
  background: #eeeeee;
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .aide {
  background: #222222;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.aide.is-open { width: min(420px, calc(100vw - 96px)); }
.aide.is-open .aide__bar { display: none; }
.aide__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  max-height: min(720px, calc(100dvh - 88px));
}
.aide__head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  min-height: 56px;
  padding: 0 8px 0 16px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
.aide__head b {
  position: absolute;
  left: 40px;
  right: 40px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
:root[data-theme="dark"] .aide__head {
  background: color-mix(in srgb, #fff 6%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.aide__x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
}
.aide__x svg { display: block; }
.aide__log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 8px 16px;
}
.aide__empty { margin: 0; color: var(--muted); }
.aide__msg {
  margin: 0;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aide__msg--user {
  align-self: flex-end;
  max-width: calc(100% - 32px);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.aide__msg--bot {
  align-self: flex-start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.45;
}
.aide__msg--bot strong { font-weight: 700; }
.aide__msg.work-text { white-space: normal; }
.aide__list {
  margin: 2px 0;
  padding: 0 0 0 1.25em;
  display: grid;
  gap: 8px;
  list-style: disc;
}
.aide__list--num { list-style: decimal; }
.aide__list li { padding-left: 0.2em; }
:root[data-theme="dark"] .aide__msg--user { background: #333333; }
:root[data-theme="dark"] .talk .aide__msg--user.work-user {
  background: #222222;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.aide__turn { display: contents; }
.aide-cards {
  display: grid;
  gap: 6px;
  width: 100%;
}
.aide-card {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 14px;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: #f3f3f3;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aide-card svg:first-child { grid-column: 1; grid-row: 1 / -1; color: var(--muted); }
.aide-card svg:last-child { grid-column: 3; grid-row: 1 / -1; color: var(--muted); }
.aide-card b,
.aide-card span {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aide-card b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.aide-card__sub { font-size: 13px; line-height: 1.35; }
.aide-card__meta { font-size: 12px; line-height: 1.35; color: var(--muted); }
:root[data-theme="dark"] .aide-card { background: #303030; }
.aide-tasks { display: grid; gap: 6px; width: 100%; }
.aide-task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  padding: 4px 6px 4px 4px;
  border-radius: 12px;
  background: #f3f3f3;
}
:root[data-theme="dark"] .aide-task { background: #303030; }
.aide-task__done,
.aide-task__open {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.aide-task__done {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
}
.aide-task.is-done .aide-task__done { color: var(--ink); }
.aide-task__open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 4px 6px 0;
  text-align: left;
}
.aide-task__main { display: grid; min-width: 0; }
.aide-task__main b,
.aide-task__main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aide-task__main b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.aide-task__main span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.aide-task.is-done .aide-task__main b { color: var(--muted); text-decoration: line-through; }
.aide-task__open svg { color: var(--muted); }
.aide-task:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.aide-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  outline-offset: 1px;
}
.aide__form {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 12px calc(14px + env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;
}
.aide__island {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 44px;
  padding: 4px 6px 4px 14px;
  border-radius: 16px;
  background: #f7f7f7;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  pointer-events: auto;
}
.aide__acts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.aide__island.is-tall {
  flex-direction: column;
  align-items: stretch;
}
.aide__island.is-tall .aide__acts { align-self: flex-end; }
:root[data-theme="dark"] .aide__island {
  background: #3a3a3a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.aide__island textarea,
.aide__island textarea:focus {
  flex: 1 0 auto;
  width: auto;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  line-height: 20px;
  overflow-y: hidden;
}
.aide__island.is-tall textarea,
.aide__island.is-tall textarea:focus {
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 38%, transparent) transparent;
}
.aide__island.is-tall textarea::-webkit-scrollbar { display: block; width: 6px; height: auto; }
.aide__island.is-tall textarea::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 999px;
}
.aide__island.is-tall textarea::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="dark"] .aide__island textarea,
:root[data-theme="dark"] .aide__island textarea:focus {
  background: transparent;
  border-color: transparent;
}
#aideSend { display: none; }
.aide__island.is-ready #aideSend { display: grid; }
.aide__mic, .aide__go {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.aide__mic svg, .aide__go svg { display: block; }
.aide__mic.is-on {
  background: var(--ink);
  color: var(--canvas);
}
.aide__mic.is-on svg rect { fill: currentColor; }
.aide__go { background: #f3f3f3; color: #111; }
.aide__copy {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.aide__copy svg { display: block; }
.aide__copy.is-on { color: var(--ink); }
.aide-mind {
  display: grid;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 0 0 0 12px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.aide-mind__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.aide-mind.is-live .aide-mind__label { cursor: default; }
.aide-mind__label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.aide-mind.is-open .aide-mind__label::before { margin-top: 2px; transform: rotate(45deg); }
.aide-mind.is-live .aide-mind__label::before {
  width: 12px;
  height: 12px;
  margin-top: 0;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-top-color: var(--ink);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: none;
  animation: aide-spin .7s linear infinite;
}
.aide-mind__body {
  display: none;
  gap: 6px;
  max-height: 16rem;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
}
.aide-mind.is-open .aide-mind__body { display: grid; }
.aide-mind.is-open .aide-mind__body:empty { display: none; }
.aide-mind__text,
.aide-mind__step {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.aide-mind__text {
  color: var(--muted);
  white-space: pre-wrap;
}
.aide-mind__step { color: var(--ink); font-weight: 550; }
.aide__wait {
  width: 22px;
  height: 22px;
  align-self: flex-start;
}
.aide__wait i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-top-color: var(--ink);
  animation: aide-spin .7s linear infinite;
}
@keyframes aide-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aide__wait i,
  .aide-mind.is-live .aide-mind__label::before { animation: none; }
}
.aide__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 48px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.aide__bar svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .bell__bar:hover,
  .aide__bar:hover,
  .aide__mic:hover,
  .aide__copy:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .aide__copy:hover { color: var(--ink); }
  .aide__mic.is-on:hover { background: #2c3038; color: #f3f3f3; }
  :root[data-theme="dark"] .aide__mic.is-on:hover { background: #d5d5d5; color: #111; }
  .aide__go:hover { background: #d5d5d5; }
  .aide-card:hover { background: #e8e8e8; }
  :root[data-theme="dark"] .aide-card:hover { background: #3a3a3a; }
  .aide-task:hover { background: #e8e8e8; }
  :root[data-theme="dark"] .aide-task:hover { background: #3a3a3a; }
}
.cal { display: grid; gap: 16px; }
.cal__bar { display: flex; align-items: center; gap: 8px; }
.cal__shift { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cal__lists {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.cal__lists svg { display: block; }
.cal__lists[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
.cal__shift h2 {
  margin: 0;
  min-width: 168px;
  font-size: 20px;
  font-weight: 650;
  text-align: center;
}
.cal__nav {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cal__nav svg { display: block; }
.cal__today { margin-left: 0; }
.cal__create {
  width: auto;
  margin-top: 0;
  flex: none;
  padding: 8px 14px;
}
.cal__create svg { margin-left: 0; }
.cal__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.cal__board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal__dow {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 2px;
}
.cal__cell {
  min-height: 104px;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: pointer;
  text-align: left;
}
:root[data-theme="dark"] .cal__cell,
:root[data-theme="dark"] .cal__agenda { background: #181818; }
.cal__cell.is-out { opacity: .42; }
.cal__cell.is-on { background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
:root[data-theme="dark"] .cal__cell.is-on { background: #242424; }
.cal__num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}
.cal__cell.is-today .cal__num {
  background: var(--accent);
  color: var(--accent-ink);
}
.cal__chips { display: grid; gap: 3px; min-width: 0; }
.cal__chip {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.35;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.cal__chip.is-done { opacity: .5; text-decoration: line-through; }
.inv { display: grid; gap: 12px; align-content: start; }
.inv__count { margin: 10px 2px 0; }
.inv__bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.inv__switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg);
}
.inv__tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.inv__tab.is-on { background: var(--card); color: var(--ink); font-weight: 650; }
:root[data-theme="dark"] .inv__switch { background: #181818; }
:root[data-theme="dark"] .inv__tab.is-on { background: #2a2a2a; color: #f3f3f3; }
@media (hover: hover) and (pointer: fine) {
  .inv__tab { transition: background .12s ease, color .12s ease; }
  .inv__tab:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
  .inv__tab.is-on:hover { background: var(--card); }
  :root[data-theme="dark"] .inv__tab.is-on:hover { background: #2a2a2a; }
}
.inv__late { color: var(--danger); }
.inv td:last-child { white-space: nowrap; }
.inv tr { cursor: pointer; }

.fin {
  display: grid;
  gap: 18px;
  align-content: start;
  width: 100%;
}
.fin__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fin h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.fin__top .btn { padding: 8px 14px; border-radius: 10px; }
.fin__period {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.fin__step,
.fin__when,
.fin__today {
  border: 0;
  color: inherit;
  cursor: pointer;
}
.fin__step,
.fin__today {
  height: 32px;
  border-radius: 8px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.fin__step {
  width: 32px;
  display: grid;
  place-items: center;
  padding: 0;
}
.fin__step svg { display: block; }
.fin__when {
  min-width: 148px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 15px;
  font-weight: 650;
}
.fin__today { padding: 0 12px; font-size: 13px; }
.fin__pick {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fin__ring { display: grid; justify-items: center; gap: 8px; }
.fin__donut { position: relative; width: 232px; height: 232px; }
.fin__donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.fin__donut circle[data-cat] { cursor: pointer; }
.fin__track { stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
.fin__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124px;
  height: 124px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  text-align: center;
}
button.fin__hub { cursor: pointer; }
.fin__hub b { font-size: 22px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.fin__hub span { color: var(--muted); font-size: 13px; line-height: 1.3; }
.fin__avg { margin: 0; color: var(--muted); font-size: 13px; }
.fin__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fin__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #eeeeee;
  color: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.fin__cat i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fin-dot, #8e8e8e);
  flex: none;
}
.fin__cat b { font-size: 13px; font-weight: 650; }
.fin__cat span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fin__cat.is-on {
  background: color-mix(in srgb, var(--ink) 8%, #eeeeee);
}
.fin__cat--add {
  width: 34px;
  justify-content: center;
  padding: 0;
}
.fin__cat--add svg { display: block; }
.fin__sheet { display: grid; gap: 6px; }
.fin__sheet h2 { margin: 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.fin__list { display: grid; gap: 2px; }
.fin__row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fin__row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fin-dot, #8e8e8e);
}
.fin__main { min-width: 0; display: grid; }
.fin__main b,
.fin__main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin__main b { font-size: 14px; font-weight: 550; }
.fin__main span { color: var(--muted); font-size: 12px; }
.fin__sum { font-variant-numeric: tabular-nums; font-weight: 650; }
.fin__empty { margin: 0; padding: 8px 2px; color: var(--muted); }
:root[data-theme="dark"] .fin__step,
:root[data-theme="dark"] .fin__today,
:root[data-theme="dark"] .fin__cat {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .fin__cat.is-on { background: #242424; }
:root[data-theme="dark"] .fin__track { stroke: #2c2c2c; }
@media (hover: hover) and (pointer: fine) {
  .fin__step,
  .fin__when,
  .fin__today,
  .fin__cat,
  .fin__row { transition: background .12s ease; }
  .fin__step:hover,
  .fin__when:hover,
  .fin__today:hover,
  .fin__row:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .fin__cat:hover { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); }
  :root[data-theme="dark"] .fin__cat:hover { background: color-mix(in srgb, #f3f3f3 7%, #181818); }
  :root[data-theme="dark"] .fin__cat.is-on:hover { background: #242424; }
}
.fin--account { width: 100%; }
.fin__layout {
  display: grid;
  gap: 22px;
  align-content: start;
  min-width: 0;
}
.fin__summary {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  min-width: 0;
}
.fin__summary .fin__cats { justify-content: center; width: 100%; }
.fin--account .fin__sheet {
  min-width: 0;
  align-content: start;
  border-radius: 16px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 16px 16px 12px;
}
:root[data-theme="dark"] .fin--account .fin__sheet {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
@media (min-width: 1100px) {
  .app:has(.fin--account) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .work:has(.fin--account) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #view:has(.fin--account) {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .fin--account {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .fin__layout {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    column-gap: 28px;
  }
  .fin__summary {
    align-content: center;
    overflow: auto;
    min-height: 0;
  }
  .fin--account .fin__donut { width: 260px; height: 260px; }
  .fin--account .fin__sheet {
    min-height: 0;
    overflow: auto;
  }
}
@media (max-width: 699px) {
  .fin--account .fin__sheet { padding: 14px 12px 10px; }
}
.fin-board,
.fin-act {
  border-radius: 16px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.fin-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 18px 22px;
}
.fin-board span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.fin-board b {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.fin-act {
  display: grid;
  gap: 8px;
  padding: 16px 16px 12px;
}
.fin-act__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.fin-act__head h2 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fin-act__plot { min-width: 0; min-height: 280px; }
.fin-act__plot svg { display: block; width: 100%; height: 280px; }
.fin-act__grid {
  stroke: color-mix(in srgb, var(--ink) 12%, transparent);
  stroke-dasharray: 2 6;
}
.fin-act__line {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fin-act__dot {
  fill: #3b82f6;
  stroke: #eeeeee;
  stroke-width: 2;
}
.fin-act__label {
  fill: var(--muted);
  font-size: 12px;
  font-family: inherit;
}
.fin__row--in i { background: #22c55e; }
:root[data-theme="dark"] .fin-board,
:root[data-theme="dark"] .fin-act {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .fin-act__grid { stroke: #2c2c2c; }
:root[data-theme="dark"] .fin-act__dot { stroke: #181818; }
@media (max-width: 699px) {
  .fin-board { grid-template-columns: 1fr; gap: 14px; }
  .fin-board b { font-size: 22px; }
  .fin-act__head { align-items: flex-start; flex-direction: column; }
}

.cal__chip--event { background: color-mix(in srgb, #d4537e 22%, transparent); }
:root[data-theme="dark"] .cal__chip--event { background: color-mix(in srgb, #f0a0b8 32%, transparent); }
.cal__more { font-size: 11px; color: var(--muted); padding-left: 2px; }
.cal__dots { display: none; }
.cal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.cal__dot.is-done { opacity: .35; }
.cal__dot--event { background: #d4537e; }
:root[data-theme="dark"] .cal__dot--event { background: #f0a0b8; }
.cal__agenda {
  background: var(--card);
  border: 0;
  border-radius: 16px;
  padding: 16px 10px 10px;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}
.cal__agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 6px;
}
.cal__agenda-head b { font-size: 16px; font-weight: 650; }
.cal__agenda-head span, .cal__empty { color: var(--muted); }
.cal__empty { margin: 4px 0 0; }
.cal__list { display: grid; gap: 2px; }
.cal__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 2px 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 8px;
  cursor: pointer;
}
.cal__item--gift { align-items: center; }
.cal__mark { display: flex; align-items: center; justify-content: flex-end; }
.cal__mark svg { display: block; width: 18px; height: 18px; opacity: .72; }
.cal__time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cal__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__folder { grid-column: 2; color: var(--muted); font-size: 12px; }
.cal__item.is-done .cal__name { color: var(--muted); font-weight: 500; text-decoration: line-through; }
@media (hover: hover) and (pointer: fine) {
  .cal__nav:hover,
  .cal__item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .cal__cell:hover { background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
  :root[data-theme="dark"] .cal__cell:hover { background: #202020; }
  :root[data-theme="dark"] .cal__cell.is-on:hover { background: #242424; }
}
@media (max-width: 699px) {
  .cal__body { grid-template-columns: 1fr; }
  .cal__shift h2 { min-width: 0; font-size: 18px; }
  .cal__cell { min-height: 48px; padding: 4px; gap: 4px; align-items: center; }
  .cal__chips { display: none; }
  .cal__dots { display: flex; gap: 3px; justify-content: center; min-height: 5px; }
  .pass-peek, .mail-acts { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mail:has(.mail-acts:not([hidden])) { padding-bottom: 160px; }
  .bell.is-open,
  .aide.is-open {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
  }
  .bell.is-open .bell__sheet,
  .aide.is-open .aide__sheet { flex: 1; }
  .bell.is-open .bell__list,
  .aide.is-open .aide__log { max-height: none; flex: 1; }
  .aide.is-open .aide__sheet { max-height: none; min-height: 0; }
}

.work:has(.mail) { flex: 1; min-height: 0; }
#view:has(.mail) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mail {
  --mail-tool: 40px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mail__fail {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 240px;
}
.mail__fail-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(360px, 100%);
  padding: 36px 28px 28px;
  border-radius: 20px;
  background: var(--card);
  text-align: center;
}
.mail__fail-card svg { width: 28px; height: 28px; color: var(--danger); }
.mail__fail-card p { margin: 0; }
:root[data-theme="dark"] .mail__fail-card { background: #181818; }
.mail__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 4;
}
@media (min-width: 700px) {
  .mail__bar { margin-top: -9.5px; }
}
.mail__bar .mail-find {
  flex: none;
  width: var(--mail-tool);
  height: var(--mail-tool);
  position: static;
}
.mail-find.is-open #mailFindBtn {
  visibility: hidden;
}
.mail-find__panel { display: none; }
.mail-find.is-open .mail-find__panel {
  display: block;
  position: absolute;
  z-index: 40;
  left: calc(var(--mail-tool) + 8px);
  top: 0;
  width: min(640px, calc(100% - (var(--mail-tool) * 2) - 88px));
  border-radius: 16px;
  overflow: hidden;
}
.mail-find.is-open .mail-find__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .mail-find.is-open .mail-find__panel::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
@media (min-width: 700px) and (max-width: 1400px) {
  .mail-find.is-open .mail-find__panel {
    width: auto;
    right: calc(var(--mail-tool) + 8px);
  }
}
.mail__bar .mail-find__field,
.mail__bar .mail-find__field input {
  height: var(--mail-tool);
  min-height: var(--mail-tool);
}
.mail__bar .mail-find__field {
  padding-left: 0;
  gap: 0;
  background: #eeeeee;
}
.mail__bar .mail-find__field > svg {
  width: var(--mail-tool);
  height: var(--mail-tool);
  padding: 11px;
  box-sizing: border-box;
}
.mail__bar .mail-side__write {
  position: relative;
  z-index: 5;
  flex: none;
  width: var(--mail-tool);
  height: var(--mail-tool);
  margin-top: 0;
  margin-left: auto;
  padding: 0;
  border-radius: 999px;
}
.mail__bar .mail__reload {
  width: var(--mail-tool);
  height: var(--mail-tool);
  flex: none;
  border-radius: 10px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .mail__bar .mail__reload {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.mail-find { position: relative; }
.mail-find__field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 14px;
  border-radius: 16px;
  background: var(--card);
  color: var(--muted);
}
.mail-find__field.is-open { border-radius: 16px 16px 0 0; }
.mail-find__field svg { flex: none; }
.mail-find__field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
}
.mail-find__field input::-webkit-search-cancel-button { display: none; }
.mail-find__x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.mail-find__pop {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  max-height: min(70dvh, 520px);
  overflow: auto;
  border-radius: 0 0 16px 16px;
  background: var(--card);
  color: var(--ink);
}
.mail__bar .mail-find__pop { position: static; }
.mail-find__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 14px 12px;
}
.mail-find__chips button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 6px 12px;
  cursor: pointer;
}
.mail-find__chips button.is-on {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.mail-find__hits { display: grid; }
.mail-find__empty {
  margin: 0;
  padding: 8px 14px 16px;
  color: var(--muted);
}
.mail-find__hit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
}
.mail-find__hit svg { color: var(--muted); }
.mail-find__main { display: grid; min-width: 0; }
.mail-find__main b,
.mail-find__main span,
.mail-find__when {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-find__main span,
.mail-find__when { color: var(--muted); font-size: 13px; }
.mail-find__all {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
}
:root[data-theme="dark"] .mail-find__field,
:root[data-theme="dark"] .mail-find__pop {
  background: #181818;
  color: #f3f3f3;
}
:root[data-theme="dark"] #mailFindInput,
:root[data-theme="dark"] #mailFindInput:focus {
  background: #181818;
  border-color: transparent;
  color: #f3f3f3;
  box-shadow: none;
}
:root[data-theme="dark"] .mail-find__chips button { border-color: #3a3a3a; color: #f3f3f3; }
:root[data-theme="dark"] .mail-find__all { border-top-color: #2c2c2c; }
.mail__bar .mail-side__write svg { margin-left: 0; }
.mail__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mail__reload {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.mail__reload:disabled { cursor: default; }
.mail__reload.is-busy svg { animation: mail-spin .7s linear infinite; }
@keyframes mail-spin { to { transform: rotate(-360deg); } }
.mail__list, #mailList { display: grid; }
.mail__note { margin: 0 0 8px; }
.mail__sub {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  position: relative;
  border-bottom: 0;
}
.mail__sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(-20px - var(--dock));
  bottom: 0;
  height: 0;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.mail__sub b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__unsub {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 8px 0 8px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.mail__unsub:disabled { cursor: default; opacity: .55; }
.mail__row {
  display: grid;
  grid-template-columns: auto minmax(120px, 200px) minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  text-align: left;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px 2px;
  cursor: pointer;
}
.mail__row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: calc(-20px - 8px);
  right: calc(-20px - 8px);
  border-radius: 14px;
  background: transparent;
  pointer-events: none;
}
.mail__row > * { position: relative; z-index: 1; }
.mail__row.is-new { font-weight: 650; }
.mail__row.is-picked::before { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mail__row.is-drag > * { visibility: hidden; }
.mail__row.is-drag::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mail__marks { display: flex; align-items: center; gap: 2px; }
.mail__check, .mail__star {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  flex: none;
}
.mail__check i {
  width: 16px;
  height: 16px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 80%, var(--ink));
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.mail__check.is-on i {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}
.mail__check svg { width: 12px; height: 12px; }
.mail__star svg { width: 16px; height: 16px; fill: none; }
.mail__star.is-on { color: #eab308; }
.mail__star.is-on svg { fill: currentColor; }
.mail-drag {
  position: fixed;
  z-index: 70;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--card);
  color: #111111;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
:root[data-theme="dark"] .mail-drag { background: #2a2a2a; color: #f3f3f3; }
body.is-mail-drag { user-select: none; cursor: grabbing; }
.mail__from, .mail__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__date { color: var(--muted); font-size: 13px; white-space: nowrap; }
.mail__count, .task-count {
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#sideTasks,
#sideTasks .side-pass__list,
#taskSideFolders,
#taskSideFolders .nav { min-width: 0; }
.task-views {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eeeeee;
}
:root[data-theme="dark"] .task-views { background: #181818; }
html[data-tint="1"]:not([data-theme="dark"]) .task-views { background: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .task-views { background: var(--tint-bg); }
.task-view > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sideTasks .side-pass__rule,
#sideMail .side-pass__rule,
#sideFin .side-pass__rule { border: 0; }
#taskSideFolders .nav > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sideMail [data-mail] > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail__letter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app:has(#mailLetter:not([hidden])) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.work:has(#mailLetter:not([hidden])),
#view:has(#mailLetter:not([hidden])) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#view:has(#mailLetter:not([hidden])) { align-content: stretch; }
.mail:has(#mailLetter:not([hidden])) { height: 100%; }
.mail__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail__top-acts { display: flex; align-items: center; gap: 8px; }
.mail__letter .mail__reload {
  width: var(--mail-tool);
  height: var(--mail-tool);
  flex: none;
  padding: 0;
  border-radius: 10px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme="dark"] .mail__letter .mail__reload {
  background: #181818;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.mail__letter .mail__reload.is-on { color: #eab308; }
.mail__letter .mail__reload.is-on svg { fill: currentColor; }
.mail__letter h2 { margin: 0; font-size: 22px; font-weight: 650; }
.mail__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  color: var(--muted);
}
.mail__meta span { min-width: 0; }
.mail__meta time { flex: none; margin-left: auto; white-space: nowrap; }
.mail__body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.mail__view,
.mail__load {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
.mail__load {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 32px 28px;
  box-sizing: border-box;
}
.mail__load span {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #ececec 25%, #f8f8f8 37%, #ececec 63%);
  background-size: 400% 100%;
  animation: mail-load 1.15s ease infinite;
}
.mail__load span:nth-child(1) { width: 42%; height: 22px; }
.mail__load span:nth-child(2) { width: 96%; }
.mail__load span:nth-child(3) { width: 88%; }
.mail__load span:nth-child(4) { width: 64%; }
@keyframes mail-load {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mail__load span { animation: none; }
}
@media (max-width: 699px) {
  .mail__view,
  .mail__load { min-height: 240px; }
}
.mail-form { width: min(560px, 100%); }
.mail-drop {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}
.mail-drop.is-over { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mail-drop p { margin: 0; }
.mail-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mail-file { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mail-file button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mail__reload { transition: background .12s ease; }
  .mail__bar .mail__reload:hover,
  .mail__letter .mail__reload:hover { background: color-mix(in srgb, var(--ink) 7%, #eeeeee); }
  :root[data-theme="dark"] .mail__bar .mail__reload:hover,
  :root[data-theme="dark"] .mail__letter .mail__reload:hover { background: color-mix(in srgb, #f3f3f3 7%, #181818); }
  .mail__reload:hover,
  .mail-compose__tools button:hover,
  .mail-compose__icon:hover,
  .mail-compose__link:hover,
  .mail-compose__format button:not(.mail-compose__swatch):hover,
  .mail-compose__emoji button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .mail-find__x:hover,
  .mail-find__hit:hover,
  .mail-find__all:hover,
  .mail-find__chips button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .mail__row:hover::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .mail__row.is-picked:hover::before { background: color-mix(in srgb, var(--ink) 10%, transparent); }
  .mail__check:hover, .mail__star:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .mail-acts button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .mail__unsub:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
}
.mail-compose {
  position: fixed;
  z-index: 58;
  right: 132px;
  bottom: 0;
  width: min(500px, calc(100vw - 160px));
  height: min(560px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.mail-compose::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.mail-compose.is-min {
  width: min(280px, calc(100vw - 160px));
  height: auto;
}
.mail-compose.is-min .mail-compose__form { display: none; }
.mail-compose.is-full {
  left: calc(var(--side) + (100% - var(--side)) / 2);
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100% - var(--side) - 48px));
  height: min(78dvh, 760px);
  border-radius: 16px;
}
.mail-compose.is-full.is-min {
  left: auto;
  top: auto;
  right: 132px;
  bottom: 0;
  transform: none;
  width: min(280px, calc(100vw - 160px));
  height: auto;
  border-radius: 16px 16px 0 0;
}
@media (min-width: 700px) and (max-width: 960px) {
  .mail-compose,
  .mail-compose.is-full.is-min {
    right: 16px;
    width: min(500px, calc(100vw - var(--side) - 40px));
  }
  .mail-compose.is-min,
  .mail-compose.is-full.is-min {
    width: min(280px, calc(100vw - var(--side) - 40px));
  }
  .mail-compose.is-full {
    left: calc(var(--side) + (100% - var(--side)) / 2);
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100% - var(--side) - 36px));
  }
}
.mail-compose__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.mail-compose.is-moving .mail-compose__head { cursor: grabbing; }
.mail-compose__head b { font-size: 14px; font-weight: 650; }
.mail-compose__tools { display: flex; align-items: center; }
.mail-compose__back { display: none; }
.mail-compose.is-full .mail-compose__grow { display: none; }
.mail-compose.is-full .mail-compose__back { display: block; }
.mail-compose.is-full.is-min .mail-compose__grow { display: block; }
.mail-compose.is-full.is-min .mail-compose__back { display: none; }
.mail-compose__tools button,
.mail-compose__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.mail-compose__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mail-compose__line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.mail-compose__line > span {
  flex: none;
  color: var(--muted);
}
.mail-compose__line b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.mail-compose__link {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
#mailCompose input,
#mailCompose textarea,
#mailCompose input:focus,
#mailCompose textarea:focus {
  width: auto;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
}
#mailCompose textarea {
  width: 100%;
  flex: 1;
  min-height: 120px;
  padding: 12px 16px;
  resize: none;
}
.mail-compose__body {
  flex: 1;
  min-height: 120px;
  padding: 12px 16px;
  overflow: auto;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.mail-compose__body.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}
.mail-compose__body img { max-width: 100%; height: auto; }
.mail-compose__body blockquote {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 32%, transparent);
}
.mail-compose__body .mail-quote {
  margin-top: 16px;
  color: var(--muted);
  white-space: normal;
}
.mail-compose__body .mail-quote__who { margin-bottom: 6px; }
.mail-compose__body .mail-quote blockquote div { margin: 0 0 4px; }
.mail-compose__body a { color: inherit; text-decoration: underline; }
.mail-compose__format {
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0 12px 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
}
.mail-compose.is-full:not(.is-plain) .mail-compose__format { display: flex; }
.mail-compose__format button,
#mailCompose .mail-compose__format select,
#mailCompose .mail-compose__format select:focus {
  flex: none;
  width: auto;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.mail-compose__format .mail-compose__swatch {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.mail-compose__extra { display: none; }
.mail-compose.is-full .mail-compose__extra { display: grid; }
.mail-compose__aa { font-size: 15px; font-weight: 700; }
.mail-compose__form { position: relative; }
.mail-compose__pop {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.mail-compose__pop[hidden] { display: none; }
.mail-compose__emoji {
  flex-wrap: wrap;
  gap: 2px;
}
.mail-compose__emoji button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}
#mailCompose .mail-compose__pop input,
#mailCompose .mail-compose__pop input:focus {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
}
.mail-compose__pop > button[type="button"] {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.mail-compose .mail-files { margin: 0; padding: 0 16px 8px; }
.mail-compose .err { margin: 0 16px 8px; }
.mail-compose__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 12px;
}
.mail-compose__foot .btn {
  width: auto;
  border-radius: 999px;
  padding: 8px 18px;
}
.mail-compose__trash { margin-left: auto; }
:root[data-theme="dark"] .mail-compose {
  background: #181818;
  color: #f3f3f3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .mail-compose::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
:root[data-theme="dark"] .mail-compose__line,
:root[data-theme="dark"] .mail-compose__format,
:root[data-theme="dark"] .mail-compose__pop { border-color: #2c2c2c; }
:root[data-theme="dark"] .mail-compose__pop { background: #181818; }
@media (prefers-reduced-motion: reduce) {
  .mail__reload, .mail__reload.is-busy svg { transition: none; animation: none; }
}
@media (max-width: 699px) {
  .mail__row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
  }
  .mail__marks { grid-row: 1 / span 3; align-self: center; }
  .mail__from, .mail__subject, .mail__date { grid-column: 2; }
  .mail__sub { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
}

.tabbar { display: none; }
.tabbar__x { display: none; }
.tabbar__mid[aria-expanded="true"] .tabbar__grid { display: none; }
.tabbar__mid[aria-expanded="true"] .tabbar__x { display: block; }
@media (max-width: 699px) {
  .app { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .side { display: none; }
  .app.is-tab-open .side {
    display: flex;
    position: fixed;
    z-index: 54;
    left: 12px;
    right: 12px;
    bottom: calc(124px + env(safe-area-inset-bottom));
    top: auto;
    height: auto;
    max-height: min(64dvh, 540px);
    overflow: hidden;
  }
  .app.is-tab-open .side__isle {
    max-height: min(64dvh, 540px);
    border-radius: 24px;
  }
  .app.is-tab-open .side__back { border-radius: 20px; }
  .side__back { display: none !important; }
  .app.is-side-fold { --side: 244px; }
  .app.is-side-fold .side__label,
  .app.is-side-fold .side-pass__none { display: block; }
  .app.is-side-fold .nav > span,
  .app.is-side-fold .nav__age,
  .app.is-side-fold .mail__count,
  .app.is-side-fold .side .side-pass__create span { display: inline; }
  .app.is-side-fold .nav > .nav__event,
  .app.is-side-fold .mail-quota { display: grid; }
  .side__fold { display: none !important; }
  .app.is-tab-open.is-project .side__back { display: block !important; }
  .app.is-tab-open.is-more #sideMain { display: block !important; }
  .app.is-tab-open.is-more #sideFoot { display: grid !important; }
  .app.is-tab-open.is-more #sidePass,
  .app.is-tab-open.is-more #sideTasks,
  .app.is-tab-open.is-more #sideCal,
  .app.is-tab-open.is-more #sideMail,
  .app.is-tab-open.is-more #sideSet,
  .app.is-tab-open.is-more #sideChats,
  .app.is-tab-open.is-more #sideFin,
  .app.is-tab-open.is-more #sideProject,
  .app.is-tab-open.is-more #sideBack { display: none !important; }
  .app.is-tab-open.is-more #navPersonal [data-go="reminders"],
  .app.is-tab-open.is-more #navPersonal [data-go="calendar"],
  .app.is-tab-open.is-more #navPersonal [data-go="mail"],
  .app.is-tab-open.is-more #navPersonal [data-go="passwords"] { display: none; }
  .tabbar {
    display: block;
    position: fixed;
    z-index: 56;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar__isle {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: end;
    gap: 0;
    min-height: 64px;
    padding: 8px 6px 8px;
    border-radius: 32px;
    background: var(--card);
  }
  :root[data-theme="dark"] .tabbar__isle { background: #181818; }
  .tabbar__btn {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    padding: 0 2px;
    cursor: pointer;
  }
  .tabbar__btn svg { width: 22px; height: 22px; opacity: .72; }
  .tabbar__btn.is-on { background: var(--bg); color: var(--ink); }
  .tabbar__btn.is-on svg { opacity: 1; }
  :root[data-theme="dark"] .tabbar__btn.is-on { background: #2a2a2a; color: #f3f3f3; }
  .tabbar__mid {
    width: 58px;
    height: 58px;
    margin: -22px 6px 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--canvas);
    cursor: pointer;
    padding: 0;
  }
  .tabbar__mid.is-on { outline: 2px solid var(--ink); outline-offset: 3px; }
  .tabbar__mid svg { width: 24px; height: 24px; }
  :root[data-theme="dark"] .tabbar__mid { background: #f3f3f3; color: #111111; }
  .dock { bottom: calc(118px + env(safe-area-inset-bottom)); }
  .mail-compose {
    right: 12px;
    bottom: calc(108px + env(safe-area-inset-bottom));
    width: min(500px, calc(100vw - 24px));
    height: min(560px, calc(100dvh - 128px - env(safe-area-inset-bottom)));
  }
  .mail-compose.is-full {
    left: 12px;
    top: auto;
    right: 12px;
    bottom: calc(108px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    height: min(72dvh, calc(100dvh - 140px - env(safe-area-inset-bottom)));
  }
  .mail-compose.is-full.is-min,
  .mail-compose.is-min {
    left: auto;
    right: 12px;
    bottom: calc(108px + env(safe-area-inset-bottom));
    transform: none;
    width: min(280px, calc(100vw - 24px));
    height: auto;
  }
  .mail-compose.is-placed.is-full {
    width: min(920px, calc(100vw - 24px));
    height: min(72dvh, calc(100dvh - 24px));
  }
  .toast { bottom: calc(118px + env(safe-area-inset-bottom)); }
}
.wheel { display: none; }
.wheel__ring { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.wheel__item {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transform: translate(var(--x), var(--y));
}
.wheel__orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
}
:root[data-theme="dark"] .wheel__orb { background: #181818; color: #f3f3f3; }
.wheel__item.is-on .wheel__orb { background: color-mix(in srgb, var(--ink) 12%, var(--card)); }
:root[data-theme="dark"] .wheel__item.is-on .wheel__orb { background: #2c2c2c; }
.wheel__orb svg,
.wheel__orb img { width: 20px; height: 20px; }
.wheel__orb .nav__dot { opacity: .72; }
.wheel__item.is-on .nav__dot { opacity: 1; }
.wheel__label {
  width: 74px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 699px) and (hover: hover) and (pointer: fine) {
  .tabbar__btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .tabbar__btn.is-on:hover { background: var(--bg); }
  :root[data-theme="dark"] .tabbar__btn.is-on:hover { background: #2a2a2a; }
  .wheel__item:hover .wheel__orb { background: color-mix(in srgb, var(--ink) 8%, var(--card)); }
  :root[data-theme="dark"] .wheel__item:hover .wheel__orb { background: #222; }
  .cal__lists:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}

.tint { display: grid; gap: 0; padding: 0; }
.tint__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
}
.tint__row + .tint__row { box-shadow: inset 0 1px 0 var(--line); }
.tint__row h3 { margin: 0; font-size: 14px; font-weight: 650; }
.tint__row p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; }
.tint__ctrl { display: flex; align-items: center; gap: 12px; width: min(240px, 46%); flex: none; }
.tint__ctrl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  cursor: pointer;
}
.tint__ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #d0d0d0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 28%);
}
.tint__ctrl input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #d0d0d0;
}
.tint__swatch {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: hsl(220 58% 58%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.tint__pct { width: 3.2em; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
html[data-tint="1"][data-theme] {
  --canvas: var(--tint-canvas);
  --bg: var(--tint-bg);
  --card: var(--tint-card);
  --line: var(--tint-line);
}
html[data-tint="1"]:not([data-theme="dark"]) .side__isle,
html[data-tint="1"]:not([data-theme="dark"]) .ctx.ctx--side,
html[data-tint="1"]:not([data-theme="dark"]) .side__back,
html[data-tint="1"]:not([data-theme="dark"]) .app.is-side-fold .side__back .side__fold,
html[data-tint="1"]:not([data-theme="dark"]) .mail__bar .mail__reload,
html[data-tint="1"]:not([data-theme="dark"]) .mail__letter .mail__reload,
html[data-tint="1"]:not([data-theme="dark"]) .task-seek,
html[data-tint="1"]:not([data-theme="dark"]) .home__tune,
html[data-tint="1"]:not([data-theme="dark"]) .home__ask,
html[data-tint="1"]:not([data-theme="dark"]) .mail__bar .mail-box,
html[data-tint="1"]:not([data-theme="dark"]) .mail__bar .mail-find__field,
html[data-tint="1"]:not([data-theme="dark"]) .room__dock,
html[data-tint="1"]:not([data-theme="dark"]) .bell,
html[data-tint="1"]:not([data-theme="dark"]) .aide { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .side__isle,
html[data-tint="1"][data-theme="dark"] .ctx.ctx--side,
html[data-tint="1"][data-theme="dark"] .side__back,
html[data-tint="1"][data-theme="dark"] .app.is-side-fold .side__back .side__fold,
html[data-tint="1"][data-theme="dark"] .mail__bar .mail__reload,
html[data-tint="1"][data-theme="dark"] .mail__letter .mail__reload,
html[data-tint="1"][data-theme="dark"] .task-seek,
html[data-tint="1"][data-theme="dark"] .home__tune,
html[data-tint="1"][data-theme="dark"] .home__ask,
html[data-tint="1"][data-theme="dark"] .mail__bar .mail-find__field,
html[data-tint="1"][data-theme="dark"] .room__dock,
html[data-tint="1"][data-theme="dark"] .mail-box,
html[data-tint="1"][data-theme="dark"] .mail-box__menu,
html[data-tint="1"][data-theme="dark"] .mail-box__chip,
html[data-tint="1"][data-theme="dark"] .mail-box__plus,
html[data-tint="1"][data-theme="dark"] .seek__field,
html[data-tint="1"][data-theme="dark"] .modal__service,
html[data-tint="1"][data-theme="dark"] .side-tip,
html[data-tint="1"][data-theme="dark"] .pass-find__btn,
html[data-tint="1"][data-theme="dark"] .pass-find__field,
html[data-tint="1"][data-theme="dark"] .blank__card,
html[data-tint="1"][data-theme="dark"] .task-drag,
html[data-tint="1"][data-theme="dark"] .cal__cell,
html[data-tint="1"][data-theme="dark"] .cal__agenda,
html[data-tint="1"][data-theme="dark"] .inv__switch,
html[data-tint="1"][data-theme="dark"] .mail-find__field,
html[data-tint="1"][data-theme="dark"] .mail-find__pop,
html[data-tint="1"][data-theme="dark"] .mail-compose,
html[data-tint="1"][data-theme="dark"] .mail-compose__pop,
html[data-tint="1"][data-theme="dark"] .mail__fail-card,
html[data-tint="1"][data-theme="dark"] .tabbar__isle { background-color: var(--tint-bg); }
html[data-tint="1"] .seek__cat { background-color: var(--tint-lift); }
html[data-tint="1"] .seek__cat:hover,
html[data-tint="1"] .seek__cat.is-on { background-color: color-mix(in srgb, var(--ink) 8%, var(--tint-lift)); }
html[data-tint="1"]:not([data-theme="dark"]) .app.is-side-fold .side__back .side__fold:hover {
  background-color: color-mix(in srgb, var(--ink) 7%, var(--tint-side));
}
html[data-tint="1"][data-theme="dark"] .app.is-side-fold .side__back .side__fold:hover {
  background-color: color-mix(in srgb, var(--ink) 7%, var(--tint-bg));
}
html[data-tint="1"][data-theme="dark"] .bell,
html[data-tint="1"][data-theme="dark"] .aide,
html[data-tint="1"][data-theme="dark"] .ctx,
html[data-tint="1"][data-theme="dark"] .tip,
html[data-tint="1"][data-theme="dark"] .aim__menu,
html[data-tint="1"][data-theme="dark"] .aim__sub,
html[data-tint="1"][data-theme="dark"] .aim__tip,
html[data-tint="1"][data-theme="dark"] .mail-acts { background-color: var(--tint-raise); }
html[data-tint="1"][data-theme="dark"] .side .nav.is-on,
html[data-tint="1"][data-theme="dark"] .side .nav.is-on:hover,
html[data-tint="1"][data-theme="dark"] .seek__pill.is-on,
html[data-tint="1"][data-theme="dark"] .seek__row.is-on,
html[data-tint="1"][data-theme="dark"] .seek__row:hover,
html[data-tint="1"][data-theme="dark"] .modal__mark,
html[data-tint="1"][data-theme="dark"] .pass-icon.is-on,
html[data-tint="1"][data-theme="dark"] .inv__tab.is-on,
html[data-tint="1"][data-theme="dark"] .pass-drag,
html[data-tint="1"][data-theme="dark"] .mail-drag,
html[data-tint="1"][data-theme="dark"] .tabbar__btn.is-on { background-color: var(--tint-lift); }
html[data-tint="1"][data-theme="dark"] .pass-peek { background-color: var(--tint-bg); }
html[data-tint="1"][data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.task-input):not(.rem-draft__title):not([data-seek]):not(.aim__q):not(.room-find__q):not(.market__q):not(.set-find__q),
html[data-tint="1"][data-theme="dark"] textarea,
html[data-tint="1"][data-theme="dark"] .task-pop #popTitle,
html[data-tint="1"][data-theme="dark"] .task-pop #popNotes {
  background-color: var(--tint-field);
  border-color: var(--tint-line);
}
html[data-tint="1"][data-theme="dark"] .aide__island,
html[data-tint="1"]:not([data-theme="dark"]) .aide__island { background-color: var(--tint-island); }
html[data-tint="1"][data-theme="dark"] .aide__island textarea,
html[data-tint="1"][data-theme="dark"] .aide__island textarea:focus,
html[data-tint="1"]:not([data-theme="dark"]) .aide__island textarea,
html[data-tint="1"]:not([data-theme="dark"]) .aide__island textarea:focus {
  background: transparent;
  background-color: transparent;
  border-color: transparent;
}
html[data-tint="1"][data-theme="dark"] .aide__msg--user,
html[data-tint="1"]:not([data-theme="dark"]) .aide__msg--user { background-color: var(--tint-bubble); }
html[data-tint="1"][data-theme="dark"] .aide-card,
html[data-tint="1"][data-theme="dark"] .aide-task { background-color: var(--tint-bubble); }
html[data-tint="1"]:not([data-theme="dark"]) .aide-card,
html[data-tint="1"]:not([data-theme="dark"]) .aide-task { background-color: var(--tint-card); }
html[data-tint="1"][data-theme="dark"] .aide-card:hover,
html[data-tint="1"][data-theme="dark"] .aide-task:hover { background-color: var(--tint-island); }
html[data-tint="1"]:not([data-theme="dark"]) .aide-card:hover,
html[data-tint="1"]:not([data-theme="dark"]) .aide-task:hover { background-color: var(--tint-lift); }
html[data-tint="1"] .bell__row:hover,
html[data-tint="1"] .bell__drop:hover,
html[data-tint="1"] .bell__check:hover,
html[data-tint="1"] .bell__x:hover,
html[data-tint="1"] .aide__x:hover,
html[data-tint="1"] .tasks .btn--ghost:hover,
html[data-tint="1"] .tasks .task-tab:hover,
html[data-tint="1"] .tasks .task-folder:hover,
html[data-tint="1"] .tasks .task-more:hover,
html[data-tint="1"] .modal .btn--ghost:hover,
html[data-tint="1"] .modal .xbtn:hover,
html[data-tint="1"] .modal .modal__x:hover,
html[data-tint="1"] .task-pop .rem-icon:hover,
html[data-tint="1"] .task-pop .pick__btn:hover,
html[data-tint="1"] .modal .pick__opt:hover,
html[data-tint="1"] .task-pop .pick__opt:hover { background-color: var(--tint-lift); filter: none; }
html[data-tint="1"] .modal .card--warn .btn--ghost:hover {
  background-color: color-mix(in srgb, var(--ink) 8%, var(--tint-side));
  color: var(--ink);
  filter: none;
}
html[data-tint="1"][data-theme="dark"] .modal .card--warn .btn--ghost:hover {
  background-color: color-mix(in srgb, #f3f3f3 10%, var(--tint-raise));
  color: #f3f3f3;
}
html[data-tint="1"] .modal .card--warn .btn--danger:hover {
  background-color: #d33b40;
  color: #fff;
  filter: none;
}
html[data-tint="1"] .tasks .task-tab.is-on:hover { background-color: var(--t-pill); }
html[data-tint="1"] .tasks .task-folder.is-on:hover { background-color: var(--t-btn); filter: brightness(.96); }
html[data-tint="1"] .tasks #remList .rem-item:hover::before { background: color-mix(in srgb, var(--tint-lift) 72%, transparent); }
html[data-tint="1"] .tasks {
  --t-card: var(--tint-card);
  --t-line: var(--tint-line);
  --t-pill: var(--tint-lift);
}
html[data-tint="1"][data-theme="dark"] .tasks { --t-bg: var(--tint-bg); }
html[data-tint="1"] .task-pop {
  --pop-bg: var(--tint-card);
  --pop-line: var(--tint-line);
  background-color: var(--tint-card);
  border-color: var(--tint-line);
}
html[data-tint="1"][data-theme="dark"] .task-pop,
html[data-tint="1"][data-theme="dark"] .modal .card {
  --pop-bg: var(--tint-lift);
  --pop-line: var(--tint-line);
  background-color: var(--tint-lift);
  border-color: var(--tint-line);
}
html[data-tint="1"]:not([data-theme="dark"]) .modal .card { background-color: var(--tint-card); }
html[data-tint="1"] .modal .card.card--nest { background-color: var(--card); }
html[data-tint="1"]:not([data-theme="dark"]) .modal .card--warn { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .modal .card--warn,
html[data-tint="1"][data-theme="dark"] #taskConfirm .card--warn { background-color: var(--tint-bg); }
html[data-tint="1"]:not([data-theme="dark"]) .modal .card--langs,
html[data-tint="1"]:not([data-theme="dark"]) .modal .card--keys,
html[data-tint="1"]:not([data-theme="dark"]) .room__browser { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .modal .card--langs,
html[data-tint="1"][data-theme="dark"] .modal .card--keys,
html[data-tint="1"][data-theme="dark"] .room__browser { background-color: var(--tint-bg); }
html[data-tint="1"]:not([data-theme="dark"]) .pass-screen .card { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .pass-screen .card { background-color: var(--tint-bg); }
html[data-tint="1"]:not([data-theme="dark"]) .fin__step,
html[data-tint="1"]:not([data-theme="dark"]) .fin__today,
html[data-tint="1"]:not([data-theme="dark"]) .fin__cat { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .fin__step,
html[data-tint="1"][data-theme="dark"] .fin__today,
html[data-tint="1"][data-theme="dark"] .fin__cat { background-color: var(--tint-bg); }
html[data-tint="1"][data-theme="dark"] .fin__cat.is-on,
html[data-tint="1"][data-theme="dark"] .fin__cat.is-on:hover { background-color: var(--tint-field); }
html[data-tint="1"]:not([data-theme="dark"]) .fin__cat:hover { background-color: color-mix(in srgb, var(--ink) 7%, var(--tint-side)); }
html[data-tint="1"][data-theme="dark"] .fin__cat:hover { background-color: color-mix(in srgb, #f3f3f3 7%, var(--tint-bg)); }
html[data-tint="1"]:not([data-theme="dark"]) .fin-board,
html[data-tint="1"]:not([data-theme="dark"]) .fin-act,
html[data-tint="1"]:not([data-theme="dark"]) .fin--account .fin__sheet { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .fin-board,
html[data-tint="1"][data-theme="dark"] .fin-act,
html[data-tint="1"][data-theme="dark"] .fin--account .fin__sheet { background-color: var(--tint-bg); }
html[data-tint="1"]:not([data-theme="dark"]) .fin-act__dot { stroke: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .fin-act__dot { stroke: var(--tint-bg); }
html[data-tint="1"]:not([data-theme="dark"]) .lang-find { background-color: var(--tint-card); }
html[data-tint="1"][data-theme="dark"] .lang-find { background-color: var(--tint-field); }
html[data-tint="1"][data-theme="dark"] .lang-find input,
html[data-tint="1"][data-theme="dark"] .lang-find input:focus {
  background-color: transparent;
  box-shadow: none;
}
html[data-tint="1"][data-theme="dark"] .modal .pick__btn,
html[data-tint="1"][data-theme="dark"] .modal .pick__menu,
html[data-tint="1"][data-theme="dark"] .task-pop .pick__menu {
  background-color: var(--tint-field);
  border-color: var(--tint-line);
}
html[data-tint="1"]:not([data-theme="dark"]) .modal .pick__menu,
html[data-tint="1"]:not([data-theme="dark"]) .task-pop .pick__menu {
  background-color: var(--tint-card);
  border-color: var(--tint-line);
}
html[data-tint="1"] .pass-line:hover::before { background: color-mix(in srgb, var(--ink) 5%, transparent); }
html[data-tint="1"] .pass-line.is-on::before,
html[data-tint="1"] .pass-line.is-on:hover::before { background: var(--tint-card); }
html[data-tint="1"] .pass-line.is-drag:hover::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
html[data-tint="1"][data-theme="dark"] .home__tune:hover,
html[data-tint="1"][data-theme="dark"] .mail__bar .mail__reload:hover,
html[data-tint="1"][data-theme="dark"] .mail__letter .mail__reload:hover,
html[data-tint="1"][data-theme="dark"] .task-seek:hover { background-color: color-mix(in srgb, #f3f3f3 7%, var(--tint-bg)); }
html[data-tint="1"]:not([data-theme="dark"]) .home__tune:hover,
html[data-tint="1"]:not([data-theme="dark"]) .mail__bar .mail__reload:hover,
html[data-tint="1"]:not([data-theme="dark"]) .mail__letter .mail__reload:hover,
html[data-tint="1"]:not([data-theme="dark"]) .task-seek:hover { background-color: color-mix(in srgb, var(--ink) 7%, var(--tint-side)); }
html[data-tint="1"][data-theme="dark"] .task-pop .pick__btn,
html[data-tint="1"][data-theme="dark"] .task-pop #popTime {
  background-color: var(--tint-field);
  border-color: var(--tint-line);
  color: #f3f3f3;
}
html[data-tint="1"][data-theme="dark"] .task-pop .pick__btn:hover,
html[data-tint="1"][data-theme="dark"] .task-pop #popTime:hover { background-color: color-mix(in srgb, #f3f3f3 10%, var(--tint-field)); }
html[data-tint="1"][data-theme="dark"] #mailFindInput,
html[data-tint="1"][data-theme="dark"] #mailFindInput:focus {
  background-color: var(--tint-bg);
  border-color: transparent;
  box-shadow: none;
  color: #f3f3f3;
}
html[data-tint="1"][data-theme="dark"] .mail-find__chips button { border-color: var(--tint-line); }
html[data-tint="1"][data-theme="dark"] .mail-find__chips button.is-on,
html[data-tint="1"][data-theme="dark"] .mail-find__chips button:hover,
html[data-tint="1"][data-theme="dark"] .mail-find__hit:hover,
html[data-tint="1"][data-theme="dark"] .mail-find__all:hover { background-color: var(--tint-lift); }
html[data-tint="1"]:not([data-theme="dark"]) .pass-pill,
html[data-tint="1"]:not([data-theme="dark"]) .pass-link { background-color: var(--tint-side); }
html[data-tint="1"][data-theme="dark"] .pass-pill,
html[data-tint="1"][data-theme="dark"] .pass-link { background-color: var(--tint-bg); }
html[data-tint="1"] .pass-line.is-on,
html[data-tint="1"] .pass-line.is-on:hover { background-color: transparent; }
html[data-tint="1"][data-theme="dark"] .pass-line.is-on::before,
html[data-tint="1"][data-theme="dark"] .pass-line.is-on:hover::before { background-color: var(--tint-raise); }
html[data-tint="1"]:not([data-theme="dark"]) .pass-peek { background-color: var(--tint-side); }
html[data-tint="1"]:not([data-theme="dark"]) .mail-acts { background-color: var(--tint-lift); }
html[data-tint="1"][data-theme="dark"] .cal__cell:hover,
html[data-tint="1"][data-theme="dark"] .cal__cell.is-on,
html[data-tint="1"][data-theme="dark"] .cal__cell.is-on:hover { background-color: var(--tint-field); }
html[data-tint="1"]:not([data-theme="dark"]) .cal__cell:hover,
html[data-tint="1"]:not([data-theme="dark"]) .cal__cell.is-on,
html[data-tint="1"] .cal__item:hover,
html[data-tint="1"] .cal__nav:hover { background-color: var(--tint-lift); }

.oh {
  --oh-bg: #f8f8f8;
  --oh-side: #161616;
  --oh-line: rgba(255, 255, 255, 0.08);
  --oh-text: #f3f3f3;
  --oh-muted: #9b9b9b;
  --oh-hover: rgba(255, 255, 255, 0.06);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--oh-bg);
  color: var(--oh-text);
  font: 14px/1.45 "Segoe UI", sans-serif;
  position: relative;
}
.oh button, .oh textarea, .oh input { font: inherit; color: inherit; }
.oh-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 8px 8px;
  background: var(--oh-side);
  border-right: 1px solid var(--oh-line);
}
.oh-item, .oh-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.oh-item:hover, .oh-chat:hover, .oh-item.is-on { background: var(--oh-hover); }
.oh-item span, .oh-chat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-label { margin: 16px 10px 6px; color: var(--oh-muted); font-size: 12px; }
.oh-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; }
.oh-chat { color: var(--oh-text); }
.oh-chat i, .oh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  flex: none;
}
.oh-chat em { margin-left: auto; color: var(--oh-muted); font-style: normal; font-size: 12px; }
.oh-chat.is-on { background: rgba(255, 255, 255, 0.08); }
.oh-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 8px; }
.oh-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.oh.oh--desk { grid-template-columns: minmax(0, 1fr); }
.oh-top, .oh-log { grid-column: 1; }
.oh-top { grid-row: 1; }
.oh-log { grid-row: 2; }
.oh-ask { grid-row: 3; }
.oh-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--oh-line);
}
.oh-top h1 { margin: 0; font-size: 14px; font-weight: 600; }
.oh-git, .oh-plan, .oh-pill, .oh-tab, .oh-ico, .oh-send {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.oh-git { margin-left: auto; color: var(--oh-muted); }
.oh-log {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 22px 12px;
}
.oh-user, .oh-agent { position: relative; }
.oh-user {
  align-self: flex-end;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #2a2a2a;
  font-size: 14px;
  line-height: 24px;
  overflow-wrap: anywhere;
}
.oh-user.is-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oh-more {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  border: 1px solid var(--oh-line);
  border-radius: 999px;
  background: #1c1c1c;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.oh-agent { width: 100%; margin-top: 24px; font-size: 14px; line-height: 24px; }
.oh-card { margin-top: 8px; color: var(--oh-muted); font-size: 14px; }
.oh-card > button, .oh-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.oh-typing { margin: 8px 0 0; color: var(--oh-muted); font-size: 14px; }
.oh-agent p, .oh-fold-body p { margin: 0; }
.oh-agent p + p, .oh-fold-body p + p { margin-top: 12px; }
.oh-agent ul { margin: 0 0 12px; padding-left: 1.25em; }
.oh-agent li { margin: 0 0 8px; }
.oh-agent a { color: #8ab4ff; }
.oh-user[data-time]:not([data-time=""]):hover::after,
.oh-agent[data-time]:not([data-time=""]):hover::after {
  content: attr(data-time);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  background: #f3f3f3;
  color: #111;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.oh-fold { margin-top: 8px; color: var(--oh-muted); }
.oh-fold > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oh-muted);
  cursor: pointer;
  text-align: left;
}
.oh-act-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-act-side { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.oh-spin {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: oh-spin 0.8s linear infinite;
}
@keyframes oh-spin { to { transform: rotate(360deg); } }
.oh-check { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.oh-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.oh-step > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.oh-code {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  border-radius: 8px;
  background: #0c0c0c;
  color: #d7d7d7;
  white-space: pre-wrap;
  font: 12px/1.45 ui-monospace, monospace;
}
.oh-agent code, .oh-fold-body code {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font: 12px ui-monospace, monospace;
}
.oh-agent h1, .oh-agent h2, .oh-agent h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.oh-banner {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px;
  border: 1px solid var(--oh-line);
  border-radius: 8px;
  background: #1b1b1b;
  color: #cfcfcf;
  font-size: 14px;
  white-space: pre-wrap;
}
.oh-status { color: var(--oh-muted); font-size: 12px; white-space: nowrap; }
.oh-chev, .oh-bulb { flex: none; }
.oh-chev { fill: currentColor; stroke: none; }
.oh-bulb { fill: none; stroke: currentColor; stroke-width: 1.6; }
.oh-fold-body { margin-top: 6px; padding-left: 24px; color: #cfcfcf; }
.oh-tasks { display: grid; gap: 8px; }
.oh-task { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.oh-task__mark {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
}
.oh-task.is-now .oh-task__mark { background: radial-gradient(circle, currentColor 42%, transparent 46%); }
.oh-task.is-done { color: var(--muted); }
.oh-task.is-done .oh-task__mark { background: currentColor; }
.oh-task small { display: block; color: var(--muted); font-size: 12px; }
.oh-fold-body p:last-child { margin-bottom: 0; }
.oh-thread {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
  min-height: 0;
  width: min(800px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
}
.oh-thread .oh-log { flex: 1; padding: 16px 0 32px; }
.oh-thread .oh-top { padding: 0; }
.oh-ask {
  position: relative;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 15px;
  background: #1c1c1c;
}
.oh-ask.is-plan { border: 1px solid #597ff4; }
.oh-grip { position: absolute; top: 0; left: 0; right: 0; height: 12px; cursor: ns-resize; }
.oh-field {
  width: 100%;
  min-height: 20px;
  max-height: 240px;
  overflow: auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.oh-field:empty:before {
  content: attr(data-placeholder);
  color: #9b9b9b;
  pointer-events: none;
}
.oh-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.oh-ico, .oh-send {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--oh-muted);
}
.oh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--oh-text);
}
.oh-gap { flex: 1; }
.oh-send {
  border: 1px solid #f3f3f3;
  background: transparent;
  color: #fff;
}
.oh-send:disabled { border-color: #9b9b9b; color: #9b9b9b; cursor: default; }
.oh-pop {
  position: absolute;
  left: 12px;
  bottom: 52px;
  display: grid;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--oh-line);
  border-radius: 10px;
  background: #1b1b1b;
}
.oh-pop button {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  padding: 0 8px;
  cursor: pointer;
}
.oh-pop button:hover { background: var(--oh-hover); }
.oh-draw {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--oh-line);
  background: #101010;
}
.oh-tabs { display: flex; gap: 2px; align-items: center; min-height: 44px; padding: 6px 8px; overflow: hidden; border-bottom: 1px solid var(--oh-line); }
.oh-tab {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--oh-muted);
  white-space: nowrap;
}
.oh-tab svg { width: 16px; height: 16px; }
.oh-tab.is-on { background: rgba(255, 255, 255, 0.08); color: var(--oh-text); }
.oh-vscode { margin-left: auto; }
.oh-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--oh-line);
}
.oh-url {
  height: 28px;
  min-width: 0;
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--oh-line);
  border-radius: 6px;
  background: #161616;
  color: var(--oh-muted);
  font-size: 12px;
}
.oh-out {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--oh-muted);
}
.oh-out svg { width: 14px; height: 14px; }
.oh-out[disabled], .oh-out:disabled { opacity: 0.4; cursor: default; }
.oh-files { margin: 0; padding: 8px 14px; list-style: none; overflow: auto; }
.oh-files li { padding: 8px 0; border-bottom: 1px solid var(--oh-line); }
.oh .oh-tasks { padding: 16px; overflow: auto; }
.oh-empty {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--oh-muted);
}
.oh-empty p { max-width: 360px; margin: 0; }
.oh-shot { flex: 1; min-height: 0; overflow: auto; background: #0c0c0c; }
.oh-shot img { display: block; width: 100%; height: auto; }
.oh-term {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  white-space: pre-wrap;
  color: #d7d7d7;
  font: 12px/1.45 ui-monospace, monospace;
}
.oh-chat.is-err i { background: #e85d5d; }
.oh-chat.is-pause i { background: #9b9b9b; }
.oh .oh-kind { margin: 16px 0 0; color: var(--oh-muted); font-size: 12px; }
.oh-chat.is-run i { box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.28); }
.oh-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-plan {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.oh-blank {
  grid-column: 1 / -1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
}
.oh-blank h1 { margin: 0; font-size: 22px; }
.oh-blank p { margin: 0; color: var(--oh-muted); }
.oh-cmd {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 260px;
  width: min(420px, calc(100% - 280px));
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--oh-line);
  border-radius: 12px;
  background: #1b1b1b;
}
.oh-cmd input, .oh-cmd button {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  padding: 0 10px;
}
.oh-cmd button { cursor: pointer; }
.oh-cmd button:hover { background: var(--oh-hover); }
@media (max-width: 900px) {
  .oh { grid-template-columns: 1fr; }
  .oh-side { display: none; }
  .oh-body { grid-template-columns: 1fr; }
  .oh-draw { display: none; }
}

.try__ring { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ai-muted); cursor: pointer; transition: color .15s ease, background .15s ease; }
.try__ring[hidden] { display: none; }
.try__ring:hover, .try__ring[aria-expanded="true"] { color: var(--ai-hover-ink); background: var(--ai-hover); }
.try__ring svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.try__ring circle { fill: none; stroke-width: 2.4; }
.try__ring-track { stroke: var(--ai-rule); }
.try__ring-dot { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.try__ring[data-level="mid"] { color: #d19a2b; }
.try__ring[data-level="high"] { color: #e2564a; }
.try__ctx-pop { position: fixed; z-index: 90; width: 288px; padding: 12px; border: 1px solid var(--ai-rule); border-radius: 14px; background: var(--ai-plate-bg); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); color: var(--ai-plate-ink); font-size: 13px; }
.try__ctx-pop[hidden] { display: none; }
.try__ctx-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.try__ctx-pop-head b { font-weight: 600; font-size: 14px; color: var(--ai-strong); }
.try__ctx-pop-head span { font-size: 12px; color: var(--ai-muted); font-variant-numeric: tabular-nums; }
.try__ctx-pop-bar { height: 5px; border-radius: 999px; background: var(--ai-rule); overflow: hidden; margin-bottom: 10px; }
.try__ctx-pop-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ai-plate-ink); transition: width .3s ease; }
.try__ctx-pop-bar[data-level="mid"] i { background: #d19a2b; }
.try__ctx-pop-bar[data-level="high"] i { background: #e2564a; }
.try__ctx-pop-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.try__ctx-pop-row:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.try__ctx-pop-row + .try__ctx-pop-row { margin-top: 2px; box-shadow: inset 0 1px 0 var(--ai-rule); }
.try__ctx-pop-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--ai-muted); }
.try__ctx-pop-icon svg { width: 15px; height: 15px; }
.try__ctx-pop-name { flex: 1 1 auto; }
.try__ctx-pop-row em { font-style: normal; font-size: 12px; color: var(--ai-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 430px) { .try__ctx-pop { width: min(288px, calc(100vw - 24px)); } }
.try__usage-lead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 6px 6px; font-size: 13px; color: var(--ai-muted); }
.try__usage-lead b { color: var(--ai-strong); font-weight: 500; }
.try__usage-size { padding: 6px 6px 0; margin: 0; font-size: 12px; color: var(--ai-muted); font-variant-numeric: tabular-nums; text-align: right; }
.try__usage-bar[data-level="mid"] i { background: #d19a2b; }
.try__usage-bar[data-level="high"] i { background: #e2564a; }
.try__usage-actions { display: flex; gap: 6px; padding: 10px 0 4px; }
.try__usage-btn { border: 1px solid var(--ai-rule); border-radius: 100px; background: transparent; color: var(--ai-strong); padding: 4px 12px; font-size: 12px; cursor: pointer; }
.try__usage-btn:hover { background: var(--ai-hover); }
.try__usage-title { margin: 14px 6px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-muted); }
.try__usage-row.is-sub { padding-left: 16px; font-size: 12px; }


/* Навыки живут в настройках: та же колонка .settings и те же панели .set-panel,
   что у остальных разделов. Список — строки с разделителями, карточка навыка
   выезжает справа. Только токены кабинета, поэтому тёмная тема идёт сама. */
.market { gap: 20px; min-width: 0; }
.market .head p { margin: 4px 0 0; max-width: 56ch; font-size: 14px; line-height: 1.45; color: var(--muted); }
.market__note { margin: -8px 2px 0; font-size: 13px; color: var(--danger, #d4483b); }
.market__note[hidden] { display: none; }

.market__pick { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; }
.market__new {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.market__new:hover { border-color: color-mix(in srgb, var(--ink) 26%, var(--line)); color: var(--ink); }
.market__new svg { width: 15px; height: 15px; }

.market__bar { flex-wrap: wrap; gap: 10px; }
.market__find {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: text;
  transition: box-shadow .12s ease;
}
:root[data-theme="dark"] .market__find { background: #242424; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent); }
.market__find:focus-within,
:root[data-theme="dark"] .market__find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, var(--line)); }
.market__find svg { flex: none; width: 15px; height: 15px; color: var(--muted); }
.market__find input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
.market__find input::-webkit-search-cancel-button { appearance: none; }
.market__scope { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.market__scope button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.market__scope button:hover { color: var(--ink); }
.market__scope button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 14%); }
:root[data-theme="dark"] .market__scope button.is-on { background: var(--bg); }
.market__scope i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.market__count { margin: -10px 2px 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.market__list { overflow: hidden; }
.market__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
  transition: background .12s ease;
}
.market__row + .market__row,
.market__ghost + .market__ghost { box-shadow: inset 0 1px 0 var(--line); }
.market__row.is-picked { background: color-mix(in srgb, var(--ink) 5%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .market__row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
}
.market__open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.market__open:focus-visible,
.market__act:focus-visible,
.market__x:focus-visible,
.market__new:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); outline-offset: 2px; border-radius: 10px; }
.market__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease;
}
.market__row.is-on .market__mark { background: var(--ink); color: var(--card); }
.market__mark.is-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 13px; }
.market__id { display: grid; gap: 2px; min-width: 0; }
.market__id b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.market__id small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.market__meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.market__meta span + span::before { content: "·"; margin-right: 6px; }

.market__act {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 108px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.market__act > span { grid-area: 1 / 1; }
.market__act:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.market__act[data-on="0"] { border-color: transparent; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.market__act .is-off { visibility: hidden; }
.market__act[data-on="0"]:hover .is-off,
.market__act[data-on="0"]:focus-visible .is-off { visibility: visible; }
.market__act[data-on="0"]:hover .is-on,
.market__act[data-on="0"]:focus-visible .is-on { visibility: hidden; }
.market__act:disabled { opacity: .5; cursor: default; }

.market__veil { position: fixed; inset: 0; z-index: 74; background: rgb(0 0 0 / 34%); }
.market__side {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 75;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  width: min(440px, calc(100vw - 24px));
  min-width: 0;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgb(0 0 0 / 36%);
}
.market__veil[hidden],
.market__side[hidden] { display: none; }
.market__side-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.market__side-id { display: grid; gap: 2px; min-width: 0; }
.market__side-id h2 { margin: 0; overflow: hidden; font-size: 16px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.market__side-id p { margin: 0; overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.market__x {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.market__x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.market__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.market__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.market__facts span { padding: 2px 9px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.market__cta { width: 100%; }
.market__doc {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.market__doc > :first-child { margin-top: 0; }
.market__doc > :last-child { margin-bottom: 0; }
.market__doc h1, .market__doc h2, .market__doc h3, .market__doc h4 { margin: 16px 0 6px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.market__doc p { margin: 0 0 8px; }
.market__doc ul, .market__doc ol { margin: 0 0 8px; padding-left: 18px; }
.market__doc li { margin: 2px 0; }
.market__doc strong { font-weight: 650; }
.market__doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.market__doc code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; }
.market__doc pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: auto; }
.market__doc pre code { padding: 0; background: transparent; }
.market__doc blockquote { margin: 0 0 8px; padding: 0 0 0 10px; border-left: 2px solid var(--line); color: var(--muted); }
.market__doc hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.market__doc table { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 12px; }
.market__doc th, .market__doc td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.market__doc th { font-weight: 650; }
.market__wait { margin: 0; font-size: 13px; color: var(--muted); }

.market__empty { display: grid; justify-items: start; gap: 6px; padding: 28px 18px; }
.market__empty b { font-size: 14px; font-weight: 650; }
.market__empty p { margin: 0; max-width: 48ch; font-size: 13px; line-height: 1.45; color: var(--muted); }
.market__empty .btn { margin-top: 6px; }

.market__ghost { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px; }
.market__ghost-mark { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.market__ghost-body { display: grid; gap: 7px; align-content: center; }
.market__ghost-body i { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.market__ghost-mark, .market__ghost-body i { animation: market-pulse 1.2s ease-in-out infinite; }
@keyframes market-pulse { 50% { opacity: .45; } }

@media (max-width: 700px) {
  .market__bar { gap: 8px; }
  .market__find { flex-basis: 100%; }
  .market__scope { flex: 1 1 auto; justify-content: space-between; }
  .market__scope button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .market__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .market__act { justify-self: start; }
  .market__ghost { padding: 14px; }
}
@media (max-width: 560px) {
  .market__side {
    inset: auto 0 0 0;
    width: auto;
    max-height: 82dvh;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .market__side::before {
    content: "";
    justify-self: center;
    width: 36px;
    height: 4px;
    margin: -6px 0 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .market__ghost-mark, .market__ghost-body i { animation: none; }
}
.try .try__send.is-halt {
  width: auto;
  min-width: 34px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1;
}

.modstore { display: grid; gap: 18px; width: 100%; margin: 0 0 32px; }
.modstore__head h1 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.modstore__head p { margin: 4px 0 0; max-width: 62ch; color: var(--muted); }
.modstore__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.modstore__find {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.modstore__find svg { flex: none; }
.modstore__find input,
:root[data-theme="dark"] .modstore__find input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  box-shadow: none;
}
.modstore__scope { display: flex; gap: 2px; padding: 2px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.modstore__scope button {
  border: 0;
  border-radius: 10px;
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.modstore__scope button.is-on { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.modstore__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.modstore__empty { margin: 0; }
.modcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 196px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.modcard__open {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "mark name"
    "mark line"
    "meta meta";
  column-gap: 10px;
  row-gap: 4px;
  align-content: start;
  flex: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.modcard__mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.modcard__mark svg { width: 18px; height: 18px; }
.modcard__copy { display: contents; }
.modcard__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.modcard__name b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.modcard__name .modchip { flex: none; font-size: 11px; line-height: 1.4; }
.modcard__line {
  grid-area: line;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modcard__meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modcard__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  flex: none;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.modcard__go:disabled { opacity: 0.45; cursor: default; }
.modcard__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modcard__id svg { flex: none; }
.modcard__id span { display: grid; min-width: 0; }
.modcard__id b { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.modcard__id small { color: var(--muted); font-size: 13px; }
.modone__hold { margin: 0; color: var(--muted); font-size: 13px; }
.modchip {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.modchip.is-on { color: var(--ink); }
.modshot {
  height: 176px;
  padding: 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ink) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--ink) 4%, var(--canvas));
}
.modshot.is-hero { height: 240px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.modshot.is-side { height: 240px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.shot {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.shot__chrome { display: flex; gap: 5px; }
.shot__chrome i { width: 7px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.shot__body { display: grid; align-content: start; min-height: 0; }
.shot__body:has(.shot__bars) { height: 100%; }
.shot__line, .shot__cal, .shot__files, .shot__bars { min-height: 0; }
.shot__line {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  margin-top: 6px;
}
.shot__line i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent);
}
.shot__line b, .shot__line em {
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.shot__line b { width: 58%; }
.shot__line em { width: 18%; margin-left: auto; }
.shot__line.is-hot b { width: 74%; background: color-mix(in srgb, var(--ink) 42%, transparent); }
.shot__line.is-done i { background: var(--ink); box-shadow: none; }
.shot__line.is-done b { width: 40%; opacity: 0.45; }
.shot__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-content: start; }
.shot__cal i { aspect-ratio: 1; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.shot__cal i.is-on { background: var(--ink); }
.shot__bars { display: flex; align-items: end; gap: 6px; height: 92px; }
.shot__bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.shot__files { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shot__files i { height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.modone { display: grid; gap: 16px; width: min(760px, 100%); }
.modone__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.modone__film { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 10px; }
.modone__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modone__top .btn { flex: none; }
.modfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modfact {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.modfact span { color: var(--muted); font-size: 12px; }
.modfact b { font-size: 14px; font-weight: 650; }
.modone__copy { display: grid; gap: 8px; }
.modone__copy h2 { font-size: 15px; font-weight: 650; }
.modone__copy p, .modone__copy li { color: var(--ink); font-size: 14px; line-height: 1.5; }
.modone__copy ul { margin: 4px 0 0; padding-left: 18px; }
.modupd { display: grid; gap: 8px; }
.modupd article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.modupd p { margin: 0; }
.blank__card.mod-held { width: min(420px, 100%); }
.modcard__open:focus-visible,
.modcard__go:focus-visible,
.modstore__scope button:focus-visible,
.modone__back:focus-visible,
.modstore__find:focus-within {
  outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .modcard:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, var(--line)); }
  .modcard__go:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .modone__back:hover { color: var(--ink); }
}
@media (max-width: 1180px) {
  .modstore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .modstore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .modstore__bar { display: grid; }
  .modstore__grid { grid-template-columns: 1fr; }
  .modone__film, .modfacts { grid-template-columns: 1fr 1fr; }
  .modshot.is-side { display: none; }
  .modone__top { align-items: flex-start; }
}

/* ---- Harness: лента переписки ---------------------------------------- */
.hn { --ai-col: 748px; }
.try.hn.is-talk .try__log { padding: 26px 0 34px; }
.hn__turn { display: flex; flex-direction: column; min-width: 0; }
.hn__turn + .hn__turn { margin-top: 32px; }
.hn__said { display: flex; flex-direction: column; align-items: flex-end; }
.hn .try__user { margin-top: 0; max-width: min(76%, 560px); padding: 10px 15px; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.hn__say { display: flex; flex-direction: column; }
.hn .try__agent { margin-top: 20px; font-size: 15px; line-height: 1.66; }
.hn__said, .hn__say { position: relative; }
.hn__acts { position: absolute; z-index: 1; display: flex; align-items: center; gap: 2px; min-height: 0; margin: 0; color: var(--ai-faint); opacity: 0; transition: opacity .14s ease; }
.hn__said .hn__acts { top: 6px; right: 8px; }
.hn__say .hn__acts { top: 0; right: 0; }
.hn__said:hover .hn__acts, .hn__say:hover .hn__acts, .hn__acts:focus-within, .hn__acts:has(.is-done) { opacity: 1; }
.hn__at { padding: 0 4px; font-size: 11px; line-height: 20px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hn .try__copy { position: static; display: inline-grid; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-faint); opacity: 1; }
.hn .try__copy:hover { background: var(--ai-hover); color: var(--ai-hover-ink); }
.hn .try__copy.is-done { color: var(--ai-ok); }
.hn__proc { margin-top: 16px; }
.hn__fold { display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 0; border: 0; background: transparent; color: var(--ai-muted); font-family: inherit; font-size: 13px; line-height: 20px; text-align: left; cursor: pointer; transition: color .14s ease; }
.hn__fold:hover { color: var(--ai-hover-ink); }
.hn__fold > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn__fold > svg, .hn__fold > .try__spin { flex: 0 0 auto; }
.hn__fold .try__chevron { color: var(--ai-faint); transition: transform .16s ease; }
.hn__proc.is-open > .hn__fold .try__chevron { transform: rotate(180deg); }
.hn__fold .try__spin { width: 11px; height: 11px; border-width: 1.5px; color: var(--ai-faint); }
.hn__done { color: var(--ai-faint); }
.hn__steps { display: none; padding: 2px 0 2px 18px; }
.hn__proc.is-open > .hn__steps { display: block; }
.hn .try__row, .hn .try__think > .try__fold { padding: 5px 0; }
.hn .try__row { cursor: default; }
.hn .try__row[aria-expanded] { cursor: pointer; }
.hn .try__row .try__name, .hn .hn__arg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn .try__row .try__mono { font-family: inherit; font-weight: 500; letter-spacing: 0; color: var(--ai-strong); }
.hn__arg { color: var(--ai-faint); font-family: var(--ai-mono); font-size: 12px; }
.hn .try__gray { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--ai-rule); color: var(--ai-muted); font-size: 13.5px; line-height: 21px; }
.hn .try__detail { padding-bottom: 4px; }
.hn .try__detail pre { margin: 0 0 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; max-height: 240px; }
.hn .try__detail pre:empty { display: none; }
.hn__live { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--ai-faint); font-size: 13px; line-height: 20px; }
.hn__compose { width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.hn__compose .try__plate { width: 100%; margin: 0; }
.hn .try__note { width: 100%; margin: 0; padding: 0 4px; }
.hn__live .try__spin { width: 12px; height: 12px; border-width: 1.5px; }
@media (max-width: 720px) {
  .hn__turn + .hn__turn { margin-top: 26px; }
  .try.hn.is-talk .try__log { padding: 18px 0 26px; }
  .hn .try__user { max-width: 88%; }
}