.shot-frame[data-preview] { place-items: stretch; }
.shot-frame[data-preview] .shot-placeholder { display: none; }

.mk {
  --m-ground: #191715;
  --m-pane: #272421;
  --m-raised: #34312d;
  --m-hover: #44403b;
  --m-sel: #56524d;
  --m-rail-on: #37332e;
  --m-line: #393632;
  --m-line-strong: #514d48;
  --m-fg: #f6f7f9;
  --m-hi: #f8f7f7;
  --m-fg-2: #c5c2bf;
  --m-fg-3: #a5a19c;
  --m-brand: #d6ffd0;
  --m-brand-ink: #013a33;
  --m-brand-16: rgba(214, 255, 208, .16);
  --m-bub-in: #34312d;
  --m-bub-in-ink: #f8f7f7;
  --m-bub-out: #1d453a;
  --m-bub-out-ink: #e4f6e6;
  --m-track: rgba(255, 255, 255, .07);
  --m-running: #a9d8a3;
  --m-thumb: 0 1px 2px rgba(0, 0, 0, .25);

  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
  font: 400 13px/1.5 var(--font);
  color: var(--m-fg);
  -webkit-font-smoothing: antialiased;
  background: var(--m-ground);
  overflow: hidden;
  user-select: none;
}
.mk button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mk svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mk-shell { display: grid; gap: 8px; padding: 8px; height: 100%; }
.mk-app { grid-template-columns: 56px 320px minmax(0, 1fr); }
.mk-app.mk-narrow { grid-template-columns: minmax(0, 1fr); }
.mk-app.mk-narrow .mk-rail, .mk-app.mk-narrow .mk-list { display: none; }
.mk-one { grid-template-columns: minmax(0, 1fr); }
.mk-two { grid-template-columns: 256px minmax(0, 1fr); }
.mk-two.mk-narrow, .mk-two.mk-base { grid-template-columns: minmax(0, 1fr); }
.mk-two.mk-narrow .mk-slist, .mk-two.mk-base .mk-slist { display: none; }

.mk-pane {
  background: var(--m-pane);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}

.mk-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mk-rail .mk-mark { width: 32px; height: 32px; display: grid; place-items: center; }
.mk-rail .mk-mark img { width: 100%; height: 100%; display: block; }
.mk-rail .mk-chev { height: 20px; display: grid; place-items: center; color: var(--m-fg-3); font-size: 12px; }
.mk-rail .mk-ws { width: 32px; height: 32px; border-radius: 9px; background: var(--m-pane); margin-bottom: 6px; box-shadow: inset 0 0 0 1px var(--m-line); }
.mk-rail i { width: 40px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--m-fg-3); font-size: 17px; }
.mk-rail i.on { background: var(--m-rail-on); color: var(--m-hi); }
.mk-rail .mk-sp { flex: 1; }
.mk-rail .mk-me { width: 26px; height: 26px; border-radius: 50%; background: var(--m-raised); color: var(--m-fg-2); display: grid; place-items: center; font-size: 10px; font-weight: 600; margin-top: 6px; }

.mk-lhead { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px 0 16px; flex: none; border-bottom: 1px solid var(--m-line); }
.mk-lhead .mk-fun { color: var(--m-fg-3); font-size: 14px; }
.mk-lhead b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--m-hi); }
.mk-lhead .mk-count { color: var(--m-fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-senders { margin-left: auto; display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 8px; background: var(--m-raised); flex: none; }
.mk-sender { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--m-fg-2); }
.mk-sender[data-av] { padding: 0 2px; }
.mk-sender.on { background: var(--m-pane); color: var(--m-hi); box-shadow: var(--m-thumb); }
.mk-sender .mk-av { width: 18px; height: 18px; font-size: 8px; }
.mk-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 16px; flex: none; border-bottom: 1px solid var(--m-line); color: var(--m-fg-3); font-size: 13px; }
.mk-kbd { margin-left: auto; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--m-line); font-size: 10px; line-height: 1.6; }
.mk-rows { flex: 1; min-height: 0; overflow: hidden; }

