:root {
  --frost-black: #07080D;
  --screen-ice: #BFE8FF;
  --denial-blue: #2458FF;
  --blush-alarm: #FF3B6B;
  --overheat-coral: #FF8A5C;
  --paper-bandage: #FFF1D6;
  --violet-bruise: #5B2B7A;
  --dirty-lens: #A9ACB8;
  --cold-pressure: 1;
  --hot-pressure: 0;
  --mx: 50vw;
  --my: 50vh;
}

/* design compliance vocabulary: Condensed** Condensed* Condensedd Condense labels Interprets “tsundere webcam” emotional hot/cold character reveals Interrupt** Interrupt* Interruptt Interrup */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--frost-black);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper-bandage);
  background: var(--frost-black);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: crosshair;
}

body.locked { overflow: hidden; }

#grain, #scratches {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

#grain {
  opacity: .22;
  background-image:
    radial-gradient(circle at 13% 21%, rgba(255, 241, 214, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 62% 37%, rgba(191, 232, 255, .14) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 81%, rgba(255, 59, 107, .12) 0 1px, transparent 1px);
  background-size: 17px 23px, 29px 31px, 41px 37px;
  mix-blend-mode: screen;
  animation: grainShift 650ms steps(2, end) infinite;
}

#scratches {
  opacity: .32;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(255,255,255,.035) 20px 21px, transparent 22px 58px),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(191,232,255,.05) 6px 7px, transparent 8px 12px);
}

.boot-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 48% 48%, rgba(36, 88, 255, .11), transparent 24%),
    linear-gradient(135deg, #05060A 0 54%, #090814 54% 100%);
  transition: transform .34s cubic-bezier(.8, -.15, .2, 1.3), opacity .2s linear;
}

.boot-gate.opened {
  transform: translateY(-110%) rotate(-2deg);
  opacity: 0;
}

.standby-led {
  position: absolute;
  top: 10vh;
  left: 11vw;
  width: 12px;
  height: 12px;
  background: var(--denial-blue);
  box-shadow: 0 0 24px var(--denial-blue), 0 0 80px var(--screen-ice);
  border-radius: 50%;
}

.thermal-aperture {
  width: min(42vw, 420px);
  aspect-ratio: 1;
  border: 0;
  position: relative;
  background: transparent;
  filter: drop-shadow(-20px 0 0 rgba(36,88,255,.28)) drop-shadow(20px 0 0 rgba(255,59,107,.18));
}

.thermal-aperture::before,
.thermal-aperture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--dirty-lens);
  clip-path: polygon(0 0, 52% 0, 45% 24%, 56% 49%, 44% 73%, 51% 100%, 0 100%);
  background: var(--denial-blue);
  transform-origin: 50% 50%;
}

.thermal-aperture::after {
  clip-path: polygon(49% 0, 100% 0, 100% 100%, 49% 100%, 57% 73%, 46% 51%, 57% 24%);
  background: var(--blush-alarm);
}

.thermal-aperture.closed::before { transform: translateX(13%) scaleX(.18); }
.thermal-aperture.closed::after { transform: translateX(-13%) scaleX(.18); }
.thermal-aperture.flash::before { animation: apertureSnap .24s steps(2, end); }
.thermal-aperture.flash::after { animation: apertureSnap .24s steps(2, end) reverse; }

.aperture-hinge {
  position: absolute;
  inset: 47%;
  z-index: 2;
  border-radius: 50%;
  background: var(--paper-bandage);
  box-shadow: 0 0 0 12px var(--frost-black), 0 0 30px var(--overheat-coral);
}

.aperture-eye {
  position: absolute;
  inset: 42% 25%;
  z-index: 1;
  background: var(--frost-black);
  border-radius: 50%;
  transform: rotate(-6deg);
}

.boot-copy,
.boot-whisper {
  position: absolute;
  margin: 0;
}

.boot-copy {
  bottom: 14vh;
  left: 9vw;
  font: 700 clamp(28px, 7vw, 92px)/.86 "Bricolage Grotesque", Inter, system-ui, sans-serif;
  letter-spacing: -.06em;
  color: var(--screen-ice);
  text-transform: lowercase;
}

.boot-whisper {
  right: 12vw;
  bottom: 21vh;
  color: var(--dirty-lens);
  font-family: "Sawarabi Mincho", Georgia, serif;
  transform: rotate(-7deg);
}

.record-tabs {
  position: fixed;
  z-index: 45;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  gap: 7px;
}

