/* Every palette reaches the existing surfaces, beams, typography and controls. */
.atmos{background:radial-gradient(48% 52% at 74% 16%,var(--light-a),transparent 72%),radial-gradient(45% 50% at 13% 74%,var(--light-b),transparent 74%),radial-gradient(130% 110% at 50% 40%,var(--tone-high) 0%,var(--tone-mid) 40%,var(--night) 70%,var(--coal) 100%)}
.atmos .lift{background:radial-gradient(90% 75% at 40% 32%,var(--light-lift) 0%,var(--tone-mid) 40%,var(--light-clear) 78%)}
.ray{background:linear-gradient(180deg,var(--beam-a),var(--beam-b) 50%,transparent 78%)}
.ray.r2{background:linear-gradient(180deg,var(--beam-c),var(--beam-d) 50%,transparent 78%)}
.no-gl .atmos::after{background:radial-gradient(circle,var(--text-wash-strong),var(--accent-glow) 40%,transparent 70%)}
.intro video{filter:var(--intro-grade)}
.intro .skip{background:var(--glass);border-color:var(--line)}
.top{background:linear-gradient(180deg,var(--header-glass),transparent)}
.scene{text-shadow:0 0 22px var(--shadow)}
.btn{background:var(--button-glass)}
.btn:hover{background:var(--hover-glass)}
.btn.solid{color:var(--ink);background:linear-gradient(125deg,var(--tone-mid),var(--tone-high)) padding-box,linear-gradient(110deg,var(--accent),var(--second) 58%,var(--third)) border-box;box-shadow:0 0 22px var(--light-a),inset 0 0 18px var(--beam-d)}
.btn.solid:hover{background:linear-gradient(125deg,var(--tone-high),var(--tone-mid)) padding-box,linear-gradient(110deg,var(--third),var(--accent) 58%,var(--second)) border-box}
.btn.solid .arr{color:var(--accent)}
.specimen h3{color:var(--ink);background:linear-gradient(115deg,var(--ink) 8%,var(--accent) 36%,var(--second) 66%,var(--third) 95%);-webkit-background-clip:text;background-clip:text}
.clist button:hover{background:var(--text-wash)}
.clist button[aria-pressed="true"]{background:linear-gradient(100deg,var(--accent-wash),var(--second-wash))}
.card{background:linear-gradient(165deg,var(--card-top),var(--card-bottom));box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.7)}
.card .num,.field .err{color:var(--accent)}
.card p{color:var(--paper-soft)}
.field input,.field select,.field textarea{background-color:var(--text-wash)}
.field select option{background:var(--tone-mid)}
.review pre{background:var(--text-wash-strong)}
.theme-explore{justify-self:start;height:auto;min-height:44px;padding:10px 0;background:none!important;border:0;border-bottom:1px solid var(--line);color:var(--accent);text-align:left}
.palette-review{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:25;font-family:var(--f-display);text-shadow:none}
html.intro-on .palette-review{visibility:hidden}
.palette-toggle{display:flex;align-items:center;gap:12px;min-height:48px;max-width:calc(100vw - 36px);padding:9px 16px;border:1px solid var(--line);background:var(--glass);color:var(--ink);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.palette-toggle .palette-orb{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--second) 64%,var(--coal));box-shadow:inset 0 0 0 1px var(--line)}
.palette-toggle .palette-caption{display:grid;gap:3px;text-align:left}
.palette-toggle small{font:9px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.palette-toggle strong{font-size:12px;line-height:1.3;font-weight:500}
.palette-toggle .palette-plus{font:20px/1 var(--f-mono);margin-left:12px;color:var(--accent)}
.palette-toggle[aria-expanded="true"] .palette-plus{transform:rotate(45deg)}
.palette-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:380px;max-width:calc(100vw - 36px);max-height:calc(100svh - 116px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;padding:20px;border:1px solid var(--line);background:var(--glass);color:var(--ink);box-shadow:0 18px 65px rgba(0,0,0,.45);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.palette-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}
.palette-head h2{margin:5px 0 0;font:italic 400 26px/1.1 var(--f-serif)}
.palette-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);font:22px/1 var(--f-mono)}
.palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.palette-option{display:grid;align-content:start;gap:9px;min-width:0;min-height:80px;padding:10px 8px;text-align:left;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-soft);font:11px/1.3 var(--f-display)}
.palette-option:hover{background:var(--text-wash)}
.palette-option[aria-pressed="true"]{border-color:var(--accent);background:var(--hover-glass);color:var(--ink)}
.palette-swatch{width:100%;height:22px;background:linear-gradient(115deg,var(--swatch-c),var(--swatch-a) 60%,var(--swatch-b));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.palette-description{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.palette-review-note{margin:8px 0 0;color:var(--ink-faint);font:10px/1.6 var(--f-mono)}
.contact{padding-bottom:max(112px,calc(88px + env(safe-area-inset-bottom,0px)))}
@media(max-width:860px){.scrim,.clist{background:var(--shade)}}
@media(max-width:420px){.palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-panel{width:344px;padding:16px}.palette-option{min-height:70px}.palette-review{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media(forced-colors:active){.palette-option[aria-pressed="true"]{outline:2px solid Highlight}.specimen h3{-webkit-text-fill-color:CanvasText;background:none}}
