/* Keith Jung — site styles.
   One fixed WebGL brain behind everything; sections scroll over it and tell it what shape to take. */

:root {
  /* Paper & Vermilion: warm newsprint, black ink, one red. Printed, not glowing. */
  --bg:#EFEBE3; --bg2:#E6E1D7; --ink:#161512; --soft:#4A4740; --dim:#706C64;
  --line:rgba(22,21,18,0.16); --panel:rgba(255,252,246,0.55); --glass:rgba(239,235,227,0.8);
  --accent:#D9442B; --accent-ink:#C23B22; --cta:#161512; --on-cta:#EFEBE3; --signal:#D9442B;
  --node:#2A2824; --shell:#9C968A; --edge:#B9B2A5;
  --sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease:cubic-bezier(0.23, 1, 0.32, 1);
  --gutter:clamp(18px, 5vw, 72px);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#151412; --bg2:#1C1B18; --ink:#ECE7DC; --soft:#ABA59A; --dim:#888378;
  --line:rgba(236,231,220,0.13); --panel:rgba(236,231,220,0.045); --glass:rgba(21,20,18,0.78);
  --accent:#FF5B3A; --accent-ink:#FF6E4F; --cta:#ECE7DC; --on-cta:#151412; --signal:#FF5B3A;
  --node:#D6CFC1; --shell:#8E887C; --edge:#857F73;
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background-color 500ms ease, color 500ms ease; }
a { color:inherit; }
::selection { background:var(--accent); color:var(--on-cta); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
img, svg { display:block; }
h1, h2, h3 { margin:0; font-weight:600; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
em { font-style:normal; color:var(--accent-ink); }

/* grain + a soft accent glow, both fixed and cheap */
body::after { content:''; position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root:not([data-theme="dark"]) body::after { filter:invert(1); opacity:0.07; }

#brain { position:fixed; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none; }
.no-gl #brain { display:none; }

.skip { position:fixed; left:16px; top:-60px; z-index:40; padding:10px 16px; border-radius:10px; background:var(--cta); color:var(--on-cta); font-weight:600; text-decoration:none; transition:top 200ms var(--ease); }
.skip:focus { top:16px; }

/* ---------- header ---------- */
.bar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:24px; padding:16px var(--gutter); }
.bar::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent)); opacity:0.9; transition:opacity 300ms ease; }
.bar::after { content:''; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line); opacity:0; transition:opacity 300ms ease; }
.bar.solid::after { opacity:1; }
.bar.solid::before { opacity:0; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; letter-spacing:-0.01em; }
.brand img { width:28px; height:28px; border-radius:7px; }
.brand small { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); }
.nav { display:flex; gap:4px; margin-left:auto; }
.nav a { position:relative; padding:8px 12px; border-radius:8px; font-size:14px; color:var(--soft); text-decoration:none; transition:color 200ms ease, background-color 200ms ease; }
.nav a[aria-current="true"] { color:var(--ink); }
.nav a[aria-current="true"]::after { content:''; position:absolute; left:12px; right:12px; bottom:3px; height:1.5px; border-radius:2px; background:var(--accent); }
.tools { display:flex; align-items:center; gap:8px; }
.icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:border-color 200ms ease, background-color 200ms ease; }
.icon-btn svg { width:18px; height:18px; }
.progress { position:absolute; left:0; bottom:0; height:1.5px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--accent); opacity:0.7; }
@media (hover:hover) and (pointer:fine) {
  .nav a:hover { color:var(--ink); background:var(--panel); }
  .icon-btn:hover { border-color:var(--ink); }
}
@media (max-width:980px) { .nav { display:none; } .tools { margin-left:auto; } .brand small { display:none; } }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:12px; height:50px; padding:0 20px 0 22px; border-radius:12px; border:1px solid var(--line); background:transparent;
  color:var(--ink); font:inherit; font-size:15px; font-weight:560; letter-spacing:-0.005em; line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:transform 200ms var(--ease), border-color 200ms ease, background-color 200ms ease, box-shadow 260ms var(--ease); }
