/* one scale for the whole page: label, small, body, lead, then the two headings */
  :root{--t-label:.78rem;--t-small:.88rem;--t-body:1rem;--t-lead:1.12rem}
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:#05070f;color:#e9ecf5;line-height:1.62;min-height:100vh;overflow-x:hidden;
    font-size:var(--t-body);
    font-family:-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
  a{text-decoration:none;color:inherit}

  /* drifting aurora behind everything */
  .aurora{position:fixed;inset:-25vh -25vw;z-index:0;filter:blur(90px);opacity:.55;pointer-events:none}
  .aurora i{position:absolute;display:block;border-radius:50%}
  .a1{width:52vw;height:52vw;left:-6vw;top:-6vh;background:#0ea5a4;animation:drift1 26s ease-in-out infinite}
  .a2{width:46vw;height:46vw;right:-4vw;top:6vh;background:#6d28d9;animation:drift2 31s ease-in-out infinite}
  .a3{width:44vw;height:44vw;left:26vw;bottom:-14vh;background:#0369a1;animation:drift3 37s ease-in-out infinite}
  @keyframes drift1{50%{transform:translate3d(9vw,7vh,0) scale(1.14)}}
  @keyframes drift2{50%{transform:translate3d(-11vw,10vh,0) scale(.88)}}
  @keyframes drift3{50%{transform:translate3d(6vw,-9vh,0) scale(1.1)}}
  @media(prefers-reduced-motion:reduce){.aurora i{animation:none}}

  .page{position:relative;z-index:1}
  .wrap{width:min(1720px,100%);margin:0 auto;padding:0 clamp(20px,3.4vw,56px)}
  nav{height:70px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.09);
    background:rgba(5,7,15,.6);backdrop-filter:blur(14px);position:sticky;top:0;z-index:9}
  nav .wrap{display:flex;align-items:center;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:11px;font-weight:600}
  .mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(135deg,#5eead4,#818cf8);color:#08111f;font-weight:800;font-size:.82rem}
  .nav-links a{color:#c3cadc;font-size:var(--t-small);padding:8px 14px;border-radius:10px}
  .nav-links a:hover{color:#e9ecf5;background:rgba(255,255,255,.07)}

  /* the hero is a short title plus one small full-width paragraph, nothing taller */
  header.hero{padding:44px 0 22px;text-align:center}
  h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.8rem,2.9vw,2.6rem);line-height:1.2}
  h1 em{font-style:italic;background:linear-gradient(100deg,#5eead4,#818cf8 58%,#f0abfc);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  header.hero p{color:#b4bdd2;margin:18px auto 0;font-size:var(--t-lead);line-height:1.62}

  /* .stage and .how sit on the .wrap element itself, so they must not use the
     padding shorthand -- it would wipe out the side padding .wrap sets */
  .stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,2.2vw,36px);
    padding-top:26px;padding-bottom:60px;align-items:start}
  .card{border-radius:18px;border:1px solid rgba(255,255,255,.11);background:rgba(12,16,30,.62);
    backdrop-filter:blur(12px);overflow:hidden}
  .card h3{font-size:var(--t-label);letter-spacing:1.6px;text-transform:uppercase;color:#98a1bb;
    padding:17px 22px 0;font-weight:600}

  video{width:100%;display:block;background:#000}
  .clips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px}
  .clip{font-size:var(--t-small);padding:7px 14px;border-radius:999px;cursor:pointer;color:#eef1f8;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
  .clip.on{color:#05070f;border-color:transparent;background:linear-gradient(135deg,#5eead4,#818cf8);font-weight:600}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-label);color:#9fe8d8;
    padding:5px 12px;border-radius:999px;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.28)}
  .pill.warm{color:#ffd7a8;background:rgba(255,214,168,.09);border-color:rgba(255,214,168,.28)}
  .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.1s infinite}
  @keyframes blink{50%{opacity:.25}}
  .status{padding:0 20px 16px}

  details.notes{border-top:1px solid rgba(255,255,255,.09)}
  details.notes summary{cursor:pointer;padding:15px 22px;font-size:var(--t-small);color:#98a1bb;list-style:none}
  details.notes summary::-webkit-details-marker{display:none}
  details.notes summary:hover{color:#e9ecf5}
  pre.scene{white-space:pre-wrap;font-family:Consolas,monospace;font-size:.85rem;line-height:1.7;
    color:#b6bed4;max-height:360px;overflow:auto;padding:0 22px 20px}

  .chat{display:flex;flex-direction:column;min-height:min(58vh,540px)}
  .thread{flex:1 1 auto;overflow-y:auto;max-height:min(58vh,560px);padding:20px 22px}
  .msg{margin-bottom:16px;display:flex;gap:12px}
  .av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
    font-size:.72rem;font-weight:700;background:rgba(255,255,255,.08);color:#98a1bb}
  .msg.bot .av{background:linear-gradient(135deg,#5eead4,#818cf8);color:#08111f}
  .bubble{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    border-radius:14px;padding:13px 16px;font-size:var(--t-body);line-height:1.6;white-space:pre-wrap}
  .flag{display:block;margin-top:10px;font-size:var(--t-label);color:#ffd7a8;line-height:1.5}
  .fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:11px;
    padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
  .fb span.lbl{font-size:var(--t-label);color:#7f8aa6}
  .fb b{font-size:var(--t-label);font-weight:600;color:#eef1f8;cursor:pointer;padding:5px 12px;border-radius:9px;
    border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
  .fb b:hover{border-color:rgba(94,234,212,.5);color:#e9ecf5}
  .fb b.on{color:#05070f;border-color:transparent;background:linear-gradient(135deg,#5eead4,#818cf8)}
  .fb input{flex:1 1 200px;padding:8px 12px;font-size:var(--t-small);border-radius:9px}
  .fb .thanks{font-size:var(--t-label);color:#9fe8d8}
  .asks{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 16px}
  .ask{font-size:var(--t-small);padding:8px 13px;border-radius:11px;cursor:pointer;color:#eef1f8;
    border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
  .ask:hover{border-color:rgba(94,234,212,.5);color:#e9ecf5}
  .composer{border-top:1px solid rgba(255,255,255,.09);padding:15px 22px;display:flex;gap:10px}
  input,textarea{flex:1;padding:12px 15px;border-radius:12px;background:rgba(0,0,0,.4);
    border:1px solid rgba(255,255,255,.1);color:#e9ecf5;font-size:var(--t-body);font-family:inherit}
  input:focus,textarea:focus{outline:0;border-color:rgba(94,234,212,.55)}
  ::placeholder{color:#98a1bb;opacity:1}
  button{padding:12px 22px;border:0;border-radius:12px;font-weight:600;cursor:pointer;
    background:linear-gradient(135deg,#5eead4,#818cf8);color:#05070f;font-family:inherit;font-size:var(--t-body)}
  /* half-transparent gradient plus dark label was unreadable while a question was in flight */
  button[disabled]{cursor:default;background:rgba(255,255,255,.14);color:#eef1f8}

  .how{padding-bottom:70px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
  .step{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(12,16,30,.55);padding:24px}
  .step b{display:block;font-size:var(--t-body);margin:9px 0 8px}
  .step span{font-size:var(--t-body);color:#b4bdd2;line-height:1.62}
  .step i{font-style:normal;font-size:var(--t-label);letter-spacing:1.8px;color:#5eead4}
  h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.24}

  .cta{border-radius:18px;border:1px solid rgba(255,255,255,.11);background:rgba(12,16,30,.62);
    padding:36px 30px;text-align:center;margin-bottom:70px}
  .cta p{color:#b4bdd2;margin:13px auto 21px;font-size:var(--t-body);line-height:1.66}
  .cta a{display:inline-block;padding:12px 26px;border-radius:12px;font-weight:600;
    font-size:var(--t-body);background:linear-gradient(135deg,#5eead4,#818cf8);color:#05070f}

  footer{border-top:1px solid rgba(255,255,255,.09);padding:22px 0 30px}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
    font-size:var(--t-label);color:#7f8aa6}
  footer a{color:#7f8aa6;padding:5px 10px;border-radius:9px}
  footer a:hover{color:#e9ecf5;background:rgba(255,255,255,.07)}

  @media(min-width:1500px){:root{--t-small:.92rem;--t-body:1.05rem;--t-lead:1.18rem}}
  @media(max-width:900px){.stage{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
    header.hero{padding:48px 0 24px}}