@import url("https://fonts.googleapis.com/css2?family=VT323&family=Pinyon+Script&display=swap");

:root{
  --paper:#ffffff;
  --ink:#000000;
  --slot:#ffffff;
  --slotDim:#ffffff;
  --muted:#000000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  font-family: "VCR OSD Mono", "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-transform: lowercase;
}

.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  position:relative;
}

.landing{
  display:grid;
  place-items:center;
  gap:14px;
  transform: translateY(-2vh);
  transition: opacity .45s ease, transform .45s ease;
}

.inkBubble{
  -webkit-tap-highlight-color: transparent;
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  cursor:text;
  width:min(520px, 86vw);
  aspect-ratio: 8 / 3;
  transform: rotate(-1deg);
  transition: transform .25s ease, opacity .25s ease;
}
.inkBubble:focus-visible{
  outline: 2px solid #000;
  outline-offset: 6px;
}
.inkBubble:active{transform: rotate(-1deg) scale(.99)}

.ink{
  position:absolute;
  inset:0;
}
.inkSvg{
  width:100%;
  height:100%;
  display:block;
}

.slots{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) rotate(.4deg);
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:8px;
  width:min(320px, 64vw);
  padding:0 8px;
  pointer-events:none;
}

.slot{
  position:relative;
  height:38px;
  display:grid;
  place-items:center;
  font-family: inherit;
  font-size:28px;
  letter-spacing:.02em;
  text-transform: lowercase;
  color: var(--slot);
}
.slot::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  transform: translateX(-50%);
  width:100%;
  height:3px;
  border-radius:0;
  background: var(--slotDim);
}

.ghostInput{
  position:absolute;
  inset:0;
  opacity:0;
  border:0;
  outline:none;
  background:transparent;
  color:transparent;
  caret-color:transparent;
}

.status{
  min-height:18px;
  font-size:18px;
  letter-spacing:.01em;
  color: var(--muted);
  user-select:none;
}

/* stage 1 success zoom */
.landingZoom{
  transform-origin: 50% 50%;
}
body.zooming .landing{
  opacity:1;
  transform: translateY(-2vh);
}
body.zooming .inkBubble{
  animation: zoomIntoInk 2s ease-in-out forwards;
}
@keyframes zoomIntoInk{
  0%{transform: rotate(-1deg) scale(1)}
  100%{transform: rotate(-1deg) scale(150)}
}
body.stage1done{
  background:#000;
}
body.stage1done .inkBubble{
  transform: rotate(-1deg) scale(150);
}
body.stage1done .landing{
  opacity:0;
  pointer-events:none;
}

/* pre–stage 2 instructions interstitial */
.stageInstructions{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px, 6vw, 48px);
  background:#000;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .85s ease;
}
.stageInstructions.is-visible{
  opacity:1;
}
.stageInstructionsInner{
  max-width:min(640px, 92vw);
  text-align:left;
}
.stageInstructionsTitle{
  margin:0 0 clamp(20px, 4vh, 32px);
  font-size:clamp(22px, 4.5vw, 32px);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.2;
}
.stageInstructionsList{
  margin:0;
  padding:0 0 0 1.35em;
  font-size:clamp(16px, 2.6vw, 22px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.55;
}
.stageInstructionsList li{
  margin-bottom:.65em;
}
.stageInstructionsList li:last-child{
  margin-bottom:0;
}

@keyframes nudge{
  0%{transform: rotate(-1deg) translateX(0)}
  25%{transform: rotate(-1deg) translateX(-4px)}
  50%{transform: rotate(-1deg) translateX(4px)}
  75%{transform: rotate(-1deg) translateX(-3px)}
  100%{transform: rotate(-1deg) translateX(0)}
}
.inkBubble.shake{animation: nudge .26s ease-in-out 0s 1}

/* stage 2 container */
.stage2{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
}
body.stage2on .stage2{
  opacity:1;
  pointer-events:auto;
}

.cageWrap{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#000;
}
.flash{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  transform: scale(0.001);
  transform-origin: 50% 50%;
  border-radius: 9999px;
  pointer-events:none;
}
body.flashOn .flash{
  animation: flashIn 520ms cubic-bezier(.08,.9,.12,1) forwards;
}
@keyframes flashIn{
  0%{opacity:0; transform: scale(0.001)}
  12%{opacity:1; transform: scale(0.004)}
  100%{opacity:1; transform: scale(6)}
}
.cageImg{
  width:min(180px, 34vw);
  height:auto;
  image-rendering: auto;
  filter: grayscale(1) contrast(1.2);
  transform: scale(.001) rotate(0deg);
  opacity:1;
  animation: none;
}
body.stage2on .cageImg{
  animation: cageZoom 5200ms linear forwards;
}
@keyframes cageZoom{
  /* slow when tiny, accelerates as it grows (approach/fall-in feeling) */
  0%{transform: scale(.0006) rotate(0deg); opacity:1}
  35%{transform: scale(.012) rotate(40deg); opacity:1}
  55%{transform: scale(.07) rotate(80deg); opacity:1}
  70%{transform: scale(.55) rotate(120deg); opacity:1}
  82%{transform: scale(3.8) rotate(160deg); opacity:1}
  90%{transform: scale(22) rotate(200deg); opacity:1}
  96%{transform: scale(140) rotate(240deg); opacity:.35}
  100%{transform: scale(320) rotate(260deg); opacity:0}
}
.light{
  position:absolute;
  inset:0;
  background:
    radial-gradient(closest-side at 50% 45%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.12) 76%, rgba(255,255,255,.30) 88%, rgba(255,255,255,.52) 100%);
  opacity:0;
  transition: opacity 1.2s ease;
  pointer-events:none;
}
body.lightOn .light{opacity:1}
body.flashOn .light{opacity:0}
body.stage2white{
  background:#fff;
}
body.stage2white .cageWrap{
  background:#fff;
}
body.stage2white .cageImg{
  opacity:0;
  transition: opacity .35s ease;
}

/* puzzle (sentence + wordle) */
.puzzle{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:6vh;
  gap:12px;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: opacity 650ms ease, transform 650ms ease;
}
body.wordleOn .puzzle{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.riddleStack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transform: scale(1);
  transform-origin: 50% 20%;
  transition: transform 900ms cubic-bezier(.16,.88,.22,1);
}

