@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --bg: #0e1016;
  --window: #161a23;
  --window-alt: #1b2029;
  --border: #272d3a;
  --text-dim: #5b6373;
  --text: #c7cbd4;
  --keyword: #c586c0;
  --func: #61afef;
  --string: #e2b25c;
  --comment: #6a7280;
  --punct: #8a93a6;
  --output: #8fbf7f;
  --focus: #61afef;
}

*{ box-sizing: border-box; }

html, body{ margin: 0; height: 100%; }

body{
  background:
    radial-gradient(circle at 20% -10%, rgba(97,175,239,0.06), transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(226,178,92,0.05), transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw 5vw;
}

.editor{
  width: 100%;
  max-width: 620px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--window);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.editor:active, .editor.running{
  transform: scale(0.995);
}

.editor:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.titlebar{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--window-alt);
  border-bottom: 1px solid var(--border);
}

.dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dot.red{ background: #e0605a; }
.dot.yellow{ background: #e0b356; }
.dot.green{ background: #5fbf6b; }

.filename{
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.code{
  padding: 1.3rem 0;
  font-size: clamp(0.82rem, 2.6vw, 0.95rem);
  line-height: 1.85;
}

.line{
  display: flex;
  padding: 0 1.1rem;
  white-space: pre;
}

.ln{
  width: 2rem;
  flex-shrink: 0;
  color: var(--text-dim);
  opacity: 0.6;
  user-select: none;
}

.code .k{ color: var(--keyword); }
.code .f{ color: var(--func); }
.code .s{ color: var(--string); transition: color 120ms ease; }
.code .c{ color: var(--comment); font-style: italic; }
.code .p{ color: var(--punct); }

.divider{
  border-top: 1px dashed var(--border);
}

.terminal{
  padding: 1rem 1.1rem 1.3rem;
  background: var(--window-alt);
}

.terminal-label{
  font-size: 0.7rem;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
}

.terminal-line{
  display: flex;
  align-items: center;
  font-size: clamp(0.85rem, 2.8vw, 1rem);
}

.prompt{
  color: var(--func);
  margin-right: 0.55rem;
}

.output{
  color: var(--output);
}

.cursor{
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  background: var(--output);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

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

@media (prefers-reduced-motion: reduce){
  .editor, .code .s{ transition: none !important; }
  .cursor{ animation: none !important; opacity: 1; }
}