:root {
  --ink: #18233d;
  --paper: #f7f5ed;
  --card: #fffef9;
  --line: #d8d6ca;
  --accent: #315acb;
  --accent-ink: #263f89;
  --soft: #eaf0ff;
  --warn: #fff5da;
  --success: #17653a;
  --danger: #962b41;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(#d9d5c8 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.compact-header {
  max-width: none;
  padding: 16px max(20px, calc((100% - 1400px) / 2));
  background: #263f89;
  color: #fff;
}

.compact-header h1 { display: inline; margin: 0; font-size: 1.4rem; }
.compact-header p:not(.eyebrow) { display: inline; margin: 0 0 0 12px; font-size: .92rem; }
.eyebrow { display: none; }
.header-link {
  float: right;
  padding: 4px 8px;
  border: 1px solid #aebee9;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
}

main.workbench, footer { max-width: 1400px; margin: auto; padding-right: 20px; padding-left: 20px; }
.workbench { padding-top: 14px; padding-bottom: 28px; }
footer { padding-bottom: 24px; color: #62718a; font-size: .85rem; }

.panel, .editor-card {
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 9px #1d316e0c;
}

.card-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.card-head h2, .panel h2 { margin: 0; font-size: 1.05rem; }
h3 { margin: 1.1em 0 .35em; font-size: 1rem; }

.notice {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: #49546c;
  font-size: .9rem;
}
.notice.success { background: #e4f6eb; border-color: #bfdec9; color: var(--success); }
.notice.error { background: #ffeaed; border-color: #edc4cd; color: var(--danger); }
.hint, .muted { color: #65728c; font-size: .88rem; }

label { display: block; margin: 12px 0 6px; font-weight: 700; }
label span { color: #65728c; font-weight: 400; }
input, textarea {
  width: 100%;
  border: 1px solid #aeb8ce;
  border-radius: 6px;
  background: #fbfcff;
  color: #172342;
  padding: 9px 10px;
  font: inherit;
}
textarea { resize: vertical; min-height: 66px; }

button {
  padding: 8px 11px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button.secondary, .secondary { background: #405267; }
button.quiet, .quiet {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #8291b0;
  border-radius: 6px;
  background: transparent;
  color: #253a5c;
  font-size: .82rem;
  text-decoration: none;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #9eb6ff;
  outline-offset: 2px;
}

code { padding: .1em .25em; border-radius: 3px; background: #edf0f6; color: #253a5c; }
pre {
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: 6px;
  background: #111b31;
  color: #e8efff;
}
pre code { padding: 0; background: transparent; color: inherit; }

details { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
summary { font-weight: 700; cursor: pointer; }
details pre { min-height: 0; }

@media (max-width: 800px) {
  main.workbench, footer { padding-right: 16px; padding-left: 16px; }
  .compact-header { padding: 13px 16px; }
  .compact-header p:not(.eyebrow) { display: block; margin: 3px 0 0; }
}