/* Hexode design system (v1, 07/10/2026). Base: the Neruvo design system v2.1 (Tella/design-system, 06/10/2026),
   re-tokened for the Hexode brand. Brand: ink, paper and one warm light (the glow of the symbol, #2540E6).
   The glow is the brand; amber draws lines and focus on paper. Green, orange and pink only exist inside the product as status.
   Theme follows the system, or data-theme="dark|light" on <html>. Fonts: Funnel Display + Funnel Sans + JetBrains Mono (OFL). */

@font-face{font-family:"Funnel Display";src:url(fonts/FunnelDisplay.ttf) format("truetype");font-weight:300 800;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(fonts/FunnelSans.ttf) format("truetype");font-weight:300 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono.ttf) format("truetype");font-weight:100 800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* brand: the three colors of the symbol, plus the amber that draws on paper */
  --hx-ink:#050608;--hx-paper:#F2F4F7;--hx-key:#2540E6;--hx-amber:#2540E6;--hx-silver:#9AA1AD;--hx-silver-light:#C9CED6;--hx-blue-light:#8EA2FF;--hx-blue-night:#0B1440;--hx-corner:#050608;
  /* status, product only (never brand): decision/ok, task/warn, attention/error */
  --hx-decision:#6FD39A;--hx-task:#F5A25D;--hx-attention:#F28AB5;
  /* neutrals, light (paper) */
  --hx-bg:#F2F4F7;--hx-surface:#FFFFFF;--hx-surface-2:#E8EBF0;--hx-surface-3:#DDE1E8;
  --hx-line:#D9DDE4;--hx-line-2:#BCC2CC;
  --hx-text:#050608;--hx-text-2:#4B5260;--hx-text-3:#6B7280;
  --hx-error:#B3261E;--hx-on-key:#FFFFFF;
  --hx-shadow:0 1px 2px rgb(5 6 8/.05),0 18px 40px -22px rgb(5 6 8/.26);--hx-shadow-hi:0 1px 2px rgb(5 6 8/.05),0 26px 50px -22px rgb(5 6 8/.36);
  --hx-card-line:var(--hx-line);--hx-glass:linear-gradient(155deg,rgb(255 255 255/.72),rgb(255 255 255/.46));--hx-glass-line:rgb(5 6 8/.08);
  --hx-scrim:rgba(5,6,8,.45);
  /* type */
  --hx-display:"Funnel Display","Funnel Sans",ui-sans-serif,system-ui,sans-serif;
  --hx-sans:"Funnel Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hx-text-xs:12px;--hx-text-sm:14px;--hx-text-md:16px;--hx-text-lg:18px;--hx-text-xl:24px;--hx-text-2xl:32px;--hx-text-3xl:48px;
  /* space: multiples of 4 */
  --hx-1:4px;--hx-2:8px;--hx-3:12px;--hx-4:16px;--hx-5:24px;--hx-6:32px;--hx-7:48px;--hx-8:64px;
  /* shape: sharp, like a viewfinder (blue brand, 06/11/2026) */
  --hx-radius-sm:3px;--hx-radius-md:6px;--hx-radius-lg:10px;--hx-radius-pill:999px;--hx-radius-icon:22.5%;
  /* motion: touch 140, state 240, entrance 900, the connection gesture 700 */
  --hx-ease:cubic-bezier(.23,1,.32,1);--hx-touch:140ms;--hx-state:240ms;--hx-enter:900ms;--hx-stroke:700ms;
  --hx-target:44px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --hx-bg:#050608;--hx-surface:#0D0F13;--hx-surface-2:#15181E;--hx-surface-3:#1D2129;
  --hx-line:#232730;--hx-line-2:#353A45;
  --hx-text:#F2F4F7;--hx-text-2:#C9CED6;--hx-text-3:#9AA1AD;--hx-error:#FF8A80;--hx-amber:#8EA2FF;--hx-corner:#C9CED6;
  --hx-shadow:0 0 0 1px rgba(242,244,247,.06),0 16px 40px -16px rgba(0,0,0,.7);--hx-shadow-hi:0 0 0 1px rgba(242,244,247,.1),0 24px 56px -20px rgba(0,0,0,.8);--hx-card-line:rgb(242 244 247/.08);--hx-glass:linear-gradient(155deg,rgb(255 255 255/.10),rgb(255 255 255/.03) 40%,rgb(255 255 255/.07));--hx-glass-line:rgb(255 255 255/.14);--hx-scrim:rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme=dark]{
  --hx-bg:#050608;--hx-surface:#0D0F13;--hx-surface-2:#15181E;--hx-surface-3:#1D2129;
  --hx-line:#232730;--hx-line-2:#353A45;
  --hx-text:#F2F4F7;--hx-text-2:#C9CED6;--hx-text-3:#9AA1AD;--hx-error:#FF8A80;--hx-amber:#8EA2FF;--hx-corner:#C9CED6;
  --hx-shadow:0 0 0 1px rgba(242,244,247,.06),0 16px 40px -16px rgba(0,0,0,.7);--hx-shadow-hi:0 0 0 1px rgba(242,244,247,.1),0 24px 56px -20px rgba(0,0,0,.8);--hx-card-line:rgb(242 244 247/.08);--hx-glass:linear-gradient(155deg,rgb(255 255 255/.10),rgb(255 255 255/.03) 40%,rgb(255 255 255/.07));--hx-glass-line:rgb(255 255 255/.14);--hx-scrim:rgba(0,0,0,.6);color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body.hx{margin:0;background:var(--hx-bg);color:var(--hx-text);font:var(--hx-text-md)/1.6 var(--hx-sans);-webkit-font-smoothing:antialiased}
.hx :focus-visible{outline:2px solid var(--hx-text);outline-offset:3px;border-radius:4px}
.hx-mono{font-family:var(--hx-mono);font-variant-numeric:tabular-nums}
.hx-time{font:var(--hx-text-sm)/1.4 var(--hx-mono);color:var(--hx-text-3);font-variant-numeric:tabular-nums}
.hx-h1{font-family:var(--hx-display);font-size:var(--hx-text-3xl);line-height:1.05;letter-spacing:-.03em;font-weight:600;margin:0}
.hx-h2{font-family:var(--hx-display);font-size:var(--hx-text-2xl);line-height:1.1;letter-spacing:-.02em;font-weight:600;margin:0}
.hx-h3{font-size:var(--hx-text-xl);line-height:1.2;letter-spacing:-.01em;font-weight:600;margin:0}
.hx-label{font:500 var(--hx-text-xs)/1 var(--hx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-text-3)}
.hx-muted{color:var(--hx-text-2)}

/* ---------- Highlight (the brand gesture) ---------- */
.hx-hl{--c:var(--hx-key);background:linear-gradient(var(--c),var(--c)) no-repeat 0 60%/100% 78%;color:var(--hx-on-key);padding:0 .14em;margin:0 -.04em;
  border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hx-hl[data-pen=decision]{--c:var(--hx-decision)}.hx-hl[data-pen=task]{--c:var(--hx-task)}.hx-hl[data-pen=attention]{--c:var(--hx-attention)}
.hx-hl.is-drawing{background-size:0% 78%;color:inherit;transition:background-size var(--hx-stroke) var(--hx-ease) var(--delay,0ms),color 0ms linear calc(var(--delay,0ms) + 120ms)}
.hx-hl.is-drawing.is-drawn{background-size:100% 78%;color:var(--hx-on-key)}

/* pen chip: the chisel tip */
.hx-pen{display:inline-block;width:28px;height:12px;background:var(--c,var(--hx-key));clip-path:polygon(0 0,calc(100% - 7px) 0,100% 100%,7px 100%);flex:none}
.hx-pen[data-pen=decision]{--c:var(--hx-decision)}.hx-pen[data-pen=task]{--c:var(--hx-task)}.hx-pen[data-pen=attention]{--c:var(--hx-attention)}

/* ---------- Buttons ---------- */
.hx-btn{--h:var(--hx-target);display:inline-flex;align-items:center;justify-content:center;gap:var(--hx-2);height:var(--h);min-width:var(--h);padding:0 var(--hx-5);
  border-radius:var(--hx-radius-sm);border:1px solid transparent;font:500 14px/1 var(--hx-sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--hx-touch) var(--hx-ease),background var(--hx-state) var(--hx-ease),border-color var(--hx-state) var(--hx-ease),filter var(--hx-touch) var(--hx-ease),box-shadow 380ms var(--hx-ease),color var(--hx-state) var(--hx-ease)}
.hx-btn:active{transform:scale(.98)}
.hx-btn:disabled,.hx-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
/* the brand button: thin border + two bracket corners (top-right, bottom-left) that run and close the frame on hover */
.hx-btn--primary,.hx-btn--blue{position:relative;--h:52px;padding:0 34px;background:var(--hx-bg);color:var(--hx-text);border-color:color-mix(in srgb,var(--hx-corner) 38%,transparent)}
.hx-btn--primary::before,.hx-btn--primary::after,.hx-btn--blue::before,.hx-btn--blue::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--hx-corner);pointer-events:none;
  transition:width .35s var(--hx-ease),height .35s var(--hx-ease),border-color .3s var(--hx-ease)}