.record-tabs a {
  width: 112px;
  padding: 10px 7px;
  color: var(--frost-black);
  text-decoration: none;
  background: var(--paper-bandage);
  font: 800 12px/1 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  clip-path: polygon(9% 0, 100% 0, 92% 100%, 0 100%);
  transform: translateX(46px);
  transition: transform .12s steps(2, end), background .12s;
}

.record-tabs a:hover,
.record-tabs a.hot {
  transform: translateX(0);
  background: var(--blush-alarm);
}

.record-tabs span { display: block; color: var(--denial-blue); }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 14px solid var(--frost-black);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(112deg, var(--denial-blue) 0 43%, var(--frost-black) 43% 49%, var(--blush-alarm) 49% 100%);
  filter: saturate(calc(.8 + var(--hot-pressure) * .8));
}

.scene::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  opacity: calc(.25 + var(--hot-pressure) * .25);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,138,92,.85), transparent 24%), radial-gradient(circle at 18% 18%, rgba(191,232,255,.6), transparent 21%);
  mix-blend-mode: screen;
}

.split-panel { position: absolute; inset: 0; }
.ice-panel { background: var(--screen-ice); clip-path: polygon(0 0, 57% 0, 37% 100%, 0 100%); opacity: .86; }
.heat-panel { right: -12vw; background: var(--overheat-coral); clip-path: polygon(52% 0, 100% 0, 100% 100%, 29% 100%); opacity: .84; }

.scene-label.vertical {
  position: absolute;
  left: 14px;
  top: 7vh;
  writing-mode: vertical-rl;
  font: 900 18px/1 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .32em;
  color: var(--frost-black);
  background: var(--paper-bandage);
  padding: 16px 9px;
}

.wordmark {
  position: absolute;
  top: 13vh;
  left: -4vw;
  width: 108vw;
  font: 900 clamp(58px, 15vw, 214px)/.72 "Bricolage Grotesque", Inter, system-ui, sans-serif;
  letter-spacing: -.095em;
  text-transform: lowercase;
  transform: rotate(-4deg);
}

.wordmark-cold { color: var(--denial-blue); text-shadow: -7px -7px 0 var(--screen-ice); }
.wordmark-hot { color: var(--blush-alarm); text-shadow: 9px 9px 0 var(--paper-bandage); }

.hostile-lens {
  position: absolute;
  right: 5vw;
  bottom: 7vh;
  width: min(46vw, 520px);
  aspect-ratio: 1.2;
  transform: rotate(9deg);
}

.lens-shell {
  position: absolute;
  inset: 5%;
  background: var(--frost-black);
  border: 8px solid var(--paper-bandage);
  clip-path: polygon(14% 2%, 92% 0, 100% 31%, 82% 95%, 7% 89%, 0 17%);
  box-shadow: 0 0 0 14px var(--violet-bruise), inset 0 0 50px rgba(191,232,255,.25);
}

.lens-eye {
  position: absolute;
  inset: 24% 12%;
  background: linear-gradient(90deg, var(--screen-ice) 0 47%, var(--frost-black) 47% 53%, var(--blush-alarm) 53%);
  border-radius: 50%;
  transform: rotate(-5deg) scaleY(.48);
  overflow: hidden;
}

.lens-eye span {
  position: absolute;
  inset: 28% 42%;
  border-radius: 50%;
  background: var(--frost-black);
  box-shadow: 0 0 0 11px var(--violet-bruise);
}

.frost { position: absolute; width: 72px; height: 2px; background: var(--screen-ice); box-shadow: 0 0 18px var(--screen-ice); }
.frost::before, .frost::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(60deg); }
.frost::after { transform: rotate(-60deg); }
.f1 { left: 6%; top: 18%; } .f2 { left: 18%; bottom: 10%; transform: scale(.7); } .f3 { right: 11%; top: 14%; transform: scale(.45); }
.rec-bulb { position: absolute; right: 7%; bottom: 10%; color: var(--blush-alarm); font: 900 18px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .25em; }
.rec-bulb::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--blush-alarm); box-shadow: 0 0 28px var(--blush-alarm); vertical-align: -2px; }

.subtitle-band {
  position: absolute;
  left: 17vw;
  bottom: 19vh;
  background: var(--frost-black);
  color: var(--paper-bandage);
  padding: 12px 26px;
  font: 900 clamp(16px, 3vw, 46px) "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .1em;
  transform: rotate(2deg);
}