body.zoomRiddles .riddleStack{
  transform: scale(1.45);
}

body.zoomBack .riddleStack{
  transform: scale(1);
}

.finalLine{
  width:min(900px, 96vw);
  min-height:40px;
  display:grid;
  place-items:center;
  font-size:26px;
  letter-spacing:.06em;
  opacity:0;
  transform: translateY(6px);
  transition: opacity 520ms ease, transform 520ms ease;
  user-select:none;
}
body.finalLineOn .finalLine{
  opacity:1;
  transform: translateY(0);
}
body.finalLineOn .riddleStack{
  opacity:0;
  transition: opacity 520ms ease;
}

.finalDot{
  display:inline-block;
  margin-left:6px;
  opacity:0;
  transform: translateY(2px) scale(.92);
  transition: opacity 380ms ease, transform 380ms ease;
  font-size:26px;
  letter-spacing:.02em;
  color:#000;
}
body.dotOn .finalDot{
  opacity:1;
  transform: translateY(0) scale(1);
}

body.photoSwipe .keyPhotoLink{
  animation: photoSwipeAccel 1400ms linear forwards;
}
@keyframes photoSwipeAccel{
  0%{transform: translateX(0); opacity:1}
  35%{transform: translateX(10vw); opacity:1}
  60%{transform: translateX(30vw); opacity:1}
  78%{transform: translateX(60vw); opacity:.95}
  92%{transform: translateX(110vw); opacity:.55}
  100%{transform: translateX(150vw); opacity:0}
}

body.swipeUpAll .puzzle{
  opacity:0;
  transform: translateY(-140vh);
  transition: transform 1600ms cubic-bezier(.14,.86,.16,1), opacity 900ms ease;
}

body.flicker::before{
  content:"";
  position:fixed;
  inset:0;
  background:#000;
  pointer-events:none;
  opacity:0;
  animation: flickerOff 2600ms ease-in forwards;
}
@keyframes flickerOff{
  0%{opacity:0}
  12%{opacity:.12}
  20%{opacity:.02}
  34%{opacity:.22}
  44%{opacity:.06}
  58%{opacity:.38}
  70%{opacity:.14}
  82%{opacity:.58}
  92%{opacity:.30}
  100%{opacity:1}
}

body.stage2dark{
  background:#000;
}

