:root{--p-white: #fff;--p-light-grey: #e6e6e6;--p-med-grey: #858586;--p-dark-grey: #545456;--p-black: #0a0a0a;--p-charcoal: #121212;--p-blue-accent: #007bff;--p-card-ink: #1e1e1e;--p-text-soft: #a3a3a3;--p-hot-teal: #43fed1;--p-light-blue: #62f2ff;--p-med-blue: #00c2ff;--p-dark-blue: #0088ff;--p-purple: #ad40f6;--p-pink: #eb42b6;--p-red: #ff637f;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Playfair Display", "Palatino Linotype", Georgia, "Times New Roman", serif;--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;--type-h1: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);--type-h2: clamp(2rem, 2.5vw + 1rem, 2.5rem);--type-h3: clamp(1.5rem, 1.5vw + 1rem, 1.75rem);--type-h4: 1.25rem;--type-h5: 1.125rem;--type-h6: 1rem;--type-body: 1.25rem;--type-lede: clamp(1.1rem, .5vw + 1rem, 1.25rem);--type-small: .9rem;--type-caption: .8rem;--type-pullquote: clamp(1.35rem, 1.2vw + 1rem, 1.6rem);--font-weight-heading-serif: 700;--font-weight-heading-sans: 700;--font-weight-body: 400;--font-weight-medium: 600;--font-weight-bold: 700;--leading-heading: 1.12;--leading-snug: 1.2;--leading-normal: 1.55;--leading-relaxed: 1.65;--tracking-tight: -.02em;--tracking-eyebrow: .02em;--tracking-subtle: .01em;--tracking-h6: .08em;--space-xs: .35rem;--space-sm: .75rem;--space-md: 1.25rem;--space-lg: 2rem;--space-xl: 3.5rem;--space-2xl: 5rem;--layout-max: 1120px;--layout-gutter: 2rem;--layout-content-max: 65ch;--layout-prose-max: 52rem;--layout-hero-max: 56rem;--layout-work-max: 43.2rem ;--layout-page-head-max: 40rem;--layout-scroll-margin-top: 5.5rem;--layout-media-bleed-max: 64rem;--layout-hero-two-column-extra: 12rem;--layout-hero-media-max: 30rem;--layout-hero-pad-bottom-max: 5.75rem;--layout-hero-padding-top-block: clamp(var(--space-2xl), 8vw, var(--layout-scroll-margin-top));--layout-hero-padding-bottom-block: clamp(var(--space-2xl), 10vw, var(--layout-hero-pad-bottom-max));--layout-table-min-width: 28rem;--layout-client-logo-max-height: 1.5rem;--layout-client-logo-max-width: 12rem;--size-touch-min: 44px;--icon-md: 1.125rem;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 12px;--radius-pill: 999px;--ease-out: cubic-bezier(.22, 1, .36, 1);--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .28s;--z-header: 50}:root{color-scheme:light;--color-bg: color-mix(in srgb, var(--p-light-grey) 88%, var(--p-med-grey) 12%);--color-surface: var(--p-white);--color-surface-muted: color-mix(in srgb, var(--p-light-grey) 58%, var(--p-white) 42%);--color-band: color-mix(in srgb, var(--p-light-grey) 72%, var(--p-white));--color-text: var(--p-black);--color-text-muted: color-mix(in srgb, var(--p-med-grey) 68%, var(--p-black));--color-border: color-mix(in srgb, var(--p-med-grey) 28%, var(--p-light-grey));--color-accent: color-mix(in srgb, var(--p-blue-accent) 82%, var(--p-black));--color-accent-hover: color-mix(in srgb, var(--p-blue-accent) 72%, var(--p-black));--color-accent-soft: color-mix(in srgb, var(--p-blue-accent) 14%, transparent);--color-on-accent: var(--p-white);--color-danger: var(--p-red);--color-code-bg: var(--p-light-grey);--color-code-border: color-mix(in srgb, var(--p-med-grey) 35%, var(--p-light-grey));--color-shadow-ink: color-mix(in srgb, var(--p-black) 18%, transparent);--gradient-text: linear-gradient(105deg, var(--p-blue-accent), color-mix(in srgb, var(--p-blue-accent) 70%, var(--p-med-blue)));--shadow-md: 0 12px 30px var(--color-shadow-ink);--shadow-lg: 0 18px 44px color-mix(in srgb, var(--p-black) 14%, transparent);--shadow-tile: 0 16px 40px color-mix(in srgb, var(--p-black) 12%, transparent);--max: var(--layout-max);--radius: var(--radius-md);--ease: var(--ease-out)}[data-theme=dark]{color-scheme:dark;--color-bg: var(--p-black);--color-surface: var(--p-card-ink);--color-surface-muted: color-mix(in srgb, var(--p-charcoal) 92%, var(--p-white));--color-band: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%);--color-text: var(--p-white);--color-text-muted: var(--p-text-soft);--color-border: color-mix(in srgb, var(--p-white) 30%, var(--p-black));--color-accent: color-mix(in srgb, var(--p-blue-accent) 86%, var(--p-white));--color-accent-hover: color-mix(in srgb, var(--p-blue-accent) 74%, var(--p-white));--color-accent-soft: color-mix(in srgb, var(--p-blue-accent) 18%, transparent);--color-on-accent: var(--p-black);--color-danger: color-mix(in srgb, var(--p-red) 92%, var(--p-white) 8%);--color-code-bg: color-mix(in srgb, var(--p-black) 40%, var(--p-dark-grey));--color-code-border: var(--p-dark-grey);--color-shadow-ink: color-mix(in srgb, var(--p-black) 55%, transparent);--gradient-text: linear-gradient(105deg, var(--p-blue-accent), color-mix(in srgb, var(--p-blue-accent) 55%, var(--p-white)));--shadow-md: 0 14px 36px var(--color-shadow-ink);--shadow-lg: 0 22px 48px color-mix(in srgb, var(--p-black) 45%, transparent);--shadow-tile: 0 18px 44px color-mix(in srgb, var(--p-black) 40%, transparent)}:root{--comp-header-z: var(--z-header);--comp-header-blur: 12px;--comp-header-bg: transparent;--comp-header-border: none;--comp-header-padding-y: var(--space-md);--comp-nav-gap: var(--space-sm) var(--space-lg);--comp-nav-font: var(--type-h5);--comp-button-radius: var(--radius-pill);--comp-button-padding-x: 1.25rem;--comp-button-padding-y: .75rem;--comp-button-font: var(--type-h6);--comp-button-weight: var(--font-weight-heading-sans);--comp-button-transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);--comp-button-lift: translateY(-1px);--comp-button-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--color-shadow-ink) 42%, transparent);--comp-button-primary-bg: var(--color-accent);--comp-button-primary-bg-hover: var(--color-accent-hover);--comp-button-primary-fg: var(--color-on-accent);--comp-button-primary-border: var(--color-accent);--comp-button-secondary-bg: color-mix(in srgb, var(--color-surface) 94%, var(--color-accent-soft));--comp-button-secondary-bg-hover: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent-soft));--comp-button-secondary-fg: var(--color-text);--comp-button-secondary-border: color-mix(in srgb, var(--color-border) 70%, transparent);--comp-button-secondary-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent), 0 1px 0 color-mix(in srgb, var(--color-text) 5%, transparent);--comp-button-ghost-bg: transparent;--comp-button-ghost-bg-hover: var(--color-surface-muted);--comp-button-ghost-fg: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));--comp-button-ghost-fg-hover: var(--color-text);--comp-button-ghost-border: var(--color-border);--comp-button-link-bg: transparent;--comp-button-link-bg-hover: transparent;--comp-button-link-fg: var(--color-accent);--comp-button-link-fg-hover: var(--color-accent-hover);--comp-button-link-border: transparent;--comp-button-disabled-opacity: .56;--comp-card-radius: var(--radius-md);--comp-card-border: 1px solid var(--color-border);--comp-card-bg: var(--color-surface);--comp-card-padding: var(--space-lg);--comp-card-shadow-hover: 0 2px 8px color-mix(in srgb, var(--color-shadow-ink) 24%, transparent), 0 16px 40px color-mix(in srgb, var(--color-shadow-ink) 82%, transparent);--comp-card-border-hover: color-mix(in srgb, var(--color-accent) 32%, var(--color-border));--comp-card-lift: translateY(-3px);--comp-card-press-transform: translateY(0) scale(.993);--comp-card-shadow-pressed: 0 1px 2px color-mix(in srgb, var(--color-shadow-ink) 28%, transparent), 0 6px 18px color-mix(in srgb, var(--color-shadow-ink) 48%, transparent);--comp-card-transition: border-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);--comp-card-transition-press: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);--comp-tile-shadow-hover: var(--shadow-tile);--comp-tile-transition: border-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);--comp-panel-radius: var(--radius-md);--comp-panel-padding: var(--space-lg);--comp-panel-shadow: var(--shadow-md);--comp-panel-border: var(--comp-card-border);--comp-media-bg: var(--color-border);--comp-media-canvas-bg: linear-gradient( 165deg, color-mix(in srgb, var(--color-surface-muted) 88%, var(--color-bg) 12%) 0%, var(--comp-media-bg) 100% );--comp-media-canvas-glow: radial-gradient( ellipse 125% 72% at 50% 108%, color-mix(in srgb, var(--color-accent-soft) 70%, transparent) 0%, transparent 50% );--comp-media-mockup-padding: clamp(var(--space-sm), 4.5vw, var(--space-xl));--comp-media-mockup-radius: var(--radius-md);--comp-media-mockup-canvas-top-inset: 20%;--comp-media-mockup-width: 92%;--comp-media-mockup-frame-seam: inset 0 -1px 0 color-mix(in srgb, var(--color-border) 72%, transparent);--comp-media-mockup-frame-shadow: 0 2px 10px color-mix(in srgb, var(--color-shadow-ink) 12%, transparent), 0 10px 26px color-mix(in srgb, var(--color-shadow-ink) 6%, transparent);--comp-card-media-divider: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent);--comp-code-radius: var(--radius-xs);--comp-code-padding-y: .1em;--comp-code-padding-x: .35em;--comp-code-font: var(--type-caption);--comp-link-underline-thickness: 1px;--comp-link-underline-offset: 3px;--comp-focus-ring: 2px solid var(--color-accent);--comp-focus-offset: 3px;--comp-theme-toggle-size: var(--size-touch-min);--comp-theme-toggle-radius: var(--radius-pill);--comp-theme-toggle-border: 1px solid var(--color-border);--comp-theme-toggle-bg: var(--color-surface-muted);--comp-chip-radius: var(--radius-pill);--comp-chip-padding-y: .25rem;--comp-chip-padding-x: .65rem;--comp-chip-font: var(--type-small)}[data-theme=dark]{--comp-button-secondary-bg: color-mix(in srgb, var(--color-surface) 92%, var(--color-text) 8%);--comp-button-secondary-bg-hover: color-mix(in srgb, var(--color-surface) 86%, var(--color-text) 14%);--comp-button-ghost-border: var(--color-border);--comp-button-ghost-fg-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));--comp-button-link-fg: var(--color-text);--comp-button-link-fg-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));--comp-media-bg: color-mix(in srgb, var(--color-surface-muted) 42%, var(--color-border));--comp-media-canvas-bg: linear-gradient( 165deg, color-mix(in srgb, var(--color-surface-muted) 78%, var(--color-bg) 22%) 0%, var(--comp-media-bg) 100% );--comp-media-mockup-frame-seam: inset 0 -1px 0 color-mix(in srgb, var(--color-border) 88%, transparent);--comp-media-mockup-frame-shadow: 0 2px 14px color-mix(in srgb, var(--color-shadow-ink) 26%, transparent), 0 12px 32px color-mix(in srgb, var(--color-shadow-ink) 14%, transparent);--comp-card-media-divider: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}section[id]{scroll-margin-top:var(--layout-scroll-margin-top)}body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:var(--type-body);font-weight:var(--font-weight-body);line-height:var(--leading-relaxed);color:var(--color-text-muted);background:var(--color-bg);-webkit-font-smoothing:antialiased}h1,.type-h1{margin:0;font-family:var(--font-display);font-size:var(--type-h1);font-weight:var(--font-weight-heading-serif);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight);color:var(--color-text)}h2,.type-h2{margin:0;font-family:var(--font-display);font-size:var(--type-h2);font-weight:var(--font-weight-heading-serif);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight);color:var(--color-text)}h3,.type-h3{margin:0;font-family:var(--font-display);font-size:var(--type-h3);font-weight:var(--font-weight-heading-serif);line-height:var(--leading-snug);color:var(--color-text)}h4,.type-h4{margin:0;font-family:var(--font-display);font-size:var(--type-h4);font-weight:var(--font-weight-heading-serif);line-height:var(--leading-snug);color:var(--color-text)}h5,.type-h5{margin:0;font-family:var(--font-sans);font-size:var(--type-h5);font-weight:var(--font-weight-heading-sans);line-height:var(--leading-snug);color:var(--color-text-muted)}h6,.type-h6,.eyebrow,.type-eyebrow{font-family:var(--font-sans);font-size:var(--type-small);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-eyebrow);line-height:var(--leading-snug);color:color-mix(in srgb,var(--color-text-muted) 92%,var(--color-text));text-transform:none}h6,.type-h6{margin:0}img{max-width:100%;height:auto;display:block}a{color:var(--color-accent);text-decoration-thickness:var(--comp-link-underline-thickness);text-underline-offset:var(--comp-link-underline-offset);transition:color var(--duration-normal) var(--ease-out)}a:hover{color:var(--color-accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3em;min-height:var(--size-touch-min);padding:var(--comp-button-padding-y) var(--comp-button-padding-x);font-family:var(--font-sans);font-size:var(--comp-button-font);font-weight:var(--comp-button-weight);border-radius:var(--comp-button-radius);text-decoration:none;border:1px solid transparent;background:transparent;cursor:pointer;transform:translateY(0);box-shadow:none;transition:var(--comp-button-transition)}.btn--primary{background:var(--comp-button-primary-bg);color:var(--comp-button-primary-fg);border-color:var(--comp-button-primary-border)}.btn--secondary{background:var(--comp-button-secondary-bg);color:var(--comp-button-secondary-fg);border-color:var(--comp-button-secondary-border);box-shadow:var(--comp-button-secondary-shadow)}.btn--ghost{background:var(--comp-button-ghost-bg);color:var(--comp-button-ghost-fg);border-color:var(--comp-button-ghost-border)}.btn--link{background:var(--comp-button-link-bg);color:var(--comp-button-link-fg);border-color:var(--comp-button-link-border);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-subtle);padding-inline:0;border-radius:0;box-shadow:none}.btn--with-arrow:after{content:" →";display:inline-block;transition:transform var(--duration-normal) var(--ease-out)}@media(hover:hover)and (pointer:fine){.btn--primary:hover{background:var(--comp-button-primary-bg-hover);border-color:var(--comp-button-primary-bg-hover);color:var(--comp-button-primary-fg);transform:var(--comp-button-lift);box-shadow:var(--comp-button-primary-shadow-hover)}.btn--secondary:hover{background:var(--comp-button-secondary-bg-hover);border-color:var(--comp-button-secondary-border);color:var(--comp-button-secondary-fg);transform:var(--comp-button-lift);box-shadow:var(--comp-button-secondary-shadow)}.btn--ghost:hover{border-color:color-mix(in srgb,var(--color-text) 35%,var(--color-border));color:var(--comp-button-ghost-fg-hover);background:var(--comp-button-ghost-bg-hover);transform:var(--comp-button-lift)}.btn--link:hover{color:var(--comp-button-link-fg-hover);background:var(--comp-button-link-bg-hover);border-color:var(--comp-button-link-border);transform:none}.btn--with-arrow:hover:after{transform:translate(.15em)}}.btn--primary:focus-visible{background:var(--comp-button-primary-bg-hover);border-color:var(--comp-button-primary-bg-hover);color:var(--comp-button-primary-fg);transform:var(--comp-button-lift)}.btn--secondary:focus-visible{background:var(--comp-button-secondary-bg-hover);border-color:var(--comp-button-secondary-border);color:var(--comp-button-secondary-fg);transform:var(--comp-button-lift);box-shadow:var(--comp-button-secondary-shadow)}.btn--ghost:focus-visible{border-color:color-mix(in srgb,var(--color-text) 35%,var(--color-border));background:var(--comp-button-ghost-bg-hover);color:var(--comp-button-ghost-fg-hover);transform:var(--comp-button-lift)}.btn--link:focus-visible{border-color:var(--comp-button-link-border);background:var(--comp-button-link-bg-hover);color:var(--comp-button-link-fg-hover);transform:none}.btn--with-arrow:focus-visible:after{transform:translate(.15em)}.btn--primary:active,.btn--secondary:active{transform:translateY(.5px) scale(.985);box-shadow:none;transition-duration:var(--duration-fast)}.btn--ghost:active{color:color-mix(in srgb,var(--comp-button-ghost-fg) 82%,var(--color-text-muted))}.btn--link:active{color:color-mix(in srgb,var(--comp-button-link-fg-hover) 82%,var(--color-text-muted))}.btn--with-arrow:active:after{transform:translate(0);transition-duration:var(--duration-fast)}.btn[aria-disabled=true],.btn:disabled{opacity:var(--comp-button-disabled-opacity);pointer-events:none;transform:none;box-shadow:none;cursor:not-allowed}.btn.is-loading{pointer-events:none;cursor:progress;opacity:var(--comp-button-disabled-opacity);transform:none;box-shadow:none}.btn--block{width:100%}:focus-visible{outline:var(--comp-focus-ring);outline-offset:var(--comp-focus-offset)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:0;left:50%;z-index:calc(var(--comp-header-z) + 20);padding:var(--space-sm) var(--space-md);margin:0;border-radius:0 0 var(--radius-md) var(--radius-md);border:1px solid var(--color-border);border-top:0;background:var(--color-surface);color:var(--color-text);font-family:var(--font-sans);font-size:var(--type-small);font-weight:var(--font-weight-medium);text-decoration:none;box-shadow:var(--shadow-md);transform:translate(-50%,-120%);transition:transform var(--duration-normal) var(--ease-out)}.skip-link:focus{outline:none}.skip-link:focus-visible{transform:translate(-50%);outline:var(--comp-focus-ring);outline-offset:var(--comp-focus-offset)}#main:focus{outline:none}main{--layout-main-inline-pad: var(--space-sm);padding-inline:var(--layout-main-inline-pad)}.container{width:min(100% - var(--layout-gutter),var(--max));margin-inline:auto}.work{padding-block:var(--space-2xl)}.work__inner{width:min(100%,var(--layout-work-max));margin-inline:auto}.work__inner.work__inner--wide{width:min(100%,calc(var(--layout-work-max) * 1.2 * 1.2))}.work__head{margin-bottom:var(--space-xl);text-align:center}.work__title{margin:0}.work__grid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xl)}.work__item{margin:0}.prose{max-width:var(--layout-content-max);color:var(--color-text-muted)}.prose h1,.prose h2{margin-top:var(--space-xl);margin-bottom:var(--space-md)}.prose h3{margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.prose p{margin:0 0 var(--space-md)}.prose ul{margin:0 0 var(--space-md);padding-left:var(--space-md)}.prose li{margin-bottom:var(--space-xs)}.prose strong{color:var(--color-text);font-weight:var(--font-weight-heading-sans)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