.sticky-note, .caption-frag {
  position: absolute;
  padding: 17px 20px;
  background: var(--paper-bandage);
  color: var(--frost-black);
  box-shadow: 10px 12px 0 rgba(7,8,13,.55);
}
.sticky-note { right: 24vw; top: 48vh; transform: rotate(-14deg); font: 900 21px "Bricolage Grotesque", sans-serif; }
.caption-frag { left: 10vw; bottom: 7vh; font-size: clamp(18px, 2vw, 28px); color: var(--violet-bruise); }
.mincho { font-family: "Sawarabi Mincho", Georgia, "Times New Roman", serif; }
.technical { font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .18em; }

.scene-cold::before { background: linear-gradient(105deg, var(--screen-ice) 0 48%, var(--denial-blue) 48% 67%, var(--frost-black) 67%); }
.cold-slab { position: absolute; inset: -4vh 42vw -4vh -8vw; background: var(--screen-ice); clip-path: polygon(0 0, 100% 7%, 68% 100%, 0 92%); }
.camera-frame {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: min(68vw, 820px);
  height: 64vh;
  border: 10px solid var(--frost-black);
  background: repeating-linear-gradient(135deg, rgba(7,8,13,.14) 0 18px, rgba(36,88,255,.19) 19px 32px), var(--screen-ice);
  clip-path: polygon(5% 0, 100% 4%, 93% 100%, 0 91%);
  box-shadow: 28px 26px 0 var(--denial-blue);
}
.tilt-left { transform: rotate(-3deg); }
.camera-frame h1, .scene-blush h2, .scene-confession h2 {
  margin: 24px 0 0 -10px;
  color: var(--frost-black);
  font: 900 clamp(76px, 16vw, 220px)/.72 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.08em;
}
.camera-frame .technical { position: absolute; left: 34px; bottom: 28px; color: var(--frost-black); max-width: 520px; }
.calibration-cross, .calibration-cross::before, .calibration-cross::after { position: absolute; background: var(--blush-alarm); }
.calibration-cross { right: 11%; top: 19%; width: 96px; height: 5px; transform: rotate(20deg); }
.calibration-cross::before { content: ""; width: 5px; height: 96px; left: 45px; top: -45px; }
.calibration-cross::after { content: "×"; color: var(--frost-black); background: transparent; font: 900 80px Inter, sans-serif; left: 19px; top: -49px; }
.fog { position: absolute; border-radius: 50%; background: rgba(255,241,214,.5); filter: blur(18px); animation: fogDrift 6s ease-in-out infinite; }
.fog-one { width: 250px; height: 80px; right: 11%; bottom: 18%; }
.fog-two { width: 180px; height: 70px; left: 15%; top: 40%; animation-delay: -2s; }
.thermometer { position: absolute; right: 14vw; top: 10vh; height: 72vh; width: 38px; background: var(--frost-black); display: grid; align-content: space-around; padding: 18px 8px; }
.thermometer span { height: 4px; background: var(--paper-bandage); }
.thermometer::after { content: "DENIAL TEMP"; position: absolute; top: 0; left: 58px; writing-mode: vertical-rl; color: var(--paper-bandage); font: 900 14px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .22em; }
.censor-stack { position: absolute; right: -5vw; bottom: 8vh; display: grid; gap: 12px; transform: rotate(-8deg); }
.censor-stack i { display: block; width: 42vw; height: 35px; background: var(--frost-black); box-shadow: -15px 0 0 var(--denial-blue); }
.whisper { position: absolute; right: 22vw; bottom: 25vh; max-width: 300px; font-size: 25px; color: var(--paper-bandage); transform: rotate(7deg); }
.katakana { position: absolute; right: 4vw; bottom: 6vh; font: 900 68px/1 "Bricolage Grotesque", sans-serif; color: var(--screen-ice); text-shadow: 5px 5px 0 var(--denial-blue); }