.mk-bucket { display: flex; align-items: flex-end; height: 30px; padding: 0 24px 5px; background: var(--m-pane); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--m-fg-3); }
.mk-row { padding: 0 10px 6px; }
.mk-conv { --m-card: var(--m-raised); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center; align-items: center; height: 60px; padding: 0 14px; border-radius: 12px; background-color: var(--m-card); transition: background-color 120ms cubic-bezier(.55, .085, .68, .53); }
.mk-row.on .mk-conv { --m-card: var(--m-sel); }
.mk-avw { position: relative; grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; }
.mk-avi { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mk-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; letter-spacing: -.03em; background: linear-gradient(158deg, oklch(.40 .030 var(--hue, 90)) 0%, oklch(.31 .020 var(--hue, 90)) 100%); color: oklch(.84 .05 var(--hue, 90)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .045); }
.mk-sb { position: absolute; right: -5px; bottom: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--m-card); }
.mk-sb .mk-av { width: 18px; height: 18px; font-size: 8px; }
.mk-nm { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--m-hi); }
.mk-nmt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-stage { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent); flex: none; white-space: nowrap; }
.mk-pv { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.35; color: var(--m-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row[data-unread] .mk-pv { color: var(--m-fg-2); }
.mk-tm { grid-column: 3; grid-row: 1; justify-self: end; font-size: 11px; color: var(--m-fg-3); font-variant-numeric: tabular-nums; }
.mk-row[data-unread] .mk-tm { color: var(--m-hi); font-weight: 600; }
.mk-ct { grid-column: 3; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--m-brand); color: var(--m-brand-ink); font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-lfoot { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 36px; flex: none; border-top: 1px solid var(--m-line); font-size: 11px; color: var(--m-fg-3); }
.mk-lfoot .mk-key { padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--m-line); }
.mk-lfoot .mk-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.mk-thead { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; flex: none; border-bottom: 1px solid var(--m-line); }
.mk-thead .mk-av { width: 24px; height: 24px; font-size: 10px; }
.mk-thead b { font-size: 13px; font-weight: 500; color: var(--m-hi); }
.mk-camp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--m-fg-3); }
.mk-camp svg { color: var(--m-brand); }
.mk-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: var(--m-raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / .035); color: var(--m-fg-3); }
.mk-tools i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.mk-tdiv { width: 1px; height: 16px; background: var(--m-line); margin: 0 2px; flex: none; }
.mk .mk-btn2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--m-pane); color: var(--m-fg); box-shadow: inset 0 0 0 1px var(--m-line); flex: none; }
.mk-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mk .mk-btn3 { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--m-bub-out); color: var(--m-bub-out-ink); flex: none; }
.mk .mk-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; background: var(--m-brand); color: var(--m-brand-ink); }

