.opening-prologue {
  --prologue-bg: #080c15;
  --prologue-panel: #111928;
  --prologue-panel-2: #172338;
  --prologue-line: #34445e;
  --prologue-ink: #eef1eb;
  --prologue-muted: #8390a4;
  --prologue-mint: #69d4d0;
  --prologue-gold: #f1b84b;
  --prologue-error: #ef6a64;
  position: fixed;
  z-index: 120;
  inset: 0;
  padding: 38px 18px 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--prologue-ink);
  background: radial-gradient(circle at 50% 44%, #182238 0, #080c15 58%, #03050a 100%);
  font-family: "Space Grotesk", sans-serif;
}
.opening-prologue[hidden] { display: none; }
body.opening-is-active { overflow: hidden; }
.opening-prologue::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg,transparent 0 3px,rgba(143,190,205,.025) 3px 4px); mix-blend-mode: screen; }
.opening-skip { position: absolute; z-index: 20; top: 16px; right: 20px; padding: 8px 11px; border: 1px solid #33415a; border-radius: 3px; color: #9ca8b8; background: rgba(8,12,21,.82); font: .53rem "DM Mono",monospace; letter-spacing: .06em; cursor: pointer; }
.opening-skip:hover,.opening-skip:focus-visible { color: var(--prologue-ink); border-color: var(--prologue-mint); outline: none; }

.opening-desktop { position: relative; width: min(1120px,calc(100vw - 34px),calc((100vh - 96px) * 1.777)); aspect-ratio: 16/9; overflow: hidden; border: 1px solid #34445e; border-radius: 7px; background: var(--prologue-bg); box-shadow: 0 30px 100px rgba(0,0,0,.65),0 0 0 6px rgba(24,34,53,.65); opacity: 0; }
.desktop-bar { height: 7.5%; padding: 0 2%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(122,148,177,.22); background: rgba(8,14,25,.92); }
.desktop-brand,.desktop-status { display: flex; align-items: center; gap: 10px; }
.desktop-brand i { width: 13px; height: 13px; background: var(--prologue-mint); box-shadow: 7px 7px 0 -3px var(--prologue-gold); transform: rotate(45deg); }
.desktop-brand span,.desktop-status span { color: #8b99ad; font: clamp(.36rem,.7vw,.53rem) "DM Mono",monospace; letter-spacing: .09em; }
.desktop-status span { color: var(--prologue-gold); }.desktop-status b { color: #e3e8ee; font: clamp(.44rem,.82vw,.62rem) "DM Mono",monospace; }

.desktop-field { position: relative; height: 84.5%; overflow: hidden; background: radial-gradient(circle at 74% 38%,rgba(105,212,208,.11),transparent 28%),radial-gradient(circle at 18% 75%,rgba(169,143,232,.12),transparent 32%),linear-gradient(145deg,#15243a,#0a1120 62%,#07101b); }
.desktop-field::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 0 49.7%,rgba(105,212,208,.04) 50%,transparent 50.3%),repeating-linear-gradient(90deg,transparent 0 47px,rgba(105,212,208,.022) 48px),repeating-linear-gradient(0deg,transparent 0 47px,rgba(105,212,208,.022) 48px); }
.desktop-field::after { content: ""; position: absolute; width: 34%; aspect-ratio: 1; right: -8%; bottom: -26%; border: 1px solid rgba(105,212,208,.1); border-radius: 50%; box-shadow: 0 0 0 55px rgba(105,212,208,.018),0 0 0 120px rgba(105,212,208,.012); }
.desktop-icons { position: absolute; z-index: 1; left: 2.1%; top: 5%; bottom: 4%; width: 12%; display: flex; flex-direction: column; gap: 7%; }
.desktop-icon { display: grid; grid-template-columns: 34% 1fr; gap: 6%; color: #dce3e9; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.desktop-icon > i { grid-row: 1/3; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(231,239,242,.28); border-radius: 4px; color: #08121d; background: #d8e0df; box-shadow: inset -5px -5px 0 rgba(33,57,76,.11),3px 4px 0 rgba(0,0,0,.18); font: 700 clamp(.52rem,1.15vw,.92rem) "DM Mono",monospace; font-style: normal; }
.desktop-icon.icon-music > i { color: #102322; background: var(--prologue-mint); }.desktop-icon.icon-folder > i { color: #2d240d; background: var(--prologue-gold); }
.desktop-icon b { align-self: end; font-size: clamp(.4rem,.67vw,.58rem); line-height: 1.15; }.desktop-icon small { color: #8491a2; font: clamp(.31rem,.52vw,.44rem) "DM Mono",monospace; }

.mail-window { position: absolute; z-index: 3; left: 17%; top: 8%; width: 68%; height: 78%; overflow: hidden; border: 1px solid var(--prologue-line); border-radius: 7px; background: rgba(13,21,34,.97); box-shadow: 0 24px 60px rgba(0,0,0,.42),4px 5px 0 rgba(4,7,12,.34); }
.mail-window > header { height: 11%; padding: 0 2%; display: flex; align-items: center; gap: 1.2%; border-bottom: 1px solid #2d3a4e; background: #151f30; }
.window-controls { display: flex; gap: 5px; }.window-controls i { width: 8px; height: 8px; border-radius: 50%; background: #5d6c80; }.window-controls i:first-child { background: var(--prologue-error); }.window-controls i:nth-child(2) { background: var(--prologue-gold); }.window-controls i:nth-child(3) { background: var(--prologue-mint); }
.mail-window > header b { color: #dbe2e9; font: clamp(.38rem,.68vw,.56rem) "DM Mono",monospace; letter-spacing: .07em; }.mail-window > header small { margin-left: auto; color: var(--prologue-gold); font: clamp(.32rem,.58vw,.48rem) "DM Mono",monospace; }
.mail-layout { height: 89%; display: grid; grid-template-columns: 22% 1fr; }
.mail-layout nav { padding: 10% 9%; display: flex; flex-direction: column; gap: 4%; border-right: 1px solid #29364a; color: #6f7d90; background: #101827; font-size: clamp(.38rem,.66vw,.55rem); }
.mail-layout nav strong { margin-bottom: 8%; color: #8e9cb0; font: clamp(.32rem,.55vw,.45rem) "DM Mono",monospace; letter-spacing: .09em; }.mail-layout nav span { padding: 5% 7%; border-radius: 3px; }.mail-layout nav span.is-active { color: #dce6ed; background: #202d41; }.mail-layout nav span b { float: right; color: #101827; background: var(--prologue-gold); padding: 0 4px; border-radius: 8px; }
.mail-content { position: relative; min-width: 0; overflow: hidden; }
.mail-row { position: absolute; inset: 0 auto auto 0; width: 100%; min-height: 22%; padding: 2.5% 3%; display: grid; grid-template-columns: 7% 1fr auto; gap: 2%; align-items: center; border: 0; border-bottom: 1px solid #29364a; color: #e1e7ed; background: #1b283b; text-align: left; font-family: inherit; }
.mail-row > i,.mail-from > i { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #111724; background: #aa8fe8; font: 700 clamp(.42rem,.76vw,.63rem) "DM Mono",monospace; font-style: normal; }.mail-row span,.mail-row b,.mail-row strong,.mail-row small { display: block; }.mail-row b { color: #cdd5df; font-size: clamp(.4rem,.73vw,.6rem); }.mail-row strong { margin: 1.2% 0; color: #f0f2ee; font-size: clamp(.45rem,.85vw,.7rem); }.mail-row small { color: #8492a4; font-size: clamp(.35rem,.62vw,.52rem); }.mail-row time { align-self: start; color: var(--prologue-gold); font: clamp(.31rem,.55vw,.45rem) "DM Mono",monospace; }
.mail-reading { position: absolute; inset: 0; padding: 5% 7%; color: #dbe2e8; background: #131d2d; opacity: 0; transform: translateX(5%); }
.mail-from { display: grid; grid-template-columns: 6% 1fr; gap: 2%; align-items: center; }.mail-from span,.mail-from b,.mail-from small { display: block; }.mail-from b { font-size: clamp(.42rem,.76vw,.63rem); }.mail-from small { color: #758398; font: clamp(.31rem,.54vw,.45rem) "DM Mono",monospace; }
.mail-reading h2 { margin: 5% 0 4%; font-size: clamp(.8rem,1.7vw,1.5rem); }.mail-reading > p { max-width: 78%; margin: 0 0 2.4%; color: #aeb8c5; font-size: clamp(.42rem,.78vw,.66rem); line-height: 1.55; }
.mail-attachment { width: min(76%,340px); margin-top: 5%; padding: 2.5% 3%; display: grid; grid-template-columns: 12% 1fr; gap: 3%; align-items: center; border: 1px solid #40506a; border-radius: 5px; color: #e4e9ed; background: #1b293d; text-align: left; font-family: inherit; }
.mail-attachment > i { aspect-ratio: 1; display: grid; place-items: center; color: #10201f; background: var(--prologue-mint); font: 700 clamp(.5rem,.9vw,.75rem) "DM Mono",monospace; font-style: normal; }.mail-attachment b,.mail-attachment small { display: block; }.mail-attachment b { font-size: clamp(.4rem,.74vw,.62rem); }.mail-attachment small { margin-top: 2%; color: #7e8ca0; font: clamp(.31rem,.54vw,.45rem) "DM Mono",monospace; }

.download-toast { position: absolute; z-index: 6; right: 2.5%; bottom: 3%; width: 27%; padding: 1.4% 1.7%; display: grid; grid-template-columns: 10% 1fr; gap: 5%; align-items: center; border: 1px solid #40506a; border-radius: 5px; background: #152236; box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(18px); }
.download-toast > i { width: 100%; aspect-ratio: 1; background: var(--prologue-mint); box-shadow: inset -4px 0 0 rgba(0,0,0,.12); }.download-toast span,.download-toast b,.download-toast small { display: block; }.download-toast b { font-size: clamp(.38rem,.7vw,.58rem); }.download-toast small { margin-top: 2%; color: #8493a7; font: clamp(.3rem,.52vw,.43rem) "DM Mono",monospace; }

.security-dialog { position: absolute; z-index: 9; left: 50%; top: 50%; width: min(50%,520px); padding: 3.2%; display: grid; grid-template-columns: 13% 1fr; gap: 4%; border: 1px solid #8d7350; border-radius: 6px; color: #2a261e; background: #f4e9c9; box-shadow: 0 28px 90px rgba(0,0,0,.62),7px 8px 0 rgba(0,0,0,.2); opacity: 0; transform: translate(-50%,-46%) scale(.94); pointer-events: none; }
.warning-mark { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #8a4b43; color: #8a4b43; background: #ffecc2; font: 700 clamp(.7rem,1.7vw,1.4rem) "DM Mono",monospace; }
.security-dialog small { color: #926338; font: clamp(.31rem,.55vw,.45rem) "DM Mono",monospace; letter-spacing: .08em; }.security-dialog h2 { margin: 3% 0; font-size: clamp(.75rem,1.5vw,1.35rem); line-height: 1.05; }.security-dialog p { margin: 0; color: #70624e; font-size: clamp(.4rem,.72vw,.61rem); line-height: 1.5; }
.security-dialog footer { grid-column: 1/-1; margin-top: 5%; display: flex; justify-content: flex-end; gap: 2%; }.security-dialog button { min-width: 28%; padding: 2.4% 3%; border: 1px solid #79694f; color: #373026; background: #fff5d7; font: 700 clamp(.36rem,.65vw,.54rem) "DM Mono",monospace; cursor: pointer; }.security-dialog button:last-child { color: #fff8e8; border-color: #8a3d38; background: #b64e49; }.security-dialog button:disabled { opacity: .5; cursor: wait; }.security-dialog button:focus-visible { outline: 3px solid rgba(182,78,73,.35); outline-offset: 3px; }
.security-dialog.is-hesitating { animation: opening-hesitate .3s steps(2,end); }
@keyframes opening-hesitate { 25% { margin-left: -8px; } 55% { margin-left: 7px; } 80% { margin-left: -3px; } }

.infection-canvas,.infection-channels { position: absolute; z-index: 12; inset: 0; width: 100%; height: 100%; pointer-events: none; }.infection-channels { opacity: 0; overflow: hidden; mix-blend-mode: screen; }.infection-channels i { position: absolute; left: -5%; width: 110%; height: 3%; background: rgba(239,106,100,.4); transform: skewX(-18deg); }.infection-channels i:first-child { top: 19%; }.infection-channels i:nth-child(2) { top: 48%; height: 7%; background: rgba(105,212,208,.26); }.infection-channels i:nth-child(3) { top: 76%; background: rgba(170,143,232,.34); }
.opening-boot { position: absolute; z-index: 15; left: 50%; top: 50%; width: min(62%,620px); padding: 5%; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(105,212,208,.55); color: #e8eff2; background: rgba(5,12,22,.94); box-shadow: 0 0 80px rgba(105,212,208,.18),8px 9px 0 rgba(0,0,0,.28); text-align: center; opacity: 0; transform: translate(-50%,-45%) scale(.92); }
.boot-glyph { width: clamp(38px,6vw,70px); aspect-ratio: 1; margin-bottom: 5%; display: grid; place-items: center; border: 2px solid var(--prologue-mint); color: var(--prologue-mint); background: rgba(105,212,208,.06); box-shadow: 6px 6px 0 rgba(105,212,208,.12); font: 700 clamp(.8rem,2vw,1.7rem) "DM Mono",monospace; font-style: normal; }.opening-boot small { color: var(--prologue-error); font: clamp(.34rem,.63vw,.52rem) "DM Mono",monospace; letter-spacing: .1em; }.opening-boot strong { margin: 3% 0; font-size: clamp(.75rem,1.7vw,1.45rem); }.opening-boot span { color: #7d91a7; font: clamp(.31rem,.56vw,.47rem) "DM Mono",monospace; letter-spacing: .07em; }
.opening-cursor { position: absolute; z-index: 18; left: 90%; top: 82%; width: clamp(13px,1.7vw,23px); height: clamp(19px,2.5vw,34px); opacity: 0; filter: drop-shadow(2px 3px 1px rgba(0,0,0,.55)); }.opening-cursor::before { content: ""; position: absolute; inset: 0; background: #f5f3ec; clip-path: polygon(0 0,0 84%,24% 66%,42% 100%,58% 91%,40% 60%,70% 59%); }.opening-cursor i { position: absolute; left: -55%; top: -35%; width: 210%; aspect-ratio: 1; border: 2px solid rgba(241,184,75,.8); border-radius: 50%; opacity: 0; }

.desktop-dock { height: 8%; padding: 0 2%; display: flex; align-items: center; gap: 1.2%; border-top: 1px solid rgba(122,148,177,.22); background: #0c1422; }.desktop-dock span { height: 58%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #33445b; border-radius: 3px; color: #b7c2ce; background: #172338; font: 700 clamp(.37rem,.65vw,.54rem) "DM Mono",monospace; }.desktop-dock > i { height: 38%; width: 1px; margin-left: auto; background: #34445c; }.desktop-dock small { color: #7e8da2; font: clamp(.3rem,.51vw,.43rem) "DM Mono",monospace; }
.opening-caption { position: absolute; left: 50%; bottom: 14px; margin: 0; color: #718097; font: .52rem "DM Mono",monospace; letter-spacing: .07em; transform: translateX(-50%); white-space: nowrap; }

.opening-prologue.is-infected .opening-desktop { border-color: rgba(239,106,100,.7); box-shadow: 0 30px 100px rgba(0,0,0,.7),0 0 60px rgba(239,106,100,.18); }
.opening-prologue.is-infected .desktop-field { filter: saturate(1.45) contrast(1.08); }

@media (max-width: 720px) {
  .opening-prologue { padding: 54px 10px 68px; }.opening-desktop { width: calc(100vw - 20px); height: min(72vh,650px); aspect-ratio: auto; }
  .desktop-bar { height: 7%; }.desktop-field { height: 86%; }.desktop-dock { height: 7%; }
  .desktop-icons { display: none; }.mail-window { left: 4%; top: 6%; width: 92%; height: 84%; }.mail-layout { grid-template-columns: 1fr; }.mail-layout nav { display: none; }
  .mail-window > header b { font-size: .52rem; }.mail-window > header small { font-size: .45rem; }
  .mail-row b { font-size: .54rem; }.mail-row strong { font-size: .65rem; }.mail-row small { font-size: .48rem; }
  .mail-reading h2 { font-size: 1.15rem; }.mail-reading > p { max-width: 94%; font-size: .58rem; }.mail-attachment b { font-size: .55rem; }.mail-attachment small { font-size: .43rem; }
  .security-dialog { width: 86%; padding: 6%; }.security-dialog h2 { font-size: 1rem; }.security-dialog p { font-size: .55rem; }.security-dialog button { font-size: .48rem; }
  .download-toast { right: 4%; width: 62%; }.desktop-status span { display: none; }
  .opening-caption { width: calc(100vw - 36px); text-align: center; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-prologue * { animation: none !important; transition: none !important; }
}