/* Parotia · parotia.app · shared styles */
[hidden]{display:none!important}

:root,[data-theme=dark]{
  --bg:oklch(0.155 0 0);
  --app:oklch(0.135 0 0);
  --card:oklch(0.18 0 0);
  --surface-2:oklch(0.225 0 0);
  --fg:oklch(0.965 0.003 85);
  --fg-hover:oklch(0.86 0.003 85);
  --muted:oklch(0.76 0.004 85);
  --faint:oklch(0.63 0.004 85);
  --border:oklch(1 0 0 / 0.08);
  --border-2:oklch(1 0 0 / 0.16);
  --accent:oklch(0.72 0.19 48);
  --ok:oklch(0.78 0.15 155);
  --warn:oklch(0.84 0.14 85);
  --bad:oklch(0.74 0.16 25);
  --bar:oklch(0.66 0.035 250);
  --bar-dim:oklch(0.45 0.02 250);
  --track:oklch(1 0 0 / 0.08);
  --glow:oklch(1 0 0 / 0.07);
  --shadow:0 40px 100px -30px oklch(0 0 0 / 0.7);
  --font-display:"Instrument Sans",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:oklch(0.99 0 0);
  --app:oklch(0.975 0 0);
  --card:oklch(1 0 0);
  --surface-2:oklch(0.94 0 0);
  --fg:oklch(0.17 0 0);
  --fg-hover:oklch(0.32 0 0);
  --muted:oklch(0.42 0 0);
  --faint:oklch(0.5 0 0);
  --border:oklch(0 0 0 / 0.08);
  --border-2:oklch(0 0 0 / 0.15);
  --accent:oklch(0.62 0.2 45);
  --ok:oklch(0.52 0.14 155);
  --warn:oklch(0.55 0.13 75);
  --bad:oklch(0.55 0.19 25);
  --bar:oklch(0.62 0.045 250);
  --bar-dim:oklch(0.82 0.02 250);
  --track:oklch(0 0 0 / 0.07);
  --glow:oklch(0 0 0 / 0.04);
  --shadow:0 40px 90px -40px oklch(0.2 0.02 250 / 0.35);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--font-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Brand lockup: mark B + dome-dot wordmark (from the logo sheet) */
.lk{display:inline-flex;align-items:center;gap:.28em;font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1}
.lk svg{height:.82em;width:1.25em;flex:none;transform:translateY(-.04em)}
.ı{position:relative;display:inline-block}
.ı::after{content:"";position:absolute;left:50%;top:.1em;width:.25em;height:.125em;transform:translateX(-50%);background:currentColor;border-radius:.125em .125em 0 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:10px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:500 15px/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--fg-hover);border-color:var(--fg-hover);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--border-2)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--fg)}
.btn.sm{height:38px;padding:0 14px;font-size:14px;border-radius:9px}
.btn[disabled]{opacity:.55;cursor:progress}
.link{color:var(--fg);border-bottom:1px solid var(--border-2);padding-bottom:2px;transition:border-color .15s}
.link:hover{border-color:var(--fg)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--fg)}
.icon-btn svg{width:18px;height:18px}
.i-moon{display:none}
[data-theme=light] .i-sun{display:none}
[data-theme=light] .i-moon{display:block}

/* Header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in oklch,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;font-size:24px;padding:4px 2px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links .tl{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:14.5px}
.nav-links .tl:hover,.nav-links .tl[aria-current=page]{color:var(--fg);background:var(--surface-2)}
.nav-links .btn{margin-left:8px}
.menu-btn{display:none}
.menu-panel{border-top:1px solid var(--border)}
.menu-panel .wrap{display:grid;padding-top:8px;padding-bottom:16px}
.menu-panel a,.menu-panel button{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 4px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;font-size:16px;cursor:pointer}
.menu-panel span{color:var(--muted);font:400 13px var(--font-mono)}

/* Type */
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kicker i{width:12px;height:6px;border-radius:6px 6px 0 0;background:var(--faint);flex:none}
.kicker.hot i{background:var(--accent)}
.display{font:600 clamp(44px,7.4vw,96px)/.98 var(--font-display);letter-spacing:-.04em;text-wrap:balance}
.tt{font:600 clamp(30px,4.2vw,50px)/1.06 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.tt em,.display em{font-style:normal;color:var(--faint);display:block}
.sub{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted);max-width:56ch;text-wrap:pretty}
.copy{color:var(--muted);text-wrap:pretty}
.note{font:400 11.5px/1.5 var(--font-mono);color:var(--faint);letter-spacing:.02em}

