/* Light editorial skin and capability galaxy for the public guide. */
:root {
  color-scheme:light;
  --ink:#173b3a;
  --muted:#607a77;
  --blue:#1a726b;
  --line:#dce8e3;
  --paper:#f7faf7;
  --dark:#f7faf7;
  --mint:#1a726b;
  --accent:#1a726b;
  --glass:#ffffffb8;
  --glass-strong:#ffffffd1;
}
body{position:relative;isolation:isolate;background:#f3f9f6;color:var(--ink)}
body::before{content:'';position:fixed;inset:-16%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 33% 34% at 78% 19%,#63cdb675,transparent 78%),radial-gradient(ellipse 28% 30% at 10% 44%,#ffb59768,transparent 78%),radial-gradient(ellipse 32% 37% at 76% 83%,#afa8e95c,transparent 79%),radial-gradient(ellipse 27% 29% at 17% 94%,#7fcdd44d,transparent 80%);filter:blur(28px);animation:ambient-flow 12s ease-in-out infinite}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(#377f7112 1px,transparent 1px),linear-gradient(90deg,#377f7112 1px,transparent 1px),radial-gradient(circle,#4b9d8c36 .8px,transparent 1.3px);background-size:86px 86px,86px 86px,43px 43px;mask-image:linear-gradient(90deg,#0006,transparent 38%,transparent 62%,#0006);opacity:.52}
main.wrap{position:relative;z-index:1}
@keyframes ambient-flow{0%,100%{transform:translate3d(-3%,1%,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}}
::selection{background:#bdded6;color:#173b3a}
.topbar{background:#ffffffa8;border-color:#ffffffb8;box-shadow:0 8px 28px #2e806608;-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25)}
.brand{color:#173b3a}.brand-icon,.brand-icon img{width:38px;height:38px;display:block}
.brand em{color:#81aaa1}.toplinks{color:#607a77}.toplinks a:hover{color:#155b56}
.toplinks .source-link{border-color:#c9dbd4;color:#1a726b}
.hero{border-color:var(--line)}.hero:before{color:#96b8af}
.eyebrow{color:#56877c}.dot,.eyebrow .dot{background:#e99168;box-shadow:none}
.hero h1{color:#153e3b;font-weight:600}.hero h1 span{color:#62968a}
.hero-description{color:#566f6a;font-size:15px}
.primary-action{color:#fff;background:#1a726b;border-color:#1a726b;border-radius:7px;box-shadow:0 8px 18px #1a726b20}
.primary-action:hover{background:#155e59;box-shadow:0 12px 26px #1a726b35}
.primary-action.is-copied{background:#dff0ea;border-color:#b9dcd0;color:#1a726b}
.text-link{color:#336660}.text-link:hover{color:#124f49}.ai-detail,.hero-specs{color:#718a84}
.hero-specs span:before{color:#a4c3b8}
.package-entry{display:flex;align-items:center;gap:22px;margin:0 0 76px;padding:18px 22px;background:var(--glass);border:1px solid #ffffffcf;border-radius:10px;box-shadow:0 14px 36px #2c806b16,inset 0 1px #fff9;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.entry-heading{flex:none;gap:10px}.entry-heading h2{color:#5f7b71;font-size:12px;font-weight:600;white-space:nowrap}
.package-version{color:#1a726b;border-color:#c7e1d6;background:#edf6f1;border-radius:4px;font-size:10px;padding:3px 7px}
.package-coordinate{flex:1;min-width:0;justify-content:flex-start;padding:0 0 0 22px;border:0;border-left:1px solid var(--line)}
.package-coordinate code{color:#224f4b;font-size:12px;line-height:1.5}
.package-actions{display:flex;align-items:center;gap:18px;flex:none;white-space:nowrap}
.coordinate-copy,.package-link{color:#397168;font-size:11px}.coordinate-copy{padding:4px 0}.coordinate-copy:hover,.package-link:hover{color:#16544d}
.section-kicker{color:#1a726b}.section-head h2,.section-title h2{color:#173b3a}
.section-head p,.section-title p{color:#6e8881}
.workbench{background:#ffffffab;border-color:#ffffffd6;border-radius:8px;box-shadow:0 20px 55px #315d4e16,inset 0 1px #fff9;-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15)}
.chapterbar{border-color:var(--line)}.tab{color:#657d76}.tab[aria-selected=true]{color:#175d56;background:#e9f4ee;border-color:#c6e0d4}
.count{color:#8ba39c}.chapterintro{background:#f3f8f3b8;color:#5e7770;border-color:var(--line)}
.editor{background:#f9fcfabc;color:#234640;scroll-margin-top:96px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.panehead{border-color:#dbe8e2}
.lights i{background:#b9d1c7}.lights i:first-child{background:#ed9b72}.filename{color:#658077}
.copy{border-color:#cbded4;color:#49766c}.copy:hover{background:#edf6ef}
.code-scroll,.note-scroll{scrollbar-color:#b4cec2 transparent}
.code-block.active{background:#e8f4ed;border-color:#1a726b}.code-label{color:#657e75}.code-label span{border-color:#ccddd3}.code-block.active .code-label{color:#1a726b}
.line-number{color:#95afa4}.syntax-comment{color:#779487}.syntax-string{color:#387b5f}.syntax-keyword{color:#8b5a9e}.syntax-type{color:#246e86}.syntax-number{color:#b66d3d}
.notes{background:#f5f9f5aa;border-color:#dbe8e2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.notes .panehead{border-color:#dbe8e2}
.notes-title{color:#42645b}.notes-title span,.sync-label{color:#78978b}
.note{background:var(--glass-strong);border-color:#ffffffdd;border-radius:6px;box-shadow:inset 0 1px #fff9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.note.active{background:#eef7f0d9;border-color:#9dcabb}
.note-num,.locate{color:#6f9585}.note.active .locate{color:#1a726b}
.note h3{color:#1f4841}.note .subtitle{color:#317065}.note .body,.facts li{color:#5a756b}
.facts{border-color:#d8e7dd}.facts li:before{background:#65aa94}
.statusbar{border-color:#dbe8e2;color:#789085}.active-name{color:#1a726b}
.step-control{background:#e8f3eb;border-color:#c3dccf;color:#1a726b}
.footer{border-color:var(--line)}
.footer-brand{color:#1d4b44}.footer-brand img{width:26px;height:26px}.footer-meta{color:#769088}.footer-link{color:#427469}
.toast{background:#f0f8f2f5;color:#1c5a4e;border-color:#a6d0bd;box-shadow:0 9px 30px #244d3b24}
.skip-link{background:#edf6f0;color:#1a726b}.page-wave{border-color:#7cbba754;background:radial-gradient(circle,transparent 50%,#9fceb20a 66%,#9fceb221 70%,transparent 72%)}

/* The orbital cards stay upright and readable while their positions revolve. */
.hero-art{height:590px;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 50% 49%,#dbf2e6 0,#ebf9f0dc 43%,#f7faf700 74%)}
.galaxy-haze{position:absolute;inset:8% 5%;background:radial-gradient(ellipse at center,#bbe1d360 0,#d8efe470 24%,transparent 62%);filter:blur(8px);pointer-events:none}
.galaxy-ring{position:absolute;left:50%;top:50%;border:1px solid #9ccabd82;border-radius:50%;transform:translate(-50%,-50%) rotate(-17deg);pointer-events:none}
.galaxy-ring-one{width:35%;height:31%;border-color:#5ca89b55;box-shadow:0 0 0 14px #d6eee326}
.galaxy-ring-two{width:71%;height:66%;border-style:dashed;border-color:#84b9aa8c;animation:ring-drift 65s linear infinite}
.galaxy-ring-three{width:91%;height:85%;border-color:#b2d3c8a6;animation:ring-drift 90s linear infinite reverse}
.galaxy-stars{position:absolute;inset:0;opacity:.62;pointer-events:none;background-image:radial-gradient(circle,#73b7a7 1px,transparent 1.5px),radial-gradient(circle,#e5ac86 1px,transparent 1.5px);background-size:75px 78px,112px 105px;background-position:17px 14px,42px 58px;mask-image:radial-gradient(ellipse,#000 18%,transparent 78%)}
.galaxy-core{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);width:126px;height:126px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--glass-strong);border:1px solid #ffffffd9;box-shadow:0 0 0 10px #e5f3eacc,0 12px 38px #407a6640;color:#1f5c52;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.galaxy-core img{width:47px;height:47px;margin-bottom:2px}.galaxy-core strong{font-size:15px;letter-spacing:-.4px;line-height:1.2}.galaxy-core span{font-size:9px;color:#6b9385}
.orbit-system{position:absolute;inset:0;z-index:2}
.orbit-node{position:absolute;left:50%;top:50%;width:146px;min-height:96px;transform:translate(calc(-50% + var(--orbit-x,0px)),calc(-50% + var(--orbit-y,0px)));display:flex;align-items:center;flex-direction:column;justify-content:center;padding:11px 8px 9px;border:1px solid #ffffffd1;border-radius:12px;background:var(--glass);color:#22554c;text-align:center;box-shadow:0 6px 21px #446b5729,inset 0 1px #fff9;transition:box-shadow .2s,border-color .2s,background .2s;will-change:transform;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.orbit-node:hover,.orbit-node:focus-visible{z-index:4;border-color:#75b29d;background:var(--glass-strong);box-shadow:0 11px 28px #316b5640}
.orbit-node strong{font-size:15px;line-height:1.3}.orbit-node small{display:block;color:#4f7066;font-size:11px;line-height:1.4;margin-top:6px}
.orbit-planet{position:absolute;top:-8px;left:calc(50% - 7px);width:14px;height:14px;border:3px solid #fff;background:#1a726b;border-radius:50%;box-shadow:0 0 0 1px #77b69f,0 0 12px #78bba0}
.orbit-node:nth-child(2) .orbit-planet,.orbit-node:nth-child(5) .orbit-planet{background:#e99168;box-shadow:0 0 0 1px #edb391,0 0 12px #f0ab7d}
.hero-art:not(.galaxy-active){height:auto;min-height:520px;padding:165px 12px 64px}
.hero-art:not(.galaxy-active) .galaxy-core,.hero-art:not(.galaxy-active) .galaxy-ring{top:86px}
.hero-art:not(.galaxy-active) .orbit-system{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hero-art:not(.galaxy-active) .orbit-node{position:relative;left:auto;top:auto;width:auto;transform:none}
.scene-top,.scene-bottom{z-index:3;color:#688d80}.scene-top span:first-child{color:#1b7166}
.scene-controls{z-index:5;bottom:72px;background:var(--glass);color:#42776c;border-color:#ffffffc9;border-radius:5px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.scene-controls:hover{background:var(--glass-strong);color:#1a726b;border-color:#79b4a0}
.copy-celebrating .scene-top span:first-child{color:#d57c50}
@keyframes ring-drift{to{transform:translate(-50%,-50%) rotate(343deg)}}

@media(max-width:1100px){.hero-art{height:520px}.orbit-node{width:140px;min-height:96px}.orbit-node strong{font-size:14px}.orbit-node small{font-size:10px}.galaxy-core{width:104px;height:104px}.package-entry{gap:14px}.package-coordinate{padding-left:14px}.package-coordinate code{font-size:11px}.package-actions{gap:12px}}
@media(min-width:761px) and (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:45px 0 5px}.hero-art{width:min(100%,680px);justify-self:center;margin:0 auto 24px}}
@media(max-width:760px){
  body::before{inset:-12%;filter:blur(24px);opacity:.8}
  body::after{opacity:.28}
  .toplinks,.skip-link,.hero-art,main>section:not(.hero),main>.footer{display:none!important}
  .topbar{border-bottom:0}
  .hero{display:flex;align-items:center;min-height:calc(100svh - 66px);border:0}
  .hero:before,.hero-specs,.entry-actions .text-link{display:none}
  .hero-copy{width:100%;padding:36px 0 85px}
  .hero h1{font-size:clamp(38px,10.5vw,56px)}
  .hero-description{max-width:440px;font-size:14px;line-height:1.9}
  .entry-actions{display:block}
  .primary-action{width:100%;max-width:420px;justify-content:space-between;padding:14px 18px}
  .ai-detail{margin-top:17px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){body::before,.galaxy-ring{animation:none!important}}
