.doi {
  --doi-bg: #090711;
  --doi-panel: #12101d;
  --doi-panel-2: #191426;
  --doi-ink: #fff8eb;
  --doi-soft: #cfc5da;
  --doi-muted: #91899c;
  --doi-gold: #f1c66f;
  --doi-gold-2: #ffe3a4;
  --doi-violet: #a98cff;
  --doi-line: rgba(241, 198, 111, .25);
  --doi-good: #86d8b8;
  --doi-bad: #e8929e;
  position: relative;
  width: min(1180px, calc(100% - 24px));
  margin: 24px auto 38px;
  color: var(--doi-ink);
  font-family: inherit;
  overflow: hidden;
  border: 1px solid rgba(241, 198, 111, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 38%, rgba(109, 77, 178, .13), transparent 35%),
    linear-gradient(145deg, #0b0913, #08070e 70%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

.doi *, .doi *::before, .doi *::after { box-sizing: border-box; }
.doi [hidden] { display: none !important; }
.doi button, .doi input { font: inherit; }
.doi button { -webkit-tap-highlight-color: transparent; }

.doi-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-bottom: 1px solid var(--doi-line);
  isolation: isolate;
}

.doi-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.95) contrast(1.02);
}

.doi-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 5, 12, .98) 0%, rgba(7, 6, 13, .91) 31%, rgba(8, 7, 15, .42) 58%, rgba(6, 5, 12, .12) 100%),
    linear-gradient(0deg, rgba(7, 6, 13, .65), transparent 35%);
  z-index: 1;
}

.doi-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 520px;
  width: min(610px, 58%);
  padding: 66px 54px 54px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.doi-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--doi-gold);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.doi-kicker::before {
  width: 25px;
  height: 1px;
  content: '';
  background: currentColor;
  box-shadow: 31px 0 0 rgba(241, 198, 111, .28);
}

