/* Hallmark · shape: Marquee Hero · genre: modern-minimal · theme: Cobalt (deal 1/3) · redesign: full · draw: 620af3
 * hero: Banner · nav: edge-aligned · footer: colophon block · imagery: type and existing sample data · signature: Andrei Shevtsov at display scale, followed by the three real systems
 * axes: light/grotesk-sans/cool · posture: restrained · job: hire · modes: light+dark · contrast: AA 4.5+ · fold: pass 1280/1440/1920 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, replaced generic intelligence headline and fictional product chrome with the engineer's name and a project index */
/* Hallmark · finish-review: subagent · 1 finding · 1 resolved; career heading uses the verified year 2000 */
/* Hallmark · hero-review: fix · 1 finding · 1 resolved; mobile identity now 22vw, all four folds recaptured */
/* Hallmark · waive 59 · Case pages contain three adjacent sections inside one technical article · The problem, implementation and outcome use 64px separation within the case-content column; major page sections retain the larger spacing scale */
/* Hallmark · waive 77 · Case pages and privacy are reading documents rather than acquisition landing pages · Keep the case-content prose at a readable measure beside the contribution summary, and keep privacy concise without invented sections or decorative images */
/* Hallmark · waive 49b · Platform Infrastructure is the real project name, a display heading rather than a compact control · Preserve its full identity and let the two words wrap at 320px; the separate case action remains one line */
/* Hallmark · reworded "intelligence, put to work." to "Andrei Shevtsov" · 54/69: personal authorship replaces the generic slogan */
/* Hallmark · reworded "real products. engineering in practice." to "Selected projects" · 54: plain section heading replaces the redundant eyebrow */
/* Hallmark · reworded "from a difficult problem to a working system." to "What I can build with you." · 58: shorter heading for the same three capabilities */
/* Hallmark · reworded "look under the surface." to "Two engineering decisions, explained." · 54: name the real interactive examples */
/* Hallmark · reworded "a long view of engineering." to "Engineering since 2000." · 54: concrete heading with all career facts retained */
/* Hallmark · dropped "budva, montenegro", "€185,000.", "€185,000", coast.webp · 47c/84: remove decorative sample product mockups; Budva and the same sample price remain in the explicitly deterministic interactive demo */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(98.6% 0.005 250); --color-paper-2: oklch(96.2% 0.008 252); --color-paper-3: oklch(93% 0.011 252);
  --color-ink: oklch(21% 0.028 262); --color-ink-2: oklch(36% 0.022 260); --color-muted: oklch(50% 0.018 258);
  --color-rule: oklch(90% 0.009 252); --color-rule-2: oklch(83% 0.012 252);
  --color-graphite: oklch(21% 0.024 262); --color-graphite-2: oklch(26.5% 0.026 262); --color-graphite-ink: oklch(93% 0.010 250); --color-graphite-muted: oklch(69% 0.022 256);
  --color-accent: oklch(52% 0.19 258); --color-accent-2: oklch(76% 0.13 254); --color-accent-wash: oklch(95% 0.028 256); --color-accent-ink: oklch(98.6% 0.005 250); --color-focus: oklch(52% 0.19 258);
  --color-accent-deep: oklch(43% 0.2 262); --color-accent-edge: oklch(39% 0.16 260);
  --color-glyph-1: oklch(89% 0.025 254); --color-glyph-2: oklch(81% 0.045 255); --color-glyph-3: oklch(70% 0.085 256); --color-glyph-4: oklch(60% 0.13 257);
  --color-graphite-glyph-1: oklch(33% 0.03 262); --color-graphite-glyph-2: oklch(41% 0.05 260); --color-graphite-glyph-3: oklch(53% 0.1 258);
  --color-key-face: oklch(99.4% 0.003 250); --color-key-edge: oklch(80% 0.016 254);
  --font-display: "Familjen Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px;
  --cell-w: 8px; --cell-h: 16px; --cut: 8px; --cut-l: 16px;
  --rule-hair: 1px; --shadow-card: 0 1px 2px oklch(21% 0.028 262 / 0.06);
  --shadow-key: 0 3px 0 0 var(--color-key-edge), 0 6px 8px -4px oklch(21% 0.028 262 / 0.28), inset 0 1px 0 oklch(100% 0 0 / 0.9);
  --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), 0 6px 8px -4px oklch(30% 0.12 260 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.22);
  --shadow-key-press: inset 0 1px 2px oklch(21% 0.028 262 / 0.14);
  --tracking-display: -0.028em; --display-weight: 600;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: duotone graphite paper */
