:root{
  --bg:#080b0d;--surface:#0d1216;--line:#202b32;--line2:#304048;
  --text:#e8eef1;--muted:#84949d;--green:#66e394;--blue:#7fb7ff;
  --purple:#b99cff;--max:1180px;
  --mono:Consolas,"Liberation Mono",Menlo,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--sans);
  background:
    radial-gradient(circle at 12% 0%,rgba(102,227,148,.08),transparent 30rem),
    radial-gradient(circle at 88% 5%,rgba(127,183,255,.07),transparent 34rem),
    var(--bg)
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(#000,transparent 90%)
}
a{color:inherit;text-decoration:none}
.topbar,main,footer{width:min(var(--max),calc(100% - 2.5rem));margin:auto}
.topbar{
  min-height:72px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(48,64,72,.55);font-family:var(--mono);font-size:.82rem
}
.prompt span,.command span,footer span{color:var(--green)}.prompt b{color:var(--blue);font-weight:400}
.meta{display:flex;gap:1.2rem;color:var(--muted)}.available{display:flex;gap:.45rem;align-items:center}
.available i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(102,227,148,.7)}
main{padding:5rem 0 4rem}
.command{font: .86rem var(--mono);color:#b7c3c8;margin-bottom:2.3rem}
.eyebrow,.selector-head,.label,.chips,.card-top,.copy p,.enter,footer{font-family:var(--mono)}
.eyebrow{margin:0 0 .7rem;color:var(--green);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
h1{font-size:clamp(4rem,10vw,8.3rem);line-height:.84;letter-spacing:-.065em;margin:0}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #76858d}
.lead{max-width:760px;color:#bdc8cd;font-size:1.08rem;margin:2rem 0 0}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.chips span{padding:.4rem .62rem;border:1px solid var(--line);background:rgba(13,18,22,.72);border-radius:5px;color:#aebbc1;font-size:.76rem}
.selector{margin-top:5.2rem}.selector-head{display:flex;justify-content:space-between;color:#cbd5d9;font-size:.76rem;margin-bottom:1rem}
.selector-head small{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{
  min-height:430px;padding:1.45rem;display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(145deg,rgba(16,23,27,.96),rgba(8,12,15,.94));
  transition:.22s
}
.card:before{content:"";position:absolute;width:280px;height:280px;right:-110px;top:-110px;border-radius:50%;filter:blur(20px);opacity:.24}
.card-it:before{background:var(--green)}.card-game:before{background:var(--purple)}
.card:hover{transform:translateY(-4px);border-color:#3c4e56;box-shadow:0 26px 80px rgba(0,0,0,.3)}
.card-top{display:flex;justify-content:space-between;align-items:center}.num{color:#52636c;font-size:.8rem}
.status{border:1px solid currentColor;border-radius:4px;padding:.25rem .45rem;font-size:.72rem}
.card-it .status{color:var(--green)}.card-game .status{color:var(--purple)}
.icon{margin-top:3.2rem;width:72px;height:72px;display:grid;place-items:center;border-radius:12px;font:2.3rem var(--mono)}
.lambda{color:var(--green);border:1px solid rgba(102,227,148,.28);background:rgba(102,227,148,.06)}
.cube{border:1px solid rgba(185,156,255,.3);background:rgba(185,156,255,.06)}
.cube span{width:29px;height:29px;border:1px solid var(--purple);transform:rotate(30deg) skewY(-10deg);position:relative}
.cube span:after{content:"";position:absolute;inset:5px;border:1px solid rgba(185,156,255,.55)}
.copy{margin-top:auto;padding-top:3rem}.copy p{margin:0 0 .35rem;color:var(--muted);letter-spacing:.12em;font-size:.71rem}
.copy h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1;margin:.1rem 0 .75rem;letter-spacing:-.035em}
.stack{color:#9eabb1;max-width:520px}
.enter{margin-top:2rem;padding-top:1rem;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.8rem}
.card-it .enter strong{color:var(--green)}.card-game .enter strong{color:var(--purple)}
.about{margin-top:1rem;border:1px solid var(--line);background:rgba(13,18,22,.66);border-radius:10px;padding:1.15rem 1.3rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.about p{margin:.25rem 0 0;color:var(--muted);max-width:780px;font-size:.9rem}.label{color:var(--green);font-size:.71rem}
.links{display:flex;gap:1rem;font:.8rem var(--mono)}.links a:hover{color:var(--green)}
footer{padding:2rem 0 3.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.76rem}
@media(max-width:820px){.cards{grid-template-columns:1fr}.about{grid-template-columns:1fr}.meta>span:first-child{display:none}}
@media(max-width:560px){.topbar,main,footer{width:calc(100% - 1.5rem)}main{padding-top:4rem}h1{font-size:clamp(3.6rem,20vw,6rem)}.card{min-height:360px;padding:1.1rem}.enter{flex-direction:column}.about .links{flex-wrap:wrap}footer{flex-direction:column}}
