:root{
  --bg0:#04050a;
  --bg1:#070b14;
  --text:#eaf2ff;
  --muted:#9fb2d3;
  --a:#6be3ff;
  --b:#8a7dff;
  --c:#2dffb6;

  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.11);

  --r:18px;
  --r2:22px;
  --shadow: 0 30px 120px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 14px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1400px 900px at 20% 10%, rgba(107,227,255,.10), transparent 55%),
    radial-gradient(1100px 800px at 78% 18%, rgba(138,125,255,.10), transparent 60%),
    radial-gradient(1000px 800px at 42% 92%, rgba(45,255,182,.09), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

#fx{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.9;
}

.noise{
  position:fixed;
  inset:-40px;
  z-index:1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode:overlay;
}

.top, .main, .modal{position:relative; z-index:2;}

code{
  color: rgba(107,227,255,.95);
  background: rgba(107,227,255,.08);
  border:1px solid rgba(107,227,255,.16);
  padding:.15em .4em;
  border-radius:10px;
}
.dim{opacity:.75}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}

/* Crosshair cursor */
.crosshair{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
}
.crosshair__v, .crosshair__h{
  position:absolute;
}
.crosshair__v{
  width:1px;
  top:0; bottom:0;
  left: var(--cx, 50%);
  background: linear-gradient(180deg, rgba(107,227,255,0), rgba(107,227,255,.22), rgba(107,227,255,0));
}
.crosshair__h{
  height:1px;
  left:0; right:0;
  top: var(--cy, 50%);
  background: linear-gradient(90deg, rgba(45,255,182,0), rgba(45,255,182,.18), rgba(45,255,182,0));
}
.crosshair__dot{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  left: calc(var(--cx, 50%) - 5px);
  top:  calc(var(--cy, 50%) - 5px);
  background: rgba(233,242,255,.22);
  box-shadow: 0 0 22px rgba(107,227,255,.22);
}
@media (pointer: coarse){
  .crosshair{ display:none; }
}

/* TOP */
.top{
  max-width:1220px;
  margin:0 auto;
  padding:26px 28px 0;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
@media (max-width:860px){ .top{flex-direction:column} }

.badge{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.badge__core{
  width:12px;height:12px;border-radius:50%;
  background: rgba(107,227,255,.92);
  box-shadow: 0 0 26px rgba(107,227,255,.55);
}
.badge__title{font-weight:800; letter-spacing:.02em}
.badge__sub{color:rgba(159,178,211,.9); font-size:12px}

.headline h1{
  margin:16px 0 6px;
  font-size:42px;
  letter-spacing:-.02em;
}
.headline p{margin:0; color:rgba(159,178,211,.92); max-width:740px}
@media (max-width:860px){ .headline h1{font-size:34px} }

.stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.stat{
  min-width: 160px;
  padding:12px 14px;
  border-radius: var(--r);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 80px rgba(0,0,0,.22);
}
.stat .k{font-size:11px; color:rgba(159,178,211,.82); letter-spacing:.22em}
.stat .v{margin-top:6px; font-weight:700}

/* CONTROLS */
.main{
  max-width:1220px;
  margin:0 auto;
  padding:16px 28px 28px;
}
.controls{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.search{
  position:relative;
  flex:1 1 380px;
  max-width:560px;
}
.search input{
  width:100%;
  padding:14px 44px 14px 44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.search input::placeholder{color: rgba(159,178,211,.72)}
.search input:focus{
  border-color: rgba(107,227,255,.35);
  box-shadow: 0 0 0 4px rgba(107,227,255,.10), 0 18px 60px rgba(0,0,0,.22);
}
.search button{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.search button:hover{background: rgba(255,255,255,.10)}
.search__icon{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  opacity:.85;
  background: conic-gradient(from 90deg, rgba(107,227,255,.0), rgba(107,227,255,.35), rgba(45,255,182,.28), rgba(138,125,255,.28), rgba(107,227,255,.0));
  border-radius:50%;
}

/* GRID */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width:1020px){ .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width:680px){ .grid{grid-template-columns: 1fr;} }

/* CARD (no 3D) */
.cardWrap{position:relative}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius: var(--r2);
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 100px rgba(0,0,0,.26);
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(107,227,255,.22);
  background: rgba(255,255,255,.04);
}
.card__bg{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 200px at var(--mx,50%) var(--my,20%), rgba(107,227,255,.18), transparent 60%),
    radial-gradient(600px 200px at calc(var(--mx,50%) + 14%) calc(var(--my,20%) + 10%), rgba(138,125,255,.14), transparent 60%),
    radial-gradient(460px 220px at calc(var(--mx,50%) - 10%) calc(var(--my,20%) + 14%), rgba(45,255,182,.10), transparent 60%);
  opacity:.0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.card:hover .card__bg{opacity:1}

.card__glow{
  position:absolute;
  inset:auto -40% -60% -40%;
  height:260px;
  background: radial-gradient(closest-side, rgba(107,227,255,.18), transparent 65%);
  filter: blur(18px);
  opacity:.55;
  pointer-events:none;
}

.card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.tag{
  font-weight:800;
  letter-spacing:.14em;
  font-size:11px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.chipmini{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(159,178,211,.95);
}

.card__media{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  height:140px;
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.02);
}
.card__sheen{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.0) 66%);
  transform: translateX(-120%);
  opacity:.6;
  pointer-events:none;
}
.card:hover .card__sheen{animation: sheen 1.0s ease forwards}
@keyframes sheen{to{ transform: translateX(120%); }}

.fallback{width:100%; height:100%; position:relative;}
.fallback__grid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px),
    radial-gradient(500px 180px at 30% 20%, rgba(107,227,255,.12), transparent 60%),
    radial-gradient(450px 170px at 70% 40%, rgba(138,125,255,.10), transparent 60%);
}
.fallback__txt{
  position:absolute; bottom:12px; right:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  letter-spacing:.18em;
  font-size:11px;
  color: rgba(233,241,255,.92);
}

