/* Saxi's screens, recreated for marketing: the app's own tokens (app/globals.css), Inter, and Tailwind's spacing at 1:1.
   One .app is a 390 x 844 phone screen; .phone scales it into a device frame. Used by screenshots.html and the videos. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

.saxi-dark {
  --background: #100b07; --foreground: #fbf4ea; --card: #19120c; --muted: #20170f; --muted-foreground: #a8998a;
  --border: #2d2218; --input: #3a2c1f; --primary: #ff9933; --primary-foreground: #1a0e03; --secondary: #241a11;
  --secondary-foreground: #fbf4ea; --accent: #2e2013; --brand: #ffa64d; --live: #ffbe6b; --live-foreground: #1a0e03;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s7: #9085e9;
  --v-core: #f58a1f; --v-arc: #ffb35c; --v-arc2: #ffe2b8; --btn-ink: #1a0e03;
  --mk-c1: #ff9933; --mk-c3: #ffb35c; --mk-ink: #fff3e0; --mk-deep: #100b07;
}
.saxi-light {
  --background: #ffffff; --foreground: #0f0a1e; --card: #ffffff; --muted: #f4f2f9; --muted-foreground: #645c76;
  --border: #e7e3f0; --input: #ddd7ea; --primary: #7c3aed; --primary-foreground: #ffffff; --secondary: #f3f0fa;
  --secondary-foreground: #2e1065; --accent: #ede9fe; --brand: #6d28d9; --live: #a78bfa; --live-foreground: #0f0a1e;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s7: #6250d6;
  --v-core: #7c3aed; --v-arc: #8b5cf6; --v-arc2: #c4b5fd; --btn-ink: #ffffff;
  --mk-c1: #7c3aed; --mk-c3: #7c3aed; --mk-ink: #f5f3ff; --mk-deep: #0f0a1e;
}

/* the mark follows the theme (mark.css defaults to purple and switches by media query, which a render can't rely on) */
.saxi-dark .mk { --mk-c1: #ff9933; --mk-c3: #ffb35c; --mk-ink: #fff3e0; --mk-deep: #100b07; --mk-halo: #100b07; }
.saxi-light .mk { --mk-c1: #7c3aed; --mk-c3: #7c3aed; --mk-ink: #f5f3ff; --mk-deep: #0f0a1e; --mk-halo: #ffffff; }

/* ---- device frame ---- */
.phone {
  --b: 11px; --s: 0.76;
  position: relative; box-sizing: content-box; padding: var(--b);
  width: calc(390px * var(--s)); height: calc(844px * var(--s));
  border-radius: calc(56px * var(--s) + var(--b));
  background: linear-gradient(160deg, #2b2119 0%, #0b0806 38%, #0b0806 70%, #241a12 100%);
  box-shadow: 0 0 0 1.5px #4a3a2b, inset 0 0 0 1.5px #000, 0 40px 90px rgba(0, 0, 0, 0.55);
}
.saxi-light .phone, .phone.light-frame {
  background: linear-gradient(160deg, #3b3450 0%, #16121f 38%, #16121f 70%, #2c2640 100%);
  box-shadow: 0 0 0 1.5px #c9c0dc, inset 0 0 0 1.5px #000, 0 40px 90px rgba(46, 16, 101, 0.28);
}
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: calc(56px * var(--s)); overflow: hidden; background: var(--background); }
.phone .app { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.phone .island { position: absolute; z-index: 30; left: 50%; top: calc(var(--b) + 11px * var(--s)); width: calc(124px * var(--s)); height: calc(36px * var(--s)); margin-left: calc(-62px * var(--s)); border-radius: 99px; background: #000; }

/* ---- the app ---- */
.app {
  width: 390px; height: 844px; overflow: hidden; position: relative;
  background: var(--background); color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app p, .app h1, .app h2, .app ul { margin: 0; padding: 0; }
.app ul { list-style: none; }
.app svg { display: block; }
.ic { width: 1em; height: 1em; display: inline-grid; place-items: center; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; }
.muted { color: var(--muted-foreground); }
.brand { color: var(--brand); }
.tnum { font-variant-numeric: tabular-nums; }
.t-xs { font-size: 12px; line-height: 16px; } .t-sm { font-size: 14px; line-height: 20px; } .t-15 { font-size: 15px; line-height: 22px; }
.t-lg { font-size: 18px; line-height: 28px; } .t-xl { font-size: 20px; line-height: 28px; } .t-2xl { font-size: 24px; line-height: 32px; } .t-26 { font-size: 26px; line-height: 1.2; }
.fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .tight { letter-spacing: -0.015em; }
.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.statusbar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.statusbar .right { display: flex; gap: 6px; align-items: center; }
.statusbar svg { height: 12px; width: auto; fill: currentColor; }

.tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.tab { border-radius: 999px; padding: 6px 12px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tab.on { background: var(--muted); color: var(--foreground); font-weight: 500; }

.main { display: flex; flex-direction: column; padding: 24px 16px; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.row { display: flex; align-items: flex-start; } .col { display: flex; flex-direction: column; min-width: 0; } .center { align-items: center; }
.grow { flex: 1; min-width: 0; }

.card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; gap: 12px; }
.check { width: 16px; height: 16px; margin-top: 4px; border-radius: 4px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--input); }
.check.on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.check.on svg { width: 12px; height: 12px; stroke-width: 3; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 2px 8px; border-radius: 26px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.badge.sec { background: var(--secondary); color: var(--secondary-foreground); }
.badge.out { border-color: var(--border); color: var(--foreground); }
.evidence { font-size: 12px; line-height: 16px; font-style: italic; color: var(--muted-foreground); }

.btn { display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 500; }
.btn.primary { background: var(--primary); color: var(--primary-foreground); height: 56px; font-size: 16px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.3); }
.btn.outline { border: 1px solid var(--input); background: color-mix(in srgb, var(--input) 30%, transparent); height: 48px; font-size: 14px; }

.bnav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; border-top: 1px solid var(--border); background: var(--background); padding-bottom: 34px; z-index: 20; }
.bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; font-size: 12px; line-height: 16px; color: var(--muted-foreground); text-decoration: none; }
.bnav a.on { color: var(--foreground); }
.bnav .ic { font-size: 24px; }
.bnav .mk .ln { stroke: currentColor; }
.homebar { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 9px; background: var(--foreground); opacity: 0.9; z-index: 25; }

.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 21; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; background: var(--background); border-top: 1px solid var(--border); border-radius: 24px 24px 0 0; padding: 8px 8px 34px; }
.sheet .handle { width: 40px; height: 4px; border-radius: 9px; background: var(--border); margin: 4px auto 12px; }
.bigbtn { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-radius: 18px; background: var(--muted); font-weight: 500; }
.bigbtn .ic { font-size: 20px; color: var(--brand); }

/* timer */
.vortex-stage { position: relative; width: 248px; height: 248px; display: grid; place-items: center; margin: 0 auto; isolation: isolate; }
.vortex-stage::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--v-arc) 30%, transparent) 76%, transparent 94%); filter: blur(15px); }
.vortex-btn { position: relative; z-index: 1; width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--btn-ink);
  background: radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--v-core) 50%, #fff 50%) 0%, color-mix(in srgb, var(--v-core) 92%, #fff 8%) 55%, color-mix(in srgb, var(--v-core) 80%, #000 20%) 100%);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--v-core) 42%, transparent), 0 2px 6px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 2px 1px rgba(255,255,255,.4), inset 0 -16px 28px rgba(0,0,0,.19); }
