:root {
  color-scheme: light;
  --page: #ffffff;
  --canvas: #fcfcfc;
  --sidebar: #f9f9f9;
  --surface: #f4f4f4;
  --surface-hover: #ececec;
  --surface-selected: #e7e7e7;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.13);
  --text: #0d0d0d;
  --muted: #6b6b6b;
  --muted-strong: #4f4f4f;
  --accent: #0d0d0d;
  --green: #10a37f;
  --orange: #c17422;
  --red: #d00e17;
  --thread-max: 48rem;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
  font-family: -apple-system-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--canvas); color: var(--text); }
body { position: fixed; inset: 0; font-size: 16px; line-height: 1.5; }
button, input, textarea, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
button { color: inherit; touch-action: manipulation; -webkit-appearance: none; appearance: none; user-select: none; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.about-document, .about-document body { width: 100%; height: auto; min-height: 100%; overflow: auto; overscroll-behavior: auto; }
.about-page { position: static; inset: auto; background: var(--page); }
.about-topbar { position: sticky; top: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(12px, env(safe-area-inset-top)) max(24px, calc((100vw - 1120px) / 2)) 12px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); z-index: 10; }
.about-logo { color: var(--text); font-size: 18px; font-weight: 680; letter-spacing: -.035em; text-decoration: none; }
.about-open-app { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 560; text-decoration: none; }
.about-open-app:hover { background: var(--surface); }
.about-main { width: min(100%, 1120px); margin: 0 auto; padding: 0 32px max(52px, env(safe-area-inset-bottom)); }
.about-hero { padding: clamp(76px, 11vw, 142px) 0 clamp(76px, 10vw, 124px); }
.about-eyebrow { margin-bottom: 24px; color: var(--muted); font-size: 12px; font-weight: 680; letter-spacing: .14em; }
.about-hero h1 { max-width: 920px; margin: 0; font-size: clamp(44px, 7.3vw, 88px); font-weight: 570; letter-spacing: -.065em; line-height: .98; }
.about-hero > p { max-width: 760px; margin: 34px 0 0; color: var(--muted-strong); font-size: clamp(17px, 2vw, 21px); line-height: 1.72; }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.about-primary-action, .about-secondary-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 580; text-decoration: none; }
.about-primary-action { background: var(--accent); color: var(--page); }
.about-secondary-action { border: 1px solid var(--border-strong); color: var(--text); }
.about-secondary-action:hover { background: var(--surface); }
.about-statement { margin-bottom: 110px; padding: clamp(32px, 6vw, 64px); border-radius: 30px; background: #0d0d0d; color: #fff; }
.about-statement-label { margin-bottom: 36px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 650; letter-spacing: .12em; }
.about-statement p { margin: 0; font-size: clamp(32px, 5vw, 60px); font-weight: 510; letter-spacing: -.045em; line-height: 1.16; }
.about-section { padding: 84px 0; border-top: 1px solid var(--border); scroll-margin-top: 72px; }
.about-section-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 36px; }
.about-section-index { color: var(--muted); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-section h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 560; letter-spacing: -.04em; line-height: 1.12; }
.about-grid { display: grid; gap: 12px; }
.about-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-card { min-height: 210px; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--canvas); }
.about-card h3 { margin: 0 0 44px; font-size: 18px; font-weight: 620; letter-spacing: -.025em; }
.about-card p { margin: 0; color: var(--muted-strong); font-size: 15px; line-height: 1.7; }
.about-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.about-flow-node { min-height: 144px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--canvas); }
.about-flow-node.is-relay { border-color: #0d0d0d; background: #0d0d0d; color: #fff; }
.about-flow-node strong { font-size: 17px; font-weight: 620; }
.about-flow-node span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.about-flow-node.is-relay span { color: rgba(255,255,255,.58); }
.about-flow-arrow { color: var(--muted); font-size: 22px; }
.about-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(52px, 8vw, 110px); }
.about-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.about-list li { padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; }
.about-list.is-muted { color: var(--muted-strong); }
.about-local-first > p { max-width: 780px; margin: 0; color: var(--muted-strong); font-size: 18px; line-height: 1.75; }
.about-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 76px 0 28px; border-top: 1px solid var(--border); }
.about-footer > div { display: grid; gap: 8px; }
.about-footer strong { font-size: 20px; font-weight: 670; letter-spacing: -.035em; }
.about-footer span { color: var(--muted); font-size: 13px; }
.about-footer a { color: var(--text); font-size: 14px; font-weight: 560; text-decoration: none; }
.boot-screen { min-height: 100dvh; display: grid; place-items: center; background: var(--canvas); }
.boot-content { width: min(360px, calc(100vw - 48px)); display: grid; justify-items: center; gap: 9px; }
.boot-wordmark { color: var(--text); font-size: 24px; font-weight: 650; letter-spacing: -0.035em; }
.boot-activity { display: inline-flex; align-items: center; gap: 4px; height: 12px; margin: 6px 0 1px; }
.boot-activity span { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: boot-activity-dot 1.2s ease-in-out infinite; }
.boot-activity span:nth-child(2) { animation-delay: .16s; }
.boot-activity span:nth-child(3) { animation-delay: .32s; }
@keyframes boot-activity-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: .92; transform: translateY(-3px); } }
.boot-status { color: var(--text); font-size: 14px; font-weight: 570; line-height: 1.5; text-align: center; }
.boot-detail { min-height: 40px; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: center; text-wrap: balance; }
.auth-screen { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: var(--canvas); }
.auth-card { width: min(100%, 390px); padding: 34px 30px 30px; border: 1px solid var(--border); border-radius: 24px; background: var(--page); box-shadow: var(--shadow); }
.auth-wordmark { display: inline-block; margin-bottom: 28px; color: var(--text); font-size: 22px; font-weight: 680; letter-spacing: -0.04em; text-decoration: none; }
.auth-card h1 { margin: 0 0 9px; font-size: 24px; font-weight: 650; letter-spacing: -0.035em; }
.auth-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-form { display: grid; gap: 14px; margin-top: 25px; }
.auth-field { display: grid; gap: 8px; color: var(--muted-strong); font-size: 13px; font-weight: 560; }
.auth-field input { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 13px; outline: 0; background: var(--page); color: var(--text); font-size: 16px; transition: border-color .16s ease, box-shadow .16s ease; }
.auth-field input:focus { border-color: rgba(13,13,13,.42); box-shadow: 0 0 0 3px rgba(13,13,13,.07); }
.auth-submit { min-height: 48px; border: 0; border-radius: 13px; background: var(--accent); color: var(--page); font-size: 15px; font-weight: 620; cursor: pointer; }
.auth-submit:disabled { opacity: .46; cursor: default; }
.auth-error { min-height: 20px; color: var(--red); font-size: 13px; line-height: 1.5; }
.auth-security-warning { margin-top: 4px !important; padding: 10px 12px; border: 1px solid rgba(193,116,34,.32); border-radius: 11px; background: rgba(193,116,34,.08); color: #8a4b12 !important; font-size: 12px !important; line-height: 1.5 !important; }
.auth-hint { margin-top: 18px !important; font-size: 12px !important; text-align: center; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); width: 100%; height: 100dvh; }
.sidebar {
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  background: var(--sidebar);
  z-index: 20;
}
.sidebar-head { min-height: 44px; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 2px 4px; }
.sidebar-head .workspace-area { min-width: 0; flex: 1; }
.sidebar-head .workspace-switcher { max-width: 100%; }
.sidebar-head .workspace-adapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--surface-hover); }
.icon-button:active { background: #dfdfdf; }
.sidebar-close { display: none; margin-left: auto; }
.sidebar-primary-nav { flex: 0 0 auto; margin: 0 2px 8px; }
.sidebar-primary-button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 520;
  text-align: left;
  cursor: pointer;
  transition: background .16s cubic-bezier(.2,.8,.2,1), color .16s cubic-bezier(.2,.8,.2,1);
}
.sidebar-primary-button:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-primary-button:active { transform: translateY(1px); }
.sidebar-primary-button:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 2px; }
.sidebar-primary-button.is-active { background: var(--surface-selected); color: var(--text); }
.sidebar-primary-button svg { width: 18px; height: 18px; stroke-width: 1.7; }
.sidebar-primary-count { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--page); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.task-view-switch {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0 2px 6px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .04);
}
.task-view-button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 520;
  cursor: pointer;
}
.task-view-button.is-active { background: var(--page); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.search-box {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-strong);
}
.search-box:hover, .search-box:focus-within { background: var(--surface-hover); }
.search-box svg { width: 17px; height: 17px; flex: 0 0 auto; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.search-box input::placeholder { color: var(--muted-strong); }
.task-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.task-group { margin: 0; }
.task-group-head {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}
.task-group.is-recent .task-group-head { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
.task-group-title {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 6px 4px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.task-group-title:hover { color: var(--muted-strong); background: var(--surface-hover); }
.task-group-title.is-static { cursor: default; }
.task-group-title.is-static:hover { color: var(--muted); background: transparent; }
.task-group-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-group-chevron { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .15s ease; }
.task-group.is-collapsed .task-group-chevron { transform: rotate(-90deg); }
.task-group-title.is-static .task-group-chevron { display: none; }
.task-group:first-child .task-group-head { min-height: 32px; }
.task-group:first-child .task-group-title { padding-top: 4px; }
.task-group-create {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.task-group-create:hover { color: var(--text); background: var(--surface-hover); }
.task-group-create:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 1px; }
.task-group-create:disabled { opacity: .38; cursor: wait; }
.task-group-create svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.task-group-create-spinner { display: none; stroke-dasharray: 26; stroke-dashoffset: 9; }
.task-group-create.is-loading .task-group-create-plus { display: none; }
.task-group-create.is-loading .task-group-create-spinner { display: block; animation: switch-spin .8s linear infinite; transform-origin: center; }
.task-group:not(.is-recent) .task-group-items .task-item,
.task-group:not(.is-recent) .task-group-more { padding-left: 28px; }
.task-group-more, .task-list-more {
  width: 100%;
  min-height: 31px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.task-group-more:hover, .task-list-more:hover { color: var(--muted-strong); background: var(--surface-hover); }
.task-list-more { margin: 3px 0 10px; }
.task-item {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 1px 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.task-item:hover { background: var(--surface-hover); }
.task-item.is-active { background: var(--surface-selected); }
.task-copy { min-width: 0; grid-column: 1; grid-row: 1; }
.task-indicator { min-width: 10px; grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-end; }
.task-dot { width: 6px; height: 6px; flex: 0 0 auto; visibility: hidden; border-radius: 50%; background: transparent; }
.task-dot.running { visibility: visible; background: var(--green); animation: task-dot-breathe 1.6s ease-in-out infinite; }
.task-dot.input { visibility: visible; background: var(--orange); }
.task-dot.error { visibility: visible; background: var(--red); }
.task-status-badge { display: none; min-height: 20px; padding: 1px 6px; align-items: center; border: 1px solid rgba(193,116,34,.24); border-radius: 6px; background: rgba(193,116,34,.10); color: var(--orange); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.task-status-badge.approval { display: inline-flex; }
@keyframes task-dot-breathe {
  0%, 100% { opacity: .55; transform: scale(.86); box-shadow: 0 0 0 0 rgba(16, 163, 127, 0); }
  50% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 4px rgba(16, 163, 127, .14); }
}
@media (prefers-reduced-motion: reduce) {
  .task-dot.running { animation: none; opacity: 1; transform: none; box-shadow: none; }
}
.task-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 430; line-height: 1.5; }
.sidebar-overlay { display: none; }

.main-panel { position: relative; min-width: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: var(--page); }
.topbar {
  min-height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  z-index: 10;
}
.menu-button { display: none; }
.topbar-copy { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.workspace-area { position: relative; flex: 0 0 auto; }
.workspace-switcher { min-height: 32px; max-width: min(420px, calc(100vw - 96px)); display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-strong); font: inherit; white-space: nowrap; cursor: pointer; }
.workspace-switcher:hover { background: var(--surface-hover); color: var(--text); }
.workspace-product { flex: 0 0 auto; color: var(--text); font-size: 16px; font-weight: 620; letter-spacing: -0.015em; white-space: nowrap; }
.workspace-divider { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.workspace-adapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 540; }
.workspace-switch-progress { width: 12px; height: 12px; flex: 0 0 auto; margin-left: 2px; border: 1.5px solid var(--border-strong); border-top-color: var(--green); border-radius: 50%; animation: switch-spin .8s linear infinite; }
.workspace-switcher svg { width: 13px; height: 13px; margin-left: 1px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.workspace-switcher[aria-expanded="true"] svg { transform: rotate(180deg); }
.workspace-switcher.is-switching > svg { display: none; }
@keyframes switch-spin { to { transform: rotate(360deg); } }
.workspace-menu { position: absolute; top: calc(100% + 7px); left: 0; width: min(300px, calc(100vw - 24px)); min-width: min(300px, calc(100vw - 24px)); padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--page); box-shadow: var(--shadow); z-index: 24; }
.adapter-menu { display: block; }
.adapter-menu-item { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.adapter-menu-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adapter-menu-item:hover { background: var(--surface-hover); }
.adapter-menu-item.is-active { font-weight: 620; }
.adapter-menu-state { flex: 0 0 auto; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 430; }
.workspace-menu-divider { height: 1px; margin: 4px 6px; background: var(--border); }
.workspace-menu-item { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.workspace-menu-item:hover { background: var(--surface-hover); }
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 420; }
.topbar-meta { display: none; }
.topbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.cache-sync-indicator { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 11px; white-space: nowrap; }
.cache-sync-indicator[hidden] { display: none; }
.cache-sync-icon { width: 10px; height: 10px; flex: 0 0 auto; border: 1.4px solid var(--border-strong); border-top-color: var(--green); border-radius: 50%; animation: switch-spin .8s linear infinite; }
.cache-sync-indicator.is-current .cache-sync-icon { border: 0; animation: none; }
.cache-sync-indicator.is-current .cache-sync-icon::before { content: ""; display: block; width: 8px; height: 4px; margin: 1px 0 0 1px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.cache-sync-indicator.is-updating { color: var(--muted-strong); }
.status-label { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.new-task-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.new-task-button:hover { background: var(--surface-hover); }
.task-board {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}
.task-board[hidden] { display: none; }
.app-shell.board-open .topbar,
.app-shell.board-open .messages,
.app-shell.board-open .message-navigation,
.app-shell.board-open .composer-wrap { display: none; }
.task-board-header {
  flex: 0 0 auto;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--page);
}
.task-board-heading-row { display: flex; align-items: center; gap: 12px; }
.task-board-menu-button { display: none; }
.task-board-heading { min-width: 0; flex: 1; }
.task-board-heading h1 { margin: 0; color: var(--text); font-size: 24px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.2; }
.task-board-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.task-board-refresh {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page);
  color: var(--muted-strong);
  cursor: pointer;
  transition: background .16s cubic-bezier(.2,.8,.2,1), color .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1);
}
.task-board-refresh:hover { background: var(--surface); color: var(--text); }
.task-board-refresh:active { transform: scale(.97); }
.task-board-refresh:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 2px; }
.task-board-refresh:disabled { opacity: .48; cursor: default; }
.task-board-refresh.is-loading svg { animation: board-refresh-spin .8s linear infinite; }
.task-board-refresh svg { width: 18px; height: 18px; stroke-width: 1.8; }
@keyframes board-refresh-spin { to { transform: rotate(360deg); } }
.task-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.task-board-view-switch { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface); }
.task-board-view-button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 560; cursor: pointer; }
.task-board-view-button:hover { color: var(--text); }
.task-board-view-button.is-active { background: var(--page); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.task-board-view-button:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 1px; }
.task-board-search { width: min(320px, 42vw); min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); color: var(--muted); }
.task-board-search:focus-within { border-color: rgba(13,13,13,.28); box-shadow: 0 0 0 3px rgba(13,13,13,.05); }
.task-board-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.task-board-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.task-board-search input::placeholder { color: var(--muted); }
.task-board-body { min-width: 0; min-height: 0; flex: 1; overflow: auto; padding: 20px 24px 28px; overscroll-behavior: contain; scrollbar-width: thin; }
.task-board-columns { min-width: 900px; display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); align-items: start; gap: 16px; }
.task-board-column { min-width: 0; }
.task-board-column-head { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; color: var(--muted-strong); }
.task-board-column-mark { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.task-board-column[data-lane="running"] .task-board-column-mark { background: var(--green); }
.task-board-column[data-lane="waiting"] .task-board-column-mark { background: var(--orange); }
.task-board-column[data-lane="error"] .task-board-column-mark { background: var(--red); }
.task-board-column[data-lane="queued"] .task-board-column-mark { background: #7c8798; }
.task-board-column-title { font-size: 13px; font-weight: 620; }
.task-board-column-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-board-card-list { display: grid; gap: 10px; }
.task-board-card {
  position: relative;
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--page);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1);
}
.task-board-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.task-board-card:active { transform: translateY(0) scale(.99); }
.task-board-card:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 2px; }
.task-board-card.is-opening { opacity: .58; cursor: wait; }
.task-board-card-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--text); font-size: 14px; font-weight: 560; line-height: 1.48; overflow-wrap: anywhere; }
.task-board-card-meta { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; min-width: 0; color: var(--muted); font-size: 11px; }
.task-board-card-status { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.task-board-card-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.task-board-card[data-lane="running"] .task-board-card-status { color: var(--green); }
.task-board-card[data-lane="waiting"] .task-board-card-status { color: var(--orange); }
.task-board-card[data-lane="error"] .task-board-card-status { color: var(--red); }
.task-board-card-context { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--muted-strong); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.task-board-card-time { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-board-column-empty { min-height: 104px; display: grid; place-items: center; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--muted); font-size: 12px; text-align: center; }
.task-board-completed { width: min(920px, 100%); margin: 0 auto; display: grid; gap: 0; border-top: 1px solid var(--border); }
.task-board-completed-item { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.task-board-completed-item:hover .task-board-completed-title { text-decoration: underline; text-underline-offset: 3px; }
.task-board-completed-item.is-opening { opacity: .58; cursor: wait; }
.task-board-completed-item:focus-visible { outline: 2px solid rgba(16,163,127,.42); outline-offset: 2px; border-radius: 8px; }
.task-board-completed-copy { min-width: 0; display: block; }
.task-board-completed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 540; }
.task-board-completed-meta { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.task-board-completed-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-board-empty { min-height: 54vh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.task-board-empty-copy { max-width: 360px; }
.task-board-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); }
.task-board-empty-icon svg { width: 22px; height: 22px; }
.task-board-empty h2 { margin: 0; color: var(--text); font-size: 17px; font-weight: 620; letter-spacing: -0.02em; }
.task-board-empty p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.task-board-skeleton { min-width: 900px; display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 16px; }
.task-board-skeleton-column { display: grid; gap: 10px; }
.task-board-skeleton-line, .task-board-skeleton-card { border-radius: 10px; background: var(--surface); animation: board-skeleton-pulse 1.4s ease-in-out infinite; }
.task-board-skeleton-line { width: 92px; height: 18px; }
.task-board-skeleton-card { height: 116px; }
@keyframes board-skeleton-pulse { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .task-board-refresh.is-loading svg, .task-board-skeleton-line, .task-board-skeleton-card { animation: none; }
  .task-board-card, .sidebar-primary-button { transition: none; }
}
.new-task-button:disabled { opacity: .36; cursor: default; }
.new-task-button svg { width: 18px; height: 18px; }
.status-label::before { content: ""; width: 7px; height: 7px; visibility: hidden; border-radius: 50%; background: transparent; }
.status-label.running::before { visibility: visible; background: var(--green); }
.status-label.starting::before { visibility: visible; border: 1.5px solid var(--border-strong); border-top-color: var(--green); background: transparent; animation: switch-spin .8s linear infinite; }
.status-label.approval::before, .status-label.input::before { visibility: visible; background: var(--orange); }
.status-label.error::before { visibility: visible; background: var(--red); }

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 38px 24px 112px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.message-row { width: min(100%, var(--thread-max)); display: flex; margin: 0 auto 20px; }
.message-row.user { justify-content: flex-end; }
.message-card { min-width: 0; max-width: 100%; color: var(--text); font-size: 16px; line-height: 1.52; overflow-wrap: anywhere; }
.message-row.user .message-card { max-width: min(78%, 38rem); padding: 10px 16px; border-radius: 20px; background: var(--surface); }
.message-row.assistant { margin-bottom: 16px; }
.message-row.assistant.continues { margin-bottom: 10px; }
.message-row.assistant .message-card { width: 100%; color: var(--text); font-size: 15px; line-height: 1.62; }
.message-row.assistant.commentary .message-card { padding-left: 0; border-left: 0; color: var(--text); }
.message-model { margin-top: 10px; color: var(--muted); font-size: 11px; font-weight: 430; line-height: 1.4; }
.run-header { width: min(100%, var(--thread-max)); display: flex; align-items: center; gap: 9px; margin: -4px auto 13px; color: var(--muted-strong); font-size: 13px; font-weight: 560; }
.run-header-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.run-header.running .run-header-dot { animation: run-pulse 1.4s ease-in-out infinite; }
.run-header.approval .run-header-dot { background: var(--orange); }
.run-header.failed .run-header-dot, .run-header.interrupted .run-header-dot { background: var(--red); }
.run-failure { width: min(100%, var(--thread-max)); margin: -2px auto 18px; padding: 12px 14px; border: 1px solid rgba(196, 55, 55, .18); border-radius: 12px; background: rgba(196, 55, 55, .055); color: var(--text); font-size: 13px; line-height: 1.6; }
.run-failure-title { margin-bottom: 3px; color: var(--red); font-weight: 620; }
.run-failure-detail { color: var(--muted-strong); white-space: pre-wrap; }
@keyframes run-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.run-progress { width: min(100%, var(--thread-max)); display: grid; gap: 9px; margin: 0 auto 24px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
.run-progress-item { min-width: 0; display: flex; align-items: flex-start; gap: 9px; font-size: inherit; font-weight: inherit; }
.run-progress-dot { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 7px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .62; }
.run-progress-item.running { color: var(--muted-strong); }
.run-progress-item.running .run-progress-dot { border-color: var(--green); animation: run-pulse 1.4s ease-in-out infinite; }
.run-progress-item.failed { color: var(--red); }
.run-progress-text { min-width: 0; overflow-wrap: anywhere; }
.run-progress-history { margin: 1px 0 2px 16px; color: var(--muted); }
.run-progress-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding: 0 2px; cursor: pointer; list-style: none; font-size: 12px; }
.run-progress-history > summary::-webkit-details-marker { display: none; }
.run-progress-history-items { display: grid; gap: 7px; padding: 5px 0 5px; }
.run-progress-fold-open { display: none; }
.run-progress-history[open] .run-progress-fold-closed { display: none; }
.run-progress-history[open] .run-progress-fold-open { display: inline; }
.run-progress-fold-action { color: var(--muted); font-size: 11px; }
.approval-card { width: min(100%, var(--thread-max)); margin: 0 auto 20px; padding: 16px; border: 1px solid rgba(217,119,6,.24); border-radius: 16px; background: rgba(245,158,11,.07); }
.approval-card-kicker { color: var(--orange); font-size: 12px; font-weight: 650; }
.approval-card-title { margin-top: 7px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.45; }
.approval-card-detail { margin-top: 11px; }
.approval-card-detail-label { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.approval-card-detail pre { margin: 0; padding: 11px 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--page); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.approval-card-hint { margin-top: 10px; color: var(--muted-strong); font-size: 12px; line-height: 1.5; }
.approval-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.approval-action { min-height: 34px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--page); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.approval-action.primary { border-color: var(--accent); background: var(--accent); color: var(--page); }
.approval-action.danger { color: var(--red); }
.approval-action:disabled { opacity: .5; cursor: default; }
.approval-result { width: min(100%, var(--thread-max)); margin: 0 auto 18px; padding: 12px 14px; border: 1px solid rgba(22,163,74,.18); border-radius: 14px; background: rgba(22,163,74,.055); color: var(--muted-strong); }
.approval-result.denied { border-color: rgba(208,14,23,.16); background: rgba(208,14,23,.045); }
.approval-result-heading { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.4; }
.approval-result-icon { display: inline-grid; width: 19px; height: 19px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(22,163,74,.12); color: var(--green); font-size: 12px; }
.approval-result.denied .approval-result-icon { background: rgba(208,14,23,.1); color: var(--red); }
.approval-result-summary { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.approval-result-detail { margin-top: 8px; }
.approval-result-detail-label { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.approval-result-detail pre { margin: 0; padding: 8px 10px; overflow-x: auto; border-radius: 9px; background: rgba(127,127,127,.055); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted-strong); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-row.user.pending .message-card { opacity: .76; }
.message-row.user.failed .message-card { border: 1px solid rgba(208,14,23,.22); }
.message-delivery { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.message-delivery.failed { color: var(--red); }
.message-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 9px; }
.message-images.single { grid-template-columns: minmax(0, 1fr); }
.message-image-button { position: relative; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--surface); cursor: zoom-in; }
.message-image-button img { width: 100%; max-height: 420px; display: block; object-fit: contain; background: var(--surface); }
.message-image-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.message-image-button.failed { min-height: 96px; cursor: default; }
.message-image-button.failed img { display: none; }
.message-image-error { display: none; padding: 24px 12px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.message-image-button.failed .message-image-error { display: block; }
.image-viewer { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: rgba(0, 0, 0, .92); }
.image-viewer[hidden] { display: none; }
.image-viewer-toolbar { display: flex; justify-content: flex-end; padding-bottom: 10px; }
.image-viewer-close { min-width: 56px; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; cursor: pointer; }
.image-viewer-stage { min-height: 0; display: grid; place-items: center; overflow: auto; }
.image-viewer-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
body.image-viewer-open { overflow: hidden; }
.message-retry { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.message-content { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.response-pending { width: min(100%, var(--thread-max)); display: flex; align-items: center; gap: 4px; margin: -8px auto 20px; padding-left: 2px; color: var(--muted); }
.response-pending-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .28; animation: response-pending-dot 1.15s ease-in-out infinite; }
.response-pending-dot:nth-child(2) { animation-delay: .16s; }
.response-pending-dot:nth-child(3) { animation-delay: .32s; }
@keyframes response-pending-dot { 0%, 60%, 100% { opacity: .24; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .response-pending-dot { animation: none; opacity: .5; } }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 10px; }
.message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content h5, .message-content h6 { margin: 12px 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.message-content ul, .message-content ol { margin: 6px 0 12px; padding-left: 22px; }
.message-content li { margin: 4px 0; }
.message-content strong { font-weight: 620; }
.message-content blockquote { margin: 12px 0; padding: 1px 0 1px 14px; border-left: 2px solid #d1d1d1; color: var(--muted-strong); }
.message-content pre { overflow-x: auto; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #f7f7f7; font: 13px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-content code { padding: 2px 5px; border-radius: 5px; background: #f2f2f2; font: .88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-content pre code { padding: 0; background: transparent; font-size: inherit; }
.message-code-fold { overflow: hidden; margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; background: #f7f7f7; }
.message-code-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 13px; cursor: pointer; list-style: none; color: var(--muted-strong); font-size: 12px; line-height: 1.4; }
.message-code-fold > summary::-webkit-details-marker { display: none; }
.message-code-fold > pre { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.message-code-fold-open { display: none; }
.message-code-fold[open] .message-code-fold-closed { display: none; }
.message-code-fold[open] .message-code-fold-open { display: inline; }
.message-code-fold-action { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.message-content a { color: #0b57d0; text-decoration: underline; text-decoration-color: rgba(11, 87, 208, 0.32); text-underline-offset: 2px; }
.message-content hr { height: 1px; margin: 22px 0; border: 0; background: var(--border); }
.message-content img { max-width: 100%; height: auto; border-radius: 12px; }
.loading-row { padding: 30px 16px; color: var(--muted); text-align: center; font-size: 13px; }
.empty-state { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.empty-wordmark { color: var(--text); font-size: 30px; font-weight: 560; letter-spacing: -0.035em; line-height: 1; }
.empty-state h1 { margin: 18px 0 6px; color: var(--text); font-size: 20px; font-weight: 580; letter-spacing: -0.02em; }
.empty-state p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.55; }

.composer-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 24px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.94) 32%, #fff 62%);
  z-index: 12;
}
.composer { width: min(100%, var(--thread-max)); margin-left: auto; margin-right: auto; }
.composer-queue { width: calc(100% - 40px); max-width: calc(var(--thread-max) - 40px); display: grid; gap: 0; max-height: 190px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 auto; border: 1px solid var(--border); border-radius: 16px; background: var(--page); }
.composer-queue[hidden], .composer-media[hidden] { display: none; }
.composer-media { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 2px 2px 4px; }
.composer-media-item { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.composer-media-preview { width: 100%; height: 100%; display: block; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; }
.composer-media-preview:focus { outline: 0; }
.composer-media-preview:focus-visible { box-shadow: 0 0 0 2px rgba(16,163,127,.28); }
.composer-media-item img { width: 100%; height: 100%; display: block; object-fit: cover; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.composer-media-remove { position: absolute; z-index: 1; top: -6px; right: -6px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 2px solid var(--page); border-radius: 50%; background: var(--accent); color: var(--page); cursor: pointer; }
.composer-media-remove svg { width: 11px; height: 11px; stroke-width: 2.2; }
.composer-model-control { position: relative; min-width: 0; align-self: end; }
.composer-model-control[hidden] { display: none; }
.composer-model-button { max-width: 100%; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted-strong); font: inherit; font-size: 12px; cursor: pointer; }
.composer-model-button:hover { background: var(--surface); color: var(--text); }
.composer-model-button:focus { outline: 0; }
.composer-model-button:focus-visible { box-shadow: inset 0 0 0 2px rgba(16,163,127,.24); }
.composer-model-button[aria-disabled="true"] { cursor: default; }
.composer-model-button.is-loading { opacity: .58; cursor: wait; }
.composer-model-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-model-chevron { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.composer-model-button.is-readonly .composer-model-chevron { display: none; }
.composer-model-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 96px)); max-height: min(360px, 52vh); overflow: auto; padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--page); box-shadow: var(--shadow); z-index: 30; }
.composer-model-menu[hidden] { display: none; }
.composer-model-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.composer-model-option:hover { background: var(--surface); }
.composer-model-option:disabled { opacity: .48; cursor: wait; }
.composer-model-option-copy { min-width: 0; }
.composer-model-option-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 560; }
.composer-model-option-description { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 430; }
.composer-model-option-check { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.queued-followup { min-width: 0; background: var(--page); }
.queued-followup + .queued-followup { border-top: 1px solid var(--border); }
.queued-followup-main { display: flex; align-items: center; gap: 9px; padding: 4px 4px 0px 8px; }
.queued-followup-icon { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
.queued-followup-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.queued-followup-copy { flex: 1; min-width: 0; }
.queued-followup-text { max-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); font-size: 14px; line-height: 1.45; }
.queued-followup-status, .queued-followup-images { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 430; line-height: 1.35; }
.queued-followup-status.is-pending { color: var(--muted-strong); }
.queued-followup-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.queued-followup-action { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: var(--muted-strong); font: inherit; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.queued-followup-action:hover { background: var(--surface); color: var(--text); }
.queued-followup-action:focus { outline: 0; }
.queued-followup-action:focus-visible { box-shadow: inset 0 0 0 2px rgba(16,163,127,.24); }
.queued-followup-action:disabled { opacity: .42; cursor: default; }
.queued-followup-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.composer {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: flex-end;
  gap: 4px;
  min-height: 52px;
  padding: 8px;
  border: 0;
  border-radius: 28px;
  background: var(--page);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04), 0 4px 80px 8px rgba(0,0,0,.024);
  transition: box-shadow .16s ease;
}
.composer:focus-within { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.055), 0 8px 80px 10px rgba(0,0,0,.03); }
.composer-image-button, .send-button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.composer-image-button { grid-column: 1; background: transparent; color: var(--text); }
.composer-model-control { grid-column: 2; }
.composer-image-button:hover { background: var(--surface); }
.composer-image-button svg { width: 19px; height: 19px; stroke-width: 1.7; }
.composer textarea { grid-column: 1 / -1; min-width: 0; min-height: 36px; max-height: 164px; resize: none; border: 0; outline: 0; padding: 6px 8px; background: transparent; color: var(--text); font-size: 16px; line-height: 24px; }
.composer textarea::placeholder { color: #8f8f8f; }
.send-button { grid-column: 3; background: var(--accent); color: white; }
.send-button svg { width: 18px; height: 18px; stroke-width: 2; }
.send-button .send-stop-icon { width: 20px; height: 20px; display: none; fill: currentColor; stroke: none; }
.send-button.is-stop .send-arrow-icon { display: none; }
.send-button.is-stop .send-stop-icon { display: block; }
.send-button:disabled { background: #d7d7d7; color: #fff; cursor: default; }
.send-button.is-stop:disabled { background: var(--accent); opacity: .58; }
.message-navigation { position: absolute; left: auto; top: 68px; right: max(24px, calc((100% - var(--thread-max)) / 2)); bottom: auto; display: flex; align-items: center; gap: 7px; z-index: 14; opacity: .62; transition: opacity .16s ease; }
.message-navigation:hover, .message-navigation:focus-within { opacity: 1; }
.message-navigation-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,.10); color: var(--muted-strong); cursor: pointer; }
.message-navigation-button:hover { color: var(--text); background: rgba(255,255,255,.94); }
.message-navigation-button svg { width: 19px; height: 19px; stroke-width: 2; }
.task-context-menu {
  position: fixed;
  min-width: 178px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page);
  box-shadow: var(--shadow);
  z-index: 60;
}
.task-context-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.task-context-menu button:hover { background: var(--surface-hover); }
.task-context-menu button:focus { outline: 0; }
.task-context-menu button:focus-visible { box-shadow: inset 0 0 0 2px rgba(16,163,127,.24); }
.task-context-menu svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.task-rename-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.28);
  z-index: 70;
}
.task-rename-dialog {
  width: min(100%, 420px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--page);
  box-shadow: var(--shadow);
}
.task-rename-title { margin-bottom: 16px; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.task-rename-input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  outline: 0;
  background: var(--page);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}
.task-rename-input:focus { border-color: rgba(13,13,13,.42); box-shadow: 0 0 0 3px rgba(13,13,13,.07); }
.task-rename-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.task-rename-actions button { min-width: 72px; min-height: 40px; padding: 0 15px; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 580; cursor: pointer; }
.task-rename-cancel { background: var(--surface); color: var(--text); }
.task-rename-save { background: var(--accent); color: var(--page); }
.settings-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(0,0,0,.22);
  z-index: 70;
}
.settings-drawer {
  width: min(460px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-left: 1px solid var(--border);
  background: var(--page);
  box-shadow: -18px 0 48px rgba(0,0,0,.16);
  overflow: hidden;
  animation: settings-drawer-in .2s ease-out;
}
@keyframes settings-drawer-in { from { transform: translateX(22px); opacity: .72; } to { transform: translateX(0); opacity: 1; } }
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: max(18px, env(safe-area-inset-top)) 22px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-title { font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.settings-subtitle { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.settings-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.settings-close:hover { background: var(--surface-hover); color: var(--text); }
.settings-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px max(28px, env(safe-area-inset-bottom)); }
.settings-loading { padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; }
.settings-section { margin-top: 28px; }
.settings-section:first-child { margin-top: 0; }
.settings-section-title { font-size: 15px; font-weight: 630; color: var(--text); margin-bottom: 8px; }
.settings-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 6px 0 10px; }
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.settings-toggle-row:last-child { border-bottom: 0; }
.settings-toggle-label { font-size: 14px; }
.settings-toggle-label small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 430; line-height: 1.45; }
.settings-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .18s ease;
  appearance: none;
  -webkit-appearance: none;
}
.settings-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.settings-toggle.is-on { background: var(--accent); }
.settings-toggle.is-on::after { transform: translateX(18px); }
.settings-rule-list { list-style: none; margin: 0; padding: 0; }
.settings-rule-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.settings-rule-item:last-child { border-bottom: 0; }
.settings-rule-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; transform: translateY(-1px); }
.settings-rule-label { font-size: 14px; font-weight: 580; }
.settings-rule-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 430; line-height: 1.45; }
.settings-provider { padding: 17px 0; border-bottom: 1px solid var(--border); }
.settings-provider:last-child { border-bottom: 0; }
.settings-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-provider-name { font-size: 15px; font-weight: 620; }
.settings-provider-status { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.settings-provider-status::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--border-strong); }
.settings-provider-status.is-ready::before { background: var(--green); }
.settings-provider-status.is-installing::before { background: #d6a44b; animation: task-pulse 1.35s ease-in-out infinite; }
.settings-provider-source { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.settings-provider-capabilities { margin-top: 7px; color: var(--muted-strong); font-size: 12px; line-height: 1.5; }
.settings-provider-deps { margin-top: 12px; border-top: 1px solid var(--border); }
.settings-dep-line { padding: 11px 0; border-bottom: 1px solid var(--border); }
.settings-dep-line:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-dep-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settings-dep-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
.settings-dep-line.is-ready .settings-dep-dot { background: var(--green); }
.settings-dep-line.is-installing .settings-dep-dot { background: #d6a44b; animation: task-pulse 1.35s ease-in-out infinite; }
.settings-dep-line.is-missing .settings-dep-dot,
.settings-dep-line.is-failed .settings-dep-dot { background: #c9675a; }
.settings-dep-label { flex: 1; min-width: 0; color: var(--text); font-size: 13px; font-weight: 550; }
.settings-dep-status { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.settings-dep-detail { margin: 6px 0 0 15px; max-height: 2.9em; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-dep-line.is-expanded .settings-dep-detail { max-height: none; }
.settings-dep-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.settings-dep-action { min-height: 32px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--page); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.settings-dep-action:hover { background: var(--surface-hover); }
.settings-dep-action.is-primary { border-color: var(--accent); background: var(--accent); color: var(--page); }
.settings-dep-action:disabled { opacity: .48; cursor: default; }
body.settings-open { overflow: hidden; }

.task-rename-actions button:disabled { opacity: .46; cursor: default; }
body.task-rename-open { overflow: hidden; }
.toast { position: fixed; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100vw - 36px); transform: translate(-50%, 14px); padding: 9px 13px; border-radius: 10px; background: rgba(13,13,13,.9); color: white; font-size: 12px; opacity: 0; pointer-events: none; transition: .18s ease; z-index: 40; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (hover: none) and (pointer: coarse) {
  button:active { opacity: .72; }
  .icon-button:active, .composer-image-button:active { background: transparent; }
  a:active { background: transparent; }
}

@media (max-width: 760px) {
  .about-topbar { padding-left: 18px; padding-right: 18px; }
  .about-main { padding-left: 20px; padding-right: 20px; }
  .about-hero { padding-top: 70px; padding-bottom: 74px; }
  .about-hero h1 { font-size: clamp(42px, 13vw, 64px); }
  .about-statement { margin-bottom: 64px; padding: 28px 24px; border-radius: 22px; }
  .about-section { padding: 62px 0; }
  .about-grid-four, .about-two-column { grid-template-columns: 1fr; }
  .about-card { min-height: 0; }
  .about-card h3 { margin-bottom: 30px; }
  .about-flow { grid-template-columns: 1fr; }
  .about-flow-arrow { transform: rotate(90deg); justify-self: center; }
  .about-footer { align-items: flex-start; flex-direction: column; }
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--shadow); }
  .app-shell:not(.sidebar-open) .sidebar { visibility: hidden; pointer-events: none; }
  .app-shell.sidebar-open .sidebar { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .app-shell.sidebar-open .main-panel { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .sidebar-overlay { position: fixed; inset: 0; display: block; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 15; }
  .app-shell.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .settings-overlay { background: var(--page); }
  .settings-drawer { width: 100vw; border-left: 0; box-shadow: none; }
  .settings-header { padding-left: 18px; padding-right: 14px; }
  .settings-body { padding-left: 18px; padding-right: 18px; }
  .sidebar-close, .menu-button { display: grid; }
  .topbar { position: absolute; top: 0; left: 0; right: 0; min-height: 52px; padding: max(8px, env(safe-area-inset-top)) 8px 8px; background: rgba(255,255,255,.86); z-index: 12; }
  .menu-button { border-radius: 8px; }
  .topbar-copy { gap: 7px; }
  .sidebar-head .workspace-product { font-size: 15px; }
  .task-board-header { padding: max(12px, env(safe-area-inset-top)) 16px 14px; }
  .task-board-heading-row { gap: 8px; }
  .task-board-menu-button { display: grid; margin-left: -4px; }
  .task-board-heading h1 { font-size: 20px; }
  .task-board-heading p { max-width: 64vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .task-board-toolbar { align-items: stretch; flex-direction: column; gap: 10px; margin-top: 15px; }
  .task-board-view-switch { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-board-search { width: 100%; }
  .task-board-body { overflow-x: hidden; padding: 18px 16px max(28px, env(safe-area-inset-bottom)); scroll-snap-type: none; }
  .task-board-columns { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .task-board-column { width: auto; min-width: 0; }
  .task-board-column.is-empty { display: none; }
  .task-board-column-head { min-height: 30px; padding: 0 2px 7px; }
  .task-board-column-title { font-size: 14px; }
  .task-board-card-list { gap: 9px; }
  .task-board-card { min-height: 0; gap: 12px; padding: 14px 15px; }
  .task-board-card-title { -webkit-line-clamp: 2; font-size: 15px; line-height: 1.46; }
  .task-board-card-meta { gap: 4px 12px; font-size: 12px; }
  .task-board-completed-item { min-height: 78px; padding-left: 2px; padding-right: 2px; }
  .task-board-completed-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .task-board-skeleton { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .task-board-skeleton-column:nth-child(n + 3) { display: none; }
  .topbar-title { max-width: 46vw; font-size: 11px; }
  .status-label { width: 28px; padding: 0; justify-content: center; font-size: 0; }
  .topbar-actions { gap: 1px; }
  .cache-sync-indicator { min-width: 24px; padding: 0 6px; justify-content: center; }
  .cache-sync-text { display: none; }
  .new-task-button { width: 34px; height: 34px; }
  .messages { padding: calc(64px + env(safe-area-inset-top)) 16px 116px; }
  .message-row { margin-bottom: 18px; }
  .message-card { font-size: 16px; line-height: 1.5; }
  .message-row.user .message-card { max-width: 88%; padding: 9px 14px; border-radius: 18px; }
  .composer-wrap { padding: 20px 16px max(8px, env(safe-area-inset-bottom)); }
  .composer-queue { max-height: 172px; }
  .queued-followup-main { gap: 8px; padding-left: 12px; }
  .queued-followup-action { min-width: 32px; width: 32px; padding: 0; }
  .queued-followup-action-label { display: none; }
  .queued-followup-action-label.steer-label { display: inline; }
  .queued-followup-action.steer-action { width: auto; padding: 0 6px; }
  .queued-followup-edit { padding-left: 40px; }
  .composer { min-height: 52px; padding: 8px; border-radius: 28px; }
  .composer textarea { width: 100%; }
  .message-navigation { left: auto; top: calc(64px + env(safe-area-inset-top)); right: 16px; bottom: auto; }
  .task-rename-overlay { align-items: flex-end; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
  .task-rename-dialog { padding: 20px; border-radius: 18px; }
}

@media (max-width: 360px) {
  .topbar-title { display: none; }
  .messages { padding-left: 14px; padding-right: 14px; }
  .composer-wrap { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #212121;
    --canvas: #212121;
    --sidebar: #171717;
    --surface: #2f2f2f;
    --surface-hover: #2b2b2b;
    --surface-selected: #2f2f2f;
    --border: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.14);
    --text: #ececec;
    --muted: #a3a3a3;
    --muted-strong: #b4b4b4;
    --accent: #ececec;
    --shadow: 0 12px 40px rgba(0,0,0,.36);
  }
  .send-button { color: #212121; }
  .auth-submit { color: #212121; }
  .auth-field input { background: #2a2a2a; }
  .auth-field input:focus { border-color: rgba(255,255,255,.34); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
  .auth-security-warning { color: #e7a363 !important; }
  .about-topbar { background: rgba(33,33,33,.88); }
  .topbar { background: rgba(33,33,33,.88); }
  .message-navigation-button { background: rgba(33,33,33,.72); }
  .message-navigation-button:hover { background: rgba(47,47,47,.94); }
  .icon-button:active { background: #333; }
  .message-content pre, .message-content code { background: #2b2b2b; }
  .message-content pre code { background: transparent; }
  .composer { background: #303030; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.22); }
  .composer-wrap { background: linear-gradient(to bottom, rgba(33,33,33,0), rgba(33,33,33,.94) 32%, #212121 62%); }
  .composer-image-button:hover { background: #3a3a3a; }
  .message-content a { color: #7ab7ff; }
  .task-board-search:focus-within { border-color: rgba(255,255,255,.24); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
  .task-board-view-button.is-active { box-shadow: 0 1px 3px rgba(0,0,0,.32); }
  .task-board-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
}