/* 1 — Closest to the original. Keep its glass, round controls and typography. */
:root[data-theme=light]{--bg-base:#edf4fc;--blob-1:#c8def7;--blob-2:#e0ecfa;--blob-3:#edf4fc}
:root[data-theme=dark]{--bg-base:#0a1120;--blob-1:#18376b;--blob-2:#11233d;--blob-3:#0a1120}
body{background-image:radial-gradient(ellipse at 15% 0%,var(--blob-1),transparent 65%);background-attachment:fixed}.design-picker{backdrop-filter:blur(14px)}.copy-all{border-radius:8px}.pad-wrap{box-shadow:var(--inner-top)}

/* A little more breathing room around the original layout. */
.wrap {
  width: calc(100% - clamp(48px, 10vw, 176px));
  max-width: 1600px;
  padding: 28px 0 38px;
}
:root[data-theme=light] {
  --editor-surface: #fff;
  --editor-toolbar: #f7faff;
  --editor-edge: #d7e2f0;
  --editor-shadow: 0 3px 12px -7px rgba(36, 67, 111, .18);
}
:root[data-theme=dark] {
  --editor-surface: #101a2c;
  --editor-toolbar: #162238;
  --editor-edge: #30405a;
  --editor-shadow: 0 3px 14px -7px rgba(0, 0, 0, .4);
}
.pad-wrap {
  border: 1px solid var(--editor-edge);
  border-radius: 16px;
  background: var(--editor-surface);
  box-shadow: var(--editor-shadow);
  transition: border-color .15s, box-shadow .15s;
}
.pad-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--editor-edge));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent), var(--editor-shadow);
}
.editor-toolbar {
  min-height: 47px;
  padding: 7px 10px 7px 21px;
  background: var(--editor-toolbar);
  border-bottom: 1px solid var(--editor-edge);
}
.editor-caption { font-size: 12px; font-weight: 500; }
.copy-all {
  min-height: 31px;
  min-width: 94px;
  padding: 6px 11px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--editor-surface));
  color: var(--accent);
  font-size: 11px;
  box-shadow: none;
}
.copy-all:hover { color: var(--accent); background: var(--accent-soft); }
#pad {
  min-height: clamp(320px, 42vh, 480px);
  padding: 23px 24px;
  background: var(--editor-surface);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#pad:focus { box-shadow: none; }
#pad::placeholder { color: var(--text-muted); opacity: .7; }
@media(max-width:640px) {
  .wrap { width: 100%; padding: 18px 14px 26px; }
  .pad-wrap { border-radius: 13px; }
  .editor-toolbar { padding: 7px 9px 7px 15px; }
  #pad { min-height: 330px; padding: 18px 16px; }
}