/* Highlightr site styles: design tokens from the design system + page helpers. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/instrument-sans.woff2") format("woff2");}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/caveat.woff2") format("woff2");}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/geist-mono-400.woff2") format("woff2");}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/geist-mono-500.woff2") format("woff2");}

:root{
/* Paper — warm notebook white */
--paper-0:#FFFFFF;--paper-1:#FCFBF6;--paper-2:#F5F2E9;--paper-3:#ECE8DC;--paper-4:#D9D4C6;
/* Ink — soft near-black */
--ink-1:#1D1D24;--ink-2:#34343C;--ink-3:#5F5D68;--ink-4:#8C8A94;
/* Markers — neon highlighter inks. Use as fills behind ink text, never as text. */
--marker-yellow:oklch(0.95 0.21 108);--marker-yellow-end:oklch(0.92 0.22 104);
--marker-pink:oklch(0.8 0.19 352);--marker-pink-end:oklch(0.76 0.22 352);
--marker-green:oklch(0.91 0.22 140);--marker-green-end:oklch(0.88 0.24 140);
--marker-blue:oklch(0.86 0.14 215);--marker-blue-end:oklch(0.82 0.16 220);
/* Marker inks — deep versions for handwritten notes and text on paper */
--pen-pink:oklch(0.58 0.2 352);--pen-green:oklch(0.52 0.15 150);--pen-blue:oklch(0.5 0.13 240);
/* Ghost — the suggestion text. Sits on a yellow marker swipe. */
--ghost:#5F5D68;--ghost-dark:#9A98A4;
/* Ember — legacy name, now the pink marker family */
--ember-50:oklch(0.97 0.03 352);--ember-100:oklch(0.93 0.07 352);--ember-300:var(--marker-pink);--ember-500:var(--pen-pink);--ember-600:oklch(0.52 0.2 352);--ember-700:oklch(0.44 0.17 352);
/* Pops — legacy names mapped to markers */
--pop-yellow:var(--marker-yellow);--pop-blue:var(--marker-blue);--pop-blue-soft:oklch(0.95 0.05 215);
/* Night — ink-dark panels (tray menu, dark sections) */
--night-0:#121217;--night-1:#1D1D24;--night-2:#2A2A33;--night-3:#3A3A45;--night-4:#5A5A66;--night-fg:#FCFBF6;--night-fg-2:#C3C1CB;
/* Semantic */
--moss-100:oklch(0.95 0.09 140);--moss-500:var(--pen-green);--moss-700:oklch(0.42 0.12 150);
--amber-100:oklch(0.97 0.1 105);--amber-500:var(--marker-yellow);
--red-100:oklch(0.94 0.04 25);--red-500:oklch(0.55 0.2 25);
/* Aliases */
--bg-page:var(--paper-1);--bg-sunken:var(--paper-2);--surface-card:var(--paper-0);--surface-raised:#FFFFFF;--surface-dark:var(--night-1);
--border-subtle:#E6E2D6;--border-strong:var(--ink-1);--border-dark:#000000;
--text-strong:var(--ink-1);--text-body:var(--ink-2);--text-muted:var(--ink-3);--text-faint:var(--ink-4);--text-ghost:var(--ghost);--text-on-dark:var(--night-fg);--text-on-dark-muted:var(--night-fg-2);--text-on-accent:#FFFFFF;
--accent:var(--ink-1);--accent-hover:#000000;--accent-press:#000000;--accent-soft:var(--amber-100);--caret:var(--ink-1);--highlight:var(--marker-yellow);
--status-local:var(--pen-green);--status-local-soft:var(--moss-100);--status-warn:#7A6400;--status-warn-soft:var(--amber-100);--status-error:var(--red-500);--status-error-soft:var(--red-100);
--focus-ring:0 0 0 3px var(--marker-yellow),0 0 0 4.5px var(--ink-1);
}

