:root{
    --bone:#EEF1F6; --bone-dim:rgba(238,241,246,.6); --bone-faint:rgba(238,241,246,.32);
    --line:rgba(238,241,246,.13); --amber:#F0B25C; --amber-2:#F8C980; --amber-faint:rgba(240,178,92,.4);
    --ink:#05070E; --panel:#0A0D18;
    --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden}
  body{background:radial-gradient(130% 100% at 50% 44%, #0C1120 0%, #070A14 55%, #04060C 100%);color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased;user-select:none;touch-action:none;letter-spacing:.01em}
  ::selection{background:var(--amber);color:var(--ink)}
  #scene{position:fixed;inset:0;z-index:1}
  .vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 46%,transparent 58%,rgba(4,6,12,.62) 100%)}

  .top{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,48px);pointer-events:none}
  .brand{display:flex;align-items:center;gap:12px;pointer-events:auto;text-decoration:none;color:var(--bone)}
  .brand svg{width:23px;height:23px}
  .brand .ring{color:var(--bone)} .brand .node{color:var(--amber)}
  .brand .orbit{transform-origin:23px 23px;animation:spin 11s linear infinite}
  .brand .wm{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.3em}
  @keyframes spin{to{transform:rotate(360deg)}}
  .menuToggle{pointer-events:auto;display:none;background:rgba(9,12,22,.5);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:8px;color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:10px 14px;cursor:pointer;text-transform:uppercase}

  /* LEFT vertical nav (chat panel on right never covers it) */
  .sidenav{position:fixed;z-index:10;top:76px;left:clamp(20px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:auto}
  .sidenav .tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);background:none;border:none;cursor:pointer;padding:7px 2px;transition:.3s;text-align:left;position:relative}
  .sidenav .tab:hover{color:var(--bone)}
  .sidenav .tab.on{color:var(--bone)}
  .sidenav .tab.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px 2px var(--amber-faint)}
  .sidenav .tab.cta{margin-top:12px;color:var(--ink);background:var(--amber);padding:9px 16px;border-radius:100px;letter-spacing:.14em}
  .sidenav .tab.cta:hover{background:var(--amber-2)}
  .sidenav .tab.cta.on::before{display:none}

  #labels{position:fixed;inset:0;z-index:6;pointer-events:none}
  .lab{position:absolute;text-align:center;transition:opacity .5s;will-change:transform}
  .lab .t{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);white-space:nowrap;transition:color .4s;text-shadow:0 1px 4px rgba(4,6,12,.95),0 0 12px rgba(4,6,12,.85)}
  .lab .pip{width:4px;height:4px;border-radius:50%;background:var(--bone);margin:0 auto 9px;transition:.4s;box-shadow:0 0 6px rgba(4,6,12,.7)}
  .lab.dim{opacity:.42}
  .lab.hot .t{color:var(--amber)} .lab.hot .pip{background:var(--amber);box-shadow:0 0 12px 3px var(--amber-faint)}

  .panel{position:fixed;z-index:15;top:0;right:0;height:100%;width:min(440px,90vw);overflow-y:auto;touch-action:pan-y;
    background:linear-gradient(90deg,rgba(5,7,14,0),rgba(9,12,22,.96) 18%);border-left:1px solid var(--line);backdrop-filter:blur(18px);
    padding:clamp(90px,13vh,128px) clamp(30px,3.4vw,50px) 44px;transform:translateX(100%);transition:transform .7s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
  .panel.open{transform:none}
  .panel .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--amber);text-transform:uppercase;margin-bottom:20px}
  .panel h2{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.06;letter-spacing:-.015em;margin-bottom:26px}
  .panel p{color:var(--bone-dim);font-size:1.02rem;line-height:1.7;margin-bottom:18px;font-weight:300}
  .panel p em{font-style:normal;color:var(--bone);font-weight:400}
  .panel .metric{display:flex;gap:20px;margin:6px 0 20px;flex-wrap:wrap}
  .panel .metric .m b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:600;color:var(--amber);line-height:1}
  .panel .metric .m span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint)}
  .panel .close{position:absolute;top:30px;right:32px;background:none;border:none;color:var(--bone-faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;cursor:pointer;text-transform:uppercase;transition:.3s}
  .panel .close:hover{color:var(--bone)}
  .panel .nav{margin-top:auto;display:flex;gap:14px;padding-top:30px;border-top:1px solid var(--line)}
  .pnav{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);background:transparent;border:1px solid var(--line);padding:13px;cursor:pointer;transition:.3s}
  .pnav:hover{color:var(--bone);border-color:var(--bone-dim)}

  .chat{position:fixed;z-index:20;top:0;right:0;height:100%;width:min(460px,96vw);display:flex;flex-direction:column;
    background:linear-gradient(90deg,rgba(5,7,14,.35),rgba(9,12,22,.98) 12%);border-left:1px solid var(--line);backdrop-filter:blur(22px);
    transform:translateX(100%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .chat.open{transform:none}
  .chat header{display:flex;align-items:center;justify-content:space-between;padding:26px 30px 18px}
  .chat header .ti{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim)}
  .chat header .ti b{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 2px var(--amber-faint);animation:pd 2.6s infinite}
  @keyframes pd{0%,100%{opacity:1}50%{opacity:.3}}
  .chat header .x{background:none;border:none;color:var(--bone-faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;cursor:pointer;text-transform:uppercase;transition:.3s}
  .chat header .x:hover{color:var(--bone)}
  .ficha{display:flex;flex-wrap:wrap;gap:7px;padding:4px 30px 14px}.ficha:empty{display:none}
  .ficha .chip{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-faint)}
  .ficha .chip b{color:var(--bone-dim);font-weight:400}
  .log{flex:1;overflow-y:auto;touch-action:pan-y;padding:14px 30px;display:flex;flex-direction:column;gap:22px}
  .log::-webkit-scrollbar{width:5px}.log::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .msg{max-width:92%;font-size:14.5px;line-height:1.62;white-space:pre-wrap}
  .msg.x{align-self:flex-start;color:var(--bone);padding-left:16px;border-left:1px solid var(--amber-faint);font-weight:300}
  .msg.u{align-self:flex-end;color:var(--bone-dim);text-align:right}
  .typing{align-self:flex-start;display:flex;gap:5px;padding-left:16px;border-left:1px solid var(--amber-faint)}
  .typing i{width:5px;height:5px;border-radius:50%;background:var(--amber);animation:tp 1.3s infinite}
  .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
  @keyframes tp{0%,60%,100%{opacity:.25}30%{opacity:1}}
  .quickline{padding:0 30px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--bone-faint)}
  .quickline a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-faint);transition:.3s}
  .quickline a:hover{color:var(--amber-2);border-color:var(--amber-2)}
  .cierre{padding:18px 30px 6px}
  .cierre .lb{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:12px}
  .cbtn{width:100%;display:inline-block;text-align:center;text-decoration:none;box-sizing:border-box;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--amber);border:none;padding:14px;cursor:pointer;border-radius:5px;transition:.3s}
  .cbtn:hover{background:var(--amber-2)} .cbtn:disabled{opacity:.35;cursor:default}
  .cierre .sum{border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:14px;font-size:12.5px;line-height:1.85;color:var(--bone-dim);font-family:var(--mono)}
  .cierre .sum b{color:var(--bone);font-weight:500}
  .cierre .row{display:flex;gap:10px}.cierre .row .cbtn{flex:1}
  .cierre .ghost{background:transparent;border:1px solid var(--line);color:var(--bone-dim)}
  .cierre .ghost:hover{border-color:var(--bone);color:var(--bone);background:transparent}
  .chatinput{display:flex;padding:16px 24px 22px;align-items:center}
  .chatinput input{flex:1;background:transparent;border:none;border-bottom:1px solid var(--line);outline:none;color:var(--bone);font-family:var(--body);font-size:14.5px;padding:12px 4px;transition:.3s}
  .chatinput input::placeholder{color:var(--bone-faint)}.chatinput input:focus{border-color:var(--amber-faint)}
  .chatinput button{background:none;border:none;color:var(--amber);font-size:18px;cursor:pointer;padding:0 8px 0 14px;transition:.3s}
  .chatinput button:hover{color:var(--amber-2)}.chatinput button:disabled{opacity:.35;cursor:default}

  .dock{position:fixed;z-index:12;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,90vw);transition:opacity .5s}
  .dock.hide{opacity:0;pointer-events:none}
  .console{display:flex;width:100%;pointer-events:auto;border:1px solid var(--line);transition:.4s;background:rgba(9,12,22,.55);backdrop-filter:blur(12px);border-radius:8px;padding:0 8px}
  .console:focus-within{border-color:var(--amber-faint)}
  .console input{flex:1;background:transparent;border:none;outline:none;color:var(--bone);font-family:var(--body);font-size:15px;padding:16px 8px}
  .console input::placeholder{color:var(--bone-faint)}
  .console button{background:none;border:none;color:var(--amber);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:0 10px;transition:.3s}
  .console button:hover{color:var(--amber-2)}
  .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);pointer-events:auto;cursor:pointer;transition:.3s}
  .cap:hover{color:var(--bone-dim)}

  #intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,8vw,120px);transition:opacity 1.1s,visibility 1.1s;background:radial-gradient(130% 100% at 50% 46%, #0D1324 0%, #070A14 55%, #04060C 100%)}
  #intro.gone{opacity:0;visibility:hidden}
  #intro .mk{display:flex;align-items:center;gap:12px;margin-bottom:44px}
  #intro .mk svg{width:26px;height:26px}
  #intro .mk .ring{color:var(--bone)}#intro .mk .node{color:var(--amber)}#intro .mk .orbit{transform-origin:23px 23px;animation:spin 11s linear infinite}
  #intro .eb{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:26px}
  #intro h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1.03;letter-spacing:-.025em;max-width:15ch;margin-bottom:30px}
  #intro h1 em{font-style:normal;color:var(--bone-faint)}
  #intro p{color:var(--bone-dim);max-width:46ch;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;font-weight:300;margin-bottom:44px}
  #intro .enter{align-self:flex-start;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:var(--amber);border:none;padding:19px 54px;cursor:pointer;box-shadow:0 14px 40px -12px rgba(240,178,92,.55);transition:transform .35s,box-shadow .35s,background .3s}
  #intro .enter:hover{transform:translateY(-2px);background:var(--amber-2);box-shadow:0 18px 48px -12px rgba(240,178,92,.7)}
  @media (max-width:820px){ .sidenav{display:none;top:70px;background:rgba(9,12,22,.85);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:12px;padding:14px 18px} .sidenav.show{display:flex} .menuToggle{display:block} }
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important} }