.hx-btn--primary::before,.hx-btn--blue::before{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;border-top-right-radius:var(--hx-radius-sm)}
.hx-btn--primary::after,.hx-btn--blue::after{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:var(--hx-radius-sm)}
.hx-btn--primary:is(:hover,:focus-visible)::before,.hx-btn--primary:is(:hover,:focus-visible)::after,.hx-btn--blue:is(:hover,:focus-visible)::before,.hx-btn--blue:is(:hover,:focus-visible)::after{width:calc(50% + 1px);height:calc(100% + 2px);border-color:var(--hx-amber)}
.hx-btn--primary:active,.hx-btn--blue:active{transform:translateY(1px)}
.hx-btn--blue{background:var(--hx-key);color:#fff;border-color:transparent;--hx-corner:var(--hx-blue-light)}
.hx-btn--blue:is(:hover,:focus-visible)::before,.hx-btn--blue:is(:hover,:focus-visible)::after{border-color:#fff}
.hx-btn--secondary{background:var(--hx-surface);color:var(--hx-text);border-color:var(--hx-line-2)}
.hx-btn--secondary:hover{border-color:var(--hx-text-3)}
.hx-btn--ghost{background:transparent;color:var(--hx-text)}
.hx-btn--ghost:hover{background:var(--hx-surface-2)}
.hx-btn--ink{background:var(--hx-text);color:var(--hx-bg)}
.hx-btn--ink:hover{filter:brightness(1.15)}
.hx-btn--danger{background:transparent;color:var(--hx-error);border-color:color-mix(in srgb,var(--hx-error) 45%,transparent)}
.hx-btn--danger:hover{background:color-mix(in srgb,var(--hx-error) 8%,transparent)}
.hx-btn--sm{--h:36px;padding:0 var(--hx-4);font-size:12px}
.hx-btn--icon{padding:0;width:var(--h)}
.hx-btn .hx-mark{height:18px}
.hx-btn.is-busy{pointer-events:none}
@media (pointer:coarse){.hx-btn--sm{--h:44px}}

/* ---------- Fields ---------- */
.hx-field{display:grid;gap:var(--hx-2)}
.hx-field>label{font-size:var(--hx-text-sm);font-weight:600}
.hx-field .hx-help{font-size:var(--hx-text-sm);color:var(--hx-text-3)}
.hx-field.has-error .hx-help{color:var(--hx-error)}
.hx-input{width:100%;height:var(--hx-target);padding:0 var(--hx-4);border-radius:var(--hx-radius-md);border:1px solid var(--hx-line-2);background:var(--hx-surface);
  color:var(--hx-text);font:var(--hx-text-md) var(--hx-sans);transition:border-color var(--hx-state) var(--hx-ease),box-shadow var(--hx-state) var(--hx-ease)}
textarea.hx-input{height:auto;min-height:112px;padding:var(--hx-3) var(--hx-4);resize:vertical;line-height:1.5}
.hx-input::placeholder{color:var(--hx-text-3)}
.hx-input:hover{border-color:var(--hx-text-3)}
.hx-input:focus{outline:none;border-color:var(--hx-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-key) 60%,transparent)}
.hx-field.has-error .hx-input{border-color:var(--hx-error)}
.hx-search{position:relative}
.hx-search .hx-input{padding-left:44px}
.hx-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--hx-text-3);pointer-events:none}
select.hx-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--hx-text-2) 50%),linear-gradient(135deg,var(--hx-text-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}

/* toggle */
.hx-toggle{display:inline-flex;align-items:center;gap:var(--hx-3);cursor:pointer;min-height:var(--hx-target);font-size:var(--hx-text-md)}
.hx-toggle input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--hx-surface-3);border:1px solid var(--hx-line-2);position:relative;margin:0;cursor:pointer;
  transition:background var(--hx-state) var(--hx-ease),border-color var(--hx-state) var(--hx-ease)}