/* Hero */
.hero{padding:104px 0 0}
.hero-copy{max-width:900px}
.hero .display{margin-top:24px}
.hero .sub{margin-top:24px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-shot{position:relative;margin-top:80px}
.hero-shot::before{content:"";position:absolute;left:8%;right:8%;top:-120px;height:420px;background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);pointer-events:none;z-index:-1}
.hero-shot .note{margin-top:14px}

/* Feature rows */
.feature{padding:144px 0 0}
.f-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:end;margin:22px 0 48px}
.f-head .copy{max-width:46ch}
.f-head .link{display:inline-block;margin-top:18px;font-size:15px}

/* Closing band */
.cta{margin-top:160px;padding:120px 0 128px;border-top:1px solid var(--border);text-align:center}
.cta .tt{max-width:820px;margin:0 auto}
.cta .actions{justify-content:center;margin-top:40px}
.cta .note{margin-top:20px}

/* Footer */
.foot{border-top:1px solid var(--border);padding:56px 0 40px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand p{margin-top:12px;color:var(--muted);font-size:14px}
.foot-links{display:flex;gap:6px 28px;flex-wrap:wrap;align-items:flex-start}
.foot-links a{color:var(--muted);font-size:14.5px;padding:4px 0}
.foot-links a:hover{color:var(--fg)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--border);font:400 12.5px var(--font-mono);color:var(--faint)}
.legal a:hover{color:var(--fg)}

/* ===== Product UI mockups ===== */
.frame{background:var(--app);border:1px solid var(--border-2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ui{font:400 13px/1.45 var(--font-body);color:var(--fg);text-align:left}
.ui .mono{font-size:12px}
.ui-top{display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;border-bottom:1px solid var(--border);white-space:nowrap}
.ui-top .lk{font-size:19px}
.ui-top .sl{color:var(--faint)}
.pill{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap}
.ui-ws{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.ui-ws::before{content:"";width:4px;height:4px;background:var(--fg)}
.ui-top-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.ui-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);border-radius:7px;padding:5px 10px;font-size:12px;white-space:nowrap}
.ui-btn svg{width:13px;height:13px}
.ui-body{display:grid;grid-template-columns:200px minmax(0,1fr)}
.ui-side{border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.ui-grp{font:500 10.5px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:4px 10px 12px}
.ui-nav{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:7px;color:var(--muted)}
.ui-nav.on{background:var(--card);color:var(--fg);box-shadow:inset 2px 0 0 var(--fg)}
.ui-nav small{font:400 10px var(--font-mono);letter-spacing:.06em;color:var(--faint)}
.ui-side hr{border:0;border-top:1px solid var(--border);margin:10px 4px}
.ui-side-foot{margin-top:auto;border-top:1px solid var(--border);padding:14px 10px 2px;display:grid;gap:5px}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.ui-main{padding:26px 28px 28px;min-width:0}
.ui-title{font:600 26px/1.1 var(--font-display);letter-spacing:-.02em}
.ui-meta{display:flex;gap:6px 14px;flex-wrap:wrap;color:var(--muted);margin:8px 0 20px;align-items:center}
.ui-card{border:1px solid var(--border);border-radius:10px;background:var(--card);min-width:0}
.ui-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:15px 18px;border-bottom:1px solid var(--border)}
.ui-card-h b{display:block;font:600 15px/1.3 var(--font-display);letter-spacing:-.01em}
.ui-card-h span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ui-card-f{padding:10px 18px;border-top:1px solid var(--border);font:400 11px/1.4 var(--font-mono);color:var(--faint);letter-spacing:.03em}
.legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12px;color:var(--muted);flex:none}
.legend span{display:inline-flex;align-items:center;gap:7px;margin:0}
.legend .lb::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--bar)}
.legend .ll::before{content:"";width:14px;height:2px;background:var(--accent)}
.ui-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);min-height:52px}
.crumbs{display:flex;gap:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--fg);font-weight:500}
.chip{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:6px;padding:2px 8px;font-size:11.5px;color:var(--fg);white-space:nowrap}

