:root {
  --ink: #e4eaf3;
  --navy: #182334;
  --navy-deep: #101925;
  --canvas: #151e2b;
  --card: #1b2737;
  --line: #2c3a4d;
  --mint: #76dfbd;
  --mint-soft: #203e3c;
  --mint-ink: #8ae7ca;
  --muted: #a0aec1;
  --amber: #c98a1b;
  --danger: #f18f89;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 29, 51, 0.06), 0 4px 16px rgba(20, 29, 51, 0.06);
}

* { box-sizing: border-box; }
/* Author-level [hidden]: the UA `[hidden]` rule is beaten by any authored
   `display` (e.g. .gate { display: grid }), so gate/app/user toggling must win. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  min-height: 100vh;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, input { font: inherit; color: inherit; }

/* Top navigation */
.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px;
  background: var(--navy); color: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; width: 40px; height: 40px; border-radius: 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 18px; }
.brand-sub { font-size: 13px; color: #b9c4d8; letter-spacing: 0.02em; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  background: rgba(255, 255, 255, 0.1); color: #d7dfee;
}
.live-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #8a97ad; }
.live-pill[data-state="live"] { background: var(--mint-soft); color: var(--mint-ink); }
.live-pill[data-state="live"] .dot { background: var(--mint); }
.live-pill[data-state="paused"] { background: rgba(201, 138, 27, 0.18); color: #f2d9a6; }
.live-pill[data-state="paused"] .dot { background: var(--amber); }

.user { display: flex; align-items: center; gap: 10px; }
.avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint); color: var(--navy-deep);
  font-weight: 700; font-size: 13px;
}
.avatar.avatar--img { background: transparent; }
.avatar .avatar-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.user-name { font-size: 15px; font-weight: 600; }

