:root{
    --ink:#12181d; --muted:#63727d;
    --base:#eff2f6;
    --glass:rgba(255,255,255,.5); --glass-2:rgba(255,255,255,.8); --glass-brd:rgba(255,255,255,.85);
    --glass-edge:rgba(20,44,66,.09);
    --accent:#6aa6e6;   
    --grotesk:"Helvetica Neue",Arial,"Segoe UI",Roboto,sans-serif;
    --ease:cubic-bezier(.2,.72,.2,1);
    --maxw:1180px;
    --blobw:min(86vmin,600px);
    --fs-body:clamp(1.6rem,4.3vw,2.75rem);    
  }
  *{box-sizing:border-box}
  html{height:100%}
  body{margin:0;min-height:100%;color:var(--ink);font-family:var(--grotesk);line-height:1.5;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;background:var(--base);
    padding-bottom:18px}    

   
  .beams{position:fixed;inset:-45%;z-index:-2;pointer-events:none;filter:blur(50px);will-change:transform}
  .b1{opacity:.55;background:conic-gradient(from 202deg at 82% -12%,
      transparent 0deg, rgba(118,164,226,.55) 15deg, transparent 31deg,
      transparent 44deg, rgba(120,201,176,.42) 60deg, transparent 78deg,
      transparent 92deg, rgba(188,160,231,.5) 108deg, transparent 126deg)}
  .b2{opacity:.42;background:conic-gradient(from 150deg at 14% -8%,
      transparent 0deg, rgba(240,226,192,.42) 16deg, transparent 33deg,
      transparent 50deg, rgba(150,190,235,.4) 66deg, transparent 84deg)}
  .glow{position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:radial-gradient(45vw 40vh at 80% 6%, rgba(255,255,255,.6), transparent 60%)}
   
  @media (prefers-reduced-motion:no-preference){
    .b1{animation:sway1 228s ease-in-out infinite alternate, breathe1 96s ease-in-out infinite alternate}
    .b2{animation:sway2 270s ease-in-out infinite alternate, breathe2 118s ease-in-out infinite alternate}
    .glow{animation:sundrift 300s ease-in-out infinite alternate}
  }
  @keyframes sway1{from{transform:rotate(-9deg) scale(1.06) translate3d(-3%,-1%,0)}to{transform:rotate(9deg) scale(1.15) translate3d(4%,3%,0)}}
  @keyframes sway2{from{transform:rotate(7deg) scale(1.12) translate3d(2%,1%,0)}to{transform:rotate(-8deg) scale(1.05) translate3d(-4%,-2%,0)}}
  @keyframes breathe1{from{opacity:.4}to{opacity:.6}}
  @keyframes breathe2{from{opacity:.32}to{opacity:.5}}
  @keyframes sundrift{from{opacity:.78;transform:translate3d(0,0,0) scale(1)}to{opacity:1;transform:translate3d(-5%,4%,0) scale(1.07)}}

  a{color:var(--ink);text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

   
  nav{position:fixed;top:18px;left:0;right:0;margin-left:auto;margin-right:auto;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    width:calc(100% - 40px);max-width:var(--maxw);padding:13px 16px 13px 22px;border-radius:16px;
    transition:max-width .6s var(--ease),border-radius .5s var(--ease),padding .5s var(--ease);
    background:var(--glass);border:1px solid var(--glass-brd);
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px var(--glass-edge),0 22px 48px -30px rgba(18,46,70,.5);
    cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
  nav:active{cursor:grabbing}
  .logo{display:inline-flex;align-items:baseline;font-weight:600;font-size:1.4rem;letter-spacing:-.03em;color:var(--ink);cursor:pointer}
  .logo .drop{display:inline-block;overflow:hidden;white-space:nowrap;max-width:8ch;opacity:1;
    transition:max-width .55s var(--ease),opacity .4s var(--ease)}
  nav.collapsed{max-width:var(--blobw);border-radius:16px;padding:13px 18px 13px 24px}
  nav.collapsed .logo{letter-spacing:-.06em;font-weight:700}
  nav.collapsed .drop{max-width:0;opacity:0}
   
  .navlinks{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px;row-gap:4px;margin-left:auto}
  .navlink{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--muted);cursor:pointer;
    padding:9px 12px;border-radius:999px;transition:color .2s,background .2s}
  .navlink:hover{color:var(--ink);background:var(--glass-2)}
  .navpill{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink);background:var(--glass-2);
    border:1px solid var(--glass-brd);border-radius:999px;padding:10px 14px;cursor:pointer;
    backdrop-filter:blur(12px);transition:transform .2s var(--ease),background .2s}
  .navpill:hover{background:#fff}
   
  .navlink,.navpill,.backtop{display:inline-flex;align-items:center;justify-content:center;line-height:1;
    height:calc(.95rem * 1.5 + 18px)}
  nav,footer#foot{min-height:calc(.95rem * 1.5 + 18px + 26px)}
   
  .navpill.cta{animation:navcta 1.5s var(--ease) 2}
  @keyframes navcta{0%,100%{box-shadow:0 0 0 0 rgba(120,150,190,0)}50%{box-shadow:0 0 0 7px rgba(120,150,190,.16)}}

   
  :root:not(.nav-expanded) .navlink[data-nav="app"],
  :root:not(.nav-expanded) .navlink[data-nav="api"]{display:none}
  @media (prefers-reduced-motion:no-preference){
    :root.nav-reveal .navlink[data-nav="app"]{animation:navreveal .5s var(--ease) .28s both}
    :root.nav-reveal .navlink[data-nav="api"]{animation:navreveal .5s var(--ease) .36s both}
    @keyframes navreveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  }

   
  @view-transition{navigation:auto}
  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease)}
  }
  @media (prefers-reduced-motion:reduce){
    ::view-transition-old(root),::view-transition-new(root){animation:none}
  }

   
  footer#foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
    width:calc(100% - 40px);max-width:var(--blobw);margin:6px auto 0;padding:13px 18px 13px 24px;border-radius:16px;
    transition:max-width .6s var(--ease),border-radius .5s var(--ease),padding .5s var(--ease);
    background:var(--glass);border:1px solid var(--glass-brd);
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px var(--glass-edge),0 22px 48px -30px rgba(18,46,70,.5);
    cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
  footer#foot:active{cursor:grabbing}
  footer#foot .logo{letter-spacing:-.06em;font-weight:700}
  footer#foot .logo .drop{max-width:0;opacity:0}
  footer#foot.expanded{max-width:var(--maxw);border-radius:16px;padding:13px 16px 13px 22px}
  footer#foot.expanded .logo{letter-spacing:-.03em;font-weight:600}
  footer#foot.expanded .logo .drop{max-width:8ch;opacity:1}
  .backtop{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--muted);cursor:pointer;
    background:var(--glass);border:1px solid var(--glass-brd);border-radius:999px;padding:9px 16px;
    backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px var(--glass-edge);
    transition:color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)}
  .backtop:hover{color:var(--ink);background:var(--glass-2)}
  .backtop:active{transform:scale(.96)}

  .zone{min-height:auto;display:flex;align-items:center;justify-content:center;padding:32px 22px}
   
  #top{min-height:100vh;padding-top:calc(var(--barh,67px) + 21px);padding-bottom:0}    
  .zone:last-of-type{padding-bottom:36px}
   
  @media (max-width:540px){
    #top{min-height:auto;padding-top:calc(var(--barh,67px) + 37px);padding-bottom:32px}
  }

   
  @media (max-width:540px){
    nav,nav.collapsed,footer#foot,footer#foot.expanded{
      width:var(--blobw);max-width:var(--blobw);padding:13px 12px 13px 18px;gap:8px}
    nav .logo,nav.collapsed .logo,footer#foot .logo,footer#foot.expanded .logo{
      letter-spacing:-.06em;font-weight:700}
    nav .logo .drop,nav.collapsed .logo .drop,
    footer#foot .logo .drop,footer#foot.expanded .logo .drop{max-width:0;opacity:0}
     
    .navlinks{gap:2px;row-gap:6px}
    .navlink{padding:9px 6px}
    .navpill{padding:10px 11px;margin-left:4px}
  }

  .blob{position:relative;width:var(--blobw);aspect-ratio:1;border-radius:16%;
    display:flex;align-items:center;justify-content:center;text-align:center;padding:9%;
    background:var(--glass);border:1px solid var(--glass-brd);
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px var(--glass-edge),0 40px 80px -36px rgba(18,46,70,.6);
    cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform,border-radius;overflow:hidden}
  .blob:active{cursor:grabbing}
  .blob h1{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.05;
    font-size:clamp(1.8rem,4.6vw,3.3rem);text-wrap:balance}
   
  .u{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.13em;
    color:var(--ink);cursor:pointer;transition:opacity .2s}
  .u:hover{opacity:.72}    

  .layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:11%;gap:14px;transition:opacity .45s var(--ease),transform .5s var(--ease)}
  .layer p{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance;
    font-size:var(--fs-body);line-height:1.18;max-width:17ch}
  .layer .dim{color:var(--muted)}
   
  .layer p.pair{max-width:20ch}
  .layer .tag{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
   
  .layer .reward{color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(120deg,#12181d,#3e4d5f,#12181d);
    background-size:230% 100%;-webkit-background-clip:text;background-clip:text;
    animation:reward-shine 150s linear infinite}
  @keyframes reward-shine{from{background-position:0 0}to{background-position:230% 0}}
  @media (prefers-reduced-motion:reduce){.layer .reward{animation:none;color:var(--ink);-webkit-text-fill-color:currentColor;background:none}}
   
  .rl{font-size:clamp(4.5rem,17vw,9rem);font-weight:700;letter-spacing:-.06em;line-height:1}

   
  .back{opacity:0;transform:scale(.86);pointer-events:none}
  .blob.revealed .front{opacity:0;transform:scale(1.08);pointer-events:none}
  .blob.revealed .back{opacity:1;transform:scale(1);pointer-events:auto}

   
  .blob[data-behavior="cycle"] .layer{opacity:0;transform:translateY(12px) scale(.97);pointer-events:none}
  .blob[data-behavior="cycle"] .layer.on{opacity:1;transform:none;pointer-events:auto}

   
   
   
   
  .belltoy.bellfree{position:fixed;left:0;top:0;width:calc(var(--blobw)*.49*var(--bellk,1));height:calc(var(--blobw)*.55*var(--bellk,1));
    transform:none;z-index:6;transition:none}    
   
  .belltoy.pending{opacity:0;pointer-events:none}
  .belltoy{transition:opacity .55s var(--ease)}
   
  .bstage{position:fixed;inset:0;pointer-events:none;z-index:5;display:none}
  .bstage.on{display:block}
  .bstage .glayer{display:block}
   
  .bstage .bfrost{-webkit-mask:url(#mBirth);mask:url(#mBirth)}
  .bstage .bborder{-webkit-mask:url(#mBirthRim);mask:url(#mBirthRim)}
   
   
  .bellclip{position:absolute;inset:0;border-radius:16%;overflow:hidden;z-index:3;pointer-events:none}
  .bellclip > .belltoy{pointer-events:auto}
   
  .belltoy{position:absolute;left:50%;top:50%;width:76.6%;height:86%;transform:translate(-50%,-50%);
    cursor:grab;touch-action:none;will-change:transform;z-index:3}
  .belltoy:active{cursor:grabbing}
  .belltoy svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
   

   
  .blob[data-behavior="cycle"] .layer.ends{gap:clamp(2.5rem,13vmin,5.5rem)}
  .layer.ends p{max-width:24ch}

   
   
  .cstage{position:relative;margin:0 auto;flex:none;contain:layout}
  .rblock{position:absolute;border-radius:16%;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:var(--glass);border:1px solid var(--glass-brd);
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px var(--glass-edge),0 40px 80px -36px rgba(18,46,70,.6);
    transform-origin:center;will-change:transform,border-radius;cursor:grab;touch-action:none;
    user-select:none;-webkit-user-select:none}
  .rblock:active{cursor:grabbing}
  .rblock.hidden{display:none}
   
  .cellc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:9%;text-align:center;pointer-events:none}
  .cellc .ct{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance;font-size:var(--fs-body);line-height:1.15;max-width:14ch}
   
  .cellc.bstep{opacity:0;transform:translateY(12px) scale(.97);
    transition:opacity .45s var(--ease),transform .5s var(--ease)}
  .cellc.bstep.on{opacity:1;transform:none}
   
  #bellstage .cellc .ct{max-width:17ch}
   
  #bellstage .cellc.bstep.ends{gap:clamp(2.5rem,13vmin,5.5rem)}
   
  @media (max-width:540px){ #bellstage .cellc.bstep.ends{gap:1.5rem} }
   
  @media (max-width:540px){ .cellc .ct,#bellstage .cellc .ct{max-width:100%;text-wrap:wrap} }
   
  #bellstage .cellc .u{pointer-events:auto}
   
  .cform{display:flex;gap:8px;width:100%;max-width:17rem;margin:0;pointer-events:auto}
  .cform input{flex:1;min-width:0;font:inherit;font-size:1.05rem;text-align:center;padding:12px 15px;border-radius:13px;
    border:1px solid var(--glass-brd);background:rgba(255,255,255,.5);color:var(--ink);outline:none}
  .cform input::placeholder{color:var(--muted)}
   
  .cform input,.cform2 input{text-overflow:ellipsis}
  .cform input:focus{border-color:var(--accent);background:rgba(255,255,255,.72)}
   

   
  #personastage .cellc .ct{max-width:17ch}
   
  .pform{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:30rem;margin:0;pointer-events:auto}
   
  @media (max-width:560px){
    .pdrop.up .pdroppanel{top:calc(100% + 5px);bottom:auto}
  }
   
  .pform textarea{font:inherit;font-family:inherit;font-size:1.05rem;line-height:1.35;text-align:center;
    padding:12px 15px;border-radius:13px;height:8.4em;width:100%;resize:none;
    border:1px solid var(--glass-brd);background:rgba(255,255,255,.5);color:var(--ink);outline:none}
  .pform textarea::placeholder{color:var(--muted)}
  .pform textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.72)}
   
   
   
   
  .psquare{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;width:100%;max-width:12.5rem;margin:0 auto}

   
   
  .pdrop,.pdropbtn,.pdropopt,.pgo{touch-action:none}
  .pdrop{position:relative;pointer-events:auto;min-width:0;width:100%}
   
  .pdropbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
    font-family:inherit;font-size:1.15rem;font-weight:600;color:var(--muted);text-align:center;
    background:rgba(255,255,255,.5);border:1px solid var(--glass-brd);border-radius:15px;
    padding:14px 16px;cursor:pointer;outline:none;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:background .2s var(--ease),border-color .2s var(--ease)}
  .pdropbtn:hover{background:rgba(255,255,255,.78)}
   
  .pdrop.picked .pdropbtn{color:var(--ink)}
  .pdrop.open .pdropbtn,.pdropbtn:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.8)}
   
  .pdropbtn::after{content:'';flex:none;width:7px;height:7px;margin-top:-3px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);transition:transform .2s var(--ease)}
  .pdrop.open .pdropbtn::after{transform:rotate(-135deg);margin-top:2px}

   
  .pdroppanel{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:6;
    display:none;flex-direction:column;gap:2px;padding:5px;
    background:rgba(255,255,255,.82);border:1px solid var(--glass-brd);border-radius:13px;
    box-shadow:0 10px 26px rgba(31,45,61,.16);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    max-height:11.5rem;overflow-y:auto}
  .pdrop.up .pdroppanel{top:auto;bottom:calc(100% + 5px)}
  .pdrop.open .pdroppanel{display:flex}
   
  .pdrop.open{z-index:20}
  .pdropopt{font-family:inherit;font-size:.92rem;font-weight:600;color:var(--ink);text-align:center;
    background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;outline:none;
    transition:background .15s var(--ease)}
  .pdropopt:hover,.pdropopt:focus-visible{background:rgba(255,255,255,.9)}
   
  .pdropopt.is-on{background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
  .pvoice{display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:.9rem;font-weight:600;color:var(--muted);position:relative;pointer-events:auto}
  .pvoice select{appearance:none;-webkit-appearance:none;font:inherit;font-family:inherit;
    font-size:.95rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.5);
    border:1px solid var(--glass-brd);border-radius:999px;padding:7px 30px 7px 14px;
    cursor:pointer;outline:none;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:background .2s var(--ease),border-color .2s var(--ease)}
  .pvoice select:hover{background:rgba(255,255,255,.72)}
  .pvoice select:focus{border-color:var(--accent);background:rgba(255,255,255,.72)}
   
  .pvoice::after{content:'';position:absolute;right:12px;top:50%;width:7px;height:7px;
    margin-top:-4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);pointer-events:none}
   
  .pvoice select option{color:var(--ink);background:#fff}
   
  .pgo{width:100%;font-family:inherit;font-size:1.15rem;font-weight:600;color:var(--ink);
    background:var(--glass-2);
    border:1px solid var(--glass-brd);border-radius:15px;padding:14px 16px;cursor:pointer;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:transform .12s var(--ease),background .2s var(--ease)}
  .pgo:hover{background:#fff}
  .pgo:active{transform:scale(.97)}
   
  .pstat{margin:0;font-size:.95rem;font-weight:600;line-height:1.3;color:var(--muted);max-width:26ch;pointer-events:none}
  .pstat:empty{display:none}
   
  @media (max-width:540px){
    .pform{max-width:100%;gap:8px}
    .pform textarea{font-size:1rem;height:7.8em;padding:10px 12px}
    .pgo{font-size:.95rem;padding:9px 14px}
     
    .pvoice{font-size:.85rem;gap:7px}
    .pvoice select{font-size:.9rem;padding:6px 28px 6px 12px}
    .pstat{font-size:.85rem;max-width:100%}
  }
   
  .glayer{position:absolute;inset:0;pointer-events:none;display:none}
   
   
  .cstage .gfrost{background:rgba(255,255,255,.64)}
   
  .cstage .gfrost{backdrop-filter:none;-webkit-backdrop-filter:none}
   
  .gfrost{background:rgba(255,255,255,.5);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
  .gborder{background:rgba(255,255,255,.85)}
   
   
  .lbl{position:absolute;transform:translate(-50%,-50%);text-align:center;font-weight:600;letter-spacing:-.025em;
    font-size:var(--fs-body);line-height:1.15;max-width:14ch;pointer-events:none;width:max-content}
   
  .cform2{position:absolute;transform:translate(-50%,-50%);display:flex;gap:8px;width:17rem;margin:0;pointer-events:none}
   
  .cform2 input{flex:1;min-width:0;font:inherit;font-size:1.05rem;text-align:center;padding:12px 15px;border-radius:13px;
    border:1px solid var(--glass-brd);background:rgba(255,255,255,.5);color:var(--ink)}
  .cform2 input::placeholder{color:var(--muted)}
   
  .cstage[data-phase="rest"] .lbl,.cstage[data-phase="rest"] .cform2{opacity:0!important;pointer-events:none}
  .cstage[data-phase="move"] .cellc{opacity:0}
   
   
  .cstage[data-phase="move"] .rblock .bellclip{opacity:0}
   
  .chit{position:absolute;inset:0;z-index:10;pointer-events:none;cursor:pointer}

   
  html{scrollbar-width:none}                  
  ::-webkit-scrollbar{width:0;height:0}       
  .scrollbar{position:fixed;top:0;right:0;width:26px;height:100%;z-index:85;pointer-events:none;
    transform:translateX(30px);opacity:0;will-change:transform,opacity;
    transition:transform .5s var(--ease),opacity .45s var(--ease)}
  .scrollbar.on{transform:translateX(0);opacity:1}
   
  @media (max-width:540px){ .scrollbar{display:none} }
  .sbthumb{position:absolute;right:6px;width:13px;top:0;pointer-events:auto;cursor:grab;touch-action:none;will-change:transform}
  .sbthumb:active{cursor:grabbing}
  .sbfill{width:100%;height:100%;border-radius:7px;transform-origin:100% 50%;will-change:transform;
    background:var(--glass);border:1px solid var(--glass-brd);
    backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px var(--glass-edge),0 8px 18px -8px rgba(18,46,70,.55)}
  @media (prefers-reduced-motion:reduce){ .scrollbar{transition:opacity .3s} }

   
  #tune{position:fixed;top:88px;right:14px;z-index:200;width:230px;max-height:80vh;overflow:auto;
    padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.82);border:1px solid var(--glass-brd);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 40px -24px rgba(18,46,70,.6);
    font:12px/1.4 var(--grotesk);color:var(--ink)}
  #tune b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  #tune label{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:6px;margin:5px 0;font-size:11px}
  #tune input[type=range]{width:100%}
  #tune .v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
  #tune button{margin-top:8px;width:100%;padding:7px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
  #tune pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-all;font-size:10px;color:var(--muted)}

   
   
  .mat{--ice:#e4edf8; --mint:#e7f2ec; --lilac:#efeaf8;
    background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    overflow:visible}    
   
  footer#foot.mat{background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .mat > .shadow{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:0}
  .mat > .shadow > path{fill:rgba(16,42,66,.44)}
   
  .mat > .glass{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;
    -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
   
  .mat > .rest{position:absolute;inset:0;z-index:2;border-radius:inherit;
    background:var(--glass);border:1px solid var(--glass-brd);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 0 0 1px var(--glass-edge)}
   
   
  .mat > .skin{position:absolute;z-index:2;will-change:clip-path,width,height;
    background:linear-gradient(180deg,rgba(255,255,255,.72) 0,rgba(255,255,255,.62) 3px,rgba(255,255,255,.62))}
  .mat > .skin .life{position:absolute;inset:0;pointer-events:none;opacity:0}
  .mat > .skin .spec{position:absolute;inset:0;background:radial-gradient(58% 42% at 34% 24%,rgba(255,255,255,.6),transparent 60%)}
  .mat > .skin .tint{position:absolute;inset:0;opacity:.34;background:linear-gradient(135deg,var(--ice),var(--mint) 50%,var(--lilac))}
  .mat > .skin .fill{position:absolute;inset:0;background:radial-gradient(52% 52% at 50% 46%,rgba(255,255,255,.22),transparent 66%)}
  .mat > .edge{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
  .mat > .edgeu{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible}
  .mat > .edge .rim{fill:none;stroke:var(--glass-brd);stroke-width:1.2}                       
   
  .mat > .edgeu .rim2{fill:none;stroke:var(--glass-edge);stroke-width:2}    
   
   
   
  .mat > .rest{display:none}
   
  .mat.wide > .glass,.mat.wide > .rest{border-radius:var(--matr,26px)}