/* Combo chart: CSS bars + SVG line */
.chart{padding:34px 50px 10px 58px}
.plot{position:relative;height:260px;background:linear-gradient(var(--border) 1px,transparent 1px) 0 0/100% 20%;border-bottom:1px solid var(--border-2)}
.yax{position:absolute;top:0;bottom:0;width:44px;font:400 10.5px/1 var(--font-mono);color:var(--faint)}
.yax.l{right:calc(100% + 10px);text-align:right}
.yax.r{left:calc(100% + 10px);color:var(--accent)}
.yax span{position:absolute;bottom:calc(var(--p) * 1%);transform:translateY(50%)}
.yax.l span{right:0}
.yax.r span{left:0}
.bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);align-items:end}
.bars i{justify-self:center;width:48%;height:calc(var(--h) * 1%);background:var(--bar);border-radius:3px 3px 0 0}
.bars i.dim{background:var(--bar-dim)}
.edge-mark{position:absolute;top:-8px;bottom:0;left:calc(100% / 6);border-left:1px dashed var(--muted)}
.edge-mark span{position:absolute;top:0;left:7px;font:400 11px/1 var(--font-mono);white-space:nowrap;color:var(--fg)}
.line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pt{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--y) * 1%);width:9px;height:9px;margin:0 0 -4.5px -4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.pt.open{background:var(--card);border:2px solid var(--accent)}
.pt::after{content:attr(data-v);position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font:500 11px/1 var(--font-mono);color:var(--fg);background:var(--card);padding:3px 5px;border-radius:4px;white-space:nowrap}
.xax{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;font:400 11px var(--font-mono);color:var(--faint);padding-top:10px}

/* Stat tiles */
.ui-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.stat{border:1px solid var(--border);border-radius:10px;background:var(--card);padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat b{font-weight:500}
.stat .n{font:600 34px/1.1 var(--font-display);letter-spacing:-.035em;margin-top:6px}
.stat .d{font-size:12px;color:var(--muted)}
.stat .f{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font:400 10.5px var(--font-mono);color:var(--faint);letter-spacing:.03em}
.stat .d + .f{margin-top:12px}
.up{color:var(--ok)}

/* Segmented control */
.seg{display:inline-flex;border:1px solid var(--border-2);border-radius:8px;padding:2px;gap:2px}
.seg button{border:0;background:none;color:var(--muted);font:500 12px/1 var(--font-body);padding:0 12px;min-height:30px;border-radius:6px;cursor:pointer}
.seg button:hover{color:var(--fg);background:var(--surface-2)}
.seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}

@media (max-width:1040px){
  .ui-body{grid-template-columns:minmax(0,1fr)}
  .ui-side{display:none}
  .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-head{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .nav-links .tl,.nav-links > [data-theme-toggle]{display:none}
  .menu-btn{display:inline-grid;width:44px;height:44px}
  .nav-links .btn{margin-left:0}
  .brand{font-size:22px}
  .hero{padding-top:64px}
  .hero-shot{margin-top:52px}
  .feature{padding-top:104px}
  .cta{margin-top:112px;padding:88px 0 96px}
  .actions .btn{flex:1 1 auto}
  .hide-s{display:none!important}
  .ui-top{padding:0 14px;gap:10px}
  .ui-main{padding:18px 14px 16px}
  .ui-title{font-size:22px}
  .ui-card-h{flex-direction:column;gap:10px;padding:14px}
  .chart{padding:28px 36px 8px 40px}
  .plot{height:190px}
  .yax{width:34px;font-size:9.5px}
  .yax.l{right:calc(100% + 6px)}
  .yax.r{left:calc(100% + 6px)}
  .bars i{width:58%}
  .pt::after{font-size:10px;padding:2px 3px}
  .xax{font-size:10px}
  .stat{padding:13px}
  .stat .n{font-size:28px}
  .ui-card-f{padding:10px 14px}
  .ui-bar{padding:10px 14px}
  .seg button{min-height:40px;padding:0 14px}
}
@media (min-width:761px){.menu-panel{display:none!important}}
@media (max-width:420px){
  .nav-links .btn.sm{padding:0 12px;font-size:13.5px}
  .stat .d{font-size:11.5px}
}