.card__body h3{margin:0; font-size:18px; letter-spacing:-.01em}
.card__body p{margin:6px 0 0; color:rgba(159,178,211,.92); min-height:38px}

.card__bottom{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  align-items:end;
}
.meta__k{font-size:11px; opacity:.8; letter-spacing:.22em}
.meta__v{
  margin-top:2px;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
  opacity:.95;
}
.actions{display:flex; gap:8px; align-items:center}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:800;
  cursor:pointer;
}
.btn--ghost{background: rgba(255,255,255,.03); color: rgba(159,178,211,.95);}

/* Preview affordance */
.btn--preview{ position:relative; }
.card:hover .btn--preview{
  border-color: rgba(107,227,255,.28);
  background: rgba(107,227,255,.07);
  color: rgba(233,242,255,.98);
}
.card:hover .btn--preview::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:16px;
  border:1px solid rgba(107,227,255,.18);
  opacity:.0;
  animation: previewPulse 1.1s ease infinite;
  pointer-events:none;
}
@keyframes previewPulse{
  0%{ transform:scale(.98); opacity:0; }
  35%{ opacity:.55; }
  100%{ transform:scale(1.02); opacity:0; }
}

/* Selected */
.card--selected{
  outline: 2px solid rgba(107,227,255,.30);
  box-shadow: 0 0 0 6px rgba(107,227,255,.07), 0 26px 100px rgba(0,0,0,.40);
}

/* FOOTER */
.footer{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 2px;
  color: rgba(159,178,211,.88);
}
.led{
  width:8px;height:8px;border-radius:50%;
  background: rgba(45,255,182,.9);
  box-shadow: 0 0 18px rgba(45,255,182,.45);
  display:inline-block;
  margin-right:10px;
}

/* MODAL */
.modal{position:fixed; inset:0; z-index:10; display:none;}
.modal--open{display:block}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(10px);}
.modal__panel{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(1200px, calc(100% - 28px));
  height: min(720px, calc(100% - 28px));
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__top{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.modal__title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.modal__pill{
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  letter-spacing:.14em; font-weight:900; font-size:11px;
}
.modal__name{font-weight:900}
.modal__path{opacity:.8}
.modal__actions{display:flex; gap:10px; align-items:center}
.mbtn{
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}
.mbtn--x{width:44px}
.modal__frame{width:100%; height: calc(100% - 54px); background: rgba(0,0,0,.2)}
.modal__frame iframe{width:100%; height:100%; border:0; background:#0b0f18;}

/* INTRO */
.intro{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 500px at 50% 35%, rgba(107,227,255,.12), transparent 60%),
    radial-gradient(700px 500px at 55% 55%, rgba(138,125,255,.10), transparent 65%),
    rgba(0,0,0,.66);
  backdrop-filter: blur(12px);
}
.intro--hidden{display:none}
.intro__hud{
  width:min(860px, calc(100% - 26px));
  border-radius: 26px;
  padding:18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.intro__row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.intro__brand{display:flex; align-items:center; gap:10px}
.sigil{
  width:12px;height:12px;border-radius:50%;
  background: rgba(107,227,255,.92);
  box-shadow: 0 0 28px rgba(107,227,255,.55);
}
.word{letter-spacing:.22em; font-weight:900; font-size:12px}

.intro__screen{
  margin-top:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
  position:relative;
  overflow:hidden;
  padding:18px;
}
.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity:.22; pointer-events:none;
}
.intro__title{font-weight:1000; letter-spacing:.10em; font-size:22px}
.intro__sub{margin-top:8px; opacity:.92}
.intro__bar{
  margin-top:14px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.intro__barFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(107,227,255,.45), rgba(138,125,255,.38), rgba(45,255,182,.30));
  border-radius:999px;
}
.intro__work{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
  align-items:stretch;
}
@media (max-width:780px){
  .intro__work{grid-template-columns:1fr}
}
.intro__list{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:12px;
  min-height: 180px;
  white-space:pre;
  overflow:auto;
  color: rgba(233,242,255,.90);
}
.intro__viz{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  min-height: 180px;
}
#bootViz{width:100%; height:100%; display:block}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover .btn--preview::after{ animation:none; }
}