/* Sky and frosted glass, after the investor-deck cover. The shared chrome head
   (tools/stamp_chrome.py) loads this on every page, with a preload of /assets/edge-sky.webp.
   One image serves both themes: dark mode lays a night wash over the same sky. */
:root {
 --sky-ink:#101114;
 --sky-muted:#4f5869;
 --sky-blue:#154cff;
 --sky-bg:#bfdcfb;
 --sky-image:url('/assets/edge-sky.webp');
 --sky-haze:linear-gradient(180deg,rgba(240,246,255,.8),rgba(240,246,255,.76) 55%,rgba(255,255,255,.8));
 --sky-glass:rgba(255,255,255,.74);
 --sky-glass-strong:rgba(255,255,255,.84);
 --sky-glass-line:rgba(255,255,255,.78);
 --sky-glass-shadow:0 30px 70px -28px rgba(21,76,255,.22),0 2px 8px rgba(16,17,20,.04),inset 0 1px 0 rgba(255,255,255,.75);
 --sky-chip:rgba(255,255,255,.58);
 --sky-glass-float:rgba(255,255,255,.9);
 --sky-filter:blur(24px) saturate(1.4);
 /* The existing glass adapter (edge-glass.css) reads these, so every page component follows. */
 --glass-surface:var(--sky-glass);
 --glass-solid:#f4f8ff;
 --glass-ground:var(--sky-bg);
 --glass-border:var(--sky-glass-line);
 --glass-shadow:var(--sky-glass-shadow);
 --glass-ink:var(--sky-ink);
 --glass-muted:var(--sky-muted);
 --glass-blur:24px;
}
@media (prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) {
  --sky-ink:#eef1f7;--sky-muted:#a9b2c3;--sky-blue:#6b92ff;--sky-bg:#0a0e1c;
  --sky-haze:linear-gradient(180deg,rgba(7,10,26,.88),rgba(7,10,26,.84) 55%,rgba(7,10,22,.92));
  --sky-glass:rgba(22,30,64,.62);--sky-glass-strong:rgba(24,32,66,.72);--sky-glass-line:rgba(160,185,255,.22);
  --sky-glass-shadow:0 30px 70px -28px rgba(0,0,0,.6),inset 0 1px 0 rgba(160,185,255,.14);
  --sky-chip:rgba(22,30,64,.5);--sky-glass-float:rgba(20,27,56,.92);--glass-solid:#121a30;
 }
}
:root[data-theme="dark"],html.dark {
 --sky-ink:#eef1f7;--sky-muted:#a9b2c3;--sky-blue:#6b92ff;--sky-bg:#0a0e1c;
 --sky-haze:linear-gradient(180deg,rgba(7,10,26,.88),rgba(7,10,26,.84) 55%,rgba(7,10,22,.92));
 --sky-glass:rgba(22,30,64,.62);--sky-glass-strong:rgba(24,32,66,.72);--sky-glass-line:rgba(160,185,255,.22);
 --sky-glass-shadow:0 30px 70px -28px rgba(0,0,0,.6),inset 0 1px 0 rgba(160,185,255,.14);
 --sky-chip:rgba(22,30,64,.5);--sky-glass-float:rgba(20,27,56,.92);--glass-solid:#121a30;
}

/* The sky is one fixed layer under the page: painted once, never repainted on scroll. */
html{background:var(--sky-bg)!important}
body,body[style]{background:transparent!important}
body{color:var(--sky-ink)}
body::before{
 content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;
 background:var(--sky-haze),var(--sky-image) right center / cover no-repeat,var(--sky-bg);
}

/* One glass recipe. Text sits on the glass, never under the blur, so it stays crisp. */
.sky-glass{
 background:var(--sky-glass)!important;
 border:1px solid var(--sky-glass-line)!important;
 box-shadow:var(--sky-glass-shadow)!important;
 -webkit-backdrop-filter:var(--sky-filter)!important;backdrop-filter:var(--sky-filter)!important;
}
/* Phones: keep the frosted tint but drop the blur, which costs the most on mobile GPUs. */
@media (max-width:700px){ :root{--sky-filter:none;--sky-glass:var(--sky-glass-strong)} }
@media (prefers-reduced-transparency:reduce),(forced-colors:active){
 :root{--sky-filter:none;--sky-glass:var(--glass-solid);--sky-glass-strong:var(--glass-solid)}
}
@supports not (backdrop-filter:blur(1px)){ :root{--sky-glass:var(--sky-glass-strong)} }

/* ---- Every page ----
   The pixel worlds, islands and cloud bands were the old backdrop; the sky replaces them. */
.sky .world,.sky .perch,i.world,.page-cloud,.pricing-world{display:none!important}
/* The creator and catalog heroes carried a dither cloud and a page-colour scrim behind the type; the sky does that job now. */
.home-hero .hero-cloud,.home-hero>.wrap:before{display:none!important}
html body,:root body,:root body[style]{background:transparent!important;background-image:none!important}
/* Shared footer: the pre-glass footer's pixel cloud line (stamp_chrome footer-sky) on the sky,
   then a soft haze behind the links. No band edge, no rule line, no blur. */
:root{--sky-foot:rgba(246,250,255,.62)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky-foot:rgba(7,10,26,.55)}}
:root[data-theme="dark"],html.dark{--sky-foot:rgba(7,10,26,.55)}
#edge-footer.edge-footer{
 background:linear-gradient(180deg,transparent 0,transparent 70px,var(--sky-foot) 190px,var(--sky-foot) 100%)!important;
 border-top:0!important;
 -webkit-backdrop-filter:none;backdrop-filter:none;
}
#edge-footer .footer-sky{display:block!important;background:none!important}

/* Page greys were tuned for white paper. On the sky every page uses the one muted token,
   which passes AA on the sky and on glass in both themes. The id-free :not(#_) only lifts
   specificity above the pages' own theme blocks. */
:root:not(#_),:root:not(#_) body{--muted:var(--sky-muted);--faint:var(--sky-muted);--mute:var(--sky-muted)}

/* One level of cards (2026-10-03 review). Page sections sit directly on the sky: there is no
   sheet behind the text column, so a card on the page is the only surface level. Cards are
   kept for objects that stand on their own (steps, skills, plans, FAQ is a list). */
main.page,article.content-page,main.mcp-page,.docs-frame{position:relative}
/* A wrapper card around other cards turns into plain layout. */
.docs-main .card:has(.panel),.docs-main .card:has(.card){background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:0!important;padding-right:0!important}
.benchmark-board fieldset{background:transparent!important;box-shadow:none!important}
/* Creator pages: the install, owner and skills sections are page sections, not sheets; the
   skill cards inside them are the cards. */
.skill-details:is(.creator-install-section,.creator-owner-section,.creator-skills-section){background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.creator-skills-section .real-skill-card{background:var(--sky-glass)!important;border:1px solid var(--sky-glass-line)!important;box-shadow:var(--sky-glass-shadow)!important;border-radius:20px!important;padding:20px!important}
.creator-skills-section .real-skill-card .output-card{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Text now sits on the bare sky, which is a touch darker than the old sheet: small links and
   the quiet button get one step more contrast so they stay above AA there. */
:root:not(#_){--quiet-fg:#1240d9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not(#_){--quiet-fg:#90acff;--edge-blue-quiet:#86a5f6}}
:root[data-theme="dark"]:not(#_),html.dark:not(#_){--quiet-fg:#90acff;--edge-blue-quiet:#86a5f6}

/* Space above the shared footer on every page: content never ends flush against it. */
#edge-footer.edge-footer{margin-top:clamp(48px,6vw,80px)!important}
.docs-frame{padding-block-end:clamp(24px,3vw,40px)!important}

/* Flat paper surfaces become glass. */
.catalog-card,.llms-file,.form-card{
 background:var(--sky-glass)!important;border-color:var(--sky-glass-line)!important;box-shadow:var(--sky-glass-shadow)!important;
}
.method-section{background:transparent!important}

/* ---- Adapters: home ---- */
.page-root,body[data-tone] .page-root{background:transparent!important}
.cloud-canvas{visibility:hidden!important}
/* The canvas script places the mascot; show it only once placed, so it never jumps (CLS). */
.hero-buddy:not([style]){visibility:hidden}
.hero h1,.chapter h2,.chapter-copy h2{color:var(--sky-ink)}
.hero .setup-line .setup-label,.scroll-cue,.hub-name{color:var(--sky-muted)!important}
#hero-cta .prompt-box,.hero .reassurance>span,.gallery-item,.conversation{
 background:var(--sky-glass)!important;
 border:1px solid var(--sky-glass-line)!important;
 box-shadow:var(--sky-glass-shadow)!important;
 -webkit-backdrop-filter:var(--sky-filter)!important;backdrop-filter:var(--sky-filter)!important;
}
#hero-cta .prompt-box{border-radius:24px!important}
#hero-cta .prompt-box .prompt-text{color:var(--sky-ink)}
.hero .reassurance>span{box-shadow:none!important;background:var(--sky-chip)!important;color:var(--sky-muted)}
.gallery-item{border-radius:18px!important}
.gallery-item .skill-info strong{color:var(--sky-ink)}
.gallery-item .skill-info span,.gallery-item .skill-info small{color:var(--sky-muted)}
.conversation{border-radius:24px!important;overflow:hidden}
.conversation .conversation-head{background:transparent!important;border-color:var(--sky-glass-line)!important}
/* Dark mode: the denser glass keeps the tool-call code in the conversation above AA. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .conversation{background:var(--sky-glass-float)!important}}
:root[data-theme="dark"] .conversation,html.dark .conversation{background:var(--sky-glass-float)!important}
/* The mascot stands on one of the sky's pixel islands (explore/sky-*.svg) instead of floating.
   The island is sized from the mascot box, which the hero script places, so it follows at every
   width: 2.5x the mascot, grass line (y=40 of the island) under the feet (22/24 of the box). */
.hero-buddy .buddy-isle{position:absolute;z-index:-1;width:250%;height:312.5%;left:-106%;top:-20.8%;overflow:visible;filter:drop-shadow(0 10px 14px rgba(21,76,255,.14))}
.hero-buddy .pixel-cloud{display:none}
/* Creator chapter: the name, marks and skill card sit on the sky, not on a white box. */
.creator-stage .author-content{background:transparent!important;box-shadow:none!important}
.chapter-copy{background:transparent!important}
.travel-card:not(.docked){background:var(--sky-glass-float)!important;-webkit-backdrop-filter:var(--sky-filter);backdrop-filter:var(--sky-filter);border:1px solid var(--sky-glass-line)!important;box-shadow:var(--sky-glass-shadow)!important;border-radius:18px!important;color:var(--sky-ink)!important}

/* ---- Adapters: pricing ---- */
.pricing-world{display:none!important}
.pricing-hero h1{color:var(--sky-ink)}
.pricing-hero .lede{color:var(--sky-muted)!important}
.pixel-heading{color:var(--sky-blue)!important}
.plans .plan,.plans .plan.featured{
 background:var(--sky-glass)!important;
 border:1px solid var(--sky-glass-line)!important;
 box-shadow:var(--sky-glass-shadow)!important;
 border-radius:28px!important;
 -webkit-backdrop-filter:var(--sky-filter)!important;backdrop-filter:var(--sky-filter)!important;
}
.plans .plan.featured{border-color:color-mix(in srgb,var(--sky-blue) 45%,var(--sky-glass-line))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--sky-blue) 22%,transparent),var(--sky-glass-shadow)!important}
.plans .plan :is(.price span,.pro-subtitle,.pricing-note){color:var(--sky-muted)}
.plans .plan li{color:var(--sky-ink)}
.plans .plan li:before{color:var(--sky-blue)}
.plans .btn.ghost{background:var(--sky-chip);color:var(--sky-ink);border:1px solid var(--sky-glass-line)}
.plans .btn.ghost:hover{background:var(--sky-glass-strong)}