/* Polite Owl — light and dark themes.
   <html data-theme="light|dark"> is set before first paint by the small script in each page's <head>,
   from the visitor's choice (Auto / Light / Dark) or, on Auto, their device setting. */

/* ---------- dark colours ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1124; --surface:#161B33; --surface-2:#1F2542;
  --ink:#EDEFFA; --ink-2:#C9CEE6; --muted:#A1A7C4; --soft:#8D94B4;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --amber:#F4AA45; --violet:#9B85FF; --night:#070A16;
  --owl-light:#F1F3FA; --owl-dark:#141A33;
}
/* no script at all: still follow the device */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --bg:#0D1124; --surface:#161B33; --surface-2:#1F2542;
    --ink:#EDEFFA; --ink-2:#C9CEE6; --muted:#A1A7C4; --soft:#8D94B4;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
    --amber:#F4AA45; --violet:#9B85FF; --night:#070A16;
  }
}

/* ---------- the switch in the nav ---------- */
.theme-btn{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:4px;border:0;padding:0;border-radius:50%;background:rgba(19,21,40,.05);color:var(--ink);cursor:pointer;transition:background .3s,transform .55s var(--spring)}
.theme-btn:hover{background:rgba(19,21,40,.1);transform:rotate(-14deg)}
.theme-btn:active{transform:scale(.88)}
.theme-btn svg{position:absolute;width:20px;height:20px;opacity:0;transform:scale(.4) rotate(-90deg);transition:opacity .3s,transform .6s var(--spring)}
:root:not([data-theme-pref]) .theme-btn .i-auto,
[data-theme-pref="auto"] .theme-btn .i-auto,
[data-theme-pref="light"] .theme-btn .i-light,
[data-theme-pref="dark"] .theme-btn .i-dark{opacity:1;transform:none}
html:not(.js) .theme-btn{display:none}
[data-theme="dark"] .theme-btn{background:rgba(255,255,255,.07)}
[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,.13)}

/* switching: a circle of the new theme grows out of the switch (where supported) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:theme-reveal .75s cubic-bezier(.2,.8,.2,1)}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--vt-x,92%) var(--vt-y,40px))}to{clip-path:circle(150vmax at var(--vt-x,92%) var(--vt-y,40px))}}
/* elsewhere: colours simply ease across */
html.theme-anim body,html.theme-anim body *,html.theme-anim body *::before,html.theme-anim body *::after{transition:background-color .5s var(--out),color .5s var(--out),border-color .5s var(--out),fill .5s var(--out),stroke .5s var(--out),box-shadow .5s var(--out)!important}

