:root {
  /* Your palette */
  --c1: #B4B4B8;
  /* muted */
  --c2: #C7C8CC;
  /* border */
  --c3: #E3E1D9;
  /* panel */
  --c4: #F2EFE5;
  /* background */

  --text: #111111;
  --radius: 14px;
  --container: 1100px;

  --gap: clamp(12px, 2vw, 18px);
  --pad: clamp(12px, 2vw, 18px);

  --h1: clamp(20px, 3.4vw, 34px);
  --h2: clamp(15px, 2.2vw, 18px);
  --base: clamp(14px, 1.7vw, 15px);
  --small: clamp(12px, 1.5vw, 13px);

  /* Map your requested var name */
  --border: var(--c2);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--c4);
  color: var(--text);
  font-size: var(--base);
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

textarea,
input,
button {
  font: inherit;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(12px, 3vw, 20px);
}

/* Header */
.header {
  background: var(--c3);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  padding: 16px 0 10px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.brand-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: clamp(16px, 2.2vw, 20px);
}

.brand-subtitle {
  margin-top: 4px;
  color: #333;
  opacity: 0.85;
  font-size: var(--small);
}

/* =========================
   SCROLL MENU (YOUR CODE)
   ========================= */
.scroll-menu {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  display: block;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--c3);
}

.scroll-menu::-webkit-scrollbar {
  display: none;
}

/* Inner flex wrapper to auto-size correctly */
.scroll-menu .inner {
  display: inline-flex;
  width: max-content;
}

/* Link style */
.scroll-menu a {
  padding: 0.55rem 1.2rem;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--text);
  font-size: 14px;
  border-radius: 12px;
}

.scroll-menu a:hover {
  text-decoration: underline;
}

/* optional: tap-friendly focus */
.scroll-menu a:focus {
  outline: none;
  text-decoration: underline;
}

/* Main */
.main {
  padding-bottom: 24px;
}

.hero {
  padding: clamp(16px, 3vw, 24px) 0 8px;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: var(--h1);
}

.subtext {
  margin: 0;
  color: #333;
  max-width: 75ch;
}

/* Section & layout */
.section {
  padding: clamp(12px, 2.6vw, 20px) 0;
}

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

/* Panels */
.panel {
  background: var(--c3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
}

.panel-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.panel-head h2 {
  margin: 0 0 4px;
  font-size: var(--h2);
}

.muted {
  color: #333;
  opacity: 0.85;
}

.small {
  font-size: var(--small);
}

/* Form */
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

label {
  font-weight: 900;
  font-size: var(--small);
}

textarea,
input[type="text"] {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  outline: none;
}

textarea {
  resize: vertical;
  min-height: clamp(120px, 18vh, 170px);
}

textarea:focus,
input[type="text"]:focus {
  border-color: #9a9aa0;
}

.hint {
  margin: 0;
  font-size: var(--small);
  color: #333;
  opacity: 0.85;
}

/* Actions */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Buttons */
.btn {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;

  flex: 1 1 auto;
  min-width: 120px;
}

.btn:hover {
  background: var(--c4);
}

.btn-primary {
  background: var(--c1);
  border-color: var(--c1);
  color: #111;
}

.btn-primary:hover {
  background: #a8a8ac;
}

/* Copy message */
.msg {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: var(--small);
  font-weight: 900;
}

/* Details */
.content h3 {
  margin: 14px 0 8px;
  font-size: 14px;
}

.content ul {
  margin: 0;
  padding-left: 18px;
}

.content li {
  margin: 7px 0;
}

.content strong {
  color: #111;
}

.content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  background: var(--c4);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 8px;
}

.last-line-break {
  margin: 24px 0 12px;
  border: none;
  border-top: 1px solid var(--border);
}

.back-top {
  display: inline-block;
  margin-top: 14px;
  color: #111;
  width: 100%;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}

.back-top:hover {
  background: var(--c4);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  background: var(--c3);
}

.footer-inner {
  text-align: center;
  padding: 14px 0;
}

.footer a {
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}

/* Responsive: Tablet & below -> single column */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

/* Small phones: buttons full width */
@media (max-width: 480px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
    min-width: 0;
  }
}