:root {
  --bg: #141b24;
  --panel: #1b2430;
  --surface-raised: #202b31;
  --surface-soft: #1d2730;
  --hover: #26352e;
  --selected: #2b3c35;
  --paper: #f3eee0;
  --muted: #bec7c3;
  --line: #53635a;
  --control-border: #829287;
  --mint: #a9d7b8;
  --coral: #edb29d;
  --gold: #e4ce9a;
  --lilac: #c8bce5;
  --on-accent: #141b24;
  --backdrop: #080e16e8;
  --map-water: #152c29;
  --map-land: #315846;
  --map-coast: #b8c8b1;
  --map-grid: #b8c8b1;
  --map-label: #e2e9d9;
  --map-route: #e4ce9a;
  --map-marker: #edb29d;
  --art-system: #2e423e;
  --art-motion: #453832;
  --art-agent: #333341;
  --art-window: #e1e2cc;
  --art-ink: #435f50;
  --art-soft: #b9c4a5;
  --demo-paper: #f1efe3;
  --demo-ink: #293b37;
  --demo-muted: #4a6056;
  --demo-surface: #dfe3d4;
  --demo-button-ink: #152329;
  --demo-focus: #193c32;
  --lab-mint: #a9d7b8;
  --lab-apricot: #edb29d;
  --lab-lilac: #c8bce5;
}
/* Shared palette-based surfaces. No theme hides the mobile appearance controls. */
.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}
.appearance-bar{position:sticky;top:0;z-index:15;background:var(--bg);border-bottom:1px solid var(--line)}
.appearance-inner{max-width:1480px;margin:0 auto;padding:11px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:18px}
.appearance-title{margin-right:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.theme-field{display:flex;align-items:center;gap:10px}.theme-field label{font-size:12px;color:var(--paper)}
.theme-field select{min-height:44px;width:140px;border:1px solid var(--control-border);border-radius:4px;background:var(--panel);color:var(--paper);font-size:16px;padding:8px 10px;cursor:pointer}
.contrast-toggle{display:flex;gap:8px;align-items:center;min-height:44px;padding:9px 11px;border:1px solid var(--control-border);border-radius:4px;background:var(--panel);color:var(--paper);font-size:12px;cursor:pointer;white-space:nowrap}
.contrast-toggle input{width:18px;height:18px;margin:0;accent-color:var(--coral)}
.contrast-toggle:has(input:checked){border-width:2px;padding:8px 10px;font-weight:600;background:var(--selected)}
:where(button,a,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.geographic-map{display:block;width:100%;height:auto;user-select:none}
.geographic-map text{font-size:11px;letter-spacing:1.4px;fill-opacity:1}
.atlas,.work-card,.archive-section,dialog{background:var(--panel);border-color:var(--line)}
.atlas-top,.atlas-bottom,.map-location-detail,.map-credit,.dialog-footer{background:var(--panel)}
.map-view-toolbar,.geographic-scene{background:var(--map-water)}
.geo-label{background:var(--panel);color:var(--paper);border-color:var(--control-border)}
.geo-hit:before{background:var(--map-marker);border-color:var(--map-water)}
.geo-marker.selected .geo-hit:before{background:var(--gold)}
.map-stops{background:var(--surface-raised)}
.map-stops a,.map-view-buttons,.subtle,.segmented,.swatch,.close-button{border-color:var(--control-border)}
.map-stops a.selected,.map-view-buttons button[aria-pressed=true]{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.map-stops a{min-height:48px}.map-view-buttons button{min-height:44px}
.map-location-detail .eyebrow,.map-credit,.atlas-bottom{color:var(--muted)}
.card-art{border-color:var(--line)}.art-caption{color:var(--paper);opacity:1;font-size:9px;line-height:1.5}
.system-art{background:var(--art-system)}.motion-art{background:var(--art-motion)}.agent-art{background:var(--art-agent)}
.component-window{background:var(--art-window)}.window-bar span{color:var(--art-ink)}
.agent-terminal{background:var(--panel);border-color:var(--control-border)}.agent-terminal p,.terminal-label{color:var(--paper)}
.agent-terminal .terminal-result{color:var(--mint)}.terminal-result{font-size:9px}
.motion-ball{background:radial-gradient(circle at 30% 28%,var(--gold),var(--coral) 60%,var(--mint))}
.motion-axis{color:var(--paper)}
.lab-controls{background:var(--surface-raised)}.lab-display{background:var(--panel);--demo-ink:inherit}
.sample-interface{background:var(--demo-paper);color:var(--demo-ink);border-color:var(--control-border)}
.sample-avatar,.sample-badge,.sample-cta{color:var(--demo-button-ink)}
.sample-task small,.sample-feedback,.sample-profile small,.sample-interface>p,.sample-tabs button{color:var(--demo-muted)}
.sample-task strong,.sample-interface h3,.sample-tabs button[aria-selected=true]{color:var(--demo-ink)}
.sample-tabs{border-color:var(--demo-focus)}.sample-tabs button[aria-selected=true]{border-bottom-color:var(--demo-focus);font-weight:600}
.sample-interface :focus-visible{outline:3px solid var(--demo-focus);outline-offset:3px}
.task-symbol{background:var(--demo-surface);color:var(--demo-ink)}
.swatch.mint{background:var(--lab-mint)}.swatch.apricot{background:var(--lab-apricot)}.swatch.lilac{background:var(--lab-lilac)}
.swatch.selected:after{color:var(--demo-button-ink)}.swatch.selected{outline-color:var(--paper)}
.segmented button.active{background:var(--mint);color:var(--on-accent);font-weight:600}
.draft-tag,.tags span,.supply-box{background:var(--panel);border-color:var(--line)}
.draft-tag,.supply-label,.supply-box p{color:var(--gold)}
.sample-trace,.decision-list article{background:var(--surface-raised);border-color:var(--line)}
.study-tabs button[aria-selected=true]{font-weight:600;border-bottom-color:var(--coral)}
.toast,.noscript-note{background:var(--selected);border-color:var(--control-border);color:var(--paper)}
.close-button{min-height:44px;width:44px}.study-tabs button{min-height:48px}
.lab-controls legend,.lab-controls>label{font-size:12px}.lab-disclaimer,.content-note,.map-credit{font-size:11px}
.eyebrow,.card-meta,.draft-tag,.tags span,.timeline-date,.practice-row b{font-size:10px}
.lab-display-top,.token-output>span{font-size:10px}.token-output pre{font-size:11px}
.sample-profile small{font-size:10px}.sample-interface>p,.sample-task strong,.sample-feedback,.sample-tabs button,.sample-cta{font-size:12px}
.sample-task small,.sample-badge{font-size:11px}
[data-high-contrast=true] .geographic-map [stroke-opacity]{stroke-opacity:1}
[data-high-contrast=true] .geographic-map text{font-weight:600}
[data-high-contrast=true] .work-card,[data-high-contrast=true] .lab-shell,[data-high-contrast=true] .archive-section,[data-high-contrast=true] dialog,[data-high-contrast=true] .map-stops a,[data-high-contrast=true] .draft-tag,[data-high-contrast=true] .tags span,[data-high-contrast=true] .supply-box{border-width:2px;border-color:var(--control-border)}
[data-high-contrast=true] .work-card,[data-high-contrast=true] .atlas,[data-high-contrast=true] .sample-interface,[data-high-contrast=true] .geo-label{box-shadow:none}
[data-high-contrast=true] .text-button,[data-high-contrast=true] .header-contact,[data-high-contrast=true] .site-header nav a,[data-high-contrast=true] .archive-links a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){
 html{scroll-padding-top:104px}.appearance-title{display:none}.appearance-inner{padding:9px 5%;gap:10px;justify-content:space-between;align-items:flex-end}
 .theme-field{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.theme-field label{font-size:10px}.theme-field select{width:140px;font-size:16px}
 .contrast-toggle{font-size:12px;padding:9px;gap:6px}.contrast-toggle:has(input:checked){padding:8px}.contrast-toggle input{width:18px;height:18px}
 .site-header nav{gap:11px}.geographic-atlas .atlas-bottom{font-size:8px;align-items:flex-start}.geographic-atlas .atlas-top{font-size:9px}
 .map-view-toolbar>span{font-size:9px;max-width:110px}.map-view-buttons button{font-size:11px;padding:8px}
 .map-location-detail .eyebrow{font-size:9px}.map-credit{font-size:10px;padding:0 12px 12px}.map-stops a{font-size:11px;min-height:54px}.map-stops small{font-size:10px}
 .practice-row{gap:13px}.practice-row span{font-size:11px}.token-output{flex-wrap:wrap;gap:6px}.token-output>span{width:100%}
 .lab-display-top{flex-wrap:wrap;line-height:1.8}.lab-version{font-size:9px}.sample-task{flex-wrap:wrap;row-gap:7px}.sample-badge{margin-left:0}
 .sample-profile{align-items:flex-start}.sample-avatar{flex-shrink:0}.dialog-header .draft-tag{font-size:10px}.study-tabs{gap:12px}.study-tabs button{font-size:11px}
 .lab-controls{gap:16px 20px}.lab-controls label[for=radius-control]{font-size:11px}.lab-controls fieldset:last-of-type{margin-top:4px}.segmented button{font-size:11px;min-height:40px}
 .hero-copy>.eyebrow{font-size:11px}.lab-controls>label.switch-label{font-size:11px}.lab-title{font-size:10px}
}
@media(max-width:380px){.theme-field select{width:130px}.contrast-toggle{font-size:11px}.appearance-inner{gap:8px}.map-view-toolbar>span{font-size:8px;max-width:90px}.map-stops a{font-size:10px}.map-location-detail .eyebrow{font-size:8px}}
@media(max-height:480px){.appearance-bar{position:static}}
/* Honor the user's OS palette, rather than trying to paint over forced colors. */
@media(forced-colors:active){
 :root{--bg:Canvas!important;--panel:Canvas!important;--surface-raised:Canvas!important;--surface-soft:Canvas!important;--hover:Canvas!important;--selected:Canvas!important;--paper:CanvasText!important;--muted:CanvasText!important;--line:CanvasText!important;--control-border:ButtonText!important;--mint:LinkText!important;--coral:LinkText!important;--gold:Highlight!important;--on-accent:Canvas!important;--map-water:Canvas!important;--map-land:Canvas!important;--map-coast:CanvasText!important;--map-label:CanvasText!important;--map-route:Highlight!important;--map-marker:Highlight!important;--demo-paper:Canvas!important;--demo-ink:CanvasText!important;--demo-muted:CanvasText!important;--demo-surface:Canvas!important;--demo-focus:Highlight!important;--demo-button-ink:ButtonText!important}
 button,.button,.theme-field select,.contrast-toggle{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important}
 :focus-visible{outline-color:Highlight!important}.sample-cta,.sample-badge,.sample-avatar{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText}
 .map-stops a.selected,.study-tabs button[aria-selected=true],.sample-tabs button[aria-selected=true]{text-decoration:underline;border-bottom:3px solid Highlight}
 .geo-marker.selected .geo-hit{outline:2px solid Highlight}.swatch.selected{outline-color:Highlight}.swatch.selected:after{color:ButtonText!important}
}
@media print{.appearance-bar{display:none}:root{--paper:#172327!important;--muted:#394a46!important;--bg:#ffffff!important;--panel:#ffffff!important;--coral:#376248!important;--mint:#376248!important;--gold:#665831!important;--line:#9ba89a!important}}
/* Case studies retain the same semantic palette in every appearance mode. */
.dialog-top{position:sticky;top:0;z-index:3;background:var(--panel);padding-bottom:8px}
#study-panel{font-size:14px;line-height:1.85}
.atlas-demo{min-width:0}.atlas-demo p{margin:0!important}.atlas-demo select{width:100%;max-width:100%;background:var(--surface-raised);color:var(--paper);font-size:16px;border-color:var(--control-border)}
.atlas-demo .demo-action{background:var(--coral);color:var(--on-accent);font-size:13px;line-height:1.5;border-color:var(--coral)}
.atlas-demo label{color:var(--paper);font-size:13px}.demo-check input{flex-shrink:0;accent-color:var(--coral)}
.demo-result,.demo-code{background:var(--surface-raised);color:var(--paper);border-color:var(--control-border);min-width:0}
.demo-code{font-size:12px;line-height:1.8;margin:0;max-width:100%}.demo-feedback{min-height:22px;font-size:12px;color:var(--mint)!important}
.demo-track{overflow:hidden;border-color:var(--control-border)}.demo-dot{position:absolute;top:.35rem;left:.35rem;transform:none;background:var(--coral);transition:left 350ms ease}
.demo-dot-end{left:calc(100% - 2.2rem - .35rem);transform:none}
@media(max-width:560px){.study-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.study-tabs button{text-align:left;min-height:46px;font-size:12px;padding:10px 0}.dialog-header h2{font-size:30px}#study-panel{padding:22px;font-size:13px}.atlas-demo{gap:14px}.dialog-footer{flex-wrap:wrap}.demo-code{font-size:12px}}
@media(forced-colors:active){.atlas-demo select,.atlas-demo .demo-action{background:ButtonFace!important;color:ButtonText!important;border-color:ButtonText!important}.demo-dot{background:Highlight!important}.demo-track,.demo-result,.demo-code{border-color:CanvasText!important}}
/* Viome and Microsoft are separate chapters, with room for nearby map labels. */
.map-stops{grid-template-columns:repeat(5,minmax(0,1fr))}
.geo-marker--viome .geo-label{left:22px;transform:none}
.geo-marker--microsoft .geo-label{font-size:9px}
@media(max-width:560px){.map-stops{grid-template-columns:repeat(6,minmax(0,1fr))}.map-stops a{grid-column:span 2}.map-stops a:nth-child(4),.map-stops a:nth-child(5){grid-column:span 3}.study-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}.study-tabs button{font-size:11px}.geo-marker--viome .geo-label,.geo-marker--microsoft .geo-label{font-size:9px}}
/* Readable headings and a self-contained profile. */
#study-panel{font-size:15px;line-height:1.85}
#study-panel h3{font-size:24px;line-height:1.35}
#study-panel h4{font-family:var(--sans);font-size:18px;line-height:1.45;letter-spacing:0;font-weight:600;color:var(--paper);margin:28px 0 12px}
.decision-list h3{font-size:18px!important;line-height:1.4}
.profile-section{display:grid;grid-template-columns:1.15fr .85fr;gap:65px;border-bottom:1px solid var(--line)}
.profile-intro h2{font-size:clamp(34px,3.8vw,49px);margin:17px 0 25px}.profile-intro>p:not(.eyebrow){font-size:15px;line-height:1.9;color:var(--muted);margin-top:17px;max-width:620px}
.profile-focus{padding:25px 28px;border:1px solid var(--line);border-radius:7px;background:var(--panel);align-self:start}
.profile-focus h3{font-size:23px;line-height:1.4;margin-bottom:8px}.profile-focus dl{margin:0}.profile-focus dl>div{border-top:1px solid var(--line);padding:18px 0}.profile-focus dl>div:first-child{border-top:0}.profile-focus dl>div:last-child{padding-bottom:0}
.profile-focus dt,.profile-toolbox dt{font-size:16px;font-weight:600;line-height:1.5;color:var(--paper)}.profile-focus dd,.profile-toolbox dd{font-size:14px;color:var(--muted);line-height:1.85;margin:7px 0 0}
.profile-actions{margin-top:24px}.profile-actions .button{font-size:13px}.profile-toolbox{border-top:1px solid var(--line);margin-top:22px;padding-top:9px}.profile-toolbox summary{padding:12px 0;min-height:44px;cursor:pointer;font-size:15px;font-weight:500;color:var(--paper)}.profile-toolbox dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:18px 0 0}
.experience-detail{margin-top:17px;border:1px solid var(--line);border-radius:5px;background:var(--panel);max-width:570px}
.experience-detail summary{min-height:48px;padding:13px 16px;color:var(--mint);font-size:14px;font-weight:500;line-height:1.6;cursor:pointer}
.experience-detail[open] summary{border-bottom:1px solid var(--line)}.experience-detail-body{padding:5px 18px 19px}
.experience-detail-body h4{font-size:17px;line-height:1.45;font-weight:600;letter-spacing:0;margin:23px 0 10px;color:var(--paper)}
.experience-detail-body p,.experience-detail-body li{font-size:14px;line-height:1.9;color:var(--muted)}.experience-detail-body p{margin:13px 0 0}.experience-detail-body ul{margin:14px 0 0;padding-left:18px}.experience-detail-body li{margin:8px 0}.experience-detail-body .experience-dates{font-size:12px;line-height:1.6;color:var(--gold);margin:0 0 12px}
.experience-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.experience-tools span{font-size:11px;line-height:1.6;color:var(--paper);border:1px solid var(--line);border-radius:3px;padding:4px 7px}
.timeline article>p:not(.timeline-date):not(.timeline-role){font-size:14px;line-height:1.9;max-width:570px}.timeline-role{font-size:13px;line-height:1.7}.timeline-date{font-size:11px;line-height:1.6}.timeline article{padding-bottom:35px}
[data-high-contrast=true] .profile-focus,[data-high-contrast=true] .experience-detail{border-color:var(--control-border);border-width:2px}
@media(max-width:820px){.profile-section{grid-template-columns:1fr;gap:30px}.profile-focus{padding:23px}.profile-intro h2{font-size:39px}}
@media(max-width:560px){#study-panel{font-size:14px}#study-panel h3{font-size:22px}#study-panel h4,.decision-list h3{font-size:18px!important}.profile-intro h2{font-size:35px}.profile-intro>p:not(.eyebrow){font-size:14px}.profile-focus h3{font-size:22px}.profile-focus{padding:20px}.profile-toolbox dl{grid-template-columns:1fr;gap:18px}.experience-detail-body{padding:4px 14px 17px}.experience-detail-body h4{font-size:17px}.experience-detail summary{font-size:14px;padding:12px 14px}.experience-detail-body p,.experience-detail-body li{font-size:14px}.timeline article>p:not(.timeline-date):not(.timeline-role){font-size:14px}}
@media print{.profile-section{display:block}.profile-focus{break-inside:avoid}details.experience-detail{break-inside:avoid}}