:root{
  --bg:#222937;
  --frame:#222937;
  --panel:#0f1623;
  --ink:#c9d1d9;
  --angle:#58a6ff;
  --tag:#7ee787;
  --attr:#79c0ff;
  --val:#e6cc77;
  --comment:#8b949e;
}

*{ box-sizing:border-box; }

html,body{
  height:100vh;
  margin:0;
  overflow:hidden;
  background:var(--bg);
  font-family:Arial, sans-serif;
}

body.intro-active{
  overflow:hidden;
}

.intro{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:9999;
  opacity:1;
  transition:opacity .35s ease;
}

.intro.fade-out{
  opacity:0;
  pointer-events:none;
}

#mainUI{
  opacity:0;
  padding-top:18px;
  height:100vh;
  overflow:hidden;
}

#mainUI.ui-ready{
  opacity:1;
  transition:opacity .35s ease;
}

.intro canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

nav{
  width:100%;
  background:#1b2231;
  border-bottom:1px solid rgba(255,255,255,0.12);
  padding:14px 32px;
  display:flex;
  justify-content:center;
  gap:40px;
  font-size:1rem;
  font-weight:500;
  font-family:"Comic Sans MS","Comic Neue",cursive;
}

nav a{
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  transition:color .2s, opacity .2s;
  opacity:0.9;
}

nav a:hover{
  color:#ffffff;
  opacity:1;
}

.frame{
  width:min(1700px,97vw);
  height:calc(100vh - 110px);
  margin:12px auto 0;
  border:2px solid var(--frame);
  border-radius:28px;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222937;
  overflow:hidden;
}

.terminal{
  position:relative;
  width:min(1050px, 90vw);
  background:linear-gradient(180deg,#0f172a 0%, var(--panel) 100%);
  border:1px solid #1f2937;
  border-radius:28px;
  box-shadow:0 20px 45px rgba(0,0,0,.22);
  padding:20px 24px;
  height:min(72vh,720px);
  overflow:auto;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}

.terminal.show{
  opacity:1;
  transform:translateY(0);
}

.dots{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.dots i{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  opacity:.95;
}

.dots i:nth-child(1){ background:#ff5f56; }
.dots i:nth-child(2){ background:#ffbd2e; }
.dots i:nth-child(3){ background:#27c93f; }

.code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size:clamp(12px, 1vw, 15px);
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  word-break:normal;
  color:var(--ink);
  max-width: 100%;
}

.code .line{
  white-space:pre-wrap;
}

.angle{ color:var(--angle); }
.tag{ color:var(--tag); }
.attr{ color:var(--attr); }
.val{ color:var(--val); }
.comment{ color:var(--comment); font-style:italic; }

@media (max-width: 980px){
  .frame{
    height:auto;
    padding:24px 16px;
  }

  .terminal{
    width:100%;
    height:56vh;
  }
}