/* The glass look for the landing page, same as the app: soft orbs behind frosted panels, quick 0.2s motion, press shrink.
   Loaded after landing.css. Blur only on wide screens (cheap on slow phones). Light theme lives here too. */
:root{--mo-fast:.2s;--mo-base:.2s;--glass:rgba(20,28,44,.58);--glass-edge:rgba(255,255,255,.09);--glass-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 34px rgba(0,0,0,.4);
  --o1a:#d9a45a;--o1b:#7a4a14;--o2a:#3a63d6;--o2b:#10245f;--o3a:#58c79a;--o3b:#145a3e;--o4a:#58b6dc;--o4b:#0c4a6b}
html[data-theme=light]{color-scheme:light;--bg:#f4f6fb;--bg2:#eceff7;--surf:#ffffff;--surf2:#f1f4fb;--line:#dde3f0;--line2:#c9d2e6;--fg:#142033;--mut:#56637c;--acc:#2f5fd0;--acc-soft:#e3ebff;--acc-ink:#fff;--you:#b86e00;--up:#12805a;--down:#c03030;--focus:#2f5fd0;--glow:rgba(47,95,208,.14);--hero:#f4f6fb;--herofg:#142033;--heromut:#56637c;--chartbg:#fff;--grid:rgba(20,32,51,.1);
  --glass:rgba(255,255,255,.66);--glass-edge:rgba(255,255,255,.8);--glass-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px rgba(31,55,110,.1);
  --o1a:#ffd58a;--o1b:#e8932a;--o2a:#7fa8ff;--o2b:#2447b8;--o3a:#c9f3df;--o3b:#2f9a6b;--o4a:#c4f0ff;--o4b:#3f9ccc}
html[data-theme=light][data-world=web3]{--bg:#fbf4f6;--bg2:#f6ebef;--surf:#fff;--surf2:#fbeff3;--line:#f0dae1;--line2:#e5c6d1;--acc:#c93a58;--acc-soft:#fde4ea;--acc-ink:#fff;--focus:#c93a58;--glow:rgba(201,58,88,.14);--hero:#fbf4f6}
html[data-theme=light][data-world=save]{--bg:#f2f8f5;--bg2:#e8f2ed;--surf:#fff;--surf2:#eef7f2;--line:#d6e8de;--line2:#bfdacb;--acc:#0e8a6a;--acc-soft:#dff3ea;--acc-ink:#fff;--focus:#0e8a6a;--glow:rgba(14,138,106,.14);--hero:#f2f8f5}
html[data-theme=light] h1,html[data-theme=light] h2,html[data-theme=light] h3,html[data-theme=light] .sec.dark h2,html[data-theme=light] .sec.dark h3{color:var(--fg)}
html[data-theme=light] .top{border-bottom-color:var(--line)}
html[data-theme=light] .btn.amber{background:var(--acc);color:var(--acc-ink)}
html[data-theme=light] .controls select,html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{background:#fff;color:var(--fg);border-color:var(--line2)}
html[data-theme=light] .icon{border-color:var(--line2);color:var(--fg)}
html[data-theme=light] .calc,html[data-theme=light] .readout div,html[data-theme=light] .srcs li,html[data-theme=light] .honest{border-color:var(--line)}

/* light theme: the places landing.css hard-codes white */
html[data-theme=light] .hero h1,html[data-theme=light] .calc figcaption,html[data-theme=light] .controls output,html[data-theme=light] .controls select,html[data-theme=light] .gctl output,html[data-theme=light] .gres,html[data-theme=light] .final,html[data-theme=light] .final h2,html[data-theme=light] .readout b,html[data-theme=light] .spec dt,html[data-theme=light] .links a:hover,html[data-theme=light] .worlds button:hover,html[data-theme=light] .worlds button[aria-checked=true],html[data-theme=light] .ptabs button[aria-selected=true],html[data-theme=light] .seg button[aria-selected=true],html[data-theme=light] .seg button[aria-checked=true]{color:var(--fg)}
html[data-theme=light] .ring text{fill:var(--fg)}
html[data-theme=light] .final{background:radial-gradient(800px 380px at 50% 0,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%)}
html[data-theme=light] .controls select{background:#fff}
html[data-theme=light] .readout div{background:color-mix(in srgb,var(--surf) 70%,transparent)}
html[data-theme=light] .btn.ghostlight:hover,html[data-theme=light] .links a:hover{background:var(--acc-soft)}
html[data-theme=light] .wmsg{color:var(--mut)}html[data-theme=light] .wmsg.bad{color:var(--down)}
html[data-theme=light] .brand{color:var(--fg)}

/* orbs */
body{background-color:var(--paper);position:relative}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat}
body::before{background-image:radial-gradient(circle closest-side at 36% 32%,var(--o1a),var(--o1b) 72%,transparent 100%),radial-gradient(circle closest-side at 36% 32%,var(--o4a),var(--o4b) 72%,transparent 100%);background-size:380px 380px,420px 420px;background-position:calc(100% - 90px) -150px,calc(100% + 120px) calc(100% + 130px);opacity:.55}
body::after{background-image:radial-gradient(circle closest-side at 36% 32%,var(--o2a),var(--o2b) 72%,transparent 100%),radial-gradient(circle closest-side at 36% 32%,var(--o3a),var(--o3b) 72%,transparent 100%);background-size:460px 460px,230px 230px;background-position:-190px 62%,56% calc(100% + 70px);opacity:.5}
html[data-theme=light] body::before,html[data-theme=light] body::after{opacity:.85}
/* sections go see-through so the orbs show; the dark bands keep a soft tint */
.hero,.sec,.final{background:transparent}
.sec.alt{background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.sec.dark{background:color-mix(in srgb,var(--surf) 62%,transparent)}

/* glass panels */
.card3,.card2,.calc,.ppanel,.riskbox,.honest,.readout div,.srcs li,.wform,.shots figure,details,.spec{background:var(--glass);border-color:var(--glass-edge);box-shadow:var(--glass-shadow);border-radius:20px}
.top{background:var(--glass);border-bottom:1px solid var(--glass-edge)}
.btn,.icon,.worlds button,.linkbtn,.links a{transition:transform var(--mo-fast),background-color var(--mo-fast),border-color var(--mo-fast),color var(--mo-fast),box-shadow var(--mo-fast),opacity var(--mo-fast),filter var(--mo-fast)}
.btn:active,.icon:active,.worlds button:active,.linkbtn:active{transform:scale(.97)}
.btn{border-radius:14px}
.btn.amber{box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 32%,transparent)}
input,select,textarea{border-radius:14px;transition:border-color var(--mo-fast),box-shadow var(--mo-fast)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}

/* theme button */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--fg);cursor:pointer;padding:0}
.themebtn svg{display:block}.themebtn .sun{display:none}
html[data-theme=light] .themebtn .sun{display:block}html[data-theme=light] .themebtn .moon{display:none}

/* skeleton while the tour videos load */
.shots video,.shots img{background:linear-gradient(90deg,color-mix(in srgb,var(--mut) 12%,transparent),color-mix(in srgb,var(--mut) 22%,transparent),color-mix(in srgb,var(--mut) 12%,transparent));background-size:200% 100%;animation:lskel 1.3s ease-in-out infinite}
@keyframes lskel{to{background-position:-200% 0}}

@media(min-width:821px){
  .top,.card3,.card2,.calc,.ppanel,.riskbox,.honest,.wform,.shots figure,details{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
}
@media(max-width:820px){body::before{background-size:260px 260px,300px 300px}body::after{background-size:320px 320px,170px 170px}.themebtn{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.shots video,.shots img{animation:none}.btn:active,.icon:active,.worlds button:active,.linkbtn:active{transform:none}}
@media print{body::before,body::after{display:none}}