.scene-blush::before { background: linear-gradient(112deg, var(--frost-black) 0 30%, var(--blush-alarm) 30% 63%, var(--overheat-coral) 63%); }
.heat-bloom { position: absolute; inset: 8vh 0 0 31vw; background: radial-gradient(circle, var(--overheat-coral), var(--blush-alarm) 34%, transparent 62%); filter: blur(4px); animation: pulseHeat 1.7s steps(3, end) infinite; }
.scene-blush h2 { position: absolute; top: 7vh; right: -2vw; color: var(--paper-bandage); text-align: right; text-shadow: -11px 8px 0 var(--violet-bruise); }
.subtitle-box { position: absolute; left: 8vw; top: 30vh; width: min(52vw, 680px); padding: 32px; background: var(--paper-bandage); color: var(--frost-black); border: 8px solid var(--frost-black); transform: rotate(-4deg); box-shadow: 22px 22px 0 var(--denial-blue); }
.subtitle-box p { margin: 8px 0 0; font: 900 clamp(32px, 5vw, 72px)/.88 "Bricolage Grotesque", sans-serif; letter-spacing: -.055em; }
.ui-tag { font: 900 14px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .28em; color: var(--blush-alarm); }
.love-warning { position: absolute; right: 10vw; bottom: 12vh; display: grid; gap: 12px; justify-items: center; color: var(--frost-black); font: 900 16px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .2em; }
.love-warning svg { width: 112px; fill: none; stroke: var(--frost-black); stroke-width: 7px; background: var(--screen-ice); padding: 16px; transform: rotate(8deg); }
.letter-strips { position: absolute; left: -3vw; bottom: 7vh; display: grid; gap: 10px; transform: rotate(5deg); }
.letter-strips span { width: 48vw; padding: 10px 32px; background: var(--frost-black); color: var(--paper-bandage); font: 900 28px "IBM Plex Sans Condensed", sans-serif; text-transform: uppercase; letter-spacing: .14em; }
.note { position: absolute; right: 6vw; top: 17vh; width: 260px; padding: 20px; background: var(--paper-bandage); color: var(--violet-bruise); transform: rotate(15deg); font-size: 24px; }

.scene-quarrel::before { background: repeating-linear-gradient(100deg, var(--frost-black) 0 8%, var(--denial-blue) 8% 17%, var(--frost-black) 17% 24%, var(--blush-alarm) 24% 35%); }
.broken-feed { position: absolute; left: 7vw; top: 10vh; width: 86vw; height: 70vh; filter: drop-shadow(0 0 35px rgba(255,59,107,.35)); }
.feed-slice { position: absolute; left: 0; right: 0; height: 22%; padding: 10px 30px; font: 900 clamp(42px, 10vw, 150px)/.8 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; overflow: hidden; }
.s1 { top: 0; background: var(--screen-ice); color: var(--frost-black); clip-path: polygon(0 0, 92% 0, 100% 100%, 3% 100%); }
.s2 { top: 23%; left: 8vw; background: var(--blush-alarm); color: var(--paper-bandage); clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%); }
.s3 { top: 46%; left: -5vw; background: var(--frost-black); color: var(--screen-ice); border: 3px solid var(--paper-bandage); }
.s4 { top: 69%; left: 14vw; background: var(--paper-bandage); color: var(--violet-bruise); font-family: "Sawarabi Mincho", Georgia, serif; }
.argument-meter { position: absolute; left: 14vw; bottom: 9vh; width: 60vw; display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; font: 900 18px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .22em; }
.argument-meter div { height: 18px; background: linear-gradient(90deg, var(--screen-ice), var(--denial-blue), var(--blush-alarm), var(--overheat-coral)); border: 4px solid var(--frost-black); position: relative; }
.argument-meter i { position: absolute; top: -16px; left: calc(var(--hot-pressure) * 100%); width: 18px; height: 48px; background: var(--paper-bandage); transform: skew(-12deg); box-shadow: 0 0 0 4px var(--frost-black); }
.cracks i { position: absolute; width: 2px; height: 42vh; background: var(--paper-bandage); transform-origin: top; opacity: .9; }
.cracks i:nth-child(1) { left: 22vw; top: 12vh; transform: rotate(32deg); }
.cracks i:nth-child(2) { left: 56vw; top: 4vh; transform: rotate(-19deg); }
.cracks i:nth-child(3) { left: 74vw; top: 33vh; transform: rotate(52deg); }
.cracks i:nth-child(4) { left: 42vw; top: 50vh; transform: rotate(-58deg); }
.cracks i:nth-child(5) { left: 12vw; top: 59vh; transform: rotate(73deg); }
.quarrel-copy { position: absolute; right: 5vw; top: 8vh; width: 220px; color: var(--paper-bandage); background: var(--frost-black); padding: 14px; }
.glare-lines span { position: absolute; left: -10vw; width: 120vw; height: 8px; background: var(--paper-bandage); transform: rotate(-18deg); opacity: .7; animation: glareSnap 2.8s steps(2, end) infinite; }
.glare-lines span:nth-child(1) { top: 18vh; } .glare-lines span:nth-child(2) { top: 51vh; animation-delay: -.7s; } .glare-lines span:nth-child(3) { top: 78vh; animation-delay: -1.4s; }