body.bgWhite{ background:#fff !important; }
body.bgBlack{ background:#000 !important; }

.bgCover{
  position:fixed;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition: opacity 80ms linear;
}
body.coverOn .bgCover{
  opacity:1;
}

.dialogueStage{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  background:#000;
  cursor:pointer;
}
body.stage3On .dialogueStage{
  display:grid;
}
.scpDoc{
  width:min(980px, 94vw);
  background:transparent;
  color:#fff;
  border:0;
  padding:0;
  font-family: inherit;
  cursor:pointer;
  outline:none;
  user-select:none;
}
.scpDoc:focus-visible{
  outline:2px solid #000;
  outline-offset:6px;
}
.scpLine{
  min-height:56px;
  font-size:28px;
  letter-spacing:.06em;
  line-height:1.25;
  white-space:pre-wrap;
}
.deleted{
  display:inline-block;
  background:#fff;
  color:transparent;
  padding:0;
  border-radius:2px;
  letter-spacing:0;
  height:1em;
  vertical-align: -0.08em;
  width:0ch;
  transition: width 120ms linear;
}

.midSection{
  width:min(760px, 94vw);
  display:none;
  gap:10px;
  justify-items:center;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
body.midOn .midSection{
  display:grid;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.skeletalWrap{
  width:100%;
}
body.skeletalSwiped .skeletalWrap{
  opacity:0;
  transform: translateX(140vw);
  pointer-events:none;
  transition: transform 720ms cubic-bezier(.14,.9,.22,1), opacity 380ms ease;
}
body.skeletalGone .skeletalWrap{
  display:none;
}

.thirdSection{
  width:min(760px, 94vw);
  display:none;
  gap:12px;
  justify-items:center;
  opacity:0;
  pointer-events:none;
  margin-top:14px;
  transition: opacity .35s ease;
}
body.thirdOn .thirdSection{
  display:grid;
  opacity:1;
  pointer-events:auto;
}

.finalLine{
  white-space: nowrap;
}
.keyPhoto{
  display:block;
  width:50%;
  height:auto;
  margin:10px auto 0;
}
.keyPhotoLink{
  display:block;
  width:100%;
}
.keyPhotoDownloadBtn{
  display:block;
  margin:8px auto 0;
  padding:0;
  border:none;
  background:none;
  font:inherit;
  font-size:17px;
  letter-spacing:.06em;
  color:rgba(0,0,0,.55);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.keyPhotoDownloadBtn:hover,
.keyPhotoDownloadBtn:focus-visible{
  color:#000;
}
.riddleStatus{
  min-height:18px;
  font-size:18px;
  letter-spacing:.02em;
  color: rgba(0,0,0,.55);
  user-select:none;
}
.midRiddle{
  font-size:20px;
  letter-spacing:.08em;
  color: rgba(0,0,0,.55);
  user-select:none;
}
.sentenceBlanksEcho{
  gap:14px;
}
.blankEcho{
  border-bottom-color: rgba(0,0,0,.35);
  color: rgba(0,0,0,.75);
}
.blankEcho::placeholder{
  color: rgba(0,0,0,.55);
}
.skeletalRow{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.skeletalCard{
  border:1px solid rgba(0,0,0,.2);
  padding:10px 10px 8px;
  display:grid;
  justify-items:center;
  gap:6px;
}
.skeletalImg{
  width:100%;
  max-width:260px;
  height:92px;
  object-fit: contain;
  display:block;
  image-rendering: auto;
  background:#fff;
}
.mol{
  font-size:18px;
  letter-spacing:.08em;
  color: rgba(0,0,0,.55);
  text-align:center;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform: translateY(-2px);
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
}
body.revealMols .mol{
  opacity:1;
  max-height:48px;
  transform: translateY(0);
}

.sentence{
  width:min(760px, 94vw);
  height:auto;
  min-height:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
}
.sentenceBlanks{
  display:flex;
  gap:18px;
  align-items:flex-end;
  justify-content:center;
  flex-wrap:nowrap;
}
.blankInput{
  width: 16ch;
  max-width: 28vw;
  border:0;
  outline:none;
  background:transparent;
  border-bottom: 2px solid #000;
  padding: 8px 2px 6px;
  font-family: inherit;
  font-size:22px;
  letter-spacing:.08em;
  text-transform: lowercase;
  color:#000;
  text-align:center;
}
.blankInput::placeholder{
  color: rgba(0,0,0,.35);
  letter-spacing:.06em;
}
.blankInput:focus{
  border-bottom-width: 3px;
}
.blankInput::selection{background: rgba(0,0,0,.15)}

/* wordle */
.wordle{
  position:relative;
  width:min(520px, 92vw);
  display:grid;
  gap:14px;
  align-content:start;
  justify-items:center;
  height:70vh;
  min-height:340px;
  padding-top:0;
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: opacity 650ms ease, transform 650ms ease;
  transition-delay: 120ms;
}
body.wordleOn .wordle{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
body.wordleSwiped .wordle{
  opacity:0;
  transform: translateX(140vw);
  pointer-events:none;
  transition: transform 720ms cubic-bezier(.14,.9,.22,1), opacity 380ms ease;
}
body.wordleGone .wordle{
  display:none;
}
.wordleHeader{
  font-size:22px;
  letter-spacing:.08em;
}
.grid{
  display:grid;
  grid-template-rows: repeat(6, 1fr);
  gap:8px;
}
.row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.cell{
  width:56px;
  height:56px;
  border:2px solid #000;
  display:grid;
  place-items:center;
  font-size:30px;
  line-height:1;
  background:#fff;
  color:#000;
  user-select:none;
}
.cell.correct{
  background:#000;
  color:#fff;
}
.cell.present{
  background:#fff;
  color:#000;
  border-style:dashed;
}
.cell.absent{
  background:#fff;
  color:#000;
  border-color:#000;
  border-width:1px;
}
.wordleStatus{
  min-height:20px;
  color: var(--muted);
  font-size:18px;
}
.wordleInput{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* --- stage 4: vlsi circuit breaker (monochrome) --- */
body.stage4On .landing,
body.stage4On .stage2,
body.stage4On .dialogueStage{
  display:none !important;
}
body.stage4On{
  background:#050505 !important;
  color:#e8e8e8;
  overflow:auto;
}
body.stage5On .stage4,
body.stage5On .landing,
body.stage5On .stage2,
body.stage5On .dialogueStage{
  display:none !important;
}

.stage4{
  position:fixed;
  inset:0;
  z-index:8000;
  display:none;
  place-items:center;
  padding:16px;
  background:#050505;
  overflow:auto;
}
body.stage4On .stage4{
  display:grid;
}
.circuitTopHover{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  z-index:8100;
}
body.stage4bOn .circuitTopHover,
body.stage4cOn .circuitTopHover{
  display:block;
}
.circuitInstr em{
  font-style:italic;
}
.circuitShell{
  width:min(600px, 96vw);
  display:grid;
  gap:10px;
  justify-items:center;
}
.circuitHeader{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:8px;
}
.circuitTitle{
  font-size:22px;
  letter-spacing:.14em;
  color:#fff;
}
.circuitVer{
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  text-transform:inherit;
  cursor:inherit;
  outline:none;
}
.circuitVer:hover{
  cursor:ns-resize;
  opacity:.82;
}
.circuitPartLabel{
  font-size:16px;
  color:rgba(255,255,255,.45);
}
.circuitInstr{
  margin:0;
  width:100%;
  font-size:15px;
  color:rgba(255,255,255,.5);
  text-align:left;
  line-height:1.35;
}
.circuitBoardWrap{
  width:100%;
  border:2px solid rgba(255,255,255,.35);
  background:#0a0a0a;
  box-shadow:0 0 0 1px #000 inset;
}
.circuitCanvas{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}
.circuitStatus{
  min-height:18px;
  font-size:15px;
  color:rgba(255,255,255,.55);
  text-align:center;
}
.circuitStatus.fail{
  color:#fff;
}

.clueModal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:20px;
}
.clueModal[hidden]{
  display:none !important;
}
.clueModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.clueModalBox{
  position:relative;
  z-index:1;
  width:min(400px, 92vw);
  display:grid;
  gap:14px;
  justify-items:center;
  padding:18px 16px 20px;
  border:2px solid #fff;
  background:#fff;
  color:#000;
}
.clueModalTitle{
  margin:0;
  font-size:20px;
  letter-spacing:.1em;
  white-space:nowrap;
  text-align:center;
}
.clueModalImgWrap{
  width:100%;
  border:1px solid #000;
  padding:8px;
  background:#f5f5f5;
}
.clueModalImg{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.08);
}
.fleecaWordInput{
  width:min(280px, 80vw);
  border:0;
  border-bottom:2px solid #000;
  background:transparent;
  font:inherit;
  font-size:24px;
  text-align:center;
  padding:6px 4px;
  outline:none;
  color:#000;
}
.fleecaWordInput::placeholder{
  color:rgba(0,0,0,.4);
}
.fleecaStatus{
  min-height:18px;
  font-size:16px;
  color:rgba(0,0,0,.55);
  text-align:center;
}
.clueModalHint{
  margin:0;
  width:100%;
  font-size:14px;
  line-height:1.35;
  color:rgba(0,0,0,.42);
  text-align:center;
}
.clueModalHint[hidden]{
  display:none;
}

body.stage5On{
  background:#fff !important;
  transition:background-color .14s ease;
}

body.stage5On.crtTvTearBurst{
  background:#050505 !important;
}

.stage5{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  place-items:center;
  background:#fff;
  color:#1a1a1a;
  padding:24px 16px;
  overflow:auto;
  transition:background-color .14s ease;
}

body.stage5On.crtTvTearBurst .stage5{
  background:#050505;
  color:#1a1a1a;
}
body.stage5On .stage5{
  display:grid;
}

body.stage6On{
  background:#fff !important;
}
.stage6Dialogue{
  position:fixed;
  inset:0;
  z-index:9100;
  display:none;
  place-items:center;
  background:#fff;
  color:#000;
  cursor:pointer;
}
body.stage6On .stage6Dialogue{
  display:grid;
}
.stage6Doc{
  width:min(980px, 94vw);
  background:transparent;
  color:#000;
  border:0;
  padding:0;
  font-family:inherit;
  cursor:pointer;
  outline:none;
  user-select:none;
}
.stage6Doc:focus-visible{
  outline:2px solid #000;
  outline-offset:6px;
}
.stage6Line{
  min-height:56px;
  font-size:28px;
  letter-spacing:.06em;
  line-height:1.25;
  white-space:pre-wrap;
  color:#000;
}
.stage6Line em{
  font-style:italic;
}
.stage6Arrow{
  margin-top:.75em;
  min-height:1.35em;
  font-size:28px;
  letter-spacing:.06em;
  line-height:1.25;
  color:#000;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.stage6Arrow.is-visible{
  opacity:1;
  visibility:visible;
}
.stage6PhotoOverlay{
  position:fixed;
  inset:0;
  z-index:9150;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:clamp(16px, 4vw, 32px);
  box-sizing:border-box;
  cursor:pointer;
  background:rgba(255,255,255,0);
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease, background 1s ease;
}
.stage6PhotoOverlay[hidden]{
  display:none;
}
.stage6PhotoOverlay.is-visible{
  opacity:1;
  pointer-events:auto;
  background:rgba(255,255,255,.9);
}
.stage6PhotoOverlay.is-closing{
  opacity:0;
  background:rgba(255,255,255,0);
}
.stage6PhotoFrame{
  margin:0;
  padding:14px 14px 44px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    0 22px 56px rgba(0,0,0,.28),
    0 4px 14px rgba(0,0,0,.1);
  transform:rotate(-2deg) scale(.94);
  opacity:0;
  transition:
    opacity 1.05s ease .12s,
    transform 1.15s cubic-bezier(.22, 1, .32, 1) .12s;
}
.stage6PhotoOverlay.is-visible .stage6PhotoFrame{
  opacity:1;
  transform:rotate(-1.2deg) scale(1);
}
.stage6PhotoOverlay.is-closing .stage6PhotoFrame{
  opacity:0;
  transform:rotate(-2deg) scale(.96);
  transition-duration:.55s;
}
.stage6PhotoPrint{
  display:block;
  width:min(88vw, 680px);
  height:min(72vh, 820px);
  border:0;
  background:#f8f8f8;
}
.stage6PhotoHint{
  margin:0;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .6s ease .5s;
}
.stage6PhotoOverlay.is-visible .stage6PhotoHint{
  opacity:1;
}
body.stage6PhotoOpen .stage6Dialogue{
  pointer-events:none;
}

body.stageEDOn{
  background:#fff !important;
}
.stageED{
  position:fixed;
  inset:0;
  z-index:9200;
  display:none;
  background:#fff;
  color:#000;
}
body.stageEDOn .stageED{
  display:flex;
  justify-content:center;
}
.stageEDShell{
  width:min(1180px, 96vw);
  height:100%;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 5vh, 48px) clamp(20px, 3vw, 40px) clamp(20px, 3vh, 28px);
  box-sizing:border-box;
}
.stageEDTitle{
  margin:0 0 clamp(18px, 3vh, 28px);
  text-align:center;
  font-size:clamp(26px, 4.5vw, 38px);
  font-weight:400;
  letter-spacing:.04em;
  color:#000;
}
.stageEDScroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  border:1px solid #000;
  padding:clamp(20px, 3vw, 28px) clamp(18px, 3vw, 26px);
  margin-bottom:16px;
  background:#fff;
}
.stageEDBody p{
  margin:0 0 1.15em;
  font-size:clamp(15px, 2.2vw, 17px);
  line-height:1.55;
  letter-spacing:.02em;
  color:#000;
}
.stageEDBody p:last-child{
  margin-bottom:0;
}
.stageEDDivider{
  margin-top:1.5em !important;
  text-align:center;
  letter-spacing:.2em;
}
.stageEDSecretRow{
  margin-top:1.25em !important;
}
.stageEDCheckLabel{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.stageEDCheck{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:3px;
  accent-color:#000;
  cursor:pointer;
}
.stageEDSecret{
  color:#fff;
  background:#fff;
  user-select:text;
  -webkit-user-select:text;
}
.stageEDSecret::selection{
  color:#000;
  background:#e0e0e0;
}
.stageEDSecret.is-revealed{
  color:#000;
  background:transparent;
}
.stageEDError{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.4;
  color:#000;
  letter-spacing:.03em;
}
.stageEDError[hidden]{
  display:none;
}
.stageEDActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 20px;
  padding-top:4px;
}
.stageEDActions[hidden]{
  display:none;
}
.stageEDBtn{
  min-width:min(220px, 38vw);
  padding:12px 22px;
  border:2px solid #000;
  font:inherit;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.stageEDBtn--decline{
  background:#fff;
  color:#000;
}
.stageEDBtn--decline:hover{
  background:#f0f0f0;
}
.stageEDBtn--agree{
  background:#000;
  color:#fff;
}
.stageEDBtn--agree:hover{
  background:#222;
}
.stageEDQuest{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:8px 0 4px;
}
.stageEDQuest[hidden]{
  display:none;
}
.stageEDQuestLabel{
  font-size:clamp(18px, 3vw, 22px);
  letter-spacing:.05em;
  color:#000;
}
.stageEDQuestRow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:100%;
}
.stageEDWordInput{
  flex:1;
  min-width:min(200px, 70vw);
  max-width:360px;
  padding:10px 14px;
  border:2px solid #000;
  background:#fff;
  color:#000;
  font:inherit;
  font-size:16px;
  letter-spacing:.04em;
  outline:none;
}
.stageEDWordInput:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
}
.stageEDThanks{
  margin:16px 0 0;
  text-align:center;
  font-size:clamp(17px, 2.5vw, 20px);
  letter-spacing:.05em;
  color:#000;
}
.stageEDThanks[hidden]{
  display:none;
}

.gameFinale{
  position:fixed;
  inset:0;
  z-index:9300;
  display:none;
  background:#fff;
  color:#000;
  overflow:hidden;
}
body.gameFinaleOn .gameFinale{
  display:block;
}
body.gameFinaleOn{
  background:#fff !important;
}
body.gameFinaleOn.gameFinale--titled{
  background:#000 !important;
}
.gameFinale[hidden]{
  display:none !important;
}
.gameFinalePhase{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.gameFinalePhase[hidden]{
  display:none;
}
.gameFinalePhase--cliff{
  display:block;
  place-items:stretch;
  background:#f4f4f0;
}
.gameFinaleWord{
  margin:0;
  max-width:92vw;
  text-align:center;
  font-size:clamp(52px, 14vw, 148px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.05;
  word-break:break-word;
  opacity:0;
  transform:scale(0.55);
}
.gameFinalePhase--word.is-active .gameFinaleWord{
  animation:finaleWordEnlarge 1.15s cubic-bezier(.22, 1, .32, 1) forwards;
}
@keyframes finaleWordEnlarge{
  0%{opacity:0; transform:scale(0.5)}
  70%{opacity:1; transform:scale(1.06)}
  100%{opacity:1; transform:scale(1)}
}
.gameFinalePlane{
  --plane-w:min(58vw, 560px);
  position:relative;
  width:var(--plane-w);
  aspect-ratio:1000 / 561;
  opacity:0;
  transform:scale(0.2) rotate(-18deg);
}
.gameFinalePlaneImg{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
}
.gameFinalePlaneWord{
  position:absolute;
  left:52%;
  top:46%;
  z-index:1;
  transform:translate(-50%, -50%) rotate(-12deg);
  max-width:42%;
  font-size:clamp(14px, 2.4vw, 24px);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.1;
  text-align:center;
  color:#1a1a1a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(255,255,255,.85);
  pointer-events:none;
}
.gameFinalePhase--pack.is-active .gameFinalePlane{
  animation:finalePlanePack 1.05s cubic-bezier(.34, 1.2, .64, 1) forwards;
}
@keyframes finalePlanePack{
  0%{opacity:0; transform:scale(0.12) rotate(-24deg)}
  100%{opacity:1; transform:scale(1) rotate(-18deg)}
}
.gameFinaleCliffSvg{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:min(42vh, 300px);
  display:block;
}
.gameFinalePlane--fly{
  position:absolute;
  left:32%;
  top:38%;
  z-index:2;
  --plane-w:min(42vw, 420px);
  opacity:1;
  transform:rotate(-22deg) scale(1);
}
.gameFinalePhase--cliff.is-active .gameFinalePlane--fly{
  animation:finalePlaneFlyOff 2.1s cubic-bezier(.45, 0, .75, .2) forwards;
}
@keyframes finalePlaneFlyOff{
  0%{
    left:32%;
    top:38%;
    opacity:1;
    transform:rotate(-22deg) scale(1);
  }
  100%{
    left:108%;
    top:6%;
    opacity:0.15;
    transform:rotate(-36deg) scale(0.55);
  }
}
.gameFinaleEndCard{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(20px, 4vh, 36px);
  margin:0;
  padding:24px;
  text-align:center;
  background:#000;
  opacity:0;
  pointer-events:none;
}
.gameFinaleEndCard[hidden]{
  display:none;
}
.gameFinaleEndCard.is-visible{
  display:flex;
  animation:finaleTitleIn 1.1s ease forwards;
}
@keyframes finaleTitleIn{
  from{opacity:0}
  to{opacity:1}
}
.gameFinaleTitleBlock{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:.12em;
  max-width:92vw;
}
.gameFinaleTitleQuote{
  font-size:clamp(32px, 6.5vw, 64px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.05;
  color:#fff;
}
.gameFinaleTitleLines{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.08em;
}
.gameFinaleTitleLine{
  font-size:clamp(32px, 6.5vw, 64px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.05;
  color:#fff;
}
.gameFinaleCredits,
.gameFinaleFarewell{
  margin:0;
  max-width:92vw;
  font-size:clamp(18px, 3.2vw, 28px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.3;
  color:#fff;
  opacity:0;
}
.gameFinaleCredits[hidden],
.gameFinaleFarewell[hidden]{
  display:none;
}
.gameFinaleCredits.is-visible,
.gameFinaleFarewell.is-visible{
  display:block;
  animation:finaleSubIn .9s ease forwards;
}
@keyframes finaleSubIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
.gameFinaleFarewell{
  font-size:clamp(16px, 2.6vw, 22px);
  letter-spacing:.03em;
  color:rgba(255,255,255,.88);
}

.crtTv{
  position:relative;
  width:min(92vw, 560px);
  margin:0 auto;
  font-family:inherit;
  text-transform:lowercase;
  letter-spacing:.06em;
}
.crtTvAntenna{
  position:absolute;
  left:50%;
  top:-72px;
  width:5px;
  height:78px;
  margin-left:-2px;
  padding:0;
  border:none;
  background:#000;
  border-radius:2px;
  transform:rotate(-22deg);
  transform-origin:bottom center;
  z-index:2;
  pointer-events:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s ease, filter .25s ease;
}
.crtTvAntenna::after{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  width:14px;
  height:14px;
  margin-left:-7px;
  border-radius:50%;
  background:#000;
  transition:border-radius .25s ease, width .25s ease, height .25s ease;
}
body.crtTvLeverReady .crtTvAntenna:not(:disabled){
  pointer-events:auto;
  cursor:pointer;
  transform:rotate(48deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
body.crtTvLeverReady .crtTvAntenna:not(:disabled):hover{
  transform:rotate(54deg);
}
body.crtTvLeverReady .crtTvAntenna:not(:disabled)::after{
  width:18px;
  height:10px;
  margin-left:-9px;
  top:-7px;
  border-radius:3px;
}
.crtTvAntenna.crtTvAntenna--pulled{
  transform:rotate(68deg) !important;
  transition:transform .22s ease;
}
body.crtTvBlackout .crtTvGlass{
  background:#000 !important;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9);
  transition:background .45s ease, box-shadow .45s ease;
}
body.crtTvBlackout .crtTvTube,
body.crtTvBlackout .crtTvLines,
body.crtTvBlackout .crtTvStatic,
body.crtTvBlackout .crtTvShadow,
body.crtTvBlackout .crtTvNoise,
body.crtTvBlackout .crtTvGlitch,
body.crtTvBlackout .crtTvShuffle{
  opacity:0 !important;
  transition:opacity .35s ease;
}
body.crtTvScriptDone .crtTvScreen{
  cursor:pointer;
}
body.crtTvScriptDone.crtTvOn .crtTvScreen{
  cursor:pointer;
}
.crtTvBody{
  position:relative;
  padding:18px 16px 14px;
  background:linear-gradient(165deg, #f0ece2 0%, #d9d2c4 55%, #c8bfb0 100%);
  border:2px solid #1a1a1a;
  border-radius:14px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.crtTvBody::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  pointer-events:none;
}
.crtTvFace{
  display:grid;
  grid-template-columns:1fr 52px;
  gap:10px;
  align-items:stretch;
}
.crtTvScreen{
  position:relative;
  margin:0;
  padding:5px;
  border:2px solid #3a3a3a;
  border-radius:18px;
  background:linear-gradient(145deg, #5a5a5a, #404040);
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.25);
}
body.crtTvOn .crtTvScreen{
  cursor:default;
  background:linear-gradient(145deg, #1a221c, #0e1410);
  border-color:#243028;
}
.crtTvScreen:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.crtTvGlass{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:16% / 14%;
  container-type:inline-size;
  background:linear-gradient(145deg, #626262 0%, #4e4e4e 55%, #454545 100%);
  box-shadow:
    inset 0 0 1px rgba(255,255,255,.12),
    inset 0 -8px 24px rgba(0,0,0,.12);
}
.crtTvContent{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
}
.crtTvTube{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
}
body.crtTvOn .crtTvTube{
  opacity:1;
  background:
    #1a221c,
    linear-gradient(
      225deg,
      rgba(52, 140, 68, 0.28) 0%,
      rgba(28, 80, 38, 0.12) 34%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 82% 68% at 100% 0%,
      rgba(90, 210, 110, 0.22) 0%,
      rgba(40, 110, 52, 0.08) 45%,
      transparent 68%
    );
}
body.crtTvOn .crtTvGlass.crtTvShuffling .crtTvContent{
  visibility:hidden;
}
.crtTvShuffle{
  position:absolute;
  inset:0;
  z-index:7;
  display:none;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
}
body.crtTvOn .crtTvGlass.crtTvShuffling .crtTvShuffle{
  display:block;
  z-index:9;
}
.crtTvShuffleGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  width:100%;
  height:100%;
  gap:2px;
  background:transparent;
}
.crtTvShuffleCell{
  position:relative;
  overflow:hidden;
  background:transparent;
}
.crtTvShufflePane{
  position:absolute;
  width:400%;
  height:200%;
  top:0;
  left:0;
  transform-origin:top left;
  pointer-events:none;
}
.crtTvShardScreen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  container-type:inline-size;
}
.crtTvShardTube{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    #1a221c,
    linear-gradient(
      225deg,
      rgba(52, 140, 68, 0.28) 0%,
      rgba(28, 80, 38, 0.12) 34%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 82% 68% at 100% 0%,
      rgba(90, 210, 110, 0.22) 0%,
      rgba(40, 110, 52, 0.08) 45%,
      transparent 68%
    );
}
.crtTvShardLines{
  position:absolute;
  inset:6px 8px 8px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.5em;
  padding:8px 10px 10px;
  box-sizing:border-box;
  overflow:hidden;
  text-align:left;
  text-transform:none;
  font-family:inherit;
  font-size:clamp(9px, 2.6cqw, 13px);
  line-height:1.36;
  letter-spacing:.03em;
  color:#4ade63;
  text-shadow:
    -1px 1px 4px rgba(70,220,90,.4),
    0 0 6px rgba(55,210,75,.55),
    0 0 14px rgba(45,170,60,.32);
  opacity:1;
  filter:blur(.25px);
}
.crtTvShardLines .crtTvLine{
  margin:0;
  max-width:100%;
  word-break:break-word;
  opacity:.95;
}
.crtTvShardFx{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.2) 0,
      rgba(0,0,0,.2) 1px,
      transparent 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,70,70,.028) 0,
      rgba(255,70,70,.028) 1px,
      rgba(70,255,100,.028) 1px,
      rgba(70,255,100,.028) 2px,
      rgba(80,130,255,.028) 2px,
      rgba(80,130,255,.028) 3px,
      transparent 3px,
      transparent 3px
    );
  opacity:1;
}
.crtTvShadow{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-radius:inherit;
  overflow:hidden;
  transition:opacity .55s ease;
  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 18%,
      transparent 42%
    ),
    linear-gradient(145deg, #5a5a5a 0%, #484848 100%);
}
.crtTvShadow::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.04) 12%,
    transparent 38%
  );
}
.crtTvShadow::after{
  content:"";
  position:absolute;
  bottom:4%;
  left:54%;
  width:52%;
  height:74%;
  transform:translateX(-8%);
  background:radial-gradient(
    ellipse 55% 45% at 35% 30%,
    rgba(18,20,24,.55) 0%,
    transparent 70%
  );
  filter:blur(14px);
  pointer-events:none;
}
.crtTvShadowFigure{
  position:relative;
  z-index:1;
  width:46%;
  max-height:76%;
  margin-bottom:4%;
  margin-left:-4%;
  filter:blur(10px) drop-shadow(14px 6px 18px rgba(12,14,18,.75));
  opacity:.82;
  transform:scale(1.02);
}
body.crtTvOn .crtTvShadow{
  opacity:0;
  pointer-events:none;
}
.crtTvGlass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    ellipse 92% 88% at 50% 50%,
    transparent 52%,
    rgba(0,0,0,.32) 100%
  );
}
body.crtTvOn .crtTvGlass{
  background:
    #1a221c,
    linear-gradient(
      225deg,
      rgba(52, 140, 68, 0.28) 0%,
      rgba(28, 80, 38, 0.12) 34%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 82% 68% at 100% 0%,
      rgba(90, 210, 110, 0.22) 0%,
      rgba(40, 110, 52, 0.08) 45%,
      transparent 68%
    );
  box-shadow:
    inset 0 0 1px rgba(100,220,120,.12),
    inset 0 0 18px rgba(0,0,0,.2);
  animation:crtPowerOn .65s ease-out;
}
body.crtTvOn .crtTvGlass::before{
  opacity:1;
}
.crtTvGlass::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    ellipse 68% 58% at 100% 0%,
    rgba(100, 220, 120, 0.16) 0%,
    rgba(60, 150, 75, 0.06) 40%,
    transparent 58%
  );
  mix-blend-mode:screen;
}
body.crtTvOn .crtTvGlass::after{
  opacity:1;
  animation:crtPhosphorPulse 3.2s ease-in-out infinite;
}
@keyframes crtPowerOn{
  0%{filter:brightness(.5)}
  45%{filter:brightness(1.2)}
  100%{filter:brightness(1)}
}
@keyframes crtPhosphorPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
.crtTvStatic{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255,255,255,.06) 0%, transparent 28%);
  animation:crtStaticFlicker .14s steps(2) infinite;
}
body.crtTvOn .crtTvStatic{
  opacity:0;
  animation:none;
  pointer-events:none;
}
@keyframes crtStaticFlicker{
  0%{opacity:.92}
  100%{opacity:1}
}
.crtTvLines{
  position:absolute;
  inset:6px 8px 8px;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.5em;
  padding:8px 10px 10px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  text-align:left;
  text-transform:none;
  font-size:clamp(10px, 2.6cqw, 14px);
  line-height:1.36;
  letter-spacing:.03em;
  color:#4ade63;
  text-shadow:
    -1px 1px 4px rgba(70,220,90,.4),
    0 0 6px rgba(55,210,75,.55),
    0 0 14px rgba(45,170,60,.32),
    0 0 22px rgba(35,140,50,.18);
  opacity:0;
  pointer-events:none;
  filter:blur(.25px);
}
body.crtTvOn .crtTvLines{
  opacity:.9;
  pointer-events:auto;
  animation:crtTextFlicker 3.5s steps(1) infinite;
}
@keyframes crtTextFlicker{
  0%,91%,100%{opacity:.9}
  92%{opacity:.78}
  94%{opacity:.92}
}
.crtTvLine{
  margin:0;
  max-width:100%;
  word-break:break-word;
  opacity:.95;
}
.crtTvLine--scene{
  opacity:1;
  letter-spacing:.05em;
  margin-bottom:.35em;
  white-space:pre-wrap;
}
.crtTvLine--scene strong{
  font-weight:700;
}
.crtTvLink{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.crtTvLink:hover,
.crtTvLink:focus-visible{
  color:#86efac;
}
.crtTvOrigin{
  position:relative;
  display:inline;
  cursor:help;
  text-decoration:underline dotted;
  text-underline-offset:2px;
}
.crtTvTip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 6px);
  transform:translateX(-50%);
  z-index:8;
  width:max-content;
  max-width:min(300px, 78vw);
  padding:5px 8px;
  border-radius:3px;
  background:rgba(8,28,12,.94);
  border:1px solid rgba(74,222,99,.45);
  color:#bbf7d0;
  font-size:.88em;
  line-height:1.3;
  letter-spacing:.02em;
  text-shadow:none;
  white-space:normal;
  text-align:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease, visibility .12s ease;
}
.crtTvOrigin:hover .crtTvTip,
.crtTvOrigin:focus-visible .crtTvTip{
  opacity:1;
  visibility:visible;
}
.crtTvDeleted{
  display:inline-block;
  position:relative;
  height:1em;
  min-width:1ch;
  vertical-align:-0.08em;
  border-radius:2px;
  background:rgba(190,255,200,.72);
  box-shadow:
    inset 0 0 0 1px rgba(120,240,140,.5),
    0 0 10px rgba(74,222,99,.35);
  overflow:hidden;
}
.crtTvDeleted__char{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:#2d6b38;
  font-weight:700;
  line-height:1;
  filter:blur(6px);
  opacity:.92;
  user-select:none;
  pointer-events:none;
}
.crtTvLine.typing::after{
  content:"▌";
  color:#7aff8c;
  animation:crtCaret .65s step-end infinite;
}
@keyframes crtCaret{
  50%{opacity:0}
}
.crtTvFx{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
}
body.crtTvOn .crtTvFx{
  opacity:1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.2) 0,
      rgba(0,0,0,.2) 1px,
      transparent 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,70,70,.028) 0,
      rgba(255,70,70,.028) 1px,
      rgba(70,255,100,.028) 1px,
      rgba(70,255,100,.028) 2px,
      rgba(80,130,255,.028) 2px,
      rgba(80,130,255,.028) 3px,
      transparent 3px,
      transparent 3px
    );
}
.crtTvSvgDefs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.crtTvNoise{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:#9a9a9a;
  filter:url(#crtTvNoiseFilter);
  mix-blend-mode:overlay;
}
body.stage5On .crtTvNoise{
  opacity:.1;
}
body.crtTvOn .crtTvNoise{
  opacity:.24;
}
.crtTvGlitch{
  position:absolute;
  inset:6px 8px 8px;
  z-index:8;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  visibility:hidden;
  --crt-wave-h:min(14cqh, 20%);
}
.crtTvGlitch.is-active{
  visibility:visible;
}
.crtTvGlitch.is-active.is-wave .crtTvGlitchTear{
  display:none;
}
.crtTvGlitch.is-active.is-tear .crtTvGlitchWave{
  visibility:hidden;
}
.crtTvGlitchTear{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.crtTvGlitch.is-active.is-tear .crtTvGlitchTear{
  display:block;
}
.crtTvGlitchTear::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 38%, rgba(255,40,140,.22) 52%, rgba(0,240,255,.18) 68%, rgba(140,50,255,.2) 78%, transparent 92%);
  mix-blend-mode:screen;
  animation:crtTearSmear .38s steps(4) forwards;
}
.crtTvGlitchTear::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,0,80,.06) 0 1px,
    rgba(0,255,200,.06) 1px 2px,
    rgba(120,80,255,.06) 2px 3px,
    transparent 3px 5px
  );
  opacity:.85;
  animation:crtTearSnow .06s steps(2) 6;
}
.crtTvTearSlice{
  position:absolute;
  left:-10%;
  width:120%;
  height:7%;
  min-height:8px;
  background:transparent;
  box-shadow:
    5px 0 0 rgba(0,255,255,.4),
    -5px 0 0 rgba(255,50,120,.4);
  opacity:0;
  animation:crtTearSlice .38s steps(5) forwards;
}
.crtTvGlitch.is-active.is-tear .crtTvTearSlice[data-tear="0"]{animation-delay:0ms}
.crtTvGlitch.is-active.is-tear .crtTvTearSlice[data-tear="1"]{animation-delay:25ms}
.crtTvGlitch.is-active.is-tear .crtTvTearSlice[data-tear="2"]{animation-delay:50ms}
.crtTvGlitch.is-active.is-tear .crtTvTearSlice[data-tear="3"]{animation-delay:15ms}
.crtTvGlitch.is-active.is-tear .crtTvTearSlice[data-tear="4"]{animation-delay:40ms}
@keyframes crtTearSmear{
  0%,100%{opacity:.55; filter:brightness(1)}
  25%{opacity:.9; filter:brightness(1.25)}
  50%{opacity:.7; filter:brightness(.9)}
  75%{opacity:1; filter:brightness(1.15)}
}
@keyframes crtTearSnow{
  0%{opacity:.5; transform:translateX(0)}
  100%{opacity:.9; transform:translateX(-2px)}
}
@keyframes crtTearSlice{
  0%{
    opacity:0;
    transform:translateX(0);
  }
  15%{
    opacity:.95;
    transform:translateX(var(--tear-shift, 12px));
  }
  35%{
    opacity:.85;
    transform:translateX(calc(var(--tear-shift, 12px) * -0.6));
  }
  55%{
    opacity:.9;
    transform:translateX(calc(var(--tear-shift, 12px) * 1.4));
  }
  75%{
    opacity:.7;
    transform:translateX(calc(var(--tear-shift, 12px) * -0.3));
  }
  100%{
    opacity:0;
    transform:translateX(0);
  }
}
body.crtTvOn.crtTvTearBurst .crtTvNoise{
  opacity:.42;
}
.crtTvGlitchWave{
  position:absolute;
  left:-4%;
  width:108%;
  height:var(--crt-wave-h);
  min-height:14px;
  clip-path:url(#crtGlitchWaveClip);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(60,200,80,.2) 28%,
      rgba(180,255,200,.45) 50%,
      rgba(60,200,80,.2) 72%,
      transparent 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,50,50,.18) 0 2px,
      rgba(50,255,80,.18) 2px 4px,
      rgba(70,120,255,.18) 4px 6px,
      transparent 6px 10px
    );
  box-shadow:0 0 12px rgba(90,255,120,.35);
  top:100%;
  will-change:top, transform;
}
.crtTvGlitch.is-active .crtTvGlitchWave{
  animation:crtGlitchRise .52s linear forwards;
}
@keyframes crtGlitchRise{
  0%{
    top:100%;
    transform:translateX(0);
  }
  12%{
    top:84%;
    transform:translateX(-4px);
  }
  28%{
    top:66%;
    transform:translateX(5px);
  }
  44%{
    top:48%;
    transform:translateX(-6px);
  }
  58%{
    top:32%;
    transform:translateX(4px);
  }
  72%{
    top:16%;
    transform:translateX(-3px);
  }
  86%{
    top:2%;
    transform:translateX(2px);
  }
  100%{
    top:calc(0px - var(--crt-wave-h));
    transform:translateX(0);
  }
}
body.crtTvOn .crtTvGlass.crtTvGlitching{
  filter:brightness(1.08) contrast(1.06);
}
body.crtTvOn .crtTvGlass.crtTvGlitching .crtTvLines{
  transform:translateX(3px);
  text-shadow:
    -2px 0 0 rgba(255,60,60,.35),
    2px 0 0 rgba(60,255,100,.35),
    0 0 6px rgba(55,210,75,.5);
}
body.crtTvOn .crtTvGlass.crtTvGlitching-tear{
  filter:brightness(1.12) contrast(1.14) saturate(1.2);
}
.crtTvSide{
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.crtTvDial{
  position:relative;
  flex:1;
  min-height:100%;
  border:2px solid #000;
  border-radius:6px;
  background:#000;
  box-shadow:inset 0 0 8px rgba(0,0,0,.9);
}
.crtTvDialMark{
  position:absolute;
  left:50%;
  top:32%;
  width:2px;
  height:48%;
  margin-left:-1px;
  background:linear-gradient(
    180deg,
    #fff 0%,
    #fff 18%,
    rgba(255,255,255,.55) 42%,
    rgba(255,255,255,.2) 62%,
    transparent 78%
  );
  box-shadow:0 0 4px rgba(255,255,255,.35);
}
.crtTvControls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.15);
}
.crtTvCtrl{
  display:block;
  border:2px solid #1a1a1a;
  background:linear-gradient(180deg, #e8e4da, #b8b0a2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.crtTvCtrl--power{
  width:18px;
  height:18px;
  border-radius:50%;
}
.crtTvCtrl--slider{
  flex:1;
  height:8px;
  border-radius:4px;
}
.crtTvCtrl--vol{
  width:22px;
  height:22px;
  border-radius:50%;
}
.crtTvCtrlLabel{
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(0,0,0,.55);
}
@media (max-width: 420px){
  .slots{gap:6px}
  .slot{font-size:22px}
  .cell{width:48px;height:48px;font-size:26px}
  .sentenceBlanks{gap:12px}
  .blankInput{font-size:18px}
  .skeletalRow{grid-template-columns: 1fr; gap:10px}
  .circuitTitle{font-size:18px}
  .circuitInstr{font-size:13px}
}