.mk-msgs { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; }
.mk-day { align-self: center; width: fit-content; margin: 16px auto; padding: 4px 10px; border-radius: 999px; background: var(--m-track); color: var(--m-fg-2); font-size: 11px; font-weight: 600; }
.mk-unreadline { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--m-running); font-size: 11px; font-weight: 600; }
.mk-unreadline::before, .mk-unreadline::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--m-running) 45%, transparent); }
.mk-grp { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; width: 100%; align-items: end; }
.mk-grp .mk-av { width: 24px; height: 24px; font-size: 10px; }
.mk-out { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.mk-grp[data-end], .mk-out[data-end] { margin-bottom: 6px; }
.mk-b { display: flow-root; width: fit-content; min-width: 11ch; max-width: min(88%, 68ch); padding: 8px 10px 7px; border-radius: 12px; font-size: 12px; line-height: 1.45; }
.mk-b.in { background: var(--m-bub-in); color: var(--m-bub-in-ink); }
.mk-b.out { background: var(--m-bub-out); color: var(--m-bub-out-ink); margin-left: auto; }
.mk-grp[data-end] .mk-b.in { border-bottom-left-radius: 4px; }
.mk-out[data-end] .mk-b.out { border-bottom-right-radius: 4px; }
.mk-stamp { float: right; display: inline-flex; align-items: center; gap: 4px; margin: 4px -3px -2px 8px; font-size: 10px; line-height: 1; color: color-mix(in srgb, currentColor 58%, transparent); font-variant-numeric: tabular-nums; }
.mk-stamp svg { width: 12px; height: 12px; }

.mk-cwrap { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.mk-draft { border: 1px solid var(--m-brand); border-radius: 12px; background: var(--m-brand-16); overflow: hidden; }
.mk-dhead { display: flex; padding: 10px 12px 0; font-size: 11px; }
.mk-src { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 4px; background: var(--m-pane); color: var(--m-brand); font-weight: 500; }
.mk-src .mk-srci { width: 14px; height: 14px; display: block; flex: none; }
.mk-dbody { padding: 8px 12px 0; font-size: 12px; line-height: 1.5; min-height: 3em; }
.mk-dbody p + p { margin-top: 8px; }
.mk-caret2 { display: inline-block; width: 1.5px; height: 1em; background: var(--m-brand); vertical-align: -.16em; animation: mk-blink 1.05s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-dacts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 12px; }
.mk-act { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--m-fg-2); }

.mk-comp { border: 1px solid var(--m-line-strong); border-radius: 12px; background: var(--m-pane); }
.mk-cph { min-height: 60px; padding: 12px 14px 4px; color: var(--m-fg-3); font-size: 13px; }
.mk-cfoot { display: flex; align-items: center; gap: 2px; padding: 4px 8px 8px; color: var(--m-fg-3); font-size: 14px; }
.mk-cfoot i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.mk-cfoot .mk-grow { flex: 1; }
.mk-cfoot .mk-who { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--m-fg-2); font-size: 12px; }
.mk-cfoot .mk-av { width: 18px; height: 18px; font-size: 8px; }
.mk-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--m-brand); color: var(--m-brand-ink); font-size: 14px; flex: none; }

.mk-pulse { animation: mk-pulse 1.6s var(--ease-out) 2; }
@keyframes mk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 190, 152, 0); }
  40% { box-shadow: 0 0 0 4px rgba(47, 190, 152, .35); }
}
.mk-fade { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mk.go .mk-fade { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 50ms); }

