<style>
  :root{
    --bg:#050608;
    --ink:#f4f5f7;
    --muted:#9aa0ab;
    --muted-2:#6b7280;
    --warm:#ff7a30;
    --cool:#7aa0ff;
    --hair:rgba(255,255,255,0.14);
    --hair-soft:rgba(255,255,255,0.08);
    --font-display:"Hanken Grotesk", system-ui, sans-serif;
    --font-mono:"JetBrains Mono", ui-monospace, monospace;
    --t1:var(--ink);
    --t2:var(--muted);
    --t3:var(--muted-2);
    --t4:rgba(255,255,255,0.20);
    --line:rgba(255,255,255,0.10);
    --line-soft:rgba(255,255,255,0.07);
    --panel:rgba(255,255,255,0.03);
    --panel-hover:rgba(255,255,255,0.06);
    --ok:#ff8a4d;      
    --warn:#ffcd6b;
    --danger:#ff7a6b;
    --user-bubble:rgba(255,255,255,0.06);
    --display:var(--font-display);
    --body:var(--font-display);
    --mono:var(--font-mono);
    --maxw:820px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{
    background:
      radial-gradient(120% 80% at 50% 118%, rgba(255,110,40,0.10), rgba(255,110,40,0) 55%),
      radial-gradient(90% 70% at 88% -10%, rgba(80,120,230,0.10), rgba(80,120,230,0) 55%),
      radial-gradient(140% 120% at 50% 50%, #0a0c11 0%, #050608 55%, #030305 100%);
    color:var(--ink);
    font-family:var(--font-display);
    font-size:16px;
    line-height:1.6;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  button, textarea, input{ font:inherit; color:inherit; }
  button{ appearance:none; background:none; border:0; cursor:pointer; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:rgba(255,255,255,0.18); }
  #bg-amb{
    position:fixed; inset:-20%; z-index:-1; pointer-events:none;
    background:
      radial-gradient(38% 38% at 30% 72%, rgba(255,120,50,0.11), rgba(255,120,50,0) 70%),
      radial-gradient(34% 34% at 72% 28%, rgba(90,130,255,0.10), rgba(90,130,255,0) 70%);
    filter:blur(10px);
    animation:ambDrift 28s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes ambDrift{
    0%{ transform:translate3d(-2%,-1%,0) scale(1.02); }
    50%{ transform:translate3d(2%,3%,0) scale(1.1); }
    100%{ transform:translate3d(-1%,1%,0) scale(1.04); }
  }
  #scene-wrap{
    position:fixed; inset:0; z-index:0;
    transition:opacity 1.1s ease, filter 1.1s ease;
  }
  #scene-wrap.dim{ opacity:0.18; filter:blur(6px); }
  #scene{ display:block; width:100%; height:100%; }

  .vignette{
    position:fixed; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  }
  .grain{
    position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 7s steps(6) infinite;
    will-change:transform;
  }
  @keyframes grain{
    0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)}
    40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)}
    80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
  }


  body.chatting #scene-wrap,
  body.chatting #bg-amb,
  body.chatting .grain,
  body.chatting .vignette{ display:none; }

 
  .ui{ position:fixed; inset:0; z-index:5; pointer-events:none; }
  .ui a, .ui button{ pointer-events:auto; }

  .hero{ opacity:0; transition:opacity .9s ease; }
  body.ready .hero{ opacity:1; }
  .hero.fade-out{ opacity:0 !important; transition:opacity .7s ease; pointer-events:none; }


  .nav{
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:30px clamp(20px,4vw,56px);
  }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); cursor:pointer; margin-left:clamp(0px,2vw,36px); }
  .brand-glyph{ display:inline-flex; width:22px; height:22px; color:var(--ink); }
  .brand-glyph svg{ width:100%; height:100%; display:block; }
  .brand-name{ font-weight:700; letter-spacing:0.14em; font-size:1.02rem; }
  .brand-tag{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; color:var(--muted-2); margin-top:2px; }

  .nav-right{ display:flex; align-items:center; gap:12px; }

  .pill{
    font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.1em;
    text-decoration:none; color:var(--ink); cursor:pointer;
    padding:11px 18px; border-radius:999px;
    background:rgba(255,255,255,0.04); border:1px solid var(--hair);
    transition:background .25s ease, border-color .25s ease, color .25s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .pill:hover{ background:var(--ink); color:#08090c; border-color:var(--ink); }


  .hero-copy{
    position:absolute; left:clamp(20px,4vw,56px); top:50%; transform:translateY(-50%);
    max-width:min(80ch,72vw);
  }
  .headline{
    font-weight:600; line-height:0.98; letter-spacing:-0.03em;
    font-size:clamp(1.8rem,4vw,3.5rem);
  }
  .hl-line{ display:block; }
  .hl-line.accent{ color:#fff; }
  .word{
    display:inline-block;
    opacity:0; filter:blur(16px); transform:translateY(0.32em);
    animation:wordIn 1.15s cubic-bezier(0.2,0.7,0.15,1) var(--d,0s) forwards;
  }
  .accent .word{ text-shadow:0 0 28px rgba(255,122,48,0.32); }
  @keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }

  .subtext{
    margin-top:26px; max-width:48ch;
    color:var(--muted); font-size:clamp(0.95rem,1.1vw,1.06rem);
    line-height:1.55; font-weight:400;
    opacity:0; animation:fadeUp 1s ease 0.6s forwards;
  }
  .subtext b{ color:var(--ink); font-weight:600; }
  @keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

  .cta{
    display:inline-flex; align-items:center; gap:14px;
    margin-top:30px; text-decoration:none;
    font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.16em;
    color:var(--ink); padding:0 0 8px 0; cursor:pointer;
    background:transparent; appearance:none; -webkit-appearance:none;
    border:0; border-bottom:1px solid var(--hair);
    opacity:0; animation:fadeUp 1s ease 0.82s forwards;
    transition:border-color .3s ease, gap .3s ease, opacity .3s ease;
  }
  .cta:hover:not(:disabled){ border-color:var(--ink); gap:20px; }
  .cta:disabled{ opacity:0.4; cursor:not-allowed; border-color:transparent; }
  .cta-arrow{ transition:transform .3s ease; }
  .cta:hover:not(:disabled) .cta-arrow{ transform:translateX(4px); }

 
  .hint{
    position:absolute; left:0; right:0; bottom:30px;
    display:flex; flex-direction:column; align-items:center;
    text-align:center; font-family:var(--font-mono);
    font-size:0.72rem; letter-spacing:0.14em; color:var(--muted);
    line-height:1.9; opacity:0; animation:fadeUp 1s ease 1.1s forwards;
  }
  .hint-row{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .hint-ic{ width:14px; height:14px; }
  .hint-ic.spark{ color:var(--warm); }

 
  #flash{
    position:fixed; inset:0; z-index:8; pointer-events:none; opacity:0;
    background:radial-gradient(54% 48% at 50% 48%, rgba(255,200,150,0.82), rgba(255,150,82,0.4) 46%, rgba(255,120,50,0) 80%);
  }


  .page2{
    position:fixed; inset:0; z-index:10; pointer-events:none;
    display:grid; place-items:center;
    opacity:0; transform:translateY(8px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .page2.show{ opacity:1; transform:none; pointer-events:auto; }
  .boot{ width:min(460px,86vw); text-align:center; }
  .boot-logo{ display:inline-flex; width:46px; height:46px; color:var(--ink); margin-bottom:24px;
    filter:drop-shadow(0 0 18px rgba(255,122,48,0.55)); animation:logoPulse 3.4s ease-in-out infinite; }
  .boot-logo svg{ width:100%; height:100%; }
  @keyframes logoPulse{ 0%,100%{filter:drop-shadow(0 0 14px rgba(255,122,48,0.4))} 50%{filter:drop-shadow(0 0 26px rgba(255,122,48,0.7))} }
  .boot-title{ font-family:var(--font-mono); letter-spacing:0.2em; font-size:0.78rem; color:var(--ink); margin-bottom:22px; }
  .boot-bar-wrap{ height:2px; background:var(--hair-soft); border-radius:2px; overflow:hidden; }
  .boot-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--warm), #ffd9a8); box-shadow:0 0 12px rgba(255,122,48,0.7); }
  .boot-meta{ display:flex; justify-content:space-between; gap:14px; margin-top:12px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--muted); }
  .boot-meta #boot-step{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:left; }
  .boot-meta #boot-pct{ flex-shrink:0; font-variant-numeric:tabular-nums; }
  .gpu-chip{ display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;
    padding:7px 14px; border-radius:999px; border:1px solid var(--hair); color:var(--muted); }
  .gpu-chip.ok{ color:#bfe6ff; border-color:rgba(122,160,255,0.5); }
  .gpu-chip.bad{ color:#ffb38a; border-color:rgba(255,122,48,0.45); }

  .boot-error{ display:none; margin-top:24px; text-align:left; }
  .boot-error.show{ display:block; }
  .boot-error-msg{
    margin:0 0 14px; white-space:pre-wrap; word-break:break-word;
    font-family:var(--font-mono); font-size:0.72rem; line-height:1.55; color:var(--muted);
    background:rgba(0,0,0,0.3); border:1px solid rgba(255,122,107,0.3); border-radius:10px; padding:12px 14px;
  }
  .boot-retry{ animation:none; opacity:1; }
  #chat{
    position:fixed; inset:0; z-index:15; display:flex; flex-direction:column;
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity .6s ease, transform .6s ease;
    background:
      radial-gradient(120% 80% at 50% 118%, rgba(255,110,40,0.10), rgba(255,110,40,0) 55%),
      radial-gradient(90% 70% at 88% -10%, rgba(80,120,230,0.10), rgba(80,120,230,0) 55%),
      radial-gradient(140% 120% at 50% 50%, #0a0c11 0%, #050608 55%, #030305 100%);
  }
  #chat.show{ opacity:1; pointer-events:auto; transform:none; }

  .chat-head{
    position:relative; flex:0 0 auto;
    border-bottom:1px solid var(--line-soft);
    background:rgba(5,6,8,0.72);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .chat-head-inner{
    margin:0 auto; max-width:var(--maxw); padding:16px 28px;
    display:flex; align-items:center; gap:16px;
  }
  .to-top{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:var(--ink); transition:opacity .2s ease; }
  .to-top:hover{ opacity:0.7; }
  .to-top .brand-glyph{ width:18px; height:18px; }
  .to-top .brand-name{ font-size:0.78rem; }

  .status{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; color:var(--t2); font-size:13px; }
  .status-dot{ width:7px; height:7px; border-radius:50%; background:var(--t4); flex-shrink:0; transition:background .3s ease, box-shadow .3s ease; }
  .status.loading .status-dot{ background:var(--warn); box-shadow:0 0 10px rgba(255,205,107,0.5); }
  .status.ready .status-dot{ background:var(--ok); box-shadow:0 0 10px rgba(255,138,77,0.55); }
  .status.busy .status-dot{ background:var(--ok); box-shadow:0 0 10px rgba(255,138,77,0.55); animation:statusPulse 1.1s ease-in-out infinite; }
  .status.error .status-dot{ background:var(--danger); box-shadow:0 0 10px rgba(255,122,107,0.5); }
  .status-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .status-text strong{ color:var(--t1); font-weight:600; }

  .chat-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .head-btn{
    display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
    font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--t2); border:1px solid var(--line); border-radius:100px;
    transition:border-color .2s ease, color .2s ease, opacity .2s ease;
  }
  .head-btn:hover:not(:disabled){ border-color:rgba(255,255,255,0.35); color:var(--t1); }
  .head-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .head-btn[hidden]{ display:none; }


  .thread-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  .thread{
    margin:0 auto; max-width:var(--maxw); min-height:100%;
    padding:40px 28px 24px; display:flex; flex-direction:column; gap:32px;
  }

  .welcome{ margin:auto 0; text-align:center; padding:4vh 0; animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both; }
  .welcome h2{ font-family:var(--display); font-size:clamp(30px,6vw,46px); font-weight:600; line-height:1.05; color:#fff; margin-bottom:14px; letter-spacing:-0.02em; }
  .welcome h2 .thin{ color:var(--t3); }
  .welcome p{ color:var(--t2); max-width:46ch; margin:0 auto 28px; font-weight:400; }
  .seeds{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
  .seed{
    padding:9px 16px; font-size:13.5px; color:var(--t2);
    background:var(--panel); border:1px solid var(--line); border-radius:100px;
    transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease, opacity .2s ease;
  }
  .seed:hover:not(:disabled){ border-color:rgba(255,255,255,0.3); color:var(--t1); background:var(--panel-hover); transform:translateY(-1px); }
  .seed:disabled{ opacity:0.4; cursor:not-allowed; }

  .msg{ display:flex; flex-direction:column; animation:rise 0.4s cubic-bezier(0.2,0.7,0.2,1) both; }
  .role{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; }
  .role::before{ content:""; width:5px; height:5px; border-radius:50%; }
  .msg.user{ align-items:flex-end; }
  .msg.user .role{ color:var(--t3); }
  .msg.user .role::before{ background:var(--t3); }
  .msg.assistant .role{ color:var(--ok); }
  .msg.assistant .role::before{ background:var(--ok); }

  .bubble{ overflow-wrap:anywhere; }
  .bubble.user{
    background:var(--user-bubble); border:1px solid var(--line);
    border-radius:16px 16px 4px 16px; padding:12px 17px; line-height:1.55;
    max-width:min(82%,600px); white-space:pre-wrap; color:var(--t1);
  }
  .bubble.assistant{ font-size:16px; line-height:1.72; color:var(--t1); max-width:100%; }
  .bubble.assistant > :first-child{ margin-top:0; }
  .bubble.assistant > :last-child{ margin-bottom:0; }
  .bubble.assistant p{ margin:0 0 0.9em; }
  .bubble.assistant strong{ color:#fff; font-weight:700; }
  .bubble.assistant em{ font-style:italic; }
  .bubble.assistant a{ color:#8ab4ff; text-decoration:underline; text-underline-offset:2px; }
  .bubble.assistant a:hover{ color:#aecbff; }
  .bubble.assistant h1, .bubble.assistant h2, .bubble.assistant h3,
  .bubble.assistant h4, .bubble.assistant h5, .bubble.assistant h6{
    color:#fff; font-weight:600; line-height:1.25; margin:1.3em 0 0.6em;
  }
  .bubble.assistant h1{ font-size:1.5em; }
  .bubble.assistant h2{ font-size:1.3em; }
  .bubble.assistant h3{ font-size:1.13em; }
  .bubble.assistant h4, .bubble.assistant h5, .bubble.assistant h6{ font-size:1em; }
  .bubble.assistant ul, .bubble.assistant ol{ margin:0 0 0.9em; padding-left:1.5em; }
  .bubble.assistant li{ margin:0.25em 0; }
  .bubble.assistant li::marker{ color:var(--t3); }
  .bubble.assistant blockquote{ margin:0 0 0.9em; padding:2px 0 2px 16px; border-left:2px solid var(--line); color:var(--t2); }
  .bubble.assistant hr{ border:0; border-top:1px solid var(--line); margin:1.3em 0; }
  .bubble.assistant code{ font-family:var(--mono); font-size:0.85em; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
  .bubble.assistant pre{ margin:0 0 0.9em; padding:14px 16px; background:#0a0a0c; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
  .bubble.assistant pre code{ background:none; border:0; padding:0; font-size:0.82em; line-height:1.6; }
  .bubble.assistant table{ border-collapse:collapse; margin:0 0 0.9em; font-size:0.92em; display:block; overflow-x:auto; }
  .bubble.assistant th, .bubble.assistant td{ border:1px solid var(--line); padding:6px 11px; text-align:left; }
  .bubble.assistant th{ background:var(--panel); color:var(--t1); font-weight:600; }
  .bubble.assistant pre::-webkit-scrollbar, .bubble.assistant table::-webkit-scrollbar{ height:8px; }
  .bubble.assistant pre::-webkit-scrollbar-thumb, .bubble.assistant table::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
  /* KaTeX math (rendered by the marked extension). Let wide display equations scroll instead of clipping. */
  .bubble.assistant .katex{ font-size:1.05em; }
  .bubble.assistant .katex-display{ margin:0.6em 0; overflow-x:auto; overflow-y:hidden; padding:2px 0; }

  .meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; color:var(--t3); margin-top:12px; }

  .thinking{ display:inline-flex; gap:5px; padding:4px 0; }
  .thinking span{ width:7px; height:7px; border-radius:50%; background:var(--ok); opacity:0.5; animation:bob 1.3s ease-in-out infinite; }
  .thinking span:nth-child(2){ animation-delay:0.18s; }
  .thinking span:nth-child(3){ animation-delay:0.36s; }

  .caret{ display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-0.16em; background:var(--ok); animation:blink 1s steps(2) infinite; }

  .composer-wrap{ flex:0 0 auto; background:linear-gradient(rgba(5,6,8,0), var(--bg) 30%); padding-top:8px; }
  .composer{ margin:0 auto; max-width:var(--maxw); padding:0 28px 22px; }
  .field{
    display:grid; grid-template-columns:1fr 44px; align-items:flex-end; gap:8px;
    background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:8px 8px 8px 18px;
    transition:border-color .2s ease, background .2s ease;
  }
  .field:focus-within{ border-color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.05); }
  textarea{ background:transparent; border:0; outline:none; resize:none; width:100%; min-height:42px; max-height:180px; padding:8px 0; color:var(--t1); }
  textarea::placeholder{ color:var(--t3); }

  .icon-button{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; transition:background .2s ease, opacity .2s ease, transform .1s ease; }
  .icon-button svg{ width:19px; height:19px; }
  .icon-button:active:not(:disabled){ transform:scale(0.94); }
  .icon-button:disabled{ opacity:0.3; cursor:not-allowed; }
  .send-button{ background:#fff; color:#000; }
  .send-button:hover:not(:disabled){ opacity:0.86; }
  .stop-button{ background:rgba(255,122,107,0.14); color:var(--danger); border:1px solid rgba(255,122,107,0.3); display:none; }
  .stop-button:hover:not(:disabled){ background:rgba(255,122,107,0.22); }

  .composer-meta{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin:10px 4px 0; min-height:22px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--t3);
  }

  .thread-scroll::-webkit-scrollbar{ width:10px; }
  .thread-scroll::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid var(--bg); border-radius:10px; }
  textarea:focus, textarea:focus-visible{ outline:none; }

  /* ============================================================
     KERNELS OVERLAY (real rendered WGSL viewer)
     ============================================================ */
  .kx{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:28px; }
  .kx[hidden]{ display:none; }
  .kx-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:kxFade 0.25s ease; }
  .kx-panel{
    position:relative; display:flex; flex-direction:column;
    width:min(1080px,100%); height:min(86vh,920px);
    background:#0a0a0c; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    box-shadow:0 40px 120px -30px rgba(0,0,0,0.9); animation:kxRise 0.3s cubic-bezier(0.2,0.7,0.2,1);
  }
  .kx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line-soft); }
  .kx-title h3{ font-family:var(--display); font-weight:600; font-size:24px; color:#fff; line-height:1; letter-spacing:-0.01em; }
  .kx-sub{ display:block; margin-top:7px; font-size:12.5px; color:var(--t3); }
  .kx-close{ display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:9px; color:var(--t2); border:1px solid var(--line); transition:color .2s ease, border-color .2s ease, background .2s ease; }
  .kx-close:hover{ color:var(--t1); border-color:rgba(255,255,255,0.35); background:var(--panel); }
  .kx-close svg{ width:15px; height:15px; }
  .kx-body{ flex:1; display:grid; grid-template-columns:236px 1fr; min-height:0; }
  .kx-side{ position:relative; min-width:0; min-height:0; border-right:1px solid var(--line-soft); }
  .kx-list{ height:100%; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; }
  .kx-side::after{ content:""; position:absolute; left:0; right:1px; bottom:0; height:54px; background:linear-gradient(transparent, #0a0a0c 88%); pointer-events:none; opacity:1; transition:opacity .25s ease; }
  .kx-side.at-end::after{ opacity:0; }
  .kx-item{ flex-shrink:0; text-align:left; padding:9px 12px; border-radius:8px; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s ease, color .15s ease; }
  .kx-item:hover{ background:var(--panel); color:var(--t1); }
  .kx-item.active{ background:var(--panel-hover); color:#fff; }
  .kx-view{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
  .kx-view-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line-soft); }
  .kx-name{ font-family:var(--mono); font-size:13px; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kx-view-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .kx-lines{ font-family:var(--mono); font-size:11px; color:var(--t4); }
  .kx-copy{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--t2); border:1px solid var(--line); border-radius:100px; padding:5px 13px; transition:color .2s ease, border-color .2s ease; }
  .kx-copy:hover{ color:var(--t1); border-color:rgba(255,255,255,0.35); }
  .kx-code{ flex:1; min-height:0; min-width:0; overflow:auto; margin:0; padding:18px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--t2); tab-size:2; }
  .kx-code code{ white-space:pre; }
  /* WGSL syntax highlight */
  .k-cm{ color:#5d6b6f; font-style:italic; }
  .k-kw{ color:#c792ea; }
  .k-ty{ color:#6fb3ff; }
  .k-at{ color:#ffb074; }
  .k-nu{ color:#7ee787; }

  .kx-source{ flex:1; min-height:0; display:flex; flex-direction:column; }
  .kx-source[hidden]{ display:none; }
  .kx-intro{ flex:1; min-height:0; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:34px 30px; }
  .kx-intro[hidden]{ display:none; }
  .kx-intro-inner{ max-width:540px; text-align:center; animation:kxIntroRise 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }

  .kx-spark{ position:relative; width:60px; height:60px; margin:0 auto 24px; }
  .kx-spark-ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, #ff7a6b, #ffcd6b, #64ffa0, #6fb3ff, #c792ea, #ff7a6b); animation:kxSpin 6s linear infinite; }
  .kx-spark-ring::after{ content:""; position:absolute; inset:-7px; border-radius:50%; background:inherit; filter:blur(13px); opacity:0.5; }
  .kx-spark-core{ position:absolute; inset:2px; border-radius:50%; background:#0a0a0c; }
  .kx-spark-icon{ position:absolute; inset:0; margin:auto; width:32px; height:32px; color:#fff; }

  .kx-intro-title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,32px); line-height:1.12; color:#fff; margin-bottom:16px; letter-spacing:-0.01em; }
  .kx-intro-lead{ font-size:14.5px; font-weight:400; line-height:1.7; color:var(--t2); margin:0 auto 26px; max-width:48ch; }
  .kx-points{ list-style:none; display:flex; flex-direction:column; gap:13px; text-align:left; margin-bottom:28px; }
  .kx-points li{ position:relative; padding-left:22px; font-size:13.5px; line-height:1.62; color:var(--t2); }
  .kx-points li::before{ content:""; position:absolute; left:2px; top:0.6em; width:6px; height:6px; border-radius:50%; }
  .kx-points li:nth-child(1)::before{ background:#ff7a6b; box-shadow:0 0 8px rgba(255,122,107,0.7); }
  .kx-points li:nth-child(2)::before{ background:#6fb3ff; box-shadow:0 0 8px rgba(111,179,255,0.7); }
  .kx-points li:nth-child(3)::before{ background:#64ffa0; box-shadow:0 0 8px rgba(100,255,160,0.7); }
  .kx-points b{ color:var(--t1); font-weight:600; }
  .kx-intro-hint{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--t3); }

  .kx-code::-webkit-scrollbar, .kx-list::-webkit-scrollbar{ width:10px; height:10px; }
  .kx-code::-webkit-scrollbar-thumb, .kx-list::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid #0a0a0c; border-radius:10px; }
  body.kx-locked{ overflow:hidden; }
  @keyframes kxFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes kxRise{ from{ opacity:0; transform:translateY(12px) scale(0.99); } to{ opacity:1; transform:none; } }
  @keyframes kxSpin{ to{ transform:rotate(360deg); } }
  @keyframes kxIntroRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

  /* ============================================================
     SHARED KEYFRAMES
     ============================================================ */
  @keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  @keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
  @keyframes bob{ 0%,60%,100%{ opacity:0.5; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-5px); } }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:760px){
    .hero-copy{ max-width:88vw; top:clamp(120px,20vh,180px); transform:none; }
    .subtext{ max-width:34ch; }
    .brand-tag{ display:none; }
    .pill#modelcard-btn{ display:none; }
    .hint{ bottom:22px; }
    .chat-head-inner{ padding:13px 18px; gap:12px; }
    .to-top .brand-name{ display:none; }
    .thread{ padding:28px 18px 20px; }
    .composer{ padding:0 18px 18px; }
    .bubble.user{ max-width:88%; }
    .head-btn{ padding:8px 12px; }
  }
  @media (max-width:420px){ .nav{ padding:22px; } }
  @media (max-width:760px){
    .kx{ padding:0; }
    .kx-panel{ width:100%; height:100%; border-radius:0; border:0; }
    .kx-body{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
    .kx-side{ border-right:0; border-bottom:1px solid var(--line-soft); }
    .kx-side::after{ display:none; }
    .kx-list{ flex-direction:row; height:auto; overflow-x:auto; overflow-y:hidden; }
    .kx-item{ flex-shrink:0; }
  }

  :focus-visible{ outline:2px solid var(--cool); outline-offset:3px; border-radius:2px; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .grain, #bg-amb{ animation:none; }
    .hero, .subtext, .cta, .hint{ opacity:1 !important; }
    .word{ opacity:1 !important; filter:none !important; transform:none !important; }
    .caret{ opacity:1; }
  }
</style>
