/* tab_ — catálogo digital / B&W / Roboto
   Optimizado: sin GSAP, sin animaciones continuas pesadas,
   blur reducido, composición por transform y previews lazy. */

:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --panel-2:#111;
  --white:#fff;
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.52);
  --dim:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.24);
  --ease:cubic-bezier(.2,.8,.2,1);
  --radius:14px;
  --font:"Roboto",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--white);font-family:var(--font)}
body{overflow:hidden}
button,a,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:3px}
.app{position:relative;width:100%;height:100dvh;min-height:100svh;overflow:hidden;isolation:isolate;background:#050505}

/* ATMÓSFERA */
.ambient,.ambient-grid,.ambient-vignette{position:absolute;inset:0;pointer-events:none}
.ambient{z-index:0;overflow:hidden;background:
  radial-gradient(circle at 50% 48%,rgba(255,255,255,.045),transparent 30%),
  radial-gradient(circle at 10% 90%,rgba(255,255,255,.035),transparent 30%),
  #050505}
.ambient-grid{inset:-15%;opacity:.13;background-image:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:70px 70px;transform:perspective(700px) rotateX(62deg) translateY(18%);transform-origin:center bottom}
.ambient-glow{position:absolute;width:55vw;height:55vw;border-radius:50%;filter:blur(70px);opacity:.08}
.ambient-glow-a{left:-25vw;bottom:-32vw;background:#fff}
.ambient-glow-b{right:-28vw;top:-30vw;background:#aaa}
.ambient-vignette{background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.65) 100%)}

/* HEADER */
.topbar{position:absolute;inset:0 0 auto;height:78px;z-index:500;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 clamp(18px,4vw,58px)}
.brand{display:inline-flex;flex-direction:column;gap:5px;width:max-content;color:#fff;text-decoration:none}
.brand-logo{display:block;width:86px;height:44px;object-fit:contain;object-position:left center}
.brand-meta{font-size:7px;font-weight:500;letter-spacing:.15em;color:var(--muted)}
.network-status{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.58);color:var(--muted);font-size:8px;letter-spacing:.08em}
.status-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.separator{color:var(--dim)}
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.top-button,.menu-button{border:1px solid var(--line);background:rgba(0,0,0,.52);border-radius:999px;cursor:pointer;transition:.22s var(--ease)}
.top-button{padding:9px 13px;color:var(--muted);font-size:8px;font-weight:500;letter-spacing:.08em}
.top-button:hover,.menu-button:hover{border-color:var(--line-strong);color:#fff;background:#111}
.menu-button{width:40px;height:40px;display:grid;place-content:center;gap:4px}
.menu-button span{display:block;width:15px;height:1px;background:#fff}

/* MANIFIESTO */
.manifesto{position:absolute;left:clamp(20px,5vw,72px);top:18%;z-index:120;width:min(390px,31vw);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
.eyebrow{color:#fff;font-size:8px;font-weight:700;letter-spacing:.18em}
.manifesto h1{margin:16px 0;font-size:clamp(31px,3.5vw,55px);line-height:.95;letter-spacing:-.055em;font-weight:300}
.manifesto h1 strong{display:block;font-weight:900}
.cursor{display:inline-block;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,48%{opacity:1}49%,78%{opacity:.18}79%,100%{opacity:1}}
.manifesto p{max-width:320px;margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.explore-button{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;font-size:10px;font-weight:700}
.explore-line{width:25px;height:1px;background:#fff;transition:width .25s var(--ease)}
.explore-button:hover .explore-line{width:42px}
.arrow{font-size:17px;transition:transform .25s var(--ease)}
.explore-button:hover .arrow{transform:translate(4px,-3px)}

/* ESCENA */
.scene-shell{position:absolute;inset:0;z-index:50;perspective:1200px;overflow:hidden}
.scene{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.scene-grid{position:absolute;inset:-20%;opacity:0;background:
  repeating-radial-gradient(ellipse at center,rgba(255,255,255,.08) 0 1px,transparent 1px 55px);
mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);transition:opacity .55s}
.app.is-open .scene-grid{opacity:.45}
.scene-halo{position:absolute;left:50%;top:52%;width:min(62vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.065),transparent 62%);filter:blur(20px);pointer-events:none}
.connections{position:absolute;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;opacity:0;transition:opacity .45s}
.app.is-open .connections{opacity:1}
.connection-path{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1}
.connection-path.secondary{stroke:rgba(255,255,255,.08);stroke-width:.6;stroke-dasharray:2 10}
.connection-dot{fill:#fff}
.orbit{position:absolute;left:50%;top:52%;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .5s}
.app.is-open .orbit{opacity:1}
.orbit-a{width:420px;height:420px}
.orbit-b{width:700px;height:700px;border-color:rgba(255,255,255,.045)}

/* CORE */
.core{position:absolute;left:55%;top:52%;width:248px;height:248px;z-index:250;padding:0;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none;transform:translate(-50%,-50%)}
.core:active{cursor:grabbing}
.core-ring{position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%;animation:corePulse 3s ease-in-out infinite}
.core-ring-a{inset:-10px}
.core-ring-b{inset:-31px;opacity:.45;animation-delay:.35s}
@keyframes corePulse{50%{transform:scale(1.035);opacity:.72}}
.core-face{position:absolute;inset:20px;display:grid;place-items:center;align-content:center;gap:9px;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:
  radial-gradient(circle at 50% 38%,#262626,#0a0a0a 62%,#020202 100%);
box-shadow:0 0 50px rgba(255,255,255,.08),inset 0 0 55px rgba(255,255,255,.05);transition:transform .3s var(--ease)}
.core:hover .core-face{transform:scale(1.025)}
.core-face::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49%,rgba(255,255,255,.025) 50%,transparent 51%);background-size:100% 10px;opacity:.35;pointer-events:none}
.core-logo-image{position:relative;z-index:2;width:88px;height:88px;object-fit:contain;filter:invert(1)}
.core-sub{position:relative;z-index:2;color:rgba(255,255,255,.58);font-size:7px;font-weight:700;letter-spacing:.23em}
.core-signal{position:relative;z-index:2;display:flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;font-size:7px;font-weight:500;letter-spacing:.1em}
.core-signal i{width:5px;height:5px;border-radius:50%;background:#fff}
.app.is-open .core{width:198px;height:198px}
.app.is-open .core-face{inset:16px}
.scene-hint{position:absolute;left:55%;top:calc(52% + 150px);z-index:260;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:var(--muted);font-size:8px;font-weight:500;letter-spacing:.08em;white-space:nowrap;transition:opacity .35s}
.hint-dot{width:5px;height:5px;border-radius:50%;background:#fff}
.app:not(.is-open) .scene-hint{opacity:0}

/* NODOS */
.projects{position:absolute;inset:0;z-index:80;pointer-events:none}
.project{position:absolute;left:var(--x);top:var(--y);z-index:var(--z,100);transform:translate(-50%,-50%) translateZ(var(--depth,0px));opacity:0;pointer-events:none;transition:opacity .35s var(--ease),filter .2s,transform .2s var(--ease)}
.app.is-open .project{opacity:1;pointer-events:auto}
.project:hover{z-index:700;transform:translate(-50%,-50%) translateZ(24px) scale(1.025)}
.app.has-active .project:not(.is-active){opacity:.16;filter:grayscale(1)}
.app.has-active .project.is-active{opacity:1;filter:none;z-index:900}
.node{position:relative;min-width:174px;max-width:235px;padding:11px 13px 10px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(0,0,0,.9));color:#fff;box-shadow:0 15px 35px rgba(0,0,0,.3);cursor:grab;touch-action:none;user-select:none;outline:0;text-align:left}
.node:active{cursor:grabbing}
.node::after{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.035);border-radius:10px;pointer-events:none}
.node-main{display:flex;align-items:center;gap:7px}
.node-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.6)}
.node-code{font-size:7px;color:var(--muted);font-weight:700}
.node-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700}
.node-category,.node-url{display:block;margin-left:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:7px}
.node-category{margin-top:7px}
.node-url{margin-top:3px;color:var(--dim)}
.node-signal{position:absolute;right:10px;top:11px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.65}

/* VENTANAS */
.window-layer{position:absolute;inset:0;z-index:2000;pointer-events:none}
.project-window{--window-x:50vw;--window-y:50vh;position:fixed;left:var(--window-x);top:var(--window-y);width:min(700px,calc(100vw - 30px));max-height:calc(100dvh - 30px);padding:9px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:rgba(8,8,8,.97);box-shadow:0 30px 100px rgba(0,0,0,.78),0 0 40px rgba(255,255,255,.035);transform:translate(-50%,-50%) scale(.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .2s;overflow:hidden;will-change:left,top,width}
.project-window.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.project-window.is-maximized{left:50%!important;top:50%!important;width:min(94vw,1220px)!important;height:min(90dvh,850px)!important;max-height:none;transform:translate(-50%,-50%)}
.project-window.is-dragging,.project-window.is-resizing{transition:none}
.window-head{height:38px;display:flex;align-items:center;gap:8px;cursor:grab;touch-action:none}
.window-head:active{cursor:grabbing}
.window-light{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff}
.window-code{font-size:8px;font-weight:700;color:var(--muted)}
.window-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
.window-category{color:var(--dim);font-size:7px;letter-spacing:.08em}
.window-actions{display:flex;align-items:center;gap:2px}
.window-actions button{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.window-actions button:hover{background:rgba(255,255,255,.09);color:#fff}
.window-body{overflow:auto;max-height:calc(100dvh - 98px);scrollbar-width:thin;scrollbar-color:#555 transparent}
.project-window.is-maximized .window-body{max-height:calc(90dvh - 86px)}
.preview-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#050505}
.project-window.is-maximized .preview-frame{height:min(64vh,600px);aspect-ratio:auto}
.preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(circle at 50% 42%,rgba(255,255,255,.08),transparent 36%),#050505}
.preview-placeholder-inner{text-align:center;padding:25px}
.preview-placeholder strong{display:block;font-size:18px;font-weight:900}
.preview-placeholder span{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.6}
.preview-loader{width:30px;height:30px;margin:0 auto 13px;border:1px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.preview-frame iframe{position:relative;z-index:2;width:100%;height:100%;display:block;border:0;background:#fff;opacity:0;transition:opacity .25s}
.preview-frame.is-live iframe{opacity:1}
.preview-status{position:absolute;left:10px;bottom:9px;z-index:5;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(0,0,0,.72);color:var(--muted);font-size:6px;letter-spacing:.06em}
.preview-status-dot{width:5px;height:5px;border-radius:50%;background:#fff}
.preview-frame.is-live .preview-status{color:#fff}
.preview-fallback{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(5,5,5,.96);opacity:0;visibility:hidden;transition:.2s}
.preview-fallback.is-visible{opacity:1;visibility:visible}
.preview-fallback-inner{max-width:430px}
.preview-fallback strong{display:block;font-size:22px;font-weight:900}
.preview-fallback p{margin:9px 0 15px;color:var(--muted);font-size:10px;line-height:1.6}
.window-info{display:grid;grid-template-columns:1fr auto;gap:18px;padding:12px 2px 2px}
.window-description{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.window-url{color:#fff;font-size:8px;text-align:right}
.window-tools{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.tag{padding:6px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:8px}
.open-site{margin-left:auto;padding:8px 12px;border:1px solid var(--line-strong);border-radius:999px;background:#0d0d0d;color:#fff;text-decoration:none;font-size:8px;font-weight:700;transition:.2s}
.open-site:hover{background:#fff;color:#000}
.notes-box{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.notes-label{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--dim);font-size:7px;letter-spacing:.08em}
.project-note{width:100%;min-height:55px;resize:vertical;border:1px solid var(--line);border-radius:8px;outline:0;background:#070707;color:#fff;padding:9px;font-size:9px;line-height:1.5}
.project-note:focus{border-color:#fff}
.resize-handle{position:absolute;z-index:10}
.resize-n,.resize-s{left:20px;right:20px;height:10px;cursor:ns-resize}
.resize-n{top:-3px}.resize-s{bottom:-3px}
.resize-e,.resize-w{top:20px;bottom:20px;width:10px;cursor:ew-resize}
.resize-e{right:-3px}.resize-w{left:-3px}
.resize-ne,.resize-nw,.resize-se,.resize-sw{width:17px;height:17px}
.resize-ne{right:-3px;top:-3px;cursor:nesw-resize}.resize-nw{left:-3px;top:-3px;cursor:nwse-resize}.resize-se{right:-3px;bottom:-3px;cursor:nwse-resize}.resize-sw{left:-3px;bottom:-3px;cursor:nesw-resize}

/* DOCK */
.window-dock{position:fixed;left:14px;right:14px;bottom:14px;z-index:2300;display:flex;gap:7px;align-items:flex-end;overflow-x:auto;padding:2px;pointer-events:none;scrollbar-width:none}
.window-dock::-webkit-scrollbar{display:none}
.dock-tab{min-width:165px;max-width:230px;height:38px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:9px;background:rgba(8,8,8,.96);color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.55);cursor:pointer;pointer-events:auto}
.dock-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#fff}
.dock-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:9px;font-weight:700}
.dock-open{color:var(--muted);font-size:13px}

/* INFO / MENU */
.info-window{position:fixed;left:50%;top:50%;z-index:2500;width:min(720px,calc(100vw - 28px));max-height:min(78dvh,700px);overflow:hidden;border:1px solid var(--line-strong);border-radius:14px;background:rgba(8,8,8,.98);box-shadow:0 30px 110px rgba(0,0,0,.75);transform:translate(-50%,-50%) scale(.95);opacity:0;visibility:hidden;pointer-events:none;transition:.22s var(--ease)}
.info-window.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.info-head{height:43px;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border-bottom:1px solid var(--line);cursor:grab;font-size:10px;font-weight:700}
.info-content{max-height:calc(min(78dvh,700px) - 43px);overflow:auto;padding:25px}
.info-content h2{margin:0 0 12px;font-size:clamp(26px,4vw,42px);line-height:1;letter-spacing:-.05em}
.info-content h2 span{display:block}
.info-content p{max-width:620px;color:var(--muted);font-size:12px;line-height:1.8}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px}
.info-card{min-height:100px;padding:13px;border:1px solid var(--line);border-radius:10px;background:#0b0b0b}
.info-card b{display:block;margin-bottom:7px;font-size:9px}
.info-card span{color:var(--muted);font-size:9px;line-height:1.5}
.contact-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.contact-links a{padding:10px 13px;border:1px solid var(--line-strong);border-radius:999px;color:#fff;text-decoration:none;font-size:9px;font-weight:700}
.contact-links a:hover{background:#fff;color:#000}
.side-menu{position:fixed;right:0;top:0;bottom:0;z-index:4000;width:min(360px,90vw);padding:18px;background:#090909;border-left:1px solid var(--line-strong);box-shadow:-25px 0 80px rgba(0,0,0,.65);transform:translateX(105%);transition:transform .35s var(--ease)}
.side-menu.is-visible{transform:translateX(0)}
.side-menu-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;letter-spacing:.1em}
.side-menu-head button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}
.side-menu-body{display:grid;gap:7px;margin-top:38px}
.side-menu-body button,.side-menu-body a{padding:15px 12px;border:1px solid var(--line);border-radius:8px;background:#0d0d0d;color:var(--text);text-decoration:none;text-align:left;cursor:pointer;font-size:9px;font-weight:500}
.side-menu-body button:hover,.side-menu-body a:hover{border-color:#fff;background:#151515}
.side-menu-foot{position:absolute;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;color:var(--dim);font-size:7px}
.menu-backdrop{position:fixed;inset:0;z-index:3900;background:rgba(0,0,0,.58);opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
.menu-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto}

/* ACTIVIDAD / CTA */
.comms{position:absolute;right:clamp(18px,4vw,58px);bottom:68px;z-index:600;width:220px;border:1px solid var(--line);border-radius:11px;background:rgba(7,7,7,.72);box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.comms-head{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);font-size:7px;font-weight:700;letter-spacing:.1em}
.comms-head span:last-child{color:var(--muted)}
.comms-head i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#fff}
.comms-body{height:82px;overflow:hidden;padding:8px 10px;color:var(--muted);font-size:7px;line-height:1.7}
.comms-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comms-line b{color:#fff;font-weight:500}
.contact-orb{position:absolute;left:clamp(18px,3vw,44px);bottom:58px;z-index:600;display:flex;align-items:center;gap:10px;padding:7px 13px 7px 7px;border:1px solid var(--line);border-radius:999px;background:rgba(7,7,7,.82);color:#fff;text-decoration:none;box-shadow:0 15px 50px rgba(0,0,0,.4);transition:.2s var(--ease)}
.contact-orb:hover{transform:translateY(-3px);border-color:#fff}
.contact-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;font-size:17px}
.contact-orb strong,.contact-orb small{display:block}
.contact-orb strong{font-size:9px}.contact-orb small{margin-top:3px;color:var(--muted);font-size:7px}

/* SECUENCIA */
.catalog-sequence{position:fixed;left:50%;bottom:25px;z-index:1750;width:min(540px,calc(100vw - 40px));padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(7,7,7,.82);box-shadow:0 18px 60px rgba(0,0,0,.35);transform:translate(-50%,12px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.app.is-focus-mode .catalog-sequence{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sequence-top{display:flex;justify-content:space-between;font-size:7px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.sequence-top span:last-child{color:#fff}
.sequence-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin:9px 0 8px}
.sequence-dot{height:3px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.13);cursor:pointer;transition:.18s var(--ease)}
.sequence-dot:hover,.sequence-dot.is-active{background:#fff;transform:scaleY(1.8)}
.sequence-name{font-size:9px;font-weight:700;letter-spacing:.12em}
.sequence-hint{margin-top:4px;color:var(--dim);font-size:7px;letter-spacing:.05em}

/* HUD / MOBILE NAV */
.hud{position:absolute;left:clamp(18px,3vw,48px);right:clamp(18px,3vw,48px);bottom:16px;z-index:550;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--dim);font-size:7px;letter-spacing:.08em}
.hud i{display:inline-block;width:12px;height:1px;margin-right:6px;vertical-align:middle;background:#fff}
.hud-right{justify-self:end}
.mobile-nav{display:none}

/* FOCUS MODE */
.app.is-focus-mode .manifesto,.app.is-focus-mode .comms,.app.is-focus-mode .contact-orb{opacity:0;transform:translate3d(0,15px,0);filter:blur(5px);pointer-events:none}
.app.is-focus-mode .scene-shell{z-index:140}
.app.is-focus-mode .topbar{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}

/* RESPONSIVE */
@media (max-width:1100px){
  .manifesto{width:300px}
  .node{min-width:155px}
}
@media (max-width:820px){
  .topbar{height:66px;grid-template-columns:1fr auto;padding:0 16px}
  .network-status,.top-button{display:none}
  .manifesto{left:18px;top:12%;width:260px}
  .manifesto h1{font-size:31px}
  .manifesto p{font-size:10px}
  .core{left:50%;top:54%;width:190px;height:190px}
  .core-face{inset:14px}
  .app.is-open .core{width:145px;height:145px}
  .app.is-open .core-face{inset:10px}
  .scene-hint{left:50%;top:calc(54% + 125px)}
  .comms{right:14px;bottom:70px;width:175px}
  .contact-orb{left:14px;bottom:70px}
  .hud{display:none}
  .window-dock{bottom:76px}
}
@media (max-width:620px){
  .brand-logo{width:72px;height:38px}
  .brand-meta{font-size:6px}
  .manifesto{left:16px;top:9%;width:230px}
  .manifesto h1{margin:11px 0;font-size:27px}
  .manifesto p{max-width:215px;font-size:9px;line-height:1.5}
  .explore-button{margin-top:13px;font-size:8px}
  .scene{transform:none!important}
  .scene-grid{display:none}
  .scene-halo{width:130vw;top:55%}
  .orbit-a{width:280px;height:280px;top:55%}
  .orbit-b{width:460px;height:460px;top:55%}
  .core{top:55%;width:164px;height:164px}
  .core-face{inset:11px}
  .core-logo-image{width:64px;height:64px}
  .core-sub{font-size:6px}
  .core-signal{font-size:6px}
  .app.is-open .core{width:112px;height:112px;top:55%}
  .project{transition:opacity .25s,filter .2s,transform .2s}
  .node{min-width:118px;max-width:148px;padding:8px 9px;border-radius:9px}
  .node-name{font-size:8px}.node-category,.node-url{margin-left:14px;font-size:6px}
  .node-code{font-size:6px}
  .comms{left:12px;right:auto;bottom:72px;width:145px;opacity:.86}
  .comms-body{height:58px;font-size:6px}
  .contact-orb{left:auto;right:12px;bottom:72px;padding:5px}
  .contact-orb span:not(.contact-icon){display:none}
  .contact-icon{width:34px;height:34px}
  .mobile-nav{position:fixed;left:9px;right:9px;bottom:max(8px,env(safe-area-inset-bottom));z-index:3000;height:60px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-strong);border-radius:17px;background:rgba(8,8,8,.94);box-shadow:0 18px 70px rgba(0,0,0,.62)}
  .mobile-nav-item{position:relative;display:grid;place-items:center;align-content:center;gap:3px;border:0;background:transparent;color:var(--muted);cursor:pointer}
  .mobile-nav-item span{font-size:14px}.mobile-nav-item small{font-size:7px}
  .mobile-nav-item.is-active{color:#fff}
  .mobile-nav-item.is-active::after{content:"";position:absolute;left:25%;right:25%;bottom:4px;height:1px;background:#fff}
  .window-dock{left:7px;right:7px;bottom:75px}
  .dock-tab{min-width:145px;height:35px}
  .project-window{width:calc(100vw - 14px);max-height:calc(100svh - 80px);padding:7px;border-radius:12px}
  .project-window.is-maximized{width:calc(100vw - 8px)!important;height:calc(100svh - 76px)!important}
  .window-head{height:33px}.window-title{font-size:9px}.window-category{display:none}
  .window-actions button{width:27px;height:27px}
  .project-window.is-maximized .preview-frame{height:calc(100% - 250px);min-height:210px}
  .window-info{display:block;padding-top:9px}
  .window-description{font-size:9px}
  .window-url{margin-top:6px;text-align:left}
  .open-site{margin-left:0}
  .notes-box{margin-top:9px}
  .info-window{width:calc(100vw - 18px);max-height:calc(100svh - 88px)}
  .info-content{max-height:calc(100svh - 133px);padding:18px}
  .info-grid{grid-template-columns:1fr}
  .side-menu{width:86vw}
  .catalog-sequence{left:9px;right:9px;bottom:calc(75px + env(safe-area-inset-bottom));width:auto;transform:translateY(8px);padding:8px 10px}
  .app.is-focus-mode .catalog-sequence{transform:translateY(0)}
  .sequence-hint{display:none}
  .sequence-bar{gap:4px;margin:7px 0 6px}
  .sequence-name{font-size:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}