/* Astral Codex skin (visual layer only). Everything is scoped to html[data-skin="astral"]; remove the attribute to get the previous look.
   Fonts: Cinzel 600 and Mitr 500/600 from @fontsource (SIL OFL 1.1, see /fonts/*-OFL.txt). Body text keeps Roboto Condensed + Noto Sans Thai. */
@font-face{font-family:Cinzel;font-weight:600;font-style:normal;font-display:swap;src:url(/sky-ai/fonts/cinzel-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mitr;font-weight:500;font-style:normal;font-display:swap;src:url(/sky-ai/fonts/mitr-thai-500.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Mitr;font-weight:600;font-style:normal;font-display:swap;src:url(/sky-ai/fonts/mitr-thai-600.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Mitr;font-weight:500;font-style:normal;font-display:swap;src:url(/sky-ai/fonts/mitr-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mitr;font-weight:600;font-style:normal;font-display:swap;src:url(/sky-ai/fonts/mitr-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html[data-skin=astral]{
 --gold:#e6cf93;--gold2:#b8975a;--text:#f3eddf;--muted:#bdb6cf;--panel:rgba(13,10,30,.74);--edge:rgba(230,207,147,.46);--locked:#7a7398;--gem:#d9577f;--gem2:#8f2a50;
 --focus:#fff2c9;
 --disp:Cinzel,Mitr,SkyrimStudy,Thai,serif;
 font-variant-numeric:lining-nums;
}
html[data-skin=astral] .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- focus (keyboard only, via html.kbd) ---- */
html[data-skin=astral].kbd button:focus-visible,html[data-skin=astral].kbd a:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
html[data-skin=astral] .wheel-focus-ring{border-color:var(--focus)}
html[data-skin=astral].kbd .overview-map-option:focus-visible:after{border-color:var(--focus)}

/* ---- pointed plates: ::before = edge, ::after = fill ---- */
html[data-skin=astral] :is(.constellation-option[aria-pressed=true],.character-hud span:last-child,.account-switch,.preview-close,.exit-link,.overview-home,.ov-name,#overview-button,#motion-toggle){isolation:isolate;--pt:12px;--pe:var(--edge);--pf:rgba(10,8,24,.84)}
html[data-skin=astral] :is(.constellation-option[aria-pressed=true],.character-hud span:last-child,.account-switch,.preview-close,.exit-link,.overview-home,.ov-name,#overview-button,#motion-toggle)::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pe);clip-path:polygon(var(--pt) 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,var(--pt) 100%,0 50%);pointer-events:none}
html[data-skin=astral] :is(.constellation-option[aria-pressed=true],.character-hud span:last-child,.account-switch,.preview-close,.exit-link,.overview-home,.ov-name,#overview-button,#motion-toggle)::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--pf);clip-path:polygon(var(--pt) 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,var(--pt) 100%,0 50%);pointer-events:none}
html[data-skin=astral] :is(.preview-close,.exit-link,.overview-home,.account-switch,#overview-button){border:0;border-radius:0;background:none;color:var(--text);font-family:var(--disp);font-weight:600;letter-spacing:.06em;padding:8px 26px}
html[data-skin=astral] :is(.preview-close,.exit-link,.overview-home,.account-switch,#overview-button):hover{color:#fff;--pe:rgba(230,207,147,.8)}
html[data-skin=astral] .character-hud span:last-child{position:relative}

/* ---- top bar ---- */
html[data-skin=astral] #constellation-options{height:74px}
html[data-skin=astral] .constellation-option:not([aria-pressed=true]){transform:translate(calc(-50% + var(--slot)*228px))}
html[data-skin=astral] .constellation-option{width:170px;min-height:48px;padding:20px 8px 4px;font-family:SkyrimStudy,Mitr,Thai,sans-serif;font-weight:500;text-transform:none;letter-spacing:.02em;font-size:16px;line-height:1.6;color:var(--muted);opacity:1;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-skin=astral] .constellation-option[aria-pressed=true]{font-family:Cinzel,Mitr,SkyrimStudy,Thai,serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;width:224px;line-height:1.35;font-size:15px;padding:7px 24px 5px;white-space:normal;overflow:visible;--pt:14px;--pe:var(--gold);--pf:rgba(13,10,30,.9);color:var(--text);opacity:1;text-shadow:0 0 12px rgba(230,207,147,.3);
 transform:translate(-50%) scale(1.06)}
html[data-skin=astral] .constellation-option[aria-pressed=true]::after{
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e6cf93' stroke-width='1.2'%3E%3Cpath d='M1 15V6c0-3 2-5 5-5h9'/%3E%3Ccircle cx='4' cy='4' r='1.3' fill='%23e6cf93' stroke='none'/%3E%3C/svg%3E") left calc(var(--pt) + 2px) top 3px/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e6cf93' stroke-width='1.2'%3E%3Cpath d='M15 15V6c0-3-2-5-5-5H1'/%3E%3Ccircle cx='12' cy='4' r='1.3' fill='%23e6cf93' stroke='none'/%3E%3C/svg%3E") right calc(var(--pt) + 2px) top 3px/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e6cf93' stroke-width='1.2'%3E%3Cpath d='M1 1v9c0 3 2 5 5 5h9'/%3E%3Ccircle cx='4' cy='12' r='1.3' fill='%23e6cf93' stroke='none'/%3E%3C/svg%3E") left calc(var(--pt) + 2px) bottom 3px/16px 16px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e6cf93' stroke-width='1.2'%3E%3Cpath d='M15 1v9c0 3-2 5-5 5H1'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23e6cf93' stroke='none'/%3E%3C/svg%3E") right calc(var(--pt) + 2px) bottom 3px/16px 16px no-repeat,
  var(--pf)}
html[data-skin=astral] .character-hud{font-family:var(--disp);font-weight:600;color:var(--text)}
html[data-skin=astral] .character-hud span:last-child{padding:5px 22px;font-size:13px;letter-spacing:.12em;--pt:9px;--pf:rgba(13,10,30,.84);color:var(--gold)}
html[data-skin=astral] .perk-count{color:var(--muted)}
html[data-skin=astral] .account-switch{--pt:9px;min-height:36px;padding:5px 22px;font-size:12px}

/* ---- overview labels ---- */
html[data-skin=astral] .ov-name{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 26px;border:0;border-radius:0;background:none;font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.06em;line-height:1.25;color:var(--muted)}
html[data-skin=astral] .ov-name svg{color:var(--locked);margin:0;flex:none}
html[data-skin=astral] .ov-gem{display:block;position:absolute;top:calc(50% - 3px);flex:none;width:6px;height:6px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 6px rgba(230,207,147,.7);opacity:0;scale:0}
html[data-skin=astral] .ov-gem.l{left:11px}
html[data-skin=astral] .ov-gem.r{right:11px}
html[data-skin=astral] .overview-map-option:disabled .ov-name{color:var(--locked);opacity:1}
html[data-skin=astral] .overview-map-option:disabled .ov-name::before{background:rgba(122,115,152,.55)}
html[data-skin=astral] .overview-map-option[aria-pressed=true] .ov-name{--pe:var(--gold);color:var(--text);text-transform:uppercase;letter-spacing:.1em}
html[data-skin=astral] .overview-map-option[aria-pressed=true] .ov-gem{opacity:1;scale:1}
html[data-skin=astral] .overview-map-option.is-owned:not([aria-pressed=true]) .ov-name{color:#e3dac6}

/* ---- constellation art: gold (owned), cool grey-violet (unowned), dashed dim (level-locked) ---- */
html[data-skin=astral] #wheel-glow .g0{stop-color:#fff4d4}
html[data-skin=astral] #wheel-glow .g1{stop-color:#e6cf93}
html[data-skin=astral] #wheel-glow .g2{stop-color:#b8975a}
html[data-skin=astral] .wheel-art .art-line{stroke:#9d96bc;stroke-opacity:.5}
html[data-skin=astral] .wheel-item.is-center:not(.is-owned) .wheel-art .art-line{stroke-opacity:.5}
html[data-skin=astral] .wheel-art .art-core{--lit:#fff4d4;fill:#a39cc2;transform-box:fill-box;transform-origin:center}
html[data-skin=astral] .wheel-art .art-core.is-root{--lit:#fff4d4;fill:#a39cc2}
html[data-skin=astral] .wheel-art .art-line-lit{stroke:#fff4d4}
html[data-skin=astral] .is-owned .wheel-art .art-line{stroke:#f2dfaa;stroke-opacity:.9;filter:drop-shadow(0 0 3px rgba(230,207,147,.8))}
html[data-skin=astral] .is-owned .wheel-art .art-core,html[data-skin=astral] .is-owned .wheel-art .art-core.is-root{fill:#fff4d4;filter:drop-shadow(0 0 3px rgba(230,207,147,.8))}
html[data-skin=astral] .is-gated .wheel-art{filter:none}
html[data-skin=astral] .is-gated .wheel-art .art-line,html[data-skin=astral] .wheel-item.is-center.is-gated .wheel-art .art-line{stroke:#7f78a0;stroke-opacity:.55;stroke-dasharray:calc(var(--u)*.16px) calc(var(--u)*.26px)}
html[data-skin=astral] .is-gated .wheel-art .art-core,html[data-skin=astral] .is-gated .wheel-art .art-core.is-root{fill:#7a7398}
html[data-skin=astral] .overview-map-option.is-owned .wheel-art{filter:none}
html[data-skin=astral] .overview-map-option[aria-pressed=true] .wheel-art{filter:drop-shadow(0 0 3px rgba(255,244,212,.9)) drop-shadow(0 0 12px rgba(230,207,147,.5))}
@media(hover:hover) and (pointer:fine){html[data-skin=astral] .overview-map-option:not(:disabled):hover .wheel-art{filter:drop-shadow(0 0 8px rgba(230,207,147,.7))}}
html[data-skin=astral] .overview-map-option:disabled .wheel-art{opacity:.4;filter:none}
html[data-skin=astral] .wheel-art.is-lighting .art-line{animation-name:astralLineBase}
html[data-skin=astral] .wheel-art.is-lighting .art-core{animation-name:astralCoreLit}
@keyframes astralLineBase{to{stroke:#f2dfaa;stroke-opacity:.9;filter:drop-shadow(0 0 3px rgba(230,207,147,.8))}}
@keyframes astralCoreLit{to{fill:var(--lit);filter:drop-shadow(0 0 3px rgba(230,207,147,.8))}}
@keyframes astralArtPulse{50%{scale:1.03;filter:drop-shadow(0 0 12px rgba(230,207,147,.85))}}
html[data-skin=astral] .wheel-art.is-pulse{animation-name:astralArtPulse}

/* ---- wheel ---- */
html[data-skin=astral] .wheel-name{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-shadow:none}
html[data-skin=astral] .wheel-item.is-center{color:var(--text)}
html[data-skin=astral] .wheel-item.is-center .wheel-name{font-size:50px;line-height:1.2;color:var(--text);text-shadow:0 0 16px rgba(230,207,147,.25)}
html[data-skin=astral] .wheel-item.is-center .wheel-name::after{content:"";display:block;width:240px;height:12px;margin:12px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' fill='none'%3E%3Cpath d='M0 6H100M140 6H240' stroke='%23e6cf93' stroke-opacity='.7'/%3E%3Cpath d='M120 1l5 5-5 5-5-5z' fill='%23e6cf93'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html[data-skin=astral] .wheel-item:disabled .wheel-name{color:var(--locked)}
html[data-skin=astral] .wheel-name .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;padding:.08em 0}
@media(max-width:650px){
 html[data-skin=astral] .wheel-item.is-center .wheel-name{font-size:30px}
 html[data-skin=astral] .wheel-item.is-center .wheel-name::after{width:190px}
 html[data-skin=astral] .wheel-name .nm{-webkit-line-clamp:4}
 html[data-skin=astral] .constellation-option{width:80px;font-size:12px;letter-spacing:0;padding:16px 4px 4px}
 html[data-skin=astral] .constellation-option:not([aria-pressed=true]){transform:translate(calc(-50% + var(--slot)*138px))}
 html[data-skin=astral] .constellation-option[aria-pressed=true]{width:140px;font-size:11px;letter-spacing:.04em;padding:8px 16px 6px}
 html[data-skin=astral] #buy-button .b-unit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-skin=astral] .account-switch{--pt:8px;min-height:36px;padding:4px 12px;font-size:10px;letter-spacing:.04em}
 html[data-skin=astral] .character-hud span:last-child{padding:4px 14px;font-size:11px}
}

/* ---- floating controls (the old bottom bar is gone) ---- */
html[data-skin=astral] .bottom-hud{background:none;padding:0 0 14px;pointer-events:none}
html[data-skin=astral] .controls{min-height:0;width:auto;margin:0;padding:0;justify-content:center;gap:0}
html[data-skin=astral] #overview-hint{color:var(--muted);font-family:Mitr,SkyrimStudy,Thai,sans-serif;font-weight:500;font-size:13px;letter-spacing:.04em;text-shadow:0 1px 6px #000}
html[data-skin=astral] #overview-hint svg{color:var(--gold)}
html[data-skin=astral][data-ov-pan] #skills[data-mode=overview] #overview-hint{display:inline-flex;align-items:center;gap:8px;opacity:1;transition:opacity .6s}
html[data-skin=astral][data-ov-panned] #skills[data-mode=overview] #overview-hint{opacity:0}
html[data-skin=astral] :is(.preview-close,#overview-button){display:grid;place-items:center;width:56px;min-width:44px;min-height:44px;padding:0;--pt:11px;color:var(--gold)}
html[data-skin=astral] :is(.preview-close,#overview-button):hover{color:#fff}
html[data-skin=astral] :is(.preview-close,#overview-button){top:var(--icon-top,56px)}
html[data-skin=astral] #overview-button{position:absolute;z-index:7;left:3%}
html[data-skin=astral] #skills:has(.constellation-preview:not([hidden])) #overview-button{left:calc(3% + 66px)}
html[data-skin=astral] #motion-toggle{position:absolute;z-index:6;top:22px;right:calc(3% + 132px);width:44px;min-height:34px;padding:0;--pt:9px;color:var(--gold);font-size:15px}
html[data-skin=astral] .account-switch{top:68px}
html[data-skin=astral] #overview-list{bottom:44px}
html[data-skin=astral] .skill-wheel{bottom:56px}
html[data-skin=astral] .detail-topics{bottom:48px}
@media(max-width:650px){
 html[data-skin=astral] :is(.preview-close,#overview-button){top:104px}
 html[data-skin=astral] #overview-button{left:8px}
 html[data-skin=astral] #skills:has(.constellation-preview:not([hidden])) #overview-button{left:70px}
 html[data-skin=astral] #motion-toggle{top:6px;right:calc(3% + 98px);width:40px;min-height:30px}
 html[data-skin=astral] .account-switch{top:124px;bottom:auto;left:auto;right:10px;min-height:32px;padding:4px 10px;font-size:9px;letter-spacing:.02em;--pt:7px}
 html[data-skin=astral] #overview-list{bottom:calc(40px + env(safe-area-inset-bottom))}
 html[data-skin=astral] .skill-wheel{bottom:calc(44px + env(safe-area-inset-bottom))}
 html[data-skin=astral] .detail-body{bottom:calc(30px + env(safe-area-inset-bottom))}
}

/* ---- detail ---- */
html[data-skin=astral] .constellation-preview{color:var(--text)}
html[data-skin=astral] .preview-kicker{color:var(--gold);letter-spacing:.3em;font-family:var(--disp);font-weight:600}
html[data-skin=astral] .detail-info h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden;overflow-wrap:anywhere;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:40px;line-height:1.12;color:var(--text)}
html[data-skin=astral] .detail-info p:not(.preview-kicker){color:#e3dac6}
html[data-skin=astral] #buy-status{color:var(--muted)}
html[data-skin=astral] #open-quest-route{color:var(--gold);text-decoration-color:rgba(230,207,147,.4)}
html[data-skin=astral] .detail-topics h2{font-family:var(--disp);font-weight:600;color:var(--gold);letter-spacing:.24em;font-size:20px;text-shadow:none;padding-bottom:10px;background:linear-gradient(90deg,var(--gold),rgba(230,207,147,0)) left bottom/100% 1px no-repeat}
html[data-skin=astral] .detail-topics h2::before{display:none}
html[data-skin=astral] #detail-topic-count{color:var(--muted);opacity:1}
/* the taller title block lifts the column into the empty space under the art so Buy / link keep clear of the bottom bar */
@media(min-width:651px){html[data-skin=astral] .detail-info{top:calc(var(--detail-bottom,50vh) - 44px);gap:8px}}
@media(max-width:650px){
 html[data-skin=astral] .detail-info h1{font-size:25px}
 html[data-skin=astral] .detail-topics h2{font-size:15px;letter-spacing:.2em}
}

/* ---- topic nodes (double ring), the arc layout is untouched ---- */
html[data-skin=astral] .topic-dot{position:relative;font-family:var(--disp);font-weight:600;font-size:15px;border:1.5px solid var(--gold);background:rgba(60,42,20,.45);box-shadow:0 0 12px rgba(230,207,147,.5);color:#fff3cf}
html[data-skin=astral] .topic-dot::before{content:"";position:absolute;inset:3px;border:1px solid rgba(230,207,147,.55);border-radius:50%;pointer-events:none}
html[data-skin=astral] .topic-dot svg{color:var(--muted);opacity:1}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-dot{border:1.5px solid #6f6890;background:rgba(20,15,40,.8);box-shadow:none}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-dot::before{border-color:rgba(111,104,144,.55)}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-name{color:var(--muted);opacity:.6}
html[data-skin=astral] .topic-name{color:var(--text)}
html[data-skin=astral] #detail-topic-list.is-owned .topic-name{color:var(--text)}
html[data-skin=astral] #detail-topic-empty{color:var(--muted)}
html[data-skin=astral] .topic-more{color:var(--gold)}
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-dot{border:1.5px solid var(--gold);background:rgba(60,42,20,.45);box-shadow:0 0 12px rgba(230,207,147,.5);animation-name:astralTopicNode}
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-dot::before{border-color:rgba(230,207,147,.55)}
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-name{color:var(--text);opacity:1;animation-name:astralNameLit}
@keyframes astralTopicNode{from{background:rgba(20,15,40,.8);border:1.5px solid #6f6890;box-shadow:none}50%{box-shadow:0 0 22px rgba(255,236,170,.9)}}
@keyframes astralNameLit{from{color:var(--muted);opacity:.6}}
@media(prefers-reduced-motion:reduce){html[data-skin=astral] .wheel-art.is-lighting *,html[data-skin=astral] #detail-topic-list.is-lighting *,html[data-skin=astral] .wheel-art.is-pulse,html[data-skin=astral] #buy-button.is-swap{animation:none!important}}

/* ---- Buy button (style A): amber chamfered plate, corner brackets, price chip ---- */
html[data-skin=astral] #buy-button{--ch:14px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:min(340px,100%);min-height:52px;padding:10px 30px;border:0;border-radius:0;
 color:#2a1202;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
 --cl:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
 filter:drop-shadow(0 0 14px rgba(255,150,50,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:transform .12s ease-out,filter .12s ease-out;
 background:
  linear-gradient(#ffb347,#ffb347) left top/10px 1.5px no-repeat,linear-gradient(#ffb347,#ffb347) left top/1.5px 10px no-repeat,
  linear-gradient(#ffb347,#ffb347) right top/10px 1.5px no-repeat,linear-gradient(#ffb347,#ffb347) right top/1.5px 10px no-repeat,
  linear-gradient(#ffb347,#ffb347) left bottom/10px 1.5px no-repeat,linear-gradient(#ffb347,#ffb347) left bottom/1.5px 10px no-repeat,
  linear-gradient(#ffb347,#ffb347) right bottom/10px 1.5px no-repeat,linear-gradient(#ffb347,#ffb347) right bottom/1.5px 10px no-repeat}
html[data-skin=astral] #buy-button::before{content:"";position:absolute;inset:5px;z-index:-2;background:linear-gradient(180deg,#fff0c8,#ffa344);clip-path:var(--cl)}
html[data-skin=astral] #buy-button::after{content:"";position:absolute;inset:6px;z-index:-1;background:radial-gradient(120% 160% at 50% 135%,rgba(255,255,255,.55),transparent 58%),linear-gradient(180deg,#ffd58a,#ffa13a);clip-path:var(--cl)}
html[data-skin=astral] #buy-button .b-label{font-weight:700}
html[data-skin=astral] #buy-button .b-price{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;background:#2d1604;color:#ffe2a8;font-weight:700;font-size:15px;--cp:8px;clip-path:polygon(var(--cp) 0,100% 0,100% calc(100% - var(--cp)),calc(100% - var(--cp)) 100%,0 100%,0 var(--cp))}
html[data-skin=astral] #buy-button .b-unit{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
html[data-skin=astral] #buy-button:hover:not(:disabled){background-color:transparent;transform:translateY(-2px);filter:drop-shadow(0 0 24px rgba(255,160,60,.85)) drop-shadow(0 6px 12px rgba(0,0,0,.5))}
html[data-skin=astral] #buy-button:hover:not(:disabled)::after{background:radial-gradient(120% 160% at 50% 135%,rgba(255,255,255,.8),transparent 62%),linear-gradient(180deg,#ffe2a6,#ffb04e)}
html[data-skin=astral] #buy-button:active:not(:disabled){transform:scale(.97) translateY(1px);filter:drop-shadow(0 0 8px rgba(255,150,50,.4));transition-duration:.08s}
html[data-skin=astral] #buy-button:disabled{opacity:.72;cursor:default}
/* gated (level too low): same plate in the locked palette */
html[data-skin=astral] #buy-button.is-gated{color:var(--muted);filter:none;opacity:1;background:none}
html[data-skin=astral] #buy-button.is-gated::before{background:rgba(122,115,152,.6)}
html[data-skin=astral] #buy-button.is-gated::after{background:linear-gradient(180deg,#221a38,#181229)}
/* purchased: B's owned plate */
html[data-skin=astral] #buy-button.owned{color:var(--text);filter:none;opacity:1;cursor:default;background:none;text-transform:uppercase}
html[data-skin=astral] #buy-button.owned::before{background:rgba(190,180,215,.45)}
html[data-skin=astral] #buy-button.owned::after{background:linear-gradient(180deg,#221a38,#181229)}
html[data-skin=astral] #buy-button.owned svg{filter:drop-shadow(0 0 5px rgba(230,207,147,.7))}
@media(max-width:650px){html[data-skin=astral] #buy-button{width:100%}}
@media(prefers-reduced-motion:reduce){html[data-skin=astral] #buy-button{transition:none}}

/* ================= Motion (round 5, item 4) =================
   Only transform/opacity (as the individual `translate` / `scale` properties, so the transforms set by the wheel,
   the topic arc and the overview field are never touched). Off for prefers-reduced-motion and the pause button (html.motion-paused). */
html[data-skin=astral]{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.45,0,.25,1);--ease-back:cubic-bezier(.34,1.4,.64,1);--d-micro:120ms;--d-short:200ms;--d-med:320ms;--d-long:480ms}
html.motion-paused[data-skin=astral] :is(.detail-info,.detail-topics h2,.detail-topic-scroll,.overview-map-option){animation:none!important}
@media(prefers-reduced-motion:no-preference){
/* M1 page open */
@keyframes m1Top{from{opacity:0;translate:0 -8px}}
@keyframes m1Fade{from{opacity:0}}
@keyframes m1Ov{from{scale:.96}}
html[data-skin=astral]:not(.motion-paused) :is(.character-hud,.account-switch,#motion-toggle,.perk-count,#constellation-options){animation:m1Top var(--d-med) var(--ease-out) backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-option:nth-child(1){animation:m1Fade var(--d-med) var(--ease-out) 0ms backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-option:nth-child(2){animation:m1Fade var(--d-med) var(--ease-out) 40ms backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-option:nth-child(3){animation:m1Fade var(--d-med) var(--ease-out) 80ms backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-option:nth-child(n+4){animation:m1Fade var(--d-med) var(--ease-out) 120ms backwards}
html[data-skin=astral]:not(.motion-paused) .overview-map-option .ov-medal{animation:m1Ov 360ms var(--ease-out) calc(80ms + var(--i)*50ms) backwards}
html[data-skin=astral]:not(.motion-paused) .overview-map-option{animation-delay:calc(80ms + var(--i)*50ms)}
/* M2 Sky switch: the new name slides in from the side that was clicked */
@keyframes m2In{from{opacity:0;translate:var(--m2x,0px) 0}}
html[data-skin=astral]:not(.motion-paused) .constellation-option[aria-pressed=true] .t{display:inline-block;animation:m2In var(--d-short) var(--ease-out) var(--d-micro) backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-option:not([aria-pressed=true]) .t{animation:m1Fade var(--d-micro) linear backwards}
/* M3 overview -> wheel: the picked Route does not move, its glow flashes once */
@keyframes m3Flash{50%{opacity:1;scale:1.12}}
html[data-skin=astral]:not(.motion-paused) #overview-list.is-picking .is-picked .art-glow{animation:m3Flash 240ms var(--ease-io)}
/* M4 wheel: centre name fades/rises in, the diamond divider draws */
@keyframes m4Name{from{opacity:0;translate:0 8px}}
@keyframes m4Line{from{scale:0 1}}
html[data-skin=astral]:not(.motion-paused) .wheel-item.is-center .wheel-name{animation:m4Name 220ms var(--ease-out) 100ms backwards}
html[data-skin=astral]:not(.motion-paused) .wheel-item.is-center .wheel-name::after{animation:m4Line 280ms var(--ease-out) 160ms backwards}
/* M5 detail: staggered entrance (children only; the arc transforms of the rows are not touched) */
@keyframes m5Art{from{opacity:0;scale:.97}}
@keyframes m5Up{from{opacity:0;translate:0 8px}}
@keyframes m5Row{from{opacity:0;translate:-8px 0}}
@keyframes m5Line{from{scale:0 1}}
html[data-skin=astral]:not(.motion-paused) .skill-wheel.is-detail .wheel-item.is-center .wheel-art{animation:m5Art var(--d-med) var(--ease-out) backwards}
html[data-skin=astral]:not(.motion-paused) .constellation-preview:not(.is-dissolved) .detail-info{animation:none}
html[data-skin=astral]:not(.motion-paused) .constellation-preview:not(.is-dissolved) .detail-info>*{animation:m5Up 280ms var(--ease-out) backwards}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(1){animation-delay:120ms!important}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(2){animation-delay:180ms!important}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(3){animation-delay:240ms!important}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(4){animation-delay:300ms!important}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(5){animation-delay:360ms!important}
html[data-skin=astral]:not(.motion-paused) .detail-info>:nth-child(6){animation-delay:420ms!important}
html[data-skin=astral]:not(.motion-paused) .constellation-preview:not(.is-dissolved) .detail-topic-scroll{animation:none}
html[data-skin=astral]:not(.motion-paused) #detail-topic-list li .topic-dot,html[data-skin=astral]:not(.motion-paused) #detail-topic-list li .topic-name{animation:m5Row 260ms var(--ease-out) calc(470ms + min(var(--i),8)*45ms) backwards}
/* M6 buttons / plates (hover only on hover:hover devices) */
html[data-skin=astral]:not(.motion-paused) :is(.constellation-option,#preview-close,#overview-button,.account-switch,#motion-toggle){transition:translate var(--d-micro) var(--ease-out),scale 180ms var(--ease-back),opacity .18s,color .16s}
html[data-skin=astral]:not(.motion-paused) :is(.constellation-option,#preview-close,#overview-button,.account-switch,#motion-toggle):active{scale:.97;transition-duration:80ms}
@media(hover:hover) and (pointer:fine){
html[data-skin=astral]:not(.motion-paused) :is(.constellation-option,#preview-close,#overview-button,.account-switch,#motion-toggle):not(:disabled):hover{translate:0 -1px;--pe:rgba(255,240,200,.9)}
html[data-skin=astral]:not(.motion-paused) #preview-close svg{transition:translate 160ms var(--ease-out)}
html[data-skin=astral]:not(.motion-paused) #preview-close:hover svg{translate:-2px 0}
}
/* M7 Buy sheen: diagonal sweep every 6s, only while the button is on screen, unbought, and loops are on */
@keyframes m7Sheen{0%{translate:-140% 0;opacity:1}11.6%{translate:240% 0;opacity:1}11.7%,100%{translate:240% 0;opacity:0}}
html[data-skin=astral]:not(.motion-paused) #buy-button.in-view:not(.owned):not(:disabled) .b-sheen::before{animation:m7Sheen 6s var(--ease-io) 1.5s infinite}
/* M8 overview labels: gold diamonds pop in on hover/focus */
html[data-skin=astral]:not(.motion-paused) .ov-gem{transition:scale var(--d-micro) var(--ease-back),opacity var(--d-micro)}
/* M9 twinkle: owned Routes only, on-screen items only (centre wheel item / visible overview items) */
@keyframes m9Twinkle{from{opacity:.55;scale:.9}to{opacity:1;scale:1.08}}
html[data-skin=astral]:not(.motion-paused) .wheel-item.is-center.is-owned .wheel-art:not(.is-lighting):not(.is-pulse) .art-glow,html[data-skin=astral]:not(.motion-paused) .overview-map-option.in-view.is-owned .wheel-art:not(.is-lighting):not(.is-pulse) .art-glow{animation:m9Twinkle var(--tw-dur,3s) var(--ease-io) var(--tw-delay,0s) infinite alternate}
/* M10 hint icon: sway 3 times then stop (replays whenever the hint shows again) */
@keyframes m10Sway{0%,100%{translate:0 0}25%{translate:-6px 0}75%{translate:6px 0}}
html[data-skin=astral]:not(.motion-paused) #overview-hint svg{animation:m10Sway 1.6s var(--ease-io) 3}
/* M11 topic hover (desktop) */
@media(hover:hover) and (pointer:fine){
html[data-skin=astral]:not(.motion-paused) .topic-dot{transition:scale var(--d-micro) var(--ease-out),border-color var(--d-micro)}
html[data-skin=astral]:not(.motion-paused) #detail-topic-list.is-owned li:hover .topic-dot{scale:1.06;border-color:#fff2c9}
html[data-skin=astral]:not(.motion-paused) #detail-topic-list.is-owned li:hover .topic-name{color:#fff}
html[data-skin=astral]:not(.motion-paused) #detail-topic-list:not(.is-owned) li:hover .topic-name{opacity:.8}
}
/* looping animations stop while the tab is hidden, motion is paused, a light-up plays, or the user drags/pans */
html.loops-off[data-skin=astral] :is(#buy-button .b-sheen::before,.art-glow,#overview-hint svg){animation-play-state:paused}
html[data-skin=astral] :is(#overview-list.is-dragging,.skill-wheel.is-dragging) .art-glow{animation-play-state:paused}
}
/* static parts of M7/M8 (no animation by themselves) */
html[data-skin=astral] #buy-button .b-sheen{position:absolute;inset:6px;z-index:0;overflow:hidden;pointer-events:none;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
html[data-skin=astral] #buy-button .b-sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);opacity:0}
html[data-skin=astral] #buy-button :is(.b-label,.b-price){position:relative;z-index:1}
html[data-skin=astral] .overview-map-option:not(:disabled):focus-visible .ov-gem{opacity:1;scale:1}
@media(hover:hover) and (pointer:fine){
html[data-skin=astral] .overview-map-option:not(:disabled):hover .ov-gem{opacity:1;scale:1}
html[data-skin=astral] .overview-map-option:not(:disabled):hover .ov-name{--pe:var(--gold)}
}

/* Topics heading (text, count, gold rule) sits at the left art top with the list right under it. */
html[data-skin=astral] .detail-topics h2{position:relative;margin:0 0 22px;padding-bottom:10px;background:none}
html[data-skin=astral] .detail-topics h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(230,207,147,0));transform-origin:left}
html[data-skin=astral] #detail-topic-count{opacity:.6}
html[data-skin=astral] .detail-topics{top:max(136px,min(var(--detail-art-top,136px),calc(100dvh - var(--topic-rows,6)*80px - 120px)))}
@media(max-width:650px){
 html[data-skin=astral] .detail-topics{top:auto;margin-top:24px}
 html[data-skin=astral] .detail-topics h2{margin-bottom:34px}
}
@media(prefers-reduced-motion:no-preference){
 @keyframes m5Rule{from{scale:0 1}}
 html[data-skin=astral]:not(.motion-paused) .detail-topics h2::after{animation:m5Rule 360ms var(--ease-out) 150ms backwards}
 html[data-skin=astral]:not(.motion-paused) .constellation-preview:not(.is-dissolved) .detail-topics h2{animation:m1Fade 200ms var(--ease-out) 100ms backwards}
}

/* The wheel layer is hidden (after its fade) while the overview is shown, so a page open never flashes it. */
html[data-skin=astral] #skills[data-mode=overview] .selection{visibility:hidden;transition:visibility 0s linear .4s}

/* Words never break inside; long single words shrink instead (see fitWheelName / fitDetailTitle / fitOverviewLabels). */
html[data-skin=astral] .wheel-name .nm,html[data-skin=astral] .detail-info h1,html[data-skin=astral] .ov-text,html[data-skin=astral] .wheel-name{overflow-wrap:normal;word-break:normal;hyphens:none}
html[data-skin=astral] .ov-name.is-long .ov-text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
@media(max-width:650px){
 html[data-skin=astral] .ov-name{max-width:min(calc(var(--D)*1.9),214px);padding:4px 16px;letter-spacing:.05em}
 html[data-skin=astral] .overview-map-option[aria-pressed=true] .ov-name{letter-spacing:.06em}
}
html[data-skin=astral] .wheel-name .nm.is-long,html[data-skin=astral] .detail-info h1.is-long{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* ---- Route emblem (HamStellar-owned image behind the stars) ---- */
html[data-skin=astral] .wheel-art .art-emblem{filter:grayscale(.85) brightness(.5);opacity:.7;pointer-events:none}
html[data-skin=astral] .is-owned .wheel-art .art-emblem{filter:drop-shadow(0 0 10px rgb(201 164 94/.3));opacity:var(--emb-op,1)}
html[data-skin=astral] .skill-wheel.is-detail{--emb-op:.9}
/* owned stars on an emblem get a 2px dark halo so they stay readable on cream/white parts of the picture */
html[data-skin=astral] .is-owned .wheel-art.has-emblem .art-core,html[data-skin=astral] .is-owned .wheel-art.has-emblem .art-core.is-root{filter:drop-shadow(0 0 2px #04030d) drop-shadow(0 0 3px rgba(230,207,147,.8))}
/* light-up: the emblem goes from grey to colour over the whole star sequence, then one gold glow (0 -> 22 -> 10px, about 600ms) */
@keyframes emblemColor{from{filter:grayscale(.85) brightness(.5) drop-shadow(0 0 0 rgb(201 164 94/0));opacity:.7}to{filter:grayscale(0) brightness(1) drop-shadow(0 0 10px rgb(201 164 94/.3));opacity:var(--emb-op,1)}}
@keyframes emblemGlow{0%{filter:drop-shadow(0 0 0 rgb(201 164 94/.3))}45%{filter:drop-shadow(0 0 22px rgb(232 190 110/.75))}100%{filter:drop-shadow(0 0 10px rgb(201 164 94/.3))}}
@keyframes astralCoreLitE{to{fill:var(--lit);filter:drop-shadow(0 0 2px #04030d) drop-shadow(0 0 3px rgba(230,207,147,.8))}}
@media(prefers-reduced-motion:no-preference){
 html[data-skin=astral]:not(.motion-paused) .wheel-art.is-lighting .art-emblem{animation:emblemColor var(--lit-t,1.6s) var(--ease-io,cubic-bezier(.45,0,.25,1)) both,emblemGlow 600ms var(--ease-out,cubic-bezier(.2,.8,.2,1)) var(--lit-t,1.6s) forwards}
 html[data-skin=astral]:not(.motion-paused) .wheel-art.has-emblem.is-lighting .art-core{animation-name:astralCoreLitE}
}

/* An emblem fills the art box (no empty band under it), so the info column starts right under the box instead of tucked up into it. */
@media(min-width:651px){html[data-skin=astral] #skills:has(.skill-wheel .wheel-item.is-center .wheel-art.has-emblem) .detail-info{top:calc(var(--detail-bottom,50vh) + 6px)}}

/* Overview: emblem stars and lines are enlarged so the Route reads at medallion size (stars >= 8px, lines >= 1.5px). */
html[data-skin=astral] .overview-map-option .wheel-art.has-emblem .art-core{scale:1.5}
html[data-skin=astral] .overview-map-option .wheel-art.has-emblem .art-line{stroke-width:calc(var(--u)*.09px)}
@media(max-width:650px){html[data-skin=astral] .overview-map-option .wheel-art.has-emblem .art-core{scale:1.9}}

/* ===== Constellation peek: hover card on the overview (desktop) and bottom sheet (touch, opened by the (i) button) ===== */
html[data-skin=astral] :is(.constellation-peek,.peek-sheet-root){--lit:#fff4d4;--ch:14px;--cl:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));color:var(--text);font:14px/1.62 "Roboto Condensed",Thai,sans-serif;text-align:left}
html[data-skin=astral] :is(.constellation-peek,.peek-sheet-root) :is(*,*::before,*::after){box-sizing:border-box}
html[data-skin=astral] .constellation-peek{position:fixed;left:0;top:0;z-index:30;width:min(var(--peek-w,360px),calc(100vw - 32px));translate:var(--px,0) var(--py,0);pointer-events:none;transition:translate var(--d-short) var(--ease-out)}
html[data-skin=astral] .constellation-peek[hidden]{display:none}
html[data-skin=astral] .constellation-peek.is-live{pointer-events:auto}
html[data-skin=astral] .peek-shell{position:relative;opacity:0;scale:.98;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));transition:opacity var(--d-micro) ease-in,translate var(--d-micro) ease-in,scale var(--d-micro) ease-in}
html[data-skin=astral] .constellation-peek[data-side=right] .peek-shell{translate:-8px 0}
html[data-skin=astral] .constellation-peek[data-side=left] .peek-shell{translate:8px 0}
html[data-skin=astral] .constellation-peek.is-open .peek-shell{opacity:1;scale:1;translate:0 0;transition:opacity var(--d-short) var(--ease-out),translate var(--d-short) var(--ease-out),scale var(--d-short) var(--ease-out)}
html[data-skin=astral] .peek-frame{clip-path:var(--cl);background:var(--edge);padding:1px}
html[data-skin=astral] .peek-in{clip-path:var(--cl);display:flex;flex-direction:column;max-height:calc(var(--peek-max,100vh) - 2px);background:linear-gradient(180deg,rgba(17,13,38,.94),rgba(9,7,22,.96));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-skin=astral] .peek-tip{position:absolute;width:12px;height:12px;margin-top:-6px;rotate:45deg;background:#120e2a}
html[data-skin=astral] .constellation-peek[data-side=right] .peek-tip{left:-6px;border-left:1px solid var(--edge);border-bottom:1px solid var(--edge)}
html[data-skin=astral] .constellation-peek[data-side=left] .peek-tip{right:-6px;border-right:1px solid var(--edge);border-top:1px solid var(--edge)}
/* media strip */
html[data-skin=astral] .peek-media{position:relative;flex:none;aspect-ratio:16/9;overflow:hidden;background:#000;touch-action:pan-y}
html[data-skin=astral] .peek-media::after{content:"";position:absolute;inset:auto 0 0;height:46px;background:linear-gradient(transparent,rgba(9,7,22,.85));pointer-events:none}
html[data-skin=astral] .peek-view{position:absolute;inset:0}
html[data-skin=astral] .peek-slide{position:absolute;inset:0;opacity:0;transition:opacity 240ms linear}
html[data-skin=astral] .peek-slide.on{opacity:1}
html[data-skin=astral] .peek-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
html[data-skin=astral] .peek-slide iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}
html[data-skin=astral] :is(.peek-arrow,.peek-play,.peek-btn){appearance:none;font:inherit;padding:0;cursor:pointer}
html[data-skin=astral] .peek-play{position:absolute;left:50%;top:50%;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;color:var(--lit);background:rgba(9,7,22,.72);border:1px solid var(--edge);rotate:45deg}
html[data-skin=astral] .peek-play svg{rotate:-45deg;margin-left:2px}
html[data-skin=astral] .peek-play:hover{color:#fff;background:rgba(9,7,22,.86);border-color:var(--gold)}
html[data-skin=astral] .peek-count{position:absolute;right:10px;top:10px;z-index:2;padding:3px 12px;font:600 11px/1.4 var(--disp);letter-spacing:.12em;color:var(--lit);background:rgba(9,7,22,.72);pointer-events:none;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
html[data-skin=astral] .peek-arrow{position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;color:var(--gold);background:rgba(9,7,22,.7);border:1px solid var(--edge);rotate:45deg}
html[data-skin=astral] .peek-arrow span{rotate:-45deg;font:600 14px/1 var(--disp)}
html[data-skin=astral] .peek-arrow:hover{color:#fff;border-color:var(--gold)}
html[data-skin=astral] .peek-arrow.l{left:20px}
html[data-skin=astral] .peek-arrow.r{right:20px}
html[data-skin=astral] .peek-dots{position:absolute;left:0;right:0;bottom:9px;z-index:2;display:flex;justify-content:center;gap:8px;pointer-events:none}
html[data-skin=astral] .peek-dots i{width:7px;height:7px;rotate:45deg;border:1px solid var(--gold);background:transparent;transition:background-color var(--d-micro)}
html[data-skin=astral] .peek-dots i.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}
/* text */
html[data-skin=astral] .peek-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(230,207,147,.4) transparent;padding:14px 20px 18px}
html[data-skin=astral] .peek-kicker{font:600 10.5px/1 var(--disp);letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
html[data-skin=astral] .peek-title{margin:8px 0 2px;font:600 18px/1.4 Mitr,Thai,sans-serif;color:var(--lit)}
html[data-skin=astral] .peek-rule{height:12px;margin:6px 0 8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='12' fill='none'%3E%3Cpath d='M0 6H150M170 6H320' stroke='%23e6cf93' stroke-opacity='.5'/%3E%3Cpath d='M160 1l5 5-5 5-5-5z' fill='%23e6cf93'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html[data-skin=astral] .peek-desc p{margin:0 0 8px;color:#e3dac6}
html[data-skin=astral] .peek-desc strong,html[data-skin=astral] .peek-list strong{font:500 1em/1 Mitr,Thai,sans-serif;color:var(--lit)}
html[data-skin=astral] .peek-for{margin-top:6px;font:600 12px/1.4 Mitr,Thai,sans-serif;color:var(--gold);letter-spacing:.04em}
html[data-skin=astral] .peek-list{list-style:none;padding:0;margin:6px 0 0}
html[data-skin=astral] .peek-list li{position:relative;padding-left:18px;margin:2px 0;color:#e3dac6}
html[data-skin=astral] .peek-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* (i) button: end of the label, touch layouts only; 44px hit area around a 28px diamond */
html[data-skin=astral] .ov-info{display:none;position:absolute;left:calc(100% + 2px);top:50%;width:44px;height:44px;margin-top:-22px;place-items:center;color:var(--gold);cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-skin=astral] .ov-info::before{content:"";position:absolute;width:20px;height:20px;rotate:45deg;background:rgba(10,8,24,.84);border:1px solid var(--edge)}
html[data-skin=astral] .ov-info i{position:relative;font:italic 600 14px/1 Georgia,serif}
@media(hover:none),(pointer:coarse),(max-width:650px){html[data-skin=astral] .ov-info{display:grid}}
/* bottom sheet */
html[data-skin=astral] .peek-sheet-root{position:fixed;inset:0;z-index:40}
html[data-skin=astral] .peek-scrim{position:absolute;inset:0;background:rgba(3,2,10,.55);opacity:0;transition:opacity var(--d-short) linear}
html[data-skin=astral] .peek-sheet-root.is-open .peek-scrim{opacity:1}
html[data-skin=astral] .peek-sheet{position:absolute;left:0;right:0;bottom:0;max-height:78vh;padding:1px 1px 0;background:var(--edge);clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%,0 var(--ch));translate:0 100%;transition:translate var(--d-short) ease-in;outline:none}
html[data-skin=astral] .peek-sheet-root.is-open .peek-sheet{translate:0 0;transition:translate 280ms var(--ease-out)}
html[data-skin=astral] .peek-sheet .peek-in{max-height:calc(78vh - 1px);clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%,0 var(--ch))}
html[data-skin=astral] .peek-handle{position:relative;flex:none;width:44px;height:4px;margin:10px auto 8px;background:var(--edge);border-radius:2px;touch-action:none;cursor:grab}
html[data-skin=astral] .peek-handle::after{content:"";position:absolute;inset:-12px -30px}
html[data-skin=astral] .peek-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
html[data-skin=astral] .peek-scroll .peek-body{flex:none;overflow:visible;padding:12px 18px 8px}
html[data-skin=astral] .peek-cta{flex:none;display:flex;gap:10px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(230,207,147,.18);background:rgba(9,7,22,.96)}
html[data-skin=astral] .peek-btn{flex:1;min-height:44px;display:grid;place-items:center;position:relative;isolation:isolate;border:0;background:none;font:600 13px/1 var(--disp);letter-spacing:.08em;color:var(--text)}
html[data-skin=astral] .peek-btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--edge);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
html[data-skin=astral] .peek-btn::after{content:"";position:absolute;inset:1px;z-index:-1;background:rgba(10,8,24,.9);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
html[data-skin=astral] .peek-btn.primary{color:#1a1206;font-family:Mitr,Thai,sans-serif;font-weight:600;letter-spacing:.04em}
html[data-skin=astral] .peek-btn.primary::before{background:var(--gold)}
html[data-skin=astral] .peek-btn.primary::after{background:linear-gradient(#f1dca4,#c9a45e)}
html[data-skin=astral] .peek-btn.peek-close{flex:0 0 56px;color:var(--gold)}
html[data-skin=astral] :is(.peek-btn,.peek-arrow,.peek-play):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* reduced motion and the pause control: opacity only (80ms), no movement, no automatic media */
@media(prefers-reduced-motion:reduce){
 html[data-skin=astral] .constellation-peek{transition:none}
 html[data-skin=astral] .peek-shell,html[data-skin=astral] .constellation-peek.is-open .peek-shell{translate:none!important;scale:none!important;transition:opacity 80ms linear}
 html[data-skin=astral] .peek-slide{transition:none}
 html[data-skin=astral] .peek-sheet,html[data-skin=astral] .peek-sheet-root.is-open .peek-sheet{translate:none;opacity:0;transition:opacity 80ms linear}
 html[data-skin=astral] .peek-sheet-root.is-open .peek-sheet{opacity:1}
 html[data-skin=astral] .peek-scrim{transition-duration:80ms}
}
html.motion-paused[data-skin=astral] .constellation-peek{transition:none}
html.motion-paused[data-skin=astral] :is(.peek-shell,.constellation-peek.is-open .peek-shell){translate:none!important;scale:none!important;transition:opacity 80ms linear}
html.motion-paused[data-skin=astral] .peek-slide{transition:none}
html.motion-paused[data-skin=astral] :is(.peek-sheet,.peek-sheet-root.is-open .peek-sheet){translate:none;opacity:0;transition:opacity 80ms linear}
html.motion-paused[data-skin=astral] .peek-sheet-root.is-open .peek-sheet{opacity:1}

@media(max-width:650px){html[data-skin=astral] .ov-name:not(.is-long){padding-inline:18px;font-size:13px}}

/* ---- topic badge: the Figma frames. Unlocked = gold star-pointed frame with a soft halo; locked = dark frame, thin gold ring and a lock.
   The 38px circle (row layout) is untouched: the frame is a 0.22-scale picture centred on it, so only the star points overhang. ---- */
html[data-skin=astral] .topic-dot{border:0;background:none;box-shadow:none;overflow:visible;color:#fff3cf}
html[data-skin=astral] .topic-dot::before{content:"";position:absolute;inset:auto;left:-5.2px;top:-12.7px;width:50.6px;height:64.2px;border:0;border-radius:0;background:url(/sky-ai/assets/topic-badge-unlocked.svg) center/100% 100% no-repeat;filter:drop-shadow(0 0 2px rgba(255,221,147,.55)) drop-shadow(0 0 6px rgba(255,221,147,.3));pointer-events:none}
html[data-skin=astral] .topic-dot .topic-num{position:relative;z-index:1}
html[data-skin=astral] .topic-dot svg{display:none}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-dot{border:0;background:none;box-shadow:none}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-dot::before{left:-3.8px;top:-10.9px;width:45.8px;height:59.4px;background-image:url(/sky-ai/assets/topic-badge-locked.svg);filter:none}
html[data-skin=astral] #detail-topic-list:not(.is-owned) .topic-dot::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:15.9px;margin:-8px 0 0 -6.5px;background:url(/sky-ai/assets/topic-lock.svg) center/contain no-repeat;pointer-events:none;z-index:1}
/* purchase light-up (the list lights while the Route unlocks): show the gold frame; the number fades in with the existing rule */
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-dot{border:0;background:none;box-shadow:none}
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-dot::before{left:-5.2px;top:-12.7px;width:50.6px;height:64.2px;background-image:url(/sky-ai/assets/topic-badge-unlocked.svg);filter:drop-shadow(0 0 2px rgba(255,221,147,.55)) drop-shadow(0 0 6px rgba(255,221,147,.3))}
html[data-skin=astral] #detail-topic-list.is-lighting:not(.is-owned) .topic-dot::after{display:none}
/* the topic open in the gallery: a little more halo, no ring behind the frame */
html[data-skin=astral] #detail-topic-list .topic-target[aria-pressed=true] .topic-dot{border-color:transparent;box-shadow:none}
html[data-skin=astral] #detail-topic-list.is-owned .topic-target[aria-pressed=true] .topic-dot::before{filter:drop-shadow(0 0 3px rgba(255,242,201,.7)) drop-shadow(0 0 8px rgba(255,221,147,.4))}
@media(prefers-reduced-motion:no-preference){html[data-skin=astral]:not(.motion-paused) #detail-topic-list.is-lighting:not(.is-owned) .topic-dot::before{animation:fadeIn .5s ease-out var(--td,0s) backwards}}

/* ---- topic rows without the rectangular frame: same size and position (the 1px border stays, only transparent); the state is shown by the text ---- */
html[data-skin=astral] #skills #detail-topic-list .topic-target,
html[data-skin=astral] #skills #detail-topic-list .topic-target:hover,
html[data-skin=astral].kbd #skills #detail-topic-list .topic-target:focus-visible,
html[data-skin=astral] #skills #detail-topic-list .topic-target[aria-pressed=true]{border-color:transparent;background:transparent}
/* The gold line under a topic name is drawn gradually (scaleX 0 -> 1 from the left, over the name's width): 1px, 6px-style offset as before. */
html[data-skin=astral] #skills #detail-topic-list .topic-target .topic-name{position:relative}
html[data-skin=astral] #skills #detail-topic-list .topic-target .topic-name::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgb(230,207,147);opacity:.5;transform:scaleX(0);transform-origin:left center;pointer-events:none}
html[data-skin=astral] #skills #detail-topic-list .topic-target:hover .topic-name,
html[data-skin=astral].kbd #skills #detail-topic-list .topic-target:focus-visible .topic-name{color:#fff;text-shadow:0 0 8px rgba(255,221,147,.25)}
html[data-skin=astral] #skills #detail-topic-list .topic-target:hover .topic-name::after,html[data-skin=astral].kbd #skills #detail-topic-list .topic-target:focus-visible .topic-name::after{transform:scaleX(1);opacity:.5}
html[data-skin=astral] #skills #detail-topic-list .topic-target[aria-pressed=true] .topic-name{color:#fff1cd}
html[data-skin=astral] #skills #detail-topic-list .topic-target[aria-pressed=true] .topic-name::after{transform:scaleX(1);opacity:.9}
@media(prefers-reduced-motion:no-preference){
 html:not(.motion-paused)[data-skin=astral] #skills #detail-topic-list .topic-target .topic-name::after{transition:transform 200ms cubic-bezier(.25,.46,.45,.94),opacity 200ms ease-out}
 html:not(.motion-paused)[data-skin=astral] #skills #detail-topic-list .topic-target:is(:hover,:focus-visible,[aria-pressed=true]) .topic-name::after{transition:transform 380ms cubic-bezier(.25,.46,.45,.94),opacity 240ms ease-out}
}

/* ---- hover card (desktop): the picture leads. Wider card (see peek.ts), 16:9 picture across the full width, text kept short:
   the first paragraph is clamped to 2 lines and the audience list to 3 items (the full text stays in the page and in the touch sheet). ---- */
html[data-skin=astral] .constellation-peek .peek-body{padding:12px 20px 14px}
html[data-skin=astral] .constellation-peek .peek-title{margin:6px 0 2px;font-size:17px}
html[data-skin=astral] .constellation-peek .peek-rule{margin:4px 0 6px}
html[data-skin=astral] .constellation-peek .peek-desc p:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-bottom:4px}
html[data-skin=astral] .constellation-peek .peek-desc p:nth-child(n+2){display:none}
html[data-skin=astral] .constellation-peek .peek-list li:nth-child(n+4){display:none}

/* topic numbers are Roman numerals (Cinzel, the heading face, cream like the frame); the size is set per numeral so IV, VIII or XVIII stay inside the circle */
html[data-skin=astral] .topic-dot .topic-num{font-family:Cinzel,Mitr,serif;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;color:#fff3cf}

/* ===== Topic gallery, "Cinema" layout. Desktop: the sample picture fills the screen, a right panel keeps the emblem, the topics and Buy, the title and
   description sit bottom-left on a dark scrim, thumbnails under them. Narrow screens (<= 960px): picture on top, then title, description and thumbnails,
   then the usual emblem / Buy / topics below (the existing reading order). ===== */
html[data-skin=astral] #skills .topic-gallery{--cinema-w:min(500px,32vw)}
html[data-skin=astral] #skills .topic-gallery .tg-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,rgba(70,60,120,.35),transparent 65%),#070a14}
html[data-skin=astral] #skills .topic-gallery:not(.has-images) .tg-stage{background:linear-gradient(rgba(5,7,15,.35),rgba(5,7,15,.35)),url(/sky-ai/assets/constellation-nebula.png) center/cover,#070a14}
html[data-skin=astral] #skills .topic-gallery .tg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
html[data-skin=astral] #skills .topic-gallery .tg-image[hidden]{display:none}
html[data-skin=astral] #skills .topic-gallery .tg-arrow{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;display:grid;place-items:center;padding:0;border:1px solid rgba(225,198,140,.5);border-radius:50%;background:rgba(8,10,22,.68);color:#f0dfb2;font:600 22px/1 var(--disp);cursor:pointer}
html[data-skin=astral] #skills .topic-gallery .tg-arrow:hover{background:rgba(94,75,130,.6);border-color:#e8d099;color:#fff}
html[data-skin=astral] #skills .topic-gallery .tg-arrow:focus-visible,html[data-skin=astral] #skills .topic-gallery .tg-thumb:focus-visible,html[data-skin=astral] #skills .topic-gallery-head button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html[data-skin=astral] #skills .topic-gallery:not(.has-many) :is(.tg-arrow,.tg-bar){display:none}
html[data-skin=astral] #skills .topic-gallery .tg-prev{left:14px}
html[data-skin=astral] #skills .topic-gallery .tg-next{right:14px}
html[data-skin=astral] #skills .topic-gallery .tg-bar{display:flex;align-items:center;gap:18px;min-width:0}
html[data-skin=astral] #skills .topic-gallery .topic-gallery-images{display:flex;flex:0 1 auto;gap:14px;max-height:none;min-width:0;overflow-x:auto;overflow-y:hidden;padding:3px;scrollbar-width:thin;scrollbar-color:rgba(230,207,147,.4) transparent}
html[data-skin=astral] #skills .topic-gallery .tg-thumb{flex:none;width:176px;aspect-ratio:16/9;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:3px;overflow:hidden;background:#101625;opacity:.78;cursor:pointer;transition:opacity .15s,border-color .15s}
html[data-skin=astral] #skills .topic-gallery .tg-thumb:hover{opacity:1}
html[data-skin=astral] #skills .topic-gallery .tg-thumb.is-on{opacity:1;border-color:#e6cf93;box-shadow:0 0 0 1px #e6cf93}
html[data-skin=astral] #skills .topic-gallery .tg-thumb img{width:100%;height:100%;object-fit:cover;display:block;max-height:none;padding:0;border-radius:0;background:none}
html[data-skin=astral] #skills .topic-gallery .tg-count{flex:none;margin:0;font:600 11px/1 var(--disp);letter-spacing:.2em;color:#ebd6a3;text-shadow:0 1px 8px #000}
html[data-skin=astral] #skills .topic-gallery:not(.has-images) .tg-count{display:none}
html[data-skin=astral] #skills .topic-gallery #topic-gallery-description{text-shadow:0 1px 10px rgba(0,0,0,.9)}
html[data-skin=astral] #skills .topic-gallery h2{text-shadow:0 2px 14px rgba(0,0,0,.9)}
html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty{border:0;background:none;padding:0;min-height:0;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center;color:#d8d2c0}
html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty[hidden]{display:none}
html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty span{width:34px;height:34px;font-size:16px}
html[data-skin=astral] #cinema-emblem{display:none}

@media(min-width:961px){
 html[data-skin=astral] #skills .constellation-preview.is-topic-open{z-index:2}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open #preview-close{z-index:3}
 html[data-skin=astral] #skills:has(.constellation-preview:is(.is-topic-open,.is-panel-flight)) .bottom-hud{display:none}
 html[data-skin=astral] #skills .topic-gallery{position:fixed;inset:0;z-index:1;width:auto;max-width:none;max-height:none;margin:0;padding:0 0 40px;border:0;border-radius:0;background:#05070f;box-shadow:none;display:grid;padding-bottom:28px;grid-template-columns:var(--stage-left,98px) minmax(0,var(--stage-w,600px)) 1fr;grid-template-rows:1fr auto auto auto;align-content:end;overflow:hidden}
 html[data-skin=astral] #skills .topic-gallery::before{display:none}
 html[data-skin=astral] #skills .topic-gallery .tg-stage{position:absolute;inset:0}
 html[data-skin=astral] #skills .topic-gallery .tg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,15,.82) 0,rgba(5,7,15,.35) 150px,transparent 260px),linear-gradient(0deg,rgba(5,7,15,.96) 0,rgba(5,7,15,.82) 240px,rgba(5,7,15,.35) 440px,transparent 62%)}
 html[data-skin=astral] #skills .topic-gallery .tg-arrow{z-index:2}
 html[data-skin=astral] #skills .topic-gallery>:not(.tg-stage):not(.topic-gallery-head){position:relative;z-index:1}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-head{grid-column:2;grid-row:2;display:block;padding:0;border:0;align-items:initial}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-head>div{min-width:0;position:relative;z-index:1}
 html[data-skin=astral] #skills .topic-gallery h2{font-size:32px;line-height:1.2}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-head button{position:absolute;top:133px;right:calc(var(--cinema-w) + 40px + 26px);z-index:3;background:rgba(8,10,22,.72)}
 html[data-skin=astral] #skills .topic-gallery #topic-gallery-description{grid-column:2;grid-row:3;margin:18px 0 0;max-width:min(100%,900px);font-size:16px;line-height:1.6;color:#ece6d6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
 html[data-skin=astral] #skills .topic-gallery .tg-bar{grid-column:2;grid-row:4;margin-top:22px}
 html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty{grid-column:2;grid-row:4;margin:22px 0 0}
 /* the right panel: emblem, Topics to Learn, constellation name and Buy */
 html[data-skin=astral] #skills .constellation-preview:is(.is-topic-open,.is-panel-flight) .detail-body::before{content:"";position:fixed;right:40px;top:120px;bottom:32px;width:var(--cinema-w,min(500px,32vw));z-index:2;border:1px solid rgba(225,198,140,.5);border-radius:4px;background:linear-gradient(160deg,rgba(12,15,29,.95),rgba(5,9,17,.95));box-shadow:0 18px 55px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open #cinema-emblem{display:block;position:fixed;z-index:3;top:142px;right:calc(40px + var(--cinema-w,min(500px,32vw))/2 - var(--em,156px)/2);width:var(--em,156px);height:var(--em,156px);pointer-events:none}
 html[data-skin=astral] #cinema-emblem .wheel-art{width:100%;height:100%;display:block;filter:grayscale(.85) brightness(.8)}
 html[data-skin=astral] #cinema-emblem.is-owned .wheel-art{filter:none}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open .detail-topics{position:fixed;left:auto;right:calc(40px + 34px);width:calc(var(--cinema-w,min(500px,32vw)) - 68px);top:calc(142px + var(--em,156px) + 32px)!important;bottom:var(--info-h,250px);z-index:3}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open #detail-topic-list{--bulge:0px}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open .detail-topics h2{margin-bottom:22px!important}
 html[data-skin=astral] #skills .constellation-preview.is-topic-open .detail-info{position:fixed;left:auto!important;right:calc(40px + 34px);width:calc(var(--cinema-w,min(500px,32vw)) - 68px);top:auto!important;bottom:54px;translate:none!important;z-index:3;max-width:none;margin:0}
 html[data-skin=astral] #skills:has(.constellation-preview:is(.is-topic-open,.is-panel-flight)) .skill-wheel{opacity:0!important;pointer-events:none}
 html[data-skin=astral] #skills .constellation-preview.is-flip .detail-topic-scroll{overflow:visible!important}
 html[data-skin=astral] #skills .constellation-preview.is-panel-flight{z-index:2}
 html[data-skin=astral] #skills .constellation-preview.is-panel-flight #cinema-emblem{display:block;position:fixed;z-index:3;left:var(--fx);top:var(--fy);width:var(--fw);height:var(--fw);pointer-events:none}
}
@media(min-width:961px) and (max-height:900px){html[data-skin=astral] #skills .constellation-preview.is-topic-open{--em:84px;--info-h:232px}html[data-skin=astral] #skills .constellation-preview.is-topic-open #cinema-emblem{top:128px}html[data-skin=astral] #skills .constellation-preview.is-topic-open .detail-topics{top:calc(128px + var(--em) + 12px)!important}html[data-skin=astral] #skills .constellation-preview.is-topic-open .detail-topics h2{margin-bottom:12px!important}}

@media(max-width:960px){
 html[data-skin=astral] #skills .topic-gallery{display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
 html[data-skin=astral] #skills .topic-gallery::before{display:none}
 html[data-skin=astral] #skills .topic-gallery .tg-stage{aspect-ratio:16/9;border-radius:4px;border:1px solid rgba(225,198,140,.4)}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 0 0;border:0}
 html[data-skin=astral] #skills .topic-gallery h2{font-size:22px;line-height:1.25}
 html[data-skin=astral] #skills .topic-gallery #topic-gallery-description{margin:10px 0 14px;font-size:14px;line-height:1.6}
 html[data-skin=astral] #skills .topic-gallery .tg-bar{flex-direction:column;align-items:stretch;gap:10px}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-images{width:100%}
 html[data-skin=astral] #skills .topic-gallery .tg-thumb{width:132px}
 html[data-skin=astral] #skills .topic-gallery .tg-arrow{width:38px;height:38px;margin-top:-19px;font-size:20px}
 html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty{margin:12px 0 0}
}

/* motion: only when it is allowed (reduced motion and the pause button keep everything instant) */
@keyframes cinemaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cinemaOut{to{opacity:0;transform:translateY(6px)}}
@keyframes cinemaSwitch{from{opacity:.45;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes cinemaSwitchFade{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 html:not(.motion-paused)[data-skin=astral] #skills .topic-gallery.is-entering{animation:cinemaIn .36s cubic-bezier(.22,1,.36,1) both}
 html:not(.motion-paused)[data-skin=astral] #skills .topic-gallery.is-closing{animation:cinemaOut .26s ease-in both}
 html:not(.motion-paused)[data-skin=astral] #skills .topic-gallery.is-switching .tg-box,
 html:not(.motion-paused)[data-skin=astral] #skills .topic-gallery.is-switching #topic-gallery-description{animation:cinemaSwitch .32s cubic-bezier(.22,1,.36,1) both}
 html:not(.motion-paused)[data-skin=astral] #skills .topic-gallery.is-switching .topic-gallery-head{animation:cinemaSwitchFade .32s cubic-bezier(.22,1,.36,1) both}
}

/* ===== Topic gallery, desktop box: one 16:9 box sized from the free area (see layoutGalleryStage), the same for every picture and topic. The picture sits in it
   (cover) over a strongly blurred, darkened copy of itself. The arrows and dots are on the box; the thumbnails and the counter are mobile-only. ===== */
html[data-skin=astral] #skills .topic-gallery .tg-box{position:absolute;inset:0;overflow:hidden}
html[data-skin=astral] #skills .topic-gallery .tg-dots,html[data-skin=astral] #skills .topic-gallery .tg-box-empty{display:none}
html[data-skin=astral] #skills .topic-gallery .tg-backdrop{display:none}
@media(min-width:961px){
 html[data-skin=astral] #skills .topic-gallery .tg-stage::after{z-index:1}
 html[data-skin=astral] #skills .topic-gallery.has-images .tg-backdrop{display:block;position:absolute;left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;filter:blur(34px) brightness(.6) saturate(1.08);pointer-events:none}
 html[data-skin=astral] #skills .topic-gallery .tg-backdrop[hidden]{display:none}
 html[data-skin=astral] #skills .topic-gallery .tg-box{inset:auto;z-index:2;border:1px solid rgba(225,198,140,.55);border-radius:3px;box-shadow:0 22px 64px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.45),0 0 26px rgba(230,207,147,.12);background:linear-gradient(rgba(5,7,15,.35),rgba(5,7,15,.35)),url(/sky-ai/assets/constellation-nebula.png) center/cover,#070a14}
 html[data-skin=astral] #skills .topic-gallery .tg-box .tg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 html[data-skin=astral] #skills .topic-gallery .tg-box .tg-arrow{z-index:3;width:46px;height:46px;margin-top:-23px;font-size:24px;background:rgba(8,10,22,.72);border-color:rgba(240,223,178,.7)}
 html[data-skin=astral] #skills .topic-gallery .tg-box .tg-prev{left:16px}
 html[data-skin=astral] #skills .topic-gallery .tg-box .tg-next{right:16px}
 html[data-skin=astral] #skills .topic-gallery.has-many .tg-dots{display:flex;position:absolute;left:0;right:0;bottom:14px;z-index:3;justify-content:center;gap:9px;pointer-events:none}
 html[data-skin=astral] #skills .topic-gallery .tg-dots i{width:8px;height:8px;rotate:45deg;border:1px solid #e6cf93;background:rgba(8,10,22,.5)}
 html[data-skin=astral] #skills .topic-gallery .tg-dots i.on{background:#e6cf93;box-shadow:0 0 8px rgba(230,207,147,.8)}
 html[data-skin=astral] #skills .topic-gallery:not(.has-images) .tg-box-empty{display:grid;position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-50%);justify-items:center;gap:12px;color:#d8d2c0;font-size:14px;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.9)}
 html[data-skin=astral] #skills .topic-gallery .tg-box-empty[hidden]{display:none}
 html[data-skin=astral] #skills .topic-gallery .tg-box-empty span{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(227,198,137,.4);border-radius:50%;color:#e3c587;font-size:20px}
 /* no thumbnails or visible counter here; the counter text stays for screen readers (aria-live) */
 html[data-skin=astral] #skills .topic-gallery .tg-bar{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-skin=astral] #skills .topic-gallery .topic-gallery-images{display:none}
 html[data-skin=astral] #skills .topic-gallery #topic-gallery-empty{display:none}
 html[data-skin=astral] #skills .topic-gallery:not(.has-images) .tg-count{display:block}
}
 /* one title line (ellipsis) keeps the text block the same height for every topic */
@media(min-width:961px){html[data-skin=astral] #skills .topic-gallery h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

html[data-skin=astral] #buy-button.is-open{cursor:pointer}
html[data-skin=astral] #buy-button .b-arrow{position:relative;z-index:1;font-size:20px;line-height:1;font-weight:700}