.mk-shead { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; }
.mk-shead b { font-size: 14px; font-weight: 600; color: var(--m-hi); }
.mk-add { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--m-brand); color: var(--m-brand-ink); font-size: 12px; font-weight: 500; }
.mk-slots { padding: 2px 16px 0; font-size: 11px; color: var(--m-fg-3); }
.mk-sitems { flex: 1; min-height: 0; overflow: hidden; padding: 12px 8px 0; }
.mk-sitem { padding: 8px; border-radius: 8px; }
.mk-sitem.on { background: var(--m-raised); }
.mk-sitop { display: flex; align-items: center; gap: 10px; }
.mk-sitop .mk-av { width: 28px; height: 28px; font-size: 10px; flex: none; }
.mk-sitop b { font-size: 13px; font-weight: 500; color: var(--m-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ok { margin-left: auto; color: var(--m-brand); font-size: 13px; flex: none; }
.mk-sicap { display: flex; align-items: baseline; margin: 6px 0 4px 38px; font-size: 11px; color: var(--m-fg-3); }
.mk-sicap span { margin-left: auto; color: var(--m-fg-2); font-variant-numeric: tabular-nums; }
.mk-line { height: 2px; border-radius: 1px; margin-left: 38px; background: var(--m-raised); overflow: hidden; }
.mk-sitem.on .mk-line { background: rgba(0, 0, 0, .2); }
.mk-line i { display: block; height: 100%; background: var(--m-brand); width: 0; transition: width 1.1s var(--ease-out); }
.mk-sfoot { padding: 10px 16px; border-top: 1px solid var(--m-line); font-size: 11px; color: var(--m-fg-3); }
.mk-sfoot b { color: var(--m-fg-2); font-weight: 600; }

.mk-sdet { padding: 16px; gap: 12px; overflow: hidden; }
.mk-cbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mk-sdhead { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-line); flex: none; }
.mk-big { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 600; letter-spacing: -.03em; background: linear-gradient(158deg, oklch(.40 .030 var(--hue, 90)) 0%, oklch(.31 .020 var(--hue, 90)) 100%); color: oklch(.84 .05 var(--hue, 90)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .045); }
.mk-sdname { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; color: var(--m-hi); letter-spacing: -.01em; }
.mk-li { width: 15px; height: 15px; border-radius: 3px; background: #0a66c2; }
.mk-sdsub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--m-fg-3); }
.mk-conn { padding: 1px 7px; border-radius: 999px; background: var(--m-brand-16); color: var(--m-brand); font-weight: 500; }
.mk-manage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--m-fg-2); box-shadow: inset 0 0 0 1px var(--m-line); }
.mk-tabs2 { display: flex; gap: 4px; font-size: 12px; color: var(--m-fg-3); flex: none; }
.mk-tabs2 span { padding: 4px 10px; border-radius: 8px; }
.mk-tabs2 span.on { background: var(--m-raised); color: var(--m-hi); }
.mk-card { flex: 1; min-height: 0; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-line); display: flex; flex-direction: column; }
.mk-card > b { font-size: 14px; font-weight: 600; color: var(--m-hi); }
.mk-csub { font-size: 11px; color: var(--m-brand); margin-top: 3px; }
.mk-seg { display: flex; gap: 4px; margin: 12px 0 10px; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .16); font-size: 11px; flex: none; }
.mk-seg span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 24px; border-radius: 6px; color: var(--m-fg-3); }
.mk-seg span.on { background: var(--m-raised); color: var(--m-hi); }
.mk-grouph { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; flex: none; }
.mk-gi { color: var(--m-brand); font-size: 15px; }
.mk-grouph b { font-size: 13px; font-weight: 500; color: var(--m-hi); }
.mk-grouph b span { display: block; font-size: 11px; color: var(--m-fg-3); font-weight: 400; margin-top: 2px; }
.mk-grouph .mk-cv { margin-left: auto; color: var(--m-fg-3); font-size: 15px; display: grid; place-items: center; transition: transform .2s var(--ease-out); }
.mk-grouph .mk-cv.up { transform: rotate(180deg); }
.mk-lims { position: relative; flex: 1; min-height: 84px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.mk-lims::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; background: linear-gradient(to top, var(--m-pane), rgba(39, 36, 33, 0)); pointer-events: none; }
.mk-lim { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 35px; padding: 0 12px; border-radius: 8px; background: var(--m-raised); flex: none; }
.mk-li2 { color: var(--m-fg-3); font-size: 15px; }
.mk-lim b { font-size: 13px; font-weight: 400; color: var(--m-hi); }
.mk-lim em { font-style: normal; font-size: 11px; color: var(--m-fg-3); margin-left: 8px; }
.mk-stp { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--m-line); font-size: 12px; }
.mk-stp u { color: var(--m-fg-3); text-decoration: none; }
.mk-stp b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; }