.btn svg { width:18px; height:18px; flex:none; transition:transform 320ms var(--ease); }
.btn.primary { background:var(--cta); border-color:var(--cta); color:var(--on-cta); }
.btn.sm { height:42px; padding:0 16px 0 18px; font-size:14px; border-radius:10px; }
.btn:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { border-color:var(--ink); }
  .btn.primary:hover { border-color:var(--accent); background:var(--accent); color:#fff; }
  .btn:hover .i-arrow { transform:translate(2px,-2px); }
  .btn:hover .i-down { transform:translateY(2px); }
}
.btn-row { display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- shared section bits ---------- */
main { position:relative; z-index:2; }
.scene { position:relative; min-height:100vh; padding:16vh var(--gutter); display:grid; align-content:center; }
.wrap { width:100%; max-width:1320px; margin:0 auto; }
.col { max-width:620px; }
.tag { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-ink); }
.tag::before { content:''; width:22px; height:1px; background:currentColor; }
.h2 { margin:22px 0 0; font-size:clamp(38px, 5.4vw, 80px); line-height:1.0; letter-spacing:-0.038em; }
.lede { margin-top:26px; max-width:560px; font-size:clamp(17px, 1.6vw, 20px); line-height:1.55; color:var(--soft); }

/* word-by-word mask reveal for headings */
.w { display:inline-block; overflow:hidden; vertical-align:top; padding:0.08em 0.06em 0.16em; margin:-0.08em -0.06em -0.16em; }
.w > span { display:inline-block; transition:transform 900ms var(--ease); transition-delay:calc(var(--i, 0) * 55ms); }
.js [data-split]:not(.in) .w > span { transform:translateY(105%); }
.rv { transition:opacity 700ms ease, transform 900ms var(--ease); transition-delay:var(--d, 0ms); }
.js .rv:not(.in) { opacity:0; transform:translateY(22px); }