.btn {
  border: 0; border-radius: 8px; cursor: pointer;
  padding: 9px 16px; font-weight: 600; font-size: 15px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn.primary { background: var(--mint); color: var(--navy-deep); }
.btn.primary:hover { background: #2baa89; }
.btn.ghost { background: transparent; color: #d7dfee; border: 1px solid rgba(255, 255, 255, 0.25); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* Toolbar */
.app { max-width: 880px; margin: 0 auto; padding: 16px 20px 64px; }
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.channels { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--mint-soft); color: var(--mint); border-color: #437e70; }
.chip:focus-visible, .btn:focus-visible, input:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.search input {
  width: 220px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); font-size: 15px;
}
.follow {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.follow[aria-pressed="true"] { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint); }

/* Transcript canvas — compact Discord-style rows, no cards */
.transcript {
  display: flex; flex-direction: column; gap: 0;
  background: var(--canvas);
}
.turn {
  display: flex; gap: 12px; align-items: flex-start;
  position: relative;
  padding: 14px 0 0;
}
.turn .avatar { flex: 0 0 auto; width: 34px; height: 34px; }
.turn-body { flex: 1 1 auto; min-width: 0; }
.turn-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 1px; }
.turn-name { font-weight: 650; font-size: 15px; }
.turn-time { font-size: 12px; color: var(--muted); }
.turn-text { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.turn-line { min-width: 0; }
/* Continuation rows: hide the repeated header, keep the gutter so text stays
   aligned under the message column (the continuation indent). */
.turn.continuation { padding-block: 0; }
.turn.continuation .avatar { visibility: hidden; height: 0; }
.tail-dots { display: flex; gap: 3px; margin: 10px 0 0; }
.tail-dots .d {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--mint); opacity: 0.3;
  animation: dotPulse 1.2s infinite ease-in-out;
}
.tail-dots .d:nth-child(2) { animation-delay: 0.2s; }
.tail-dots .d:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tail-dots .d { animation: none; opacity: 0.6; }
}
/* Hover/focus tools on desktop; a compact inline menu opens them on touch. */
.turn-tools {
  position: absolute; top: 2px; right: 0;
  display: flex; gap: 2px;
  padding: 2px 4px; border-radius: 6px;
  background: var(--canvas);
  opacity: 0; pointer-events: none;
}
.turn:hover .turn-tools,
.turn:focus-within .turn-tools {
  opacity: 1; pointer-events: auto;
}
.turn-tool {
  border: 0; background: none; color: var(--muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 2px 8px; border-radius: 6px;
}
.turn-tool:hover { background: var(--mint-soft); color: var(--ink); }
.turn-tool.danger:hover { color: var(--danger); background: rgba(192, 73, 63, 0.08); }
.turn-tool.ok { color: var(--mint-ink); }
.turn-tool.fail { color: var(--danger); }
.turn-menu { display: none; }
.turn-tool:focus-visible, .turn-menu:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.turn-head { flex-wrap: wrap; }
.turn .avatar { background: #2d4350; color: var(--mint); border-radius: 11px; }
.turn.continuation { margin-top: 0; }
.turn-tools { border: 1px solid var(--line); }
@media (hover: none), (pointer: coarse) {
  .turn-menu {
    display: block; float: right; border: 0; border-radius: 4px; background: transparent;
    color: var(--muted); font-weight: 700; padding: 0 8px; margin-left: 4px;
    min-width: 36px; height: 23px; line-height: 23px; cursor: pointer;
  }
  .turn-tools { display: none; top: 100%; z-index: 2; background: var(--card); }
  .turn.actions-open .turn-tools { display: flex; opacity: 1; pointer-events: auto; }
  .turn-tool { min-height: 40px; padding: 6px 14px; }
}

/* Empty / status blocks */
.notice {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px 24px; text-align: center; color: var(--muted);
}
.notice strong { color: var(--ink); }

/* Jump to live */
.jump { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20; }
.jump-btn { box-shadow: 0 6px 24px rgba(20, 29, 51, 0.25); }

/* The entrance is a single, scoped ceremony; transcript rows never fade. */
.is-gated .topbar { display: none; }
.gate { display: grid; place-items: center; min-height: 100svh; padding: 44px 24px 28px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #213c43 0, #182733 35%, var(--canvas) 70%); }
.gate-composition { width: min(100%, 600px); text-align: center; }
.signal-label { display: flex; justify-content: center; align-items: center; gap: 10px; font: 11px ui-monospace, monospace; letter-spacing: .19em; color: #a2c5c2; }
.signal-label > span { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; }
.mascot-stage { position: relative; width: clamp(240px, 34vh, 330px); aspect-ratio: 1; margin: 28px auto 0; display: grid; place-items: center; }
.gate-logo { position: relative; display: block; width: 91%; height: auto; }
.radar-ring { position: absolute; inset: 0; border: 1px solid #76dfbd20; border-radius: 50%; }
.radar-ring::before, .radar-ring::after { content: ''; position: absolute; background: #76dfbd30; }
.radar-ring::before { height: 1px; width: 112%; left: -6%; top: 50%; }
.radar-ring::after { width: 1px; height: 112%; top: -6%; left: 50%; }
.radar-ring.inner { inset: 10%; border-style: dashed; opacity: .5; }
.coordinate { position: absolute; top: 51%; font: 9px ui-monospace, monospace; letter-spacing: .12em; color: #8aa8b3; }
.coordinate.left { right: 106%; }.coordinate.right { left: 106%; white-space: nowrap; color: #f18f89; }
.gate-wordmark { display: block; width: min(100%, 420px); height: auto; margin: 12px auto 24px; object-fit: contain; }
.gate-title { font-size: clamp(21px, 3vw, 27px); font-weight: 500; letter-spacing: -.025em; margin: 0 0 9px; }
.gate-sub { color: var(--muted); font-size: 16px; max-width: 360px; margin: 0 auto 25px; }
.gate-actions { display: flex; justify-content: center; min-height: 52px; }
.gate-actions .btn.primary { padding: 14px 30px; font-size: 16px; gap: 12px; border-radius: 8px; font-weight: 700; }
.gate-actions .btn.primary:hover { background: #a0efd5; }
.discord-icon { width: 23px; height: 18px; fill: currentColor; }
.gate-foot { color: #8296a6; font: 10px ui-monospace, monospace; letter-spacing: .22em; margin: 45px 0 0; }
.eye-scan { display: none; position: absolute; inset: 12% 8%; border-bottom: 2px solid var(--mint); background: linear-gradient(transparent, #76dfbd18); pointer-events: none; }
.is-intro .eye-scan { display: block; animation: eyeScan 1s ease-in-out both; }
.is-intro .radar-ring { animation: radarBoot 1s ease-out both; }
.is-intro .gate-actions { visibility: hidden; }
.chat-enter .app, .chat-enter .topbar { animation: chatEnter 250ms ease-out both; }
@keyframes eyeScan { 0% { clip-path: inset(0 0 100%); } 65% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(95% 0 0); opacity: 0; } }
@keyframes radarBoot { 0% { transform: scale(.94); opacity: .3; } 55% { border-color: #76dfbd80; } 100% { transform: scale(1); } }
@keyframes chatEnter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .gate { padding: 32px 26px; }
  .mascot-stage { width: min(66vw, 290px); margin-top: 30px; }
  .coordinate.left { right: 100%; }.coordinate.right { left: 100%; }
  .gate-wordmark { margin-top: 16px; margin-bottom: 26px; }
  .gate-foot { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-intro .eye-scan { display: none; }
  .is-intro .radar-ring, .chat-enter .app, .chat-enter .topbar { animation: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .topbar { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .topbar-right { gap: 10px; margin-left: auto; }
  .brand-logo { width: 32px; height: 32px; }
  .user > .avatar { display: none; }
  .btn.ghost { padding: 7px 9px; font-size: 13px; }
  .turn { gap: 10px; }
  .brand-sub { display: none; }
  .user-name { display: none; }
  .live-pill { padding: 5px 10px; font-size: 12.5px; }
  .app { padding: 12px 12px 72px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .channels { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { white-space: nowrap; }
  .toolbar-right { justify-content: space-between; }
  .search { flex: 1 1 auto; }
  .search input { width: 100%; }
  .turn-text { font-size: 16px; }
}

/* Owner-private clips workspace */
/* Private Clips workspace: one output axis and compact grouped operations. */
.clip-nav{display:flex;gap:8px;margin-right:auto}.clip-nav button[hidden]{display:none}
.clip-nav .btn{min-height:34px;font-size:16px;line-height:1.3;padding:6px 12px;border-radius:2px}
.clip-nav [aria-current="page"]{border-color:#8ae5d4;background:#203e49;color:#dffff5}
.clip-nav[hidden],.clip-app[hidden]{display:none}
.clip-app{margin:20px 0;padding:0 24px 48px;color:#eaf1fa;font-size:16px}
.clip-app *{box-sizing:border-box}
.clip-app .btn,.clip-app input,.clip-app select,.clip-app button{border-radius:2px;font:inherit}
.clip-app .btn{height:34px;min-height:34px;padding:5px 10px;white-space:nowrap}
.clip-app input,.clip-app select{background:#111d2c;border:1px solid #405569;color:#ecf3ff;padding:5px 8px;min-height:34px;min-width:0;max-width:100%;font:inherit;border-radius:2px}
.clip-app :focus-visible{outline:2px solid #8cead6;outline-offset:3px}
.clip-app button:disabled{opacity:.4;cursor:default}
.clip-description,.clip-meta,.clip-row-context,.clip-row-detail{color:#aebfd0;line-height:1.5}
.clip-name-row{display:flex;gap:8px;align-items:center}
.clip-name-row>[hidden]{display:none}
.clip-title{flex:1;width:100%;font-size:28px!important;font-weight:700!important;letter-spacing:-.02em}
.clip-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;font-size:14px;margin:6px 0 10px}
.clip-meta .btn{padding:8px 0;border-color:transparent;min-height:44px}
.clip-version-strip{display:flex;gap:8px;align-items:center;padding:10px 0;border-block:1px solid #33465a}
.clip-version-strip select{width:320px;min-width:0;height:34px}.clip-version-strip>span{font-size:14px;color:#aebfd0;margin-left:auto}
.clip-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:16px 0}
.clip-transport{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:12px 0}
.clip-play-row,.clip-clock-row{display:flex;gap:8px;align-items:center}
.clip-play-row>.btn{min-height:34px}
.clip-clock-row .clip-history-icon{width:34px;min-width:34px;padding:4px;font-size:22px;line-height:1}
.clip-bounds{display:flex;gap:8px;align-items:center;margin-left:auto}
.clip-bounds .clip-field{flex-direction:row;align-items:center;min-width:0}
.clip-bounds .clip-field input{width:104px;height:34px}
.clip-bounds>.btn{min-height:34px}
.clip-more-actions{display:flex;gap:8px;flex-wrap:wrap}
.clip-more-actions>.clip-description{flex-basis:100%}
.clip-clock{font:16px monospace;color:#9ce7d9;align-self:center;min-width:145px;flex:1}
.clip-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#b8cada}
.clip-field input{width:104px;font-size:16px}
.clip-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.clip-audio,.clip-transcript{min-width:0}
.clip-app h2{font-size:19px;margin:8px 0 14px}
.clip-timeline-heading{display:flex;align-items:center;gap:8px}.clip-timeline-heading h2{margin-right:auto}
.clip-timeline{display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid #33465a;background:#101d2b}.clip-track-gutter{border-right:1px solid #33465a}.clip-gutter-heading{height:86px;padding:12px;color:#9db0c1;font-size:14px}.clip-track-controls{height:110px;border-top:1px solid #33465a;padding:8px 10px;display:flex;flex-wrap:wrap;align-content:center;gap:5px 8px;font-size:14px}.clip-track-controls>strong{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbdde9}.clip-track-actions{display:flex;gap:4px}.clip-track-controls .btn{height:30px;min-height:30px;padding:3px 7px;font-size:14px}.clip-track-controls .btn[aria-pressed=true]{background:#285650;border-color:#8ae5d4}.clip-track-controls .clip-field{flex-direction:row;align-items:center;font-size:13px;gap:4px}.clip-track-controls .clip-field input{width:61px;height:30px;min-height:30px;font-size:14px;padding:3px}.clip-import-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 4px}.clip-import-controls>strong,.clip-import-controls .clip-field:first-of-type{grid-column:1/-1}.clip-import-controls .clip-field input{width:54px}.clip-import-controls>.btn{font-size:13px;padding:3px 4px}.clip-wave-viewport{min-width:0;overflow-x:auto;overflow-y:hidden;background:#101d2b}.clip-wave-viewport[data-zoom="1"]{overflow:clip}
.clip-wave-inner{min-width:100%}
.clip-ruler{display:flex;justify-content:space-between;font:13px monospace;color:#acbdd0;height:28px;align-items:center;border-bottom:1px solid #33465a}
.clip-app #clipSeek{display:block;box-sizing:border-box;width:100%;height:24px;min-height:24px;padding:0;margin:0;border:0;appearance:none;-webkit-appearance:none;background:transparent;accent-color:#7de4cf}
.clip-app #clipSeek::-webkit-slider-runnable-track{height:2px;background:#52677a}
.clip-app #clipSeek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:0;height:12px;border-radius:0;background:#8ae5d4;margin-top:-5px}
.clip-app #clipSeek::-moz-range-track{height:2px;background:#52677a}
.clip-app #clipSeek::-moz-range-thumb{width:0;height:12px;border:0;border-radius:0;background:#8ae5d4}
.clip-selection{position:relative;height:34px}
.clip-wave-inner>.clip-ruler,.clip-lanes{width:100%;margin:0}
.clip-handle{position:absolute;top:0;min-width:30px;min-height:30px;transform:translateX(-50%);border:1px solid #7ce8d0;background:#173940;color:#dffff8;font-size:12px!important;touch-action:none;cursor:ew-resize;z-index:3}
.clip-handle[data-edge=out]{top:0;background:#343455;border-color:#b4b7ff}.clip-handle[data-edge=in]{transform:none}.clip-handle[data-edge=out]{transform:translateX(-100%)}
.clip-lanes{position:relative}
.clip-track{position:relative;border-top:1px solid #33465a;height:110px}
.clip-track canvas{display:block;width:100%;height:109px}
.clip-playhead{position:absolute;top:0;bottom:0;width:1px;background:#fff;z-index:4;pointer-events:none}
.clip-selection-shade{position:absolute;top:0;bottom:0;background:#7de4cf15;border-inline:1px solid #7de4cf75;pointer-events:none;z-index:2}
.clip-import-lane{position:relative;height:110px;border-top:1px solid #33465a}
.clip-import-region{position:absolute;background:#524a74;color:#f2edff;border:1px solid #a99bd1;top:12px;height:84px;font-size:14px;padding:8px;overflow:hidden;white-space:nowrap;text-align:left;cursor:ew-resize;touch-action:none}.clip-import-position{display:block;font:13px monospace;margin-top:8px}
.clip-audio>.clip-description{font-size:14px}
.clip-transcript{border-top:1px solid #33465a;padding-top:12px}
.clip-transcript>input{width:min(640px,100%)}
.clip-turns{line-height:1.65;padding:0}
.clip-turn{position:relative;padding:16px 0 4px 52px;min-height:65px}.clip-turn-avatar{position:absolute;left:0;top:18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#29424e;color:#a5e6d7;font-size:14px;font-weight:700}
.clip-turn-meta{display:flex;gap:14px;font-size:14px;color:#9edfd3}
.clip-turn-meta span{color:#9db0c1;font-size:13px}
.clip-turn-text{font-size:16px;margin:3px 0;user-select:text;-webkit-user-select:text;white-space:normal;max-width:110ch}.clip-turns ::selection{background:transparent;color:inherit}

.clip-word{cursor:text;border-radius:0}
.clip-word:hover{background:#28504f}
.clip-word.is-selected{background:#315e59;color:#fff}
.clip-status{min-height:24px;color:#9ce7d9;line-height:1.5}
.clip-danger{border-color:#a75269!important;color:#ffb6c6!important}
.clip-library-filters{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:20px 0}
.clip-library-filters>input{flex:1;min-width:200px}
.clip-favorites-filter{display:flex;align-items:center;gap:8px;min-height:44px}
.clip-favorites-filter input{height:22px;width:22px;accent-color:#7de4cf}
.clip-library-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;border-top:1px solid #33465a;padding:12px 0;align-items:center}
.clip-star{color:#a1e7d5;font-size:26px!important;background:none;border:0;min-height:44px;cursor:pointer}
.clip-card{display:flex;flex-direction:column;gap:5px;text-align:left;background:none;border:0;color:#edf6fd;padding:4px;cursor:pointer;min-height:44px;overflow-wrap:anywhere}
.clip-card strong{font-size:18px;font-weight:600}
.clip-row-context{font-size:14px}
.clip-row-detail{display:flex;align-items:end;flex-direction:column;font-size:13px;gap:4px}
.clip-inclusion{color:#9fe6d3;font-weight:600}
.clip-tool-dialog{width:min(880px,calc(100% - 28px));max-height:85vh;background:#111f2e;border:1px solid #52687b;border-radius:2px;color:#eaf1fa;padding:20px;overflow:auto}
.clip-tool-dialog::backdrop{background:#020910b8}
.clip-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #33465a;margin-bottom:16px}
.clip-dialog-heading h2{font-size:22px}
.clip-tool-dialog .btn{margin:4px}
.clip-history{display:flex;flex-direction:column;align-items:stretch}
.clip-history button{text-align:left}
/* Desktop Clips starts at 1000px; smaller screens keep Live and Notes. */
@media(max-width:999px){#clipsNav,.clip-app{display:none}.clip-nav{margin:0;gap:6px}.clip-nav .btn{min-height:44px;padding:8px 10px}.topbar .clip-nav{order:3;width:100%}}


/* Quiet, source-linked owner Notes inbox. */
.notes-app[hidden]{display:none}.notes-app{max-width:1320px;margin:32px auto;padding:0 24px 48px;color:#eaf1fa}.notes-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 28px}.notes-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:#8bb6c4;margin:0 0 12px}.notes-heading h1{font-size:clamp(30px,4vw,42px);letter-spacing:-.035em;line-height:1.12;margin:0 0 12px}.notes-description{color:#afc2d3;font-size:17px;line-height:1.6;margin:0}.notes-quiet{color:#9fe6d3;background:#163932;border:1px solid #2d5d51;border-radius:24px;padding:9px 15px;font-size:14px;white-space:nowrap}.notes-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:end;padding:20px;background:#101e2b;border:1px solid #2b4052;border-radius:12px}.notes-filter{display:flex;flex-direction:column;gap:8px;flex:1;min-width:150px;color:#b2c5d5;font-size:13px}.notes-app select,.notes-app input,.notes-app textarea{background:#0c1723;border:1px solid #40556b;border-radius:7px;padding:11px 12px;font:inherit;color:#eef6fb;max-width:100%;box-sizing:border-box}.notes-app select{font-size:16px;min-height:44px}.notes-countline{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:20px 0 4px}.notes-count{font-size:16px;font-weight:700;margin:0}.notes-retention,.notes-foot{color:#9bb0c2;font-size:13px;line-height:1.6}.notes-status{color:#a3e9d5;font-size:15px;margin:0 0 12px}.notes-status:empty{display:none}.notes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.note-card{border:1px solid #30475b;background:#122130;border-radius:14px;padding:25px;min-width:0;overflow-wrap:anywhere}.note-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.note-type{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#99e6d4;font-weight:750}.note-state{font-size:12px;background:#233a4a;padding:5px 9px;border-radius:5px;color:#c1d4e3}.note-card h2{font-size:24px;line-height:1.3;letter-spacing:-.02em;margin:0 0 10px}.note-certainty{font-size:13px;color:#e6c783;margin:0 0 16px}.note-summary{font-size:17px;line-height:1.65;color:#d0dce6;margin:0 0 18px}.note-dates{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.note-dates span{flex-basis:100%;font-size:12px;color:#9db4c8}.note-dates strong{font-size:14px;font-weight:500;background:#293548;border:1px solid #44546a;border-radius:5px;padding:6px 10px}.note-byline{font-size:13px;color:#9db6c9;line-height:1.6;margin:0 0 18px}.note-sources,.note-changes{border-top:1px solid #304456;padding:14px 0;color:#b5c9d8;font-size:14px}.note-sources summary,.note-changes summary{cursor:pointer;min-height:24px;line-height:1.6}.note-source{margin-top:18px}.note-source-meta{font-size:12px;color:#9fb1c5}.note-source blockquote{border-left:3px solid #6b849a;margin:10px 0 4px;padding:8px 14px;background:#0b1823;color:#dce6ee;font-size:16px;line-height:1.6;white-space:pre-wrap}.note-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px}.notes-app .btn{min-height:42px;font-size:14px;padding:9px 13px}.notes-app .note-delete{color:#e6acb0}.note-editor{display:flex;flex-wrap:wrap;gap:12px;padding-top:20px;margin-top:20px;border-top:1px solid #40556b}.note-editor label{display:flex;flex-direction:column;gap:7px;flex-basis:100%;color:#bbd0df;font-size:14px}.note-editor textarea{min-height:100px;resize:vertical}.note-editor select{width:100%}.note-editor p{flex-basis:100%;line-height:1.6}.notes-empty{grid-column:1/-1;background:#101e2b;border:1px dashed #3b5365;border-radius:12px;padding:40px;color:#afc3d4;line-height:1.6}.notes-empty h2{color:#ecf5fa;font-size:24px;margin:0 0 8px}.notes-foot{margin-top:24px}#notesNav[aria-pressed="true"]{border-color:#75e5cb}
@media(max-width:700px){.notes-app{padding:0 14px 40px;margin-top:26px}.notes-heading{display:block;margin-bottom:24px}.notes-quiet{display:inline-block;margin-top:18px}.notes-eyebrow{font-size:10px}.notes-description{font-size:16px}.notes-filters{padding:14px;gap:14px 12px}.notes-filter{min-width:0;flex-basis:calc(50% - 12px)}.notes-filters>.btn{width:100%}.notes-countline{display:block}.notes-retention{margin-bottom:18px}.notes-grid{grid-template-columns:minmax(0,1fr);gap:16px}.note-card{padding:20px}.note-card h2{font-size:23px}.notes-app .btn{min-height:44px;padding:10px 12px}.notes-empty{padding:24px}}

.view-mode { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted,#aebbd2); }
.view-mode select { font:inherit; font-weight:600; color:var(--text,#edf3ff); background:#192337; border:1px solid #4b5e7c; border-radius:8px; padding:9px 10px; }
@media(max-width:600px) { .toolbar-right { flex-wrap:wrap; } .view-mode { flex:1 1 auto; } }