: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);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 600px at 80% -10%, #1a2335 0%, transparent 55%),
      radial-gradient(900px 500px at -10% 110%, #161d2b 0%, transparent 50%),
      var(--bg);
    background-attachment:fixed;
    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;
  }
  .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;}
  .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-orb::before,#em-splash.enter #em-orb,#em-splash.enter #em-textwrap{animation:none!important;}
    .em-word{opacity:.85;}
    .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);}