/* ---------- hero ---------- */
.hero { min-height:100vh; min-height:100svh; align-content:end; padding-top:18vh; padding-bottom:12vh; }
.hero .eyebrow { font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.hero .eyebrow b { color:var(--accent-ink); font-weight:500; }
.hero h1 { margin-top:22px; font-size:clamp(64px, 12.5vw, 196px); line-height:0.86; letter-spacing:-0.055em; }
.hero .sub { margin-top:34px; max-width:560px; font-size:clamp(18px, 1.8vw, 22px); line-height:1.5; color:var(--soft); }
.hero .sub strong { color:var(--ink); font-weight:560; }
.hero .btn-row { margin-top:36px; }
.cue { position:absolute; right:var(--gutter); bottom:12vh; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.cue i { position:relative; display:block; width:1px; height:56px; overflow:hidden; background:var(--line); }
.cue i::after { content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--accent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue { to { top:100%; } }
.hero-in > * { opacity:0; transform:translateY(18px); animation:rise 900ms var(--ease) forwards; }
.hero-in > :nth-child(1) { animation-delay:300ms; } .hero-in > :nth-child(3) { animation-delay:900ms; } .hero-in > :nth-child(4) { animation-delay:1050ms; }
.hero-in > h1 { opacity:1; transform:none; animation:none; }
.hero h1 .w > span { transition-duration:1100ms; transition-delay:calc(450ms + var(--i, 0) * 90ms); }
@keyframes rise { to { opacity:1; transform:none; } }

/* ---------- marquee ---------- */
.marquee { position:relative; z-index:2; overflow:hidden; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.marquee .track { display:flex; width:max-content; will-change:transform; }
.marquee span { display:flex; align-items:center; gap:clamp(18px, 3vw, 40px); padding-right:clamp(18px, 3vw, 40px); font-size:clamp(30px, 4.6vw, 64px); font-weight:600; letter-spacing:-0.035em; line-height:1; white-space:nowrap; }
.marquee b { font-weight:400; color:var(--signal); }
.marquee s { text-decoration:none; color:var(--dim); font-size:0.5em; }

/* ---------- 01 the gap ---------- */
.gap { min-height:150vh; align-content:start; padding-top:18vh; text-align:center; }
.gap .col { position:sticky; top:13vh; max-width:900px; margin:0 auto; }
.gap .tag { justify-content:center; }
.gap .lede { margin-left:auto; margin-right:auto; max-width:620px; }
.labels { position:fixed; inset:0; z-index:2; pointer-events:none; }
.chip { position:absolute; left:0; top:0; display:flex; align-items:center; gap:9px; padding:8px 13px 8px 10px; border-radius:999px; border:1px solid var(--line); background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:14px; font-weight:560; white-space:nowrap; opacity:0; will-change:transform, opacity; }
.chip i { width:8px; height:8px; border-radius:50%; background:var(--signal); }

/* ---------- 02 what I do (pinned steps) ---------- */
.does { position:relative; }
.step { min-height:100vh; }
.step .num { display:block; font-family:var(--mono); font-size:13px; letter-spacing:0.06em; color:var(--dim); }
.step .num b { color:var(--accent-ink); font-weight:500; }
.step h3 { margin-top:18px; font-size:clamp(44px, 6.4vw, 104px); line-height:0.95; letter-spacing:-0.045em; }
.step h3 .arrow { display:inline-block; color:var(--signal); font-weight:400; }
.step p { margin-top:26px; max-width:540px; font-size:clamp(17px, 1.6vw, 20px); color:var(--soft); }
.stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding:0; list-style:none; }
.stack li { padding:7px 12px; border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:12.5px; color:var(--soft); background:color-mix(in srgb, var(--bg) 40%, transparent); }
.does-head { padding-bottom:0; min-height:auto; padding-top:18vh; }
.rail { position:sticky; top:calc(50vh - 60px); z-index:3; float:right; margin-right:var(--gutter); display:flex; flex-direction:column; gap:10px; height:0; }
.rail span { display:block; width:2px; height:28px; border-radius:2px; background:var(--line); transition:background-color 300ms ease, height 400ms var(--ease); }
.rail span.on { background:var(--accent); height:44px; }

/* ---------- 03 in production ---------- */
.prod { align-content:start; padding-top:22vh; }
.prod .h2 { max-width:15ch; }
.cases { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-top:72px; }
.case { position:relative; display:flex; flex-direction:column; padding:clamp(22px, 2.6vw, 34px); border-radius:6px; border:1px solid var(--line); background:var(--bg2); }
.case .k { font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase; color:var(--dim); }
.case h3 { margin-top:14px; font-size:clamp(24px, 2.3vw, 32px); line-height:1.1; letter-spacing:-0.028em; }
.case > p { margin-top:14px; color:var(--soft); font-size:16px; }
.metric { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:auto; padding-top:26px; }
.metric div { display:flex; flex-direction:column; gap:4px; }
.metric strong { font-size:clamp(34px, 3.6vw, 52px); font-weight:600; line-height:1; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.metric span { font-size:13px; color:var(--dim); }
.case .stack { margin-top:20px; }
.case.wide { grid-column:1 / -1; }

/* monitoring demo */
.demo { margin-top:24px; padding:18px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--bg) 50%, transparent); }
.pipe { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; font-size:13.5px; font-weight:560; }
.pipe div { padding-top:10px; border-top:2px solid var(--ink); transition:border-color 300ms ease, color 300ms ease; }
.pipe div.bad { border-color:var(--accent); color:var(--accent-ink); }
.flow { position:relative; height:26px; margin:6px 0; }
.flow::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.pk { position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--ink); animation:pk 2.4s linear infinite; }
.failing .pk:nth-child(3n) { background:var(--accent); animation-name:pkfail; }
@keyframes pk { 0% { left:0; opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes pkfail { 0% { left:0; opacity:0; } 8% { opacity:1; } 60% { left:62%; opacity:1; } 75% { left:62%; opacity:0.15; } 100% { left:62%; opacity:0; } }
.counts { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:8px; font-size:14px; color:var(--soft); font-variant-numeric:tabular-nums; }
.counts b { color:var(--ink); font-weight:600; }
.alert { margin-top:14px; padding:12px 14px; border-radius:10px; border:1px solid var(--accent); font-size:14px; line-height:1.5; }
.alert strong { color:var(--accent-ink); margin-right:8px; }
.alert.ok { border-color:var(--line); }
.alert.ok strong { color:var(--ink); }
.demo .btn-row { margin-top:16px; }

/* A/B demo */
.seg { position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid var(--line); border-radius:11px; }
.seg::before { content:''; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:8px; background:var(--cta); transform:translateX(calc(var(--pos, 1) * 100%)); transition:transform 480ms var(--ease); }
.seg button { position:relative; z-index:1; min-width:84px; min-height:34px; padding:0 16px; border:0; background:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--soft); cursor:pointer; transition:color 250ms ease; }
.seg button[aria-pressed="true"] { color:var(--on-cta); }
.bars { display:grid; gap:16px; margin-top:20px; }
.bars .row { display:flex; justify-content:space-between; margin-bottom:7px; font-size:14px; color:var(--soft); font-variant-numeric:tabular-nums; }
.bars .t { height:3px; border-radius:2px; background:var(--line); overflow:hidden; }
.bars .t i { display:block; height:100%; border-radius:2px; background:var(--accent); transition:width 700ms var(--ease); }
.bars .t i.ink { background:var(--ink); }
.ab-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:24px; }
.ab-head span { font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); }