.vortex-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(168deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.07) 30%, transparent 52%); }
.saxi-dark .vortex-btn { text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.saxi-light .vortex-btn { text-shadow: 0 1px 3px rgba(0,0,0,.32); }
.mote { position: absolute; left: 50%; top: 50%; background: var(--v-arc); }
.mote.tri { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.mote.dot { border-radius: 50%; }
.mote.shard { background: var(--v-arc2); clip-path: polygon(50% 0%, 100% 38%, 76% 100%, 24% 100%, 0% 38%); }
.strip { position: relative; height: 24px; border-radius: 10px; background: var(--muted); }
.strip span { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.strip .now { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--foreground); }
.ticks { position: relative; height: 16px; margin-top: 4px; font-size: 11px; color: var(--muted-foreground); }
.ticks span { position: absolute; transform: translateX(-50%); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.plusbtn { width: 36px; height: 36px; border-radius: 50%; background: var(--muted); color: var(--brand); display: grid; place-items: center; margin-left: auto; }
.plusbtn .ic { font-size: 20px; }

/* tasks */
.tick { width: 22px; height: 22px; border-radius: 50%; border: 1.75px solid var(--muted-foreground); flex-shrink: 0; margin-top: 1px; }
.capture-bar { position: absolute; left: 0; right: 0; bottom: 94px; z-index: 19; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--background) 95%, transparent); padding: 8px 12px; display: flex; gap: 10px; align-items: center; }
.capture-bar .field { height: 48px; flex: 1; border-radius: 18px; background: var(--muted); padding: 0 16px; display: flex; align-items: center; font-size: 15px; color: var(--muted-foreground); }
.capture-bar .mic { height: 48px; width: 56px; border-radius: 18px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary) 25%, transparent); }
.capture-bar .mic .ic { font-size: 24px; }

/* notes */
.summary { margin: 16px 16px 0; border-radius: 18px; background: var(--muted); padding: 12px 16px; }
.summary .label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px; }
.summary ul { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 22px; }
.summary li::marker { color: var(--muted-foreground); }
.wikilink { color: var(--brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 3px; }
.note-row { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); padding: 12px 0; }
.note-row:first-child { border-top: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* saxi */
.reply { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 10px; padding: 12px; display: flex; gap: 12px; }
.reply .play { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; flex-shrink: 0; }
.reply .play .ic { font-size: 20px; }
.details { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.audio { margin-top: 8px; height: 40px; border-radius: 20px; background: var(--muted); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 12px; color: var(--muted-foreground); }
.audio .bar { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--foreground) 18%, transparent); position: relative; }
.audio .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: var(--brand); }
.bigmic { width: 160px; height: 160px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 35%, transparent); }
.bigmic .ic { font-size: 64px; }
.stopbtn { width: 56px; height: 56px; border-radius: 50%; background: var(--live); color: var(--live-foreground); display: grid; place-items: center; }
.mono { font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }