/* ---- fonts (self-hosted, no external requests) ---- */
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/luckiest-guy-400.woff2") format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/poppins-400.woff2") format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/poppins-500.woff2") format("woff2")}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/poppins-600.woff2") format("woff2")}

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */



/* ---------- 1. tokens ---------- */
:root{
  --sky-brand:#00A1D8;
  --sky-brand-text:#007FAB;
  --sky-brand-press:#00648A;
  --sky-white:#FFFFFF;
  --sky-ink:#062430;
  --sky-fill:#CCECF7;
  --sky-fill-soft:#EBF7FC;

  --glow-rest:0 0 12px rgba(255,255,255,.25);
  --glow-hover:0 0 18px rgba(255,255,255,.40), 0 4px 12px rgba(0,0,0,.18);
  --info-box-shadow:5px 5px 2px rgba(0, 0, 0, 0.402);

  --radius:5px;
  --border:2px;

  --dur-fast:0.5s;
  --dur-base: 0.75s;
  --dur-slow:1.25s;
  --ease:cubic-bezier(0,0,.2,1);

  --col:60rem;
  --measure:44rem;
  --pad-x:1.25rem;
  --font-display:"Luckiest Guy",Impact,"Arial Narrow",sans-serif;
  --font-body:"Poppins",system-ui,-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
button,input{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
svg{display:block}

/* ---------- 3. base ---------- */
body{
  background:var(--sky-brand);
  color:var(--sky-ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3{margin:0}
.sky-h1,.sky-h2{font-family:var(--font-display);font-weight:400;line-height:1.22;letter-spacing:.01em}
p{margin:0}
a{color:var(--sky-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--dur-base) var(--ease)}
a:hover{color:var(--sky-brand-press)}
.sky-card a:hover{color:var(--sky-brand-text)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 4. layout ---------- */
.sky-page{position:relative;min-height:100vh;overflow:hidden}
.sky-wrap{width:100%;max-width:min(var(--col),100%);margin-inline:auto;padding-inline:var(--pad-x);position:relative;z-index:1}
.sky-header{position:static;padding-block:1.25rem 0}
.sky-main{display:block}
.sky-sec{padding-block:4rem}
.sky-hero{padding-block:2.5rem 2rem}
.sky-footer{padding-block:2.5rem 3rem}

/* decorative clouds */
.sky-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky-deco svg{position:absolute;fill:var(--sky-white)}
.sky-deco .d1{top:6rem;left:-6rem;width:26rem;opacity:.10}
.sky-deco .d2{top:34rem;right:-9rem;width:34rem;opacity:.07}
.sky-deco .d3{top:74rem;left:-4rem;width:22rem;opacity:.05}
.sky-deco .d4{top:112rem;right:-5rem;width:28rem;opacity:.04}
.sky-deco .d5{top:1rem;right:-16rem;width:38rem;opacity:.08}
.sky-deco .d6{top:96rem;left:-12rem;width:32rem;opacity:.06}
.sky-deco .d7{top:150rem;right:-10rem;width:20rem;opacity:.10}
.sky-drift{animation:sky-drift 190s linear infinite alternate}
.sky-drift-b{animation:sky-drift 240s linear infinite alternate-reverse}
@keyframes sky-drift{from{transform:translateX(-1.5rem)}to{transform:translateX(1.5rem)}}

/* ---------- 5. components ---------- */
/* logo */
.sky-logo{display:inline-flex;align-items:center;cursor:pointer}
.sky-logo img{display:block;width:4.125rem;height:4.125rem;border-radius:var(--radius)}
.sky-mark{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.22;letter-spacing:.01em;color:var(--sky-white);transform:scaleX(.93);transform-origin:left center}

/* hero */
.sky-h1{font-size:2rem;color:var(--sky-white);overflow-wrap:break-word;text-wrap:balance}
.sky-lede{margin-top:1rem;font-size:1.0625rem;max-width:var(--measure)}
.sky-privacy{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--sky-white);color:var(--sky-ink);padding:.5rem .75rem;border-radius:var(--radius);font-weight:600;font-size:.9375rem;box-shadow:var(--glow-rest)}
.sky-privacy .sky-warn-icon{position:relative;flex:none;width:1rem;height:1rem;background:var(--sky-brand-text);clip-path:polygon(50% 0%,100% 100%,0% 100%)}
.sky-privacy .sky-warn-icon::before{content:"";position:absolute;left:50%;top:38%;width:2px;height:32%;background:var(--sky-white);transform:translateX(-50%)}
.sky-privacy .sky-warn-icon::after{content:"";position:absolute;left:50%;bottom:14%;width:2px;height:2px;background:var(--sky-white);transform:translateX(-50%)}
.sky-tool-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sky-tool-stat{
  display:inline-flex;align-items:baseline;gap:.35rem;padding:.375rem .625rem;
  border:1px solid rgba(255,255,255,.42);border-radius:var(--radius);
  color:var(--sky-ink);background:rgba(255,255,255,.16);font-size:.8125rem
}
.sky-tool-stat strong{font-family:var(--font-mono);font-size:.875rem;color:var(--sky-white)}

/* drop zone — single flat-bottomed cloud path, no per-shape borders/shadows */
.sky-zone{position:relative;display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sky-zone-frame{display:block;position:relative;width:100%;max-width:100%;margin-inline:auto;margin-top:1.5rem}
.sky-zone-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));transition:filter var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.sky-zone-path{fill:var(--sky-white);stroke:var(--sky-white);stroke-width:5px;vector-effect:non-scaling-stroke;transition:fill var(--dur-base) var(--ease),stroke-opacity var(--dur-base) var(--ease)}
.sky-zone-inner{position:absolute;left:14%;right:14%;top:65%;transform:translateY(-50%);
  transition:transform var(--dur-base) var(--ease);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;text-align:center;z-index:1;pointer-events:none}
.sky-zone-title{font-family:var(--font-display);font-weight:400;font-size:1rem;color:var(--sky-ink);letter-spacing:.01em;line-height:1.2}
.sky-zone-sub{font-size:.8125rem;line-height:1.4;color:var(--sky-ink)}
.sky-zone:hover .sky-zone-svg,.sky-zone:focus-visible .sky-zone-svg{filter:drop-shadow(0 16px 4px rgba(0,0,0,.65));transform:translateY(-10px)}
/* label rides along with the cloud — calc keeps the -50% centring */
.sky-zone:hover .sky-zone-inner,
.sky-zone:focus-visible .sky-zone-inner,
.is-drag .sky-zone-inner{transform:translateY(calc(-50% - 10px))}
.sky-zone:focus-visible{outline:2px solid var(--sky-white);outline-offset:6px}
.is-drag .sky-zone-svg{filter:drop-shadow(0 16px 4px rgba(0,0,0,.65));transform:translateY(-10px)}
.is-error .sky-zone-path{stroke-dasharray:7 6}
.is-loading .sky-zone-path{animation:sky-pulse 1.8s ease-in-out infinite}
@keyframes sky-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.45}}
.sky-zone-note{margin-top:1.25rem;background:var(--sky-white);border-radius:var(--radius);padding:.875rem 1rem;font-size:.9375rem;box-shadow:var(--glow-rest)}
.sky-zone-note b{font-weight:600}

/* buttons */
.sky-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:.75rem 1.375rem;
  background:var(--sky-white);color:var(--sky-ink);
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;
  border:0;border-radius:2px;cursor:pointer;
  box-shadow:var(--glow-rest);
  transition:color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.sky-btn:hover{color:var(--sky-brand-text);box-shadow:var(--glow-hover);transform:translateY(-1px)}
.sky-btn:active{color:var(--sky-brand-press);box-shadow:var(--glow-rest);transform:translateY(0)}
.sky-btn:focus-visible{outline:2px solid var(--sky-white);outline-offset:3px}
.sky-btn:disabled{cursor:not-allowed;color:rgba(6,36,48,.45);box-shadow:none;transform:none}
.sky-btn-lg{font-size:1.0625rem;padding:.9375rem 1.75rem;width:100%}
.sky-btn-quiet{background:var(--sky-fill-soft);box-shadow:none;font-size:.875rem;padding:.625rem 1rem;min-height:2.75rem}
.sky-btn-quiet:hover{background:var(--sky-fill);box-shadow:none;color:var(--sky-brand-text)}

/* cards */
.sky-card{background:var(--sky-white);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--info-box-shadow);}



.sky-card-head{display:flex;flex-direction:column;gap:.25rem;padding-bottom:1rem;border-bottom:1px solid var(--sky-fill)}
.sky-kicker{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-brand-text)}
.sky-world{font-family:var(--font-body);font-weight:600;font-size:1.375rem;line-height:1.3;word-break:break-word}
.sky-meta{font-size:.875rem;color:rgba(6,36,48,.72)}

/* toggle rows */
.sky-rows{display:flex;flex-direction:column;gap:.25rem;margin-top:.75rem;list-style:none;padding:0}
.sky-rows li{display:flex;align-items:center;gap:.875rem;padding-block:.25rem}
.sky-row{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.75rem .625rem;border-radius:var(--radius);background:transparent;transition:background var(--dur-base) var(--ease)}
.sky-row.is-changed{background:var(--sky-fill-soft)}
.sky-row-text{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1;order:1}
.sky-row-label{font-weight:400;line-height:1.4}
.sky-row-tag{font-family:var(--font-mono);font-size:.75rem;color:rgba(6,36,48,.62);word-break:break-all}
.sky-chip{align-self:center;order:2;flex:none;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-brand-text);background:var(--sky-fill);border-radius:var(--radius);padding:.125rem .375rem}
.sky-switch{position:relative;display:flex;align-items:center;min-height:2.75rem;padding-block:0;flex:none;order:3;cursor:pointer}
.sky-switch input{position:absolute;opacity:0;width:2.875rem;height:2.75rem;margin:0;cursor:pointer}
.sky-track{width:2.875rem;height:1.625rem;border-radius:2px;background:var(--sky-fill);position:relative;transition:background var(--dur-base) var(--ease);pointer-events:none}
.sky-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:1px;background:var(--sky-white);box-shadow:0 1px 2px rgba(6,36,48,.28);transition:transform var(--dur-base) var(--ease)}
.sky-switch input:checked + .sky-track{background:var(--sky-brand-text)}
.sky-switch input:checked + .sky-track::after{transform:translateX(20px)}
.sky-switch input:focus-visible + .sky-track{outline:2px solid var(--sky-brand-text);outline-offset:2px}
.sky-switch input:disabled{cursor:not-allowed}
.sky-switch input:disabled + .sky-track{background:#dce9ee;opacity:.72}
.sky-panel-foot{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sky-fill)}
.sky-bulk{display:flex;flex-wrap:wrap;gap:.5rem}
.sky-bulk .sky-btn{flex:1 1 auto}
.sky-count{font-size:.875rem;color:rgba(6,36,48,.72)}

/* world settings editor */
.sky-settings-layout{display:grid;gap:1.25rem;margin-top:1rem}
.sky-settings-nav{
  display:flex;gap:.5rem;overflow-x:auto;
  margin-inline:-.25rem;padding:.625rem .25rem;background:var(--sky-white);
  border-bottom:1px solid var(--sky-fill);scrollbar-width:thin
}
.sky-settings-nav-link{
  display:flex;align-items:center;justify-content:space-between;gap:.625rem;flex:none;
  padding:.5rem .75rem;border:0;border-radius:var(--radius);background:var(--sky-fill-soft);
  color:var(--sky-ink);font:inherit;font-size:.8125rem;font-weight:600;text-align:left;white-space:nowrap;cursor:pointer
}
.sky-settings-nav-link:hover{background:var(--sky-fill);color:var(--sky-brand-text)}
.sky-settings-nav-link[aria-selected="true"]{background:var(--sky-brand-text);color:var(--sky-white)}
.sky-settings-nav-link[aria-selected="true"]:hover{background:var(--sky-brand-press);color:var(--sky-white)}
.sky-settings-nav-link:focus-visible{outline:2px solid var(--sky-brand-text);outline-offset:2px}
.sky-tab-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.375rem;
  padding-inline:.3rem;border-radius:var(--radius);background:rgba(6,36,48,.08);font-family:var(--font-mono);font-size:.6875rem
}
.sky-settings-nav-link[aria-selected="true"] .sky-tab-count{background:rgba(255,255,255,.22)}
.sky-settings-groups{min-width:0}
.sky-settings-group{min-height:24rem;padding-block:.25rem}
.sky-settings-group:focus{outline:none}
.sky-settings-group:focus-visible{outline:2px solid var(--sky-fill);outline-offset:4px}
.sky-settings-group-head{display:flex;flex-direction:column;gap:.25rem}
.sky-settings-group-title{font-size:1.25rem;line-height:1.3}
.sky-settings-group-description{max-width:var(--measure);color:rgba(6,36,48,.72);font-size:.875rem}
.sky-setting-list{display:flex;flex-direction:column;gap:.375rem;margin-top:1rem}
.sky-setting-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;
  padding:.75rem;border-radius:var(--radius);transition:background var(--dur-base) var(--ease)
}
.sky-setting-row.is-changed{background:var(--sky-fill-soft)}
.sky-setting-row.is-locked:not(.is-changed){background:rgba(235,247,252,.48)}
.sky-setting-info{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;min-width:0}
.sky-setting-label{font-size:1rem;font-weight:500;line-height:1.35}
.sky-setting-description{max-width:42rem;color:rgba(6,36,48,.72);font-size:.8125rem;line-height:1.45}
.sky-setting-key{font-family:var(--font-mono);font-size:.6875rem;color:rgba(6,36,48,.52);word-break:break-all}
.sky-setting-info .sky-chip{order:initial;align-self:flex-start;margin-top:.25rem}
.sky-lock-note{margin-top:.25rem;color:rgba(6,36,48,.65);font-size:.75rem;font-weight:600}
.sky-setting-control{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.sky-setting-control.is-field{grid-column:1/-1;width:100%}
.sky-field{
  width:100%;min-height:2.75rem;padding:.625rem .75rem;border:1px solid rgba(6,36,48,.24);
  border-radius:var(--radius);background:var(--sky-white);color:var(--sky-ink);font:inherit
}
.sky-field:hover{border-color:var(--sky-brand-text)}
.sky-field:focus{border-color:var(--sky-brand-text);outline:2px solid var(--sky-fill);outline-offset:1px}
.sky-field:disabled{cursor:not-allowed;background:#edf3f5;color:rgba(6,36,48,.58)}
.sky-number-wrap{display:flex;align-items:center;width:100%}
.sky-field-suffix{margin-left:-2.25rem;width:1.75rem;color:rgba(6,36,48,.62);pointer-events:none}
.sky-section-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sky-inline-empty,.sky-section-note{
  margin-top:1rem;padding:.75rem;border-radius:var(--radius);background:var(--sky-fill-soft);
  color:rgba(6,36,48,.76);font-size:.875rem
}
.sky-experiment-group{margin-top:1.5rem}
.sky-experiment-group+.sky-experiment-group{padding-top:1.5rem;border-top:1px solid var(--sky-fill)}
.sky-subsection-title{font-size:1rem;line-height:1.35}
.sky-subsection-description{margin-top:.2rem;color:rgba(6,36,48,.68);font-size:.8125rem;line-height:1.45}
.sky-pack-list{display:flex;flex-direction:column;gap:.125rem;margin-top:.375rem}
.sky-pack-list li{font-family:var(--font-mono);font-size:.6875rem;color:rgba(6,36,48,.68);overflow-wrap:anywhere}

/* download */
.sky-dl{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}
.sky-aftercare{font-size:.9375rem;max-width:var(--measure);margin-inline:auto}
.sky-ready-card{max-width:42rem;margin-inline:auto}
.sky-ready-copy{margin-top:.625rem;max-width:var(--measure);color:rgba(6,36,48,.76)}
.sky-ready-actions{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;margin-top:1.5rem}
.sky-ready-actions .sky-btn{max-width:100%;justify-content:center;text-align:center;text-decoration:none;overflow-wrap:anywhere}
.sky-ready-card .sky-section-note{margin-top:1rem}

/* warnings */
.sky-h2{font-size:1.5rem;color:var(--sky-ink)}
.sky-warn{display:flex;flex-direction:column;gap:1.125rem;margin-top:1.25rem;list-style:none;padding:0}
.sky-warn li{display:block;max-width:var(--measure);margin-inline:0}
.sky-warn li b{display:block;margin-bottom:.25rem}
.sky-warn b{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.sky-rule{height:2px;width:2.5rem;background:var(--sky-white);opacity:.5}

/* footer */
.sky-foot-in{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.35)}

/* ---------- 6. breakpoints ---------- */
@media (min-width:480px){
  :root{--pad-x:1.75rem}
  .sky-h1{font-size:2.5rem}
  .sky-zone-title{font-size:1.25rem}
  .sky-zone-sub{font-size:.9375rem}
  .sky-btn-lg{width:auto}
  .sky-dl{align-items:flex-start}
  .sky-ready-actions{flex-direction:row;align-items:center}
  .sky-panel-foot{flex-direction:row;align-items:center;justify-content:space-between}
  .sky-setting-control.is-field{grid-column:auto;width:12rem}
}
@media (min-width:768px){
  :root{--pad-x:2.5rem}
  body{font-size:1.0625rem}
  .sky-header{padding-block:2rem 0}
  .sky-hero{padding-block:5rem 3rem}
  .sky-sec{padding-block:7rem}
  .sky-h1{font-size:3rem}
  .sky-lede{font-size:1.125rem}
  .sky-h2{font-size:1.75rem}
  .sky-card{padding:1.75rem}
  .sky-logo img{width:4.875rem;height:4.875rem}
  .sky-settings-layout{grid-template-columns:11rem minmax(0,1fr);gap:1.75rem;align-items:start}
  .sky-settings-nav{
    flex-direction:column;align-self:start;overflow:visible;margin:0;padding:.25rem 0;
    border-bottom:0;border-right:1px solid var(--sky-fill)
  }
  .sky-settings-nav-link{width:calc(100% - 1rem);margin-right:1rem;white-space:normal}
}
@media (min-width:1024px){
  .sky-h1{font-size:3.5rem}
  .sky-hero{padding-block:6rem 3.5rem}
  .sky-footer{padding-block:3rem 4.5rem}
  .sky-zone-title{font-size:1.75rem}
  .sky-zone-sub{font-size:1rem}
}
@media (min-width:1280px){
  :root{--pad-x:2.5rem}
  body{font-size:1.125rem}
  .sky-sec{padding-block:10rem}
  .sky-hero{padding-block:7rem 4rem}
  .sky-deco .d2{right:-4rem}
}
@media (min-width:1440px){
  :root{--col:66rem;--pad-x:3rem}
  .sky-zone-title{font-size:2rem}
  .sky-zone-sub{font-size:1.125rem}
}

/* ---------- 7. utilities ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms;animation-iteration-count:1;transition-duration:.001ms}
  .sky-btn:hover{transform:none}
}

/* header divider — border-based so the thickness is directly controllable */
.sky-divider{
  width:100%;
  max-width:100%;
  margin:1.25rem 0 0;
  border-top:3px solid rgba(255,255,255,.28);
}
@media (prefers-reduced-motion:reduce){
  .sky-zone:hover .sky-zone-svg,.sky-zone:focus-visible .sky-zone-svg,.is-drag .sky-zone-svg{transform:none}
  .sky-zone:hover .sky-zone-inner,
  .sky-zone:focus-visible .sky-zone-inner,
  .is-drag .sky-zone-inner{transform:translateY(-50%)}
}


/* ghost button — for use ON a white card, where a white-filled button
   would be invisible. Outline only, no shadow at rest or on hover. */
.sky-btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:auto;
  background:transparent;
  color:var(--sky-ink);
  border:2px solid var(--sky-fill);
  border-radius:var(--radius);
  box-shadow:none;
  text-decoration:none;
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.sky-btn-ghost:hover,
.sky-btn-ghost:focus-visible{
  background:transparent;
  color:var(--sky-brand-text);
  border-color:var(--sky-brand-text);
  box-shadow:none;
  transform:none;
}
.sky-btn-ghost:active{
  color:var(--sky-brand-press);
  border-color:var(--sky-brand-press);
  transform:none;
}
.sky-btn-ghost:focus-visible{outline:2px solid var(--sky-brand-text);outline-offset:3px}
.sky-btn-ghost .sky-yt{
  flex:none;
  width:1.375rem;
  height:1.375rem;
  fill:currentColor;
}

/* ============================================================
   HOMEPAGE / TOOLS — cloud buttons
   Hover + shadow mirror .sky-zone exactly.
   ============================================================ */
.sky-choices{display:flex;flex-direction:column;gap:2.5rem;margin-top:2.5rem}

.sky-choice{position:relative;display:block;width:100%;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}

.sky-choice-frame{display:block;position:relative;width:100%;margin-inline:auto}

.sky-choice-svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.55));
  transition:filter var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}

.sky-choice-path{fill:var(--sky-white);stroke:var(--sky-white);stroke-width:5px;
  vector-effect:non-scaling-stroke}

.sky-choice:hover .sky-choice-svg,
.sky-choice:focus-visible .sky-choice-svg{
  filter:drop-shadow(0 16px 4px rgba(0,0,0,.65));
  transform:translateY(-10px)}

/* label rides along with the cloud */
.sky-choice:hover .sky-choice-inner,
.sky-choice:focus-visible .sky-choice-inner{transform:translateY(calc(-50% - 10px))}

.sky-choice:focus-visible{outline:2px solid var(--sky-white);outline-offset:6px}

.sky-choice-inner{position:absolute;left:14%;right:14%;top:65%;
  transform:translateY(-50%);
  transition:transform var(--dur-base) var(--ease);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;text-align:center;z-index:1;pointer-events:none}

.sky-choice-title{font-family:var(--font-display);font-weight:400;font-size:1.25rem;
  line-height:1.2;letter-spacing:.01em;color:var(--sky-ink)}

.sky-choice-sub{font-size:.8125rem;line-height:1.4;color:var(--sky-ink)}

/* video cards */
.sky-vids{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.75rem;
  list-style:none;padding:0}
.sky-vid{background:var(--sky-white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--glow-rest);
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.sky-vid:hover{box-shadow:var(--glow-hover);transform:translateY(-2px)}
.sky-vid a{display:block;text-decoration:none;color:inherit}
.sky-vid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--sky-fill)}
.sky-vid-body{display:block;padding:1rem}
.sky-vid-title{font-weight:600;line-height:1.35;color:var(--sky-ink);margin:0}
.sky-vid-meta{font-size:.8125rem;color:rgba(6,36,48,.62);margin:.25rem 0 0}

@media (min-width:37.5rem){
  .sky-choices{flex-direction:row;gap:1.5rem}
  .sky-choice{flex:1}
  .sky-choice-title{font-size:1.375rem}
}
@media (min-width:48rem){
  .sky-choices{gap:2.5rem;margin-top:3.5rem}
  .sky-choice-title{font-size:1.5rem}
  .sky-choice-sub{font-size:.9375rem}
  .sky-vids{grid-template-columns:repeat(2,1fr);gap:1.5rem}
}
@media (min-width:64rem){
  .sky-vids{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .sky-choice:hover .sky-choice-svg,
  .sky-choice:focus-visible .sky-choice-svg{transform:none}
  .sky-choice:hover .sky-choice-inner,
  .sky-choice:focus-visible .sky-choice-inner{transform:translateY(-50%)}
  .sky-vid:hover{transform:none}
}

/* ============================================================
   VIDEOS / SHORTS toggle — sliding squircle
   Track is a translucent well; an opaque white thumb slides
   under the active label, so the blue text reads through it.
   ============================================================ */
.sky-switchbar{
  display:flex;
  justify-content:flex-start;
  margin-top:1.5rem;
}

.sky-seg{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:.3125rem;
  border-radius:1rem;                 /* squircle, not a pill */
  background:rgba(255,255,255,.28);
  isolation:isolate;
}

/* the sliding white plate */
.sky-seg-thumb{
  position:absolute;
  z-index:0;
  top:.3125rem;
  bottom:.3125rem;
  left:.3125rem;
  width:calc(50% - .3125rem);
  border-radius:.75rem;
  background:var(--sky-white);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform var(--dur-base) var(--ease);
  pointer-events:none;
}
.sky-seg[data-active="shorts"] .sky-seg-thumb{transform:translateX(100%)}

.sky-seg-btn{
  position:relative;
  z-index:1;                          /* text sits above the white plate */
  appearance:none;
  border:0;
  background:none;
  cursor:pointer;
  padding:.625rem 1.5rem;
  border-radius:.75rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.9375rem;
  line-height:1.2;
  white-space:nowrap;
  color:var(--sky-brand-press);        /* blue text on both sides */
  transition:color var(--dur-base) var(--ease);
}
.sky-seg-btn[aria-selected="true"]{color:var(--sky-brand-text)}
.sky-seg-btn:focus-visible{outline:2px solid var(--sky-white);outline-offset:3px}

/* panels */
.sky-panel-videos[hidden],
.sky-panel-shorts[hidden]{display:none}

/* shorts are vertical */
.sky-vids--shorts{grid-template-columns:repeat(2,1fr)}
.sky-vids--shorts .sky-vid img{aspect-ratio:9/16}
@media (min-width:37.5rem){ .sky-vids--shorts{grid-template-columns:repeat(3,1fr)} }
@media (min-width:48rem){   .sky-vids--shorts{grid-template-columns:repeat(4,1fr)} }
@media (min-width:64rem){   .sky-vids--shorts{grid-template-columns:repeat(5,1fr)} }

.sky-empty{
  margin-top:1.75rem;
  background:var(--sky-white);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--glow-rest);
  color:var(--sky-ink);
}

@media (prefers-reduced-motion:reduce){
  .sky-seg-thumb{transition:none}
}

/* The Videos/Shorts toggle belongs to the hero above it, so the section
   it opens skips the full vertical rhythm — otherwise the hero's bottom
   padding and the section's top padding stack into a ~250px void. */
.sky-sec:has(.sky-switchbar){padding-block-start:0}