/* ============================================================
   DUELO — reset + foundations
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none !important}

html,body{height:100%}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* ambient background: two soft auroras + fine grid + vignette */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(880px 620px at 12% -8%, rgba(91,140,255,.16), transparent 62%),
    radial-gradient(760px 560px at 92% 4%, rgba(124,92,255,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(49,208,255,.07), transparent 62%),
    var(--bg-0);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 130% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 130% 90% at 50% 0%, #000 20%, transparent 78%);
}

img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
}

::selection{background:rgba(91,140,255,.32);color:#fff}

/* focus: visible but never ugly */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.11);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:content-box}

/* ---------- utility ---------- */
.shell{width:min(100% - 40px, var(--shell));margin-inline:auto}
.row{display:flex;align-items:center}
.row-g8{display:flex;align-items:center;gap:8px}
.row-g12{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column}
.spacer{flex:1}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.dim{color:var(--ink-3)}

/* ---------- keyframes ---------- */
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-soft{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sheen{from{transform:translateX(-120%)}to{transform:translateX(240%)}}
@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}