:root{
--font-display:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
--font-sans:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
--font-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
--font-mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;
/* Display — Instrument Sans 600, tight */
--fs-display-xl:96px;--lh-display-xl:0.98;--ls-display-xl:-0.03em;
--fs-display-l:68px;--lh-display-l:1.02;--ls-display-l:-0.025em;
--fs-display-m:46px;--lh-display-m:1.08;--ls-display-m:-0.02em;
--fs-display-s:32px;--lh-display-s:1.15;--ls-display-s:-0.015em;
/* Sans */
--fs-title:22px;--lh-title:1.3;--ls-title:-0.01em;
--fs-lead:19px;--lh-lead:1.5;
--fs-body:17px;--lh-body:1.55;
--fs-small:14px;--lh-small:1.5;
--fs-ui:14px;--lh-ui:1.38;
--fs-caption:12px;--lh-caption:1.35;
--fs-eyebrow:11px;--ls-eyebrow:0.08em;
--fs-mono:13px;--lh-mono:1.5;
--fs-note:26px;--lh-note:1.05;
/* Semantic aliases */
--type-hero:var(--fw-semibold) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);
--type-h1:var(--fw-semibold) var(--fs-display-l)/var(--lh-display-l) var(--font-display);
--type-h2:var(--fw-semibold) var(--fs-display-m)/var(--lh-display-m) var(--font-display);
--type-h3:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--type-ui:var(--fw-regular) var(--fs-ui)/var(--lh-ui) var(--font-sans);
--type-mono:var(--fw-regular) var(--fs-mono)/var(--lh-mono) var(--font-mono);
--type-note:600 var(--fs-note)/var(--lh-note) var(--font-hand);
}

:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:56px;--space-11:80px;--space-12:120px;
--radius-xs:3px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:20px;--radius-pill:999px;
--line:1.5px;--line-bold:1.5px;--line-hair:1px;
--content-max:1160px;--prose-max:640px;
}

