:root {
  --outside: #afbccb;
  --board: #1b2836;
  --panel: #263646;
  --panel-deep: #14212e;
  --paper: #f4f1e9;
  --muted: #aebccc;
  --line: #536374;
  --orange: #f26b3e;
  --yellow: #f4c64d;
  --blue: #8ab0d5;
  --ink: #17222d;
  --phone: #fbfaf4;
  --shadow: rgba(24, 38, 52, .24);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-synthesis: none;
  line-break: strict;
  overflow-wrap: break-word;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--outside);
  color: var(--paper);
}

body {
  overflow-x: hidden;
  font-family: var(--sans);
}

h1,
h2,
h3,
p,
blockquote,
ul,
ol { margin: 0; }

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.018em;
  text-wrap: pretty;
}

button { font: inherit; }
.no-break { white-space: nowrap; }

.review-bar {
  height: 46px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6c7e92;
  font: 12px/1 var(--mono);
  letter-spacing: .08em;
}

.review-mark,
.review-index {
  color: var(--orange);
  font-weight: 700;
}

.review-index {
  min-width: 110px;
  text-align: right;
}

.review-hint { opacity: .82; }

.prototype-frame {
  min-height: calc(100vh - 46px);
  padding: 22px 24px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  gap: 24px;
  align-items: center;
}

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--board);
  box-shadow: 0 22px 52px var(--shadow);
  outline: 1px solid rgba(27, 40, 54, .18);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(138, 176, 213, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 176, 213, .07) 1px, transparent 1px),
    radial-gradient(circle at 81% 17%, rgba(242, 107, 62, .22), transparent 27%);
  background-size: 100% 34px, 68px 100%, 100% 100%;
  opacity: .56;
}

.stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 14px;
  pointer-events: none;
  opacity: .45;
  background:
    linear-gradient(var(--orange), var(--orange)) left top / 22px 1px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left top / 1px 22px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right top / 22px 1px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right top / 1px 22px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left bottom / 22px 1px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left bottom / 1px 22px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right bottom / 22px 1px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right bottom / 1px 22px no-repeat;
}

.stage-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 5.1% 6.2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.topline {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
  color: var(--muted);
  font: 12px/1 var(--mono);
  letter-spacing: .075em;
}

.topline strong {
  color: var(--yellow);
  font-weight: 500;
}

.eyebrow,
.block-lead {
  color: var(--yellow);
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .085em;
}

/* Cover */
.cover {
  position: relative;
  height: 100%;
  padding: 8% 6% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.cover-topline,
.cover-footer {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--muted);
  font: 11px/1 var(--mono);
  letter-spacing: .09em;
}

.cover-topline {
  top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.cover-topline span:first-child { color: var(--yellow); text-align: left; }
.cover-topline span:last-child { text-align: right; }

.cover-footer {
  bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}


.cover-title {
  position: relative;
  z-index: 2;
  color: var(--paper);
  font-size: clamp(52px, 7.2vw, 110px);
  line-height: 1;
  letter-spacing: -.03em;
}

.cover-question {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  color: var(--blue);
  font-family: var(--serif);
  font-size: clamp(19px, 2.35vw, 36px);
  font-weight: 700;
  line-height: 1.25;
}

.cover-emphasis { color: var(--orange); }

.cover-sub {
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(14px, 1.35vw, 21px);
  line-height: 1.4;
}

.cover-number {
  position: absolute;
  z-index: 0;
  top: 8%;
  right: 1%;
  color: rgba(242, 107, 62, .08);
  font: 800 clamp(130px, 18vw, 280px)/1 var(--mono);
  letter-spacing: -.1em;
}

/* Join */
.join {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 18vw, 220px);
  gap: 8%;
  align-items: center;
}

.join h2 {
  max-width: 720px;
  margin-top: 17px;
  font-size: clamp(35px, 4.5vw, 68px);
  line-height: 1.08;
}

.join p {
  margin-top: 20px;
  color: var(--blue);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.45;
}

.join-card {
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid var(--line);
}

