/* reset */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* palette */
:root{
  --bg-base:#090b0d;
  --bg-surface:#101318;
  --text:#f3f6fa;
  --text-2:#dbe2eb;
  --accent:#9edee0;
  --steel:#aeb8c3;
  --glow:rgba(220,230,240,0.35);
  --maxw:1100px;
  --radius:20px;
}

/* page base */
body{
  margin:0;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(110,127,175,.12), transparent 70%),
    linear-gradient(180deg, var(--bg-base), var(--bg-surface));
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  text-rendering:optimizeLegibility;
}

/* simple layout frame */
.screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
}

.hero{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;  
}

.hero--split{
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(340px,1fr);
  gap:48px;
  align-items:center;
}

/* footer stays anchored but empty for now */
.foot{
  position:absolute;
  bottom:32px;
  left:0;
  width:100%;
  text-align:center;
  margin-top:1rem;
  color:var(--steel);
  font-size:.78rem;
}

/* artwork block */
.art{
  display:grid;
  place-items:center;
}
.art img{
  width:min(520px,42vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 24px 70px rgba(220,230,240,.28));
}

/* copy side */
.copy{ position:relative; }

/* console card */
.status{
  position:relative;
  margin:0 18px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(110,127,175,.18);
  box-shadow:0 0 40px -18px var(--glow);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color:var(--steel);
  font-size:.95rem;
}

.status .line{ opacity:.9; }
.status .type{ color:var(--accent); font-weight:700; }

/* title + sub */
h1.title{
  margin:6px 0 8px;
  font-size:clamp(36px,5vw,48px);
  line-height:1.15;
  text-shadow:0 0 8px var(--glow);                    
}
p.sub{
  margin:0 0 18px;
  color:var(--text-2);
}

/* buttons */
.links{
  display:flex;
  flex-wrap:nowrap;
  gap:.8rem;
  margin-top:.1rem;
}

.btn{
  appearance:none;
  border:0;
  padding:0.7rem 1rem;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  min-height:44px;                                     
  transition:
    transform .08s ease,
    outline-color .2s ease,
    color .2s ease,
    background-color .2s ease;
}

.btn.outline{
  background:transparent;
  color:var(--text);
  outline:2px solid color-mix(in oklab, var(--accent) 55%, transparent);
}

.btn.ghost{
  background:transparent;
  color:var(--text-2);
  outline:2px dashed color-mix(in oklab, var(--steel) 60%, transparent);
}

/* small lift on hover */
.btn:hover{ transform: translateY(-1px); }
.btn.outline:hover{ outline-color:var(--accent); color:var(--text); }
.btn.ghost:hover{ outline-color:var(--accent); color:var(--text); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* blinking cursor */
.type{ position:relative; }
.type::after{
  content:"";
  position:absolute;
  right:-10px;
  top:0;
  bottom:0;
  width:7px;
  background:var(--text-2);
  opacity:.75;
  border-radius:1px;
  animation:blink 1.1s steps(1, end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* mobile tweaks */
@media (max-width:520px){

  html, body {
    overflow-x: hidden;
  }

  .hero--split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: -10px;
  }

  .art img {
    width: 72vw;
    max-width: 300px;
  }

  .copy {
    text-align: center;
    margin-top: 4px;
  }

  .status {
    padding: 11px 14px;
    border-radius: 12px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }

  .btn {
    padding: 8px 12px;
    border-radius: 10px;
  }
}

/* mobile fix - stops scroll */
@supports (-webkit-touch-callout: none) {
  html, body {
    height: -webkit-fill-available;
    min-height: 100vh;
    overflow-y: hidden;
  }
}