/* ---------- 04 under the hood ---------- */
.specs { align-content:start; padding-top:22vh; }
.sheet { margin:64px 0 0; max-width:760px; border-top:1px solid var(--line); }
.sheet > div { display:grid; grid-template-columns:minmax(120px, 190px) minmax(0, 1fr); gap:clamp(14px, 3vw, 34px); padding:24px 0; border-bottom:1px solid var(--line); }
.sheet dt { padding-top:3px; font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase; color:var(--dim); }
.sheet dd { margin:0; font-size:17px; line-height:1.55; }
.sheet dd span { color:var(--soft); }
.log { margin-top:90px; max-width:760px; }
.log h3 { font-size:clamp(28px, 3vw, 40px); letter-spacing:-0.03em; }
.log ol { margin:30px 0 0; padding:0; list-style:none; border-left:1px solid var(--line); }
.log li { position:relative; padding:0 0 34px 30px; }
.log li::before { content:''; position:absolute; left:-5px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--accent); }
.log li:first-child::before { background:var(--accent); }
.log .v { font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; color:var(--accent-ink); }
.log strong { display:block; margin-top:6px; font-size:19px; font-weight:600; letter-spacing:-0.015em; }
.log .org { display:block; margin-top:2px; font-size:15px; color:var(--dim); }
.log p { margin-top:8px; max-width:600px; font-size:16px; color:var(--soft); }

/* ---------- 05 contact ---------- */
.contact { min-height:110vh; }
.contact h2 { font-size:clamp(46px, 7.6vw, 128px); line-height:0.92; letter-spacing:-0.05em; max-width:11ch; }
.contact .lede { max-width:520px; }
.contact .btn-row { margin-top:38px; }
.foot { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:space-between; padding:28px var(--gutter) 34px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:0.03em; color:var(--dim); background:color-mix(in srgb, var(--bg) 70%, transparent); }
.foot a { text-decoration:none; }
.foot a:hover { color:var(--ink); }

