/* The illustrated frame is a raster asset; all questions and controls remain live HTML. */
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('./assets/fonts/ZenMaruGothic-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.celestial-assessment {
  color-scheme: light;
  --background: #c3c8cf;
  --surface: #fff;
  --text: #161719;
  --muted: #424b58;
  --border: #222326;
  --button: #fff;
  --selected: #203d5b;
  --selected-text: #fff;
  --focus: #174f8e;
  --radius: 18px;
  background: #192e49;
  font-family: 'Zen Maru Gothic', 'Yu Gothic', sans-serif;
  font-weight: 700;
}
.celestial-assessment .site-header {
  max-width: 640px;
  border: 0;
  color: #fff;
  padding: 8px 22px 0;
  gap: 4px 16px;
}
.celestial-assessment .brand { font-size: .85rem; }
.celestial-assessment .app-nav { gap: 16px; }
.celestial-assessment .app-nav a { color: #fff; font-size: .75rem; }
.celestial-assessment .assessment-main {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 640px;
  min-height: 1137px;
  padding: 92px 16.5% 116px;
  padding-inline: min(16.5vw, 106px);
  background: transparent;
}
.celestial-assessment .assessment-main::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-color: transparent;
  border-width: min(36.13vw, 231px) min(13.82vw, 88px) min(40.38vw, 258px);
  border-image-source: url('./assets/assessment-celestial-frame-clean.png');
  border-image-slice: 340 130 380 fill;
  border-image-repeat: stretch;
}
.celestial-assessment .frame-rocket {
  position: absolute; z-index: -1; pointer-events: none;
  width: 23%; height: auto; right: 0; top: 47%;
}
.celestial-assessment #check-intro,
.celestial-assessment #check-question,
.celestial-assessment #check-result { max-width: none; }
.celestial-assessment #check-question { display: flex; flex-direction: column; }
.celestial-assessment .sticker-heading {
  color: #fff;
  -webkit-text-stroke: 1.8px #111;
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 #111, -1px -1px 0 #111;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.celestial-assessment #intro-title,
.celestial-assessment #result-title {
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 30px 30px 24px 24px;
  padding: 10px 12px;
  margin: 0 -4% 22px;
}
.celestial-assessment #result-title span { font-size: .82em; }
.celestial-assessment #check-result #result-title { font-size: 1.5rem; line-height: 1.4; margin-bottom: 12px; }
.celestial-assessment .eyebrow { text-align: center; font-size: .75rem; }
.celestial-assessment .result-eyebrow { display: none; }
.celestial-assessment .button {
  border: 1.5px solid #171717;
  border-radius: 999px;
  min-height: 46px;
  background: #fff;
  color: #111;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
  transition: background-color .15s, color .15s;
}
.celestial-assessment .button:hover:not(:disabled) { background: #e8eef6; filter: none; }
.celestial-assessment .button:active:not(:disabled) { background: #203d5b; color: #fff; }
.celestial-assessment .button:disabled { opacity: .45; }
.celestial-assessment .text-button { color: #283444; }
.celestial-assessment .check-topline { position: absolute; top: -8px; left: 22%; right: 24%; gap: 6px; margin: 0; color: #fff; }
.celestial-assessment .check-topline .microcopy,
.celestial-assessment .check-topline .text-button { color: #fff; }
.celestial-assessment .check-topline .text-button { padding: 0; font-size: .7rem; min-height: 32px; }
.celestial-assessment .check-topline p { font-size: .7rem; }
.celestial-assessment .question-track { position: absolute; top: 42px; left: 23%; right: 23%; margin: 0; }
.celestial-assessment .question-track::before,
.celestial-assessment .question-track::after { display: none; }
.celestial-assessment progress { height: 3px; }
.celestial-assessment .question-context { order: 3; font-size: .65rem; margin: 0 0 5px; text-align: center; }
.celestial-assessment #question-category { order: 2; margin: 0 0 5px; font-size: .65rem; }
.celestial-assessment #question-title {
  position: relative;
  font-size: 1.08rem;
  line-height: 1.55;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 999px;
  padding: 10px 16px;
  margin: 0 -5% 20px;
  -webkit-text-stroke: 1.2px #111;
}
.celestial-assessment .question-scene {
  order: 1;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid #242424;
  padding: 10px;
  background: #fff;
  overflow: hidden;
}
.celestial-assessment .question-scene img {
  width: 100%; height: 100%; aspect-ratio: 1;
  border-radius: 50%; border: 3px solid #242424;
  object-fit: cover; object-position: 50% 50%; filter: grayscale(1);
}
.celestial-assessment .question-scene figcaption {
  left: 50%; right: auto; bottom: 22px; transform: translateX(-50%);
  white-space: nowrap; background: #fff; border-radius: 999px;
}
.celestial-assessment .question-example { order: 4; font-size: .7rem; margin-bottom: 12px; }
.celestial-assessment .answer-fieldset { order: 5; margin: 0; }
.celestial-assessment .answer-fieldset legend { font-size: .7rem; margin-bottom: 12px; }
.celestial-assessment .answer-options { grid-template-columns: 1fr; gap: 12px; }
.celestial-assessment .answer-option {
  min-height: 48px; padding: 10px 18px 10px 30px;
  font-size: .92rem; border: 1.5px solid #111;
}
.celestial-assessment .answer-option::before {
  content: ''; position: absolute; width: 38px; height: 38px;
  left: -18px; top: 50%; transform: translateY(-50%);
  background: #fff url('./assets/icons/search.svg') center / 30px no-repeat;
  border: 1px solid #111; border-radius: 50%;
}
.celestial-assessment .answer-option:has(input:checked) { background: #203d5b; color: #fff; border-width: 2px; }
.celestial-assessment .answer-option:has(input:checked)::before { background-color: #dce8f5; }
.celestial-assessment .question-actions { order: 6; margin-top: 20px; gap: 20px; }
.celestial-assessment #skip-question { order: 7; }
.celestial-assessment .question-actions .button { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; }
.celestial-assessment #next-question::after { content: ''; flex: 0 0 22px; height: 22px; background: url('./assets/icons/arrow-left.svg') center / contain no-repeat; transform: rotate(180deg); }
.celestial-assessment .result-overview { margin: 12px 0 16px; }
.celestial-assessment #result-context { font-size: .65rem; margin-bottom: 8px; }
.celestial-assessment .result-overview h2 { font-size: .8rem; line-height: 1.3; margin: 0 0 14px; }
.celestial-assessment .result-scale { margin: 0 0 14px; }
.celestial-assessment .scale-heading { gap: 3px 10px; margin-bottom: 5px; line-height: 1.3; }
.celestial-assessment .scale-heading h3 { font-size: 1rem; font-weight: 700; }
.celestial-assessment .scale-heading > span { font-size: .65rem; }
.celestial-assessment .scale-rail {
  height: 34px; border: 1.5px solid #111; background: #fff;
  border-radius: 999px; padding: 15px 18px;
}
.celestial-assessment .scale-track {
  height: 2px; margin: 0; background: #111;
}
.celestial-assessment .scale-track::before,
.celestial-assessment .scale-track::after {
  width: 23px; height: 23px; border: 1px solid #111; background: #fff;
}
.celestial-assessment .scale-track::before { left: -12px; }
.celestial-assessment .scale-track::after { right: -12px; }
.celestial-assessment .scale-midpoint {
  position: absolute; width: 1px; height: 22px; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: #111;
}
.celestial-assessment .scale-marker {
  width: 36px; height: 36px; filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}
.celestial-assessment .scale-endpoints { margin-top: 3px; font-size: .6rem; line-height: 1.2; }
.celestial-assessment .scale-help { font-size: .65rem; margin: 8px 0 0; }
.celestial-assessment .profile-actions { display: grid; gap: 10px; }
.celestial-assessment .profile-actions .button {
  display: block; width: 100%; padding: 9px 6px; font-size: 1.03rem;
  color: #fff; -webkit-text-stroke: 1.2px #111; paint-order: stroke fill;
  text-shadow: .6px .6px 0 #111;
}
.celestial-assessment .result-toolbar { border: 0; gap: 8px; padding-top: 18px; }
.celestial-assessment .result-toolbar .button { font-size: .7rem; min-height: 44px; padding: 7px; }
.celestial-assessment .result-disclaimer { font-size: .65rem; margin-bottom: 10px; }
.celestial-assessment details { border-color: #77808a; font-size: .75rem; padding-top: 10px; margin-top: 12px; }
.celestial-assessment details summary { min-height: 44px; }
.celestial-assessment #ar-filter-status:empty,
.celestial-assessment #download-status:empty { display: none; }
.celestial-assessment .ar-next { margin-top: 8px; }
.celestial-assessment .ar-next p { font-size: .75rem; }
.celestial-assessment .site-footer { color: #e3eaf4; text-align: center; font-size: .65rem; }
.celestial-assessment dialog { color: #111; background: #e4e7eb; border: 2px solid #111; border-radius: 24px; width: min(90vw, 460px); padding: 24px; }
.celestial-assessment .result-row { overflow-wrap: anywhere; }
.celestial-assessment .scale-track.is-unrated { opacity: .5; }
@media (max-width: 640px) {
  .celestial-assessment .assessment-main { min-height: 177.78vw; padding-top: 19vw; padding-bottom: 40vw; }
}
@media (max-width: 420px) {
  .celestial-assessment .site-header { padding-inline: 16px; }
  .celestial-assessment .app-nav { gap: 12px; }
  .celestial-assessment #intro-title,
  .celestial-assessment #result-title { font-size: 1.38rem; }
  .celestial-assessment .check-steps { padding-left: 20px; }
  .celestial-assessment .profile-actions .button { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .celestial-assessment .button { transition: none; }
}