.hx-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--hx-text);transition:transform var(--hx-state) var(--hx-ease)}
.hx-toggle input:checked{background:var(--hx-key);border-color:var(--hx-key)}
.hx-toggle input:checked::after{transform:translateX(18px);background:var(--hx-ink)}
.hx-toggle input:active::after{width:24px}

/* segmented tabs */
.hx-tabs{display:inline-flex;gap:var(--hx-1);padding:var(--hx-1);background:var(--hx-surface-2);border-radius:var(--hx-radius-md)}
.hx-tabs button{border:0;background:transparent;color:var(--hx-text-2);font:500 var(--hx-text-sm) var(--hx-sans);padding:0 var(--hx-4);height:36px;border-radius:var(--hx-radius-sm);cursor:pointer;
  transition:background var(--hx-state) var(--hx-ease),color var(--hx-state) var(--hx-ease),transform var(--hx-touch) var(--hx-ease)}
.hx-tabs button:hover{color:var(--hx-text)}
.hx-tabs button:active{transform:scale(.97)}
.hx-tabs button[aria-selected=true]{background:var(--hx-surface);color:var(--hx-text);box-shadow:var(--hx-shadow)}
@media (pointer:coarse){.hx-tabs button{height:44px}}

/* tags */
.hx-tag{display:inline-flex;align-items:center;gap:var(--hx-2);height:28px;padding:0 var(--hx-3);border-radius:var(--hx-radius-pill);border:1px solid var(--hx-line-2);
  font:500 var(--hx-text-sm)/1 var(--hx-sans);color:var(--hx-text-2);background:var(--hx-surface)}