:root{
/* Soft paper shadows — subtle, outlines do most of the work */
--shadow-xs:0 1px 0 rgba(29,29,36,.06);
--shadow-sm:0 1px 2px rgba(29,29,36,.06),0 2px 6px rgba(29,29,36,.05);
--shadow-md:0 2px 4px rgba(29,29,36,.05),0 8px 20px rgba(29,29,36,.08);
--shadow-lg:0 4px 8px rgba(29,29,36,.05),0 18px 40px rgba(29,29,36,.12);
--shadow-panel:0 12px 32px rgba(0,0,0,.32);
--shadow-window:0 1px 0 rgba(29,29,36,.04),0 18px 48px rgba(29,29,36,.14);
--shadow-key:0 1.5px 0 #1D1D24;
--shadow-press:none;
/* Paper textures (legacy names kept) */
--ruled:repeating-linear-gradient(180deg,transparent 0 31px,rgba(29,29,36,.07) 31px 32px);
--halftone:var(--ruled);
--halftone-red:radial-gradient(rgba(29,29,36,.12) 1px,transparent 1.4px) 0 0/18px 18px;
--blur-panel:none;
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-in-out:cubic-bezier(.6,0,.3,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;--dur-caret:1.05s;--dur-swipe:420ms;
}

@keyframes mt-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mt-ghost-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes mt-pop{0%{transform:scale(.96) translateY(4px);opacity:0}100%{transform:none;opacity:1}}
@keyframes mt-swipe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
a{color:var(--ink-1);font-weight:600;text-decoration:underline;text-decoration-color:var(--marker-pink);text-decoration-thickness:3px;text-underline-offset:3px}
a:hover{color:var(--ink-1);background:var(--marker-yellow)}
::selection{background:var(--marker-yellow);color:var(--ink-1)}
.mt-halftone,.mt-ruled{background-image:var(--ruled)}
/* Marker — realistic highlighter swipe. Two overlapping strokes, rough edges (needs #mt-marker-rough, injected by the Marker component), chisel ends. */
.mt-marker{position:relative;isolation:isolate;padding:0 .12em;white-space:nowrap}
.mt-marker::before,.mt-marker::after{content:"";position:absolute;z-index:-1;mix-blend-mode:multiply;filter:url(#mt-marker-rough);pointer-events:none;opacity:.9;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-yellow-end) 0,var(--marker-yellow) 4%,var(--marker-yellow) 92%,var(--marker-yellow-end) 100%)}
.mt-marker--pink::before,.mt-marker--pink::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-pink-end) 0,var(--marker-pink) 4%,var(--marker-pink) 92%,var(--marker-pink-end) 100%)}
.mt-marker--green::before,.mt-marker--green::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-green-end) 0,var(--marker-green) 4%,var(--marker-green) 92%,var(--marker-green-end) 100%)}
.mt-marker--blue::before,.mt-marker--blue::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px),linear-gradient(90deg,var(--marker-blue-end) 0,var(--marker-blue) 4%,var(--marker-blue) 92%,var(--marker-blue-end) 100%)}
.mt-marker--wrap{white-space:normal;padding:.02em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(90deg,var(--marker-yellow-end),var(--marker-yellow) 5%,var(--marker-yellow) 95%,var(--marker-yellow-end));border-radius:.1em .4em .15em .45em}.mt-marker--wrap::before,.mt-marker--wrap::after{display:none}
.mt-marker--wrap.mt-marker--pink{background:linear-gradient(90deg,var(--marker-pink-end),var(--marker-pink) 5%,var(--marker-pink) 95%,var(--marker-pink-end))}.mt-marker--wrap.mt-marker--green{background:linear-gradient(90deg,var(--marker-green-end),var(--marker-green) 5%,var(--marker-green) 95%,var(--marker-green-end))}.mt-marker--wrap.mt-marker--blue{background:linear-gradient(90deg,var(--marker-blue-end),var(--marker-blue) 5%,var(--marker-blue) 95%,var(--marker-blue-end))}
.mt-marker::before{left:-.22em;right:-.05em;top:.1em;bottom:.12em;transform:rotate(-.7deg);clip-path:polygon(1.5% 6%,99% 0,100% 94%,0 100%)}
.mt-marker::after{left:.15em;right:-.3em;top:.42em;bottom:-.1em;transform:rotate(.5deg);clip-path:polygon(0 0,98% 8%,100% 100%,2% 92%);opacity:.45}
.mt-marker--one::after{display:none}.mt-marker--one::before{top:.05em;bottom:-.02em}
.mt-marker--swipe::before,.mt-marker--swipe::after{-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 50%);mask-image:linear-gradient(90deg,#000 50%,transparent 50%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:mt-swipe var(--dur-swipe) var(--ease-out) both}


html{scroll-behavior:smooth}body{margin:0;background:var(--bg-page);font-family:var(--font-sans);color:var(--ink-1);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}
a{color:var(--ink-1)}a:hover{color:var(--ink-1);background:var(--marker-yellow)}
.hl-plain{text-decoration:none!important}
.hl-logo,.hl-logo:hover{background:none!important;text-decoration:none!important}
.hl-nolink,.hl-nolink:hover{background:none!important;text-decoration:none!important}
.hl-foot a{color:var(--ink-2);font-weight:500;text-decoration:none}.hl-foot a:hover{color:var(--ink-1);background:var(--marker-yellow)}
.hl-q:hover{background:var(--paper-2)}
@keyframes hl-bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes hl-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes hl-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}
@keyframes hl-fill{from{width:0}to{width:100%}}
@keyframes hl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hl-marquee-track{animation:hl-marquee 60s linear infinite}.hl-marquee:hover .hl-marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hl-marquee{overflow-x:auto}.hl-marquee-track{animation:none!important}}
/* Contact form fields, matching the design system Input */
.hl-field{width:100%;min-height:44px;padding:10px 12px;border-radius:8px;background:var(--surface-raised);border:var(--line) solid var(--border-strong);box-shadow:var(--shadow-xs);font:400 16px/1.4 var(--font-sans);color:var(--ink-1);transition:box-shadow var(--dur-fast)}
.hl-field::placeholder{color:var(--ink-4)}
.hl-field:focus{outline:0;box-shadow:var(--focus-ring)}
.hl-field[aria-invalid="true"]{border-color:var(--red-500)}
textarea.hl-field{min-height:160px;resize:vertical}
select.hl-field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-1) 50%),linear-gradient(135deg,var(--ink-1) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
/* Dark link styled as a button (e.g. the email buttons) */
.hl-btn,.hl-btn:hover{text-decoration:none!important;background:var(--ink-1)!important;color:var(--paper-0)!important}.hl-btn:hover{background:#000!important}