: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);   /* one prose size across every block */
  }
  *{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}   /* mirror the top bar's 18px inset, but at the bottom (reliable scrollable space) */

  /* background light — very slow, sun-through-a-window drift (imperceptible moment to moment) */
  .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 + footer + blocks are the SAME body — same glass, same physics; they vary only in content */
  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:22px;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;gap:6px;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}
  /* STUB CTA (bell-demo.js showCTA): after Bell dissolves, a soft pull toward "get in touch". For Joe to shape. */
  .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)}}

  /* footer mirrors the bar in reverse — starts collapsed (RL), expands to Rabel Labs as it scrolls in */
  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:22px;
    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:88px;padding-bottom:0}   /* hero centred between the bar and the bottom — equal gaps */
  .zone:last-of-type{padding-bottom:36px}

  .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}
  /* one link affordance across the whole site: just an underline (no color, no arrow) */
  .u{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.13em;
    color:var(--ink);cursor:pointer;transition:opacity .2s}
  .u:hover{opacity:.72}   /* stays put, just brightens */

  .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)}
  /* a mirrored pair of clauses — balance ranks even line lengths over meaning and will orphan a verb,
     so the halves are nbsp-bound in the markup and the measure is widened to hold the longest one */
  .layer p.pair{max-width:20ch}
  .layer .tag{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  /* the flip's payoff — the same ink, but catching the drifting light (a subtle sheen, not a rainbow) */
  .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}}
  /* the RL mark, revealed on the hero */
  .rl{font-size:clamp(4.5rem,17vw,9rem);font-weight:700;letter-spacing:-.06em;line-height:1}

  /* two-state reveal (flip) — only the visible face takes pointer events */
  .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}

  /* multi-step cycle */
  .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}

  /* Bell mark — a translucent jelly TOY that lives inside the block: grab it, drag it, and smoosh
     it against the walls (soft-body physics in the script). Shape + material locked from the tuner
     (body 65x65 square, clapper 10 below). At rest it sits calmly; grabbing it brings it to life. */
  .blob[data-behavior="cycle"] .layer.bellstate{display:block;padding:0}   /* free layout: toy floats, copy sits below */
  /* FREE Bell (the Bell page) — the same creature, out of his cage. Fixed to the viewport rather than
     parented to a block, and sized off --blobw so he is exactly the size he was on the landing page.
     Position/transform are owned entirely by bell-demo.js; nothing here may set a transform. */
  /* --bellk is the Bubble Buddy size knob: he emerges large and shrinks one step per completed turn
     (bell-demo.js), dissolving toward 0. Physics reads the scaled box back, so bounce/smoosh track it. */
  .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}   /* no fade: the pinch is a hard cut, hidden by the goo */
  .belltoy.pending{opacity:0}
  .belltoy{transition:opacity .55s var(--ease)}
  /* Bell's BIRTH — block 2 divides and one daughter turns out to be alive. Same material recipe as the
     contact mitosis: the frost is never filtered, a MASK is, and the goo exists only for the neck. The
     daughter is bell-SHAPED from frame one, so the silhouette is continuous through the pinch and only
     the material changes (block frost -> living gel) in the moment the goo hides the cut. */
  .bstage{position:fixed;inset:0;pointer-events:none;z-index:5;display:none}
  .bstage.on{display:block}
  .bstage .glayer{display:block}
  /* Scoped to .bstage on purpose: .gfrost/.gborder carry the contact block's mask at the SAME
     specificity and sit later in this file, so an unscoped .bfrost silently loses on source order and
     you get the contact cell's mask stretched over the whole viewport. */
  .bstage .bfrost{-webkit-mask:url(#mBirth);mask:url(#mBirth)}
  .bstage .bborder{-webkit-mask:url(#mBirthRim);mask:url(#mBirthRim)}
  .belltoy{position:absolute;left:50%;top:50%;width:49%;height:55%;transform:translate(-50%,-50%);
    cursor:grab;touch-action:none;will-change:transform;z-index:3;
    filter:drop-shadow(0 9px 13px rgba(18,46,70,.24))}
  .belltoy:active{cursor:grabbing}
  .belltoy svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
  .bellstate .bellpitch{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
    width:86%;max-width:20ch;margin:0;text-align:center;font-size:var(--fs-body)}

  /* "split" cycle slide: the pair sits about the middle but with a clear gap between the two lines */
  .blob[data-behavior="cycle"] .layer.ends{gap:clamp(2.5rem,13vmin,5.5rem)}
  .layer.ends p{max-width:24ch}

  /* the contact block divides like a CELL (mitosis): real cells are soft bodies at rest, a masked
     "gooey" metaball renders only the ~0.2s pinch. All px geometry is set live by metrics() so it
     tracks --blobw + the viewport. (material recipe + why: memory rabel-contact-mitosis) */
  .cstage{position:relative;margin:0 auto}
  .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}
  /* cell content lives INSIDE the cell so it stretches/smooshes with the jelly (shown at rest) */
  .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}
  /* margin:0 kills the UA <form> default margin-bottom (~1em). As a flex item that margin joins the
     .cellc group, shoving the visible content ~8px ABOVE the cell centre — and the absolutely-positioned
     .cform2 overlay doesn't have it, which is exactly what made the input jump at the mitosis handoff. */
  .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:focus{border-color:var(--accent);background:rgba(255,255,255,.72)}
  /* NO send button (Joe): enter == send is universally conditioned, and a bolted-on button read as a
     generic signup form. The field IS the interaction — Enter submits via implicit form submission. */
  /* gooey layers — shown ONLY during the division; default hidden so a rest state can't leak them */
  .glayer{position:absolute;inset:0;pointer-events:none;display:none}
  .gshadow{-webkit-mask:url(#mInv);mask:url(#mInv)}
  .gfrost{background:rgba(255,255,255,.5);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    -webkit-mask:url(#mOne);mask:url(#mOne)}
  .gborder{background:rgba(255,255,255,.85);-webkit-mask:url(#mRim);mask:url(#mRim)}
  /* transition overlays — the mitosis slide/fade choreography (decoupled from the material swap) */
  /* max-width (not width) so the box shrink-to-fits exactly like .cellc's .ct it clones */
  .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}
  .cform2{position:absolute;transform:translate(-50%,-50%);display:flex;gap:8px;width:17rem;margin:0;pointer-events:none}
  /* .cform2 is the move-phase CLONE of .cform — keep it pixel-faithful or the swap pops */
  .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)}
  /* phase gate: rest -> block children live; move -> transition overlays live */
  .cstage[data-phase="rest"] .lbl,.cstage[data-phase="rest"] .cform2{opacity:0!important;pointer-events:none}
  .cstage[data-phase="move"] .cellc{opacity:0}
  /* click-catcher: inert at rest (cells take taps), armed DURING a division so clicks still register
     (the cells are hidden mid-pinch) — this is what makes divide/merge spammable */
  .chit{position:absolute;inset:0;z-index:10;pointer-events:none;cursor:pointer}

  /* custom "blobby" scrollbar — a glass block that oozes out of the right edge while scrolling and
     absorbs back into the edge when idle; grab it to drag (vertical = scroll, pull left = rubber-band) */
  html{scrollbar-width:none}                 /* Firefox: hide native */
  ::-webkit-scrollbar{width:0;height:0}      /* WebKit: hide native */
  .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}
  .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} }

  /* hidden physics tuner (?tune=1) */
  #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)}