.hx-tag .hx-pen{width:20px;height:9px}
button.hx-tag{cursor:pointer;transition:border-color var(--hx-state) var(--hx-ease),opacity var(--hx-state) var(--hx-ease),transform var(--hx-touch) var(--hx-ease)}
button.hx-tag:hover{border-color:var(--hx-text-3)}
button.hx-tag:active{transform:scale(.97)}
button.hx-tag[aria-pressed=false]{opacity:.45}
@media (pointer:coarse){button.hx-tag{height:44px}}

/* ---------- Surfaces ---------- */
.hx-card{background:var(--hx-surface);border:1px solid var(--hx-card-line);border-radius:var(--hx-radius-lg);padding:var(--hx-5);box-shadow:var(--hx-shadow)}
a.hx-card,button.hx-card{display:block;text-align:left;color:inherit;text-decoration:none;cursor:pointer;width:100%;font:inherit;
  transition:border-color var(--hx-state) var(--hx-ease),box-shadow var(--hx-state) var(--hx-ease),transform var(--hx-touch) var(--hx-ease)}
a.hx-card:hover,button.hx-card:hover{box-shadow:var(--hx-shadow-hi)}
a.hx-card:active,button.hx-card:active{transform:scale(.99)}

/* meeting row */
.hx-meeting{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hx-4);align-items:center}
.hx-meeting .hx-meeting-date{display:grid;justify-items:center;width:48px;font:600 var(--hx-text-xl)/1 var(--hx-sans)}
.hx-meeting .hx-meeting-date small{font:500 var(--hx-text-xs) var(--hx-mono);color:var(--hx-text-3);text-transform:uppercase;margin-top:4px}
.hx-meeting b{display:block;font-size:var(--hx-text-md)}
.hx-meeting .hx-meeting-meta{display:flex;gap:var(--hx-3);flex-wrap:wrap;font-size:var(--hx-text-sm);color:var(--hx-text-3);margin-top:2px}
.hx-pens{display:flex;gap:var(--hx-1);align-items:center}

/* transcript line */
.hx-line{display:grid;grid-template-columns:56px 96px 1fr;gap:var(--hx-3);padding:var(--hx-2) 0;border-bottom:1px dashed var(--hx-line);font-size:var(--hx-text-md)}
.hx-line:last-child{border-bottom:0}
.hx-line .hx-time{padding-top:3px}
.hx-line .hx-who{font-size:var(--hx-text-sm);color:var(--hx-text-3);padding-top:2px}
button.hx-time{border:0;background:transparent;text-align:left;cursor:pointer;padding:3px 0 0;border-radius:4px;transition:color var(--hx-touch) var(--hx-ease)}
button.hx-time:hover{color:var(--hx-text)}
@media (max-width:640px){.hx-line{grid-template-columns:48px 1fr}.hx-line .hx-who{display:none}}