.doi-hero-copy h2,
.doi-head h2,
.doi-question h2,
.doi-result h2 {
  margin: 0;
  color: var(--doi-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

.doi-hero-copy h2 { max-width: 570px; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.01; }
.doi-hero-copy > p { max-width: 550px; margin: 22px 0 0; color: #e4dbe8; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; }

.doi-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.doi-hero-points span {
  padding: 8px 12px;
  border: 1px solid rgba(241, 198, 111, .34);
  border-radius: 999px;
  background: rgba(12, 9, 20, .65);
  color: var(--doi-gold-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
  backdrop-filter: blur(6px);
}

.doi-shell { padding: 34px; }
.doi-start, .doi-play, .doi-result, .doi-error, .doi-loading {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(25, 20, 38, .94), rgba(12, 10, 19, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.doi-start { padding: 42px; }
.doi-head { max-width: 810px; margin: 0 auto 32px; text-align: center; }
.doi-head .doi-kicker { justify-content: center; }
.doi-head h2 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; }
.doi-head p { margin: 17px auto 0; color: var(--doi-soft); font-size: 17px; line-height: 1.65; }

.doi-modes, .doi-sessions {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.doi-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.doi-mode, .doi-session {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(5, 4, 10, .58);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.doi-mode { min-height: 176px; padding: 22px 34px 20px 19px; gap: 15px; border-radius: 17px; }
.doi-mode:hover, .doi-session:hover { transform: translateY(-2px); border-color: rgba(241, 198, 111, .48); }
.doi-mode.is-selected, .doi-session.is-selected {
  border-color: var(--doi-gold);
  background: linear-gradient(145deg, rgba(83, 50, 45, .58), rgba(45, 28, 57, .7));
  box-shadow: 0 0 0 1px rgba(241, 198, 111, .08), inset 0 0 28px rgba(241, 198, 111, .04);
}
.doi-mode input, .doi-session input { position: absolute; opacity: 0; pointer-events: none; }
.doi-mode-mark {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(241, 198, 111, .55);
  border-radius: 50%;
  color: var(--doi-gold);
  font-size: 23px;
  line-height: 1;
}
.doi-mode > span:nth-of-type(2), .doi-session > span { display: flex; min-width: 0; flex-direction: column; }
.doi-mode strong { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.2; }
.doi-mode small { margin-top: 7px; color: var(--doi-gold); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.doi-mode em { margin-top: 9px; color: var(--doi-soft); font-size: 14px; font-style: normal; line-height: 1.45; }
.doi-mode > i, .doi-session > i {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
}
.doi-mode.is-selected > i, .doi-session.is-selected > i { border-color: var(--doi-gold); box-shadow: inset 0 0 0 4px var(--doi-gold); }

.doi-sessions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.doi-sessions legend { display: block; width: 100%; margin: 0 0 13px; padding: 0; }
.doi-sessions legend strong { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 23px; }
.doi-sessions legend small { display: block; margin-top: 4px; color: var(--doi-muted); font-size: 13px; }
.doi-session { min-height: 88px; padding: 18px 35px 16px 18px; border-radius: 14px; }
.doi-session strong { font-size: 15px; }
.doi-session small { margin-top: 7px; color: var(--doi-soft); font-size: 13px; }

.doi-rules { margin-top: 28px; padding: 24px; border: 1px solid rgba(169, 140, 255, .18); border-radius: 16px; background: rgba(8, 7, 14, .5); }
.doi-rules h3 { margin: 0 0 18px; color: var(--doi-gold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.doi-rules ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.doi-rules li { display: flex; gap: 11px; color: var(--doi-soft); font-size: 14px; line-height: 1.5; }
.doi-rules b { color: var(--doi-violet); font-size: 12px; letter-spacing: .07em; }

.doi-btn {
  display: inline-flex;
  min-height: 52px;
  margin: 28px auto 0;
  padding: 13px 22px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid #f2cc7b;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4d58f, #c78d3e);
  color: #17100a;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 28px rgba(199, 141, 62, .2);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.doi-start > .doi-btn { display: flex; }
.doi-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 32px rgba(199, 141, 62, .27); }
.doi-btn:focus-visible, .doi-choice:focus-visible, .doi-mode:has(input:focus-visible), .doi-session:has(input:focus-visible) { outline: 3px solid rgba(169, 140, 255, .65); outline-offset: 3px; }
.doi-btn.is-secondary { border-color: rgba(241, 198, 111, .35); background: transparent; color: var(--doi-gold-2); box-shadow: none; }
.doi-btn:disabled { cursor: wait; opacity: .58; transform: none; }
.doi-privacy, .doi-disclaimer { color: var(--doi-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.doi-privacy { margin: 13px 0 0; }
.doi-disclaimer { margin: 0; padding: 0 28px 26px; }

.doi-loading { display: grid; min-height: 280px; padding: 40px; place-items: center; align-content: center; gap: 20px; text-align: center; }
.doi-loading > span { position: relative; display: block; width: 64px; height: 82px; }
.doi-loading i { position: absolute; inset: 0; border: 1px solid var(--doi-gold); border-radius: 7px; background: linear-gradient(145deg, #201733, #0b0912); animation: doi-turn 1.4s ease-in-out infinite; }
.doi-loading i:last-child { animation-delay: -.7s; border-color: var(--doi-violet); }
.doi-loading strong { color: var(--doi-gold-2); letter-spacing: .04em; }
@keyframes doi-turn { 0%, 100% { transform: perspective(300px) rotateX(0); opacity: .45; } 50% { transform: perspective(300px) rotateX(180deg); opacity: 1; } }

.doi-play { padding: 24px; }
.doi-scoreboard {
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
  padding: 13px 16px 19px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: rgba(5, 4, 10, .55);
}
.doi-scoreboard p { margin: 0; text-align: center; }
.doi-scoreboard small { display: block; color: var(--doi-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.doi-scoreboard strong { display: block; margin-top: 3px; color: var(--doi-ink); font-size: 19px; }
.doi-progress { position: absolute; right: 16px; bottom: 8px; left: 16px; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.doi-progress i { display: block; width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--doi-gold), var(--doi-violet)); transition: width .3s ease; }

.doi-stage { display: grid; grid-template-columns: minmax(230px, 330px) minmax(0, 1fr); gap: 28px; align-items: center; }
.doi-card { position: relative; margin: 0; padding: 20px 18px 17px; text-align: center; perspective: 1000px; }
.doi-card-visual {
  position: relative;
  z-index: 2;
  width: min(255px, 100%);
  aspect-ratio: 10 / 17;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(248, 218, 153, .85);
  border-radius: 12px;
  background: #050409;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .48), 0 0 0 5px rgba(241, 198, 111, .06);
  transform-origin: center;
  transition: transform .82s cubic-bezier(.2, .75, .18, 1);
}
.doi-card.is-reversed .doi-card-visual { transform: rotate(180deg); }
.doi-card-visual img { display: block; width: 100%; height: 100%; object-fit: contain; background: #050409; }
.doi-orbit { position: absolute; z-index: 1; top: 45%; left: 50%; width: 108%; height: 42%; transform: translate(-50%, -50%); border: 1px solid rgba(241, 198, 111, .35); border-radius: 50%; box-shadow: 0 0 22px rgba(169, 140, 255, .12); }
.doi-orbit::before, .doi-orbit::after { position: absolute; color: var(--doi-gold); font-size: 19px; content: '›'; text-shadow: 0 0 10px rgba(241, 198, 111, .7); }
.doi-orbit::before { top: -8px; right: 15%; transform: rotate(10deg); }
.doi-orbit::after { bottom: -8px; left: 15%; transform: rotate(190deg); }
.doi-orbit i { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--doi-violet); box-shadow: 0 0 12px var(--doi-violet); }
.doi-orbit i:first-child { left: -3px; }
.doi-orbit i:last-child { right: -3px; }
.doi-card figcaption { position: relative; z-index: 3; display: flex; margin-top: 13px; flex-direction: column; align-items: center; }
.doi-card figcaption strong { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; }
.doi-card-group { margin-top: 3px; color: var(--doi-gold); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.doi-card-keywords { margin-top: 6px; color: var(--doi-soft); font-size: 12px; transition: opacity .25s ease; }
.doi-card figcaption em { margin-top: 9px; color: var(--doi-muted); font-size: 10px; font-style: normal; line-height: 1.35; }
.doi[data-mode='expert']:not(.is-revealed) .doi-card-keywords { opacity: 0; }

.doi-question { min-width: 0; padding: 25px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(6, 5, 11, .54); }
.doi-question .doi-kicker { margin-bottom: 13px; }
.doi-reading { margin: 0; padding: 19px 20px; border-left: 2px solid var(--doi-gold); border-radius: 0 13px 13px 0; background: linear-gradient(90deg, rgba(241, 198, 111, .105), rgba(169, 140, 255, .055)); color: var(--doi-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(19px, 2.2vw, 25px); font-style: italic; line-height: 1.5; }
.doi-question h2 { margin-top: 25px; font-size: clamp(25px, 3.4vw, 37px); line-height: 1.12; }
.doi-question > p { margin: 9px 0 0; color: var(--doi-muted); font-size: 13px; }
.doi-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 19px; }
.doi-choice { display: grid; min-height: 112px; padding: 16px; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 15px; background: #0b0912; color: var(--doi-ink); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.doi-choice:hover { transform: translateY(-2px); border-color: rgba(241, 198, 111, .52); }
.doi-choice > span { display: grid; width: 43px; height: 43px; grid-row: 1 / 3; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 23px; }
.doi-choice strong { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }
.doi-choice small { color: var(--doi-muted); font-size: 11px; }
.doi-choice.is-upright { color: var(--doi-gold-2); }
.doi-choice.is-reversed { color: #c8b9ff; }
.doi-choice.is-correct { border-color: var(--doi-good); background: rgba(57, 116, 92, .24); box-shadow: inset 0 0 25px rgba(134, 216, 184, .07); }
.doi-choice.is-wrong { border-color: var(--doi-bad); background: rgba(120, 46, 58, .22); }
.doi-choice:disabled { cursor: default; transform: none; }
.doi-feedback { min-height: 22px; margin: 13px 0 0 !important; color: var(--doi-gold-2) !important; font-weight: 800; }

.doi-reveal { margin-top: 22px; padding: 24px; border: 1px solid rgba(241, 198, 111, .24); border-radius: 18px; background: linear-gradient(140deg, rgba(38, 25, 38, .92), rgba(11, 9, 18, .96)); }
.doi-reveal.is-reversed { border-color: rgba(169, 140, 255, .4); }
.doi-reveal header { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: end; }
.doi-reveal-status { color: var(--doi-gold); font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.doi-reveal-title { margin: 0; color: var(--doi-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(25px, 3vw, 34px); }
.doi-reveal header > p { grid-row: 1 / 3; grid-column: 2; margin: 0; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(5, 4, 10, .55); text-align: right; }
.doi-reveal header small { display: block; color: var(--doi-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.doi-turn-type { display: block; margin-top: 4px; color: var(--doi-violet); font-size: 14px; }
.doi-reveal.is-upright .doi-turn-type { color: var(--doi-gold); }
.doi-learning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 19px; }
.doi-learning section { padding: 18px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(5, 4, 10, .45); }
.doi-learning h4 { margin: 0 0 8px; color: var(--doi-gold); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.doi-learning p { margin: 0; color: var(--doi-soft); line-height: 1.55; }
.doi-reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.doi-reveal-actions .doi-btn { margin-right: 0; margin-left: 0; }

.doi-result { padding: 44px; text-align: center; }
.doi-result .doi-kicker { justify-content: center; }
.doi-result h2 { font-size: clamp(34px, 5vw, 52px); }
.doi-result-score { display: block; margin-top: 22px; color: var(--doi-gold); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 7vw, 68px); line-height: 1; }
.doi-result-rank { margin: 15px 0 0; color: var(--doi-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 25px; }
.doi-result-text { max-width: 680px; margin: 10px auto 0; color: var(--doi-soft); line-height: 1.6; }
.doi-result-stats, .doi-orientation-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 790px; margin: 25px auto 0; }
.doi-orientation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.doi-result-stats span, .doi-orientation-stats span { padding: 13px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(5, 4, 10, .48); color: var(--doi-soft); font-size: 13px; }
.doi-review { max-width: 790px; margin: 25px auto 0; padding: 18px; border: 1px solid rgba(241, 198, 111, .2); border-radius: 15px; text-align: left; }
.doi-review h3 { margin: 0 0 13px; color: var(--doi-gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.doi-review > div { display: flex; flex-wrap: wrap; gap: 10px; }
.doi-review span { display: flex; min-width: 145px; padding: 7px; flex: 1 1 155px; align-items: center; gap: 9px; border-radius: 9px; background: rgba(5, 4, 10, .5); }
.doi-review img { width: 35px; height: 60px; object-fit: cover; border-radius: 4px; }
.doi-review strong { font-size: 12px; }
.doi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.doi-actions .doi-btn { margin-right: 0; margin-left: 0; }
.doi-share-status { min-height: 18px; margin: 10px 0 0; color: var(--doi-muted); font-size: 12px; }
.doi-error { padding: 50px 25px; text-align: center; }
.doi-error p { margin: 0; color: var(--doi-soft); }

@media (max-width: 860px) {
  .doi { width: min(100% - 16px, 760px); border-radius: 20px; }
  .doi-hero, .doi-hero-copy { min-height: 560px; }
  .doi-hero-copy { width: 67%; padding: 48px 34px; }
  .doi-shell { padding: 20px; }
  .doi-start { padding: 28px; }
  .doi-modes { grid-template-columns: 1fr; }
  .doi-mode { min-height: 132px; }
  .doi-rules ol { grid-template-columns: 1fr; }
  .doi-stage { grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); gap: 14px; }
  .doi-card { padding-right: 8px; padding-left: 8px; }
  .doi-question { padding: 20px; }
}

@media (max-width: 640px) {
  .doi { width: calc(100% - 10px); margin-top: 14px; border-radius: 17px; }
  .doi-hero { min-height: 620px; }
  .doi-hero > img { object-position: 65% center; }
  .doi-hero-veil { background: linear-gradient(0deg, rgba(6, 5, 12, .99) 5%, rgba(7, 6, 13, .87) 45%, rgba(7, 6, 13, .18) 78%); }
  .doi-hero-copy { min-height: 620px; width: 100%; padding: 310px 23px 30px; justify-content: flex-end; }
  .doi-hero-copy h2 { font-size: clamp(36px, 11.2vw, 50px); }
  .doi-hero-copy > p { margin-top: 15px; font-size: 15px; line-height: 1.55; }
  .doi-hero-points { margin-top: 17px; }
  .doi-hero-points span { padding: 7px 9px; font-size: 10px; }
  .doi-shell { padding: 11px; }
  .doi-start, .doi-play, .doi-result { border-radius: 16px; }
  .doi-start { padding: 24px 15px; }
  .doi-head { margin-bottom: 24px; }
  .doi-head h2 { font-size: 34px; }
  .doi-head p { font-size: 15px; }
  .doi-mode { min-height: 126px; padding: 18px 34px 17px 15px; gap: 12px; }
  .doi-mode-mark { flex-basis: 38px; width: 38px; height: 38px; font-size: 20px; }
  .doi-mode strong { font-size: 18px; }
  .doi-sessions { grid-template-columns: 1fr; }
  .doi-session { min-height: 74px; }
  .doi-rules { padding: 19px 16px; }
  .doi-play { padding: 12px; }
  .doi-scoreboard { margin-bottom: 15px; padding-right: 9px; padding-left: 9px; }
  .doi-scoreboard strong { font-size: 16px; }
  .doi-stage { grid-template-columns: 1fr; }
  .doi-card { padding: 7px 8px 11px; }
  .doi-card-visual { width: min(205px, 67vw); }
  .doi-orbit { width: min(310px, 92vw); }
  .doi-card figcaption strong { font-size: 19px; }
  .doi-question { padding: 19px 14px; }
  .doi-reading { padding: 16px 15px; font-size: 19px; }
  .doi-question h2 { font-size: 27px; }
  .doi-choices { gap: 9px; }
  .doi-choice { min-height: 100px; padding: 12px 9px; grid-template-columns: 35px 1fr; gap: 2px 8px; }
  .doi-choice > span { width: 35px; height: 35px; font-size: 19px; }
  .doi-choice strong { font-size: 17px; }
  .doi-choice small { font-size: 9px; }
  .doi-reveal { padding: 18px 14px; }
  .doi-reveal header { grid-template-columns: 1fr; }
  .doi-reveal header > p { grid-row: auto; grid-column: auto; margin-top: 9px; text-align: left; }
  .doi-learning { grid-template-columns: 1fr; }
  .doi-result { padding: 34px 15px; }
  .doi-result-stats { grid-template-columns: 1fr; }
  .doi-orientation-stats { grid-template-columns: 1fr 1fr; }
  .doi-actions, .doi-reveal-actions { align-items: stretch; flex-direction: column; }
  .doi-actions .doi-btn, .doi-reveal-actions .doi-btn { width: 100%; margin-top: 10px; }
  .doi-disclaimer { padding: 0 18px 20px; }
}

@media (max-width: 390px) {
  .doi-hero-copy { padding-right: 17px; padding-left: 17px; }
  .doi-hero-copy h2 { font-size: 37px; }
  .doi-hero-points span:last-child { display: none; }
  .doi-choices { grid-template-columns: 1fr; }
  .doi-choice { min-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .doi *, .doi *::before, .doi *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}