@layer reset, base, components, responsive;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-padding-top: 2rem; }
    body, h1, h2, h3, p, ul { margin: 0; }
    button, input, textarea, summary { font: inherit; }
    a { color: inherit; }
}

@layer base {
    :root {
        color-scheme: light dark;
        --paper: Canvas; --ink: CanvasText; --muted: CanvasText; --line: GrayText;
        --green: LinkText; --lime: Highlight; --on-lime: HighlightText; --white: Canvas;
        --soft: Canvas; --soft-hover: ButtonFace; --primary: ButtonFace; --on-primary: ButtonText;
        --primary-hover: ButtonFace; --focus: Highlight; --strong: CanvasText; --field-line: GrayText;
        --danger: CanvasText; --danger-line: GrayText; --danger-bg: Canvas;
        --mint: var(--soft); --on-mint: var(--ink); --lavender: var(--soft); --on-lavender: var(--ink);
        --sand: var(--soft); --on-sand: var(--ink); --blue: var(--soft); --on-blue: var(--ink);
        --rose: var(--soft); --on-rose: var(--ink);
        --art-bg: #07192b; --art-fg: #e6f0ff; --art-muted: #a3b7cd; --art-line: #294665; --art-panel: #0c253d;
        --shadow: 0 16px 44px -30px rgb(0 0 0 / .3);
        --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    }
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"] { color-scheme: dark; }
    @supports (color: light-dark(white, black)) {
        :root {
            --paper: light-dark(#edf3f9, #020710); --ink: light-dark(#142b45, #e3edff);
            --muted: light-dark(#4e637b, #99acc6); --line: light-dark(#c8d6e3, #23344f);
            --green: light-dark(#145f84, #72d5ff); --lime: #8ff5cb; --on-lime: #092c29;
            --white: light-dark(#ffffff, #071423); --soft: light-dark(#e1eaf4, #0b1c30);
            --soft-hover: light-dark(#d4e3ef, #102740); --primary: light-dark(#155d85, #81dbfb);
            --on-primary: light-dark(#ffffff, #061422); --primary-hover: light-dark(#0c4a6e, #b1ebff);
            --focus: light-dark(#946009, #ffd089); --strong: light-dark(#375374, #c1d3ed);
            --field-line: light-dark(#8eabc1, #527294);
            --danger: light-dark(#8c2d1c, #ffc0aa); --danger-line: light-dark(#bd7c66, #b77760);
            --danger-bg: light-dark(#fff0e7, #3d2820);
            --mint: light-dark(#dbeaf3, #10253a); --on-mint: light-dark(#1e5b77, #8acff0);
            --lavender: light-dark(#e4e7f5, #191c38); --on-lavender: light-dark(#554a78, #c0b5ef);
            --sand: light-dark(#eee8d8, #292215); --on-sand: light-dark(#685226, #eec77f);
            --blue: light-dark(#dceef4, #0c2839); --on-blue: light-dark(#225c73, #8bd5ed);
            --rose: light-dark(#f1e5e2, #2b1c26); --on-rose: light-dark(#784a5c, #e9afca);
        }
    }
    body { background: var(--paper); color: var(--ink); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
    a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
    a, button, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
    ::selection { background: var(--lime); color: var(--on-lime); }
    h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
    h1 { font-size: clamp(3rem, 6.4vw, 5.7rem); }
    h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
    h3 { font-size: 1.5rem; }
    em { color: var(--green); font-family: inherit; font-style: normal; font-weight: 500; }
    p { color: var(--muted); }
    .shell { max-width: 1264px; margin-inline: auto; padding-inline: 2.5rem; }
    .eyebrow { color: var(--green); font: 600 .69rem/1.6 var(--mono); letter-spacing: .12em; }
    .button { display: inline-flex; gap: 1.5rem; align-items: center; justify-content: space-between; min-height: 50px; padding: .85rem 1.3rem; border: 1px solid var(--primary); border-radius: 3px; background: var(--primary); color: var(--on-primary); font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .16s; }
    .button:hover { background: var(--primary-hover); }
    .button-quiet { border-color: var(--line); background: transparent; color: var(--ink); }
    .button-quiet:hover { background: var(--soft-hover); }
    .button-light { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
    .button-light:hover { background: #bafce1; }
    .text-link { display: inline-flex; align-items: center; gap: 1.3rem; font-size: .88rem; font-weight: 600; }
    .text-link span { font-size: 1.2rem; text-decoration: none; }
    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
    .skip-link { position: absolute; top: -100px; left: 1rem; padding: .8rem 1.2rem; z-index: 30; background: var(--primary); color: var(--on-primary); }
    .skip-link:focus { top: 1rem; }
    .notice { padding: 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
    .notice p { margin-top: .7rem; font-size: .86rem; }
}

@layer components {
    .site-header { max-width: 1264px; padding: 1.4rem 2.5rem; margin: auto; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--line); }
    .brand { display: flex; gap: .85rem; align-items: center; font-size: .86rem; font-weight: 650; text-decoration: none; line-height: 1.4; margin-right: auto; }
    .brand small { display: block; color: var(--muted); font-size: .67rem; font-weight: 400; margin-top: .15rem; }
    .brand-mark { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 44px; height: 44px; background: var(--primary); color: var(--on-primary); border-radius: 4px; font-size: 1.3rem; font-weight: 650; letter-spacing: -.1em; }
    .brand-mark span { display: inline; opacity: .65; }
    .site-header nav { display: flex; align-items: center; gap: 1.5rem; font-size: .78rem; font-weight: 550; }
    .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
    .site-header nav a:hover { text-decoration: underline; }
    .site-header nav a[aria-current="page"] { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
    .nav-contact { border: 1px solid var(--line); border-radius: 5px; padding: .65rem 1rem; }
    .nav-contact span { margin-left: 1rem; }
    .theme-picker { position: relative; flex-shrink: 0; z-index: 20; }
    .theme-picker summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; font-size: .76rem; list-style: none; }
    .theme-picker summary::-webkit-details-marker { display: none; }
    .theme-picker summary:hover, .theme-picker[open] summary { border-color: var(--green); background: var(--soft); }
    .theme-current { color: var(--muted); text-transform: capitalize; font-size: .68rem; }
    .theme-picker :is(form, .theme-options) { position: absolute; right: 0; top: calc(100% + .65rem); width: 210px; padding: .45rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
    .theme-picker :is(button, .theme-option) { width: 100%; min-height: 44px; display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 7px; font-size: .8rem; cursor: pointer; text-decoration: none; }
    .theme-picker :is(button, .theme-option):hover { background: var(--soft-hover); }
    .theme-picker button[aria-pressed="true"], .theme-option[aria-current="true"] { background: var(--soft); border-color: var(--line); color: var(--green); }
    .theme-check { margin-left: auto; font: .58rem var(--mono); }
    .theme-help { padding: .65rem .75rem .4rem; border-top: 1px solid var(--line); margin-top: .4rem; font-size: .7rem; line-height: 1.6; }
    .hero-lead { max-width: 640px; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.7; color: var(--strong); }
    .command-home > .site-header { max-width: none; padding-inline: max(2.5rem, calc((100vw - 1184px) / 2)); background: #030a14; color: #e3edff; --line: #203650; --muted: #a1b4cd; --white: #091729; --soft: #0c2138; --soft-hover: #142f49; --ink: #e3edff; --green: #80d6ff; --primary: #153d59; --on-primary: #b6e8ff; }
    .command-home > .site-header .brand-mark { border: 1px solid #3b7194; box-shadow: inset 0 0 14px #153d59; }
    .command-hero { position: relative; isolation: isolate; overflow: clip; padding: 1.4rem 1.5rem 0; background: #020710; color: #dceaff; --focus: #ffcf82; background-image: radial-gradient(ellipse at 50% 48%, #0b24415e, transparent 63%), radial-gradient(1px 1px at 16px 29px, #b8d9fba1 50%, transparent 100%), radial-gradient(1px 1px at 79px 103px, #93bde065 50%, transparent 100%), radial-gradient(1px 1px at 131px 63px, #dbe9ff8c 50%, transparent 100%); background-size: auto, 191px 173px, 281px 239px, 373px 317px; }
    .command-hero::before { content: ""; position: absolute; inset: 8% -18% 0 60%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, #163f7352, transparent 60%); }
    .command-kicker { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.6rem 1.5rem; max-width: 1200px; color: #92abc7; font: .56rem/1.7 var(--mono); letter-spacing: .13em; }
    .command-kicker > span:first-child { display: flex; gap: .7rem; align-items: center; }
    .signal-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #7aefbc; box-shadow: 0 0 7px #5ee3ab8c; }
    .command-deck { position: relative; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: 148px minmax(0, 1fr) 148px; grid-template-rows: 54px auto 60px; column-gap: 40px; padding: 30px 56px 24px; }
    .hud-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 9px #428bcb55); z-index: -1; }
    .console-rain { position: absolute; top: 8%; left: 5%; width: 90%; height: 82%; z-index: -1; pointer-events: none; opacity: .7; mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); }
    .console-rain[hidden], .console-effects-toggle[hidden] { display: none; }
    [data-console-decode] { position: relative; }
    .console-echo { position: absolute; inset: 0; pointer-events: none; }
    .console-echo::before { content: attr(data-glyphs); color: #b8ffdb; white-space: pre-wrap; text-shadow: -1px 0 #4cdbff80, 1px 0 #c091ff80; }
    .console-echo::after { content: attr(data-glyphs); position: absolute; inset: 0; white-space: pre-wrap; clip-path: inset(43% 0 46%); transform: translateX(2px); color: #7affd4; opacity: .65; }
    [data-console-active] > .console-copy { opacity: 0; }
    .hud-link-label { display: block; font-weight: inherit; }
    .console-effects-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .65rem; border: 1px solid #39765d; border-radius: 3px; color: #b8ffdb; background: #081e1a; font: .6rem/1.4 var(--mono); letter-spacing: .02em; cursor: pointer; }
    .console-effects-toggle:hover, .console-effects-toggle:focus-visible { border-color: #b8ffdb; background: #12382b; }
    .console-effects-toggle:disabled { cursor: default; color: #a5b8ce; border-color: #34465e; }
    .frame-halo { fill: none; stroke: #7bbdff; stroke-width: 12; opacity: .13; }
    .deck-heading { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 1.1rem; align-self: start; padding-top: .3rem; min-width: 0; }
    .deck-heading h1 { color: #e0eaff; font: 500 clamp(1rem, 1.7vw, 1.55rem)/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 16px #76b5eb45; }
    .deck-code, .deck-label { color: #8299b6; font: .45rem/1.6 var(--mono); letter-spacing: .08em; max-width: 85px; }
    .hud-sidebar { grid-row: 2; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: stretch; padding: .4rem 0 1rem; gap: 1rem; }
    .navigation-panel { grid-column: 1; }
    .communications-panel { grid-column: 3; }
    .hud-panel-title { align-self: center; min-width: 92px; border: 1px solid #315e85; padding: .4rem .6rem; color: #8ad8ff; background: #08182c; box-shadow: inset 0 0 12px #0b2c46; font: .73rem/1 var(--mono); letter-spacing: .14em; text-align: center; border-radius: 3px; }
    .communications-panel .hud-panel-title { color: #eca0ef; border-color: #684376; box-shadow: inset 0 0 12px #37204066; }
    .hud-instrument { border: 1px solid #2a3e56; padding: .75rem .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: 140px; background: linear-gradient(135deg, #0d1a28, #030c18); }
    .hud-instrument svg { color: #a9bdd5; width: 72px; height: 72px; }
    .hud-instrument > span { font: .43rem/1.7 var(--mono); letter-spacing: .07em; color: #a6bad4; text-align: center; }
    .hud-nav-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; justify-content: center; min-height: 140px; padding: .7rem .3rem; border: 1px solid #4f9c98; border-radius: 3px; background: radial-gradient(ellipse at top, #16404599, transparent 80%), #061522; color: #a2f2d2; text-align: center; text-decoration: none; box-shadow: inset 0 0 13px #21556d38, 0 0 8px #4ee6af19; transition: border-color .15s, background .15s; }
    .hud-nav-link::before, .hud-nav-link::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: #9aebd3; border-style: solid; }
    .hud-nav-link::before { top: -3px; left: -3px; border-width: 1px 0 0 1px; }
    .hud-nav-link::after { bottom: -3px; right: -3px; border-width: 0 1px 1px 0; }
    .hud-nav-link:hover { background: #17394a; border-color: #adffe0; }
    .hud-nav-link svg { width: 38px; height: 38px; }
    .hud-nav-link > span { font: 600 .67rem/1.6 var(--mono); letter-spacing: .03em; }
    .hud-nav-link small { display: block; font: .56rem/1.5 var(--mono); letter-spacing: 0; color: #a4bed0; margin-top: .2rem; }
    .hud-nav-link.secondary { min-height: 105px; color: #a8ccf3; border-color: #3a5571; background: #081623; box-shadow: none; }
    .hud-nav-link.secondary::before, .hud-nav-link.secondary::after { border-color: #5b7d9d; }
    .hud-nav-link.secondary svg { width: 28px; height: 28px; }
    .hud-readout { padding: 1.15rem .55rem; border: 1px solid #263b52; background: #06101d; margin-top: auto; min-height: 150px; }
    .readout-label { display: block; color: #a2b6ce; font: .45rem/1.6 var(--mono); letter-spacing: .06em; }
    .hud-readout strong { display: flex; align-items: baseline; gap: .4rem; margin-top: .55rem; font: .85rem/1 var(--mono); color: #a4e9d0; }
    .hud-readout strong span { font-size: .42rem; color: #a2b6ce; }
    .hud-readout .readout-word { font-size: .66rem; flex-wrap: wrap; }
    .signal-bars { display: flex; gap: 3px; align-items: end; margin-block: .7rem .5rem; height: 15px; }
    .signal-bars i { flex: 1; height: 45%; background: #3cb699; opacity: .8; }
    .signal-bars i:nth-child(2n) { height: 75%; }
    .signal-bars i:nth-child(3n) { height: 100%; background: #72d2b3; }
    .signal-bars i:nth-child(4n) { height: 60%; }
    .comms-bars i { background: #a16dc6; }
    .comms-bars i:nth-child(3n) { background: #d18cdd; }
    .readout-caption { font: .42rem/1.6 var(--mono); color: #a2b6ce; }
    .planet-stage { grid-column: 2; grid-row: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: .2rem; }
    .planet-eyebrow { color: #a5c5e4; font: .62rem/1.6 var(--mono); letter-spacing: .1em; text-align: center; margin-bottom: .35rem; }
    .planet-eyebrow span { color: #edb76c; padding-inline: .5rem; }
    .planet-figure { display: flex; flex-direction: column; align-items: center; margin: 0; width: 100%; }
    .planet-viewport { position: relative; width: min(100%, 650px); aspect-ratio: 1; flex-shrink: 0; }
    .planet-viewport[data-earth-ready="true"] { cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; }
    .planet-viewport[data-spin-state="dragging"] { cursor: grabbing; }
    .orbital-hud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: perspective(1100px) rotateX(var(--hud-pitch, 0deg)) rotateY(var(--hud-yaw, 0deg)); transform-origin: center; }
    .orbit-faint { fill: none; stroke: #315273; stroke-width: 1; opacity: .5; }
    .orbit-sectors { filter: drop-shadow(0 0 4px #d28a3747); }
    .orbit-segment { fill: #10233880; stroke: #d69751; stroke-width: 1; }
    .orbit-segment:nth-child(4n) { fill: #75512d40; stroke: #f1b869; }
    .orbit-amber { fill: none; stroke: #f8b65f; stroke-width: 1.6; filter: drop-shadow(0 0 5px #f9a748b3); }
    .orbit-scale { fill: none; stroke: #56819f; stroke-width: 4; stroke-dasharray: 1 10; opacity: .8; }
    .orbit-inner { fill: #03152945; stroke: #2d648c; stroke-width: 1; }
    .orbit-grid { fill: none; stroke: #286aa4; stroke-width: 1; opacity: .35; }
    .orbit-crosshair { fill: none; stroke: #e39b48; stroke-width: 1.6; filter: drop-shadow(0 0 5px #e39b4870); }
    .orbit-bracket { fill: none; stroke: #71d3fb; stroke-width: 1; opacity: .6; }
    .orbit-type { font: 7px var(--mono); letter-spacing: 2px; fill: #9eb6ce; }
    .earth-globe { position: absolute; top: 20%; left: 20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #091d39; border: 1px solid #9bd9ff; box-shadow: 0 0 6px #b0e4ff, 0 0 25px #369cf9b3, 0 0 65px #1c6baf45; overflow: hidden; }
    .earth-globe img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.025); filter: saturate(.85) contrast(1.12); }
    .earth-globe canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
    .earth-globe[data-earth-state="ready"] { transform: translate3d(var(--earth-offset-x, 0px), var(--earth-offset-y, 0px), 0); }
    .earth-globe[data-earth-state="ready"] { cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; }
    .earth-globe[data-spin-state="dragging"] { cursor: grabbing; }
    .earth-help { display: none; max-width: 30rem; margin: .5rem 0 0; text-align: center; color: #94b0c9; font: .58rem/1.6 var(--mono); letter-spacing: .015em; }
    .planet-figure:has(.earth-globe[data-earth-state="ready"]) .earth-help { display: block; }
    .earth-globe[data-earth-state="ready"] canvas { display: block; }
    .earth-globe[data-earth-state="ready"] img { opacity: 0; }
    .earth-globe[data-earth-state="ready"]::after { display: none; }
    .earth-globe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 30% 30%, #88cfff08 30%, #00142c33 58%, #000714b3 100%), linear-gradient(110deg, transparent 45%, #001024bd); box-shadow: inset 4px 0 13px #9cdcff80, inset -16px -8px 30px #000711b3; }
    .planet-tag { position: absolute; top: 47%; font: .43rem/1.8 var(--mono); letter-spacing: .05em; color: #a0bdd6; }
    .planet-tag b { font-weight: 400; color: #71c3e1; font-size: .39rem; }
    .tag-left { left: 2%; text-align: left; }
    .tag-right { right: 2%; text-align: right; }
    .planet-figure figcaption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; color: #9cc4dc; font: .52rem/1.5 var(--mono); letter-spacing: .13em; margin-top: -.15rem; }
    .motion-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .65rem; border: 1px solid #3f6c89; border-radius: 3px; color: #b8e8ff; background: #081a2b; font: .6rem/1.4 var(--mono); letter-spacing: .02em; cursor: pointer; }
    .motion-toggle[hidden] { display: none; }
    .motion-toggle:hover, .motion-toggle:focus-visible { border-color: #a7e9ff; background: #10344b; }
    .motion-toggle:disabled { cursor: default; color: #a5b8ce; border-color: #34465e; }
    .command-deck:focus-within .orbit-amber { stroke: #ffd48f; }
    .hud-nav-link:focus-visible, .engage-link:focus-visible { background: #164536; border-color: #b1ffe2; }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
        .hud-nav-link:hover, .engage-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 18px #36dca12e, 0 0 18px #43d7a047; }
        .hud-nav-link svg, .engage-link svg { transition: transform .18s; }
        .hud-nav-link:hover svg, .engage-link:hover svg { transform: scale(1.12); }
    }
    .deck-actions { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end; padding: 1.15rem 14% 0; }
    .deck-footnote, .deck-log-link { display: flex; align-items: center; gap: .5rem; font: .47rem/1.6 var(--mono); letter-spacing: .07em; color: #a5b8ce; min-height: 44px; }
    .deck-log-link { justify-self: end; text-decoration: none; }
    .deck-log-link span { color: #eeb266; font-size: 1rem; }
    .deck-log-link:hover { color: white; text-decoration: underline; }
    .engage-link { display: flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 46px; min-width: 180px; border: 1px solid #6aefb4; background: linear-gradient(#0e332c, #09221f); color: #a7ffd6; padding: .6rem 1.2rem; font: 600 .9rem/1.1 var(--mono); letter-spacing: .1em; text-decoration: none; border-radius: 3px; box-shadow: inset 0 0 10px #3fcb8a38, 0 0 12px #50d89a30; }
    .engage-link svg { width: 19px; height: 19px; }
    .engage-link:hover { background: #154d3c; color: #daffec; border-color: #bdffe0; }
    .command-caption { max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem 2rem; }
    .command-caption p { color: #a0b5d0; font-size: .7rem; }
    .command-caption strong { color: #dbeaff; font-weight: 500; }
    .command-caption a { flex-shrink: 0; color: #a0b5d0; font: .6rem/1.8 var(--mono); }
    .caption-credits { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem 1rem; }
    .coding-workspace { padding-block: 3.8rem 4.5rem; }
    .workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.7rem; }
    .workspace-heading h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); margin-top: .55rem; }
    .workspace-heading > p { font-size: .87rem; padding-bottom: .2rem; }
    .workspace-frame { margin: 0; overflow: hidden; border: 1px solid #304455; border-radius: 10px; background: #0c1924; box-shadow: 0 24px 70px #02081130; }
    .workspace-topline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid #253a46; color: #9db7c4; font: .59rem/1.5 var(--mono); letter-spacing: .08em; }
    .workspace-topline > span:first-child { display: flex; align-items: center; gap: .6rem; }
    .workspace-edition { color: #d2b38c; }
    .workspace-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 52%, #294048 0, #152830 46%, #0a1923 78%); touch-action: pan-y pinch-zoom; }
    .workspace-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
    .workspace-stage canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
    .workspace-stage[data-workspace-state="ready"] canvas { display: block; }
    .workspace-stage[data-workspace-state="ready"] img { opacity: 0; }
    .workspace-caption { padding: 1.15rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-top: 1px solid #253a46; }
    .workspace-caption p { margin: 0; }
    .workspace-activity { display: block; color: #d8e9e3; font: 500 .78rem/1.7 var(--mono); }
    .workspace-caption small { display: block; max-width: 38rem; margin-top: .3rem; color: #9db1be; font: .67rem/1.7 system-ui, sans-serif; }
    .workspace-controls { display: flex; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
    .workspace-controls[hidden] { display: none; }
    .workspace-controls button, .workspace-controls select { min-height: 44px; padding: .6rem .8rem; border: 1px solid #4a6875; border-radius: 4px; color: #d0eee3; background: #172c35; font: .63rem/1.4 var(--mono); cursor: pointer; }
    .workspace-controls button:hover, .workspace-controls button:focus-visible, .workspace-controls select:focus-visible { background: #244a50; border-color: #9bddc6; }
    .workspace-selector { display: flex; align-items: center; gap: .5rem; color: #9db1be; font: .63rem/1.4 var(--mono); }
    .workspace-select { max-width: 15rem; }
    .workspace-controls button:disabled { cursor: default; color: #b2bec5; border-color: #3c515d; }
    @media (max-width: 1000px) { .workspace-caption { align-items: flex-start; flex-direction: column; gap: 1rem; } }
    @media (max-width: 760px) {
        .coding-workspace { padding-block: 2rem 3rem; }
        .workspace-heading { flex-direction: column; align-items: flex-start; gap: .8rem; }
        .workspace-stage { aspect-ratio: 4 / 5; }
        .workspace-topline { padding-inline: .9rem; font-size: .5rem; }
        .workspace-edition { display: none; }
        .workspace-caption { padding: 1rem; }
        .workspace-controls { flex-shrink: 1; width: 100%; min-width: 0; }
        .workspace-selector { width: 100%; min-width: 0; }
        .workspace-select { min-width: 0; flex: 1; max-width: 100%; }
        .workspace-controls button { padding-inline: .6rem; font-size: .6rem; }
    }
    .facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.7rem; }
    .facts > div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
    .facts > div:first-child { padding-left: 0; border: 0; }
    .facts strong { display: block; font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
    .facts span { color: var(--muted); font-size: .73rem; }
    .work-section { padding-top: 5rem; padding-bottom: 4.5rem; }
    .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
    .section-heading h2 { margin-top: .7rem; font-size: 2.6rem; }
    .section-heading > p { font-size: .86rem; padding-bottom: .25rem; }
    .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
    .project-card { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--white); display: flex; flex-direction: column; box-shadow: var(--shadow); }
    .project-card:hover, .project-card:focus-within { border-color: var(--green); }
    .card-top { display: flex; justify-content: space-between; align-items: center; padding: 1.15rem 1.25rem .8rem; }
    .card-top .eyebrow { font-size: .59rem; letter-spacing: .07em; }
    .project-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--line); background: var(--soft); font: .65rem var(--mono); color: var(--green); }
    .card-illustration { height: 185px; margin: .2rem .8rem 0; border-radius: 7px; overflow: hidden; position: relative; }
    .illustration-1 { display: flex; flex-direction: column; background: var(--mint); padding: 1.5rem 1.6rem; }
    .mini-label { font: .55rem var(--mono); letter-spacing: .08em; color: var(--on-mint); }
    .chart-bars { display: flex; height: 115px; gap: 9px; align-items: flex-end; margin-top: .4rem; border-bottom: 1px solid var(--on-mint); }
    .chart-bars i { flex: 1; background: var(--on-mint); height: 32%; border-radius: 3px 3px 0 0; }
    .chart-bars i:nth-child(2) { height: 43%; background: #689fbe; }
    .chart-bars i:nth-child(3) { height: 38%; }
    .chart-bars i:nth-child(4) { height: 61%; background: #689fbe; }
    .chart-bars i:nth-child(5) { height: 54%; }
    .chart-bars i:nth-child(6) { height: 76%; background: #689fbe; }
    .chart-bars i:nth-child(7) { height: 70%; }
    .chart-bars i:nth-child(8) { height: 92%; background: #d6a467; }
    .illustration-2 { background: var(--lavender); padding: 1.6rem 1.1rem; display: grid; gap: .4rem; align-content: center; }
    .prompt-line { background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: .55rem .65rem; font-size: .67rem; color: var(--on-lavender); }
    .prompt-line span { font: .58rem var(--mono); color: var(--on-lavender); margin-right: .75rem; }
    .illustration-3 { background: var(--sand); display: grid; place-content: center; text-align: center; gap: .7rem; }
    .illustration-3 .mini-label { color: var(--on-sand); }
    .entitlement-symbol { font: 700 4rem/1 Georgia, serif; color: var(--on-sand); letter-spacing: -.08em; }
    .entitlement-symbol span { font: 1.4rem var(--mono); vertical-align: top; color: var(--on-sand); padding-left: .3rem; }
    .card-copy { padding: 1.5rem 1.25rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
    .card-copy h3 { font-size: 1.4rem; letter-spacing: -.035em; }
    .card-copy h3 a { text-decoration: none; }
    .card-copy h3 a:hover { text-decoration: underline; }
    .card-copy > p { font-size: .83rem; line-height: 1.8; margin-top: .85rem; }
    .tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: .4rem; margin-block: 1.3rem 1.5rem; }
    .tags li { border: 1px solid var(--line); border-radius: 5px; background: var(--soft); padding: .2rem .5rem; color: var(--muted); font: .62rem/1.7 var(--mono); }
    .card-copy .text-link { margin-top: auto; font-size: .74rem; }
    .card-actions { margin-top: auto; display: flex; flex-direction: column; gap: .85rem; }
    .card-actions .button { min-height: 44px; padding: .65rem .85rem; font-size: .75rem; }
    .card-actions .text-link { margin-top: 0; }
    .project-host { margin-top: .8rem; font: .6rem/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
    .publication-note { padding-block: 1.5rem; font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--line); }
    .publication-note strong { color: var(--ink); }
    .supporting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.1rem; }
    .supporting-grid .project-card { display: grid; grid-template-columns: 135px 1fr; }
    .supporting-grid .card-top { grid-column: span 2; padding-bottom: .4rem; }
    .supporting-grid .card-illustration { height: 155px; margin: .8rem 0 .8rem .8rem; display: grid; place-content: center; text-align: center; }
    .supporting-grid .card-copy { padding: .8rem 1.25rem 1.25rem; }
    .supporting-grid .card-copy h3 { font-size: 1.18rem; }
    .supporting-grid .tags { margin-block: .75rem 1rem; }
    .illustration-4 { background: var(--blue); }
    .illustration-4 .mini-label { color: var(--on-blue); }
    .language-symbol { font: 2rem Georgia, serif; padding-bottom: .7rem; color: var(--on-blue); }
    .language-symbol span { display: block; font-size: 2.1rem; }
    .illustration-4 .mini-label { font-size: .4rem; }
    .illustration-5 { background: var(--rose); }
    .calendar-symbol span { display: block; color: var(--on-rose); font: .5rem var(--mono); letter-spacing: .12em; margin-bottom: .7rem; }
    .calendar-symbol strong { font: italic 1.4rem/1.3 Georgia, serif; color: var(--on-rose); }
    .evidence-note { margin-top: 1.25rem; max-width: 780px; font-size: .72rem; }
    .skills-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: center; padding-block: 4rem; border-top: 1px solid var(--line); }
    .skills-intro h2 { margin-block: .9rem 1.4rem; }
    .skills-intro > p:not(.eyebrow) { font-size: .9rem; }
    .skills-intro .skills-method { margin-top: 1.4rem; font-size: .7rem; line-height: 1.8; }
    .skills-chart { min-width: 0; margin: 0; padding: 1.8rem 2rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
    .skills-chart figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .75rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 600; }
    .skills-asof { padding: .35rem .5rem; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; color: var(--green); font: .59rem var(--mono); white-space: nowrap; }
    .skills-bars { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.5rem; }
    .skills-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
    .skills-label { font-size: .88rem; font-weight: 600; }
    .skills-years { color: var(--muted); font-size: .72rem; white-space: nowrap; }
    .skills-years-number { color: var(--ink); font: 600 1.2rem var(--mono); font-variant-numeric: tabular-nums; margin-right: .15rem; }
    .skills-bar { display: block; width: 100%; height: 18px; overflow: visible; }
    .skills-bar-track { fill: var(--soft); }
    .skills-bar-fill { fill: var(--green); }
    .skills-bar-grid line { stroke: var(--field-line); stroke-width: .6px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: .6; }
    .skills-axis { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); font: .59rem var(--mono); }
    .skills-snapshot-note { margin-top: 1rem; font-size: .7rem; }
    .experience-section { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding-block: 4rem; border-top: 1px solid var(--line); }
    .experience-section h2 { margin-block: .9rem 1.4rem; }
    .experience-section > div > p:not(.eyebrow) { margin-bottom: 1.5rem; font-size: .9rem; }
    .experience-list { display: grid; gap: 1.6rem; }
    .experience-list > div { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
    .experience-list span { font: .59rem var(--mono); color: var(--green); letter-spacing: .09em; }
    .experience-list h3 { font-size: 1.2rem; margin-top: .5rem; }
    .experience-list p { font-size: .8rem; margin-top: .6rem; }
    .contact-banner { max-width: 1184px; margin: 2rem auto 4.5rem; border: 1px solid var(--art-line); border-radius: 4px; background: var(--art-bg); padding: 2.8rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: var(--art-fg); }
    .contact-banner .eyebrow { color: #9fd6f5; margin-bottom: .8rem; }
    .site-footer { display: grid; grid-template-columns: 1fr auto; max-width: 1264px; margin: auto; padding: 2rem 2.5rem 1.5rem; border-top: 1px solid var(--line); gap: 1.8rem; }
    .site-footer strong { font-size: .9rem; }
    .site-footer p { font-size: .72rem; margin-top: .3rem; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: .73rem; align-items: start; }
    .site-footer > small { grid-column: span 2; color: var(--muted); font: .58rem var(--mono); }
    .page-intro { padding-block: 4.5rem 3rem; }
    .page-intro h1 { margin-block: 1rem 1.8rem; font-size: clamp(3rem, 5vw, 4.6rem); }
    .engineering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    .principle { border: 1px solid var(--line); background: var(--white); border-radius: 10px; padding: 2rem; }
    .principle-number { font: .68rem var(--mono); color: var(--green); }
    .principle h2 { font-size: 1.65rem; margin-block: 1.2rem 1rem; }
    .principle p { font-size: .88rem; }
    .principle code { display: block; padding: 1rem; background: var(--soft); border-radius: 7px; font: .7rem/1.9 var(--mono); margin-top: 1.5rem; }
    .stack-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding-block: 4.5rem; }
    .stack-section h2 { margin-block: 1rem 1.3rem; }
    .stack-section p { font-size: .9rem; }
    .stack-list { list-style: none; padding: 0; }
    .stack-list li { border-bottom: 1px solid var(--line); padding: 1rem 0; }
    .stack-list strong { display: block; font-size: .9rem; }
    .stack-list span { font-size: .76rem; color: var(--muted); }
    .evidence-panel { padding-block: 2.5rem 4.5rem; }
    .evidence-panel h2 { margin-block: 1rem 1.5rem; }
    .evidence-panel > p:not(.eyebrow) { max-width: 850px; font-size: .9rem; margin-bottom: 1rem; }
    .case-study { padding-block: 2.5rem 4rem; }
    .breadcrumb-list { display: flex; flex-wrap: wrap; gap: .4rem .7rem; list-style: none; margin: 0; padding: 0; align-items: baseline; }
    .breadcrumb-list [itemprop="name"][aria-current] { font: .75rem var(--mono); color: var(--muted); opacity: .75; }
    .back-link { font: .75rem var(--mono); color: var(--muted); }
    .case-header { padding-block: 3rem; max-width: 900px; }
    .case-header h1 { font-size: clamp(3rem, 5.3vw, 4.8rem); margin-block: 1rem 1.5rem; }
    .case-header .tags li { font-size: .66rem; }
    .case-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 4.5rem; padding-block: 2.5rem; border-top: 1px solid var(--line); }
    .case-sidebar nav { display: grid; gap: .8rem; margin-block: 1rem 2rem; font-size: .78rem; }
    .case-sidebar .notice { font-size: .78rem; }
    .case-sidebar .notice p { font-size: .72rem; }
    .case-sections section { padding-bottom: 3rem; }
    .case-sections h2 { font-size: 2rem; margin-block: .75rem 1.25rem; }
    .case-sections p:not(.eyebrow) { font-size: .94rem; line-height: 1.9; }
    .next-step { border-top: 1px solid var(--line); padding-top: 2rem; }
    .next-step h2 { font-size: 2rem; }
    .next-step p { margin-block: 1rem; font-size: .9rem; }
    .resume-page { padding-block: 3.5rem 2rem; }
    .resume-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .46fr); align-items: center; gap: 3rem; padding-bottom: 2.5rem; }
    .resume-header h1 { font-size: clamp(2.8rem, 4.8vw, 4.6rem); margin-block: 1rem .9rem; overflow-wrap: anywhere; }
    .resume-subtitle { font: .8rem/1.7 var(--mono); color: var(--green); margin-bottom: 1.3rem; }
    .resume-subtitle > span[aria-hidden] { color: var(--muted); padding-inline: .5rem; }
    .resume-header .hero-lead { font-size: 1.03rem; }
    .resume-contact { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: .76rem; overflow-wrap: anywhere; }
    .resume-contact > a { display: flex; align-items: center; min-height: 44px; gap: .5rem; }
    .resume-contact .eyebrow { font-size: .56rem; }
    .resume-print-note { font-size: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
    .resume-nav { display: flex; gap: 2rem; flex-wrap: wrap; border-block: 1px solid var(--line); padding-block: .4rem; }
    .resume-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; text-decoration: none; }
    .resume-nav a:hover { color: var(--green); text-decoration: underline; }
    .resume-overview { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1rem 4rem; padding-block: 3rem; border-bottom: 1px solid var(--line); }
    .resume-overview > .eyebrow { grid-column: 1 / -1; }
    .resume-overview h2 { font-size: 2.05rem; line-height: 1.25; }
    .resume-overview > div { display: grid; gap: .85rem; font-size: .88rem; }
    .resume-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; padding-block: 3rem; }
    .resume-section-heading { margin-bottom: 2rem; }
    .resume-section-heading h2, .resume-panel h2 { font-size: 1.9rem; margin-top: .8rem; }
    .resume-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; }
    .resume-role { position: relative; padding: 0 0 2rem 1.5rem; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .resume-role::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--green); border-radius: 50%; background: var(--paper); left: -4px; top: .65rem; }
    .resume-role:last-child { border-bottom: 0; }
    .resume-role-top { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
    .resume-role h3 { font-size: 1.55rem; }
    .resume-current { color: var(--green); border: 1px solid var(--line); border-radius: 4px; background: var(--soft); padding: .3rem .45rem; font: .52rem var(--mono); }
    .resume-role-title { font-size: .87rem; color: var(--strong); margin-top: .4rem; font-weight: 600; }
    .resume-role-meta { display: grid; gap: .3rem; margin-top: .6rem; font: .64rem/1.7 var(--mono); }
    .resume-role > ul { margin-top: 1.1rem; padding-left: 1rem; display: grid; gap: .7rem; font-size: .86rem; color: var(--muted); line-height: 1.8; }
    .resume-sidebar { display: grid; gap: 1.3rem; align-content: start; }
    .resume-panel { padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
    .resume-panel h3 { font-size: .85rem; line-height: 1.6; margin-top: 1.3rem; }
    .resume-panel p { font-size: .78rem; margin-top: .6rem; }
    .resume-panel > .text-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 1.25rem; font-size: .74rem; }
    .resume-skill-group h3 { font-size: .73rem; color: var(--muted); }
    .resume-skill-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin-top: .65rem; }
    .resume-skill-list li { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); color: var(--strong); font-size: .68rem; }
    .resume-distinction { display: inline-block; margin-top: .9rem; color: var(--green); font: .67rem var(--mono); }
    .resume-note { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; gap: 2rem; justify-content: space-between; align-items: center; }
    .resume-note p { max-width: 650px; font-size: .72rem; }
    .resume-note a { flex-shrink: 0; font-size: .76rem; }
    .contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding-block: 4.5rem 5rem; }
    .contact-intro h1 { font-size: clamp(3rem, 5vw, 4.8rem); margin-block: 1rem 1.8rem; }
    .contact-intro > p:not(.eyebrow) { margin-bottom: 1.25rem; }
    .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.4rem; margin-bottom: .25rem; }
    .privacy-note { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--line); font-size: .8rem; }
    .privacy-note p { margin-block: .5rem 1rem; }
    .contact-form-panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 2rem; }
    .contact-form-panel h2 { font-size: 1.8rem; margin-bottom: .6rem; }
    .form-note { color: var(--muted); font-size: .72rem; margin-block: .75rem 1.5rem; }
    .form-field { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
    .form-field label { font-size: .82rem; font-weight: 600; }
    .form-field label span { color: var(--muted); font-weight: 400; }
    .form-field input, .form-field textarea { width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--field-line); border-radius: 7px; background: var(--white); color: var(--ink); font-size: 1rem; }
    .form-field textarea { resize: vertical; min-height: 160px; }
    .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: 1; }
    .form-field small { color: var(--muted); font-size: .68rem; }
    .validation-summary { color: var(--danger); font-size: .8rem; }
    .validation-summary-errors { margin-block: 1rem; padding: 1rem; border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: 7px; }
    .validation-summary ul { padding-left: 1rem; }
    .validation-summary-valid { display: none; }
    .success-message { padding-block: 2rem; }
    .success-message h2 { margin-top: 1rem; }
    .success-message p { font-size: .9rem; margin-block: 1.5rem; }
    .prose-page { max-width: 880px; padding-block: 4rem; }
    .prose-page h1 { margin-block: 1rem 2rem; }
    .prose-page h2 { font-size: 1.6rem; margin-block: 2rem 1rem; }
    .prose-page p { margin-bottom: 1.1rem; }
    .inbox-item { border-top: 1px solid var(--line); padding-block: 1.5rem; overflow-wrap: anywhere; }
    .message-body { white-space: pre-wrap; }
    .ai-chat { position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 50; font-size: 1rem; }
    .ai-chat-fab { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; min-width: 56px; min-height: 56px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
    .ai-chat-fab:is(:hover, :focus-visible) { transform: translateY(-2px); }
    .ai-chat-fab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
    .ai-chat-fab-label { font-size: .82rem; font-weight: 600; }
    .ai-chat-panel { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + .9rem); width: min(23rem, calc(100vw - 2.5rem)); height: min(30rem, calc(100dvh - 8.5rem)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
    .ai-chat-panel[hidden] { display: none; }
    .ai-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
    .ai-chat-title { display: grid; }
    .ai-chat-title strong { font-size: .9rem; }
    .ai-chat-title small { font-size: .68rem; color: var(--muted); }
    .ai-chat-close { border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font-size: .72rem; padding: .4rem .6rem; cursor: pointer; }
    .ai-chat-close:is(:hover, :focus-visible) { background: var(--soft); }
    .ai-chat-log { flex: 1; overflow-y: auto; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
    .ai-chat-msg { max-width: 88%; padding: .55rem .75rem; border-radius: 10px; font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
    .ai-chat-msg-user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-start-end-radius: 3px; }
    .ai-chat-msg-bot { align-self: flex-start; background: var(--soft); border: 1px solid var(--line); border-start-start-radius: 3px; }
    .ai-chat-msg-bot.pending { color: var(--muted); letter-spacing: .15em; }
    .ai-chat-msg-bot.error { border-color: var(--line); color: var(--muted); font-size: .76rem; }
    .ai-chat-composer { display: flex; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
    .ai-chat-input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: .82rem; }
    .ai-chat-input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
    .ai-chat-send { border: 1px solid var(--line); border-radius: 8px; background: var(--primary); color: var(--on-primary); font-size: .78rem; padding: .55rem .85rem; cursor: pointer; }
    .ai-chat-send:disabled { opacity: .55; cursor: default; }
    .ai-chat-note { padding: 0 .9rem .6rem; font-size: .62rem; line-height: 1.5; color: var(--muted); }
    @media (max-width: 480px) {
        .ai-chat { inset-inline-end: .9rem; inset-block-end: .9rem; }
        .ai-chat-fab-label { display: none; }
        .ai-chat-fab { padding: 0 1.05rem; }
        .ai-chat-panel { position: fixed; inset-inline: .9rem; inset-block-end: 5.6rem; width: auto; height: min(30rem, calc(100dvh - 7.5rem)); }
    }
    @media print { .ai-chat { display: none; } }
    .coffee-fab { position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 49; display: flex; align-items: center; gap: .5rem; min-width: 52px; min-height: 52px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: light-dark(#e8963c, #f8b65f); color: #1f1206; box-shadow: var(--shadow); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
    .coffee-fab:is(:hover, :focus-visible) { transform: translateY(-2px); }
    .coffee-fab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
    .coffee-fab-label { font-size: .8rem; font-weight: 600; }
    .has-coffee-fab .ai-chat { inset-block-end: 5.6rem; }
    .support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; padding-block: 0 4rem; }
    .support-options { display: grid; gap: 1.5rem; }
    .support-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: var(--shadow); }
    .support-card h2 { font-size: 1.35rem; margin-bottom: .8rem; }
    .support-card h2 span { color: var(--muted); font-size: .85rem; font-weight: 500; }
    .support-card p { margin-bottom: 1rem; font-size: .92rem; line-height: 1.65; }
    .evm-address-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-block: .4rem .9rem; }
    .evm-address { padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font: .8rem/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; }
    .evm-copy { padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: .74rem var(--mono); cursor: pointer; }
    .evm-copy:is(:hover, :focus-visible) { background: var(--soft); }
    .evm-copy.copied { color: var(--green); border-color: var(--green); }
    .support-hint { font-size: .82rem; color: var(--muted); }
    .metamask-zone { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
    .metamask-zone[hidden] { display: none; }
    .metamask-label { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
    .preset-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .9rem; }
    .preset-chip { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--ink); font: .76rem var(--mono); cursor: pointer; }
    .preset-chip:is(:hover, :focus-visible) { border-color: var(--primary); }
    .donate-amount { width: 7.5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: .8rem var(--mono); }
    .donate-amount:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
    .metamask-send { gap: .8rem; min-height: 44px; padding: .7rem 1.1rem; }
    .metamask-send:disabled { opacity: .55; cursor: default; }
    .donate-status { min-height: 1.2em; font-size: .8rem; color: var(--green); overflow-wrap: anywhere; }
    .donate-status:empty { margin: 0; }
    .support-disclaimer { align-self: start; }
    @media (max-width: 900px) {
        .support-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
        .coffee-fab { inset-inline-end: .9rem; inset-block-end: .9rem; }
        .coffee-fab-label { display: none; }
        .coffee-fab { padding: 0 .95rem; }
        .has-coffee-fab .ai-chat { inset-block-end: 5.2rem; }
    }
    @media print { .coffee-fab { display: none; } }
}

@layer responsive {
    @media (max-width: 1000px) {
        .theme-current { display: none; }
        .site-header nav { gap: 1rem; }
        .command-deck { grid-template-columns: 112px minmax(0, 1fr) 112px; grid-template-rows: 42px auto 50px; column-gap: 18px; padding: 24px 32px 20px; }
        .deck-code, .deck-label { display: none; }
        .hud-sidebar { gap: .6rem; padding-block: .2rem .5rem; }
        .hud-instrument { min-height: 76px; padding: .5rem .3rem; gap: .4rem; }
        .hud-instrument svg { width: 44px; height: 44px; }
        .hud-nav-link { min-height: 85px; padding-block: .55rem; }
        .hud-nav-link.secondary { min-height: 64px; }
        .hud-nav-link.secondary svg { display: none; }
        .hud-nav-link > span { font-size: .62rem; letter-spacing: 0; }
        .hud-nav-link small { font-size: .52rem; }
        .hud-readout { min-height: 84px; padding: .6rem .4rem; }
        .hud-readout strong { font-size: .7rem; }
        .hud-readout .readout-word { font-size: .56rem; }
        .hud-readout strong span { font-size: .37rem; }
        .signal-bars { height: 10px; margin-block: .45rem .35rem; }
        .planet-viewport { width: min(100%, 48vw); }
        .deck-actions { padding-inline: 9%; }
        .deck-footnote, .deck-log-link { font-size: .41rem; }
        .engage-link { min-width: 154px; }
        .command-caption { flex-direction: column; text-align: center; gap: .5rem; }
        .project-grid { gap: .7rem; }
        .card-copy { padding: 1.2rem 1rem; }
        .card-copy h3 { font-size: 1.22rem; }
        .supporting-grid .project-card { grid-template-columns: 100px 1fr; }
        .skills-section, .experience-section { gap: 3rem; }
        .contact-banner { margin-inline: 2.5rem; }
        .contact-page { gap: 3rem; }
    }
    @media (max-width: 760px) {
        .shell { padding-inline: 1.3rem; }
        .site-header { padding: 1.1rem 1.3rem; gap: .8rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
        .site-header nav { grid-column: span 2; grid-row: 2; gap: .4rem .7rem; justify-content: space-between; flex-wrap: wrap; font-size: .75rem; }
        .theme-picker { grid-column: 2; grid-row: 1; }
        .theme-picker summary { padding: .55rem; }
        .brand { gap: .6rem; font-size: .8rem; }
        .brand small { font-size: .6rem; }
        .nav-contact { padding: .5rem .7rem; }
        .command-home > .site-header { padding: 1.1rem 1.3rem; }
        .command-hero { padding: 1.2rem .65rem 0; }
        .command-kicker { max-width: 540px; padding: 0 .8rem 1rem; font-size: .43rem; letter-spacing: .06em; }
        .command-kicker > span:last-child { display: none; }
        .command-deck { max-width: 540px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 46px auto auto 62px; column-gap: 1rem; padding: 24px 24px 26px; }
        .deck-heading { grid-column: 1 / -1; padding-top: .05rem; }
        .deck-heading h1 { font-size: clamp(.8rem, 3.2vw, 1.1rem); letter-spacing: .09em; }
        .planet-stage { grid-column: 1 / -1; grid-row: 2; padding: .15rem 0 1.2rem; }
        .planet-eyebrow { font-size: .56rem; letter-spacing: .04em; }
        .planet-eyebrow span { padding-inline: .25rem; }
        .planet-viewport { width: min(100%, 340px); }
        .earth-globe { top: 20%; left: 20%; width: 60%; }
        .planet-tag { font-size: .34rem; }
        .planet-tag b { font-size: .31rem; }
        .planet-figure figcaption { font-size: .43rem; letter-spacing: .09em; }
        .hud-sidebar { grid-row: 3; padding: 0; gap: .65rem; align-self: start; }
        .navigation-panel { grid-column: 1; }
        .communications-panel { grid-column: 2; }
        .hud-panel-title { min-width: 74px; font-size: .64rem; }
        .hud-instrument, .hud-readout { display: none; }
        .hud-nav-link, .hud-nav-link.secondary { min-height: 95px; }
        .hud-nav-link > span { font-size: .65rem; }
        .hud-nav-link small { font-size: .53rem; }
        .deck-actions { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: center; padding: 1rem 0 0; }
        .deck-footnote, .deck-log-link { display: none; }
        .engage-link { min-width: 160px; }
        .command-caption { padding: 1.3rem .8rem 1.6rem; max-width: 540px; }
        .command-caption p { font-size: .68rem; }
        .command-caption a { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .56rem; }
        .facts { grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; }
        .facts > div { padding-left: 0; border: 0; }
        .facts strong { font-size: .94rem; }
        .facts span { font-size: .67rem; }
        .work-section { padding-block: 3rem; }
        .section-heading { display: block; margin-bottom: 1.5rem; }
        .section-heading h2 { font-size: 2.2rem; }
        .section-heading > p { margin-top: 1rem; font-size: .8rem; }
        .project-grid { grid-template-columns: 1fr; gap: 1.2rem; }
        .card-illustration { height: 200px; }
        .card-copy { padding: 1.4rem; }
        .card-copy h3 { font-size: 1.6rem; }
        .card-copy > p { font-size: .9rem; }
        .tags li { font-size: .62rem; }
        .supporting-grid { grid-template-columns: 1fr; }
        .supporting-grid .project-card { grid-template-columns: 120px 1fr; }
        .skills-section, .experience-section, .stack-section { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
        .skills-chart { padding: 1.4rem 1.25rem; }
        .contact-banner { margin-inline: 1.3rem; padding: 2rem 1.5rem; flex-direction: column; align-items: flex-start; }
        .contact-banner h2 { font-size: 2.2rem; }
        .site-footer { padding-inline: 1.3rem; grid-template-columns: 1fr; gap: 1.5rem; }
        .site-footer > small { grid-column: auto; font-size: .54rem; }
        .footer-links { gap: 1.2rem; }
        .engineering-grid { grid-template-columns: 1fr; }
        .principle { padding: 1.5rem; }
        .case-body { grid-template-columns: 1fr; gap: 2rem; }
        .case-sidebar nav { display: flex; flex-wrap: wrap; gap: .7rem 1rem; }
        .case-sidebar .notice { margin-top: 1rem; }
        .case-header { padding-block: 2rem; }
        .case-header h1 { font-size: 3rem; overflow-wrap: anywhere; }
        .resume-page { padding-block: 2.5rem 1.5rem; }
        .resume-header, .resume-overview, .resume-columns { grid-template-columns: 1fr; gap: 1.5rem; }
        .resume-header { padding-bottom: 1.8rem; }
        .resume-header h1 { font-size: 2.8rem; }
        .resume-contact { padding: 1.2rem; gap: .5rem; }
        .resume-nav { gap: .4rem 1.4rem; }
        .resume-overview, .resume-columns { padding-block: 2rem; }
        .resume-overview h2 { font-size: 1.8rem; }
        .resume-role { padding-left: 1rem; }
        .resume-role h3 { font-size: 1.4rem; }
        .resume-panel { padding: 1.25rem; }
        .resume-note { display: grid; gap: 1rem; }
        .contact-page { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
        .contact-form-panel { padding: 1.5rem; }
        .prose-page { padding-block: 3rem; }
    }
    @media (max-width: 360px) { .brand small { font-size: .62rem; } .command-deck { padding-inline: 20px; column-gap: .7rem; } .deck-heading h1 { font-size: .76rem; } .hud-nav-link > span { font-size: .61rem; } .supporting-grid .project-card { display: flex; } .supporting-grid .card-illustration { margin: .5rem .8rem; } }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .console-rain, .console-echo { display: none; } [data-console-active] > .console-copy { opacity: 1; } }
    @media (forced-colors: active) { .console-rain, .console-echo { display: none; } [data-console-active] > .console-copy { opacity: 1; } }
    @media print {
        .console-rain, .console-effects-toggle, .console-echo { display: none; }
        [data-console-active] > .console-copy { opacity: 1; }
        @page resume { size: A4; margin: 14mm; }
        .resume-document > .site-header, .resume-document > .site-footer, .resume-nav, .resume-print-note, .resume-note, .resume-contact .eyebrow, .resume-contact .text-link { display: none; }
        .resume-page { page: resume; max-width: none; padding: 0; font-size: 10pt; }
        .resume-header { display: block; padding-bottom: 0; }
        .resume-header h1 { font-size: 28pt; margin-block: 0 .5rem; }
        .resume-header .eyebrow { font-size: 7pt; margin-bottom: .5rem; }
        .resume-subtitle { font-size: 9pt; margin-bottom: .6rem; }
        .resume-header .hero-lead { font-size: 10pt; }
        .resume-contact { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; border: 0; padding: .5rem 0; background: white; }
        .resume-contact > a { font-size: 8pt; min-height: 0; color: black; text-decoration: none; }
        .resume-overview { display: block; padding-block: .6rem; }
        .resume-overview > .eyebrow, .resume-overview h2 { display: none; }
        .resume-overview > div { font-size: 9pt; gap: .35rem; }
        .resume-overview p { line-height: 1.4; }
        .resume-columns { display: block; padding-block: 1rem 0; }
        .resume-section-heading { margin-bottom: .8rem; }
        .resume-section-heading .eyebrow, .resume-panel .eyebrow { font-size: 7pt; }
        .resume-section-heading h2, .resume-panel h2 { font-size: 14pt; margin-top: .4rem; }
        .resume-timeline { display: block; }
        .resume-role { break-inside: avoid; padding-bottom: .5rem; margin-bottom: .5rem; }
        .resume-role h3 { font-size: 12pt; }
        .resume-role-title { font-size: 9pt; margin-top: .2rem; }
        .resume-role-meta { font-size: 8pt; line-height: 1.4; gap: .1rem; margin-top: .3rem; }
        .resume-role > ul { font-size: 9pt; line-height: 1.4; gap: .2rem; margin-top: .4rem; }
        .resume-sidebar { display: block; break-before: page; }
        .resume-panel { break-inside: avoid; background: white; border: 0; border-top: 1px solid #999; border-radius: 0; padding: .8rem 0; margin-top: .5rem; }
        .resume-panel h3, .resume-skill-group h3 { font-size: 9pt; margin-top: .6rem; }
        .resume-panel p { font-size: 9pt; margin-top: .3rem; }
        .resume-skill-list { margin-top: .4rem; gap: .25rem .5rem; }
        .resume-skill-list li { font-size: 8pt; padding: .1rem .3rem; background: white; color: black; border-color: #999; }
        .resume-panel > .text-link { display: none; }
        .resume-distinction { margin-top: .4rem; font-size: 9pt; }
    }
    @media print { :root { color-scheme: light; } .site-header nav, .theme-picker, .button, .card-illustration, .contact-banner, .hud-frame, .hud-sidebar, .planet-viewport, .deck-actions, .command-kicker, .command-caption { display: none; } body, .command-hero { color: black; background: white; } .command-deck, .project-grid, .supporting-grid, .experience-section, .case-body { display: block; } .deck-heading h1, .planet-eyebrow { color: black; } .project-card { break-inside: avoid; margin-bottom: 1rem; } a { text-decoration: underline; } }
}

@layer components {
    .game-collection { padding-block: 5rem 5.5rem; border-top: 1px solid var(--line); }
    .game-collection-heading { display: grid; grid-template-columns: 1fr minmax(280px, .72fr); gap: 3rem; align-items: end; }
    .game-collection-heading h2 { margin-top: 1rem; font-size: clamp(2.6rem, 5vw, 4.5rem); }
    .game-collection-heading > p { max-width: 38rem; padding-bottom: .35rem; color: var(--strong); }
    .game-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
    .quiet-game-card { --card-paper: #f0f0e4; --card-ink: #23392e; --card-muted: #52695b; --card-line: #bac8b7; --card-accent: #2d6749; position: relative; display: flex; min-height: 290px; flex-direction: column; overflow: hidden; padding: 1.5rem; border: 1px solid var(--card-line); background: var(--card-paper); color: var(--card-ink); }
    .quiet-game-card::after { position: absolute; inset: 0 0 auto; height: 5px; background: var(--card-accent); content: ""; }
    .quiet-game-card.quiet-game-kintsugi { --card-paper: #f3eade; --card-ink: #392a21; --card-muted: #745f4f; --card-line: #d2bda1; --card-accent: #a36d25; }
    .quiet-game-card.quiet-game-metro { --card-paper: #e9f0f1; --card-ink: #183540; --card-muted: #536d77; --card-line: #b9cdd0; --card-accent: #0c7773; }
    .game-card-sigil { position: absolute; top: .6rem; right: 1rem; color: var(--card-accent); font: 400 clamp(5rem, 8vw, 7.3rem)/.9 var(--mono); letter-spacing: -.12em; opacity: .15; }
    .game-card-kind { position: relative; z-index: 1; max-width: 65%; color: var(--card-muted); font: .58rem/1.6 var(--mono); letter-spacing: .09em; }
    .quiet-game-card h3 { position: relative; z-index: 1; margin-top: 2.2rem; color: var(--card-ink); font: 400 clamp(1.65rem, 2.3vw, 2.25rem)/1.1 "Palatino Linotype", "Book Antiqua", Georgia, serif; letter-spacing: -.04em; }
    .quiet-game-card > p:not(.game-card-kind) { position: relative; z-index: 1; max-width: 23rem; margin-top: .65rem; color: var(--card-muted); font-size: .88rem; }
    .quiet-game-card > a { position: relative; z-index: 1; display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1rem; color: var(--card-accent); font-size: .8rem; font-weight: 650; text-decoration-thickness: 2px; }
    .quiet-game-card > a span { font-size: 1.3rem; text-decoration: none; }
    .quiet-game-card > a:focus-visible { outline-color: var(--card-accent); outline-offset: 2px; }
    .lab-strip { padding-block: 0 5.5rem; }
    .lab-card { --lab-paper: #eceaf5; --lab-ink: #2b2352; --lab-muted: #5f5890; --lab-line: #c9c2e4; --lab-accent: #5438c0; position: relative; display: flex; align-items: center; gap: 2.2rem; overflow: hidden; padding: 1.7rem 1.9rem 1.7rem 2.2rem; border: 1px solid var(--lab-line); background: var(--lab-paper); color: var(--lab-ink); }
    .lab-card::after { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--lab-accent); content: ""; }
    .lab-sigil { flex: none; color: var(--lab-accent); font: 400 4.6rem/1 var(--mono); opacity: .3; }
    .lab-card-copy { max-width: 46rem; }
    .lab-card-kind { color: var(--lab-muted); font: .58rem/1.6 var(--mono); letter-spacing: .09em; }
    .lab-card-copy h2 { margin-top: .7rem; color: var(--lab-ink); font: 400 clamp(1.7rem, 2.6vw, 2.4rem)/1.08 "Palatino Linotype", "Book Antiqua", Georgia, serif; letter-spacing: -.04em; }
    .lab-card-copy > p:not(.lab-card-kind) { margin-top: .55rem; max-width: 40rem; color: var(--lab-muted); font-size: .9rem; }
    .lab-card-link { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.15rem; border: 1px solid var(--lab-line); color: var(--lab-accent); font: 650 .8rem/1 var(--mono); letter-spacing: .03em; text-decoration: none; }
    .lab-card-link:hover { border-color: var(--lab-accent); }
    .lab-card-link:focus-visible { outline: 2px solid var(--lab-accent); outline-offset: 2px; }
    .game-microsite { --game-paper: #f2f1e4; --game-ink: #22392e; --game-muted: #50675a; --game-line: #bdcbb8; --game-panel: #e6ebdd; --game-accent: #2c6347; --game-accent-contrast: #fffdf4; --game-display: "Palatino Linotype", "Book Antiqua", Georgia, serif; position: relative; overflow: clip; padding-block: .5rem 5rem; background: var(--game-paper); color: var(--game-ink); }
    .terra-microsite { --game-paper: #f2f1e4; --game-ink: #22392e; --game-muted: #50675a; --game-line: #bdcbb8; --game-panel: #e6ebdd; --game-accent: #2c6347; --game-accent-contrast: #fffdf4; --game-display: "Palatino Linotype", "Book Antiqua", Georgia, serif; }
    .kintsugi-microsite { --game-paper: #f5eee4; --game-ink: #38291f; --game-muted: #6d584a; --game-line: #d7c5ae; --game-panel: #eae0d2; --game-accent: #8b5516; --game-accent-contrast: #fffaf0; --game-display: "Baskerville", "Palatino Linotype", Georgia, serif; }
    .metro-microsite { --game-paper: #edf3f3; --game-ink: #173341; --game-muted: #4d6471; --game-line: #bdcdd0; --game-panel: #dfe9e9; --game-accent: #0b6666; --game-accent-contrast: #f7ffff; --game-display: "Franklin Gothic Medium", "Arial Narrow", Impact, sans-serif; }
    @supports (color: light-dark(white, black)) {
        .terra-microsite { --game-paper: light-dark(#f2f1e4, #101916); --game-ink: light-dark(#22392e, #e7edde); --game-muted: light-dark(#50675a, #b1c1ae); --game-line: light-dark(#bdcbb8, #3c5145); --game-panel: light-dark(#e6ebdd, #1b2b23); --game-accent: light-dark(#2c6347, #a6d29f); --game-accent-contrast: light-dark(#fffdf4, #102016); }
        .kintsugi-microsite { --game-paper: light-dark(#f5eee4, #17120e); --game-ink: light-dark(#38291f, #f2e8d9); --game-muted: light-dark(#6d584a, #c1ab8d); --game-line: light-dark(#d7c5ae, #594533); --game-panel: light-dark(#eae0d2, #251c15); --game-accent: light-dark(#8b5516, #edc37b); --game-accent-contrast: light-dark(#fffaf0, #231608); }
        .metro-microsite { --game-paper: light-dark(#edf3f3, #10191e); --game-ink: light-dark(#173341, #e5f0ef); --game-muted: light-dark(#4d6471, #aec2c3); --game-line: light-dark(#bdcdd0, #3f595c); --game-panel: light-dark(#dfe9e9, #1a2a30); --game-accent: light-dark(#0b6666, #62d6c9); --game-accent-contrast: light-dark(#f7ffff, #0e2625); }
    }
    .game-microsite :is(h1, h2, h3) { color: var(--game-ink); }
    .game-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding-block: .9rem; color: var(--game-muted); font: .67rem/1.6 var(--mono); }
    .game-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--game-accent); }
    .game-breadcrumb [aria-current="page"] { color: var(--game-ink); }
    .game-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 6vw, 6rem); }
    .game-hero-copy { max-width: 39rem; }
    .game-overline { color: var(--game-accent); font: 600 .63rem/1.6 var(--mono); letter-spacing: .11em; }
    .game-overline span { display: inline-block; margin-left: .7rem; color: var(--game-muted); }
    .game-platform { display: inline-flex; align-items: center; min-height: 34px; margin-top: 1.6rem; padding: .35rem .7rem; border: 1px solid var(--game-line); border-radius: 999px; color: var(--game-muted); font: .63rem/1.4 var(--mono); }
    .game-hero h1 { margin-top: 1rem; font: 400 clamp(3.1rem, 6.4vw, 5.8rem)/.98 var(--game-display); letter-spacing: -.055em; }
    .game-tagline { margin-top: 1.2rem; color: var(--game-accent); font: 400 clamp(1.15rem, 1.8vw, 1.55rem)/1.3 var(--game-display); }
    .game-lead { max-width: 37rem; margin-top: 1.15rem; color: var(--game-muted); font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.75; }
    .game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: 1.7rem; }
    .game-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--game-accent); color: var(--game-accent-contrast); font-size: .8rem; font-weight: 650; text-decoration: none; }
    .game-button:hover { filter: brightness(1.08); }
    .game-text-link { display: inline-flex; min-height: 44px; align-items: center; gap: .55rem; color: var(--game-accent); font-size: .78rem; font-weight: 650; }
    .game-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; max-width: 34rem; margin-top: 2rem; padding: 1.1rem 0 0; border-top: 1px solid var(--game-line); list-style: none; }
    .game-stats li { display: grid; gap: .1rem; }
    .game-stats strong { color: var(--game-ink); font: 400 1.55rem/1.1 var(--game-display); }
    .game-stats span { color: var(--game-muted); font: .55rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
    .game-art { position: relative; display: flex; min-width: 0; min-height: 380px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 3rem 1.5rem 1.2rem; border: 1px solid var(--game-line); background: var(--game-panel); }
    .game-art-label { position: absolute; top: 1rem; left: 1rem; z-index: 1; color: var(--game-muted); font: .55rem/1.4 var(--mono); letter-spacing: .1em; }
    .game-art svg { display: block; width: min(100%, 560px); max-height: 365px; overflow: visible; }
    .game-art figcaption { max-width: 31rem; margin-top: .5rem; color: var(--game-muted); font: .66rem/1.5 var(--mono); text-align: center; }
    .game-section { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 5rem); padding-block: 4.5rem; border-top: 1px solid var(--game-line); }
    .game-section-intro h2, .game-note-main h2, .game-comfort h2, .game-next h2 { margin-top: .8rem; font: 400 clamp(2rem, 3.6vw, 3.3rem)/1.05 var(--game-display); letter-spacing: -.045em; }
    .game-section-intro h2 em { color: var(--game-accent); }
    .game-section-intro > p:last-child { max-width: 29rem; margin-top: 1.1rem; color: var(--game-muted); }
    .game-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .game-steps li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .8rem; padding: 1.15rem 0; border-top: 1px solid var(--game-line); }
    .game-steps li:first-child { padding-top: 0; border-top: 0; }
    .step-number { color: var(--game-accent); font: .68rem/1.6 var(--mono); }
    .game-steps h3 { font: 600 1.15rem/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
    .game-steps p { margin-top: .35rem; color: var(--game-muted); font-size: .88rem; line-height: 1.7; }
    .game-notes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: 1rem 4.5rem; }
    .game-note-main { padding: 1.5rem 1.5rem 1.5rem 0; }
    .game-note-main > p:not(.game-overline) { max-width: 48rem; margin-top: 1rem; color: var(--game-muted); }
    .game-note-main .game-boundary { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--game-line); font: .68rem/1.65 var(--mono); }
    .game-comfort { align-self: start; padding: 1.5rem; border: 1px solid var(--game-line); background: var(--game-panel); }
    .game-comfort h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); }
    .game-comfort > p:not(.game-overline) { margin-top: .8rem; color: var(--game-muted); font-size: .84rem; line-height: 1.7; }
    .game-next { display: grid; grid-template-columns: minmax(180px, .8fr) repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: center; padding-block: 2.7rem 0; border-top: 1px solid var(--game-line); }
    .game-next h2 { font-size: clamp(1.65rem, 2.8vw, 2.45rem); }
    .game-next > a { position: relative; display: grid; min-height: 96px; align-content: center; gap: .25rem; padding: 1rem 2.7rem 1rem 1rem; border: 1px solid var(--game-line); color: var(--game-ink); text-decoration: none; transition: border-color .18s, background .18s; }
    .game-next > a:hover { border-color: var(--game-accent); background: var(--game-panel); }
    .game-next > a > span { color: var(--game-accent); font: 600 1rem/1.3 var(--game-display); }
    .game-next > a > small { color: var(--game-muted); font-size: .7rem; }
    .game-next > a > b { position: absolute; top: 50%; right: 1rem; color: var(--game-accent); font-size: 1.35rem; transform: translateY(-50%); }
    .terra-art { border-radius: 2rem .25rem 2rem .25rem; background: radial-gradient(ellipse at 50% 45%, var(--game-paper), transparent 70%), var(--game-panel); }
    .terra-contour { fill: none; stroke: var(--game-accent); stroke-width: 1.2; opacity: .17; }
    .terra-tile { animation: terrain-appear .75s ease-out both; }
    .terra-tile:nth-of-type(2) { animation-delay: .12s; }
    .terra-tile:nth-of-type(3) { animation-delay: .22s; }
    .terra-tile:nth-of-type(4) { animation-delay: .32s; }
    .terra-tile:nth-of-type(5) { animation-delay: .42s; }
    .hex-face { stroke: var(--game-ink); stroke-width: 1.5; }
    .tile-forest .hex-face { fill: #829a70; }
    .tile-meadow .hex-face { fill: #d4c97d; }
    .tile-river .hex-face { fill: #77aeb0; }
    .tile-wetland .hex-face { fill: #a9bea1; }
    .tile-solar .hex-face { fill: #e1a458; }
    .tile-peaks .hex-face { fill: #b2b6ad; }
    .tile-mark { fill: none; stroke: #263c32; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .tile-sun { fill: #f4d27f; stroke: #263c32; stroke-width: 1.5; }
    .terra-tile text { fill: var(--game-muted); font: 7px var(--mono); letter-spacing: .06em; text-anchor: middle; }
    .terra-pin { fill: #d28b38; stroke: var(--game-paper); stroke-width: 4; animation: pin-breathe 2.8s ease-in-out infinite; }
    .kintsugi-art { border-radius: 45% 45% .35rem .35rem; background: radial-gradient(ellipse at 50% 45%, #b4813a24, transparent 56%), var(--game-panel); }
    .bowl-shadow { fill: var(--game-ink); opacity: .1; }
    .bowl-vessel { fill: #d3c0a4; stroke: #7c6350; stroke-width: 2; }
    .bowl-rim { fill: #efe5d6; stroke: #7c6350; stroke-width: 2; }
    .bowl-inner { fill: none; stroke: #b19a7b; stroke-width: 2; }
    .gold-seam { fill: none; stroke: #a5691e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; animation: seam-glint 1.3s ease-out .1s both; }
    .seam-two { animation-delay: .3s; }
    .seam-three { animation-delay: .5s; }
    .gold-dust { fill: #d4a456; }
    .bowl-mark { fill: #765d47; font: 8px var(--mono); letter-spacing: .12em; text-anchor: middle; }
    .metro-art { border-left: .4rem solid var(--game-accent); background: radial-gradient(ellipse at 50% 50%, var(--game-paper), transparent 72%), var(--game-panel); }
    .metro-guide { fill: none; stroke: var(--game-line); stroke-width: 1; stroke-dasharray: 2 8; }
    .metro-route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; opacity: .9; }
    .route-a { stroke: #087e75; }
    .route-b { stroke: #c96b35; stroke-dasharray: 11 8; }
    .route-c { stroke: #495e9d; stroke-dasharray: 2 9; }
    .station { stroke: var(--game-paper); stroke-width: 5; paint-order: stroke; }
    .station-circle { fill: #087e75; }
    .station-triangle { fill: #c96b35; }
    .station-square { fill: #495e9d; }
    .metro-train { fill: var(--game-ink); stroke: var(--game-paper); stroke-width: 4; animation: metro-drift 4s ease-in-out infinite alternate; }
    .metro-label { fill: var(--game-muted); font: 8px var(--mono); letter-spacing: .1em; text-anchor: middle; }
    @keyframes terrain-appear { from { opacity: .25; } to { opacity: 1; } }
    @keyframes pin-breathe { 50% { r: 7px; } }
    @keyframes seam-glint { from { opacity: .55; } to { opacity: 1; } }
    @keyframes metro-drift { to { transform: translate(90px, 96px); } }
}

@layer components {
    @supports (color: light-dark(white, black)) {
        .quiet-game-card { --card-paper: light-dark(#f0f0e4, #151f19); --card-ink: light-dark(#23392e, #e7edde); --card-muted: light-dark(#52695b, #b3c0b1); --card-line: light-dark(#bac8b7, #405046); --card-accent: light-dark(#2d6749, #a6d29f); }
        .quiet-game-card.quiet-game-kintsugi { --card-paper: light-dark(#f3eade, #211915); --card-ink: light-dark(#392a21, #f2e8d9); --card-muted: light-dark(#745f4f, #c1ab8d); --card-line: light-dark(#d2bda1, #594533); --card-accent: light-dark(#a36d25, #edc37b); }
        .quiet-game-card.quiet-game-metro { --card-paper: light-dark(#e9f0f1, #152126); --card-ink: light-dark(#183540, #e5f0ef); --card-muted: light-dark(#536d77, #aec2c3); --card-line: light-dark(#b9cdd0, #3f595c); --card-accent: light-dark(#0c7773, #62d6c9); }
        .lab-card { --lab-paper: light-dark(#eceaf5, #1a1628); --lab-ink: light-dark(#2b2352, #e8e3fa); --lab-muted: light-dark(#5f5890, #b6aee0); --lab-line: light-dark(#c9c2e4, #463c7e); --lab-accent: light-dark(#5438c0, #b9a5f5); }
    }
    @supports not (color: light-dark(white, black)) {
        .game-microsite { --game-paper: Canvas; --game-ink: CanvasText; --game-muted: CanvasText; --game-line: GrayText; --game-panel: ButtonFace; --game-accent: LinkText; --game-accent-contrast: Canvas; }
        .quiet-game-card, .quiet-game-card.quiet-game-kintsugi, .quiet-game-card.quiet-game-metro { --card-paper: Canvas; --card-ink: CanvasText; --card-muted: CanvasText; --card-line: GrayText; --card-accent: LinkText; }
        .lab-card { --lab-paper: Canvas; --lab-ink: CanvasText; --lab-muted: CanvasText; --lab-line: GrayText; --lab-accent: LinkText; }
    }
    @media (max-width: 1000px) {
        .game-collection-heading { grid-template-columns: 1fr minmax(250px, .9fr); gap: 2rem; }
        .game-collection-grid { gap: .75rem; }
        .quiet-game-card { padding: 1.2rem; }
        .game-hero { grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr); gap: 2rem; }
    }
    @media (max-width: 820px) {
        .game-collection-heading { grid-template-columns: 1fr; gap: 1rem; }
        .game-collection-heading > p { max-width: 45rem; }
        .game-collection-grid { grid-template-columns: 1fr; }
        .quiet-game-card { min-height: 235px; }
        .lab-card { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.4rem; }
        .lab-sigil { font-size: 3.2rem; }
        .lab-card-link { margin-left: 0; }
        .game-hero { grid-template-columns: 1fr; gap: 2.4rem; padding-block: 2.5rem 3.5rem; }
        .game-hero-copy { max-width: 44rem; }
        .game-art { width: 100%; max-width: 690px; min-height: 360px; margin-inline: auto; }
        .game-section { grid-template-columns: 1fr; gap: 2rem; }
        .game-section-intro { max-width: 42rem; }
        .game-notes { grid-template-columns: 1fr; gap: 1rem; }
        .game-note-main { padding-right: 0; }
        .game-comfort { max-width: 42rem; }
        .game-next { grid-template-columns: 1fr 1fr; }
        .game-next > div { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
        .game-collection { padding-block: 3.5rem; }
        .game-collection-grid { margin-top: 1.7rem; }
        .quiet-game-card { min-height: 220px; padding: 1.25rem; }
        .game-card-sigil { font-size: 5.7rem; }
        .game-hero { gap: 1.8rem; padding-block: 1.5rem 2.7rem; }
        .game-overline span { display: block; margin: .2rem 0 0; }
        .game-platform { margin-top: 1.1rem; }
        .game-hero h1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
        .game-stats { margin-top: 1.5rem; }
        .game-stats strong { font-size: 1.3rem; }
        .game-stats span { font-size: .49rem; }
        .game-art { min-height: 300px; padding: 2.7rem .7rem 1rem; }
        .game-art svg { max-height: 285px; }
        .game-art figcaption { font-size: .58rem; }
        .game-section { gap: 1.5rem; padding-block: 3rem; }
        .game-section-intro h2, .game-note-main h2 { font-size: 2.35rem; }
        .game-steps li { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .55rem; }
        .game-steps h3 { font-size: 1.05rem; }
        .game-steps p { font-size: .83rem; }
        .game-notes { padding-bottom: 3rem; }
        .game-comfort { padding: 1.2rem; }
        .game-next { grid-template-columns: 1fr; padding-top: 2rem; }
        .game-next > div { grid-column: auto; }
        .game-next > a { min-height: 76px; }
    }
    @media (max-width: 360px) {
        .game-hero h1 { font-size: 2.7rem; }
        .game-art { min-height: 265px; padding-inline: .4rem; }
        .game-art svg { max-height: 240px; }
        .game-stats { gap: .4rem; }
        .game-stats span { letter-spacing: 0; }
    }
}