/* Shared surfaces keep every section, gallery and control in the chosen palette. */
:root { --surface:#171c24; --surface-raised:#202833; --soft:#21324e; --accent:#a5c4ff; --accent-strong:#82afff; --header:#101318ed; --border:#414c60; --secondary:#c5cede; --button-ink:#10203a; --shadow:#0003; }
:root[data-theme=light] { color-scheme:light; --paper:#f8f9fc; --ink:#182333; --muted:#526176; --line:#d8dfe9; --surface:#edf1f7; --surface-raised:#fff; --soft:#e3ebff; --accent:#154eb6; --accent-strong:#245cda; --orange:#245cda; --header:#f8f9fcf2; --border:#b8c5d8; --secondary:#40536c; --button-ink:#fff; --shadow:#20365b16; }
:root[data-theme=rain] { --paper:#101e29; --ink:#e6f0f5; --muted:#a1bacb; --line:#314b5b; --surface:#172b38; --surface-raised:#1d3443; --soft:#254755; --accent:#9dcfdc; --accent-strong:#9dcfdc; --orange:#9dcfdc; --header:#101e29ee; --border:#496b7d; --secondary:#b2ccd8; --button-ink:#102b35; --shadow:#020b1560; }
body { background:var(--paper); color:var(--ink); isolation:isolate; }
body, .site-header, .about, .contact, dialog { transition:background-color .35s ease,color .3s ease,border-color .3s ease; }
::selection { background:var(--accent-strong); color:var(--paper); }
.site-header { background:var(--header); border-color:var(--line); }
.nav-actions { display:flex; align-items:center; gap:24px; }
.theme-picker { position:relative; flex-shrink:0; }
.theme-picker summary { list-style:none; display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:22px; cursor:pointer; font-size:12px; font-weight:650; color:var(--ink); background:var(--surface); transition:background .25s,box-shadow .25s; }
.theme-picker summary::-webkit-details-marker { display:none; }
.theme-picker summary svg { width:18px; height:18px; color:var(--accent); }
.theme-picker summary:hover { background:var(--soft); box-shadow:0 3px 14px var(--shadow); }
.theme-panel { position:absolute; right:0; top:calc(100% + 14px); width:266px; max-width:calc(100vw - 32px); padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface-raised); box-shadow:0 18px 50px var(--shadow); }
.theme-picker[open] .theme-panel { animation:theme-unfold .22s var(--ease-ui); }
.theme-panel > p { margin:0 0 12px; color:var(--muted); font-size:11px; letter-spacing:.5px; }
.theme-option { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 9px; margin:3px 0; border:1px solid transparent; border-radius:11px; color:var(--ink); background:transparent; cursor:pointer; }
.theme-option:hover { background:var(--surface); }
.theme-option[aria-pressed=true] { background:var(--soft); border-color:var(--border); }
.theme-option strong,.theme-option small { display:block; }
.theme-option strong { font-size:14px; font-weight:650; }
.theme-option small { margin-top:3px; color:var(--muted); font-size:11px; }
.theme-swatch { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; border:1px solid #73809970; font-size:19px; }
.swatch-dark { color:#b9d0ff; background:#18202f; }
.swatch-light { color:#245cda; background:#f8f9fc; }
.swatch-rain { color:#aad4e3; background:linear-gradient(135deg,#203f51,#10212f); }
.theme-check { margin-left:auto; opacity:0; color:var(--accent); }
[aria-pressed=true] .theme-check { opacity:1; }
.weather-toggle { width:100%; margin-top:10px; min-height:40px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink); font-size:11px; cursor:pointer; }
.weather-toggle:disabled { color:var(--muted); cursor:default; }
.theme-panel [hidden] { display:none; }
.theme-picker :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#weather-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.weather-haze { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 15% 0%,#44779125,transparent 65%),linear-gradient(145deg,transparent 40%,#406e8712); transition:opacity .6s; }
[data-theme=rain] .weather-haze { opacity:1; }
.hero h1 em,.hero-description strong,.intro-strip strong,.hero-sticker,.project-info h3,.email { color:var(--ink); }
.eyebrow,.hero-name,.hero-name span,.hero-foot,.intro-strip p,.strip-stat span,.work-toolbar > span,.group-heading p,.role-label,.data-note,footer,.footer-handle { color:var(--muted); }
.hero-description,.section-title > p,.project-info > p,.about-copy,.capabilities p,.timeline p,.timeline time,.education-line p,.contact > p:not(.eyebrow),.game-rules li,.playground-description { color:var(--secondary); }
.dot { background:var(--accent-strong); }
.hero h1 em:after { border-color:var(--accent-strong); }
h2 em,.collage-note,.hand-arrow,.download-stat,.download-stat:before,.capability-icon,.timeline .org,.puzzle-sketch,.game-rules b,.dialog-metrics b { color:var(--accent); }
.button { color:var(--button-ink); background:var(--accent-strong); border-color:var(--accent-strong); }
.button:hover { background:var(--accent); }
.button-secondary,.button-secondary:hover { background:var(--surface-raised); color:var(--ink); border-color:var(--border); }
.plain-link,.source-link,.detail-button { color:var(--secondary); border-color:var(--border); }
.plain-link:hover,.detail-button:hover,.detail-button span,.socials a:hover { color:var(--accent); }
.nav nav a:not(.nav-contact):after { background:var(--accent); }
.nav .nav-contact,.hero-shot,.collage-cloud,.hero-sticker,.capabilities article,.contact-bottom,.socials small { border-color:var(--border); }
.hero-shot,.hero-sticker { background:var(--surface-raised); }
.hero-sticker span,.socials small,.playground-note { color:var(--muted); }
.hero-tiny-icon { border-color:var(--paper); }
.intro-strip,.group-heading,.about,.contact { border-color:var(--line); }
.about,.contact { background:var(--surface); }
.capabilities .capability-ai { grid-column:1 / -1; }
.project-art,.project-card:nth-child(2) .project-art,.project-card:nth-child(4) .project-art { background:var(--surface-raised); border-color:var(--line); }
.project-index { color:var(--secondary); }
.project-card:hover .project-info h3 { color:var(--accent); }
.filter[aria-pressed=true] { background:var(--soft); color:var(--accent); border-color:var(--border); }
.filter:not([aria-pressed=true]):hover { background:var(--surface); }
.email { border-color:var(--border); }
kbd { background:var(--soft); color:var(--secondary); border-color:var(--border); }
dialog { background:var(--surface-raised); color:var(--ink); border-color:var(--border); }
.dialog-close,.gallery-arrow { background:var(--soft); color:var(--ink); border-color:var(--border); }
.dialog-close:hover,.gallery-arrow:hover:not([aria-disabled=true]) { background:var(--surface); color:var(--accent); border-color:var(--accent); }
.dialog-top p,.dialog-metrics small,.dialog-caption,.gallery-count,.gallery-shot figcaption { color:var(--muted); }
.dialog-description,.gallery-label { color:var(--secondary); }
.shot-frame { background:var(--surface); border-color:var(--border); }
/* The puzzle retains its six jewel materials; only its surrounding surfaces change. */
[data-theme=light] .block-game { background:linear-gradient(145deg,#fff,#eaf0fb); border-color:#bac9e1; box-shadow:0 12px 35px #20365b16,inset 0 1px #fff; }
[data-theme=light] .block-game-name h3,[data-theme=light] .block-hud b,[data-theme=light] .block-cover h4 { color:#182333; }
[data-theme=light] .block-glyph,[data-theme=light] .block-hud > div:first-child b { color:#154eb6; }
[data-theme=light] .experiment-label,[data-theme=light] .block-hud span,[data-theme=light] .game-kicker,[data-theme=light] .block-cover > p:not(.game-kicker),[data-theme=light] .block-status,[data-theme=light] .block-controls > p,[data-theme=light] .piece-label { color:#40536c; }
[data-theme=light] .block-board { background:#dce5f2; border-color:#aabbcf; box-shadow:inset 0 3px 8px #20365b17; }
[data-theme=light] .block-cell:not(.filled):not(.preview):not(.invalid) { background:#f1f5fc; border-color:#cbd6e6; }
[data-theme=light] .block-cover { background:#f8f9fcf2; border-color:#bac9e1; }
[data-theme=light] .piece-button { background:#edf2fa; border-color:#c4d0e2; }
[data-theme=light] .piece-button[aria-pressed=true],[data-theme=light] .piece-button:not(:disabled):hover { background:#dce7ff; border-color:#245cda; }
[data-theme=light] .text-button { color:#154eb6; }
[data-theme=light] .text-button:disabled { color:#68778c; }
[data-theme=light] .block-topbar,[data-theme=light] .block-status { border-color:#bfcee2; }
@keyframes theme-unfold { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) { .nav-actions { gap:16px; } .nav nav { gap:17px; } .nav nav a[href="#about"] { display:none; } }
@media(max-width:800px) { .nav-actions { gap:12px; } .theme-current { display:none; } .theme-picker summary { width:44px; height:44px; padding:0; justify-content:center; } .nav nav a[href="#work"] { display:none; } }
@media(max-width:520px) { .nav-actions { gap:10px; } .nav nav a[href="#playground"] { display:none; } .theme-panel { top:calc(100% + 12px); } .nav .nav-contact { padding-inline:11px; } }
@media(prefers-reduced-motion:reduce) { #weather-canvas { display:none; } body,.site-header,.about,.contact,dialog,.weather-haze,.theme-picker summary { transition:none; } .theme-picker[open] .theme-panel { animation:none; } }