/* ---------- mobile ---------- */
@media (max-width:900px) {
  .scene { padding:14vh var(--gutter); }
  .hero { padding-bottom:9vh; }
  .cue { display:none; }
  .gap { min-height:120vh; padding-top:14vh; }
  .step { display:grid; align-content:end; padding-bottom:12vh; }
  .step .col, .specs .col, .contact .col { padding:22px 16px; margin:0 -16px; border-radius:18px; background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .rail { display:none; }
  .cases { grid-template-columns:1fr; margin-top:48px; }
  .sheet > div { grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .pipe { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sheet, .log { padding:0 2px; }
  .specs .wrap > .sheet, .specs .wrap > .log { background:var(--glass); padding:6px 16px; border-radius:16px; margin-left:-16px; margin-right:-16px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .log { padding:26px 16px 0 !important; }
}

/* ---------- motion + transparency preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-split]:not(.in) .w > span { transform:none; }
  .w > span { transition:none; }
  .js .rv:not(.in) { transform:none; }
  .hero-in > * { animation:rise 1ms forwards; }
  .cue i::after, .pk { animation:none; }
  .marquee .track { transform:none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .case, .chip, .marquee, .step .col { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg); }
}

/* ---------- ask-about-Keith assistant + email popover ---------- */
.om-fab { position:fixed; right:20px; bottom:20px; z-index:25; display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 18px 0 16px; border-radius:12px; border:0; cursor:pointer; background:var(--cta); color:var(--on-cta); font:inherit; font-size:14px; font-weight:600; box-shadow:0 14px 34px -14px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.18); }
.om-fab svg { width:18px; height:18px; flex:none; }
.om-chat { position:fixed; right:20px; bottom:20px; z-index:26; width:min(392px, calc(100vw - 24px)); height:min(580px, calc(100dvh - 40px)); display:flex; flex-direction:column; border-radius:16px; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(28px) saturate(165%); -webkit-backdrop-filter:blur(28px) saturate(165%); border:1px solid var(--line); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 30px 80px -30px rgba(0,0,0,0.65); color:var(--ink); transform-origin:100% 100%; animation:om-pop-in 220ms var(--ease) both; overflow:hidden; }
.om-chat[hidden], .om-fab[hidden], .om-pop[hidden] { display:none; }
@keyframes om-pop-in { from { opacity:0; transform:scale(0.96) translateY(6px); } to { opacity:1; transform:none; } }
@keyframes om-fade { from { opacity:0; } to { opacity:1; } }
@keyframes om-blink { 0%,100% { opacity:1; } 50% { opacity:0.15; } }
.om-chat header { display:flex; align-items:center; gap:10px; padding:14px 14px 12px 18px; border-bottom:1px solid var(--line); }
.om-chat header strong { font-size:15px; font-weight:650; flex:1; }
.om-chat header .om-left { font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.om-x { width:32px; height:32px; border-radius:8px; border:0; background:transparent; color:var(--soft); cursor:pointer; display:grid; place-items:center; }
.om-x svg { width:16px; height:16px; }
.om-log { flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.om-b { max-width:88%; padding:10px 13px; border-radius:16px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; animation:om-fade 200ms ease both; }
.om-b.bot { align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:6px; }
.om-b.me { align-self:flex-end; background:var(--cta); color:var(--on-cta); border-bottom-right-radius:6px; }
.om-b.note { align-self:stretch; max-width:none; background:transparent; border:1px dashed var(--line); color:var(--soft); font-size:13.5px; }
.om-typing span { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--dim); animation:om-blink 1.1s ease-in-out infinite; }
.om-typing span:nth-child(2) { animation-delay:150ms; } .om-typing span:nth-child(3) { animation-delay:300ms; }
.om-gate { display:flex; flex-direction:column; gap:8px; align-self:stretch; }
.om-gate label { font-size:12.5px; color:var(--soft); }
.om-in { width:100%; height:42px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:16px; font-family:var(--sans); }
.om-in::placeholder { color:var(--dim); }
.om-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.om-btn { height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.om-btn.primary { background:var(--cta); border-color:var(--cta); color:var(--on-cta); }
.om-row { display:flex; gap:8px; flex-wrap:wrap; }
.om-chips { display:flex; gap:6px; flex-wrap:wrap; padding:6px 16px 10px; }
.om-chip { border:1px solid var(--line); background:transparent; color:var(--soft); border-radius:8px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; }
.om-chip .om-ai { margin-left:6px; font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:var(--accent-ink); }
.om-form { display:flex; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--line); }
.om-form .om-in { flex:1; }
.om-send { width:42px; height:42px; border-radius:10px; border:0; background:var(--cta); color:var(--on-cta); cursor:pointer; display:grid; place-items:center; flex:none; }
.om-send svg { width:18px; height:18px; }
.om-send[disabled], .om-in[disabled] { opacity:0.45; cursor:not-allowed; }
.om-pop { position:fixed; z-index:27; width:300px; padding:16px; border-radius:14px; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%); border:1px solid var(--line); box-shadow:0 26px 70px -28px rgba(0,0,0,0.6); color:var(--ink); animation:om-pop-in 180ms var(--ease) both; }
.om-pop h4 { margin:0 0 2px; font-size:15px; font-weight:650; }
.om-pop p { margin:0 0 12px; font-size:14px; color:var(--soft); user-select:all; }
.om-pop .om-list { display:flex; flex-direction:column; gap:6px; }
.om-pop .om-btn { justify-content:flex-start; width:100%; }
@media (max-width:720px) {
  .om-pop { left:12px !important; right:12px; top:auto !important; bottom:12px; width:auto; }
  .om-chat { right:12px; bottom:12px; }
  .om-fab { right:14px; bottom:14px; width:54px; height:54px; padding:0; justify-content:center; border-radius:14px; }
  .om-fab span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .om-fab svg { width:22px; height:22px; }
}
@media (hover:hover) and (pointer:fine) { .om-chip:hover { border-color:var(--accent); color:var(--ink); } .om-btn:not(.primary):hover { border-color:var(--accent); } .om-x:hover { background:var(--panel); } }
@media (prefers-reduced-motion: reduce) { .om-chat, .om-pop { animation:om-fade 160ms ease both; } .om-typing span { animation:none; } }