.qr {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--orange);
  background-color: #fff;
  background-image:
    linear-gradient(90deg, #182b3a 10%, transparent 10% 21%, #182b3a 21% 33%, transparent 33% 44%, #182b3a 44% 56%, transparent 56% 68%, #182b3a 68% 79%, transparent 79% 91%, #182b3a 91%),
    linear-gradient(#182b3a 10%, transparent 10% 20%, #182b3a 20% 32%, transparent 32% 43%, #182b3a 43% 55%, transparent 55% 66%, #182b3a 66% 78%, transparent 78% 88%, #182b3a 88% 95%, transparent 95%);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 6px #fff;
  outline: 1px solid var(--yellow);
  font: 700 10px/1 var(--mono);
}

.qr span { padding: 3px 4px; background: #fff; }

.qr-large {
  width: 100%;
  max-width: 190px;
  background-size: 27px 27px;
  box-shadow: inset 0 0 0 9px #fff;
  font-size: 11px;
}

.joined {
  margin-top: 22px;
  color: var(--orange);
  font: 600 clamp(15px, 1.3vw, 20px)/1.4 var(--mono);
  letter-spacing: .05em;
  text-align: center;
}

/* Story pages */
.story-page {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 6%;
  align-items: center;
}

.story-index {
  position: absolute;
  right: 0;
  bottom: -1%;
  z-index: -1;
  color: rgba(138, 176, 213, .075);
  font: 800 clamp(90px, 12vw, 176px)/.8 var(--mono);
  letter-spacing: -.1em;
}

.story-heading { min-width: 0; }

.story-heading h2 {
  margin-top: 14px;
  font-size: clamp(29px, 3.4vw, 52px);
  line-height: 1.15;
}

.title-line { display: block; }
.lead-line { display: block; }
.lead-line + .lead-line { margin-top: .28em; }

.story-pretitle {
  margin-top: 12px;
  color: var(--blue);
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.35;
}

.story-heading > p {
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.58;
  font-weight: 400;
}

.story-content {
  min-width: 0;
  display: grid;
  gap: 13px;
  align-content: center;
}

.content-lead {
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(16px, 1.45vw, 23px);
  font-weight: 500;
  line-height: 1.52;
}

.story-quote {
  padding: 17px 21px;
  border: 1px solid rgba(138, 176, 213, .26);
  border-left: 4px solid var(--orange);
  background: rgba(255, 255, 255, .047);
}

.story-quote > span {
  display: block;
  margin-bottom: 8px;
  color: var(--yellow);
  font: 600 12px/1.35 var(--mono);
  letter-spacing: .04em;
}

.story-quote p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.55vw, 24px);
  font-weight: 500;
  line-height: 1.53;
}

.story-list {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(138, 176, 213, .09), transparent 82%);
}

.story-list ul {
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.story-list li {
  position: relative;
  padding-left: 25px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.42;
  font-weight: 500;
}

.story-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .63em;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

.story-text {
  padding: 17px 21px;
  color: var(--muted);
  border-left: 2px solid var(--blue);
  font-family: var(--serif);
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.53;
}

.story-text.accent { color: var(--yellow); border-left-color: var(--yellow); }

.story-numbered {
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
  counter-reset: story-point;
}

.story-numbered li {
  position: relative;
  min-height: 54px;
  padding: 10px 16px 10px 56px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .045);
  border-bottom: 1px solid rgba(138, 176, 213, .25);
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.45;
  counter-increment: story-point;
}

.story-numbered li::before {
  content: "0" counter(story-point);
  position: absolute;
  left: 15px;
  color: var(--orange);
  font: 700 15px/1 var(--mono);
}

.story-result {
  padding: 11px 0 4px;
  color: var(--orange);
  font-family: var(--serif);
  font-size: clamp(28px, 3.15vw, 48px);
  font-weight: 700;
  line-height: 1.15;
}

.layout-two-quotes .story-content { grid-template-columns: 1fr; }

.layout-dialogue {
  grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
  gap: 4.5%;
}