[data-slot]:has(> img) { isolation: isolate; background: var(--color-paper); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
[data-slot] > img { z-index: 0; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
[data-slot]:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-graphite); mix-blend-mode: lighten; pointer-events: none; }

/* familjen-grotesk-latin-ext-wght-normal */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/familjen-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* familjen-grotesk-latin-wght-normal */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/familjen-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ibm-plex-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ibm-plex-sans-latin-wght-normal */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


:root {
  --bg: oklch(98% .006 250); --surface: oklch(95% .01 250); --text: oklch(21% .028 262); --muted: oklch(48% .03 258);
  --accent: oklch(50% .19 258); --onAccent: oklch(98.6% .005 250); --border: oklch(73% .025 252);
  --color-paper: var(--bg); --color-paper-2: var(--surface); --color-paper-3: color-mix(in oklch,var(--surface) 85%,var(--text));
  --color-ink: var(--text); --color-ink-2: var(--text); --color-muted: var(--muted); --color-rule: var(--border); --color-rule-2: var(--muted);
  --color-accent: var(--accent); --color-focus: var(--accent); --color-accent-ink: var(--onAccent);
  --color-accent-wash: color-mix(in oklch,var(--accent) 8%,var(--surface));
  --color-key-face: var(--surface); --color-key-edge: var(--border); --color-accent-edge: color-mix(in oklch,var(--accent) 72%,var(--text));
  --color-clear: transparent; --text-identity: clamp(3.5rem,10vw,9rem); --control-height: 48px;
  --identity-weight:600; --identity-tracking:-.045em; --panel-corners:bevel round bevel round;
  --font-label: var(--font-display); --shadow-popup: 0 2px 8px color-mix(in oklch,var(--text) 8%,transparent);
  --shadow-key: 0 3px 0 var(--color-key-edge); --shadow-key-accent: 0 3px 0 var(--color-accent-edge);
}
body{font-synthesis:none}
a{text-decoration:none}
button{color:inherit;border:0;background:none;cursor:pointer}
button,input,select,summary{-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.55;cursor:not-allowed}
button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
figure,blockquote,fieldset{margin:0}
.wrap{width:100%;max-width:var(--container);padding-inline:var(--gutter);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-md);top:var(--space-md);z-index:var(--z-toast);padding:var(--space-sm) var(--space-md);background:var(--color-accent);color:var(--color-accent-ink);transform:translateY(-200%)}
.skip:focus-visible{transform:none}
.header{display:flex;align-items:center;gap:var(--space-lg);min-height:80px;position:relative;z-index:var(--z-dropdown)}
.wordmark{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:var(--tracking-display);white-space:nowrap}
.wordmark span{font-weight:600}.wordmark i{font-style:normal}
.desktop-nav{display:flex;align-items:center;gap:var(--space-lg);margin-left:auto;font-size:var(--text-sm)}
.desktop-nav a{padding-block:var(--space-sm);white-space:nowrap}
.desktop-nav a:hover,.text-link:hover,.project-link:hover,.footer a:hover,.email-address:hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.2em}
.header-tools{display:flex;align-items:center;gap:var(--space-xs)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:var(--control-height);padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent-edge);border-radius:var(--radius-input);background:var(--color-accent);color:var(--color-accent-ink);box-shadow:var(--shadow-key-accent);font-family:var(--font-display);font-size:var(--text-md);font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer;transition:transform var(--dur-micro) var(--ease-out)}
.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(2px)}.button:disabled{transform:none;opacity:.55;cursor:not-allowed}
.button.small{min-height:44px;padding:var(--space-xs) var(--space-md);font-size:var(--text-sm)}
.header-contact{background:var(--color-key-face);color:var(--color-ink);border-color:var(--color-rule-2);box-shadow:var(--shadow-key)}
.link-icon{width:20px;height:20px;flex:none}
.text-link,.text-button{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;font-size:var(--text-md);font-weight:500;line-height:1.4;white-space:nowrap}
.text-button{padding:var(--space-xs) 0}
.text-button:hover{text-decoration:underline}.text-button:active{transform:translateY(1px)}
.dropdown{position:relative;min-width:0}
.dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-clear);border-radius:var(--radius-input);list-style:none;cursor:pointer;font-size:var(--text-sm);line-height:1.4;white-space:nowrap}
.dropdown>summary::-webkit-details-marker{display:none}
.dropdown>summary:hover,.dropdown[open]>summary{background:var(--color-paper-2)}
.dropdown[open]>summary{border-color:var(--color-rule-2)}
.dropdown .chevron{width:16px;height:16px;flex:none;transition:transform var(--dur-micro) var(--ease-out)}
.dropdown[open] .chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;top:calc(100% + var(--space-xs));right:0;z-index:var(--z-dropdown);width:max-content;min-width:200px;max-width:calc(100dvw - 2 * var(--gutter));max-height:60dvh;overflow:auto;overscroll-behavior:contain;padding:var(--space-xs);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);color:var(--color-ink);box-shadow:var(--shadow-popup)}
.dropdown-panel a,.dropdown-panel label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);position:relative;min-height:44px;padding:var(--space-sm);border-radius:var(--radius-input);font-size:var(--text-sm);line-height:1.4;cursor:pointer}
.dropdown-panel a:hover,.dropdown-panel label:hover{background:var(--color-accent-wash)}
.dropdown-panel a[aria-current],.dropdown-panel label:has(input:checked){background:var(--color-accent-wash);color:var(--color-accent)}
.dropdown-panel a:focus-visible,.dropdown-panel label:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:-2px}
.dropdown-panel input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice-mark{visibility:hidden;width:16px;flex:none}.dropdown-panel [aria-current]>.choice-mark,.dropdown-panel input:checked~.choice-mark{visibility:visible}
.dropdown-label{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}
.appearance>summary,.mobile-nav>summary{justify-content:center;width:44px;padding:var(--space-xs)}
.theme-icon,.mobile-nav svg{width:20px;height:20px}
.mobile-nav,.language-code{display:none}
.hero{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.hero h1{font-size:var(--text-identity);font-weight:var(--identity-weight);line-height:.96;letter-spacing:var(--identity-tracking);max-width:none}
.hero h1 span{display:inline}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);align-items:center;margin-top:var(--space-xl)}
.hero-intro{max-width:45ch;font-size:var(--text-lead);line-height:1.5;color:var(--color-ink-2)}
.hero-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.hero-location{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-xl)}
.work-section{padding-block:var(--space-2xl) var(--section-gap-s);border-top:1px solid var(--color-rule)}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--gap-columns);margin-bottom:var(--space-2xl)}
.section-heading>p{max-width:45ch;font-size:var(--text-md);line-height:1.6;color:var(--color-muted)}
.section-heading h2{font-size:var(--text-section)}
.project-grid{display:block}
.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg) var(--gap-columns);border-top:1px solid var(--color-rule);padding-block:var(--space-xl)}
.project h3{font-size:var(--text-display-s);grid-column:1;align-self:start}
.project h3 a{display:inline-flex;align-items:center;gap:var(--space-md)}
.project h3 .link-icon{width:24px;height:24px}
.project-title{grid-column:2;font-size:var(--text-lead);line-height:1.5}
.project-description{grid-column:2;max-width:52ch;font-size:var(--text-md);line-height:1.65;color:var(--color-muted)}
.project-link{grid-column:2;display:inline-flex;align-items:center;gap:var(--space-sm);justify-self:start;min-height:44px;font-size:var(--text-md)}
.project-type{grid-column:1;font-size:var(--text-sm);color:var(--color-muted)}
.project-stack{grid-column:1;display:flex;align-items:flex-start;gap:var(--space-xs) var(--space-md);flex-wrap:wrap;font-size:var(--text-sm);color:var(--color-muted)}
.project-stack span{white-space:nowrap}
.expertise{padding-block:var(--section-gap);border-top:1px solid var(--color-rule)}
.expertise-list article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);padding-block:var(--space-xl);border-bottom:1px solid var(--color-rule)}
.expertise-list h3{font-size:var(--text-title)}
.expertise-list p{max-width:52ch;line-height:1.65}.expertise-list .stack{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}
.lab-section{--color-paper:var(--section-bg);--color-paper-2:var(--section-surface);--color-ink:var(--section-text);--color-ink-2:var(--section-text);--color-muted:var(--section-muted);--color-accent:var(--section-accent);--color-accent-ink:var(--section-onAccent);--color-focus:var(--section-accent);--color-rule:var(--section-border);--color-rule-2:var(--section-muted);--color-accent-wash:color-mix(in oklch,var(--section-accent) 12%,var(--section-surface));--color-accent-edge:var(--section-border);padding-block:var(--section-gap-s);background:var(--color-paper);color:var(--color-ink)}
.lab-tabs{display:flex;align-items:center;gap:var(--space-xs);width:fit-content;max-width:100%;padding:var(--space-xs);border-radius:var(--radius-card);background:var(--color-paper-2)}
.lab-tabs button{min-height:48px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-input);font-family:var(--font-display);font-size:var(--text-md);white-space:nowrap}
.lab-tabs button[aria-selected=true]{color:var(--color-ink);box-shadow:inset 0 -2px var(--color-accent)}
.lab-tabs button[aria-selected=false]{color:var(--color-muted)}
.lab-tabs button:hover{outline:1px solid var(--color-muted);outline-offset:-1px}
.lab-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);padding-block:var(--space-xl)}
.field-label{font-size:var(--text-sm);margin-bottom:var(--space-sm);color:var(--color-muted)}
.scenario>summary{min-height:48px;padding:var(--space-sm) var(--space-md);font-size:var(--text-md);border-color:var(--color-rule-2);background:var(--color-paper-2)}
.scenario .dropdown-panel{left:0;right:0;width:100%;min-width:0;max-width:none}.scenario[open]{z-index:var(--z-dropdown)}
.demo-input blockquote{padding-block:var(--space-xl);font-family:var(--font-outlier);font-size:var(--text-md);line-height:1.8;min-height:140px;white-space:normal}
.demo-result{padding:var(--space-md) 0 var(--space-md) var(--space-xl);border-left:1px solid var(--color-rule)}
.demo-result h3{font-size:var(--text-section);margin-bottom:var(--space-lg)}
.demo-result>p{font-size:var(--text-md);line-height:1.65;max-width:45ch;color:var(--color-muted)}
.result-fields{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-xl);font-family:var(--font-outlier);font-size:var(--text-sm)}
.lab-caption{font-size:var(--text-sm);color:var(--color-muted);max-width:65ch}
.release-panel{display:block}
.release-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-columns);padding:0;list-style-position:inside;margin:0 0 var(--space-xl)}
.release-steps li{padding-block:var(--space-md);border-top:2px solid var(--color-rule);font-size:var(--text-md);color:var(--color-muted)}
.release-steps li[aria-current=step]{border-color:var(--color-accent);color:var(--color-ink)}
.release-body h3{font-size:var(--text-section);margin-bottom:var(--space-lg)}
.release-body p{font-size:var(--text-md);line-height:1.65;max-width:65ch;color:var(--color-muted)}
.release-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-xl)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);padding-block:var(--section-gap-l)}
.about-intro>p{max-width:52ch;margin-top:var(--space-lg);line-height:1.65}
.about-intro .education{font-size:var(--text-sm);color:var(--color-muted)}
.about-intro .text-link{margin-top:var(--space-lg)}
.timeline article{padding-block:var(--space-xl);border-top:1px solid var(--color-rule)}
.timeline article:first-child{padding-top:0;border-top:0}
.timeline time{display:block;font-family:var(--font-label);font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-md)}
.timeline h3{font-size:var(--text-title);margin-bottom:var(--space-md)}
.timeline p{max-width:52ch;line-height:1.65;color:var(--color-muted)}
.experience-extra{padding-top:var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-sm)}
.career-start{display:flex;align-items:baseline;gap:var(--space-md);font-size:var(--text-sm);margin-top:var(--space-xl)}
.career-start strong{font-family:var(--font-display);font-size:var(--text-display-s);font-weight:500;font-variant-numeric:tabular-nums}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);padding-block:var(--section-gap-s);border-top:1px solid var(--color-rule)}
.contact h2{font-size:var(--text-display)}
.contact p{max-width:45ch;margin-top:var(--space-lg);line-height:1.65;color:var(--color-muted)}
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md);justify-content:center}
.email-address{font-size:var(--text-lead);overflow-wrap:break-word;max-width:100%}
.footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg) var(--gap-columns);padding-block:var(--space-xl);border-top:1px solid var(--color-rule);font-size:var(--text-sm);color:var(--color-muted)}
.footer .wordmark{display:block;color:var(--color-ink)}
.footer>p{max-width:45ch;align-self:center}
.footer>div{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;padding-top:var(--space-lg)}
.footer>div>span{margin-right:auto}
.footer a{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px}
.case{padding-top:var(--space-xl)}
.case-header{padding-block:var(--space-2xl)}
.case h1{font-size:var(--text-display);max-width:22ch}
.case-lead{max-width:45ch;font-size:var(--text-lead);line-height:1.5;margin-top:var(--space-lg)}
.case-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--color-muted)}
.case-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap-columns);padding-block:var(--space-2xl) var(--section-gap-s);border-top:1px solid var(--color-rule)}
.case-content aside>p{margin-top:var(--space-lg);line-height:1.65}
.case-content aside h2{font-size:var(--text-title)}
.case-content aside .button{margin-top:var(--space-xl)}
.case-content section+section{margin-top:var(--space-2xl)}
.case-content section h2{font-size:var(--text-section);margin-bottom:var(--space-lg)}
.case-content section p{font-size:var(--text-lead);line-height:1.65;max-width:65ch}
.case-material{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--gap-columns);padding-bottom:var(--space-2xl)}
.case-material img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-card)}
.case-material figcaption{font-size:var(--text-md);line-height:1.65;color:var(--color-muted)}
.case-material blockquote{font-family:var(--font-outlier);font-size:var(--text-lead);line-height:1.65;margin-top:var(--space-lg);color:var(--color-ink)}
.privacy{padding-block:var(--space-2xl)}
.privacy h1{font-size:var(--text-display-s);max-width:24ch}
.privacy p{font-size:var(--text-lead);line-height:1.75;max-width:65ch;margin-top:var(--space-xl)}
.privacy .text-link{margin-top:var(--space-xl);white-space:normal;overflow-wrap:break-word}
.admin{padding-block:var(--space-2xl)}
.admin h1{font-size:var(--text-display-s);margin-bottom:var(--space-lg)}
.admin>p{max-width:65ch;line-height:1.65;color:var(--color-muted)}
.admin-notice{margin-bottom:var(--space-lg);font-size:var(--text-sm)}
.style-picker{border:0;padding:0;margin-block:var(--space-xl)}
.style-picker legend,.preview-heading{font-family:var(--font-display);font-size:var(--text-title);margin-bottom:var(--space-md)}
.style-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}
.style-option{position:relative;display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-card);cursor:pointer;background:var(--color-paper)}
.style-option:has(input:checked){outline:2px solid var(--color-accent);outline-offset:2px}
.style-option:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:4px}
.style-option input{width:18px;height:18px;accent-color:var(--color-accent);margin:0}
.style-option strong{font-family:var(--preset-font);font-size:var(--text-title);font-weight:500}
.style-option>span{font-size:var(--text-sm);color:var(--color-muted);line-height:1.5}
.style-option:has(input:disabled){opacity:.6;cursor:wait}
.preset-swatches{display:flex;gap:var(--space-xs)}
.preset-swatches i{width:28px;height:28px;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--swatch)}
.preview-toolbar{display:flex;gap:var(--space-lg);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-lg)}
.preview-toolbar fieldset{display:flex;gap:var(--space-xs);padding:0;border:0;min-width:0}
.preview-toolbar legend{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-xs)}
.preview-toolbar label{display:flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-input);cursor:pointer}
.preview-toolbar label:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-wash)}
.preview-toolbar input{accent-color:var(--color-accent);margin:0}
.site-preview{padding:var(--space-sm);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-card)}
.site-preview iframe{display:block;width:100%;height:600px;border:0;margin-inline:auto;background:var(--color-paper)}
.site-preview[data-device=mobile] iframe{width:390px;max-width:100%}
.preview-help{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-md)}
.palette-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);margin-block:var(--space-xl)}
.palette-grid fieldset{min-width:0;padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-card)}
.palette-grid legend{font-family:var(--font-display);font-size:var(--text-title);padding:var(--space-xs)}
.palette-grid label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);min-height:52px}
.palette-grid input{width:64px;height:40px;padding:var(--space-2xs);border:1px solid var(--color-rule-2);border-radius:var(--radius-input);background:var(--color-paper);cursor:pointer}
.palette-grid input:disabled{opacity:.55;cursor:not-allowed}
.palette-preview{padding:var(--space-lg);margin-top:var(--space-lg);background:var(--bg);color:var(--text);border-radius:var(--radius-input)}
.palette-preview h3{color:var(--text);margin-bottom:var(--space-md)}
.palette-preview p{color:var(--muted);line-height:1.65;margin-bottom:var(--space-lg)}
.palette-preview .button{background:var(--accent);color:var(--onAccent);box-shadow:none;white-space:normal}
.admin-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
#admin-status{min-height:1lh;margin-block:var(--space-lg)}
@supports(corner-shape:bevel){.dropdown-panel,.palette-grid fieldset{border-radius:var(--cut-l) var(--space-2xs);corner-shape:var(--panel-corners)}}
@media(min-width:1600px){.hero h1{font-size:9rem}}
@media(max-width:1200px){.header-contact{display:none}.hero h1{font-size:clamp(3.5rem,10vw,7rem)}}
@media(max-width:960px){
 .style-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .desktop-nav{display:none}.header-tools{margin-left:auto}.mobile-nav{display:block}.header{gap:var(--space-md)}
 .hero{padding-top:var(--space-xl)}.hero h1 span{display:block}.hero-bottom,.section-heading,.project,.expertise-list article,.about,.contact,.case-content{grid-template-columns:minmax(0,1fr)}
 .hero-actions{justify-content:flex-start}.project>*{grid-column:1}.project{gap:var(--space-lg);padding-block:var(--space-xl)}
 .project-type{grid-row:auto}.about{gap:var(--space-2xl)}.hero-bottom{margin-top:var(--space-lg)}
 .case-content{gap:var(--space-2xl)}.case-content aside{padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-rule)}
}
@media(max-width:640px){
 .style-options{grid-template-columns:minmax(0,1fr)}.style-option{padding:var(--space-md)}.site-preview{padding:0}.preview-toolbar{gap:var(--space-md)}
 .header{min-height:72px;gap:var(--space-xs)}.wordmark{font-size:21px}.language-name{display:none}.language-code{display:inline}.header-tools{gap:var(--space-2xs)}
 .language .dropdown-panel{right:calc(-1 * var(--space-xl))}.dropdown>summary{font-size:var(--text-md)}
 .hero h1{font-size:clamp(4rem,22vw,8rem);line-height:1}.hero{padding-block:var(--space-xl) var(--space-2xl)}
 .hero-bottom{gap:var(--space-lg)}.hero-intro{font-size:var(--text-lead)}.hero-actions{gap:var(--space-lg)}.hero-location{margin-top:var(--space-lg)}
 .section-heading{gap:var(--space-lg);margin-bottom:var(--space-xl)}.project h3{font-size:var(--text-section)}
 .project-stack{gap:var(--space-xs) var(--space-md)}.project-title{font-size:var(--text-lead)}
 .lab-panel,.palette-grid,.case-material{grid-template-columns:minmax(0,1fr)}
 .lab-tabs{gap:var(--space-2xs);padding:var(--space-2xs);width:100%}.lab-tabs button{font-size:var(--text-sm);padding-inline:var(--space-xs);flex:1;min-width:0}
 .scenario summary{font-size:var(--text-sm)}.scenario .dropdown-panel label{font-size:var(--text-md)}
 .demo-input blockquote{min-height:0;padding-block:var(--space-lg)}.demo-result{padding:var(--space-xl) 0 0;border-left:0;border-top:1px solid var(--color-rule)}
 .release-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}.release-steps li{font-size:var(--text-sm)}
 .release-actions{gap:var(--space-md)}.release-actions .text-button{font-size:var(--text-sm)}
 .contact-actions{gap:var(--space-lg)}.email-address{font-size:var(--text-md)}
 .footer{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}.footer>div{gap:var(--space-md)}.footer>div>span{width:100%}
 .case-header{padding-block:var(--space-xl)}.case-meta{gap:var(--space-md)}.case-content section p{font-size:var(--text-md)}
 .palette-grid fieldset{padding:var(--space-md)}.admin-actions{gap:var(--space-md)}.admin-actions .text-button{font-size:var(--text-sm)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.dropdown .chevron{transition:none}.button:hover,.button:active,button:active{transform:none}}
@media print{.header-tools,.lab-section,.contact-actions{display:none}.wrap{padding-inline:0}.hero,.about,.case-content{display:block}.hero h1{font-size:var(--text-display-s)}}