.scene-confession::before { background: linear-gradient(100deg, var(--frost-black) 0 35%, var(--violet-bruise) 35% 48%, var(--paper-bandage) 48% 66%, var(--blush-alarm) 66%); }
.final-aperture { position: absolute; left: -8vw; top: 10vh; width: min(60vw, 650px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 210deg, var(--screen-ice) 0 31%, var(--frost-black) 31% 41%, var(--blush-alarm) 41% 72%, var(--overheat-coral) 72% 100%); box-shadow: inset 0 0 0 24px var(--frost-black), 30px 0 0 var(--paper-bandage); }
.final-eye { position: absolute; inset: 42% 18%; background: var(--frost-black); border-radius: 50%; transform: rotate(-8deg) scaleY(.32); box-shadow: 0 0 80px var(--blush-alarm); }
.scene-confession h2 { position: absolute; top: 6vh; right: -1vw; color: var(--frost-black); text-shadow: 7px 7px 0 var(--blush-alarm); }
.confession-paper { position: absolute; right: 13vw; bottom: 17vh; width: min(48vw, 570px); padding: 28px 34px; background: var(--paper-bandage); color: var(--frost-black); box-shadow: -18px 18px 0 var(--denial-blue), 18px -18px 0 var(--blush-alarm); transform: rotate(-2deg); font-size: clamp(22px, 3vw, 42px); line-height: 1.08; }
.confession-paper p { margin: 0 0 14px; }
.deny-button { position: absolute; left: 16vw; bottom: 12vh; border: 0; padding: 18px 28px; background: var(--frost-black); color: var(--paper-bandage); font: 900 22px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .2em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 10px 10px 0 var(--blush-alarm); }
.deny-button:hover { background: var(--denial-blue); transform: rotate(-3deg) translateY(-6px); }
.last-subtitle { position: absolute; left: 18vw; bottom: 5vh; padding: 10px 20px; background: var(--blush-alarm); color: var(--paper-bandage); font: 900 18px "IBM Plex Sans Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(20px); transition: .18s steps(2, end); }
.last-subtitle.show { opacity: 1; transform: translateY(0) rotate(-2deg); }

.recoil { animation: recoil .24s cubic-bezier(.85,-.4,.2,1.4); }
.hot-bias .scene::after { opacity: .62; }
.cold-bias .censor-stack i, .cold-bias .frost { opacity: calc(.55 + var(--cold-pressure) * .45); }

@keyframes grainShift { to { transform: translate(3px, -2px); } }
@keyframes apertureSnap { 50% { transform: scaleX(1.2) rotate(9deg); filter: brightness(2); } }
@keyframes fogDrift { 50% { transform: translateX(60px) translateY(-14px) scale(1.2); } }
@keyframes pulseHeat { 50% { transform: scale(1.15); opacity: .7; } }
@keyframes glareSnap { 50% { opacity: 0; transform: rotate(-18deg) translateX(18vw); } }
@keyframes recoil { 0% { transform: translate(0,0) rotate(var(--base-rot, 0deg)); } 45% { transform: translate(calc((.5 - var(--hot-pressure)) * 42px), -12px) rotate(5deg); } 100% { transform: translate(0,0) rotate(var(--base-rot, 0deg)); } }

@media (max-width: 760px) {
  .record-tabs { top: auto; bottom: 0; right: 0; left: 0; transform: none; grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .record-tabs a { width: auto; transform: none; padding: 9px 2px; font-size: 9px; clip-path: none; }
  .wordmark { top: 18vh; font-size: 23vw; }
  .hostile-lens { width: 82vw; right: -12vw; bottom: 15vh; }
  .subtitle-band { left: 5vw; bottom: 12vh; }
  .camera-frame { width: 88vw; left: 4vw; height: 58vh; }
  .thermometer { right: 4vw; height: 48vh; }
  .subtitle-box { width: 84vw; left: 8vw; top: 34vh; }
  .scene-blush h2, .scene-confession h2 { font-size: 21vw; }
  .confession-paper { width: 82vw; right: 8vw; bottom: 18vh; }
}