:root{
      --radius:14px; --btn-radius:12px;
    }
    html,body{height:100%;font-family:"EB Garamond", Georgia, serif;overflow-y:auto}

    /* Static FULLGATE background (all devices, fills even if stretched) */
    .fullgate-bg{
      position:fixed; inset:0; z-index:0;
      background:
        var(--bg-grad-1),
        var(--bg-grad-2),
        var(--bg-grad-3),
        var(--bg-grad-4);
    }

    /* Split layout */
    .stage{
      position:relative;
      min-height:100vh;
      min-height:100dvh;
      display:grid;
      place-items:center;
      z-index:1;
      padding:22px 20px;
    }
    .welcome-split{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:center;
      max-width:700px;
      margin:0 auto;
      width:100%;
    }
    .card{
      width:100%;
      max-width:640px;
      margin:0 auto;
      background:linear-gradient(180deg, rgba(252,245,234,.9), rgba(245,231,209,.82));
      border:1px solid rgba(90,43,115,.22);
      border-radius:22px;
      padding:22px 20px 18px;
      box-shadow:0 20px 44px rgba(0,0,0,.12);
      backdrop-filter:blur(6px);
      overflow:visible;
    }
    .brand{display:flex; align-items:center; gap:16px; justify-content:center; margin-bottom:8px}
    .emblem{
      width:110px; height:110px;
      border-radius:999px; overflow:hidden;
      border:1px solid rgba(90,43,115,.35);
      display:grid; place-items:center;
      background:rgba(250,240,223,.88);
    }
    .emblem picture, .emblem img { width:100%; height:100%; object-fit:contain; display:block; }

    .title{ text-align:center; font-family:Cinzel, serif; letter-spacing:.6px; line-height:1.02; margin:0; color:var(--gold-1); }
    .title .l1{ display:block; font-size:clamp(34px,6vw,54px); font-weight:800; }
    .title .l2{ display:block; font-size:clamp(34px,6vw,54px); font-weight:800; margin-top:2px; }
    .welcome-tier-label{
      margin:8px 0 0;
      text-align:center;
      font-family:Cinzel, serif;
      font-size:clamp(22px,3vw,30px);
      color:var(--gold-1);
      line-height:1.1;
    }

    .subtitle{
      text-align:center; margin:6px 0 8px; color:var(--gold-2); font-weight:700; letter-spacing:.5px;
      font-size:clamp(22px,3.2vw,28px);
    }

    /* Unified message bar (top of card) */
    .message-bar{
      display:none;
      margin: 4px 0 8px;
      padding: 10px 12px;
      border-radius:12px;
      border:1px solid rgba(90,43,115,.45);
      background:rgba(249,238,219,.92);
      color:var(--gold-2);
      font-weight:700;
      font-size:clamp(18px, 2.4vw, 20px);
      line-height:1.35;
      text-align:center;
      box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
    .message-bar.show{ display:block; }
    .quick-value{
      margin:2px 0 12px;
      text-align:center;
      color:var(--gold-2);
      font-weight:700;
      font-size:clamp(21px,2.8vw,26px);
      line-height:1.2;
    }

    /* Labels */
    label{display:block;margin:8px 0 5px;color:var(--gold-2);font-weight:700; font-size:18px}

    /* Inputs */
    .input-wrap{position:relative}
    input[type="email"], input[type="password"]{
      width:100%; padding:13px 16px; border-radius:var(--radius);
      border:1px solid rgba(90,43,115,.45); background:transparent; color:var(--ink); font-size:18px; outline:0;
      transition:border-color .15s, box-shadow .15s;
    }
    input::placeholder{ font-size:16px; }
    input:focus{border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(123,66,161,.18)}

    /* Eye toggle - bigger for readability/tap */
    .pw-toggle{
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      width:56px; height:36px;
      display:grid; place-items:center; border:0; background:rgba(249,238,219,.96);
      border-radius:8px; color:var(--gold-2); cursor:pointer; font-size:16px; font-weight:800;
    }

    /* Consent */
    .confirm{display:flex; align-items:flex-start; gap:8px; color:var(--gold-2); font-size:16px; margin-top:8px}
    .confirm a{color:var(--gold-2); text-decoration:underline}

    /* Actions row */
    .actions-row{
      display:flex; justify-content:space-between; align-items:center;
      gap:10px; margin-top:8px; font-size:18px; flex-wrap:wrap;
      overflow:visible;
    }
    .actions-row a{color:var(--ink); text-decoration:none; font-size:17px; font-weight:600; opacity:.82}
    .actions-row a:hover{text-decoration:underline; opacity:1}
    .action-item{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .help-tip{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:6px;
      cursor:help;
    }
    .help-tip-trigger{
      width:26px;
      height:26px;
      border:1.5px solid var(--gold-2);
      border-radius:6px;
      background:transparent;
      color:var(--gold-2);
      display:inline-grid;
      place-items:center;
      font-size:13px;
      font-weight:800;
      line-height:1;
      padding:0;
      cursor:pointer;
      flex:0 0 auto;
    }
    .help-tip-trigger:hover{background:rgba(123,66,161,.12)}
    .help-tip-text{
      position:absolute;
      left:50%;
      bottom:calc(100% + 10px);
      transform:translateX(-50%) translateY(4px);
      min-width:240px;
      max-width:320px;
      padding:9px 12px;
      border-radius:10px;
      border:1px solid rgba(90,43,115,.28);
      background:rgba(44,20,56,.96);
      color:#f4ecfb;
      font-size:14px;
      line-height:1.45;
      font-weight:600;
      text-align:center;
      box-shadow:0 12px 24px rgba(0,0,0,.24);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
      z-index:20;
    }
    .help-tip-text::after{
      content:"";
      position:absolute;
      left:50%;
      top:100%;
      transform:translateX(-50%);
      border:7px solid transparent;
      border-top-color:rgba(44,20,56,.96);
    }
    .help-tip:hover .help-tip-text,
    .help-tip:focus-within .help-tip-text,
    .help-tip.is-open .help-tip-text{
      opacity:1;
      visibility:visible;
      transform:translateX(-50%) translateY(0);
    }
    .help-tip.align-right .help-tip-text{
      left:auto;
      right:0;
      transform:translateY(4px);
    }
    .help-tip.align-right .help-tip-text::after{
      left:auto;
      right:22px;
      transform:none;
    }
    .help-tip.align-right:hover .help-tip-text,
    .help-tip.align-right:focus-within .help-tip-text,
    .help-tip.align-right.is-open .help-tip-text{
      transform:translateY(0);
    }

    /* Primary button */
    .btn{
      display:block; width:100%; margin-top:16px;
      padding:14px 18px; border-radius:14px;
      background:linear-gradient(180deg,#7b42a1,#5a2b73); border:1px solid #45205a;
      color:#f4ecfb; font-weight:800; cursor:pointer; letter-spacing:.04em;
      box-shadow:0 10px 24px rgba(0,0,0,.14); font-size:20px;
    }
    .btn:disabled{opacity:.55; cursor:not-allowed}

    /* Secondary button (Create Account) */
    .btn-secondary{
      display:block; width:100%; margin-top:10px;
      padding:12px 16px; border-radius:14px;
      background:rgba(255,250,242,.35); border:1.5px solid rgba(90,43,115,.55);
      color:var(--gold-2); font-weight:800; cursor:pointer; letter-spacing:.04em;
      box-shadow:0 8px 18px rgba(0,0,0,.08); font-size:18px;
    }
    .btn-secondary:hover{background:rgba(123,66,161,.12); border-color:var(--gold-2);}

    /* Footer / copyright line */
    footer{ text-align:center; font-size:14px; color:var(--gold-2); margin-top:10px }

    /* Welcome top */
    .welcome-top{position:relative; z-index:1; display:grid; place-items:center; padding:0}
    .welcome-inner{width:100%; text-align:center}
    .welcome-lead{margin:0 0 12px; color:var(--gold-1); font-family:Cinzel, serif; letter-spacing:.4px; font-size:clamp(24px,3.2vw,36px); line-height:1.25}
    .welcome-copy{color:var(--ink); font-size:18px; line-height:1.8; margin:0 0 16px;}
    .welcome-top .btn{width:auto; padding:12px 24px}

    /* Menu button (matches oracle page) */
    .oo-topbar{
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      margin-bottom:14px;
      padding:6px 0 10px;
      gap:8px;
      border-bottom:0;
      position:relative;
      z-index:1;
    }
    .oo-menu-btn{
      margin-left:auto;
      background:transparent;
      border:2px solid var(--gold-1);
      color:var(--gold-1);
      width:64px;
      height:64px;
      padding:0;
      min-height:64px;
      display:grid;
      place-items:center;
      border-radius:10px;
      font-size:22px;
      cursor:pointer;
      line-height:1;
      transition:.2s;
      text-decoration:none;
    }
    .oo-menu-btn:hover{background:rgba(123,66,161,.12);color:var(--gold-2);border-color:var(--gold-2)}
    @media(max-width:640px){
      .oo-topbar{justify-content:space-between}
    }

    /* Gates + warning + chamber (unchanged timing before open) */
    .gates{position:fixed; inset:0; display:none; justify-content:stretch; gap:0; perspective:1600px; z-index:2}
    .gate{flex:1; background-size:100% 100%; background-position:center; background-repeat:no-repeat; transition: transform 1.6s ease-in-out; }
    .gate.left{  transform-origin:left center;  background-image:url("/images/gate-left.png"); }
    .gate.right{ transform-origin:right center; background-image:url("/images/gate-right.png"); }
    .webp .gate.left{ background-image:url("/images/gate-left.webp"); }
    .webp .gate.right{ background-image:url("/images/gate-right.webp"); }
    .no-webp .gate.left{ background-image:url("/images/gate-left.png"); }
    .no-webp .gate.right{ background-image:url("/images/gate-right.png"); }
    .gates.open .gate.left{ transform:rotateY(-78deg); }
    .gates.open .gate.right{transform:rotateY( 78deg); }

    .warn{
      position:absolute; top:44%; left:50%; width:min(760px, 90vw);
      transform:translate(-50%, -50%);
      text-align:center; z-index:3;
      font-family:Cinzel, serif; color:#f6e6c4; font-size:clamp(21px,2.8vw,32px);
      font-weight:700; line-height:1.32;
      text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
      display:none; padding:0 10px;
    }
    @media (min-width: 721px){
      .warn{
        width:min(680px, 72vw);
        padding:18px 28px;
        background:linear-gradient(180deg, rgba(34, 18, 6, .58), rgba(34, 18, 6, .36));
        border:1px solid rgba(246, 230, 196, .18);
        border-radius:18px;
        backdrop-filter:blur(2px);
        box-shadow:0 20px 40px rgba(0,0,0,.28);
      }
    }

    /* CHAMBER: zoomed OUT (fill both axes) */
    .chamber-bg{
      position:fixed; inset:0; z-index:1; display:none;
      background:
        image-set(
          url("/images/chamber.webp") type("image/webp"),
          url("/images/chamber.png") type("image/png")
        ) center / 100% 100% no-repeat;
    }

    /* WHITE LIGHT: no title/tooltip, slightly dimmer, smooth 4s growth */
    .white-light{
      position:fixed; left:50%; top:50%;
      transform:translate(-50%, -50%) scale(0.55);
      width:180px; height:180px; z-index:4; pointer-events:none; display:none;
      mix-blend-mode:screen; opacity:.8;
    }
    .white-light.grow{
      display:block;
      animation:ooLightGrow 4s cubic-bezier(.25,.1,.25,1) forwards;
    }
    @keyframes ooLightGrow{
      0%   { transform:translate(-50%, -50%) scale(0.55); opacity:.78; }
      60%  { transform:translate(-50%, -50%) scale(5.5); opacity:.85; }
      100% { transform:translate(-50%, -50%) scale(10.5); opacity:.9; }
    }

    .white-flash{ display:none !important; }
    @media (max-height:700px){
      .stage{align-items:flex-start;padding:10px}
      .card{padding:16px;max-height:none;overflow:visible}
      .emblem{width:120px; height:120px;}
      .subtitle{margin:4px 0 6px;}
    }
    @media (min-width: 721px){
      .stage{padding:14px 20px}
      .welcome-split{
        grid-template-columns:minmax(240px,320px) minmax(460px,640px);
        gap:28px;
        max-width:1020px;
      }
      .welcome-top{
        align-self:center;
        justify-self:end;
        margin:0;
        width:100%;
        max-width:320px;
        background:transparent;
        border:0;
        border-radius:0;
        padding:0 6px 0 0;
        box-shadow:none;
      }
      .welcome-inner{text-align:center}
      .brand{margin-bottom:8px}
      .emblem{width:84px;height:84px;box-shadow:0 10px 20px rgba(0,0,0,.08)}
      .title{line-height:.95}
      .title .l1,.title .l2{font-size:clamp(44px,4.1vw,58px)}
      .welcome-tier-label{margin-top:12px;font-size:clamp(24px,2.6vw,32px)}
      .card{max-width:640px;margin:0}
      label{margin:10px 0 6px}
      footer{margin-top:8px}
    }
  @media (max-width: 720px) {
    body{font-size:20px;line-height:1.65}
    .meta, small{font-size:16px}
    .oo-topbar{justify-content:flex-end;margin-bottom:0;padding:0 0 2px;border-bottom:0}
    .oo-menu-btn{width:50px;height:50px;min-height:50px;padding:0;font-size:20px}
    .fullgate-bg{
      background:
        radial-gradient(880px 520px at 50% -12%, rgba(255,226,180,.55), transparent 60%),
        radial-gradient(760px 520px at 18% 12%, rgba(214,178,136,.35), transparent 58%),
        radial-gradient(900px 620px at 85% 86%, rgba(182,140,92,.28), transparent 60%),
        linear-gradient(180deg, #f2e4cf 0%, #e6cfb1 45%, #d7b990 100%);
    }
    .stage{min-height:auto;padding:2px 10px 10px}
    .welcome-split{gap:4px}
    .welcome-top{padding:0;margin:0}
    .welcome-inner{text-align:center}
    .brand{display:flex;margin-bottom:0}
    .emblem{width:48px;height:48px;border-color:rgba(90,43,115,.42);background:rgba(244,240,248,.55)}
    .emblem img{filter:sepia(1) saturate(2.2) hue-rotate(238deg) brightness(.72)}
    .title{display:block;position:static;padding:0;margin:0 auto;line-height:1.0}
    .title .l1,.title .l2{font-size:clamp(42px,11vw,52px)}
    .title::before,.title::after{content:none}
    .card{
      margin-top:-2px;
      padding:14px 14px 16px;
      border-radius:16px;
      background:rgba(244,240,248,.85);
      border:1px solid rgba(90,43,115,.35);
      box-shadow:0 22px 60px rgba(0,0,0,.18);
    }
    .message-bar{background:rgba(244,240,248,.8)}
    .pw-toggle{background:rgba(244,240,248,.9)}
    .btn-secondary{
      background:transparent;
      border:2px solid #5a2b73;
      box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
    label{margin:8px 0 4px}
    input[type="email"], input[type="password"]{padding:12px 14px}
    .btn{margin-top:12px}
    .actions-row{margin-top:6px;font-size:16px}
    .help-tip-trigger{width:32px;height:32px;font-size:15px}
    footer{margin-top:6px;font-size:13px}

  }