/* key point / feedback item */
.hx-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hx-3);align-items:start;font-size:var(--hx-text-md)}
.hx-item .hx-pen{margin-top:6px}

/* score */
.hx-score{display:grid;gap:var(--hx-2)}
.hx-score-head{display:flex;justify-content:space-between;gap:var(--hx-3);font-size:var(--hx-text-md);color:var(--hx-text-2)}
.hx-score-head b{font:600 var(--hx-text-sm) var(--hx-mono);color:var(--hx-text)}
.hx-meter{height:10px;border-radius:999px;background:var(--hx-surface-3);overflow:hidden}
.hx-meter>i{display:block;height:100%;width:100%;background:var(--c,var(--hx-key));border-radius:999px;transform-origin:left;transform:scaleX(var(--v,0));transition:transform var(--hx-enter) var(--hx-ease)}

/* tip (what to practise next) */
.hx-tip{border-left:3px solid var(--hx-key);padding:var(--hx-1) var(--hx-4);color:var(--hx-text-2)}

/* avatars */
.hx-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hx-surface-3);color:var(--hx-text);font:600 var(--hx-text-sm) var(--hx-sans);flex:none}
.hx-mentor{width:40px;height:40px;border-radius:var(--hx-radius-icon);display:grid;place-items:center;background:var(--hx-ink);flex:none}
.hx-mentor .hx-mark{height:21px;color:var(--c,var(--hx-key))}