.layout-dialogue .story-content {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.layout-dialogue .story-quote { padding: 12px 14px; }
.layout-dialogue .story-quote p { font-size: clamp(13px, 1.18vw, 18px); line-height: 1.42; }
.layout-dialogue .story-quote > span { margin-bottom: 5px; font-size: 10px; }

.layout-list-focus {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

.layout-list-focus .story-content:has(.content-lead) {
  grid-template-rows: auto auto;
  gap: 10px;
}

.layout-list-focus .content-lead {
  color: var(--yellow);
  font-size: clamp(16px, 1.35vw, 21px);
}

.layout-statement {
  grid-template-columns: 1fr;
  align-content: center;
  padding-left: 9%;
  padding-right: 9%;
}

.layout-statement .story-heading h2 {
  max-width: 920px;
  font-size: clamp(36px, 4.7vw, 72px);
}

.layout-statement .story-heading > p {
  max-width: 880px;
  font-size: clamp(17px, 1.75vw, 27px);
}

.layout-statement .story-content { max-width: 880px; margin-top: 17px; }

.layout-hero-quote {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}

.layout-hero-quote .story-quote { padding: 23px 27px; }
.layout-hero-quote .story-quote p { font-size: clamp(17px, 1.78vw, 28px); }

.layout-answer {
  grid-template-columns: 1fr;
  padding-left: 18%;
  padding-right: 6%;
}

.layout-answer .story-heading { display: none; }
.layout-answer .story-content { gap: 8px; }

.layout-quote-list {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 4.5%;
}

.layout-quote-list .story-content {
  grid-template-columns: 1.08fr .92fr;
  gap: 12px;
}

.layout-quote-list .story-list { padding: 15px 17px; }
.layout-quote-list .story-list ul { gap: 8px; }
.layout-quote-list .story-list li { padding-left: 18px; font-size: clamp(13px, 1.18vw, 18px); }

.layout-numbered {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
}

.layout-numbered .story-content { gap: 9px; }
.layout-numbered .story-text { padding-top: 11px; padding-bottom: 11px; }

/* Situation-page grammar: scene title first, then an asymmetric story composition. */
.layout-headline-two,
.layout-scene-stack,
.layout-headline-dialogue,
.layout-headline-results {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  align-content: center;
}

.layout-headline-two .story-heading h2,
.layout-scene-stack .story-heading h2,
.layout-headline-dialogue .story-heading h2,
.layout-headline-results .story-heading h2 {
  max-width: 1180px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.12;
}

.layout-headline-two .story-content {
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: 5%;
  align-items: center;
}

.layout-headline-two .content-lead {
  color: var(--paper);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.25;
}

.layout-scene-stack .story-content {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  grid-template-rows: auto auto;
  gap: 11px 4.5%;
  align-items: stretch;
}

.layout-scene-stack .content-lead {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--paper);
  font-size: clamp(21px, 2.25vw, 34px);
  font-weight: 600;
  line-height: 1.48;
}

.layout-scene-stack .story-quote,
.layout-scene-stack .story-list { padding: 14px 17px; }
.layout-scene-stack .story-quote p { font-size: clamp(14px, 1.35vw, 21px); line-height: 1.42; }
.layout-scene-stack .story-list ul { gap: 7px; }
.layout-scene-stack .story-list li { padding-left: 18px; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.36; }

.layout-headline-dialogue .story-content {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px 4.5%;
}

.layout-headline-dialogue .content-lead {
  grid-row: 1 / 4;
  align-self: center;
  color: var(--paper);
  font-size: clamp(20px, 2.05vw, 31px);
  font-weight: 600;
  line-height: 1.48;
}

.layout-headline-dialogue .story-quote { padding: 10px 14px; }
.layout-headline-dialogue .story-quote > span { margin-bottom: 4px; font-size: 10px; }
.layout-headline-dialogue .story-quote p { font-size: clamp(12px, 1.12vw, 17px); line-height: 1.38; }

.layout-headline-dialogue[data-page-id="story-18"] .story-heading { padding-top: 12px; }

.story-page[data-page-id="story-21"] .story-heading .eyebrow {
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.layout-headline-results .story-content {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-rows: auto 1fr 1fr;
  gap: 9px 3.5%;
  align-items: stretch;
}

.layout-headline-results .content-lead {
  grid-column: 1 / -1;
  max-width: 1100px;
}

.layout-headline-results .story-list { grid-row: 2 / 4; }
.layout-headline-results .story-text {
  display: flex;
  align-items: center;
  padding: 14px 17px;
  color: var(--paper);
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.45;
}

.layout-ending-stack {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 5%;
}

.layout-ending-stack .story-content { gap: 10px; }
.layout-ending-stack .content-lead { color: var(--paper); }
.layout-ending-stack .story-list li,
.layout-ending-stack .story-quote p { font-size: clamp(16px, 1.55vw, 24px); }

/* Poll */
.poll-page {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.poll-head {
  flex: 0 0 auto;
  min-height: 76px;
  margin: 14px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 4%;
  align-items: center;
}

.poll-head h2 {
  font-size: clamp(22px, 2.45vw, 38px);
  line-height: 1.18;
}

.poll-tools {
  padding-left: 16px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  border-left: 1px solid var(--line);
}

.poll-state {
  color: var(--yellow);
  font: 700 12px/1.42 var(--mono);
  white-space: nowrap;
}

.poll-state small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}

.poll-options {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.poll-option {
  min-width: 0;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 142px;
  gap: 11px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 4px 0 rgba(8, 17, 25, .18);
}

.poll-option > b {
  align-self: start;
  color: var(--orange);
  font: 700 17px/1.25 var(--mono);
}

.option-copy { min-width: 0; }

.option-text {
  font-family: var(--serif);
  font-size: clamp(14px, 1.12vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}

.option-comment {
  position: relative;
  min-height: 1.45em;
  margin: 5px 0 0 10px;
  padding-left: 11px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(2px);
  color: #9cb8d1;
  font-family: var(--serif);
  font-size: clamp(11px, .86vw, 14px);
  font-weight: 400;
  line-height: 1.42;
  transition: opacity .22s ease, transform .22s ease;
}

.option-comment.visible {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.option-comment::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 2px;
  background: rgba(138, 176, 213, .55);
}

.option-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  color: var(--muted);
  font: 11px/1 var(--mono);
  transition: opacity .22s ease;
}

.option-result.visible { visibility: visible; opacity: 1; }

.option-result .track { height: 8px; background: #3a4a5b; }
.option-result i { display: block; height: 100%; background: var(--blue); }
.poll-option.recommended { border-color: rgba(244, 198, 77, .62); }
.poll-option.recommended .option-result i { background: var(--orange); }

.recommend {
  min-height: 29px;
  margin-top: 8px;
  padding: 6px 11px;
  align-self: flex-end;
  visibility: hidden;
  opacity: 0;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font: 700 13px/1.2 var(--mono);
  transition: opacity .22s ease;
}

.recommend.visible { visibility: visible; opacity: 1; }

.five-options .poll-head { min-height: 66px; margin: 10px 0 8px; }
.five-options .poll-head h2 { font-size: clamp(20px, 2.15vw, 33px); }
.five-options .poll-options { grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 5px; }
.five-options .poll-option { padding-top: 5px; padding-bottom: 5px; }
.five-options .option-text { font-size: clamp(13px, 1.02vw, 16px); line-height: 1.32; }
.five-options .option-comment { margin-top: 2px; font-size: clamp(10px, .78vw, 12.5px); line-height: 1.32; }
.five-options .recommend { margin-top: 5px; }

/* Reflection */
.reflection {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px 5% 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reflection-index {
  position: absolute;
  right: 1%;
  bottom: 1%;
  color: rgba(138, 176, 213, .055);
  font: 800 clamp(100px, 13vw, 190px)/.8 var(--mono);
  letter-spacing: -.1em;
}

.reflection-grid {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: grid;
  gap: 16px;
}

.reflection-question {
  min-height: 120px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 17px;
  align-items: center;
  border-left: 4px solid var(--orange);
  background: rgba(255, 255, 255, .05);
}

.reflection-question:nth-child(2) { border-left-color: var(--yellow); }
.reflection-question > span { color: var(--orange); font: 700 17px/1 var(--mono); }
.reflection-question:nth-child(2) > span { color: var(--yellow); }
.reflection-question p { font-family: var(--serif); font-size: clamp(21px, 2.15vw, 33px); font-weight: 600; line-height: 1.34; }

.reflection-hint {
  position: relative;
  z-index: 1;
  margin-top: 17px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.45;
}

.reflection-hint strong { color: var(--yellow); font-weight: 600; }

/* Teacher controls */
.teacher-footer-controls {
  position: absolute;
  z-index: 5;
  left: 6.2%;
  right: 6.2%;
  bottom: 3.9%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 18px;
  pointer-events: none;
}

.teacher-text-control {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 12px/1 var(--mono);
  letter-spacing: .075em;
  cursor: pointer;
  pointer-events: auto;
  transition: color .16s ease;
}

.teacher-text-control:hover,
.teacher-text-control:focus-visible {
  color: var(--yellow);
  outline: none;
}

.teacher-text-control:last-child {
  justify-self: end;
  color: var(--orange);
}

.teacher-text-control:first-child {
  justify-self: start;
}

.teacher-text-control:first-child:not([disabled]) {
  color: var(--orange);
}

.teacher-text-control[disabled] {
  opacity: .3;
  cursor: default;
}

.connection-status {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font: 12px/1 var(--mono);
  letter-spacing: .075em;
  white-space: nowrap;
}

.connection-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

.connection-status.connected,
.connection-status.restored { color: #79c9a4; }
.connection-status.reconnecting { color: var(--yellow); }
.connection-status.hands,
.connection-status.restored-hands { color: var(--orange); }
.connection-status.reconnecting i { animation: connection-pulse 1.2s ease-in-out infinite; }

@keyframes connection-pulse {
  50% { opacity: .35; transform: scale(.78); }
}

.teacher-startup,
.teacher-confirm {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(10, 18, 27, .64);
  pointer-events: auto;
}

.teacher-startup.visible,
.teacher-confirm.visible { display: grid; }

.teacher-startup-card,
.teacher-confirm-card {
  width: min(520px, 52%);
  padding: 30px 32px 26px;
  border: 1px solid var(--line);
  background: var(--board);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

.teacher-startup-card h2,
.teacher-confirm-card p {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 29px);
  font-weight: 600;
  line-height: 1.4;
}

.teacher-startup-card p,
.teacher-confirm-card small {
  display: block;
  margin: 13px 0 0;
  color: var(--muted);
  font: 13px/1.65 var(--sans);
}

.teacher-confirm-card small:empty { display: none; }

.teacher-startup-actions,
.teacher-confirm-actions {
  margin-top: 23px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.teacher-startup-actions button,
.teacher-confirm-actions button {
  min-width: 92px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: 12px/1.25 var(--mono);
  cursor: pointer;
}

.teacher-startup-actions button:not([disabled]):hover,
.teacher-startup-actions button:not([disabled]):focus-visible,
.teacher-confirm-actions button:hover,
.teacher-confirm-actions button:focus-visible {
  border-color: var(--yellow);
  color: var(--yellow);
  outline: none;
}

.teacher-startup-actions #startNew,
.teacher-startup-actions #retryStartup,
.teacher-confirm-actions #confirmProceed {
  border-color: var(--orange);
  color: var(--orange);
}

.teacher-startup-actions button[disabled] {
  opacity: .32;
  cursor: default;
}

/* Phone */
.phone-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.phone-label {
  color: #596c82;
  font: 11px/1 var(--mono);
  letter-spacing: .11em;
}

.phone-shell {
  width: 250px;
  padding: 6px;
  border: 7px solid #17232e;
  border-radius: 30px;
  background: #17232e;
  box-shadow: 0 18px 40px var(--shadow);
}

.phone-notch { height: 18px; display: grid; place-items: center; }
.phone-notch::before { content: ""; width: 74px; height: 12px; border-radius: 8px; background: #09111a; }

.phone {
  min-height: 500px;
  max-height: 620px;
  overflow: hidden;
  padding: 24px 18px 17px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--phone);
  color: var(--ink);
}

.phone-mini {
  color: #66788b;
  font: 11px/1.2 var(--mono);
  letter-spacing: .08em;
}

.phone h3 {
  margin: 17px 0 9px;
  font-size: 22px;
  line-height: 1.18;
}

.phone > p { color: #617184; font-size: 13px; line-height: 1.55; }

.phone-options {
  min-height: 0;
  margin-top: 14px;
  display: grid;
  gap: 6px;
  overflow: hidden;
}

.phone-option {
  padding: 7px 7px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 5px;
  border: 1px solid #c7d0d7;
  background: transparent;
  color: #1b2a39;
  text-align: left;
  cursor: pointer;
}

.phone-option b { color: #d45d35; font: 700 12px/1.35 var(--mono); }
.phone-option span { font-family: var(--serif); font-size: 11px; font-weight: 600; line-height: 1.35; }
.phone-option.selected { border-color: var(--orange); background: #fce8de; }

.phone-submit,
.phone-secondary {
  margin-top: auto;
  padding: 11px;
  border: 0;
  background: #2d5d85;
  color: #fff;
  font: 13px/1.2 var(--sans);
  cursor: pointer;
}

.phone-submit:disabled { opacity: .45; cursor: default; }
.phone-secondary { margin-top: 14px; border: 1px solid #9eb0bf; background: transparent; color: #2d5d85; }

.phone-done,
.phone-reflection {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #d2d9de;
  color: #d45d35;
  font-size: 13px;
  line-height: 1.55;
}

.phone-reflection { border-top: 3px solid var(--orange); color: #617184; }

@media (max-width: 1100px) {
  .prototype-frame { grid-template-columns: 1fr; padding: 16px; }
  .phone-wrap { display: none; }
  .stage-inner { padding: 5.2% 6%; }
  .topline { padding-bottom: 7px; font-size: 9px; }
  .eyebrow, .block-lead { font-size: 10px; }

  .cover { padding: 10% 5% 14%; }
  .cover-topline, .cover-footer { font-size: 9px; }
  .cover-topline { padding-bottom: 8px; }
  .cover-footer { padding-top: 8px; }
  .cover-title { font-size: clamp(48px, 8vw, 70px); }
  .cover-question { margin-top: 16px; font-size: clamp(18px, 3.2vw, 26px); }
  .cover-sub { font-size: clamp(13px, 2.2vw, 17px); }
  .cover-number { top: 10%; right: 2%; font-size: 150px; }

  .join { grid-template-columns: minmax(0, 1fr) 130px; gap: 5%; }
  .join h2 { margin-top: 8px; font-size: clamp(28px, 5.2vw, 43px); }
  .join p { margin-top: 10px; font-size: clamp(14px, 2.4vw, 18px); }
  .join-card { padding-left: 16px; }
  .joined { margin-top: 12px; font-size: 13px; }

  .story-page { padding-top: 10px; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 4%; }
  .story-heading h2 { margin-top: 7px; font-size: clamp(20px, 4vw, 32px); line-height: 1.12; }
  .story-heading > p { margin-top: 8px; font-size: clamp(11.5px, 2vw, 15px); line-height: 1.42; }
  .story-pretitle { margin-top: 8px; font-size: clamp(12px, 2.2vw, 17px); }
  .story-content { gap: 6px; }
  .content-lead { font-size: clamp(11.5px, 2vw, 15px); line-height: 1.4; }
  .story-quote { padding: 9px 11px; }
  .story-quote > span { margin-bottom: 4px; font-size: 10px; }
  .story-quote p { font-size: clamp(12px, 2.1vw, 16px); line-height: 1.38; }
  .story-list { padding: 10px 12px; }
  .story-list ul { gap: 6px; }
  .story-list li { padding-left: 15px; font-size: clamp(12px, 2.15vw, 16px); line-height: 1.34; }
  .story-list li::before { width: 7px; }
  .story-text { padding: 9px 11px; font-size: clamp(12px, 2.05vw, 15px); line-height: 1.38; }
  .story-numbered { gap: 6px; }
  .story-numbered li { min-height: 32px; padding: 6px 9px 6px 34px; font-size: clamp(11px, 1.9vw, 14px); line-height: 1.32; }
  .story-numbered li::before { left: 9px; font-size: 10px; }
  .story-result { padding-top: 5px; font-size: clamp(20px, 4vw, 34px); }
  .story-index { font-size: 70px; }
  .layout-statement { grid-template-columns: 1fr; padding-left: 8%; padding-right: 8%; }
  .layout-statement .story-heading h2 { font-size: clamp(25px, 5.2vw, 42px); }
  .layout-statement .story-heading > p { font-size: clamp(12px, 2.4vw, 18px); }
  .layout-statement .story-content { margin-top: 8px; }
  .layout-dialogue { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 3%; }
  .layout-dialogue .story-content { gap: 4px; }
  .layout-dialogue .story-quote { padding: 6px 7px; }
  .layout-dialogue .story-quote p { font-size: clamp(11px, 1.75vw, 13px); line-height: 1.32; }
  .layout-dialogue .story-quote > span { margin-bottom: 2px; font-size: 9px; }
  .layout-hero-quote .story-quote { padding: 11px 13px; }
  .layout-hero-quote .story-quote p { font-size: clamp(12px, 2.15vw, 16px); }
  .layout-quote-list { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 3%; }
  .layout-quote-list .story-content { gap: 5px; }
  .layout-quote-list .story-list { padding: 7px 8px; }
  .layout-quote-list .story-list ul { gap: 3px; }
  .layout-quote-list .story-list li { padding-left: 11px; font-size: clamp(10px, 1.65vw, 12.5px); }
  .layout-answer { grid-template-columns: 1fr; padding-left: 16%; padding-right: 4%; }
  .layout-headline-two,
  .layout-scene-stack,
  .layout-headline-dialogue,
  .layout-headline-results { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .layout-headline-two .story-heading h2,
  .layout-scene-stack .story-heading h2,
  .layout-headline-dialogue .story-heading h2,
  .layout-headline-results .story-heading h2 { font-size: clamp(22px, 4.4vw, 34px); }
  .layout-headline-two .content-lead { font-size: clamp(17px, 3.2vw, 24px); }
  .layout-scene-stack .story-content { gap: 5px 3%; }
  .layout-scene-stack .content-lead { font-size: clamp(12px, 2.35vw, 17px); line-height: 1.38; }
  .layout-scene-stack .story-quote,
  .layout-scene-stack .story-list { padding: 6px 8px; }
  .layout-scene-stack .story-quote p { font-size: clamp(10.5px, 1.7vw, 13px); line-height: 1.32; }
  .layout-scene-stack .story-list ul { gap: 3px; }
  .layout-scene-stack .story-list li { padding-left: 11px; font-size: clamp(10.5px, 1.65vw, 12.5px); line-height: 1.3; }
  .layout-headline-dialogue .story-content { gap: 4px 3%; }
  .layout-headline-dialogue .content-lead { font-size: clamp(12px, 2.1vw, 16px); line-height: 1.38; }
  .layout-headline-dialogue .story-quote { padding: 5px 7px; }
  .layout-headline-dialogue .story-quote > span { margin-bottom: 2px; font-size: 9px; }
  .layout-headline-dialogue .story-quote p { font-size: clamp(11px, 1.55vw, 12.5px); line-height: 1.3; }
  .layout-headline-dialogue[data-page-id="story-18"] .story-heading { padding-top: 8px; }
  .layout-headline-results .story-content { gap: 4px 2.5%; }
  .layout-headline-results .story-text { padding: 6px 8px; font-size: clamp(10.5px, 1.65vw, 12.5px); line-height: 1.3; }
  .layout-ending-stack { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 3%; }
  .layout-ending-stack .story-content { gap: 5px; }
  .layout-ending-stack .story-list li,
  .layout-ending-stack .story-quote p { font-size: clamp(11.5px, 1.9vw, 14.5px); }

  .story-page[data-page-id="story-21"] .story-heading .eyebrow { font-size: clamp(16px, 2.7vw, 21px); }

  .poll-head { min-height: 48px; margin: 6px 0; grid-template-columns: minmax(0, 1fr) 105px; gap: 3%; }
  .poll-head h2 { font-size: clamp(15px, 2.9vw, 20px); line-height: 1.15; }
  .poll-tools { grid-template-columns: 34px 1fr; gap: 7px; padding-left: 8px; }
  .poll-tools .qr { width: 34px; background-size: 13px 13px; box-shadow: inset 0 0 0 4px #fff; font-size: 7px; }
  .poll-state { font-size: 8px; }
  .poll-state small { margin-top: 1px; font-size: 6.5px; }
  .poll-options { gap: 4px; }
  .poll-option { padding: 4px 6px; grid-template-columns: 22px minmax(0, 1fr) 64px; gap: 5px; }
  .poll-option > b { font-size: 14px; }
  .option-text { font-size: clamp(13px, 2vw, 15px); line-height: 1.26; }
  .option-comment { min-height: 1.25em; margin: 2px 0 0 7px; padding-left: 7px; font-size: clamp(10px, 1.55vw, 11.5px); line-height: 1.28; }
  .option-result { grid-template-columns: minmax(0, 1fr) 20px; gap: 3px; font-size: 6.5px; }
  .option-result .track { height: 4px; }
  .recommend { min-height: 18px; margin-top: 3px; padding: 3px 6px; font-size: 8px; }
  .five-options .poll-head { min-height: 42px; margin: 4px 0; }
  .five-options .poll-head h2 { font-size: clamp(14px, 2.6vw, 18px); }
  .five-options .poll-options { gap: 2px; }
  .five-options .poll-option { padding-top: 2px; padding-bottom: 2px; }
  .five-options .option-text { font-size: clamp(11px, 1.75vw, 13px); }
  .five-options .option-comment { font-size: clamp(8.5px, 1.3vw, 10px); }
  .five-options .recommend { margin-top: 2px; }

  .reflection { padding: 10px 4% 0; }
  .reflection-grid { margin-top: 10px; gap: 7px; }
  .reflection-question { min-height: 58px; padding: 8px 10px; grid-template-columns: 30px 1fr; gap: 8px; }
  .reflection-question > span { font-size: 10px; }
  .reflection-question p { font-size: clamp(14px, 2.8vw, 20px); line-height: 1.27; }
  .reflection-index { font-size: 80px; }
  .reflection-hint { margin-top: 8px; gap: 3px; font-size: clamp(12px, 1.8vw, 14px); }
}

@media (max-width: 620px) {
  .review-bar { padding: 0 12px; }
  .review-hint { display: none; }
  .prototype-frame { padding: 9px; }
  .stage-inner { padding: 5% 5.5%; }
  .poll-head { grid-template-columns: minmax(0, 1fr) 96px; }
  .poll-tools { grid-template-columns: 30px 1fr; }
  .poll-tools .qr { width: 30px; }
  .poll-option { grid-template-columns: 19px minmax(0, 1fr) 58px; }
  .poll-option > b { font-size: 12px; }
  .option-text { font-size: 11px; }
  .option-comment { font-size: 8.5px; }
  .five-options .option-text { font-size: 10px; }
  .five-options .option-comment { font-size: 8px; }
  .story-heading h2 { font-size: 19px; }
  .reflection-question p { font-size: 14px; }
  .reflection-hint { font-size: 10px; }
}