.mk-chatpane { padding: 14px 16px; gap: 10px; }
.mk-ph { display: flex; align-items: center; gap: 8px; flex: none; }
.mk-ph b { font-size: 14px; font-weight: 600; color: var(--m-hi); }
.mk-ph .mk-sub { color: var(--m-fg-3); font-size: 11px; }
.mk-pill { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; color: var(--m-brand); background: var(--m-brand-16); }
.mk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--m-brand); flex: none; }
.mk-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; }
.mk-ask { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--m-raised); font-size: 12px; line-height: 1.5; }
.mk-say { font-size: 12px; line-height: 1.55; color: var(--m-fg-2); }
.mk-tool { border-radius: 10px; padding: 10px 12px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px var(--m-line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; }
.mk-th { display: flex; align-items: center; gap: 7px; color: var(--m-brand); font-weight: 600; }
.mk-th .mk-ms { margin-left: auto; color: var(--m-fg-3); font-weight: 400; }
.mk-th .mk-cv2 { color: var(--m-fg-3); font-size: 13px; display: grid; place-items: center; transition: transform .2s var(--ease-out); }
.mk-tool.open .mk-cv2 { transform: rotate(180deg); }
.mk-args { margin-top: 6px; color: var(--m-fg-3); }
.mk-args b { color: var(--m-fg-2); font-weight: 400; }
.mk-args u { color: var(--m-brand); text-decoration: none; }
.mk-done { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--m-line); color: var(--m-fg-2); font-family: var(--font); font-size: 11px; line-height: 1.45; }
.mk-hooks { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--m-line); flex: none; }
.mk-hh { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--m-fg-3); margin-bottom: 7px; }
.mk-hook { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 11px; color: var(--m-fg-2); }
.mk-hook code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--m-brand); font-size: 10.5px; }
.mk-hook .mk-ago { margin-left: auto; color: var(--m-fg-3); font-size: 10px; }
.mk-step { opacity: 0; transform: translateY(7px); transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.mk-step.on { opacity: 1; transform: none; }

.mk-more { display: none; }
.mk-wide .mk-more { display: block; }
.mk-wide .mk-hook.mk-more { display: flex; }
.mk-narrow .mk-hide-sm { display: none; }
.mk-one:not(.mk-wide) .mk-comp { display: none; }
.mk-narrow .mk-seg { display: none; }
.mk-narrow .mk-lims { min-height: 42px; }
.mk-narrow .mk-card { padding: 12px 14px; }
.mk-narrow .mk-thead .mk-tools { display: none; }
.mk-narrow .mk-sdhead, .mk-narrow .mk-tabs2,
.mk-base .mk-sdhead, .mk-base .mk-tabs2 { display: none; }

.mk-i .mk-row, .mk-i .mk-act, .mk-i .mk-btn, .mk-i .mk-ghost, .mk-i .mk-sitem, .mk-i .mk-stp u, .mk-i .mk-seg span,
.mk-i .mk-grouph, .mk-i .mk-tool, .mk-i .mk-hook, .mk-i .mk-sw { cursor: pointer; }
.mk-i .mk-act:last-of-type { cursor: default; }
@media (hover: hover) {
  .mk-i .mk-row:not(.on):hover .mk-conv { --m-card: var(--m-hover); }
  .mk-i .mk-sitem:not(.on):hover { background: rgba(255, 255, 255, .035); }
  .mk-i .mk-act:not(.mk-btn):hover { background: var(--m-raised); color: var(--m-hi); }
  .mk-i .mk-act:hover, .mk-i .mk-stp u:hover, .mk-i .mk-seg span:not(.on):hover, .mk-i .mk-ghost:hover { color: var(--m-hi); }
  .mk-i .mk-btn:hover { background: #3ccba5; }
  .mk-i .mk-btn3:hover { background: #245346; }
  .mk-i .mk-tool:hover, .mk-i .mk-hook:hover code { filter: brightness(1.12); }
}
.mk-live .mk-pulse { animation: none; }
.mk-pop { animation: mk-pop .34s var(--ease-out) both; }
@keyframes mk-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.mk-draft.mk-gone { opacity: 0; transform: translateY(4px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.mk-ghost { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--m-fg-2); }
.mk-cacts { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; flex: none; }

.mk-quotas { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.mk-qlist { position: relative; flex: 1; min-height: 84px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.mk-qlist::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; background: linear-gradient(to top, var(--m-pane), rgba(39, 36, 33, 0)); pointer-events: none; }
.mk-q { display: flex; align-items: center; gap: 12px; height: 35px; padding: 0 12px; border-radius: 8px; background: var(--m-raised); flex: none; font-size: 13px; }
.mk-q > svg { font-size: 15px; color: var(--m-fg-3); flex: none; }
.mk-q > b { width: 96px; flex: none; font-weight: 400; color: var(--m-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-gauge { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mk-track { flex: 1; height: 3px; border-radius: 999px; background: #56524d; overflow: hidden; }
.mk-track i { display: block; height: 100%; border-radius: 999px; background: var(--m-brand); width: 0; transition: width 1.1s var(--ease-out); }
.mk-qc { flex: none; font-size: 11px; font-weight: 500; color: var(--m-fg-2); font-variant-numeric: tabular-nums; }
.mk-q.full { background: var(--m-brand-16); }
.mk-q.full > svg, .mk-q.full .mk-qc { color: var(--m-brand); }
.mk-q.full .mk-qc { font-weight: 600; }
.mk-qnote { padding: 0 2px; color: var(--m-brand); font-size: 11px; flex: none; }

.mk-hrs { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 14px; flex: none; font-size: 12px; color: var(--m-fg-2); }
.mk-hrs.tall { position: relative; flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; }
.mk-hrs.tall::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; background: linear-gradient(to top, var(--m-pane), rgba(39, 36, 33, 0)); pointer-events: none; }
.mk-tzrow { display: flex; align-items: center; gap: 12px; }
.mk-tz { width: 216px; height: 30px; padding: 0 10px; border-radius: 8px; background: #12161c; box-shadow: inset 0 0 0 1px #3b434e; display: flex; align-items: center; justify-content: space-between; color: var(--m-fg); }
.mk-tz svg { font-size: 13px; color: var(--m-fg-3); }
.mk-swrow { display: flex; align-items: center; justify-content: space-between; }
.mk-sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #44403b; box-shadow: inset 0 0 0 1px #514d48; flex: none; transition: background .18s var(--ease-out); }
.mk-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--m-hi); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease-out); }
.mk-sw.on { background: var(--m-brand); box-shadow: none; }
.mk-sw.on::after { transform: translateX(12px); }
.mk-hrow { display: flex; align-items: center; gap: 10px; }
.mk-hrow em, .mk-day2 em { font-style: normal; font-size: 11px; color: var(--m-fg-3); }
.mk-time { width: 62px; height: 28px; border-radius: 8px; background: var(--m-pane); box-shadow: inset 0 0 0 1px #514d48; display: grid; place-items: center; font-weight: 500; color: var(--m-hi); }
.mk-time.sm { width: 52px; height: 20px; }
.mk-days { display: flex; flex-direction: column; gap: 2px; }
.mk-day2 { display: flex; align-items: center; gap: 8px; height: 20px; }
.mk-day2 .mk-sw { transform: scale(.75); transform-origin: left center; margin-right: -6px; }
.mk-day2 > b { width: 30px; font-size: 12px; font-weight: 500; color: var(--m-hi); }

.mk-res { display: none; margin-top: 6px; color: var(--m-fg-3); }
.mk-res b { color: var(--m-fg-2); font-weight: 400; }
.mk-res u { color: var(--m-brand); text-decoration: none; }
.mk-tool.open .mk-res { display: block; animation: mk-pop .3s var(--ease-out) both; }
.mk-hook { flex-wrap: wrap; }
.mk-dlv { display: none; width: 100%; padding: 1px 0 3px 14px; font-size: 10.5px; color: var(--m-fg-3); }
.mk-dlv b { color: var(--m-brand); font-weight: 600; }
.mk-hook.open .mk-dlv { display: block; animation: mk-pop .3s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .mk-fade, .mk-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mk-caret2, .mk-pulse { animation: none !important; }
  .mk-line i, .mk-track i, .mk-sw, .mk-sw::after, .mk-cv, .mk-cv2 { transition: none !important; }
  .mk-pop, .mk-res, .mk-dlv { animation: none !important; }
}