/* Atmospheric editorial layer: native CSS/Canvas, no external assets or libraries. */
:root{--card:#faf8f1;--panel:#edf0e6;--panel-warm:#eee4d8;--panel-blue:#e4ecee;--flow:#4d7057;--ease:cubic-bezier(.22,.68,.18,1);--green:#4e6a59;--rust:#b1745c;--blue:#6f8c9b}
html{scrollbar-gutter:stable}
body{transition:background-color .35s var(--ease),color .35s var(--ease)}
main{view-transition-name:page}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(page){animation-duration:.32s;animation-timing-function:var(--ease)}
::view-transition-old(page){animation:page-leave .18s ease both}
::view-transition-new(page){animation:page-arrive .34s var(--ease) both}
@keyframes page-leave{to{opacity:0;transform:translateY(-7px)}}
@keyframes page-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes soft-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.header nav a{transition:color .2s var(--ease)}
.header nav a:after{transition:transform .2s var(--ease)}
.header nav a:hover{color:var(--green)}
.palette-toggle{width:44px;height:44px;padding:11px;border:0;background:none;color:var(--green);display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background .2s,transform .25s var(--ease)}
.palette-toggle svg{width:20px;height:20px;transition:transform .4s var(--ease)}
.palette-toggle:hover,.search-button:hover{background:var(--panel);border-radius:50%}
.palette-toggle[aria-pressed=true] svg{transform:rotate(180deg)}
.button,.filter,.code-head button,.article-tools button,.text-link,.search-button,.icon-button,.top-link{transition:color .2s,background-color .2s,border-color .2s,transform .22s var(--ease),box-shadow .22s var(--ease)}
.button:hover{box-shadow:0 4px 14px #344f3518;transform:translateY(-2px)}
.button span,.work .arrow,.feature-bottom .arrow{display:inline-block;transition:transform .25s var(--ease)}
.button:hover span,.work:hover .arrow,.featured:hover .arrow{transform:translate(3px,-2px)}
.button:active,.palette-toggle:active,.search-button:active,.icon-button:active,.filter:active{transform:translateY(1px) scale(.97)}
.map-node:active,.work:active{transform:translateY(0) scale(.99)}
.post-row{transition:background .25s,padding .25s var(--ease)}
.post-row:hover{background:linear-gradient(90deg,transparent,var(--panel),transparent)}
.featured{transition:box-shadow .3s,border-color .3s}
.featured:hover{border-color:#aebca5;box-shadow:0 8px 30px #4865410c}
.hero-stage{isolation:isolate}
.hero-stage:before{content:"";position:absolute;inset:-16% -7%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 64% 25%,#91aeb317,transparent 58%),radial-gradient(ellipse at 28% 75%,#bd99741c,transparent 55%)}
.hero-stage .hero-art{position:relative}
#atmosphere-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:5px;mix-blend-mode:multiply}
.map-node{background:var(--card)}
.node-work{background:var(--panel)}
.map-controls{position:absolute;right:4px;bottom:-17px;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:9px;letter-spacing:.5px}
.map-controls button{border:0;border-bottom:1px solid var(--line);padding:5px 0;background:transparent;color:var(--green);font-size:10px;min-height:32px;cursor:pointer;transition:color .2s,opacity .2s}
.map-controls button:disabled{cursor:default;opacity:.7}
.hero h1{font-weight:400}
.hero-footnote{font-size:11px}
.station-strip{font-size:11px;letter-spacing:.2px}
.section-title{letter-spacing:1px}
.section-title small{color:var(--muted)}
.feature-visual{background-color:var(--panel)}
.feature-content{background:linear-gradient(130deg,transparent,var(--card))}
.work-info{background:var(--card)}
.work-visual{background-color:var(--panel)}
.work-visual.paper{background-color:var(--panel-warm)}
.sidebar .station-badge{background:var(--panel-blue);color:var(--blue)}
.filters .filter[aria-pressed=true]{box-shadow:inset 0 -1px 0 var(--green)}
.article-toc details[open] nav{animation:soft-arrive .24s var(--ease)}
.article-tools button:hover,.code-head button:hover{color:var(--ink);background:var(--panel)}
.code-head button{border-radius:3px;padding-inline:10px}
.prose a{transition:color .2s,background .2s}
.prose a:hover{background:var(--panel)}
.bottom-note{position:relative}
.bottom-note:before{content:"";position:absolute;top:-1px;left:0;width:66px;height:2px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--rust) 50%)}
.top-link:hover{background:var(--panel);transform:translateY(-3px)}
dialog[open]{animation:search-arrive .24s var(--ease) both}
dialog[open]::backdrop{animation:backdrop-arrive .24s ease both}
dialog.closing[open]{animation:search-leave .18s ease both}
dialog.closing[open]::backdrop{animation:backdrop-leave .18s ease both}
@keyframes search-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes search-leave{to{opacity:0;transform:translateY(7px) scale(.99)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes backdrop-leave{to{opacity:0}}
.search-result{transition:background .2s,transform .2s var(--ease)}
.search-result:hover{transform:translateX(3px)}
.toast{transition:opacity .25s var(--ease),transform .3s var(--ease)}

/* A quieter blue-hour palette; the default remains the original warm paper. */
html[data-palette=dusk]{color-scheme:dark;--paper:#182a30;--ink:#dce6e1;--muted:#a8b8b8;--green:#b0c8b4;--line:#3a4e51;--rust:#d3a28c;--blue:#9cbacb;--card:#20353b;--panel:#263e42;--panel-warm:#3b3b3c;--panel-blue:#2b434e;--flow:#b8d7da}
[data-palette=dusk] body:before{opacity:.1}
[data-palette=dusk] ::selection{background:#4b666b}
[data-palette=dusk] .hero-stage .hero-art img,[data-palette=dusk] .about-map img{filter:drop-shadow(0 12px 16px #07161c25)}
[data-palette=dusk] #atmosphere-canvas{mix-blend-mode:screen}
[data-palette=dusk] .hero-stage:before{background:radial-gradient(ellipse at 64% 25%,#779aa81a,transparent 60%),radial-gradient(ellipse at 28% 75%,#b5826814,transparent 55%)}
[data-palette=dusk] .map-node{border-color:var(--line);box-shadow:0 7px 22px #0002}
[data-palette=dusk] .feature-visual,[data-palette=dusk] .mini-art,[data-palette=dusk] .about-map,[data-palette=dusk] .lab{background-color:var(--panel);color:var(--green)}
[data-palette=dusk] .feature-visual:after{color:#a8bfae}
[data-palette=dusk] .mini-art.code,[data-palette=dusk] .work-visual.paper{background-color:var(--panel-warm);color:#d6baa1}
[data-palette=dusk] .mini-art.note{background-color:#3f3835;color:var(--rust)}
[data-palette=dusk] .paper-illustration{background:var(--paper);border-color:var(--line);box-shadow:7px 6px 0 #18272d;color:var(--green)}
[data-palette=dusk] .work-visual .wind-icon,[data-palette=dusk] .work-visual .wind-text,[data-palette=dusk] .tag,[data-palette=dusk] .prose blockquote{color:var(--muted)}
[data-palette=dusk] .prose blockquote,[data-palette=dusk] .prose code,[data-palette=dusk] .code-block,[data-palette=dusk] .article-toc details{background:var(--panel)}
[data-palette=dusk] .code-block,[data-palette=dusk] .code-head,[data-palette=dusk] .lab input,[data-palette=dusk] .tag,[data-palette=dusk] dialog{border-color:var(--line)}
[data-palette=dusk] .code-head{color:var(--muted)}
[data-palette=dusk] .code-head button{color:var(--green)}
[data-palette=dusk] .article-toc details{border-color:var(--line)}
[data-palette=dusk] .code-block pre code{background:none}
[data-palette=dusk] .tok-key{color:#e4b6a3}
[data-palette=dusk] .tok-string{color:#bdd4ae}
[data-palette=dusk] .tok-number{color:#a8cee3}
[data-palette=dusk] .tok-comment{color:#a0b3a4}
[data-palette=dusk] .demo-label{border-color:#8d7464;color:#dfb394}
[data-palette=dusk] .wind-diagram{background:#b9c7c2}
[data-palette=dusk] .search-result:hover,[data-palette=dusk] .search-result:focus-visible{background:var(--panel)}
[data-palette=dusk] dialog::backdrop{background:#07161caf}
[data-palette=dusk] .toast{background:#c2d5c5;color:#183029}
[data-palette=dusk] .button:hover{background:#c8d8cb;color:#182a30}
[data-palette=dusk] .filter[aria-pressed=true]{background:var(--green);color:var(--paper)}
@media(max-width:850px){.header nav{gap:16px}.map-controls{gap:8px;font-size:8px}}
@media(max-width:600px){
  .header nav{gap:3px}
  .palette-toggle{width:40px;height:44px;min-width:40px}
  .map-controls{bottom:-13px;font-size:8px;gap:10px}
  .map-controls button{font-size:9px;min-height:36px}
  .hero-stage{padding-bottom:50px}
  .node-work{bottom:14px}
  .hero-stage:before{inset:-5% 0}
}
.motion-setting{font-size:10px;color:var(--muted);display:flex;gap:8px;align-items:center;white-space:nowrap}
.motion-setting select{font:11px var(--sans);color:var(--ink);border:1px solid var(--line);background:var(--paper);border-radius:3px;padding:7px;min-height:36px;cursor:pointer}
.motion-setting select:focus-visible{outline:2px solid var(--green);outline-offset:3px}
html[data-motion=still]{scroll-behavior:auto}
[data-motion=still] *,[data-motion=still] *::before,[data-motion=still] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion=still]::view-transition-group(*),[data-motion=still]::view-transition-old(*),[data-motion=still]::view-transition-new(*){animation:none!important}
@media(max-width:600px){.motion-setting{margin-left:auto}.footer .top-link{margin-left:0}}