:root {
  --paper:#efeee8;
  --ink:#111;
  --line:rgba(17,17,17,.18);
  --muted:rgba(17,17,17,.46);
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
}

body {
  min-height:100svh;
  padding:6px;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 16%, rgba(190,211,245,.72), transparent 29%),
    radial-gradient(circle at 84% 20%, rgba(217,207,240,.60), transparent 31%),
    radial-gradient(circle at 58% 90%, rgba(208,231,216,.56), transparent 35%),
    radial-gradient(circle at 7% 88%, rgba(236,214,228,.28), transparent 25%),
    var(--paper);
  font-family:Arial, Helvetica, sans-serif;
}

a { color:inherit; }

.frame {
  width:100%;
  height:calc(100svh - 12px);
  display:grid;
  grid-template-rows:28px minmax(0,1fr) 34px 28px;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.24);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}

.topbar,
.utility,
footer {
  display:grid;
  align-items:center;
  font:10px/1 "Courier New", monospace;
  letter-spacing:.05em;
  text-transform:lowercase;
}

.topbar {
  grid-template-columns:1fr auto;
  padding:0 10px;
  border-bottom:1px solid var(--line);
}

.hero {
  position:relative;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:clamp(28px,6vh,70px) clamp(22px,6vw,96px);
}

.atmosphere {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.34), transparent 18%),
    radial-gradient(circle at 74% 42%, rgba(188,210,242,.15), transparent 32%);
  filter:blur(14px);
}

.hero-copy {
  position:relative;
  z-index:2;
  width:100%;
}

/* --- 3D Wireframe Cube Styles (Larger & Blue) --- */
.wireframe-cube {
  width: 88px;
  height: 88px;
  position: relative;
  transform-style: preserve-3d;
  animation: spinCube 12s infinite linear;
  margin-bottom: 2rem;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #0033ff;
  background: rgba(0, 51, 255, 0.03);
}

.front  { transform: translateZ(44px); }
.back   { transform: rotateY(180deg) translateZ(44px); }
.right  { transform: rotateY(90deg) translateZ(44px); }
.left   { transform: rotateY(-90deg) translateZ(44px); }
.top    { transform: rotateX(90deg) translateZ(44px); }
.bottom { transform: rotateX(-90deg) translateZ(44px); }

@keyframes spinCube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
/* -------------------------------- */

h1 {
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  font-size:clamp(4.4rem,12vw,13.5rem);
  font-weight:400;
  line-height:.78;
  letter-spacing:-.09em;
}

.status {
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:clamp(28px,5vh,54px);
  color:var(--muted);
  font:9px/1.45 "Courier New", monospace;
}

.cursor-mark {
  position:absolute;
  right:18%;
  top:28%;
  width:7px;
  height:7px;
  border:1px solid rgba(17,17,17,.18);
  opacity:.45;
  transition:transform .2s ease-out;
}

.utility {
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  padding:0 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.utility-left { justify-self:start; }

.email-link {
  justify-self:center;
  text-underline-offset:3px;
}

.utility-right {
  justify-self:end;
  color:var(--muted);
}

footer {
  grid-template-columns:1fr auto;
  padding:0 10px;
  color:var(--muted);
}

@media (max-width:720px) {
  body { padding:4px; }

  .frame {
    height:calc(100svh - 8px);
    grid-template-rows:32px minmax(0,1fr) 50px 40px;
  }

  .topbar { padding:0 12px; }

  .hero {
    align-items:center;
    padding:24px 16px;
  }

  .wireframe-cube {
    width: 56px;
    height: 56px;
    margin-bottom: 1.2rem;
  }
  
  .front  { transform: translateZ(28px); }
  .back   { transform: rotateY(180deg) translateZ(28px); }
  .right  { transform: rotateY(90deg) translateZ(28px); }
  .left   { transform: rotateY(-90deg) translateZ(28px); }
  .top    { transform: rotateX(90deg) translateZ(28px); }
  .bottom { transform: rotateX(-90deg) translateZ(28px); }

  h1 {
    width:100%;
    font-size:13.5vw;
    line-height:.82;
    letter-spacing:-.055em;
  }

  .status {
    margin-top:24px;
    gap:6px 14px;
    font-size:8px;
  }

  .cursor-mark { display:none; }

  .utility {
    grid-template-columns:1fr auto 1fr;
    padding:0 12px;
    font-size:9px;
  }

  .utility-left { font-size:8px; }

  .email-link {
    justify-self:center;
    max-width:130px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .utility-right { font-size:8px; }

  footer {
    padding:0 12px;
    font-size:8px;
  }
}

@media (max-width:430px) {
  .email-link {
    max-width:112px;
    font-size:8px;
  }

  .utility-left { font-size:7px; }
  .utility-right { visibility:hidden; }
}

@media (max-height:560px) and (orientation:landscape) {
  .frame {
    grid-template-rows:25px minmax(0,1fr) 30px 25px;
  }

  .hero { padding:12px 5vw; }

  .wireframe-cube {
    width: 48px;
    height: 48px;
    margin-bottom: 0.8rem;
  }
  
  .front  { transform: translateZ(24px); }
  .back   { transform: rotateY(180deg) translateZ(24px); }
  .right  { transform: rotateY(90deg) translateZ(24px); }
  .left   { transform: rotateY(-90deg) translateZ(24px); }
  .top    { transform: rotateX(90deg) translateZ(24px); }
  .bottom { transform: rotateX(-90deg) translateZ(24px); }

  h1 { font-size:min(11vw,19vh); }

  .status {
    margin-top:16px;
    font-size:8px;
  }
}