/* ---------- The living mark: Neruvo's presence where the AI is working ---------- */
.hx-mark{display:block;height:24px;width:auto;color:var(--hx-text);overflow:visible}
.hx-mark .bar{transform-box:fill-box;transform-origin:50% 100%;transition:fill var(--hx-state) var(--hx-ease)}
.hx-mark .bar{fill:currentColor}
.hx-mark[data-state=listening] .bar{animation:hx-listen 1.6s var(--hx-ease) infinite}
.hx-mark[data-state=listening] .bar:nth-of-type(2){animation-delay:-.8s}
.hx-mark[data-state=thinking] .bar{fill:url(#hx-sweep)}
.hx-mark[data-state=done] .bar{fill:var(--hx-key)}
.hx-mark[data-state=error] .bar{fill:var(--hx-attention)}
@keyframes hx-listen{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
.hx-presence{display:inline-flex;align-items:center;gap:var(--hx-3);font-size:var(--hx-text-md);color:var(--hx-text-2)}
.hx-presence .hx-mark{height:28px}
.hx-shimmer{background:linear-gradient(90deg,var(--hx-text-3) 0%,var(--hx-text) 45%,var(--hx-text-3) 90%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hx-shimmer 2.4s linear infinite}
@keyframes hx-shimmer{to{background-position:-200% 0}}

/* recording pill (the recorder) */
.hx-rec{display:inline-flex;align-items:center;gap:var(--hx-3);height:44px;padding:0 var(--hx-2) 0 var(--hx-4);border-radius:var(--hx-radius-pill);background:var(--hx-ink);color:var(--hx-paper);
  font:500 var(--hx-text-sm) var(--hx-sans);box-shadow:var(--hx-shadow)}
.hx-rec .hx-mark{height:20px;color:var(--hx-key)}
.hx-rec .hx-time{color:var(--hx-paper)}
.hx-rec button{border:0;height:32px;padding:0 var(--hx-3);border-radius:var(--hx-radius-pill);background:rgba(242,244,247,.12);color:var(--hx-paper);font:600 var(--hx-text-sm) var(--hx-sans);cursor:pointer;
  transition:background var(--hx-touch) var(--hx-ease),transform var(--hx-touch) var(--hx-ease)}
.hx-rec button:hover{background:rgba(242,244,247,.2)}.hx-rec button:active{transform:scale(.96)}
@media (pointer:coarse){.hx-rec button{height:40px}}

/* progress with time left and cancel (waits over 10 s) */
.hx-progress{display:grid;gap:var(--hx-2)}
.hx-progress-head{display:flex;justify-content:space-between;align-items:center;gap:var(--hx-3);font-size:var(--hx-text-sm)}
.hx-progress-bar{height:6px;border-radius:999px;background:var(--hx-surface-3);overflow:hidden}
.hx-progress-bar>i{display:block;height:100%;background:var(--hx-key);width:var(--p,0%);transition:width var(--hx-state) linear}

/* empty state */
.hx-empty{display:grid;justify-items:center;text-align:center;gap:var(--hx-3);padding:var(--hx-7) var(--hx-5)}
.hx-empty .hx-mark{height:40px;color:var(--hx-text-3)}
.hx-empty p{margin:0;max-width:40ch;color:var(--hx-text-2)}

/* toast */
.hx-toasts{position:fixed;left:50%;bottom:var(--hx-5);transform:translateX(-50%);display:grid;gap:var(--hx-2);z-index:50;width:min(480px,calc(100% - 32px))}
.hx-toast{display:flex;align-items:center;gap:var(--hx-3);padding:var(--hx-3) var(--hx-3) var(--hx-3) var(--hx-4);border-radius:var(--hx-radius-md);background:var(--hx-text);color:var(--hx-bg);
  font-size:var(--hx-text-sm);box-shadow:var(--hx-shadow);animation:hx-toast-in var(--hx-state) var(--hx-ease)}
.hx-toast span{flex:1}
.hx-toast button{border:0;background:transparent;color:var(--hx-key);font:600 var(--hx-text-sm) var(--hx-sans);cursor:pointer;height:32px;padding:0 var(--hx-2);border-radius:var(--hx-radius-sm)}
:root[data-theme=dark] .hx-toast button{color:#7A5A00}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hx-toast button{color:#7A5A00}}
.hx-toast.is-leaving{opacity:0;transform:translateY(8px);transition:opacity var(--hx-state) var(--hx-ease),transform var(--hx-state) var(--hx-ease)}
@keyframes hx-toast-in{from{opacity:0;transform:translateY(12px)}}

/* dialog */
.hx-dialog{border:0;padding:0;border-radius:var(--hx-radius-lg);background:var(--hx-surface);color:var(--hx-text);box-shadow:var(--hx-shadow);width:min(480px,calc(100% - 32px))}
.hx-dialog::backdrop{background:var(--hx-scrim)}
.hx-dialog[open]{animation:hx-pop var(--hx-state) var(--hx-ease)}
.hx-dialog .hx-dialog-body{padding:var(--hx-5);display:grid;gap:var(--hx-4)}
.hx-dialog .hx-dialog-foot{display:flex;justify-content:flex-end;gap:var(--hx-2);padding:var(--hx-4) var(--hx-5);border-top:1px solid var(--hx-line)}
@keyframes hx-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* entrance */
[data-hx-reveal]{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity var(--hx-enter) var(--hx-ease),transform var(--hx-enter) var(--hx-ease),filter var(--hx-enter) var(--hx-ease)}
[data-hx-reveal].is-in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .hx *,.hx *::before,.hx *::after{animation:none!important;transition:none!important}
  [data-hx-reveal]{opacity:1;transform:none;filter:none}
  .hx-hl.is-drawing{background-size:100% 78%;color:var(--hx-ink)}
}

/* highlight switched off by a pen filter */
.hx-hl.is-off{background-size:0% 78%;color:inherit}
.hx-hl{transition:background-size var(--hx-stroke) var(--hx-ease),color var(--hx-state) var(--hx-ease)}

/* touch targets on narrow screens too (not every phone reports a coarse pointer) */
@media (max-width:640px){
  .hx-btn--sm,.hx-tabs button,button.hx-tag{height:44px;min-height:44px}
  .hx-btn--sm{--h:44px}
  .hx-rec button,.hx-toast button{height:44px;min-width:44px}
  button.hx-time{min-height:44px;min-width:44px}
}


/* ================= v2: material, light and life ================= */

/* section title: one word grifado (the brand's version of an accent word) */
.hx-title{font-family:var(--hx-display);font-size:clamp(32px,5vw,56px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0}
.hx-title-fade{display:block;background:linear-gradient(180deg,var(--hx-text),var(--hx-text-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-num{font:500 var(--hx-text-sm)/1 var(--hx-mono);color:var(--hx-text-3)}

/* stats */
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hx-5)}
.hx-stat b{display:block;font:500 clamp(28px,4vw,40px)/1 var(--hx-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hx-stat span{display:block;margin-top:var(--hx-2);font-size:var(--hx-text-sm);color:var(--hx-text-3)}

/* the night band: ink with a highlighter glow and drifting strokes (ambient, linear, durations that never sync) */
.hx-night{--hx-amber:#8EA2FF;--hx-corner:#C9CED6;--hx-bg:#050608;--hx-surface:#0D0F13;--hx-surface-2:#15181E;--hx-surface-3:#1D2129;--hx-line:#232730;--hx-line-2:#353A45;--hx-text:#F2F4F7;--hx-text-2:#C9CED6;--hx-text-3:#9AA1AD;
  --hx-card-line:rgb(244 242 236/.08);--hx-glass:linear-gradient(155deg,rgb(255 255 255/.10),rgb(255 255 255/.03) 40%,rgb(255 255 255/.07));--hx-glass-line:rgb(255 255 255/.14);
  --hx-shadow:0 0 0 1px rgba(242,244,247,.06),0 16px 40px -16px rgba(0,0,0,.7);
  position:relative;isolation:isolate;overflow:hidden;background:#050608;color:var(--hx-text);color-scheme:dark}
.hx-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 40%,rgb(37 64 230/.22),transparent 70%),radial-gradient(40% 40% at 20% 100%,rgb(11 20 64/.55),transparent 70%)}
.hx-drift{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.5}
.hx-drift i{position:absolute;height:14px;border-radius:2px;background:var(--c,var(--hx-key));opacity:.14;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  width:var(--w,220px);top:var(--y,20%);left:-30%;animation:hx-drift var(--d,28s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes hx-drift{to{transform:translateX(170vw)}}

/* glass: only where something is behind it */
.hx-glass{background:var(--hx-glass);border:1px solid var(--hx-glass-line);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}

/* glass button that fills with highlighter on hover (on the night band) */
.hx-btn--glass{position:relative;overflow:hidden;isolation:isolate;color:var(--hx-text);background:var(--hx-glass);border-color:var(--hx-glass-line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.hx-btn--glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--hx-key);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--hx-ease)}
.hx-btn--glass:hover{color:var(--hx-on-key);border-color:var(--hx-key)}
.hx-btn--glass:hover::after{transform:scaleX(1)}

/* the record button: the one place with a light running around the border */
@property --hx-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes hx-spin{to{--hx-ang:360deg}}
.hx-btn--rec{position:relative;isolation:isolate;background:var(--hx-ink);color:var(--hx-paper);border:0}
.hx-btn--rec::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-2;background:conic-gradient(from var(--hx-ang),transparent 0 62%,var(--hx-key) 82%,transparent 100%);animation:hx-spin 3s linear infinite}
.hx-btn--rec::after{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;background:var(--hx-ink)}
.hx-btn--rec:hover{box-shadow:0 0 44px 4px rgb(37 64 230/.28)}
.hx-btn--rec .hx-rec-dot{width:10px;height:10px;border-radius:2px;background:var(--hx-key);clip-path:polygon(0 0,70% 0,100% 100%,30% 100%)}

/* lit card: one per group */
.hx-card--lit{border-color:color-mix(in srgb,var(--hx-key) 55%,transparent);box-shadow:0 24px 64px -24px rgb(37 64 230/.45),var(--hx-shadow)}
.hx-card--glass{background:var(--hx-glass);border-color:var(--hx-glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none}

/* living mark canvas */
canvas[data-hx-live]{display:block;aspect-ratio:1;color:var(--hx-text);will-change:transform}

/* the AI field: glass, with the mark inside */
.hx-ask{position:relative;display:flex;align-items:center;gap:var(--hx-3);min-height:56px;padding:var(--hx-2) var(--hx-2) var(--hx-2) var(--hx-4);border-radius:var(--hx-radius-pill);
  transition:border-color var(--hx-state) var(--hx-ease),box-shadow var(--hx-state) var(--hx-ease)}
.hx-ask canvas{width:32px;flex:none}
.hx-ask input{flex:1;min-width:0;border:0;background:transparent;color:var(--hx-text);font:var(--hx-text-md) var(--hx-sans);height:40px}
.hx-ask input:focus{outline:none}
.hx-ask input::placeholder{color:var(--hx-text-3)}
.hx-ask:focus-within{border-color:var(--hx-key);box-shadow:0 0 0 4px rgb(37 64 230/.18)}

/* flow: a beam runs along the wire through the four steps */
@keyframes hx-beam{to{stroke-dashoffset:-100}}
.hx-flow{display:grid;gap:var(--hx-4)}
.hx-flow svg{width:100%;height:auto;overflow:visible}
.hx-flow .wire{fill:none;stroke:var(--hx-line-2);stroke-width:2}
.hx-flow .beam{fill:none;stroke:var(--hx-key);stroke-width:3;stroke-linecap:round;stroke-dasharray:12 88;animation:hx-beam 3.6s linear infinite;filter:drop-shadow(0 0 6px rgb(37 64 230/.8))}
.hx-flow .node{fill:var(--hx-surface);stroke:var(--hx-line-2);stroke-width:2}
.hx-flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hx-3);text-align:center}
.hx-flow-steps b{display:block;font-size:var(--hx-text-md)}
.hx-flow-steps span{font-size:var(--hx-text-sm);color:var(--hx-text-3)}

/* accordion: height animated by grid rows, no JS measuring */
.hx-acc{border:1px solid var(--hx-card-line);border-radius:var(--hx-radius-lg);background:var(--hx-surface);box-shadow:var(--hx-shadow)}
.hx-acc+.hx-acc{margin-top:var(--hx-2)}
.hx-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--hx-3);padding:var(--hx-4) var(--hx-5);min-height:56px;font-weight:600}
.hx-acc summary::-webkit-details-marker{display:none}
.hx-acc summary::after{content:"+";font:400 22px/1 var(--hx-sans);color:var(--hx-text-3);transition:transform 300ms var(--hx-ease)}
.hx-acc[open] summary::after{transform:rotate(45deg)}
.hx-acc .hx-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 350ms var(--hx-ease)}
.hx-acc[open] .hx-acc-body{grid-template-rows:1fr}
.hx-acc .hx-acc-body>div{overflow:hidden;padding:0 var(--hx-5)}
.hx-acc[open] .hx-acc-body>div{padding-bottom:var(--hx-4)}
.hx-acc .hx-acc-body p{margin:0;color:var(--hx-text-2)}

/* endless strip with faded edges (where it works: logos, integrations) */
@keyframes hx-run{to{transform:translateX(-50%)}}
.hx-strip{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hx-strip>div{display:flex;gap:var(--hx-3);width:max-content;animation:hx-run 40s linear infinite}
.hx-strip:hover>div{animation-play-state:paused}
.hx-strip span{display:inline-flex;align-items:center;gap:var(--hx-2);height:44px;padding:0 var(--hx-4);border-radius:var(--hx-radius-pill);border:1px solid var(--hx-card-line);background:var(--hx-surface);color:var(--hx-text-2);white-space:nowrap;font-size:var(--hx-text-sm)}

/* header that becomes a glass pill when the page scrolls */
.hx-header{position:sticky;top:var(--hx-3);z-index:20;display:flex;justify-content:center;pointer-events:none}
.hx-header>nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--hx-4);width:100%;max-width:1120px;padding:var(--hx-2) var(--hx-2) var(--hx-2) var(--hx-5);
  border-radius:var(--hx-radius-pill);border:1px solid transparent;transition:max-width 600ms var(--hx-ease),background 380ms var(--hx-ease),border-color 380ms var(--hx-ease),box-shadow 380ms var(--hx-ease)}
.hx-header.is-pill>nav{max-width:760px;background:var(--hx-glass);border-color:var(--hx-glass-line);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);box-shadow:var(--hx-shadow)}

/* cascade: children of [data-hx-cascade] enter one after another */
[data-hx-cascade]>*{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity var(--hx-enter) var(--hx-ease),transform var(--hx-enter) var(--hx-ease),filter var(--hx-enter) var(--hx-ease)}
[data-hx-cascade].is-in>*{opacity:1;transform:none;filter:none}
[data-hx-cascade].is-in>*:nth-child(2){transition-delay:90ms}[data-hx-cascade].is-in>*:nth-child(3){transition-delay:180ms}
[data-hx-cascade].is-in>*:nth-child(4){transition-delay:270ms}[data-hx-cascade].is-in>*:nth-child(5){transition-delay:360ms}[data-hx-cascade].is-in>*:nth-child(6){transition-delay:450ms}

/* highlighter-tip swatch */
.hx-tipswatch{height:72px;border-radius:6px;background:var(--c);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 100%,28px 100%)}

@media (max-width:820px){.hx-stats{grid-template-columns:1fr 1fr}.hx-flow-steps{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.hx-drift,.hx-flow .beam{display:none}.hx-strip>div{animation:none}.hx-btn--rec::before{animation:none}[data-hx-cascade]>*{opacity:1;transform:none;filter:none}}