/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:        #282a36;
  --bg-bar:    #1e1f29;
  --fg:        #f8f8f2;
  --comment:   #6272a4;
  --pink:      #ff79c6;
  --green:     #50fa7b;
  --orange:    #ffb86c;
  --yellow:    #f1fa8c;
  --cyan:      #8be9fd;
  --punct:     #44475a;
  --key:       rgba(248,248,242,0.4);
  --purple:    #bd93f9;

  --font: 'Geist Mono', 'Menlo', 'Consolas', monospace;
  --fs:   clamp(11px, 3.2vw, 15px);
  --lh:   1.8;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

.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;
}

/* ===== IDE Layout ===== */
.ide {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* ===== Top Bar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  background: var(--bg-bar);
  border-bottom: 1px solid rgba(68,71,90,0.6);
  flex-shrink: 0;
}

.topbar-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.topbar-tab {
  color: var(--fg);
  font-size: 12px;
  padding: 4px 16px;
  background: var(--bg);
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(68,71,90,0.6);
  border-bottom: none;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.topbar-spacer { flex: 1; }

/* ===== Editor ===== */
.editor {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

/* ===== Boot Sequence ===== */
.boot-sequence {
  color: var(--comment);
  font-size: var(--fs);
  white-space: pre;
  letter-spacing: 0.03em;
  text-align: left;
}

.cursor {
  display: inline-block;
  animation: blink 1s step-end infinite;
  color: var(--green);
  margin-left: 1px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ===== Code Block ===== */
.code-block {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s ease;
  width: 100%;
  max-width: 540px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.line {
  white-space: pre;
  letter-spacing: 0.02em;
  overflow: visible;
}

/* Syntax */
.comment   { color: var(--comment); font-style: italic; }
.keyword   { color: var(--pink); }
.classname { color: var(--green); }
.var       { color: var(--fg); }
.key       { color: var(--key); }
.string    { color: var(--yellow); }
.punct     { color: var(--punct); }
.fn        { color: var(--fg); }

/* Expandable values */
.expand {
  color: var(--cyan);
  cursor: pointer;
  transition: color 0.15s ease;
}

.expand:hover,
.expand:focus {
  color: var(--orange);
  text-decoration: underline;
  outline: none;
}

/* Symo.connect() */
.connect {
  cursor: pointer;
  transition: color 0.15s ease;
}

.connect:hover,
.connect:focus {
  color: var(--green);
  outline: none;
}

/* ===== Status Bar ===== */
.statusbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 26px;
  padding: 0 16px;
  background: var(--bg-bar);
  border-top: 1px solid rgba(68,71,90,0.6);
  flex-shrink: 0;
  font-size: 11px;
  color: var(--comment);
  letter-spacing: 0.04em;
}

.status-branch { color: var(--purple); }
.status-node   { color: var(--green);  }
.status-time   { margin-left: auto;    }

/* ===== Mobile ===== */
@media (max-width: 480px) {
  .code-block {
    max-width: 100%;
    padding: 0 4px;
  }

  .line {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .status-node {
    display: none;
  }
}