:root{
    --bg:#0e1116; --bg2:#141922; --panel:#171d27; --panel2:#1d2531;
    --ink:#eef2f7; --ink2:#aeb8c7; --ink3:#6f7c8f;
    --line:#26303d; --line2:#324053;
    --info:#7fb4ff; --info-bg:#16243a; --info-line:#2f568f;
    --good:#5fd0a0; --good-bg:#10271f; --good-line:#2a5a45;
    --warn:#f0c267; --warn-bg:#2a2415; --warn-line:#5a4d2a;
    --bad:#ff8b8b; --bad-bg:#2c1718; --bad-line:#5a2e30;
    --r-sm:8px; --r-md:12px; --r-lg:18px;
    --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
    --sans:'Spline Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --disp:'Fraunces',Georgia,'Times New Roman',serif;
    --shadow:0 4px 20px rgba(0,0,0,.25);
    --ease:cubic-bezier(.2,.8,.2,1);
    /* Tideglass motion contract — one shared tempo every motion can read */
    --dur-xs:90ms; --dur-sm:180ms; --dur-md:320ms; --dur-lg:520ms;
    --ease-out:cubic-bezier(.16,1,.3,1);
    /* Tideglass — persistent "one sky" depth floor (#em-deep). --sky-warmth is
       driven later (pillar 2) by portfolio resilience; 0 = neutral. */
    --sky-deep-1:#1a2335; --sky-deep-2:#161d2b; --sky-warmth:0;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);   /* the blooms now live on #em-deep so every screen shares one sky */
    color:var(--ink); font-family:var(--sans); line-height:1.5;
    min-height:100vh; padding:24px 16px 60px;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  /* One Sky, Always: a cheap, JS-free cosmos floor under every screen. Sits below
     .wrap (z:1) and the intro layers (#fluid z:0), so the splash/menu are unchanged
     but in-game text screens are never on flat --bg again. Pure CSS — safe on low-end HW. */
  #em-deep{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(1200px 600px at 80% -10%, var(--sky-deep-1) 0%, transparent 55%),
      radial-gradient(900px 500px at -10% 110%, var(--sky-deep-2) 0%, transparent 50%),
      var(--bg);
    background-attachment:fixed;
  }
  #em-deep::before{ /* subliminal starfield — a faint headliner shimmer, no image request */
    content:''; position:absolute; inset:0; opacity:.10;
    background-image:
      radial-gradient(1px 1px at 25% 30%, #ffffff 50%, transparent 52%),
      radial-gradient(1px 1px at 75% 65%, #ffffff 50%, transparent 52%),
      radial-gradient(1.5px 1.5px at 55% 85%, #cfe0ff 50%, transparent 52%),
      radial-gradient(1px 1px at 90% 20%, #e6eeff 50%, transparent 52%);
    background-size:160px 160px, 220px 220px, 190px 190px, 250px 250px;
    background-position:0 0, 40px 80px, 110px 30px, 70px 140px;
  }
  #em-deep::after{ /* edge vignette — keeps content in a calm pool of focus */
    content:''; position:absolute; inset:0;
    background:radial-gradient(125% 95% at 50% 38%, transparent 56%, rgba(8,10,14,.45) 100%);
  }
  /* One Breath (enter phase): each new screen settles gently into the sky.
     Toggled by a MutationObserver in src/transitions.js — no call-site changes,
     no empty "trough". The leave phase is intentionally omitted; the settle +
     the non-blinking #em-deep floor already remove the hard-cut jar. */
  #game.is-entering{ animation:tg-enter var(--dur-md,320ms) var(--ease-out,ease) both; }
  @keyframes tg-enter{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    /* keep a calm crossfade (meaning: "new screen"), drop the movement */
    #game.is-entering{ animation:tg-fade var(--dur-xs,90ms) both; }
    @keyframes tg-fade{ from{ opacity:0; } to{ opacity:1; } }
  }
  /* Tilt-depth (prototype): phone-as-window parallax, only while .tilt-on (opt-in).
     Vars --tilt-x/--tilt-y (-1..1) are driven by src/tilt.js. #em-deep = far plane,
     .tg-orbs = near plane (opposite direction → depth separation). translate3d =
     compositor-only. Content stays put, so reading is unaffected. */
  html.tilt-on #em-deep{ transform:translate3d(calc(var(--tilt-x,0)*var(--tilt-gain,1)*14px), calc(var(--tilt-y,0)*var(--tilt-gain,1)*14px), 0) scale(1.06); will-change:transform; }
  html.tilt-on .wrap{    transform:translate3d(calc(var(--tilt-x,0)*var(--tilt-gain,1)*-6px), calc(var(--tilt-y,0)*var(--tilt-gain,1)*-4px), 0); will-change:transform; }   /* content/cards = mid plane */
  html.tilt-on .tg-orbs{ transform:translate3d(calc(var(--tilt-x,0)*var(--tilt-gain,1)*-16px), calc(var(--tilt-y,0)*var(--tilt-gain,1)*-8px), 0); will-change:transform; }
  /* the opt-in toggle */
  #tg-tilt-toggle{ position:fixed; right:12px; bottom:12px; z-index:120; font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--ink3);
    background:rgba(20,25,34,.62); border:0.5px solid var(--line2); border-radius:99px; padding:6px 11px; cursor:pointer; opacity:.55;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
  #tg-tilt-toggle:hover{ opacity:1; }
  #tg-tilt-toggle.is-on{ color:var(--info); border-color:var(--info); opacity:1; }
  .wrap{max-width:560px; margin:0 auto; position:relative; z-index:1;}
  h1{font-family:var(--disp); font-weight:600; letter-spacing:-0.02em; margin:0;}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  button{
    font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink);
    background:var(--panel2); border:0.5px solid var(--line2); border-radius:var(--r-sm);
    padding:11px 16px; cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease), transform .08s var(--ease), box-shadow .18s var(--ease);
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  button:hover{border-color:var(--info); background:#222c3a;}
  button:active{transform:scale(0.985);}
  button:focus-visible{outline:2px solid var(--info); outline-offset:2px;}
  [role="button"]{cursor:pointer;}
  [role="button"]:focus-visible{outline:2px solid var(--info); outline-offset:2px;}
  input[type=number]{
    font-family:var(--mono); -webkit-appearance:none; -moz-appearance:textfield;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  input[type=number]:focus{outline:none; border-color:var(--info)!important; box-shadow:0 0 0 3px var(--info-bg);}
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  input[type=range]{ -webkit-appearance:none; appearance:none; height:10px; border-radius:99px; background:var(--line); outline:none; cursor:pointer; touch-action:none;}
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--info); cursor:pointer; border:3px solid var(--bg2); box-shadow:0 2px 6px rgba(0,0,0,.45); transition:transform .12s var(--ease);}
  input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.15);}
  input[type=range]::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--info); cursor:pointer; border:3px solid var(--bg2);}
  .card{background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); animation:rise .35s var(--ease) both;}
  .tile{background:var(--bg2); border-radius:var(--r-md);}
  .ti{line-height:1;}
  ::selection{background:#2f568f; color:#fff;}
  @keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes dropIn{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
  @keyframes popIn{0%{opacity:0; transform:scale(0.8);} 70%{transform:scale(1.05);} 100%{opacity:1; transform:scale(1);}}
  @keyframes goalPop{0%{transform:scale(0.96); box-shadow:0 0 0 0 rgba(95,208,160,0.5);} 40%{transform:scale(1.02);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(95,208,160,0);}}
  @keyframes trophyPop{0%{transform:scale(0) rotate(-20deg);} 60%{transform:scale(1.3) rotate(8deg);} 100%{transform:scale(1) rotate(0);}}
  .grain{position:fixed; inset:0; pointer-events:none; opacity:0.025; z-index:99;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .footer-note{max-width:560px;margin:22px auto 0;text-align:center;font-size:11px;color:var(--ink3);position:relative;z-index:1;}
  /* Mobile polish */
  @media (max-width:520px){
    body{padding:14px 11px 48px;}
    .card{border-radius:var(--r-md);}
    h1{font-size:32px!important;}
    button{padding:12px 14px;}
  }
  @media (max-width:380px){
    h1{font-size:27px!important;}
  }
  /* ===== "Diversify" opening — elevated (aurora depth + iridescent orb) ===== */
  #fluid{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:0;pointer-events:none;}
  /* aurora bloom — soft palette light blooming over the currents (screen blend) */
  #em-aura{position:fixed;inset:-12%;z-index:0;display:none;pointer-events:none;mix-blend-mode:screen;filter:blur(30px) saturate(1.04);opacity:0;transition:opacity 1.2s var(--ease);}
  #em-aura.on{opacity:.72;}
  #em-aura b{position:absolute;display:block;border-radius:50%;will-change:transform;}
  #em-aura .a1{width:42vmax;height:42vmax;left:-12%;top:-18%;background:radial-gradient(circle,#5ec8bb 0%,rgba(94,200,187,0) 62%);animation:auraDrift1 40s var(--ease) infinite;}
  #em-aura .a2{width:54vmax;height:54vmax;right:-12%;top:6%;background:radial-gradient(circle,#7f9bff 0%,rgba(127,155,255,0) 62%);animation:auraDrift2 48s var(--ease) infinite;}
  #em-aura .a3{width:44vmax;height:44vmax;left:16%;bottom:-18%;background:radial-gradient(circle,#b79bff 0%,rgba(183,155,255,0) 60%);animation:auraDrift3 56s var(--ease) infinite;}
  #em-splash{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:pointer;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
    transition:opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);}
  #em-splash.leaving{opacity:0;transform:scale(1.12);filter:blur(7px);pointer-events:none;}
  #em-stage{position:relative;display:flex;flex-direction:column;align-items:center;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .5s var(--ease);will-change:transform;}
  #em-orb{position:relative;width:min(82vw,360px);aspect-ratio:1;}
  #em-orb::before{content:'';position:absolute;inset:-24%;border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 50% 46%,rgba(127,180,255,.30),rgba(143,155,255,.14) 44%,rgba(99,214,200,0) 70%);
    filter:blur(28px);animation:orbGlow 6.5s var(--ease) infinite;}
  #em-orb canvas{position:relative;z-index:1;width:100%;height:100%;display:block;}
  #em-textwrap{opacity:1;}
  .em-word{margin-top:38px;font-family:'Quicksand',var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
    background:linear-gradient(100deg,#9fb6d6,#d4e4ff 18%,#9fe6da 36%,#bfa9ff 54%,#d4e4ff 72%,#9fb6d6 100%);background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:emShimmer 7.5s linear infinite, emPulse 3.4s var(--ease) infinite;}
  /* visible entry signifier — the splash was a dead-end (entry hint was screen-reader-only) */
  .em-cue{margin-top:16px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(214,224,245,.62);animation:emCuePulse 2.6s var(--ease) infinite;}
  @keyframes emCuePulse{0%,100%{opacity:.4;}50%{opacity:.85;}}
  .em-flood{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;z-index:115;pointer-events:none;filter:blur(16px);mix-blend-mode:screen;animation:emFlood 1.5s var(--ease) forwards;}
  /* the orb's bloom — emerges at the orb's size, opens into the page */
  .em-bloom{position:fixed;width:220px;height:220px;margin-left:-110px;margin-top:-110px;border-radius:50%;z-index:115;pointer-events:none;filter:blur(16px);mix-blend-mode:normal;will-change:transform,opacity;animation:emBloom 1.43s var(--ease) forwards;}
  #em-splash.enter #em-orb{animation:orbIn 1.15s var(--ease) both;}
  #em-splash.enter #em-textwrap{animation:textIn .85s var(--ease) .5s both;}
  @keyframes orbIn{0%{opacity:0;transform:scale(.84);}60%{opacity:1;}100%{opacity:1;transform:scale(1);}}
  @keyframes textIn{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:translateY(0);}}
  @keyframes emShimmer{0%{background-position:0% 50%;}100%{background-position:280% 50%;}}
  @keyframes emPulse{0%,100%{opacity:.6;}50%{opacity:.96;}}
  @keyframes orbGlow{0%,100%{opacity:.6;transform:scale(.98);}50%{opacity:1;transform:scale(1.05);}}
  @keyframes emFlood{0%{transform:scale(0);opacity:.95;}42%{opacity:.85;}100%{transform:scale(95);opacity:0;}}
  @keyframes emBloom{0%{transform:scale(.4);opacity:0;}20%{opacity:.72;}50%{opacity:.66;}100%{transform:scale(24);opacity:0;}}
  @keyframes auraDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(7vmax,5vmax) scale(1.12);}}
  @keyframes auraDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-6vmax,6vmax) scale(1.1);}}
  @keyframes auraDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5vmax,-6vmax) scale(1.14);}}
  @media (prefers-reduced-motion:reduce){
    #em-splash{transition:opacity .25s ease;}
    #em-aura b,.em-word,.em-cue,#em-orb::before,#em-splash.enter #em-orb,#em-splash.enter #em-textwrap{animation:none!important;}
    .em-word{opacity:.85;}
    .em-cue{opacity:.78;}
    .em-flood,.em-bloom{animation-duration:.5s;}
  }
  /* "A System of You" main-menu overlay — floats over the original LifeLine background */
  #em-system{position:fixed;inset:0;z-index:5;opacity:0;transform:scale(.99);pointer-events:none;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);}
  #em-system.show{opacity:1;transform:scale(1);pointer-events:auto;}
  #em-foot{position:fixed;left:0;right:0;bottom:7px;z-index:9;text-align:center;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);opacity:0;pointer-events:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1);}
  #em-foot.show{opacity:.5;pointer-events:auto;}
  #em-foot span{cursor:pointer;} #em-foot span:hover{color:var(--ink);}

  /* The Pact — 3D net-worth orbs. When src/orb3d.js mounts the WebGL scene it adds
     .nw-3d-active; hide the CSS orb-strip fallback and give the canvas real height. */
  #nw-orbs-3d.nw-3d-active{min-height:320px;}
  #nw-orbs-3d.nw-3d-active > .tg-orbs{display:none;}