/* 汀スタジオ theme for the hearing form — loaded last, overrides colour, type and brand only.
   Layout, questions, saving and export behaviour stay exactly as built. */
:root {
  --wb-blue: #1a5fb4;
  --wb-cyan: #35c3f0;
  --wb-accent-soft: #eaf5fd;
  --wb-ink: #16263d;
  --wb-muted: #5b6a80;
  --wb-line: #d7e6f2;
  --wb-purple: var(--wb-blue);
  --wb-tint: var(--wb-accent-soft);
  --wb-gradient: linear-gradient(110deg, #0f4386 0%, #1a5fb4 45%, #35c3f0 100%);
  --wb-font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --mg-serif: "Shippori Mincho", "Yu Mincho", serif;
  --mg-en: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  background: #fafcfe;
}
body { background: #fafcfe; }
::selection { background: #d6ecfa; }

/* brand: the studio's thin wordmark instead of the placeholder */
.mg-brand { color: var(--wb-ink); text-decoration: none; display: inline-flex; align-items: center; }
.mg-brand svg { height: 26px; width: auto; display: block; }
.wb-header-caption { font-family: var(--wb-font); letter-spacing: 0.12em; }

/* headings in the site's mincho */
h1, .wb-intro h1 { font-family: var(--mg-serif); font-weight: 600; letter-spacing: 0.04em; }
.wb-intro h1 { line-height: 1.4; }
.wb-intro h1 span {
  background: linear-gradient(100deg, #0f4386 0%, #2a86d8 55%, #35c3f0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-family: var(--mg-en); font-weight: 500; font-size: 12px; letter-spacing: 0.32em; color: #3fa7e6;
}
.mg-eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; }

/* buttons, progress and selections follow the site's sea → aqua */
.wb-next, #wb-next, .wb-start { box-shadow: 0 10px 24px -12px rgb(26 95 180 / 55%); }
.wb-choice.is-selected { border-color: #3fa7e6; box-shadow: 0 0 0 0.5px #3fa7e6, 0 4px 14px rgb(26 95 180 / 6%); }
.wb-intro-flow li:first-child > span { border-color: #9dd3f3; }
.wb-kicker, .wb-category { font-family: var(--mg-en); }
.wb-input:focus { border-color: var(--wb-blue); box-shadow: 0 0 0 4px rgb(53 195 240 / 12%); }

/* a quiet shoreline under the intro, echoing the site */
.wb-intro { position: relative; }
.wb-intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C 100 2, 200 22, 300 12 S 500 2, 600 12 S 800 22, 900 12 S 1100 2, 1200 12' fill='none' stroke='%239dd3f3' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.8;
}