/* Everything below styles #frame - the exact subtree captured on export.
   Keep it self-contained: no app variables, no external images. */

#frame {
  --pad: 64px;
  --radius: 12px;
  --card-width: 720px;
  --shadow: 0 18px 40px -12px rgba(0,0,0,.42);
  --font: 'JetBrains Mono', ui-monospace, monospace;
  --fs: 14px;
  --lh: 1.6;
  --code-bg: #0d1117;
  --code-fg: #e6edf3;
  --gutter-fg: rgba(255,255,255,.28);
  --dim: .32;
  --noise: 0;
  --wm-opacity: .6;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  overflow: hidden;
  isolation: isolate;
}

#bgLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Blur for image backgrounds is applied to a scaled-up layer so edges stay clean */
#frame[data-bg="image"] #bgLayer {
  transform: scale(1.08);
  filter: blur(var(--bg-blur, 0px));
}

#noiseLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--noise);
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}

#window {
  position: relative;
  z-index: 2;
  width: fit-content;
  min-width: var(--card-width);
  border-radius: var(--radius);
  background: var(--code-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--code-fg);
}

/* ---------- Title bar ---------- */

#titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
  min-height: 26px;
}
#frame[data-window="none"] #titlebar { display: none; }
#frame[data-window="plain"] .dots { display: none; }

.dots { display: flex; gap: 7px; flex: 0 0 auto; }
.dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f57;
}
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

#titleText {
  flex: 1;
  text-align: center;
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
  color: var(--code-fg);
  opacity: .55;
  outline: none;
  min-width: 40px;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#titleText:focus { opacity: .9; background: rgba(255,255,255,.06); }
#frame[data-window="plain"] #titleText { text-align: left; }
/* Balance the dots so the title stays optically centered */
#frame[data-window="mac"] #titlebar::after {
  content: '';
  flex: 0 0 auto;
  width: 53px;
}

/* ---------- Code area ---------- */

#codeArea {
  display: flex;
  align-items: stretch;
  padding: 14px 0 18px;
}

#gutter {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  padding: 0 12px 0 18px;
  text-align: right;
  user-select: none;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  font-variant-ligatures: none;
  color: var(--gutter-fg);
  font-variant-numeric: tabular-nums;
}
#frame[data-gutter="on"] #gutter { display: flex; }
#gutter span { cursor: pointer; white-space: pre; }
#gutter span:hover { color: var(--code-fg); }
#gutter span.focused { color: var(--code-fg); opacity: .85; }

#codeWrap {
  position: relative;
  flex: 1 0 auto;
  min-width: max-content;
}
/* Horizontal padding lives on the three text layers, never on #codeWrap:
   the absolutely positioned layers ignore the wrapper's padding box and would
   drift out of alignment with the caret. */
#frame[data-gutter="on"]  #codeWrap { --code-pl: 0px; --code-pr: 20px; }
#frame[data-gutter="off"] #codeWrap { --code-pl: 20px; --code-pr: 20px; }

/* The three stacked layers must share identical text metrics. */
#sizer, #highlight, #input {
  margin: 0;
  border: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  letter-spacing: normal;
  font-variant-ligatures: none;
  white-space: pre;
  tab-size: 2;
  -moz-tab-size: 2;
  padding: 0 var(--code-pr, 20px) 0 var(--code-pl, 20px);
  overflow: hidden;
}

/* Invisible layer that gives #codeWrap its exact width and height. */
#sizer {
  visibility: hidden;
  pointer-events: none;
  min-height: calc(var(--fs) * var(--lh));
}

#highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none !important;
}
#highlight code { font: inherit; display: block; }
#highlight .line { display: block; min-height: calc(var(--fs) * var(--lh)); }
#frame[data-focus="on"] #highlight .line { opacity: var(--dim); transition: opacity .12s; }
#frame[data-focus="on"] #highlight .line.focused { opacity: 1; }

#input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--code-fg);
  display: block;
}
#input::selection { background: rgba(124,156,255,.32); }
#input::-moz-selection { background: rgba(124,156,255,.32); }

/* ---------- Watermark ---------- */

#watermark {
  position: absolute;
  z-index: 3;
  font: 500 12px/1 Inter, system-ui, sans-serif;
  color: #fff;
  opacity: var(--wm-opacity);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  display: none;
  white-space: nowrap;
}
#frame[data-wm="on"] #watermark { display: block; }
#frame[data-wm-pos="tl"] #watermark { top: 16px; left: 20px; }
#frame[data-wm-pos="tr"] #watermark { top: 16px; right: 20px; }
#frame[data-wm-pos="bl"] #watermark { bottom: 16px; left: 20px; }
#frame[data-wm-pos="br"] #watermark { bottom: 16px; right: 20px; }

/* ---------- Export state ---------- */

#frame.exporting #input { caret-color: transparent; }
#frame.exporting #titleText { background: none; opacity: .55; }
#frame.exporting * { transition: none !important; }