/* ---------- dark: page furniture ---------- */
[data-theme="dark"] body::before{background:radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4))}
[data-theme="dark"] body::after{opacity:.07;mix-blend-mode:screen;filter:invert(1)}
[data-theme="dark"] .skip{color:var(--bg)}
[data-theme="dark"] .nav{background:rgba(20,25,48,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 14px 34px -20px rgba(0,0,0,.75)}
[data-theme="dark"] .nav nav a:hover{background:rgba(255,255,255,.07)}
[data-theme="dark"] .nav nav a.nav-cta{color:var(--bg)}
[data-theme="dark"] .nav nav a.nav-cta:hover{background:#fff}
[data-theme="dark"] .brand svg path[fill="#141A33"]{fill:var(--owl-light)}
[data-theme="dark"] .brand svg circle[stroke="#FFFFFF"]{stroke:var(--owl-dark)}

/* ---------- dark: hero at night ---------- */
[data-theme="dark"] .hero-bg{background:
  radial-gradient(36% 48% at 73% 40%,rgba(244,170,69,.24),rgba(244,170,69,0) 70%),
  radial-gradient(44% 46% at 4% 2%,rgba(155,133,255,.2),rgba(155,133,255,0) 70%),
  radial-gradient(30% 30% at 96% 96%,rgba(105,180,255,.12),rgba(105,180,255,0) 70%),
  linear-gradient(180deg,#121731 0%,#0D1124 60%,#0A0E1F 100%)}
[data-theme="dark"] .hero-bg::before{content:"";position:absolute;inset:0 0 170px;pointer-events:none;opacity:.85;animation:night-twinkle 7s ease-in-out infinite alternate;background-image:
  radial-gradient(1.3px 1.3px at 8% 18%,#fff,transparent),radial-gradient(1px 1px at 17% 64%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 26% 9%,#fff,transparent),radial-gradient(1px 1px at 38% 41%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 47% 12%,#fff,transparent),radial-gradient(1px 1px at 55% 72%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 61% 27%,#fff,transparent),radial-gradient(1px 1px at 88% 14%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 94% 48%,#fff,transparent),radial-gradient(1px 1px at 79% 66%,#fff,transparent),
  radial-gradient(1.1px 1.1px at 33% 84%,#fff,transparent),radial-gradient(1.4px 1.4px at 70% 6%,#fff,transparent)}
@keyframes night-twinkle{from{opacity:.55}to{opacity:.95}}
[data-theme="dark"] .hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));border-top-color:rgba(255,255,255,.07)}
[data-theme="dark"] .string{stroke:rgba(255,255,255,.26)}
[data-theme="dark"] .orn-moon svg{filter:drop-shadow(0 0 46px rgba(244,170,69,.32)) drop-shadow(0 26px 30px rgba(0,0,0,.45))}
/* the owl turns into its night-time self: pale feathers, dark eyes */
[data-theme="dark"] #owlMove > g > path:first-child{fill:var(--owl-light)}
[data-theme="dark"] #owlMove .ring{stroke:var(--owl-dark)}
[data-theme="dark"] #pupilL,[data-theme="dark"] #pupilR{fill:var(--owl-dark)}
[data-theme="dark"] #happy{stroke:var(--owl-dark)}
[data-theme="dark"] :is(.empty-owl,.help-owl) path[fill="#141A33"]{fill:var(--owl-light)}
[data-theme="dark"] :is(.empty-owl,.help-owl) circle[stroke="#fff"]{stroke:var(--owl-dark)}
[data-theme="dark"] :is(.empty-owl,.help-owl) circle[fill="#fff"]{fill:var(--owl-dark)}
[data-theme="dark"] .bubble,[data-theme="dark"] .peek-bubble{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2),0 16px 34px -16px rgba(0,0,0,.7)}
[data-theme="dark"] .eyebrow{background:rgba(22,27,51,.78);box-shadow:inset 0 0 0 1px var(--line),0 8px 22px -16px rgba(0,0,0,.6)}

/* buttons */
[data-theme="dark"] .btn-primary{color:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -14px rgba(0,0,0,.6)}
[data-theme="dark"] .btn-primary:hover{background:#fff}
[data-theme="dark"] .btn-icon{background:var(--bg);color:var(--ink)}
[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2),0 10px 24px -18px rgba(0,0,0,.6)}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.12)}
[data-theme="dark"] .toybtn{background:rgba(255,255,255,.06)}
[data-theme="dark"] .toybtn:hover{background:rgba(255,255,255,.12)}

/* toys */
[data-theme="dark"] .toy-label{color:var(--bg)}
[data-theme="dark"] .soon .toy-body{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
[data-theme="dark"] .ring .toy-body{background:radial-gradient(circle,transparent 0 33%,#DCE0F2 34% 100%)}
[data-theme="dark"] .crescent .toy-body path{fill:#DCE0F2}
[data-theme="dark"] .toy{filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}

/* ---------- dark: shelf and cards ---------- */
[data-theme="dark"] .seg{background:var(--surface)}
[data-theme="dark"] .seg button[aria-pressed="true"],[data-theme="dark"] .chip[aria-pressed="true"]{color:var(--bg)}
[data-theme="dark"] .chip{background:rgba(255,255,255,.05)}
[data-theme="dark"] .seg-ind,[data-theme="dark"] .chip-ind{box-shadow:0 8px 18px -10px rgba(0,0,0,.7)}
[data-theme="dark"] .card-in{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 44px -30px rgba(0,0,0,.7)}
[data-theme="dark"] .card:hover .card-in{box-shadow:0 0 0 1px var(--line-2),0 34px 60px -30px rgba(0,0,0,.8)}
[data-theme="dark"] .card:hover .card-arrow,[data-theme="dark"] .card:focus-within .card-arrow{color:var(--bg)}
[data-theme="dark"] .card:hover .card-glow,[data-theme="dark"] .card:focus-within .card-glow{opacity:.18}
[data-theme="dark"] .card.soon .card-in{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.13)}
[data-theme="dark"] .soon-icon{background:rgba(255,255,255,.06)}
[data-theme="dark"] .badge.price,[data-theme="dark"] .badge.paid{background:rgba(244,170,69,.15);color:#F7C27A}
[data-theme="dark"] .badge.alpha{background:rgba(155,133,255,.18);color:#CDBFFF}
[data-theme="dark"] .badge.soon{background:rgba(255,255,255,.08)}
[data-theme="dark"] .badge.free{background:rgba(47,182,124,.16);color:#7FDDB3}
[data-theme="dark"] .badge.oss{background:rgba(120,140,255,.16);color:#B7C2FF}

/* ---------- dark: "build it yourself" ---------- */
[data-theme="dark"] .vs-or{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),0 12px 24px -16px rgba(0,0,0,.6)}
[data-theme="dark"] .pcard{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 44px -30px rgba(0,0,0,.7)}
[data-theme="dark"] .path-owl{box-shadow:0 0 0 2px var(--amber),0 30px 60px -34px rgba(0,0,0,.8)}
[data-theme="dark"] .path-owl .path-kicker{color:#F7BE6B}
[data-theme="dark"] .ticks-diy li::before{background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 11.5c1.5-2.4 3-2.4 4.5 0s3 2.4 4.5 0' fill='none' stroke='%23A1A7C4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/21px no-repeat}
[data-theme="dark"] .path-diy .stage{background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,#11162C}
[data-theme="dark"] .meter{background:var(--surface-2)}
[data-theme="dark"] .meter-num{color:#FF9A6B}
[data-theme="dark"] .prompts li{color:var(--bg)}
[data-theme="dark"] .bug [stroke="#131528"]{stroke:#C9CEE6}
[data-theme="dark"] .bug [fill="#131528"]{fill:#C9CEE6}
[data-theme="dark"] .path-owl .stage{background:radial-gradient(120% 110% at 50% 100%,rgba(105,160,255,.26),rgba(105,160,255,.04))}
[data-theme="dark"] .win{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -24px rgba(0,0,0,.7)}
[data-theme="dark"] .win-bar i{background:rgba(255,255,255,.18)}
[data-theme="dark"] .win-row b{background:rgba(255,255,255,.12)}
[data-theme="dark"] .help span{background:var(--surface-2)}
[data-theme="dark"] .why-foot{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 44px -30px rgba(0,0,0,.7)}

/* ---------- dark: the promise toys ---------- */
[data-theme="dark"] .p-quiet .stage{background:radial-gradient(120% 110% at 50% 100%,rgba(244,170,69,.3),rgba(244,170,69,.04))}
[data-theme="dark"] .p-lock .stage{background:radial-gradient(120% 110% at 50% 100%,rgba(155,133,255,.3),rgba(155,133,255,.04))}
[data-theme="dark"] .p-fair .stage{background:radial-gradient(120% 110% at 50% 100%,rgba(60,203,143,.24),rgba(60,203,143,.04))}
[data-theme="dark"] .stage-tag{background:rgba(13,17,36,.72)}
[data-theme="dark"] .hushed .stage-tag{background:var(--surface-2)}
[data-theme="dark"] :is(.bell,.lock,.scales) [fill="#141A33"]{fill:#E6E9F7}
[data-theme="dark"] :is(.bell,.lock,.scales) [stroke="#141A33"]{stroke:#E6E9F7}
[data-theme="dark"] .scales path[fill="#fff"]{fill:var(--surface-2)}
[data-theme="dark"] .orbit i[style*="#141A33"]{--dc:#E6E9F7}

/* ---------- dark: footer and owl ---------- */
[data-theme="dark"] .foot{background:linear-gradient(180deg,#080B19 0%,#0B0F23 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .peek-owl{filter:drop-shadow(0 -6px 18px rgba(0,0,0,.5))}

/* ---------- dark: app pages ---------- */
[data-theme="dark"] .crumbs{background:rgba(22,27,51,.72)}
[data-theme="dark"] .crumbs:hover{background:var(--surface-2)}
[data-theme="dark"] .app-kicker{background:var(--surface)}
[data-theme="dark"] .stage-big{background:radial-gradient(80% 80% at 50% 38%,color-mix(in srgb,var(--c1) 26%,#161B33),color-mix(in srgb,var(--c1) 6%,#0D1124) 70%);box-shadow:0 0 0 1px var(--line),0 50px 90px -60px var(--c2)}
[data-theme="dark"] .stage-big::before{background-image:radial-gradient(rgba(255,255,255,.1) 1.2px,transparent 1.4px)}
[data-theme="dark"] .feat,[data-theme="dark"] .facts{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 44px -30px rgba(0,0,0,.7)}
[data-theme="dark"] .feat:hover{box-shadow:0 0 0 1px var(--line-2),0 34px 60px -30px rgba(0,0,0,.8)}
[data-theme="dark"] .feat-num{color:color-mix(in srgb,var(--c1) 80%,#fff)}

/* ---------- dark: not-found page ---------- */
[data-theme="dark"] .nf-owl path[fill="#141A33"]{fill:var(--owl-light)}
[data-theme="dark"] .nf-owl circle[stroke="#fff"]{stroke:var(--owl-dark)}
[data-theme="dark"] .nf-owl circle[fill="#fff"]{fill:var(--owl-dark)}

.nav nav a{white-space:nowrap}
@media (max-width:700px){
  .theme-btn{width:38px;height:38px;margin-left:2px}
  .nav nav a{padding:10px 8px}
}
@media (max-width:350px){
  .nav .brand{font-size:15.5px;gap:7px}
  .nav nav a{padding:10px 6px;font-size:13px}
  .nav nav a[href$="#promise"]{display:none}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-new(root){animation:none}
  [data-theme="dark"] .hero-bg::before{animation:none}
}