:root {
  color-scheme: dark;
  --bg-900: #070609;
  --bg-850: #0e0b11;
  --bg-800: #151018;
  --bg-750: #1a141d;
  --panel-900: rgba(14, 11, 17, 0.9);
  --panel-850: rgba(20, 16, 23, 0.88);
  --panel-800: rgba(30, 23, 33, 0.8);
  --panel-soft: rgba(255, 255, 255, 0.05);
  --panel-line: rgba(239, 222, 195, 0.12);
  --panel-line-strong: rgba(239, 222, 195, 0.22);
  --text-main: #f5efe7;
  --text-soft: rgba(245, 239, 231, 0.78);
  --text-faint: rgba(245, 239, 231, 0.56);
  --gold: #d4bb90;
  --gold-soft: rgba(212, 187, 144, 0.16);
  --rose: #7a2c44;
  --ember: #b87951;
  --paper: #efe6d7;
  --paper-ink: #211a17;
  --error: #d88989;
  --success: #bfcf9f;
  --shadow-xl: 0 36px 100px rgba(0, 0, 0, 0.46);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
  --blur: blur(18px);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  --topbar-safe-offset: 0px;
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.34), transparent 24%),
    radial-gradient(circle at right 18%, rgba(212, 187, 144, 0.12), transparent 18%),
    radial-gradient(circle at bottom right, rgba(184, 121, 81, 0.16), transparent 22%),
    linear-gradient(145deg, var(--bg-900), var(--bg-850) 40%, #120f17 100%);
  overflow-x: hidden;
}

body[data-scene="intro"] {
  background:
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.42), transparent 25%),
    radial-gradient(circle at bottom right, rgba(212, 187, 144, 0.14), transparent 18%),
    linear-gradient(145deg, #08070a, #110d14 52%, #17111a 100%);
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

ul {
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none !important;
}

.noscript-warning {
  padding: 14px 18px;
  background: rgba(216, 137, 137, 0.12);
  color: #ffd7d7;
  text-align: center;
  border-bottom: 1px solid rgba(216, 137, 137, 0.25);
}

.mobile-screen-warning {
  display: none;
}

.leave-escape-button {
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition:
    filter 260ms ease,
    opacity 260ms ease,
    transform 260ms ease;
}

body.ending-phone-focus .app-shell {
  filter: blur(8px) saturate(0.76);
  opacity: 0.42;
  transform: scale(0.992);
  pointer-events: none;
  user-select: none;
}

.app-main {
  width: min(1280px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 124px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(9, 7, 11, 0.96), rgba(9, 7, 11, 0.78));
  backdrop-filter: var(--blur);
}

body.modal-topbar-visible .topbar {
  z-index: 120;
}

.brand-stack,
.brand-copy,
.topbar-meta {
  display: grid;
  gap: 4px;
}

.brand-stack {
  flex: 1 1 420px;
  min-width: 0;
}

.brand-copy {
  gap: 2px;
}

.brand-title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.case-title,
.intro-title,
.scene-title,
.modal-title,
.headline-block h2,
.letter-answer-head h3,
.phone-head h3,
.notes-head h3 {
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.case-title {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 0.92;
  flex: 0 1 auto;
  min-width: 0;
}

.topbar-status-copy,
.save-badge,
.intro-description,
.lead,
.inventory-status,
.small-note,
.modal-copy,
.hint-message,
.answer-feedback,
.feedback-panel,
.message-bubble,
.asset-fallback-label,
.asset-fallback-path {
  color: var(--text-soft);
}

.eyebrow,
.scene-kicker,
.newspaper-tag,
.newspaper-date,
.message-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before,
.scene-kicker::before,
.newspaper-tag::before,
.message-meta::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 187, 144, 0.85));
}

.topbar-meta {
  flex: 0 0 auto;
  justify-items: end;
  gap: 10px;
}

.topbar-timer {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(239, 222, 195, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(218, 188, 144, 0.14), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.14);
  text-align: left;
  white-space: nowrap;
}

.topbar-timer-label,
.topbar-timer-penalty {
  font-size: 0.72rem;
  color: var(--text-soft);
  line-height: 1;
}

.topbar-timer-value {
  color: var(--text-main);
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.topbar-timer-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px 3px;
  border-radius: 999px;
  border: 1px solid rgba(212, 187, 144, 0.14);
  background: rgba(212, 187, 144, 0.09);
  color: rgba(239, 222, 195, 0.88);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topbar-timer-penalty {
  position: relative;
  padding-left: 12px;
  color: rgba(239, 222, 195, 0.68);
}

.topbar-timer-penalty::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  background: rgba(239, 222, 195, 0.18);
  transform: translateY(-50%);
}

.topbar-actions,
.hero-actions,
.newspaper-actions,
.scene-tools,
.button-row,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.save-badge {
  min-height: 20px;
  font-size: 0.83rem;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.save-badge.is-saving {
  color: var(--gold);
}

.save-badge.is-restored {
  color: var(--success);
}

.ui-button,
.icon-button,
.phone-toggle,
.phone-send {
  appearance: none;
  border: 1px solid rgba(239, 222, 195, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 28, 38, 0.96), rgba(18, 15, 21, 0.98));
  color: var(--text-main);
  padding: 12px 18px;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    opacity var(--transition-fast);
}

.ui-button:hover,
.icon-button:hover,
.phone-toggle:hover,
.phone-send:hover,
.ui-button:focus-visible,
.icon-button:focus-visible,
.phone-toggle:focus-visible,
.phone-send:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 222, 195, 0.3);
  box-shadow: 0 0 0 1px rgba(212, 187, 144, 0.18), 0 18px 38px rgba(0, 0, 0, 0.2);
  outline: none;
}

.ui-button:disabled,
.icon-button:disabled,
.phone-toggle:disabled,
.phone-send:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ui-button-primary,
.phone-send {
  background: linear-gradient(180deg, rgba(184, 121, 81, 0.98), rgba(117, 72, 53, 0.98));
}

.ui-button-ghost {
  background: rgba(255, 255, 255, 0.04);
}

.ui-button-danger {
  background: linear-gradient(180deg, rgba(118, 44, 44, 0.96), rgba(82, 28, 28, 0.98));
  border-color: rgba(216, 137, 137, 0.22);
}

.ui-button.is-active {
  border-color: rgba(212, 187, 144, 0.34);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(212, 187, 144, 0.18), 0 18px 38px rgba(0, 0, 0, 0.2);
}

:focus-visible {
  outline: 2px solid rgba(212, 187, 144, 0.78);
  outline-offset: 2px;
}

.screen {
  position: relative;
  width: 100%;
  min-height: clamp(640px, 82vh, 920px);
  border: 1px solid rgba(239, 222, 195, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 14, 21, 0.94), rgba(12, 10, 16, 0.98));
  box-shadow: var(--shadow-xl);
  animation: fade-in 420ms ease both;
}

.scene-media,
.managed-figure,
.modal-figure,
.inventory-thumb,
.media-shell {
  position: relative;
  overflow: hidden;
}

.scene-media,
.media-shell {
  width: 100%;
  height: 100%;
}

.scene-media-cover,
.letter-media {
  position: absolute;
  inset: 0;
}

.managed-image,
.scene-image,
.inventory-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 420ms ease, transform 900ms ease;
}

.managed-image-no-motion {
  opacity: 1;
  transform: none;
  transition: none;
}

.inventory-thumb-image {
  object-fit: contain;
}

.is-loaded > .managed-image,
.is-loaded > .scene-image,
.is-loaded > .inventory-thumb-image,
.is-loaded .managed-image,
.is-loaded .scene-image,
.is-loaded .inventory-thumb-image {
  opacity: 1;
  transform: scale(1);
}

.scene-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 4, 6, 0.32), rgba(5, 4, 6, 0.72)),
    radial-gradient(circle at top, rgba(122, 44, 68, 0.28), transparent 36%);
}

.scene-scrim-heavy {
  background:
    linear-gradient(180deg, rgba(5, 4, 6, 0.58), rgba(5, 4, 6, 0.84)),
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.28), transparent 22%);
}

.intro-screen {
  display: grid;
  align-items: end;
  padding: clamp(26px, 5vw, 54px);
}

.intro-panel {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  display: grid;
  gap: 22px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid rgba(239, 222, 195, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 12, 18, 0.74), rgba(15, 12, 18, 0.88));
  backdrop-filter: blur(16px);
}

.intro-title {
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.88;
}

.intro-description {
  max-width: 560px;
  font-size: 1.02rem;
  line-height: 1.8;
}

.story-preview {
  display: grid;
  gap: 14px;
  padding-top: 10px;
}

.preview-line {
  width: 132px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 187, 144, 0.9), transparent);
}

.story-preview p {
  color: var(--text-faint);
}

.screen-shell,
.letter-layout,
.bedroom-screen,
.train-station-screen,
.control-room-screen {
  position: relative;
  z-index: 2;
}

.newspaper-screen {
  padding: clamp(22px, 3vw, 34px);
}

.guide-screen {
  display: grid;
  align-items: center;
  padding: clamp(22px, 4vw, 48px);
}

.guide-shell {
  width: min(820px, 100%);
  margin: 0 auto;
}

.newspaper-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 22px;
  min-height: 100%;
}

.newspaper-copy,
.managed-figure,
.scene-copy-card,
.notes-panel,
.letter-answer,
.phone-panel,
.modal-window,
.inventory-bar {
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, var(--panel-900), rgba(11, 9, 14, 0.94));
  backdrop-filter: var(--blur);
}

.newspaper-copy {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 28px;
}

.escape-guide {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(239, 222, 195, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(212, 187, 144, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(10, 8, 13, 0.64);
}

.escape-guide h2 {
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1;
  font-weight: 600;
}

.escape-guide-list {
  display: grid;
  gap: 10px;
  list-style: none;
}

.escape-guide-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.65;
}

.escape-guide-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(212, 187, 144, 0.34);
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

.headline-block {
  display: grid;
  gap: 14px;
}

.headline-block h2 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 0.92;
  max-width: 12ch;
}

.subtitle,
.article-copy p,
.scene-instruction,
.letter-paper,
.clue-sheet,
.feedback-panel,
.phone-input {
  line-height: 1.8;
}

.article-copy {
  display: grid;
  gap: 16px;
}

.managed-figure {
  display: grid;
  align-content: end;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
}

.managed-figure > .media-shell {
  min-height: 100%;
}

.managed-figure-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 9, 14, 0.54), rgba(11, 9, 14, 0.88));
}

.managed-figure-caption p:last-child {
  color: var(--text-soft);
}

.letter-screen {
  padding: clamp(22px, 3vw, 34px);
}

.letter-layout {
  display: grid;
  gap: 24px;
  min-height: 100%;
}

.scene-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.scene-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
}

.scene-instruction {
  max-width: 580px;
  color: var(--text-soft);
}

.uv-lamp-button {
  position: relative;
  border-color: rgba(126, 190, 255, 0.42);
  background:
    radial-gradient(circle at top left, rgba(126, 190, 255, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(44, 57, 84, 0.98), rgba(16, 22, 38, 0.98));
  color: rgba(235, 246, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(126, 190, 255, 0.16),
    0 0 28px rgba(91, 151, 255, 0.2);
  animation: uv-button-pulse 1800ms ease-in-out infinite;
}

.uv-lamp-button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8ec8ff;
  box-shadow: 0 0 14px rgba(142, 200, 255, 0.78);
}

.uv-lamp-button.is-active {
  border-color: rgba(178, 223, 255, 0.5);
  background:
    radial-gradient(circle at top, rgba(142, 200, 255, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(57, 83, 124, 0.98), rgba(21, 31, 54, 0.98));
  animation: none;
}

.uv-lamp-button.is-active::before {
  background: #c4e5ff;
}

@keyframes uv-button-pulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(126, 190, 255, 0.16),
      0 0 24px rgba(91, 151, 255, 0.16);
  }

  50% {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(126, 190, 255, 0.26),
      0 0 36px rgba(91, 151, 255, 0.3);
  }
}

.letter-stage {
  display: grid;
  justify-items: center;
}

.letter-paper {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(28px, 4vw, 46px);
  border-radius: 24px;
  color: var(--paper-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(237, 229, 214, 0.98), rgba(225, 213, 197, 0.96));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.letter-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 130px at var(--uv-x, 50%) var(--uv-y, 50%), rgba(113, 163, 255, 0.16), transparent 62%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.letter-paper.uv-active::before {
  opacity: 1;
}

.letter-salutation,
.letter-signoff {
  font-family: "Libre Baskerville", Georgia, serif;
}

.letter-paragraph {
  position: relative;
  margin-top: 20px;
}

.letter-paragraph p {
  color: #2f2823;
}

.count-word {
  display: inline-block;
  margin-right: 0.2em;
}

.hidden-clue {
  margin-top: 28px;
  color: rgba(33, 26, 23, 0.46);
  letter-spacing: 0.04em;
}

.uv-position,
.uv-logo {
  position: absolute;
  color: rgba(76, 104, 148, 0.8);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  font-family: "Libre Baskerville", Georgia, serif;
}

.uv-pos-one {
  top: 2px;
  right: 12px;
}

.uv-pos-two {
  top: 4px;
  left: -18px;
}

.uv-pos-three {
  top: 0;
  right: 6px;
}

.uv-pos-four {
  top: 4px;
  left: -22px;
}

.uv-logo {
  right: 34px;
  bottom: 34px;
  width: 72px;
  height: auto;
  color: initial;
  filter: sepia(0.38) saturate(0.85) hue-rotate(175deg) brightness(0.82) contrast(1.08);
  mix-blend-mode: multiply;
}

.letter-answer {
  display: grid;
  gap: 18px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 22px;
  border-radius: 24px;
}

.letter-answer-head {
  display: grid;
  gap: 8px;
}

.letter-answer-head h3 {
  font-size: 1.8rem;
}

.hint-message {
  min-height: 1.6em;
}

.answer-form {
  display: grid;
  gap: 12px;
}

.answer-label {
  color: var(--text-soft);
}

.answer-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.answer-input,
.phone-input,
.code-input {
  width: 100%;
  border: 1px solid rgba(239, 222, 195, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  padding: 16px 18px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.answer-input {
  flex: 1 1 280px;
  min-width: 240px;
}

.answer-input:focus,
.phone-input:focus,
.code-input:focus {
  border-color: rgba(212, 187, 144, 0.34);
  box-shadow: 0 0 0 1px rgba(212, 187, 144, 0.18);
  outline: none;
  background: rgba(255, 255, 255, 0.05);
}

.answer-feedback {
  min-height: 1.4em;
}

.bedroom-screen,
.train-station-screen {
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 22px;
}

.bedroom-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 20px;
}

.train-station-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.control-room-screen {
  padding: clamp(22px, 3vw, 34px);
}

.control-room-placeholder-card {
  min-height: 220px;
  align-content: center;
  justify-items: start;
}

.control-room-frame {
  margin-top: 20px;
}

.scene-copy-card,
.notes-panel {
  border-radius: 26px;
  padding: 22px;
}

.scene-copy-card {
  display: grid;
  gap: 10px;
}

.scene-title {
  font-size: clamp(2rem, 4vw, 3rem);
}

.lead {
  max-width: 60ch;
  line-height: 1.8;
}

.notes-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.notes-head {
  display: grid;
  gap: 6px;
}

.notes-head h3 {
  font-size: 1.55rem;
}

.notes-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.notes-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.65;
}

.notes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.76em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(212, 187, 144, 0.88);
  box-shadow: 0 0 18px rgba(212, 187, 144, 0.28);
}

.scene-frame {
  position: relative;
  aspect-ratio: 1376 / 768;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(239, 222, 195, 0.12);
  background:
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.22), transparent 26%),
    linear-gradient(180deg, rgba(13, 10, 16, 0.9), rgba(7, 6, 9, 0.96));
  box-shadow: var(--shadow-lg);
}

.bedroom-media,
.hotspot-layer {
  position: absolute;
  inset: 0;
}

.hotspot-layer {
  z-index: 2;
}

.hotspot-map {
  display: block;
  width: 100%;
  height: 100%;
}

.hotspot-node {
  cursor: pointer;
  pointer-events: all;
}

.hotspot-outline {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1.8;
  opacity: 0;
  transition: fill 300ms ease, stroke 300ms ease, filter 300ms ease, opacity 300ms ease;
}

.hotspot-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 24;
}

.hotspot-node-primary .hotspot-outline {
  stroke-width: 3.1;
}

.hotspot-node-note .hotspot-outline {
  opacity: 1;
  fill: rgba(244, 230, 206, 0.055);
  stroke: rgba(244, 230, 206, 0.52);
  filter: drop-shadow(0 0 14px rgba(244, 230, 206, 0.18));
}

.hotspot-node-note:hover .hotspot-outline,
.hotspot-node-note:focus-visible .hotspot-outline,
.hotspot-node-note.is-active .hotspot-outline {
  fill: rgba(244, 230, 206, 0.08);
  stroke: rgba(244, 230, 206, 0.82);
  filter: drop-shadow(0 0 18px rgba(244, 230, 206, 0.28));
}

.hotspot-node-debug .hotspot-outline {
  opacity: 1;
  fill: rgba(244, 230, 206, 0.045);
  stroke: rgba(244, 230, 206, 0.7);
  filter: drop-shadow(0 0 12px rgba(244, 230, 206, 0.18));
}

.hotspot-node-debug:hover .hotspot-outline,
.hotspot-node-debug:focus-visible .hotspot-outline,
.hotspot-node-debug.is-active .hotspot-outline {
  fill: rgba(244, 230, 206, 0.075);
  stroke: rgba(244, 230, 206, 0.92);
  filter: drop-shadow(0 0 18px rgba(244, 230, 206, 0.26));
}

.hotspot-node-accent {
  pointer-events: none;
}

.hotspot-node-accent .hotspot-outline {
  opacity: 1;
  fill: rgba(244, 230, 206, 0.02);
  stroke: rgba(244, 230, 206, 0.28);
  filter: drop-shadow(0 0 12px rgba(244, 230, 206, 0.08));
}

.hotspot-node-ghost .hotspot-outline,
.hotspot-node-ghost:hover .hotspot-outline,
.hotspot-node-ghost:focus-visible .hotspot-outline,
.hotspot-node-ghost.is-active .hotspot-outline {
  opacity: 0;
  fill: transparent;
  stroke: transparent;
  filter: none;
}

.scene-inspect {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.12), rgba(6, 5, 7, 0.82)),
    linear-gradient(180deg, rgba(9, 7, 11, 0.08), rgba(9, 7, 11, 0.44));
}

.scene-inspect:not(.is-hidden) {
  opacity: 1;
  pointer-events: auto;
}

.scene-inspect-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: zoom-out;
}

.scene-inspect-media {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translate3d(calc(var(--scene-pan-x, 0%) + var(--scene-extra-offset-x, 0px)), calc(var(--scene-pan-y, 0%) + var(--scene-extra-offset-y, 0px)), 0) scale(var(--scene-zoom, 1));
  transition: transform 300ms ease;
  will-change: transform;
}

.scene-inspect-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.scene-inspect-hotspot-layer .hotspot-map {
  transform-origin: center center;
  transform: translate3d(var(--scene-pan-x, 0%), var(--scene-pan-y, 0%), 0) scale(var(--scene-zoom, 1));
  transition: transform 300ms ease;
  will-change: transform;
}

.scene-inspect-hotspot-layer .train-scene-overlay {
  transform-origin: center center;
  transform: translate3d(var(--scene-pan-x, 0%), var(--scene-pan-y, 0%), 0) scale(var(--scene-zoom, 1));
  transition: transform 300ms ease;
  will-change: transform;
}

.scene-inspect::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 4, 6, 0.2), rgba(5, 4, 6, 0.42)),
    radial-gradient(circle at center, transparent 44%, rgba(5, 4, 6, 0.18));
  pointer-events: none;
}

.scene-inspect-ui {
  display: none;
}

.train-station-scene-frame {
  aspect-ratio: 1672 / 941;
}

.train-station-media,
.train-station-hotspot-layer {
  position: absolute;
  inset: 0;
}

.train-station-media {
  --train-station-scene-offset-x: 0px;
  --train-station-scene-offset-y: 0px;
}

.train-station-media .scene-image {
  transform: translate(var(--train-station-scene-offset-x, 0px), var(--train-station-scene-offset-y, 0px)) scale(1.02);
}

.train-station-media .is-loaded > .scene-image,
.train-station-media .is-loaded .scene-image {
  transform: translate(var(--train-station-scene-offset-x, 0px), var(--train-station-scene-offset-y, 0px)) scale(1);
}

.train-scene-overlay {
  position: absolute;
  inset: 0;
}

.train-scene-hotspot {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.train-scene-hotspot:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.4);
  outline-offset: 2px;
}

.inventory-bar {
  position: sticky;
  bottom: 0;
  z-index: 18;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  width: min(1280px, calc(100vw - 24px));
  margin: 0 auto 12px;
  padding: 18px 20px;
  border-radius: 24px;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
}

.inventory-copy {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.inventory-items {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.inventory-item {
  appearance: none;
  display: grid;
  grid-template-columns: 60px minmax(150px, 1fr);
  gap: 12px;
  min-width: 240px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.inventory-item:hover,
.inventory-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 222, 195, 0.26);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.inventory-item.is-reviewed {
  border-color: rgba(212, 187, 144, 0.22);
}

.inventory-item.is-critical {
  box-shadow: inset 0 0 0 1px rgba(212, 187, 144, 0.18);
}

.inventory-thumb {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.inventory-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inventory-meta strong {
  font-size: 0.98rem;
}

.inventory-meta span,
.inventory-state {
  color: var(--text-faint);
}

.inventory-state {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.phone-dock {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  justify-items: end;
  align-items: end;
  width: min(372px, calc(100vw - 24px));
  min-height: 156px;
  pointer-events: none;
}

body.ending-phone-focus .phone-dock {
  z-index: 60;
}

.phone-dock > * {
  pointer-events: auto;
}

.phone-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  width: min(372px, calc(100vw - 24px));
  height: min(78vh, 700px);
  padding: 0 10px 12px;
  border: 0;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(19, 16, 24, 0.99), rgba(7, 7, 11, 1));
  backdrop-filter: blur(22px);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.88);
  transform-origin: bottom right;
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    visibility 0s linear 240ms;
}

.phone-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top, rgba(255, 241, 221, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(14, 12, 18, 0.99), rgba(5, 5, 9, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(239, 222, 195, 0.06),
    inset 0 16px 30px rgba(255, 255, 255, 0.02);
}

.phone-panel > * {
  position: relative;
  z-index: 1;
}

.phone-dock.is-open .phone-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

body.ending-phone-focus .phone-dock.is-open .phone-panel {
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(239, 222, 195, 0.08),
    0 0 48px rgba(212, 187, 144, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone-dock.is-open .phone-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
}

.phone-dock.has-unread:not(.is-open) .phone-toggle {
  animation: phone-alert-pulse 2.8s ease-in-out infinite;
}

.phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 8px;
  color: rgba(244, 233, 214, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.phone-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.phone-status-icons span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(239, 222, 195, 0.72);
}

.phone-head {
  align-items: center;
  padding: 12px 20px 14px;
  border-bottom: 1px solid rgba(239, 222, 195, 0.08);
  background: linear-gradient(180deg, rgba(13, 12, 18, 0.94), rgba(13, 12, 18, 0.66));
}

.phone-head,
.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.modal-head {
  align-items: start;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(239, 222, 195, 0.08);
}

.phone-contact {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.phone-avatar,
.phone-toggle-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(183, 125, 87, 0.96), rgba(104, 63, 48, 0.98));
  color: #fff2e4;
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.45rem;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.24),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

.phone-contact-copy,
.phone-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.phone-contact-status {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.phone-close-button {
  padding: 10px 14px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.phone-toggle {
  position: relative;
  justify-self: end;
  display: grid;
  width: clamp(214px, 22vw, 248px);
  min-height: 124px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(24, 21, 30, 0.98), rgba(10, 10, 14, 1));
  overflow: hidden;
  transform-origin: bottom right;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity 200ms ease;
}

.phone-toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top, rgba(255, 241, 221, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(20, 19, 25, 0.98), rgba(13, 12, 18, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(239, 222, 195, 0.06),
    inset 0 18px 28px rgba(255, 255, 255, 0.02);
}

.phone-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-50%);
}

.phone-toggle:hover,
.phone-toggle:focus-visible {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(212, 187, 144, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  outline: none;
}

.phone-toggle-hardware {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.phone-toggle-screen {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 124px;
  padding: 20px 16px 24px;
  text-align: left;
}

.phone-toggle-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(244, 233, 214, 0.74);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.phone-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214, 77, 73, 0.98), rgba(132, 31, 39, 1));
  color: #fff4f1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 8px 22px rgba(130, 24, 34, 0.34);
}

.phone-toggle-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 12px 13px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(239, 222, 195, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 18px rgba(0, 0, 0, 0.14);
}

.phone-toggle-avatar {
  width: 42px;
  height: 42px;
  font-size: 1.28rem;
  border-radius: 13px;
}

.phone-toggle-copy strong {
  font-size: 0.92rem;
  color: var(--text-main);
}

#phoneTogglePreview,
.phone-toggle-preview {
  color: rgba(229, 217, 196, 0.82);
  font-size: 0.78rem;
  line-height: 1.42;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.phone-toggle-hint {
  justify-self: end;
  align-self: end;
  color: rgba(212, 187, 144, 0.92);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.86;
}

.phone-toggle.has-unread .phone-toggle-hint {
  color: #ffbdb8;
}

.phone-messages {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 18px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top, rgba(255, 243, 223, 0.04), transparent 30%),
    linear-gradient(180deg, rgba(17, 15, 21, 0.84), rgba(10, 10, 14, 0.92));
}

.phone-panel.is-ending .phone-head {
  border-bottom-color: rgba(214, 77, 73, 0.18);
  background:
    radial-gradient(circle at top right, rgba(214, 77, 73, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(15, 12, 18, 0.96), rgba(10, 9, 14, 0.82));
}

.phone-panel.is-ending .phone-avatar,
.phone-panel.is-ending .phone-toggle-avatar {
  background: linear-gradient(180deg, rgba(112, 85, 118, 0.98), rgba(58, 46, 77, 1));
}

.phone-thread-list {
  display: grid;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(239, 222, 195, 0.07);
  background: rgba(9, 8, 13, 0.72);
}

.phone-thread-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.phone-thread-card span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(183, 125, 87, 0.96), rgba(104, 63, 48, 0.98));
  color: #fff2e4;
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.phone-thread-card strong {
  font-size: 0.92rem;
}

.phone-thread-card small {
  color: var(--text-faint);
  font-size: 0.76rem;
}

.phone-thread-card.is-muted {
  cursor: default;
  opacity: 0.55;
}

.phone-thread-card.is-urgent {
  border-color: rgba(214, 77, 73, 0.25);
  background:
    radial-gradient(circle at top right, rgba(214, 77, 73, 0.14), transparent 52%),
    rgba(255, 255, 255, 0.06);
}

.phone-thread-card.is-urgent span {
  background: linear-gradient(180deg, rgba(112, 85, 118, 0.98), rgba(58, 46, 77, 1));
}

.phone-thread-card.is-urgent:hover,
.phone-thread-card.is-urgent:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 190, 180, 0.36);
  background:
    radial-gradient(circle at top right, rgba(214, 77, 73, 0.2), transparent 52%),
    rgba(255, 255, 255, 0.08);
  outline: none;
}

.phone-ending-notification {
  margin: 8px 16px 0;
  padding: 11px 13px;
  border: 1px solid rgba(214, 77, 73, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(214, 77, 73, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(55, 20, 28, 0.96), rgba(20, 12, 18, 0.98));
  color: #ffe5e0;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  animation: ending-push-in 260ms ease both;
}

.phone-ending-notification strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phone-ending-notification span {
  font-size: 0.9rem;
}

.message-bubble {
  display: grid;
  gap: 10px;
  max-width: 84%;
  padding: 14px 16px;
  border-radius: 22px 22px 22px 10px;
  border: 1px solid rgba(239, 222, 195, 0.06);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.message-bubble-noor,
.message-bubble-system {
  justify-self: start;
  background: linear-gradient(180deg, rgba(60, 64, 74, 0.92), rgba(28, 31, 39, 0.96));
}

.message-bubble-elise {
  justify-self: start;
  border-color: rgba(196, 166, 219, 0.16);
  background:
    radial-gradient(circle at top left, rgba(149, 112, 168, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(50, 43, 64, 0.96), rgba(27, 25, 38, 0.98));
}

.message-bubble-typing {
  max-width: fit-content;
  color: rgba(229, 217, 196, 0.75);
  font-style: italic;
}

.message-bubble-you {
  justify-self: end;
  border-radius: 22px 22px 10px 22px;
  background: linear-gradient(180deg, rgba(174, 120, 82, 0.96), rgba(108, 68, 48, 0.98));
  color: #fff3e8;
}

.message-bubble-system {
  border-style: dashed;
  color: var(--text-faint);
}

.message-meta {
  font-size: 0.66rem;
  color: var(--text-faint);
}

.message-body {
  white-space: pre-line;
}

.phone-attachment {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(239, 222, 195, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.phone-attachment:hover,
.phone-attachment:focus-visible {
  border-color: rgba(212, 187, 144, 0.34);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.phone-attachment:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.24);
  outline-offset: 2px;
}

.phone-attachment-thumb {
  width: 100%;
  max-height: 240px;
  border-radius: 12px;
  object-fit: contain;
  border: 1px solid rgba(239, 222, 195, 0.1);
  background: rgba(0, 0, 0, 0.28);
}

.phone-attachment-copy {
  display: grid;
  gap: 4px;
}

.phone-attachment-copy strong {
  font-size: 0.92rem;
}

.phone-attachment-copy span {
  color: var(--text-soft);
  font-size: 0.82rem;
}

.phone-form {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(239, 222, 195, 0.08);
  background: linear-gradient(180deg, rgba(16, 13, 19, 0.94), rgba(11, 10, 15, 0.99));
}

.phone-form.is-disabled {
  opacity: 0.72;
}

.phone-form.is-disabled .phone-send {
  pointer-events: none;
  opacity: 0.46;
}

.phone-input {
  min-height: 92px;
  resize: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(239, 222, 195, 0.1);
  padding: 14px 16px;
}

.phone-send {
  justify-self: end;
  min-width: 116px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 112px;
  z-index: 160;
  padding: 14px 20px;
  border: 1px solid rgba(239, 222, 195, 0.14);
  border-radius: 999px;
  background: rgba(10, 8, 12, 0.92);
  color: var(--text-main);
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes phone-alert-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  18% {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
      0 28px 62px rgba(0, 0, 0, 0.48),
      0 0 0 5px rgba(214, 77, 73, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  36% {
    transform: translateY(-2px) scale(1.01);
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: start center;
  padding:
    calc(var(--topbar-safe-offset, 0px) + 14px)
    16px
    16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 6, 0.68);
  backdrop-filter: blur(10px);
}

.modal-window {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100vh - var(--topbar-safe-offset, 0px) - 30px);
  border-radius: 30px;
  overflow: auto;
  box-shadow: var(--shadow-xl);
}

.modal-window.is-immersive {
  width: min(1180px, 100%);
}

.modal-window.is-zoomlike {
  width: min(1320px, 100%);
  max-height: calc(100vh - var(--topbar-safe-offset, 0px) - 18px);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.modal-window.is-zoomlike .modal-head {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal-window.is-zoomlike .modal-body {
  padding: 0;
  gap: 0;
}

.modal-window.is-zoomlike .modal-actions {
  display: none;
}

.modal-body {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.puzzle-hint-overlay {
  position: absolute;
  top: clamp(10px, 1.8vw, 20px);
  left: 50%;
  z-index: 14;
  width: min(420px, calc(100% - 28px));
  transform: translateX(-50%);
  pointer-events: none;
}

.puzzle-hint-overlay.is-global {
  position: fixed;
  top: max(calc(var(--topbar-safe-offset, 0px) + 10px), clamp(78px, 12vh, 110px));
  z-index: 42;
}

.modal-window.is-zoomlike .puzzle-hint-overlay {
  top: clamp(78px, 10vh, 112px);
}

.puzzle-hint-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(24, 21, 28, 0.96), rgba(13, 11, 17, 0.96));
  border: 1px solid rgba(244, 230, 206, 0.12);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  pointer-events: auto;
}

.puzzle-hint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.puzzle-hint-card-title-group {
  display: grid;
  gap: 4px;
}

.puzzle-hint-card-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.puzzle-hint-progress,
.puzzle-hint-note,
.puzzle-hint-entry-text {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.puzzle-hint-list,
.puzzle-hint-next {
  display: grid;
  gap: 12px;
}

.puzzle-hint-entry,
.puzzle-hint-next {
  padding: 12px 14px;
  border: 1px solid rgba(244, 230, 206, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.puzzle-hint-entry-label,
.puzzle-hint-next-title {
  color: rgba(245, 238, 225, 0.96);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.puzzle-hint-entry-text {
  margin: 0;
}

.puzzle-hint-note {
  margin: 0;
}

.puzzle-hint-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(244, 230, 206, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 230, 206, 0.88);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.puzzle-hint-close:hover,
.puzzle-hint-close:focus-visible {
  border-color: rgba(244, 230, 206, 0.24);
  background: rgba(244, 230, 206, 0.08);
}

.puzzle-hint-close:active {
  transform: translateY(1px);
}

.puzzle-hint-dismiss {
  justify-self: start;
}

.modal-actions {
  padding: 0 20px 22px;
}

.modal-copy {
  display: grid;
  gap: 14px;
}

.modal-copy p,
.small-note,
.feedback-panel,
.hint-card,
.code-panel,
.attempt-note {
  line-height: 1.75;
}

.modal-copy blockquote,
.clue-sheet-quote,
.metro-intro blockquote,
.hint-card blockquote {
  padding-left: 16px;
  border-left: 2px solid rgba(212, 187, 144, 0.4);
  color: var(--text-main);
  font-family: "Libre Baskerville", Georgia, serif;
  line-height: 1.7;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  gap: 20px;
  align-items: start;
}

.modal-figure {
  min-height: 280px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
}

.modal-figure-clickable {
  cursor: zoom-out;
}

.modal-figure-clickable:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.32);
  outline-offset: 3px;
}

.modal-figure-zoomlike {
  min-height: 0;
  border-radius: 28px;
  background: transparent;
}

.modal-asset-hotspot {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.modal-asset-hotspot.is-debug-visible {
  border: 2px solid rgba(244, 230, 206, 0.92);
  background: rgba(244, 230, 206, 0.08);
  box-shadow: 0 0 0 1px rgba(12, 10, 16, 0.52), 0 0 18px rgba(244, 230, 206, 0.18);
}

.modal-asset-hotspot.is-debug-visible:hover,
.modal-asset-hotspot.is-debug-visible:focus-visible {
  background: rgba(244, 230, 206, 0.12);
  box-shadow: 0 0 0 1px rgba(12, 10, 16, 0.64), 0 0 22px rgba(244, 230, 206, 0.26);
}

.modal-asset-hotspot:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.34);
  outline-offset: 2px;
}

.wall-map-puzzle {
  display: grid;
  gap: 14px;
}

.wall-map-marker {
  position: absolute;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -88%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.wall-map-marker.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}

.wall-map-marker:focus-visible {
  outline: 1px solid rgba(255, 233, 221, 0.72);
  outline-offset: 4px;
}

.wall-map-marker-glow,
.wall-map-marker-pin {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.wall-map-marker-glow {
  inset: -10px;
  background: radial-gradient(circle, rgba(210, 54, 54, 0.34) 0%, rgba(210, 54, 54, 0.12) 42%, transparent 72%);
  filter: blur(2px);
  animation: wall-map-marker-pulse 1800ms ease-in-out infinite;
}

.wall-map-marker-pin {
  width: 18px;
  height: 18px;
  left: 8px;
  top: 4px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 217, 217, 0.96), rgba(204, 42, 42, 0.92) 45%, rgba(123, 14, 14, 0.96) 100%);
  border: 2px solid rgba(255, 233, 221, 0.82);
  box-shadow:
    0 0 0 1px rgba(16, 10, 10, 0.24),
    0 5px 12px rgba(48, 8, 8, 0.36);
}

.wall-map-marker-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, rgba(118, 14, 14, 0.96), rgba(67, 10, 10, 0.9));
  border-radius: 999px;
  transform: translateX(-50%);
}

.train-station-scene-shell,
.train-letter-layout {
  display: grid;
  gap: 16px;
}

.train-station-figure {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at top, rgba(255, 245, 226, 0.05), transparent 48%),
    linear-gradient(180deg, rgba(22, 18, 27, 0.92), rgba(8, 7, 11, 0.96));
}

.train-station-figure .managed-image {
  width: 100%;
  height: auto;
}

.train-station-flat-figure {
  min-height: 0;
}

.train-station-status {
  margin: 0;
}

.train-ticket-photo-modal {
  display: grid;
  gap: 14px;
  padding: clamp(12px, 2vw, 18px);
}

.train-ticket-photo-figure {
  background:
    radial-gradient(circle at top, rgba(255, 245, 226, 0.06), transparent 50%),
    linear-gradient(180deg, rgba(24, 19, 28, 0.96), rgba(8, 7, 11, 0.98));
}

.train-ticket-photo-figure .managed-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.train-locker-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: auto;
  opacity: 0.36;
  filter: grayscale(1) brightness(0.28) contrast(1.1);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.train-clock-overlay {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.train-clock-overlay.is-closeup {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.train-clock-hand {
  position: absolute;
  left: var(--train-clock-center-x, 50%);
  top: var(--train-clock-center-y, 50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(74, 60, 46, 0.92) 0%,
      rgba(24, 20, 18, 0.98) 18%,
      rgba(10, 10, 10, 1) 50%,
      rgba(24, 20, 18, 0.98) 82%,
      rgba(86, 68, 50, 0.92) 100%);
  border: 1px solid rgba(89, 70, 52, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(214, 189, 149, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(10, 8, 8, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.18);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--train-clock-rotation, 0deg));
  overflow: hidden;
}

.train-clock-hand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 14%;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(227, 201, 162, 0.34), rgba(255, 255, 255, 0.04));
  transform: translateX(-50%);
  opacity: 0.82;
}

.train-clock-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 58%;
  height: 16%;
  border-radius: 999px 999px 52% 52%;
  background: linear-gradient(180deg, rgba(108, 83, 60, 0.95), rgba(34, 28, 25, 0.98));
  transform: translateX(-50%);
}

.train-clock-overlay.is-scene .train-clock-hand.is-hour {
  width: 5.2%;
  height: 27%;
  clip-path: polygon(26% 100%, 74% 100%, 66% 18%, 50% 0%, 34% 18%);
}

.train-clock-overlay.is-scene .train-clock-hand.is-minute {
  width: 3%;
  height: 38%;
  clip-path: polygon(22% 100%, 78% 100%, 62% 12%, 50% 0%, 38% 12%);
}

.train-clock-overlay.is-closeup .train-clock-hand.is-hour {
  width: 4.4%;
  height: 28%;
  clip-path: polygon(26% 100%, 74% 100%, 66% 18%, 50% 0%, 34% 18%);
}

.train-clock-overlay.is-closeup .train-clock-hand.is-minute {
  width: 2.5%;
  height: 40%;
  clip-path: polygon(22% 100%, 78% 100%, 62% 12%, 50% 0%, 38% 12%);
}

.train-clock-overlay.is-closeup .train-clock-hand.is-dragging {
  cursor: grabbing;
}

.train-clock-center {
  position: absolute;
  left: var(--train-clock-center-x, 50%);
  top: var(--train-clock-center-y, 50%);
  width: 7.2%;
  height: 7.2%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(169, 137, 98, 0.92), rgba(62, 47, 35, 0.98) 56%, rgba(20, 16, 14, 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(237, 219, 184, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(18, 14, 12, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.16);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.train-clock-center::before {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 999px;
  border: 1px solid rgba(224, 197, 155, 0.34);
  background: radial-gradient(circle, rgba(48, 39, 31, 0.98), rgba(16, 14, 13, 1));
}

.train-clock-figure {
  min-height: 0;
}

.numpad-puzzle {
  display: grid;
  gap: 8px;
}

.numpad-puzzle-figure {
  min-height: 0;
  width: min(100%, 920px, calc((100vh - 170px) * 1.25));
  aspect-ratio: 1402 / 1122;
  margin-inline: auto;
}

.numpad-display-screen,
.numpad-keypad-screen {
  position: absolute;
}

.numpad-progress-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.numpad-progress-light {
  position: absolute;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(248, 245, 232, 0.2), rgba(90, 96, 78, 0.14) 42%, rgba(21, 26, 18, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 237, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(13, 15, 11, 0.32);
  opacity: 0.5;
  transition:
    opacity 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.numpad-progress-light.is-complete {
  background:
    radial-gradient(circle at 35% 35%, rgba(234, 255, 215, 0.95), rgba(129, 216, 103, 0.96) 36%, rgba(24, 87, 27, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 255, 237, 0.28),
    0 0 14px rgba(111, 214, 92, 0.18),
    0 0 0 1px rgba(35, 91, 31, 0.26);
  opacity: 0.82;
}

.numpad-progress-light.is-active {
  background:
    radial-gradient(circle at 35% 35%, rgba(246, 255, 230, 1), rgba(154, 236, 120, 1) 34%, rgba(28, 104, 32, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 246, 0.34),
    0 0 20px rgba(121, 232, 102, 0.32),
    0 0 0 1px rgba(42, 108, 38, 0.32);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.numpad-progress-light.is-solved {
  opacity: 1;
}

.numpad-display-screen::after,
.numpad-keypad-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.numpad-display-screen::after {
  background:
    radial-gradient(circle at center, rgba(174, 34, 40, 0.18), rgba(174, 34, 40, 0) 72%),
    rgba(174, 34, 40, 0.16);
}

.numpad-keypad-screen::before {
  background:
    radial-gradient(circle at center, rgba(174, 34, 40, 0.14), rgba(174, 34, 40, 0) 74%),
    rgba(174, 34, 40, 0.08);
}

.numpad-display-screen.is-error::after {
  opacity: 1;
}

.numpad-keypad-screen.is-error::before {
  opacity: 1;
}

.numpad-display-cell,
.numpad-keypad-button {
  position: absolute;
  border-radius: 16px;
}

.numpad-display-cell {
  background: rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
  opacity: 0.94;
}

.numpad-display-cell.is-active,
.numpad-display-cell.is-solved {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 148, 148, 0.96), rgba(194, 24, 30, 0.88) 38%, rgba(97, 10, 16, 0.98) 100%);
  box-shadow:
    inset 0 0 18px rgba(255, 213, 213, 0.18),
    0 0 20px rgba(179, 22, 29, 0.32);
  opacity: 1;
}

.numpad-display-cell.is-solved {
  box-shadow:
    inset 0 0 18px rgba(255, 213, 213, 0.18),
    0 0 24px rgba(179, 22, 29, 0.4);
}

.numpad-keypad-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.numpad-keypad-button:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.5);
  outline-offset: 2px;
}

.numpad-keypad-button.is-pressed {
  transform: translateY(1px) scale(0.98);
  background: radial-gradient(circle, rgba(255, 232, 202, 0.14), rgba(255, 232, 202, 0) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 214, 0.16),
    0 0 18px rgba(255, 232, 202, 0.16);
}

.numpad-keypad-button.is-error {
  background: radial-gradient(circle, rgba(207, 69, 69, 0.24), rgba(207, 69, 69, 0) 72%);
  box-shadow: inset 0 0 0 1px rgba(216, 137, 137, 0.18);
}

.numpad-keypad-screen.is-locked .numpad-keypad-button {
  cursor: default;
}

.numpad-puzzle-figure.is-error .numpad-keypad-button {
  box-shadow: inset 0 0 0 1px rgba(216, 137, 137, 0.12);
}

.control-room-numpad-display {
  z-index: 1;
  pointer-events: none;
  transform:
    perspective(900px)
    rotateX(var(--control-room-numpad-rotate-x, 0deg))
    rotateY(var(--control-room-numpad-rotate-y, 0deg))
    rotate(var(--control-room-numpad-rotate, 0deg))
    skew(var(--control-room-numpad-skew-x, 0deg), var(--control-room-numpad-skew-y, 0deg))
    scale(var(--control-room-numpad-scale-x, 1), var(--control-room-numpad-scale-y, 1));
  transform-style: preserve-3d;
}

.control-room-numpad-display .numpad-display-cell {
  border-radius: 10px;
  opacity: 0.96;
  box-shadow:
    inset 0 0 8px rgba(255, 213, 213, 0.14),
    0 0 12px rgba(179, 22, 29, 0.24);
}

.control-room-puzzle-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 32px);
  padding: clamp(18px, 3vw, 34px);
  box-sizing: border-box;
}

.control-room-puzzle-utilities {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.puzzle-hint-trigger {
  min-width: 104px;
}

.control-room-puzzle-shell > .numpad-puzzle,
.control-room-puzzle-shell > .pressure-puzzle,
.control-room-puzzle-shell > .tube-puzzle {
  width: 100%;
  justify-items: center;
}

.control-room-pressure-display {
  z-index: 1;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(248, 244, 237, 0.94), rgba(223, 215, 202, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 1px 5px rgba(0, 0, 0, 0.16);
  color: rgba(62, 47, 31, 0.92);
  font-size: clamp(0.56rem, 0.95vw, 0.92rem);
  letter-spacing: 0.02em;
}

.control-room-end-panel-shell {
  display: grid;
  gap: 12px;
}

.control-room-end-panel {
  position: relative;
}

.control-room-end-panel-figure {
  min-height: 0;
}

.control-room-end-digit {
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: rgba(216, 198, 170, 0.92);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow:
    0 0 14px rgba(255, 229, 192, 0.1),
    0 1px 0 rgba(0, 0, 0, 0.6);
  transition:
    color 140ms ease,
    text-shadow 140ms ease,
    transform 140ms ease,
    background 140ms ease;
  z-index: 2;
}

.control-room-end-digit:hover,
.control-room-end-digit:focus-visible {
  color: rgba(244, 230, 206, 0.98);
  background: radial-gradient(circle, rgba(244, 230, 206, 0.08), rgba(244, 230, 206, 0) 72%);
}

.control-room-end-digit:active {
  transform: translateY(1px) scale(0.985);
}

.control-room-end-digit.is-solved {
  color: rgba(184, 218, 255, 0.98);
  text-shadow:
    0 0 14px rgba(145, 201, 255, 0.26),
    0 1px 0 rgba(0, 0, 0, 0.6);
}

.pressure-puzzle {
  display: grid;
  gap: 8px;
}

.pressure-puzzle-figure {
  min-height: 0;
  width: min(100%, 920px, calc((100vh - 170px) * 1.25));
  aspect-ratio: 1402 / 1122;
  margin-inline: auto;
}

.pressure-puzzle-overlay {
  position: absolute;
  inset: 0;
}

.pressure-puzzle-overlay.is-locked .pressure-control-button {
  cursor: default;
}

.pressure-control-button,
.pressure-control-display,
.pressure-meter {
  position: absolute;
}

.pressure-control-button {
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.pressure-control-button:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.48);
  outline-offset: 2px;
}

.pressure-control-button.is-pressed {
  transform: scale(0.985);
  background: radial-gradient(circle, rgba(255, 232, 202, 0.12), rgba(255, 232, 202, 0) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 239, 214, 0.14);
}

.pressure-control-button.is-success {
  transform: scale(0.985);
  background: radial-gradient(circle, rgba(163, 236, 147, 0.2), rgba(163, 236, 147, 0) 72%);
  box-shadow: 0 0 16px rgba(126, 222, 109, 0.14);
}

.pressure-control-button.is-error {
  transform: scale(0.985);
  background: radial-gradient(circle, rgba(228, 110, 110, 0.18), rgba(228, 110, 110, 0) 72%);
  box-shadow: 0 0 16px rgba(228, 110, 110, 0.12);
}

.pressure-control-display {
  display: grid;
  place-items: center;
  color: rgba(56, 42, 28, 0.9);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 250, 236, 0.12);
  pointer-events: none;
}

.pressure-control-display.is-solution-digit {
  color: rgba(116, 10, 10, 0.96);
  text-shadow: 0 1px 0 rgba(255, 239, 239, 0.24);
}

.pressure-meter {
  border-radius: 999px;
  pointer-events: none;
}

.pressure-meter::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  transition:
    box-shadow 160ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.pressure-meter.is-influenced::before {
  box-shadow:
    inset 0 0 0 1px rgba(233, 204, 158, 0.16),
    0 0 16px rgba(213, 177, 119, 0.14);
}

.pressure-meter-needle {
  position: absolute;
  left: var(--pressure-pivot-left, 50%);
  top: var(--pressure-pivot-top, 66.5%);
  width: 3.8%;
  height: 46%;
  border-radius: 999px 999px 3px 3px;
  background:
    linear-gradient(180deg, rgba(244, 227, 205, 0.98), rgba(130, 96, 58, 0.98) 48%, rgba(34, 25, 16, 1) 100%);
  box-shadow:
    inset 0 0 2px rgba(255, 243, 221, 0.22),
    0 0 5px rgba(0, 0, 0, 0.22);
  clip-path: polygon(35% 100%, 65% 100%, 64% 18%, 50% 0%, 36% 18%);
  transform: translate(-50%, -88%) rotate(var(--pressure-needle-rotation, -72deg));
  transform-origin: 50% 88%;
  transition: transform 160ms ease;
}

.pressure-meter-pivot {
  position: absolute;
  left: var(--pressure-pivot-left, 50%);
  top: var(--pressure-pivot-top, 66.5%);
  width: 10%;
  height: 10%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(183, 148, 108, 0.9), rgba(60, 42, 24, 0.96) 58%, rgba(18, 14, 11, 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 223, 189, 0.16),
    0 0 0 1px rgba(22, 16, 12, 0.28);
  transform: translate(-50%, -50%);
}

.tube-puzzle {
  display: grid;
  gap: 10px;
}

.tube-puzzle-figure {
  min-height: 0;
  width: min(100%, 680px, calc((100vh - 190px) * 0.8));
  aspect-ratio: 1122 / 1402;
  margin-inline: auto;
}

.tube-puzzle-media {
  position: absolute;
  inset: 0;
}

.tube-puzzle-media-shell {
  position: absolute;
  inset: 0;
  background: #08070b;
}

.tube-puzzle-media .managed-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tube-puzzle-media-shell .tube-puzzle-image {
  opacity: 0;
  transition: opacity 80ms linear;
}

.tube-puzzle-media-shell .tube-puzzle-image.is-active {
  opacity: 1;
}

.tube-puzzle-figure.is-error .managed-image {
  filter: saturate(1.05) hue-rotate(-12deg) brightness(0.98);
}

.tube-puzzle-figure.is-success .managed-image {
  filter: saturate(1.08) brightness(1.02);
}

.tube-puzzle-button {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.tube-puzzle-button:focus-visible {
  outline: 1px solid rgba(239, 222, 195, 0.5);
  outline-offset: 3px;
}

.tube-puzzle-button.is-success {
  transform: scale(0.98);
  background: radial-gradient(circle, rgba(148, 244, 136, 0.24), rgba(148, 244, 136, 0) 70%);
  box-shadow: 0 0 18px rgba(148, 244, 136, 0.2);
}

.tube-puzzle-button.is-error {
  transform: scale(0.98);
  background: radial-gradient(circle, rgba(236, 101, 101, 0.24), rgba(236, 101, 101, 0) 72%);
  box-shadow: 0 0 18px rgba(236, 101, 101, 0.18);
}

.tube-puzzle-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tube-puzzle-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(239, 222, 195, 0.18);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(14, 11, 17, 0.16);
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.tube-puzzle-progress-dot.is-complete {
  background: linear-gradient(180deg, rgba(196, 255, 174, 0.96), rgba(89, 186, 68, 0.98));
  border-color: rgba(191, 207, 159, 0.34);
  box-shadow: 0 0 14px rgba(111, 214, 92, 0.2);
}

.train-letter-sheet {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
  border: 1px solid rgba(175, 151, 115, 0.26);
  background:
    linear-gradient(180deg, rgba(247, 236, 214, 0.98), rgba(233, 219, 191, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
  color: var(--paper-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 18px 44px rgba(0, 0, 0, 0.18);
}

.train-letter-sheet p {
  line-height: 1.8;
}

.train-letter-sheet .is-signature {
  margin-top: 4px;
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.5rem;
}

.train-station-ending {
  margin: 0;
}

.postit-sequence-shell {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.postit-sequence-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(239, 222, 195, 0.14);
  background:
    radial-gradient(circle at top, rgba(255, 245, 226, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(26, 21, 28, 0.88), rgba(12, 9, 15, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 241, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

.postit-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 226, 202, 0.28);
  background: rgba(11, 9, 14, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 237, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.2);
  transform: scale(1);
}

.postit-dot.is-filled {
  animation: postit-dot-pop 180ms ease;
}

.postit-dot.is-white {
  border-color: rgba(255, 247, 234, 0.86);
  background: #f2e8d8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 10px rgba(242, 232, 216, 0.24);
}

.postit-dot.is-yellow {
  border-color: rgba(232, 210, 115, 0.9);
  background: #d9c15c;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 194, 0.34),
    0 0 10px rgba(217, 193, 92, 0.24);
}

.postit-sequence-bar.is-error {
  border-color: rgba(173, 84, 84, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 241, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(173, 84, 84, 0.2),
    0 0 18px rgba(173, 84, 84, 0.16);
  animation: postit-sequence-shake 280ms ease;
}

.postit-sequence-bar.is-success {
  border-color: rgba(212, 192, 132, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 241, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(212, 192, 132, 0.18),
    0 0 20px rgba(212, 192, 132, 0.14);
}

.postit-sequence-feedback {
  margin: 0;
  min-height: 1.3em;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239, 222, 195, 0.62);
}

.postit-sequence-feedback[data-tone="error"] {
  color: rgba(224, 146, 146, 0.88);
}

.postit-sequence-feedback[data-tone="success"] {
  color: rgba(233, 213, 160, 0.9);
}

@keyframes postit-dot-pop {
  0% {
    transform: scale(0.72);
  }

  72% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes postit-sequence-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes wall-map-marker-pulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.62;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.modal-figure img {
  width: 100%;
  height: auto;
}

.clue-sheet,
.hint-card,
.code-panel,
.feedback-panel,
.item-card {
  padding: 18px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
}

.clue-sheet {
  display: grid;
  gap: 12px;
}

.immersive-stage,
.room-zoom-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.immersive-stage img {
  width: 100%;
  height: auto;
}

.immersive-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(9, 7, 11, 0.82)),
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.22), transparent 20%);
  pointer-events: none;
}

.immersive-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 9, 14, 0.44), rgba(11, 9, 14, 0.88));
}

.box-peek-hotspot,
.book-hotspot {
  position: absolute;
  border: 1px solid rgba(255, 248, 239, 0.52);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 20px rgba(255, 248, 239, 0.12);
  cursor: pointer;
}

.box-peek-hotspot {
  inset: 49% auto auto 19%;
  width: 54%;
  height: 30%;
  border-radius: 18px;
}

.book-hotspot {
  inset: 30% auto auto 50%;
  width: 18%;
  height: 32%;
  border-radius: 14px;
}

.room-zoom-stage {
  aspect-ratio: 4 / 3;
}

.room-zoom-view {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.item-grid {
  display: grid;
  gap: 12px;
}

.item-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.item-card.is-collected {
  border-color: rgba(212, 187, 144, 0.22);
}

.item-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.item-card-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.item-card-status {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.item-card-actions {
  margin-top: 8px;
}

.metro-puzzle {
  display: grid;
  gap: 16px;
}

.metro-stage {
  position: relative;
  aspect-ratio: 1226 / 816;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(239, 222, 195, 0.12);
  background:
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(13, 10, 16, 0.96), rgba(13, 10, 16, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 56px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.metro-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 6, 9, 0.04), rgba(7, 6, 9, 0.2)),
    radial-gradient(circle at center, transparent 48%, rgba(7, 6, 9, 0.34) 100%);
  pointer-events: none;
  z-index: 4;
}

.metro-map-shell,
.metro-route-overlay,
.metro-node-layer {
  position: absolute;
  inset: 0;
}

.metro-map-shell {
  z-index: 1;
}

.metro-map-shell .managed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metro-route-overlay {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.metro-route-outline,
.metro-route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metro-route-outline {
  stroke: rgba(6, 5, 8, 0.82);
  stroke-width: 18;
}

.metro-route-line {
  stroke: rgba(221, 198, 151, 0.96);
  stroke-width: 7;
  filter: drop-shadow(0 0 10px rgba(212, 187, 144, 0.35));
}

.metro-stage.is-broken .metro-route-line {
  stroke: rgba(216, 137, 137, 0.92);
  filter: drop-shadow(0 0 12px rgba(216, 137, 137, 0.28));
}

.metro-stage.is-solved .metro-route-line {
  stroke: rgba(191, 207, 159, 0.96);
  filter: drop-shadow(0 0 14px rgba(191, 207, 159, 0.26));
}

.metro-node-layer {
  z-index: 3;
}

.metro-stage.is-recorder .metro-node-layer {
  opacity: 0.16;
  pointer-events: none;
}

.metro-node {
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.metro-node::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(239, 222, 195, 0.36);
  background: rgba(245, 239, 231, 0.18);
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.5),
    0 0 0 0 rgba(212, 187, 144, 0);
  transition:
    inset var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.metro-node:hover::before,
.metro-node:focus-visible::before {
  inset: 3px;
  border-color: rgba(239, 222, 195, 0.72);
  background: rgba(245, 239, 231, 0.34);
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.56),
    0 0 18px rgba(212, 187, 144, 0.2);
}

.metro-node:focus-visible {
  outline: none;
}

.metro-node.is-selected::before {
  inset: 3px;
  border-color: rgba(239, 222, 195, 0.88);
  background: rgba(221, 198, 151, 0.94);
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.64),
    0 0 20px rgba(212, 187, 144, 0.28);
}

.metro-node.is-current::before {
  inset: 1px;
}

.metro-stage.is-broken .metro-node.is-selected::before {
  background: rgba(216, 137, 137, 0.9);
  border-color: rgba(255, 217, 217, 0.78);
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.64),
    0 0 16px rgba(216, 137, 137, 0.24);
}

.metro-node.is-solved::before,
.metro-stage.is-solved .metro-node.is-selected::before {
  background: rgba(191, 207, 159, 0.92);
  border-color: rgba(233, 243, 207, 0.82);
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.64),
    0 0 18px rgba(191, 207, 159, 0.24);
}

.metro-node:disabled {
  cursor: default;
}

.metro-recorder-layer,
.metro-recorder-connections,
.metro-recorder-node-layer {
  position: absolute;
  inset: 0;
}

.metro-recorder-layer {
  z-index: 5;
}

.metro-recorder-connections {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.metro-recorder-line {
  stroke: rgba(103, 209, 255, 0.92);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(103, 209, 255, 0.24));
}

.metro-recorder-node-layer {
  z-index: 2;
  pointer-events: none;
}

.metro-recorder-node {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 247, 233, 0.72);
  border-radius: 50%;
  background: rgba(12, 10, 14, 0.88);
  color: var(--text-main);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(7, 6, 9, 0.76),
    0 8px 18px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
}

.metro-recorder-node:hover,
.metro-recorder-node:focus-visible {
  border-color: rgba(103, 209, 255, 0.88);
  background: rgba(19, 28, 36, 0.94);
  outline: none;
}

.metro-recorder-node.is-selected {
  border-color: rgba(255, 214, 128, 0.94);
  background: rgba(56, 38, 10, 0.92);
}

.metro-recorder-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 8px 12px;
  border: 1px solid rgba(103, 209, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.86);
  color: rgba(214, 240, 255, 0.92);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.metro-line-editor-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(239, 222, 195, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(18, 15, 22, 0.94), rgba(14, 12, 18, 0.9)),
    radial-gradient(circle at top right, rgba(152, 115, 58, 0.08), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.18);
}

.metro-line-editor-title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239, 222, 195, 0.9);
}

.metro-line-editor-description {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(227, 218, 202, 0.74);
}

.metro-line-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.metro-line-editor-toolbar .ui-button {
  padding: 10px 15px;
}

.metro-line-editor-toolbar-secondary {
  margin-top: 2px;
}

.metro-line-editor-status {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(239, 222, 195, 0.82);
}

.metro-line-editor-output {
  min-height: 164px;
  width: 100%;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid rgba(239, 222, 195, 0.12);
  border-radius: 16px;
  background: rgba(10, 9, 12, 0.88);
  color: rgba(244, 236, 223, 0.92);
  font: 0.9rem/1.55 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.metro-line-editor-output:focus {
  outline: 1px solid rgba(212, 187, 144, 0.42);
  outline-offset: 2px;
}

.feedback-panel {
  min-height: 88px;
}

.feedback-panel.is-muted {
  color: var(--text-soft);
}

.feedback-panel.is-error {
  color: #ffd8d8;
  border-color: rgba(216, 137, 137, 0.18);
  background: rgba(216, 137, 137, 0.06);
}

.feedback-panel.is-success {
  color: #eff7db;
  border-color: rgba(191, 207, 159, 0.2);
  background: rgba(191, 207, 159, 0.08);
}

.code-panel {
  display: grid;
  gap: 14px;
}

.code-input {
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
}

.attempt-note {
  color: var(--text-faint);
}

.laptop-screen-stage {
  position: relative;
  width: min(1400px, 100%);
  margin: 0 auto;
}

.laptop-screen-figure {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
}

.laptop-screen-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.laptop-screen-exit-button {
  position: absolute;
  top: clamp(10px, 1.4vw, 20px);
  right: clamp(10px, 1.4vw, 20px);
  z-index: 6;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px solid rgba(239, 222, 195, 0.2);
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.72);
  color: rgba(248, 244, 236, 0.94);
  font: 700 0.72rem/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.laptop-screen-exit-button:hover,
.laptop-screen-exit-button:focus-visible {
  border-color: rgba(212, 187, 144, 0.46);
  background: rgba(212, 187, 144, 0.16);
  outline: none;
}

.laptop-screen-exit-button:active {
  transform: translateY(1px);
}

.laptop-screen-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.laptop-screen-digit,
.laptop-screen-feedback {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.laptop-screen-digit {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.08);
  color: rgba(238, 244, 248, 0.98);
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(2px);
  box-shadow: none;
}

.laptop-screen-digit:focus {
  outline: 1px solid rgba(212, 187, 144, 0.44);
  outline-offset: 2px;
  background: rgba(212, 187, 144, 0.06);
}

.laptop-screen-digit:disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.laptop-screen-close-hit {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 4;
}

.laptop-screen-close-hit:focus-visible {
  outline: 1px solid rgba(212, 187, 144, 0.44);
  outline-offset: 2px;
}

.laptop-screen-feedback {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(239, 222, 195, 0.12);
  border-radius: 14px;
  background: rgba(8, 10, 14, 0.6);
  color: rgba(239, 233, 224, 0.92);
  text-align: center;
  line-height: 1.45;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.laptop-screen-feedback.is-error {
  color: #ffd8d8;
  border-color: rgba(216, 137, 137, 0.28);
  background: rgba(78, 22, 26, 0.46);
}

.desktop-shell {
  display: grid;
  gap: 18px;
  width: min(1240px, 100%);
  min-height: min(78vh, 860px);
  margin: 0 auto;
  padding: 20px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(128, 70, 52, 0.24), transparent 28%),
    radial-gradient(circle at bottom right, rgba(47, 26, 38, 0.28), transparent 22%),
    linear-gradient(180deg, rgba(19, 15, 22, 0.96), rgba(10, 9, 13, 0.98));
  border: 1px solid rgba(239, 222, 195, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.34);
}

.desktop-chrome {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(239, 222, 195, 0.08);
}

.desktop-chrome-meta {
  display: grid;
  gap: 2px;
}

.desktop-chrome-meta strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.45rem;
  font-weight: 600;
}

.desktop-chrome-meta span {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.desktop-chrome-meta-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.desktop-status-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desktop-close-button {
  white-space: nowrap;
}

.desktop-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 20px;
  min-height: 220px;
}

.desktop-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 140px));
  gap: 16px;
  align-content: start;
}

.desktop-icon {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 16px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(12, 10, 15, 0.6);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(212, 187, 144, 0.24);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
  outline: none;
}

.desktop-icon strong {
  font-size: 1rem;
}

.desktop-icon span:last-child {
  color: var(--text-faint);
  font-size: 0.84rem;
  line-height: 1.45;
}

.desktop-icon-mark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(184, 121, 81, 0.26), rgba(75, 42, 34, 0.46)),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 187, 144, 0.16);
  color: rgba(245, 233, 214, 0.96);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
}

.desktop-ambience {
  align-self: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  line-height: 1.7;
}

.desktop-window {
  display: grid;
  gap: 0;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(239, 222, 195, 0.1);
  background:
    linear-gradient(180deg, rgba(17, 14, 21, 0.98), rgba(11, 9, 14, 0.98));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.desktop-window-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(239, 222, 195, 0.08);
}

.desktop-window-title {
  display: grid;
  gap: 4px;
}

.desktop-window-title strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.45rem;
}

.desktop-window-title span {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.desktop-window-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.desktop-window-body {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.desktop-window-intro {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.72;
}

.desktop-window-intro-success {
  color: #eff7db;
}

.desktop-window-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.desktop-thread-list,
.desktop-notes-list,
.desktop-simple-list,
.desktop-photos-grid {
  display: grid;
  gap: 14px;
}

.desktop-thread-card,
.desktop-note-card,
.desktop-simple-row,
.desktop-photo-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-thread-card h4,
.desktop-photo-card strong {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.2rem;
}

.desktop-photo-card:focus-visible {
  outline: 1px solid rgba(212, 187, 144, 0.3);
  outline-offset: 3px;
}

.desktop-thread-lines {
  display: grid;
  gap: 8px;
}

.desktop-thread-lines p,
.desktop-photo-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.desktop-grid-app {
  display: grid;
  gap: 16px;
}

.desktop-grid-board {
  position: relative;
  border-radius: 24px;
  padding: 16px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background:
    radial-gradient(circle at top left, rgba(122, 44, 68, 0.12), transparent 26%),
    rgba(255, 255, 255, 0.03);
}

.desktop-letter-grid,
.desktop-grid-path {
  position: absolute;
  inset: 16px;
}

.desktop-letter-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 6), minmax(0, 1fr));
  gap: 12px;
  z-index: 2;
}

.desktop-grid-path {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  z-index: 1;
  pointer-events: none;
}

.desktop-grid-path-outline,
.desktop-grid-path-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desktop-grid-path-outline {
  stroke: rgba(6, 5, 8, 0.72);
  stroke-width: 3.4;
}

.desktop-grid-path-line {
  stroke: rgba(221, 198, 151, 0.94);
  stroke-width: 1.45;
  filter: drop-shadow(0 0 8px rgba(212, 187, 144, 0.24));
}

.desktop-grid-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(239, 222, 195, 0.1);
  border-radius: 18px;
  background: rgba(12, 10, 15, 0.72);
  color: var(--text-main);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.desktop-grid-cell:hover,
.desktop-grid-cell:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(212, 187, 144, 0.28);
  background: rgba(36, 28, 36, 0.9);
  outline: none;
}

.desktop-grid-cell.is-selected,
.desktop-grid-cell.is-start {
  border-color: rgba(212, 187, 144, 0.36);
  background: rgba(97, 60, 48, 0.46);
  box-shadow: 0 0 0 1px rgba(212, 187, 144, 0.14);
}

.desktop-grid-selected {
  margin: 0;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

.desktop-lock-app,
.desktop-notes-app,
.desktop-photos-app {
  display: grid;
  gap: 18px;
}

.desktop-lock-form {
  display: grid;
  gap: 12px;
}

.desktop-lock-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.desktop-lock-row .answer-input {
  flex: 1 1 260px;
}

.desktop-photo-placeholder {
  min-height: 180px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background-size: cover;
  background-position: center;
}

.desktop-photo-placeholder.is-variant-1 {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.12), rgba(8, 8, 12, 0.5)),
    linear-gradient(135deg, rgba(172, 117, 80, 0.6), rgba(57, 31, 31, 0.72));
}

.desktop-photo-placeholder.is-variant-2 {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.12), rgba(8, 8, 12, 0.5)),
    linear-gradient(135deg, rgba(86, 98, 117, 0.56), rgba(44, 28, 37, 0.72));
}

.desktop-photo-placeholder.is-variant-3 {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.12), rgba(8, 8, 12, 0.5)),
    linear-gradient(135deg, rgba(124, 78, 94, 0.62), rgba(42, 26, 31, 0.76));
}

/* Echte desktoplaag bovenop de modal */
.modal-window.is-immersive.is-zoomlike {
  width: min(calc(100vw - 12px), 1560px);
  max-height: calc(100vh - 12px);
}

.desktop-shell {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1380px, 100%);
  min-height: min(84vh, 920px);
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(131, 77, 56, 0.24), transparent 24%),
    radial-gradient(circle at 78% 24%, rgba(112, 43, 66, 0.18), transparent 20%),
    linear-gradient(180deg, rgba(20, 16, 23, 0.96), rgba(9, 8, 12, 0.98));
}

.desktop-chrome {
  align-items: center;
  min-height: 56px;
  padding: 0 8px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  border-radius: 18px;
  background: rgba(11, 10, 15, 0.72);
  backdrop-filter: blur(14px);
}

.desktop-workspace {
  position: relative;
  min-height: 0;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(8, 8, 12, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.desktop-chrome-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.desktop-system-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(184, 121, 81, 0.28), rgba(75, 42, 34, 0.48)),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 187, 144, 0.18);
  color: rgba(245, 233, 214, 0.98);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.82rem;
}

.desktop-menu-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.desktop-menu-item {
  color: var(--text-faint);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.desktop-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 24%, rgba(219, 165, 111, 0.2), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(126, 59, 75, 0.24), transparent 22%),
    radial-gradient(circle at 62% 72%, rgba(59, 88, 112, 0.18), transparent 22%),
    linear-gradient(135deg, rgba(28, 23, 33, 0.98), rgba(9, 10, 15, 0.98));
}

.desktop-wallpaper::before,
.desktop-wallpaper::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.18;
}

.desktop-wallpaper::before {
  top: 10%;
  right: 14%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(236, 189, 136, 0.9), transparent 68%);
}

.desktop-wallpaper::after {
  left: -4%;
  bottom: -12%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(120, 69, 84, 0.82), transparent 68%);
}

.desktop-wallpaper-caption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(10, 10, 14, 0.38);
  backdrop-filter: blur(12px);
}

.desktop-wallpaper-caption strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.4rem;
}

.desktop-wallpaper-caption span {
  color: var(--text-soft);
  line-height: 1.6;
}

.desktop-icon-grid {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  width: 138px;
  pointer-events: auto;
  justify-items: center;
  text-align: center;
  padding: 14px 12px;
  border-radius: 20px;
  background: rgba(16, 14, 21, 0.34);
  backdrop-filter: blur(10px);
}

.desktop-icon::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

.desktop-icon strong,
.desktop-icon span:last-child {
  text-align: center;
}

.desktop-icon.is-active::after {
  background: rgba(212, 187, 144, 0.82);
}

.desktop-icon.is-active,
.desktop-icon:hover,
.desktop-icon:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
    rgba(19, 16, 23, 0.68);
}

.desktop-window-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.desktop-window {
  position: absolute;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 260px;
  min-height: 220px;
  pointer-events: auto;
  border-radius: 24px;
  backdrop-filter: blur(18px);
  background:
    linear-gradient(180deg, rgba(17, 15, 22, 0.92), rgba(11, 10, 15, 0.95));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.desktop-window.is-active {
  border-color: rgba(212, 187, 144, 0.18);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(212, 187, 144, 0.08);
}

.desktop-window-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  cursor: grab;
  user-select: none;
}

.desktop-window-head:active {
  cursor: grabbing;
}

.desktop-window-title {
  min-width: 0;
}

.desktop-window-controls {
  display: flex;
  gap: 8px;
}

.desktop-window-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.desktop-window-dot.is-close {
  background: linear-gradient(180deg, #e17f79, #c45e58);
}

.desktop-window-dot.is-focus {
  background: linear-gradient(180deg, #dbbd76, #b89748);
}

.desktop-window-dot.is-desktop {
  background: linear-gradient(180deg, #8aa67a, #678158);
}

.desktop-window-actions {
  display: none;
}

.desktop-window-body {
  min-height: 0;
  overflow: auto;
}

.desktop-app-shell {
  display: grid;
  gap: 16px;
  height: 100%;
}

.desktop-pane {
  border-radius: 18px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-pane-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.desktop-pane-head strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.2rem;
}

.desktop-pane-head span {
  color: var(--text-faint);
  font-size: 0.84rem;
}

.desktop-app-shell-messages {
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
}

.desktop-contact-list,
.desktop-thread-view {
  padding: 16px;
}

.desktop-contact-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.desktop-contact-item {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(239, 222, 195, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.desktop-contact-item.is-active {
  border-color: rgba(212, 187, 144, 0.16);
  background: rgba(69, 48, 42, 0.26);
}

.desktop-contact-item strong {
  font-size: 0.98rem;
}

.desktop-contact-item span {
  color: var(--text-faint);
  line-height: 1.45;
}

.desktop-thread-view {
  display: grid;
  gap: 16px;
}

.desktop-thread-list {
  gap: 12px;
}

.desktop-thread-bubble {
  max-width: 78%;
  margin: 0;
  padding: 13px 15px;
  border-radius: 18px;
  line-height: 1.62;
}

.desktop-thread-bubble.is-incoming {
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.desktop-thread-bubble.is-outgoing {
  justify-self: end;
  background: linear-gradient(180deg, rgba(103, 61, 51, 0.66), rgba(54, 31, 30, 0.78));
}

.desktop-app-shell-notes {
  align-content: start;
}

.desktop-note-book {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    repeating-linear-gradient(
      180deg,
      rgba(239, 222, 195, 0.05) 0,
      rgba(239, 222, 195, 0.05) 1px,
      transparent 1px,
      transparent 42px
    );
}

.desktop-note-strip {
  padding: 12px 4px;
  color: var(--text-soft);
  line-height: 1.8;
  border-bottom: 1px solid rgba(239, 222, 195, 0.06);
}

.desktop-launch-row,
.desktop-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.desktop-grid-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-grid-toolbar strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.98rem;
}

.desktop-grid-toolbar span {
  color: var(--text-faint);
  font-size: 0.84rem;
}

.desktop-status-row .desktop-grid-selected {
  margin: 0;
}

.desktop-calendar-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.44fr) minmax(0, 1fr);
  gap: 16px;
}

.desktop-calendar-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-calendar-panel strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.4rem;
}

.desktop-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.desktop-calendar-cell {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-size: 0.9rem;
}

.desktop-calendar-cell.is-label {
  min-height: 26px;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.desktop-calendar-cell.is-marked {
  border: 1px solid rgba(212, 187, 144, 0.22);
  background: rgba(103, 61, 51, 0.38);
  color: var(--text-main);
}

.desktop-music-shell {
  display: grid;
  gap: 16px;
}

.desktop-player {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-player-cover {
  min-height: 168px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.16), rgba(8, 8, 12, 0.52)),
    linear-gradient(135deg, rgba(183, 132, 99, 0.62), rgba(74, 39, 46, 0.82));
}

.desktop-player-meta {
  display: grid;
  align-content: center;
  gap: 10px;
}

.desktop-player-meta strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.6rem;
}

.desktop-player-meta span {
  color: var(--text-faint);
}

.desktop-player-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.desktop-player-progress span {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, rgba(212, 187, 144, 0.84), rgba(148, 111, 82, 0.88));
}

.desktop-track-list {
  display: grid;
  gap: 10px;
}

.desktop-track-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-track-row span {
  color: var(--text-faint);
  font-size: 0.84rem;
}

.desktop-track-row strong {
  font-size: 0.96rem;
}

.desktop-files-app {
  display: grid;
  gap: 16px;
}

.desktop-file-table {
  display: grid;
  gap: 10px;
}

.desktop-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-file-name {
  font-size: 0.96rem;
}

.desktop-file-meta {
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: right;
}

.desktop-lock-card {
  display: grid;
  gap: 18px;
  max-width: 520px;
  padding: 24px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(13, 12, 18, 0.72);
}

.desktop-lock-badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  border: 1px solid rgba(212, 187, 144, 0.18);
  background:
    linear-gradient(180deg, rgba(184, 121, 81, 0.24), rgba(75, 42, 34, 0.48)),
    rgba(255, 255, 255, 0.03);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.1rem;
}

.desktop-gallery-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.desktop-gallery-toolbar span {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-faint);
  font-size: 0.82rem;
}

.desktop-grid-board {
  min-height: 420px;
}

.desktop-dock {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(239, 222, 195, 0.08);
  background: rgba(11, 10, 15, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.desktop-dock-item {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 72px;
  padding: 10px 8px 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text-main);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.desktop-dock-item:hover,
.desktop-dock-item:focus-visible,
.desktop-dock-item.is-active {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.desktop-dock-item.is-open::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(212, 187, 144, 0.85);
  transform: translateX(-50%);
}

.desktop-dock-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(212, 187, 144, 0.16);
  background:
    linear-gradient(180deg, rgba(184, 121, 81, 0.22), rgba(75, 42, 34, 0.4)),
    rgba(255, 255, 255, 0.03);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.92rem;
}

.desktop-dock-label {
  font-size: 0.74rem;
  color: var(--text-faint);
}

.desktop-photos-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 980px) {
  .desktop-shell {
    min-height: min(88vh, 980px);
  }

  .desktop-chrome-left,
  .desktop-chrome-meta-right {
    flex-wrap: wrap;
  }

  .desktop-window {
    width: min(88%, 520px) !important;
    height: auto !important;
    max-height: 70%;
  }

  .desktop-app-shell-messages,
  .desktop-calendar-shell,
  .desktop-player {
    grid-template-columns: 1fr;
  }

  .desktop-grid-board {
    min-height: 340px;
  }
}

@media (max-width: 720px) {
  .modal-window.is-immersive.is-zoomlike {
    width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
  }

  .desktop-wallpaper-caption {
    max-width: 260px;
  }

  .desktop-icon {
    width: 112px;
    padding: 12px 10px;
  }

  .desktop-dock {
    flex-wrap: wrap;
  }

  .desktop-dock-item {
    min-width: 64px;
  }

  .desktop-menu-strip {
    display: none;
  }

  .desktop-file-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .desktop-file-meta {
    text-align: left;
  }
}

.unlock-screen {
  display: grid;
  gap: 12px;
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(191, 207, 159, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(191, 207, 159, 0.18);
}

.unlock-screen h4 {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 2rem;
}

.asset-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  width: 100%;
  padding: 24px;
  border: 1px dashed rgba(239, 222, 195, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 10px,
      transparent 10px,
      transparent 20px
    );
  text-align: center;
}

.asset-fallback-label {
  color: var(--text-main);
}

.asset-fallback-path {
  font-size: 0.84rem;
  word-break: break-all;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .bedroom-overview,
  .newspaper-shell,
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .inventory-bar {
    flex-direction: column;
    align-items: stretch;
  }

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

@media (max-width: 820px) {
  .app-main {
    width: min(100vw - 18px, 1280px);
    padding: 14px 0 136px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
  }

  .brand-title-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  .topbar-meta {
    justify-items: stretch;
    gap: 10px;
  }

  .topbar-timer {
    width: fit-content;
    max-width: 100%;
    padding-right: 10px;
  }

  .topbar-actions {
    justify-content: stretch;
  }

  .topbar-actions .ui-button {
    flex: 1 1 140px;
  }

  .screen,
  .modal-window {
    border-radius: 24px;
  }

  .managed-figure,
  .scene-frame {
    border-radius: 24px;
  }

  .letter-paper,
  .letter-answer,
  .scene-copy-card,
  .notes-panel {
    border-radius: 20px;
  }
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 920px) {
  body {
    min-height: 100vh;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 0%, rgba(212, 187, 144, 0.12), transparent 38%),
      var(--bg);
  }

  .app-shell {
    display: none;
  }

  .mobile-screen-warning {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      linear-gradient(180deg, rgba(9, 7, 11, 0.78), rgba(9, 7, 11, 0.98)),
      radial-gradient(circle at 50% 20%, rgba(212, 187, 144, 0.16), transparent 46%);
  }

  .mobile-screen-warning-card {
    width: min(100%, 440px);
    padding: 28px;
    border: 1px solid rgba(239, 222, 195, 0.16);
    border-radius: 28px;
    background: rgba(18, 15, 21, 0.92);
    box-shadow: var(--shadow-xl);
    text-align: left;
  }

  .mobile-screen-warning-card h1 {
    margin: 18px 0 14px;
    font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
    font-size: clamp(2.5rem, 13vw, 4rem);
    line-height: 0.95;
    color: var(--text-main);
  }

  .mobile-screen-warning-card p:not(.eyebrow) {
    margin: 0 0 24px;
    color: var(--text-soft);
    line-height: 1.7;
  }

  .mobile-screen-warning-card .ui-button {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    text-decoration: none;
  }
}

@keyframes ending-push-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ending-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  justify-items: center;
  align-items: center;
  overflow-y: auto;
  padding:
    calc(var(--topbar-safe-offset, 0px) + 12px)
    24px
    20px;
  background:
    radial-gradient(circle at center, rgba(118, 87, 64, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(7, 6, 10, 0.72), rgba(4, 4, 7, 0.94));
  backdrop-filter: blur(12px);
  animation: ending-overlay-fade 700ms ease both;
}

.ending-card {
  position: relative;
  width: min(780px, 100%);
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(239, 222, 195, 0.14);
  border-radius: 32px;
  background:
    radial-gradient(circle at top, rgba(218, 188, 144, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(21, 18, 24, 0.975), rgba(8, 7, 12, 0.995));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ending-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 241, 221, 0.05), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

.ending-card > * {
  position: relative;
  z-index: 1;
}

.ending-quote-block {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-bottom: 0;
  text-align: center;
}

.ending-kicker {
  color: var(--gold);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ending-statement {
  margin: 0;
  max-width: 28ch;
  color: rgba(245, 238, 225, 0.96);
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.02;
  text-wrap: balance;
}

.ending-summary-shell {
  display: grid;
  gap: 14px;
}

.ending-congrats {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}

.ending-congrats strong {
  color: var(--text-main);
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.8rem, 3.2vw, 2.25rem);
}

.ending-congrats span {
  font-size: 1.02rem;
}

.ending-congrats small {
  color: var(--text-faint);
  font-size: 0.94rem;
}

.ending-time-summary {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 20px 22px 18px;
  border: 1px solid rgba(239, 222, 195, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at top, rgba(218, 188, 144, 0.1), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.ending-time-label,
.ending-time-meta {
  color: var(--text-soft);
}

.ending-time-label {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ending-time-value {
  color: rgba(245, 238, 225, 0.98);
  font-family: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.95;
}

.ending-time-meta {
  max-width: 38ch;
  font-size: 0.96rem;
  line-height: 1.45;
  text-align: center;
}

.ending-share-panel {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at top left, rgba(212, 187, 144, 0.06), transparent 48%);
}

.ending-share-copy {
  display: grid;
  gap: 6px;
  text-align: left;
}

.ending-share-label {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ending-share-text {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.ending-notify-panel {
  display: grid;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(239, 222, 195, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at top right, rgba(212, 187, 144, 0.06), transparent 48%);
}

.ending-notify-copy {
  display: grid;
  gap: 6px;
}

.ending-notify-form {
  display: grid;
  gap: 12px;
}

.ending-notify-form-row {
  display: grid;
  gap: 12px;
}

.ending-notify-input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(239, 222, 195, 0.16);
  border-radius: 999px;
  background: rgba(4, 4, 7, 0.34);
  color: var(--text-main);
  font: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.ending-notify-input::placeholder {
  color: var(--text-faint);
}

.ending-notify-input:focus {
  border-color: rgba(212, 187, 144, 0.42);
  box-shadow: 0 0 0 3px rgba(212, 187, 144, 0.12);
  background: rgba(4, 4, 7, 0.46);
}

.ending-notify-form .ui-button {
  width: 100%;
  justify-content: center;
}

.ending-notify-note,
.ending-notify-message {
  margin: 0;
  line-height: 1.5;
}

.ending-notify-note {
  color: var(--text-faint);
  font-size: 0.92rem;
}

.ending-notify-message {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.ending-notify-message.text-primary {
  color: var(--gold);
}

.ending-notify-message.text-red-400 {
  color: #ffb9b9;
}

.ending-notify-message.is-hidden {
  display: none;
}

.ending-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ending-actions .ui-button {
  justify-content: center;
}

.ending-actions .ui-button {
  min-width: 180px;
}

.ending-screenshot-preview {
  width: min(760px, 100%);
}

.ending-screenshot-preview .managed-image {
  max-height: min(76vh, 760px);
  object-fit: contain;
}

@keyframes ending-overlay-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 760px) {
  .ending-summary-shell {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: stretch;
  }

  .ending-congrats {
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  .ending-time-summary {
    height: 100%;
  }
}

@media (min-width: 720px) {
  .ending-share-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ending-notify-form-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .ending-notify-form .ui-button {
    width: auto;
    min-width: 230px;
  }
}

@media (max-width: 620px) {
  .intro-title {
    font-size: clamp(2.8rem, 16vw, 4.4rem);
  }

  .ending-card {
    gap: 18px;
    padding: 22px 18px;
  }

  .ending-statement {
    max-width: none;
    font-size: clamp(1.6rem, 7.8vw, 2.15rem);
    line-height: 1.05;
  }

  .ending-share-panel {
    text-align: center;
  }

  .ending-share-copy {
    text-align: center;
  }

  .ending-share-panel .ui-button,
  .ending-actions .ui-button {
    width: 100%;
    min-width: 0;
  }

  .ending-notify-form .ui-button {
    width: 100%;
    min-width: 0;
  }

  .ending-actions {
    display: grid;
  }

  .headline-block h2 {
    max-width: none;
  }

  .scene-head,
  .answer-row,
  .modal-actions,
  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .metro-stage {
    border-radius: 24px;
  }

  .metro-node {
    width: 20px;
    height: 20px;
  }

  .metro-recorder-node {
    width: 24px;
    height: 24px;
  }

  .phone-dock {
    right: 10px;
    left: auto;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px));
    min-height: 144px;
  }

  .phone-toggle {
    width: min(236px, calc(100vw - 28px));
    min-height: 118px;
  }

  .phone-panel {
    width: min(360px, calc(100vw - 20px));
    height: min(74vh, 680px);
  }

  .phone-statusbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .toast {
    bottom: 92px;
    width: calc(100vw - 24px);
    text-align: center;
    border-radius: 22px;
  }

  .modal-overlay {
    padding: 12px;
  }

  .modal-body,
  .modal-actions,
  .phone-form,
  .phone-messages {
    padding-left: 14px;
    padding-right: 14px;
  }

  .inventory-item,
  .item-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------
   Desktop assets + purple theme
   Koppelt de nieuwe laptop-afbeeldingen aan de bestaande desktop-UI.
------------------------------ */

.desktop-shell {
  border-color: rgba(197, 154, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 14, 36, 0.985), rgba(9, 8, 18, 0.99));
}

.desktop-shell::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(160, 111, 255, 0.16), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(232, 115, 207, 0.14), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 12%);
}

.desktop-workspace {
  background:
    linear-gradient(180deg, rgba(18, 12, 33, 0.78), rgba(9, 8, 18, 0.9));
}

.desktop-wallpaper {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(34, 18, 57, 0.92), rgba(12, 9, 24, 0.95));
}

.desktop-wallpaper-media,
.desktop-wallpaper-media > .managed-image,
.desktop-wallpaper-media > .media-shell,
.desktop-wallpaper-media .managed-image {
  width: 100%;
  height: 100%;
}

.desktop-wallpaper-media {
  position: absolute;
  inset: 0;
}

.desktop-wallpaper-media .managed-image,
.desktop-wallpaper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) hue-rotate(36deg) brightness(0.72);
}

.desktop-wallpaper::before {
  background:
    linear-gradient(180deg, rgba(96, 48, 135, 0.22), rgba(20, 8, 34, 0.4)),
    linear-gradient(0deg, rgba(10, 6, 18, 0.34), transparent 32%);
}

.desktop-ambient-card,
.desktop-window,
.desktop-window-body,
.desktop-start-menu,
.desktop-taskbar {
  border-color: rgba(197, 154, 255, 0.18);
}

.desktop-ambient-card {
  background:
    linear-gradient(180deg, rgba(49, 25, 78, 0.82), rgba(17, 11, 30, 0.9));
}

.desktop-ambient-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(226, 110, 194, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(67, 30, 103, 0.86), rgba(18, 11, 31, 0.92));
}

.desktop-avatar-frame {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(224, 196, 255, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.desktop-avatar-frame > .media-shell,
.desktop-avatar-frame .managed-image,
.desktop-avatar-image {
  width: 100%;
  height: 100%;
}

.desktop-avatar-frame .managed-image,
.desktop-avatar-image {
  object-fit: cover;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(214, 166, 255, 0.18);
}

.desktop-icon.is-selected,
.desktop-icon.is-active {
  background: linear-gradient(180deg, rgba(142, 76, 213, 0.26), rgba(82, 36, 125, 0.18));
  border-color: rgba(214, 166, 255, 0.32);
}

.desktop-icon.is-active::after,
.desktop-taskbar-item.is-open::after {
  background: rgba(220, 175, 255, 0.95);
}

.desktop-icon-mark,
.desktop-window-appmark,
.desktop-start-mark,
.desktop-taskbar-mark,
.desktop-tray-chip {
  overflow: hidden;
  border-color: rgba(220, 185, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(101, 52, 149, 0.72), rgba(39, 18, 68, 0.9));
}

.desktop-icon-mark,
.desktop-start-mark {
  padding: 6px;
}

.desktop-window-appmark,
.desktop-taskbar-mark {
  padding: 4px;
}

.desktop-tray-chip {
  width: 32px;
  height: 32px;
  padding: 4px;
}

.desktop-icon-mark > .media-shell,
.desktop-window-appmark > .media-shell,
.desktop-start-mark > .media-shell,
.desktop-taskbar-mark > .media-shell,
.desktop-tray-chip > .media-shell,
.desktop-icon-mark .managed-image,
.desktop-window-appmark .managed-image,
.desktop-start-mark .managed-image,
.desktop-taskbar-mark .managed-image,
.desktop-tray-chip .managed-image,
.desktop-icon-mark-image,
.desktop-window-appmark-image,
.desktop-start-mark-image,
.desktop-taskbar-mark-image,
.desktop-tray-chip-image {
  width: 100%;
  height: 100%;
}

.desktop-icon-mark .managed-image,
.desktop-window-appmark .managed-image,
.desktop-start-mark .managed-image,
.desktop-taskbar-mark .managed-image,
.desktop-tray-chip .managed-image,
.desktop-icon-mark-image,
.desktop-window-appmark-image,
.desktop-start-mark-image,
.desktop-taskbar-mark-image,
.desktop-tray-chip-image {
  object-fit: contain;
}

.desktop-window {
  background:
    linear-gradient(180deg, rgba(23, 14, 37, 0.975), rgba(10, 9, 19, 0.988));
}

.desktop-window.is-active {
  border-color: rgba(201, 153, 255, 0.42);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(201, 153, 255, 0.14);
}

.desktop-window-head {
  background:
    linear-gradient(180deg, rgba(55, 31, 89, 0.94), rgba(29, 16, 51, 0.96));
  border-bottom-color: rgba(197, 154, 255, 0.15);
}

.desktop-window-control:hover,
.desktop-window-control:focus-visible,
.desktop-start-button:hover,
.desktop-start-button:focus-visible,
.desktop-start-button.is-active,
.desktop-taskbar-search:hover,
.desktop-taskbar-search:focus-visible,
.desktop-taskbar-item:hover,
.desktop-taskbar-item:focus-visible,
.desktop-taskbar-item.is-active,
.desktop-taskbar-clock:hover,
.desktop-taskbar-clock:focus-visible,
.desktop-start-item:hover,
.desktop-start-item:focus-visible {
  border-color: rgba(214, 166, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
}

.desktop-start-menu {
  background:
    linear-gradient(180deg, rgba(36, 19, 61, 0.95), rgba(14, 10, 25, 0.97));
}

.desktop-taskbar {
  background:
    linear-gradient(180deg, rgba(28, 16, 48, 0.95), rgba(10, 8, 18, 0.985));
}

.desktop-start-button,
.desktop-taskbar-search,
.desktop-taskbar-item,
.desktop-taskbar-clock,
.desktop-start-power,
.desktop-start-search,
.desktop-start-item {
  border-color: rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.05);
}

.desktop-window-preview {
  display: grid;
  gap: 8px;
}

.desktop-window-preview-label {
  color: rgba(223, 207, 241, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.desktop-window-preview-frame {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(197, 154, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.desktop-window-preview-frame > .media-shell,
.desktop-window-preview-frame .managed-image,
.desktop-window-preview-image {
  width: 100%;
}

.desktop-window-preview-frame .managed-image,
.desktop-window-preview-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.desktop-pane,
.desktop-note-book,
.desktop-grid-toolbar,
.desktop-calendar-panel,
.desktop-player,
.desktop-file-row,
.desktop-lock-card,
.desktop-gallery-toolbar span {
  border-color: rgba(197, 154, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
}

.desktop-contact-item.is-active,
.desktop-track-row.is-active,
.desktop-calendar-cell.is-marked {
  border-color: rgba(214, 166, 255, 0.3);
  background: rgba(132, 74, 199, 0.18);
}

.desktop-thread-bubble.is-outgoing {
  background: linear-gradient(180deg, rgba(142, 73, 206, 0.58), rgba(89, 39, 139, 0.74));
}

.desktop-player-cover {
  background:
    radial-gradient(circle at top right, rgba(233, 117, 216, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(101, 52, 149, 0.8), rgba(41, 18, 70, 0.94));
}

.desktop-player-progress span {
  background: linear-gradient(90deg, rgba(224, 172, 255, 0.92), rgba(170, 104, 223, 0.94));
}

.desktop-lock-badge {
  background:
    linear-gradient(180deg, rgba(106, 58, 154, 0.8), rgba(44, 21, 74, 0.9));
}

.desktop-photo-card {
  border-color: rgba(197, 154, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

/* -----------------------------
   Laptop desktop OS refresh
   Maak de laptoplaag geloofwaardiger als echte pc-omgeving.
------------------------------ */

.modal-window.is-immersive.is-zoomlike {
  width: min(calc(100vw - 8px), 1660px);
  max-height: calc(100vh - 8px);
}

.desktop-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: min(1480px, 100%);
  min-height: min(90vh, 980px);
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(176, 195, 223, 0.16);
  background:
    linear-gradient(180deg, rgba(17, 20, 31, 0.98), rgba(8, 9, 15, 0.985));
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.desktop-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(98, 135, 255, 0.14), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(214, 154, 101, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 12%);
  pointer-events: none;
}

.desktop-workspace {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 22, 0.72), rgba(8, 10, 16, 0.88));
  box-shadow: none;
}

.desktop-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(76, 110, 198, 0.28), transparent 22%),
    radial-gradient(circle at 74% 18%, rgba(203, 137, 92, 0.18), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(58, 80, 122, 0.24), transparent 22%),
    linear-gradient(135deg, rgba(15, 20, 33, 0.98), rgba(8, 11, 18, 0.985));
}

.desktop-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 32%);
  pointer-events: none;
}

.desktop-ambient-panel {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(368px, calc(100% - 36px));
}

.desktop-ambient-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(169, 187, 217, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 26, 38, 0.82), rgba(11, 14, 22, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.desktop-ambient-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(203, 137, 92, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(22, 28, 40, 0.86), rgba(11, 14, 22, 0.92));
}

.desktop-ambient-label {
  color: rgba(193, 207, 229, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.desktop-ambient-card strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.05rem;
  color: rgba(247, 243, 236, 0.96);
}

.desktop-ambient-card p {
  margin: 0;
  color: rgba(218, 226, 238, 0.84);
  line-height: 1.6;
}

.desktop-ambient-stats {
  display: grid;
  gap: 8px;
}

.desktop-ambient-stats span {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 233, 244, 0.86);
}

.desktop-icon-grid {
  position: absolute;
  inset: 18px 18px 18px 18px;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 112px;
  padding: 10px 8px 12px;
  pointer-events: auto;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-main);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(147, 176, 232, 0.16);
  outline: none;
}

.desktop-icon.is-selected,
.desktop-icon.is-active {
  background: linear-gradient(180deg, rgba(85, 123, 224, 0.2), rgba(47, 73, 134, 0.16));
  border-color: rgba(129, 161, 226, 0.32);
}

.desktop-icon.is-active::after,
.desktop-taskbar-item.is-open::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: rgba(129, 181, 255, 0.92);
}

.desktop-icon-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(177, 198, 230, 0.18);
  background:
    linear-gradient(180deg, rgba(59, 84, 130, 0.72), rgba(23, 34, 57, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.18);
  color: rgba(246, 243, 236, 0.96);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.9rem;
}

.desktop-icon-meta {
  display: grid;
  gap: 2px;
  text-align: center;
}

.desktop-icon-meta strong {
  font-size: 0.84rem;
  font-weight: 700;
}

.desktop-icon-meta span {
  color: rgba(197, 208, 225, 0.72);
  font-size: 0.68rem;
  line-height: 1.35;
}

.desktop-window-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.desktop-window {
  position: absolute;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 320px;
  min-height: 260px;
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid rgba(167, 188, 223, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(16, 19, 30, 0.97), rgba(10, 12, 21, 0.985));
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.desktop-window.is-active {
  border-color: rgba(119, 167, 245, 0.42);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(119, 167, 245, 0.16);
}

.desktop-window.is-maximized {
  border-radius: 14px;
}

.desktop-window.is-minimized {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  pointer-events: none;
}

.desktop-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(167, 188, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(31, 39, 56, 0.92), rgba(19, 24, 38, 0.92));
  cursor: grab;
  user-select: none;
}

.desktop-window-head:active {
  cursor: grabbing;
}

.desktop-window-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.desktop-window-appmark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(181, 200, 231, 0.18);
  background:
    linear-gradient(180deg, rgba(70, 98, 149, 0.78), rgba(28, 42, 71, 0.9));
  color: rgba(246, 243, 236, 0.96);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.66rem;
}

.desktop-window-title {
  min-width: 0;
}

.desktop-window-title strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}

.desktop-window-title span {
  display: block;
  margin-top: 2px;
  color: rgba(197, 208, 225, 0.68);
  font-size: 0.72rem;
}

.desktop-window-controls {
  display: flex;
  gap: 6px;
}

.desktop-window-control {
  position: relative;
  width: 38px;
  height: 30px;
  padding: 0;
  font: inherit;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(219, 227, 239, 0.84);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.desktop-window-control:hover,
.desktop-window-control:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.desktop-window-control.is-close:hover,
.desktop-window-control.is-close:focus-visible {
  background: rgba(181, 63, 69, 0.86);
  color: #fff;
}

.desktop-window-control span,
.desktop-window-control::before,
.desktop-window-control::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.desktop-window-control.is-minimize span {
  width: 12px;
  height: 2px;
  margin-top: 7px;
  background: currentColor;
}

.desktop-window-control.is-maximize span {
  width: 12px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 1px;
}

.desktop-window-control.is-close span {
  display: none;
}

.desktop-window-control.is-close::before,
.desktop-window-control.is-close::after {
  width: 12px;
  height: 2px;
  background: currentColor;
}

.desktop-window-control.is-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.desktop-window-control.is-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.desktop-window-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(11, 14, 22, 0.92), rgba(8, 11, 18, 0.96));
}

.desktop-start-menu {
  position: absolute;
  left: 14px;
  bottom: 76px;
  z-index: 8;
  display: grid;
  gap: 14px;
  width: min(380px, calc(100% - 28px));
  max-height: calc(100% - 96px);
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(167, 188, 223, 0.18);
  background:
    linear-gradient(180deg, rgba(19, 24, 38, 0.94), rgba(10, 13, 22, 0.96));
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.desktop-start-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.desktop-start-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.desktop-start-meta {
  display: grid;
  gap: 4px;
}

.desktop-start-meta strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
}

.desktop-start-meta span {
  color: rgba(197, 208, 225, 0.72);
  font-size: 0.76rem;
}

.desktop-start-power {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(167, 188, 223, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
}

.desktop-start-search {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(167, 188, 223, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(197, 208, 225, 0.72);
}

.desktop-start-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.desktop-start-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-main);
  text-align: left;
}

.desktop-start-item:hover,
.desktop-start-item:focus-visible {
  border-color: rgba(129, 161, 226, 0.24);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.desktop-start-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(181, 200, 231, 0.18);
  background:
    linear-gradient(180deg, rgba(65, 94, 145, 0.78), rgba(27, 40, 67, 0.88));
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.78rem;
}

.desktop-start-text {
  display: grid;
  gap: 3px;
}

.desktop-start-text strong {
  font-size: 0.9rem;
}

.desktop-start-text span {
  color: rgba(197, 208, 225, 0.7);
  font-size: 0.74rem;
}

.desktop-taskbar {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(167, 188, 223, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 15, 25, 0.94), rgba(8, 10, 17, 0.98));
}

.desktop-taskbar-left,
.desktop-taskbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-start-button,
.desktop-taskbar-search,
.desktop-taskbar-item,
.desktop-taskbar-clock {
  font: inherit;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.desktop-start-button:hover,
.desktop-start-button:focus-visible,
.desktop-start-button.is-active,
.desktop-taskbar-search:hover,
.desktop-taskbar-search:focus-visible,
.desktop-taskbar-item:hover,
.desktop-taskbar-item:focus-visible,
.desktop-taskbar-item.is-active,
.desktop-taskbar-clock:hover,
.desktop-taskbar-clock:focus-visible {
  border-color: rgba(129, 161, 226, 0.22);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.desktop-start-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 118px;
  height: 46px;
  padding: 0 16px;
}

.desktop-start-button strong {
  font-size: 0.88rem;
}

.desktop-start-glyph {
  position: relative;
  width: 16px;
  height: 16px;
}

.desktop-start-glyph::before,
.desktop-start-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%),
    linear-gradient(180deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%);
  opacity: 0.85;
}

.desktop-taskbar-search {
  min-width: 196px;
  height: 46px;
  padding: 0 16px;
  color: rgba(197, 208, 225, 0.74);
  text-align: left;
}

.desktop-taskbar-apps {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.desktop-taskbar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 118px;
  max-width: 188px;
  height: 46px;
  padding: 0 12px;
  text-align: left;
}

.desktop-taskbar-item.is-minimized {
  opacity: 0.68;
}

.desktop-taskbar-item.is-open::after {
  position: absolute;
  left: 12px;
  bottom: 4px;
  margin: 0;
}

.desktop-taskbar-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(181, 200, 231, 0.16);
  background:
    linear-gradient(180deg, rgba(65, 94, 145, 0.78), rgba(27, 40, 67, 0.88));
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.68rem;
}

.desktop-taskbar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}

.desktop-system-tray {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desktop-tray-chip {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(197, 208, 225, 0.74);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.desktop-taskbar-clock {
  display: grid;
  gap: 2px;
  min-width: 122px;
  padding: 8px 12px;
  text-align: right;
}

.desktop-taskbar-clock strong {
  display: block;
  font-size: 0.92rem;
}

.desktop-taskbar-clock span {
  display: block;
  color: rgba(197, 208, 225, 0.72);
  font-size: 0.72rem;
}

.desktop-app-shell,
.desktop-grid-app,
.desktop-files-app,
.desktop-photos-app,
.desktop-lock-app {
  height: 100%;
}

.desktop-app-shell {
  display: grid;
  gap: 16px;
}

.desktop-pane,
.desktop-note-book,
.desktop-grid-toolbar,
.desktop-calendar-panel,
.desktop-player,
.desktop-file-row,
.desktop-lock-card,
.desktop-gallery-toolbar span {
  border: 1px solid rgba(167, 188, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.desktop-pane {
  border-radius: 16px;
}

.desktop-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.desktop-pane-head strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
}

.desktop-pane-head span {
  color: rgba(197, 208, 225, 0.68);
  font-size: 0.75rem;
}

.desktop-app-shell-messages {
  display: grid;
  grid-template-columns: minmax(236px, 0.42fr) minmax(0, 1fr);
}

.desktop-contact-list,
.desktop-thread-view {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.desktop-contact-list {
  align-content: start;
}

.desktop-contact-item,
.desktop-track-row {
  width: 100%;
  font: inherit;
  text-align: left;
  border: 1px solid rgba(167, 188, 223, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-main);
}

.desktop-contact-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.desktop-contact-item.is-active,
.desktop-track-row.is-active {
  border-color: rgba(129, 161, 226, 0.32);
  background: rgba(75, 104, 168, 0.16);
}

.desktop-contact-item:hover,
.desktop-contact-item:focus-visible,
.desktop-track-row:hover,
.desktop-track-row:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.desktop-contact-item span,
.desktop-track-row span,
.desktop-file-meta {
  color: rgba(197, 208, 225, 0.68);
}

.desktop-thread-view {
  min-width: 0;
}

.desktop-thread-list {
  display: grid;
  gap: 12px;
}

.desktop-thread-bubble {
  max-width: 78%;
  margin: 0;
  padding: 13px 15px;
  border-radius: 18px;
  line-height: 1.62;
}

.desktop-thread-bubble.is-incoming {
  justify-self: start;
  border: 1px solid rgba(167, 188, 223, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.desktop-thread-bubble.is-outgoing {
  justify-self: end;
  background: linear-gradient(180deg, rgba(79, 110, 177, 0.52), rgba(42, 60, 100, 0.7));
}

.desktop-app-shell-notes {
  align-content: start;
}

.desktop-note-book {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
}

.desktop-note-strip {
  padding: 12px 4px;
  line-height: 1.74;
  color: rgba(222, 230, 242, 0.86);
  border-bottom: 1px solid rgba(167, 188, 223, 0.1);
}

.desktop-launch-row,
.desktop-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.desktop-grid-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
}

.desktop-grid-toolbar strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.96rem;
}

.desktop-grid-toolbar span {
  color: rgba(197, 208, 225, 0.68);
  font-size: 0.76rem;
}

.desktop-calendar-shell {
  display: grid;
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
}

.desktop-calendar-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
}

.desktop-calendar-panel strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.14rem;
}

.desktop-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.desktop-calendar-cell {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.desktop-calendar-cell.is-label {
  background: transparent;
  color: rgba(197, 208, 225, 0.68);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.desktop-calendar-cell.is-marked {
  border: 1px solid rgba(129, 161, 226, 0.34);
  background: rgba(75, 104, 168, 0.2);
}

.desktop-music-shell {
  display: grid;
  gap: 16px;
}

.desktop-player {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
}

.desktop-player-cover {
  min-height: 168px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(209, 145, 88, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(73, 101, 156, 0.76), rgba(29, 42, 72, 0.92));
}

.desktop-player-meta {
  display: grid;
  align-content: center;
  gap: 10px;
}

.desktop-player-meta strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.36rem;
}

.desktop-player-meta span {
  color: rgba(197, 208, 225, 0.68);
}

.desktop-player-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.desktop-player-progress span {
  display: block;
  width: 44%;
  height: 100%;
  background: linear-gradient(90deg, rgba(129, 181, 255, 0.88), rgba(90, 129, 205, 0.92));
}

.desktop-track-list {
  display: grid;
  gap: 8px;
}

.desktop-track-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
}

.desktop-files-app {
  display: grid;
  gap: 14px;
}

.desktop-file-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  gap: 14px;
  padding: 0 14px;
  color: rgba(197, 208, 225, 0.66);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-file-table {
  display: grid;
  gap: 8px;
}

.desktop-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
}

.desktop-file-name {
  font-size: 0.94rem;
}

.desktop-lock-app {
  display: grid;
  place-items: center;
}

.desktop-lock-card {
  display: grid;
  gap: 18px;
  width: min(520px, 100%);
  padding: 24px;
  border-radius: 20px;
}

.desktop-lock-badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  border: 1px solid rgba(181, 200, 231, 0.18);
  background:
    linear-gradient(180deg, rgba(65, 94, 145, 0.78), rgba(27, 40, 67, 0.88));
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
}

.desktop-lock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.desktop-gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.desktop-gallery-toolbar span {
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(197, 208, 225, 0.72);
  font-size: 0.76rem;
}

.desktop-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.desktop-photo-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(167, 188, 223, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-photo-card:focus-visible {
  outline: 1px solid rgba(129, 161, 226, 0.34);
  outline-offset: 1px;
}

.desktop-photo-placeholder {
  min-height: 160px;
  border-radius: 14px;
}

.desktop-lastnight-app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.final-photo-brief {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(156, 185, 224, 0.15);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(188, 214, 255, 0.1), transparent 25%),
    linear-gradient(180deg, rgba(18, 23, 34, 0.86), rgba(8, 11, 18, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.final-photo-brief-copy {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.final-photo-kicker {
  color: rgba(184, 202, 230, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.final-photo-brief-copy strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.18rem;
}

.final-photo-brief-copy p {
  color: rgba(222, 230, 242, 0.82);
  line-height: 1.62;
}

.final-photo-inspection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.32fr);
  gap: 16px;
  min-height: 0;
}

.final-photo-stage {
  position: relative;
  align-self: start;
  aspect-ratio: 1672 / 941;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(167, 188, 223, 0.18);
  border-radius: 18px;
  background: #05070b;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.final-photo-stage::before,
.final-photo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.final-photo-stage::before {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 48%, transparent 38%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, rgba(9, 16, 26, 0.06), rgba(2, 4, 8, 0.24));
  mix-blend-mode: multiply;
}

.final-photo-stage::after {
  z-index: 4;
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px,
      transparent 5px
    );
  animation: final-photo-film-drift 7s ease-in-out infinite;
}

.final-photo-image-shell,
.final-photo-image-shell > .media-shell,
.final-photo-image-shell .managed-image,
.final-photo-image {
  width: 100%;
  height: 100%;
}

.final-photo-image {
  object-fit: cover;
}

.final-photo-stage.is-solved .final-photo-image-shell {
  animation: final-photo-reveal-glitch 920ms steps(2, end) both;
  filter: saturate(0.78) contrast(1.12) brightness(0.84);
}

.final-photo-stage.is-solved::after {
  opacity: 0;
  animation: final-photo-static 820ms ease both;
}

.final-photo-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.final-photo-hotspot {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(219, 232, 255, 0.9);
  cursor: default;
}

.final-photo-hotspot::before,
.final-photo-hotspot::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.final-photo-hotspot::before {
  border: 1px solid rgba(207, 228, 255, 0.24);
  background:
    radial-gradient(circle, rgba(207, 228, 255, 0.13), rgba(126, 169, 233, 0.04) 42%, transparent 72%);
  box-shadow:
    0 0 24px rgba(126, 169, 233, 0.16),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
}

.final-photo-hotspot::after {
  inset: 38%;
  background: rgba(235, 244, 255, 0.72);
  box-shadow: 0 0 18px rgba(161, 202, 255, 0.42);
  transform: scale(0.55);
}

.final-photo-hotspot:focus-visible::before,
.final-photo-hotspot:focus-visible::after {
  opacity: 0.32;
}

.final-photo-hotspot:focus-visible {
  outline: none;
}

.final-photo-hotspot.is-found::before {
  opacity: 0;
  border-color: rgba(207, 228, 255, 0.34);
  background:
    radial-gradient(circle, rgba(207, 228, 255, 0.16), rgba(126, 169, 233, 0.05) 46%, transparent 74%);
}

.final-photo-stage-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 6;
  padding: 8px 10px;
  border: 1px solid rgba(207, 228, 255, 0.14);
  border-radius: 999px;
  background: rgba(3, 7, 13, 0.56);
  color: rgba(223, 233, 247, 0.72);
  font-size: 0.72rem;
  backdrop-filter: blur(12px);
}

.final-photo-clue-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(167, 188, 223, 0.15);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 23, 34, 0.88), rgba(8, 11, 18, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.final-photo-summary {
  display: grid;
  gap: 4px;
}

.final-photo-summary strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.02rem;
}

.final-photo-summary span {
  color: rgba(197, 208, 225, 0.68);
  font-size: 0.74rem;
}

.final-photo-clue-list {
  display: grid;
  gap: 2px;
}

.final-photo-clue {
  display: grid;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(167, 188, 223, 0.1);
  background: transparent;
}

.final-photo-clue strong {
  font-size: 0.86rem;
}

.final-photo-clue span {
  color: rgba(197, 208, 225, 0.62);
  font-size: 0.78rem;
  line-height: 1.46;
}

.final-photo-clue.is-found {
  border-color: rgba(168, 202, 255, 0.18);
  background: transparent;
}

.final-photo-clue.is-found span {
  color: rgba(231, 239, 250, 0.86);
}

.final-photo-empty-log {
  padding: 10px 0;
  color: rgba(197, 208, 225, 0.58);
  font-size: 0.78rem;
  line-height: 1.48;
}

.final-photo-feedback {
  min-height: 62px;
  padding: 13px 14px;
  border: 1px solid rgba(167, 188, 223, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.032);
  color: rgba(222, 230, 242, 0.82);
  line-height: 1.55;
}

.final-photo-feedback.is-muted {
  color: rgba(197, 208, 225, 0.62);
}

.final-photo-feedback.is-active {
  border-color: rgba(212, 187, 144, 0.22);
  background: rgba(212, 187, 144, 0.06);
}

.final-photo-feedback.is-reveal {
  border-color: rgba(168, 202, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(65, 93, 148, 0.2), rgba(255, 255, 255, 0.025));
}

.final-photo-reveal-block {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(212, 187, 144, 0.24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(212, 187, 144, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(27, 26, 31, 0.88), rgba(8, 10, 16, 0.95));
}

.final-photo-reveal-line {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.48;
  color: rgba(250, 246, 238, 0.98);
}

.final-photo-reveal-note {
  color: rgba(218, 226, 238, 0.72);
  line-height: 1.55;
}

.final-photo-next-row {
  display: flex;
  justify-content: flex-start;
}

.final-photo-next-button {
  width: 100%;
}

@keyframes final-photo-film-drift {
  0%,
  100% {
    opacity: 0.09;
    transform: translateY(0);
  }

  48% {
    opacity: 0.15;
    transform: translateY(2px);
  }
}

@keyframes final-photo-reveal-glitch {
  0% {
    opacity: 0.74;
    transform: scale(1.012) translateX(0);
    clip-path: inset(0 0 0 0);
  }

  12% {
    transform: scale(1.018) translateX(-8px);
    clip-path: inset(0 0 74% 0);
  }

  24% {
    transform: scale(1.012) translateX(7px);
    clip-path: inset(31% 0 38% 0);
  }

  41% {
    transform: scale(1.02) translateX(-4px);
    clip-path: inset(63% 0 10% 0);
  }

  58% {
    opacity: 0.9;
    transform: scale(1.006) translateX(4px);
    clip-path: inset(10% 0 58% 0);
  }

  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes final-photo-static {
  0%,
  72% {
    opacity: 0.44;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 1100px) {
  .desktop-ambient-panel {
    position: absolute;
    left: 18px;
    right: 18px;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-icon-grid {
    top: 170px;
  }

  .desktop-app-shell-messages,
  .desktop-calendar-shell,
  .desktop-player,
  .final-photo-inspection {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .desktop-shell {
    min-height: min(92vh, 980px);
  }

  .desktop-ambient-panel {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 16px 16px 0;
    width: auto;
    grid-template-columns: 1fr;
  }

  .desktop-icon-grid {
    inset: 184px 12px 12px 12px;
  }

  .desktop-taskbar {
    grid-template-columns: 1fr;
  }

  .desktop-taskbar-left,
  .desktop-taskbar-right {
    justify-content: space-between;
  }

  .desktop-taskbar-apps {
    order: 3;
  }

  .desktop-start-menu {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 146px;
  }

  .desktop-window {
    width: min(94%, 560px) !important;
    height: auto !important;
    max-height: 74%;
  }
}

@media (max-width: 640px) {
  .desktop-taskbar-search,
  .desktop-taskbar-label,
  .desktop-start-button strong,
  .desktop-system-tray {
    display: none;
  }

  .desktop-taskbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .desktop-taskbar-item {
    min-width: 58px;
    max-width: 58px;
    justify-content: center;
    padding: 0;
  }

  .desktop-icon {
    width: 92px;
  }

  .desktop-window-body {
    padding: 14px;
  }

  .final-photo-brief {
    align-items: stretch;
    flex-direction: column;
  }

  .final-photo-stage {
    min-height: 240px;
  }
}

/* Laptop desktop refresh */
.modal-window.is-immersive.is-zoomlike {
  width: min(calc(100vw - 10px), 1520px);
  max-height: calc(100vh - 10px);
}

.modal-window.is-laptop-modal.is-zoomlike {
  align-self: start;
  margin-top: clamp(118px, 13vh, 138px);
  max-height: calc(100vh - clamp(128px, 15vh, 152px));
}

.desktop-shell {
  --desktop-border: rgba(255, 255, 255, 0.08);
  --desktop-border-strong: rgba(255, 255, 255, 0.12);
  --desktop-panel: rgba(13, 16, 23, 0.58);
  --desktop-text: rgba(243, 239, 234, 0.96);
  --desktop-muted: rgba(206, 212, 225, 0.58);
  --desktop-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  width: min(100%, 1400px);
  min-height: min(76vh, 860px);
  padding: 12px;
  overflow: hidden;
  border-radius: 24px;
  color: var(--desktop-text);
  background:
    radial-gradient(circle at 12% 12%, rgba(166, 122, 84, 0.14), transparent 0 16%),
    radial-gradient(circle at 78% 84%, rgba(67, 89, 120, 0.12), transparent 0 20%),
    linear-gradient(160deg, rgba(15, 18, 26, 0.98), rgba(8, 10, 15, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 80px rgba(0, 0, 0, 0.42);
}

.desktop-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), transparent 0 18%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.04), transparent 0 18%);
  mix-blend-mode: soft-light;
}

.desktop-topbar,
.desktop-dock,
.desktop-start-menu,
.desktop-window,
.desktop-sidebar-card,
.desktop-pane,
.desktop-preview-card {
  border: 1px solid var(--desktop-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(11, 13, 19, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}

.desktop-topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 16px;
}

.desktop-topbar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.desktop-topbar-section.is-right {
  justify-content: flex-end;
}

.desktop-system-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(23, 28, 38, 0.54);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.desktop-menu-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.desktop-menu-item {
  color: var(--desktop-muted);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.desktop-session-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.desktop-session-meta strong {
  font-size: 0.92rem;
  font-weight: 600;
}

.desktop-session-meta span {
  color: var(--desktop-muted);
  font-size: 0.72rem;
}

.desktop-status-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(236, 239, 244, 0.86);
  font-size: 0.76rem;
  white-space: nowrap;
}

.desktop-status-item.is-icon-only {
  justify-content: center;
  min-width: 28px;
  padding-inline: 4px;
}

.desktop-status-item.is-date {
  min-width: 130px;
  justify-content: center;
  padding-inline: 10px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.desktop-exit-button {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(239, 222, 195, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 243, 236, 0.94);
  font: 700 0.68rem/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.desktop-exit-button:hover,
.desktop-exit-button:focus-visible {
  border-color: rgba(212, 187, 144, 0.44);
  background: rgba(212, 187, 144, 0.14);
  outline: none;
}

.desktop-exit-button:active {
  transform: translateY(1px);
}

.desktop-status-icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: rgba(240, 240, 240, 0.92);
}

.desktop-status-icon.is-wifi {
  background:
    linear-gradient(to top, rgba(239, 241, 248, 0.78) 0 100%) 1px 9px / 2px 5px no-repeat,
    linear-gradient(to top, rgba(239, 241, 248, 0.84) 0 100%) 6px 6px / 2px 8px no-repeat,
    linear-gradient(to top, rgba(239, 241, 248, 0.92) 0 100%) 11px 3px / 2px 11px no-repeat;
}

.desktop-status-icon.is-volume::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 7px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 25%, 36% 25%, 68% 0, 68% 100%, 36% 75%, 0 75%);
}

.desktop-status-icon.is-volume::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-radius: 0 50% 50% 0;
  opacity: 0.82;
}

.desktop-status-icon.is-battery {
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.desktop-status-icon.is-battery::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(209, 229, 155, 0.95), rgba(123, 177, 98, 0.92));
}

.desktop-status-icon.is-battery::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -3px;
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}

.desktop-workspace {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--desktop-border);
  background: rgba(7, 9, 13, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 72px rgba(0, 0, 0, 0.3);
}

.desktop-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(208, 157, 110, 0.12), transparent 0 16%),
    radial-gradient(circle at 80% 18%, rgba(101, 110, 138, 0.09), transparent 0 18%),
    linear-gradient(150deg, #111722, #0b0f17 44%, #090b11);
}

.desktop-wallpaper::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.08), transparent 0 16%),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.05), transparent 0 18%),
    radial-gradient(circle at 58% 82%, rgba(255, 255, 255, 0.05), transparent 0 16%);
  filter: blur(24px);
}

.desktop-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: soft-light;
}

.desktop-wallpaper-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(8, 10, 14, 0.2);
  backdrop-filter: blur(8px);
}

.desktop-wallpaper-caption strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.08rem;
  font-weight: 600;
}

.desktop-wallpaper-caption span {
  color: var(--desktop-muted);
  font-size: 0.74rem;
  text-transform: lowercase;
}

.desktop-sidebar {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: min(232px, calc(100% - 44px));
}

.desktop-sidebar-card {
  display: grid;
  gap: 8px;
  padding: 14px 15px;
  border-radius: 18px;
}

.desktop-sidebar-card.is-glance {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(12, 15, 21, 0.46);
}

.desktop-sidebar-label,
.music-kicker,
.desktop-settings-kicker,
.desktop-start-section-label {
  color: var(--desktop-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.desktop-sidebar-card strong {
  font-size: 0.94rem;
  font-weight: 600;
}

.desktop-sidebar-list {
  display: grid;
  gap: 6px;
}

.desktop-sidebar-item {
  color: rgba(236, 239, 244, 0.84);
  font-size: 0.78rem;
  line-height: 1.4;
}

.desktop-sidebar-foot {
  color: var(--desktop-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.desktop-icon-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  display: grid;
  gap: 7px;
  width: 86px;
  padding: 6px 4px 10px;
  justify-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--desktop-text);
  text-align: center;
  pointer-events: auto;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.desktop-icon::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
}

.desktop-icon:hover,
.desktop-icon:focus-visible,
.desktop-icon.is-selected,
.desktop-icon.is-active {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
  outline: none;
}

.desktop-icon.is-active::after {
  background: rgba(243, 239, 234, 0.9);
}

.desktop-icon-mark,
.desktop-window-appmark,
.desktop-start-mark,
.desktop-dock-mark {
  --app-accent: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 0 34%),
    linear-gradient(160deg, var(--app-accent), rgba(18, 22, 30, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.16);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.desktop-icon-mark {
  width: 38px;
  height: 38px;
  font-size: 0.88rem;
}

.desktop-window-appmark,
.desktop-start-mark {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.desktop-dock-mark {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
  border-radius: 12px;
}

.desktop-icon-meta {
  display: grid;
  gap: 2px;
}

.desktop-icon-meta strong {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.desktop-icon-meta span {
  display: none;
}

.desktop-window-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.desktop-window {
  position: absolute;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 280px;
  min-height: 240px;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: auto;
  box-shadow: var(--desktop-shadow);
}

.desktop-window.is-active {
  border-color: var(--desktop-border-strong);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.desktop-window.is-minimized {
  display: none;
}

.desktop-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: grab;
  user-select: none;
}

.desktop-window-head:active {
  cursor: grabbing;
}

.desktop-window-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.desktop-window-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.desktop-window-title strong {
  font-size: 0.98rem;
  font-weight: 600;
}

.desktop-window-title span {
  color: var(--desktop-muted);
  font-size: 0.74rem;
}

.desktop-window-controls {
  display: flex;
  gap: 8px;
}

.desktop-window-control {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.desktop-window-control.is-minimize {
  background: linear-gradient(180deg, #f3c76d, #c9982c);
}

.desktop-window-control.is-maximize {
  background: linear-gradient(180deg, #9fd09d, #5f9358);
}

.desktop-window-control.is-close {
  background: linear-gradient(180deg, #f08d87, #cc5c57);
}

.desktop-window-control:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.34);
  outline-offset: 2px;
}

.desktop-window-body {
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.desktop-app-shell {
  display: grid;
  gap: 16px;
  height: 100%;
}

.messages-app {
  grid-template-columns: minmax(250px, 0.4fr) minmax(0, 1fr);
}

.calendar-app {
  grid-template-columns: minmax(300px, 0.48fr) minmax(0, 1fr);
}

.notes-app {
  grid-template-columns: minmax(260px, 0.4fr) minmax(0, 1fr);
}

.files-app {
  grid-template-columns: minmax(200px, 0.28fr) minmax(0, 1fr) minmax(260px, 0.34fr);
}

.music-app {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
}

.mail-app {
  grid-template-columns: minmax(280px, 0.44fr) minmax(0, 1fr);
}

.trash-app {
  grid-template-columns: minmax(250px, 0.4fr) minmax(0, 1fr);
}

.settings-app {
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
}

.desktop-pane {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  border-radius: 22px;
}

.desktop-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.desktop-pane-head strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.desktop-pane-head span {
  color: var(--desktop-muted);
  font-size: 0.74rem;
}

.desktop-contact-item,
.desktop-note-item,
.desktop-folder-item,
.desktop-mail-item,
.desktop-trash-item,
.music-track,
.desktop-start-item,
.desktop-recent-item,
.desktop-file-row,
.desktop-start-button,
.desktop-dock-item,
.music-play-button,
.desktop-dock-clock,
.desktop-start-power {
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.desktop-contact-item,
.desktop-note-item,
.desktop-folder-item,
.desktop-mail-item,
.desktop-trash-item,
.music-track,
.desktop-file-row,
.desktop-start-item,
.desktop-recent-item {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.desktop-contact-item:hover,
.desktop-note-item:hover,
.desktop-folder-item:hover,
.desktop-mail-item:hover,
.desktop-trash-item:hover,
.music-track:hover,
.desktop-file-row:hover,
.desktop-start-item:hover,
.desktop-recent-item:hover,
.desktop-contact-item:focus-visible,
.desktop-note-item:focus-visible,
.desktop-folder-item:focus-visible,
.desktop-mail-item:focus-visible,
.desktop-trash-item:focus-visible,
.music-track:focus-visible,
.desktop-file-row:focus-visible,
.desktop-start-item:focus-visible,
.desktop-recent-item:focus-visible,
.desktop-start-button:focus-visible,
.desktop-dock-item:focus-visible,
.music-play-button:focus-visible,
.desktop-dock-clock:focus-visible,
.desktop-start-power:focus-visible {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.desktop-contact-item.is-active,
.desktop-note-item.is-active,
.desktop-folder-item.is-active,
.desktop-mail-item.is-active,
.desktop-trash-item.is-active,
.music-track.is-active,
.desktop-file-row.is-active {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 21, 31, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.desktop-contact-item,
.desktop-note-item,
.desktop-folder-item,
.desktop-trash-item {
  display: grid;
  gap: 4px;
}

.desktop-mail-item {
  display: grid;
  gap: 5px;
}

.desktop-mail-item small,
.desktop-contact-item span,
.desktop-note-item span,
.desktop-folder-item span,
.desktop-trash-item span,
.desktop-start-meta span,
.desktop-start-text span,
.desktop-recent-item span,
.desktop-start-section-title {
  color: var(--desktop-muted);
  font-size: 0.78rem;
}

.desktop-thread-list,
.music-tracks,
.desktop-calendar-cards,
.desktop-start-recent-list,
.desktop-settings-rows {
  display: grid;
  gap: 10px;
}

.desktop-thread-bubble {
  max-width: 78%;
  margin: 0;
  padding: 13px 15px;
  border-radius: 18px;
  line-height: 1.6;
}

.desktop-thread-bubble.is-incoming {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
}

.desktop-thread-bubble.is-outgoing {
  justify-self: end;
  background: linear-gradient(180deg, rgba(138, 73, 76, 0.92), rgba(93, 48, 49, 0.95));
}

.desktop-thread-footer,
.music-times,
.desktop-mail-meta,
.desktop-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.desktop-thread-footer {
  padding-top: 6px;
  color: var(--desktop-muted);
  font-size: 0.74rem;
}

.desktop-calendar-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.desktop-calendar-month-label,
.desktop-calendar-month-day {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 14px;
}

.desktop-calendar-month-label {
  color: var(--desktop-muted);
  font-size: 0.74rem;
}

.desktop-calendar-month-day {
  background: rgba(255, 255, 255, 0.03);
}

.desktop-calendar-month-day.is-marked {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(201, 139, 84, 0.36), rgba(115, 70, 42, 0.34)),
    rgba(255, 255, 255, 0.04);
}

.desktop-calendar-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
}

.desktop-calendar-card.is-accent {
  background:
    linear-gradient(180deg, rgba(205, 127, 82, 0.34), rgba(96, 52, 34, 0.28)),
    rgba(255, 255, 255, 0.03);
}

.desktop-calendar-daylabel {
  color: var(--desktop-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-calendar-card strong {
  font-size: 1rem;
  font-weight: 600;
}

.desktop-calendar-card p,
.desktop-preview-card p,
.desktop-mail-body p,
.desktop-note-sheet p,
.settings-summary p {
  margin: 0;
  color: rgba(230, 233, 239, 0.84);
  line-height: 1.65;
}

.desktop-note-sheet {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(17, 20, 27, 0.72);
}

.desktop-file-table,
.desktop-file-row {
  display: grid;
  gap: 10px;
}

.desktop-file-row {
  grid-template-columns: minmax(0, 1fr) 110px 120px;
  align-items: center;
}

.desktop-file-name {
  font-size: 0.9rem;
}

.desktop-file-meta {
  color: var(--desktop-muted);
  font-size: 0.76rem;
}

.desktop-empty-state {
  padding: 18px 0 8px;
  color: var(--desktop-muted);
  font-size: 0.84rem;
}

.desktop-preview-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
}

.music-player {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: stretch;
}

.music-art {
  min-height: 220px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 0 26%),
    radial-gradient(circle at 80% 18%, rgba(255, 164, 114, 0.22), transparent 0 20%),
    linear-gradient(145deg, rgba(171, 97, 76, 0.88), rgba(74, 43, 66, 0.92) 42%, rgba(24, 32, 55, 0.94));
}

.music-player-meta {
  display: grid;
  align-content: center;
  gap: 12px;
}

.music-player-meta strong {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.02;
}

.music-player-meta p {
  margin: 0;
  color: var(--desktop-muted);
}

.music-progress {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.music-progress-fill {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(248, 190, 122, 0.92), rgba(210, 120, 94, 0.94));
}

.music-times,
.desktop-mail-meta {
  color: var(--desktop-muted);
  font-size: 0.78rem;
}

.music-controls {
  display: grid;
  gap: 12px;
}

.music-play-button,
.desktop-start-power {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(15, 19, 26, 0.76);
}

.music-volume {
  display: grid;
  gap: 8px;
}

.music-volume span,
.music-volume strong {
  font-size: 0.82rem;
}

.music-volume input[type="range"] {
  width: 100%;
  accent-color: #d98c62;
}

.music-track strong {
  font-size: 0.94rem;
  font-weight: 500;
}

.desktop-mail-body {
  display: grid;
  gap: 12px;
}

.settings-summary,
.settings-details {
  align-content: start;
}

.desktop-settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.desktop-setting-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 236, 244, 0.88);
  font-size: 0.76rem;
}

.desktop-settings-rows {
  gap: 0;
}

.desktop-settings-row {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.desktop-settings-row span {
  color: var(--desktop-muted);
  font-size: 0.82rem;
}

.desktop-settings-row strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.desktop-start-menu {
  position: absolute;
  left: 18px;
  bottom: 94px;
  z-index: 5;
  width: min(360px, calc(100% - 36px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.desktop-start-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.desktop-start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.desktop-start-meta {
  display: grid;
  gap: 3px;
}

.desktop-start-meta strong {
  font-size: 1rem;
  font-weight: 600;
}

.desktop-start-search {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(218, 222, 231, 0.78);
  font-size: 0.82rem;
}

.desktop-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.desktop-start-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.desktop-start-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.desktop-start-text strong,
.desktop-recent-item strong {
  font-size: 0.88rem;
  font-weight: 600;
}

.desktop-start-recent {
  display: grid;
  gap: 10px;
}

.desktop-recent-item {
  display: grid;
  gap: 4px;
}

.desktop-dock {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(1080px, calc(100% - 120px));
  margin: 0 auto;
  padding: 8px 10px;
  border-radius: 20px;
}

.desktop-dock-left,
.desktop-dock-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desktop-dock-apps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.desktop-start-button,
.desktop-dock-item,
.desktop-dock-clock {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.desktop-start-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
}

.desktop-start-button strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.desktop-start-glyph {
  position: relative;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.92)) 0 0 / 6px 6px no-repeat,
    linear-gradient(rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.92)) 8px 0 / 6px 6px no-repeat,
    linear-gradient(rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.92)) 0 8px / 6px 6px no-repeat,
    linear-gradient(rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.92)) 8px 8px / 6px 6px no-repeat;
}

.desktop-dock-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
}

.desktop-dock-item::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
}

.desktop-dock-item.is-open::after {
  background: rgba(241, 241, 241, 0.88);
}

.desktop-dock-item.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 20, 28, 0.76);
}

.desktop-dock-item.is-minimized {
  opacity: 0.58;
}

.desktop-dock-clock {
  display: grid;
  gap: 1px;
  min-width: 106px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  text-align: left;
}

.desktop-dock-clock strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.desktop-dock-clock span {
  color: var(--desktop-muted);
  font-size: 0.68rem;
}

@media (max-width: 1180px) {
  .files-app,
  .music-app,
  .settings-app {
    grid-template-columns: 1fr;
  }

  .desktop-sidebar {
    display: none;
  }
}

@media (max-width: 960px) {
  .desktop-shell {
    min-height: min(92vh, 1100px);
  }

  .desktop-topbar {
    flex-wrap: wrap;
  }

  .desktop-topbar-section.is-left,
  .desktop-topbar-section.is-right {
    width: 100%;
  }

  .desktop-topbar-section.is-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .messages-app,
  .calendar-app,
  .notes-app,
  .mail-app,
  .trash-app {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .desktop-sidebar {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 18px;
  }

  .desktop-icon-grid {
    position: absolute;
    inset: 152px 16px 110px 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
    pointer-events: auto;
  }

  .desktop-icon {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
  }

  .desktop-start-menu {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 146px;
  }

  .desktop-dock {
    width: auto;
    grid-template-columns: 1fr;
  }

  .desktop-dock-left,
  .desktop-dock-right {
    justify-content: space-between;
  }

  .desktop-dock-apps {
    justify-content: flex-start;
  }

  .desktop-window {
    left: 50% !important;
    top: 50% !important;
    width: min(94%, 760px) !important;
    height: min(76%, 760px) !important;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 640px) {
  .desktop-shell {
    padding: 10px;
    border-radius: 20px;
  }

  .desktop-menu-strip,
  .desktop-session-meta span,
  .desktop-status-item span:not([data-desktop-live-datetime]) {
    display: none;
  }

  .desktop-start-grid {
    grid-template-columns: 1fr;
  }

  .desktop-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inset: 138px 12px 110px 12px;
  }

  .desktop-icon {
    padding-block: 10px 12px;
  }

  .music-player {
    grid-template-columns: 1fr;
  }

  .desktop-dock-clock {
    min-width: 0;
    width: 100%;
  }

  .desktop-dock {
    width: calc(100% - 12px);
  }
}

.diary-app {
  grid-template-columns: 1fr;
}

.diary-lock-app {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 0;
}

.diary-lock-header {
  display: grid;
  gap: 8px;
}

.diary-lock-header strong,
.diary-page-title {
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
}

.diary-lock-header p {
  margin: 0;
  color: rgba(229, 232, 238, 0.78);
  line-height: 1.6;
}

.diary-symbol-lock {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border-radius: 30px;
  border: 1px solid rgba(236, 222, 189, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 18%),
    radial-gradient(circle at top, rgba(255, 243, 214, 0.1), transparent 0 28%),
    linear-gradient(180deg, rgba(124, 97, 68, 0.14), rgba(42, 34, 27, 0.14)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.022) 0,
      rgba(255, 255, 255, 0.022) 2px,
      rgba(0, 0, 0, 0.018) 2px,
      rgba(0, 0, 0, 0.018) 8px
    ),
    linear-gradient(180deg, rgba(60, 48, 39, 0.96), rgba(24, 22, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 36px rgba(0, 0, 0, 0.28),
    0 24px 60px rgba(0, 0, 0, 0.3);
}

.diary-symbol-lock::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 244, 222, 0.06);
  pointer-events: none;
}

.diary-symbol-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.07), transparent 0 12%),
    radial-gradient(circle at 86% 82%, rgba(255, 221, 174, 0.05), transparent 0 14%);
  pointer-events: none;
}

.diary-symbol-lock.is-error {
  border-color: rgba(239, 132, 124, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(239, 132, 124, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.28);
  animation: diary-lock-shake 360ms ease;
}

.diary-symbol-lock.is-success {
  border-color: rgba(215, 205, 144, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(209, 192, 120, 0.08),
    0 0 28px rgba(209, 192, 120, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.28);
}

.diary-reel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.diary-reel.is-spinning .diary-reel-window {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 227, 177, 0.12),
    0 14px 28px rgba(0, 0, 0, 0.24);
}

.diary-reel-button {
  position: relative;
  width: 44px;
  min-height: 26px;
  padding: 0;
  border: 1px solid rgba(231, 219, 193, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 248, 233, 0.16), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(96, 72, 50, 0.96), rgba(48, 36, 28, 0.98));
  color: transparent;
  font-size: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.22);
}

.diary-reel-button::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-top: 2px solid rgba(245, 243, 238, 0.92);
  border-right: 2px solid rgba(245, 243, 238, 0.92);
  transform-origin: center;
}

.diary-reel-button.is-up::before {
  transform: translate(-50%, -30%) rotate(-45deg);
}

.diary-reel-button.is-down::before {
  transform: translate(-50%, -70%) rotate(135deg);
}

.diary-reel-button:hover,
.diary-reel-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 235, 197, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 248, 233, 0.22), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(111, 84, 58, 0.98), rgba(60, 44, 33, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(255, 235, 197, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.22);
  outline: none;
}

.diary-reel-button:disabled {
  opacity: 0.36;
  cursor: default;
  transform: none;
}

.diary-reel-window {
  position: relative;
  width: min(100%, 96px);
  min-height: 164px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(243, 222, 185, 0.13);
  background:
    radial-gradient(circle at 50% 50%, rgba(254, 251, 243, 0.98), rgba(243, 236, 221, 0.98) 43%, rgba(92, 73, 58, 0.94) 69%, rgba(24, 21, 20, 0.98) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.24));
  box-shadow:
    inset 0 18px 18px rgba(48, 34, 23, 0.3),
    inset 0 -18px 20px rgba(19, 15, 13, 0.62),
    inset 14px 0 18px rgba(56, 41, 28, 0.2),
    inset -14px 0 18px rgba(56, 41, 28, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.diary-reel-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 16%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.46), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.52));
  pointer-events: none;
}

.diary-reel-window::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 68px;
  border-radius: 18px;
  border: 1px solid rgba(123, 89, 59, 0.16);
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.18), rgba(255, 241, 219, 0.04));
  transform: translateY(-50%);
  pointer-events: none;
}

.diary-symbol-track {
  height: 100%;
  will-change: transform, opacity;
}

.diary-symbol-track,
.diary-symbol-track.is-spinning-up,
.diary-symbol-track.is-spinning-down {
  display: grid;
  grid-auto-rows: 100%;
}

.diary-symbol-track.is-spinning-up,
.diary-symbol-track.is-spinning-down {
  height: 100%;
}

.diary-symbol-track.is-spinning-down {
  animation: diary-reel-down 260ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.diary-symbol-track.is-spinning-up {
  animation: diary-reel-up 260ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.diary-symbol-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  height: 100%;
  padding: 14px 10px;
  text-align: center;
}

.diary-symbol-card::before {
  display: none;
}

.diary-symbol-index,
.diary-symbol-label {
  display: none;
}

.diary-symbol-index {
  color: rgba(213, 196, 152, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.diary-symbol-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 62px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.diary-symbol-image {
  max-width: 62px;
  max-height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(61, 41, 28, 0.12));
}

.diary-symbol-fallback {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(52, 41, 32, 0.18);
  border-radius: 999px;
  background: rgba(52, 41, 32, 0.08);
  font-size: 0;
  line-height: 1;
  color: transparent;
}

.diary-symbol-card.has-image .diary-symbol-fallback {
  display: none;
}

.diary-symbol-label {
  color: rgba(228, 231, 236, 0.84);
  font-size: 0.8rem;
  line-height: 1.35;
}

.diary-lock-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.diary-lock-feedback {
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(236, 222, 189, 0.08);
  background: rgba(255, 248, 233, 0.04);
  color: rgba(226, 230, 237, 0.78);
  line-height: 1.55;
}

.diary-lock-feedback.is-error {
  border-color: rgba(239, 132, 124, 0.22);
  background: rgba(239, 132, 124, 0.08);
  color: rgba(250, 222, 218, 0.96);
}

.diary-lock-feedback.is-success {
  border-color: rgba(208, 189, 118, 0.24);
  background: rgba(208, 189, 118, 0.08);
  color: rgba(248, 240, 208, 0.96);
}

.diary-page {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: clamp(22px, 4vw, 38px);
  border-radius: 24px;
  border: 1px solid rgba(208, 183, 138, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.97), rgba(240, 231, 214, 0.94)),
    linear-gradient(180deg, rgba(205, 187, 154, 0.12), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 24px 60px rgba(0, 0, 0, 0.18);
  color: rgba(48, 37, 28, 0.96);
}

.diary-page::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 32px,
      rgba(144, 119, 84, 0.14) 32px,
      rgba(144, 119, 84, 0.14) 33px
    );
  opacity: 0.38;
  pointer-events: none;
}

.diary-page-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.diary-doodle,
.diary-dot-sequence {
  position: absolute;
}

.diary-doodle {
  color: rgba(134, 99, 59, 0.46);
  opacity: 0.95;
}

.diary-doodle::before {
  display: block;
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  line-height: 1;
}

.diary-doodle.is-heart {
  top: 28px;
  right: 34px;
  transform: rotate(11deg);
}

.diary-doodle.is-heart::before {
  content: "♡";
  font-size: 1.7rem;
}

.diary-doodle.is-star {
  left: 34px;
  top: 86px;
  transform: rotate(-14deg);
}

.diary-doodle.is-star::before {
  content: "✦";
  font-size: 1.1rem;
}

.diary-doodle.is-loop {
  left: 28px;
  bottom: 120px;
  width: 68px;
  height: 28px;
  border: 2px solid rgba(134, 99, 59, 0.38);
  border-color: rgba(134, 99, 59, 0.38) transparent transparent transparent;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.diary-doodle.is-loop::before,
.diary-doodle.is-loop::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(134, 99, 59, 0.34);
  border-color: rgba(134, 99, 59, 0.34) transparent transparent transparent;
  border-radius: 50%;
}

.diary-doodle.is-loop::before {
  left: 12px;
  top: 8px;
  width: 42px;
  height: 20px;
}

.diary-doodle.is-loop::after {
  left: 24px;
  top: 14px;
  width: 20px;
  height: 10px;
}

.diary-doodle.is-compass {
  right: 34px;
  top: 120px;
  width: 28px;
  height: 28px;
  transform: rotate(8deg);
}

.diary-doodle.is-compass::before,
.diary-doodle.is-compass::after {
  content: "";
  position: absolute;
  inset: 0;
}

.diary-doodle.is-compass::before {
  border: 2px solid rgba(134, 99, 59, 0.42);
  border-radius: 50%;
}

.diary-doodle.is-compass::after {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-top: 2px solid rgba(134, 99, 59, 0.5);
  border-right: 2px solid rgba(134, 99, 59, 0.5);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.diary-doodle.is-ripple {
  right: 30px;
  bottom: 110px;
  width: 52px;
  height: 24px;
  transform: rotate(6deg);
}

.diary-doodle.is-ripple::before,
.diary-doodle.is-ripple::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  border-top: 2px solid rgba(134, 99, 59, 0.34);
  border-radius: 50%;
}

.diary-doodle.is-ripple::before {
  top: 2px;
}

.diary-doodle.is-ripple::after {
  top: 12px;
}

.diary-dot-sequence {
  right: 24px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.diary-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(122, 96, 70, 0.14);
  background: rgba(252, 251, 246, 0.96);
  box-shadow: 0 2px 7px rgba(86, 62, 41, 0.12);
}

.diary-dot.is-warm {
  background: rgba(234, 202, 99, 0.98);
  box-shadow: 0 2px 9px rgba(170, 130, 42, 0.18);
}

.diary-page-title,
.diary-page-date,
.diary-page-text,
.diary-signature,
.diary-page-status {
  position: relative;
  z-index: 1;
}

.diary-page-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(171, 144, 78, 0.24);
  background: rgba(171, 144, 78, 0.08);
  color: rgba(113, 86, 49, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diary-page-date {
  margin: 0;
  color: rgba(103, 76, 52, 0.82);
  font-size: 0.96rem;
  font-weight: 600;
}

.diary-page-text {
  display: grid;
  gap: 12px;
  max-width: 62ch;
}

.diary-page-text p {
  margin: 0;
  line-height: 1.85;
}

.diary-signature {
  margin: 8px 0 0;
  font-family: "Cormorant Garamond", "Iowan Old Style", serif;
  font-size: 1.2rem;
  font-weight: 600;
}

@keyframes diary-reel-down {
  from {
    opacity: 0.42;
    transform: translate3d(0, -16px, 0) scale(0.985);
  }

  62% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes diary-reel-up {
  from {
    opacity: 0.42;
    transform: translate3d(0, 16px, 0) scale(0.985);
  }

  62% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes diary-lock-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-7px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(3px);
  }
}

@media (max-width: 1100px) {
  .diary-symbol-lock {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
  }
}

@media (max-width: 820px) {
  .diary-symbol-lock {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diary-reel-window {
    width: min(100%, 112px);
    min-height: 208px;
  }
}

@media (max-width: 580px) {
  .diary-symbol-lock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diary-lock-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .diary-doodle.is-heart {
    right: 24px;
  }

  .diary-doodle.is-loop {
    left: 22px;
    bottom: 102px;
    transform: rotate(-10deg) scale(0.9);
  }

  .diary-doodle.is-compass {
    right: 22px;
    top: 128px;
    transform: scale(0.9);
  }

  .diary-doodle.is-ripple {
    right: 22px;
    bottom: 96px;
    transform: scale(0.9);
  }

  .diary-dot-sequence {
    right: 18px;
    bottom: 18px;
    gap: 6px;
  }

  .diary-dot {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diary-symbol-track.is-spinning-up,
  .diary-symbol-track.is-spinning-down,
  .diary-symbol-lock.is-error {
    animation: none;
  }
}

/* Laptop UI clarity pass */
.modal-window.is-laptop-modal.is-zoomlike {
  width: min(calc(100vw - 18px), 1520px);
  height: calc(100vh - clamp(128px, 15vh, 152px));
  max-height: calc(100vh - clamp(128px, 15vh, 152px));
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(15, 13, 17, 0.72), rgba(6, 6, 8, 0.92));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  overflow: hidden;
}

.modal-window.is-laptop-modal .modal-body {
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.desktop-shell {
  --desktop-border: rgba(219, 229, 245, 0.1);
  --desktop-border-strong: rgba(232, 238, 250, 0.2);
  --desktop-panel: rgba(10, 13, 20, 0.66);
  --desktop-panel-strong: rgba(17, 21, 31, 0.82);
  --desktop-text: rgba(246, 243, 238, 0.97);
  --desktop-muted: rgba(205, 213, 226, 0.66);
  --desktop-warm: rgba(226, 179, 119, 0.88);
  --desktop-focus: rgba(226, 179, 119, 0.34);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1420px);
  height: 100%;
  min-height: 0;
  gap: 10px;
  padding: 14px;
  border-radius: 30px;
  border: 1px solid rgba(208, 221, 244, 0.16);
  background:
    linear-gradient(180deg, rgba(22, 24, 32, 0.98), rgba(8, 9, 13, 0.99));
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 10px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  box-sizing: border-box;
}

.desktop-shell::before {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 16%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.09), transparent 0 34%),
    radial-gradient(circle at center, transparent 0 58%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: normal;
  z-index: 1;
}

.desktop-shell::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  border-radius: 24px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 62px rgba(0, 0, 0, 0.42);
}

.desktop-topbar,
.desktop-workspace,
.desktop-dock,
.desktop-start-menu {
  position: relative;
  z-index: 2;
}

.desktop-workspace {
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  border-color: rgba(214, 225, 244, 0.13);
  background: #070a10;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 76px rgba(0, 0, 0, 0.36),
    0 20px 60px rgba(0, 0, 0, 0.26);
}

.desktop-wallpaper {
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(187, 128, 91, 0.22), transparent 0 21%),
    linear-gradient(145deg, #101522, #070a10 56%, #05070b);
}

.desktop-wallpaper-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.62;
  pointer-events: none;
}

.desktop-wallpaper-image,
.desktop-wallpaper-media .managed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05) brightness(0.72);
}

.desktop-wallpaper::before {
  inset: 0;
  filter: none;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 16, 0.2), rgba(8, 10, 16, 0.72)),
    radial-gradient(circle at 18% 18%, rgba(238, 180, 118, 0.18), transparent 0 24%),
    radial-gradient(circle at 76% 28%, rgba(111, 136, 181, 0.14), transparent 0 26%);
}

.desktop-wallpaper::after {
  opacity: 0.14;
  pointer-events: none;
}

.desktop-wallpaper-caption,
.desktop-sidebar-card,
.desktop-topbar,
.desktop-dock,
.desktop-start-menu,
.desktop-window,
.desktop-pane,
.desktop-preview-card {
  border-color: rgba(220, 230, 248, 0.105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(9, 12, 18, 0.64);
  backdrop-filter: blur(18px) saturate(1.12);
}

.desktop-topbar {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 18px;
}

.desktop-menu-item {
  color: rgba(213, 220, 232, 0.7);
}

.desktop-session-meta strong,
.desktop-wallpaper-caption strong {
  color: rgba(250, 245, 238, 0.98);
}

.desktop-status-item,
.desktop-exit-button {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.035);
}

.desktop-exit-button:hover,
.desktop-exit-button:focus-visible {
  border-color: rgba(226, 179, 119, 0.32);
  background: rgba(226, 179, 119, 0.11);
}

.desktop-icon-grid {
  inset: 22px 24px 24px 24px;
  z-index: 5;
}

.desktop-icon {
  width: 74px;
  min-height: 74px;
  gap: 0;
  padding: 9px;
  border-radius: 18px;
  color: rgba(242, 240, 236, 0.94);
}

.desktop-icon:hover,
.desktop-icon:focus-visible,
.desktop-icon.is-selected {
  transform: translateY(-2px);
  border-color: rgba(226, 179, 119, 0.22);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.desktop-icon.is-active {
  border-color: rgba(226, 179, 119, 0.34);
  background:
    linear-gradient(180deg, rgba(226, 179, 119, 0.14), rgba(255, 255, 255, 0.05));
}

.desktop-icon::after {
  bottom: 7px;
}

.desktop-icon.is-active::after,
.desktop-dock-item.is-open::after {
  background: var(--desktop-warm);
  box-shadow: 0 0 10px rgba(226, 179, 119, 0.5);
}

.desktop-icon-mark {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.desktop-window-appmark,
.desktop-start-mark,
.desktop-dock-mark {
  border-radius: 13px;
}

.desktop-app-image-icon {
  display: block;
  width: 66%;
  height: 66%;
  object-fit: contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.36));
  opacity: 0.94;
  pointer-events: none;
}

.desktop-app-symbol {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  color: rgba(250, 246, 238, 0.94);
  pointer-events: none;
}

.desktop-app-symbol::before,
.desktop-app-symbol::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.desktop-app-symbol.is-messages::before {
  inset: 5px 3px 7px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.desktop-app-symbol.is-messages::after {
  left: 9px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-38deg);
}

.desktop-app-symbol.is-calendar::before {
  inset: 4px 4px 3px;
  border: 2px solid currentColor;
  border-radius: 7px;
  background:
    linear-gradient(currentColor, currentColor) 0 8px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 8px 15px / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 17px 15px / 4px 4px no-repeat;
}

.desktop-app-symbol.is-calendar::after {
  top: 1px;
  left: 9px;
  width: 12px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.desktop-app-symbol.is-notes::before,
.desktop-app-symbol.is-diary::before {
  inset: 3px 6px 3px 5px;
  border: 2px solid currentColor;
  border-radius: 5px;
  background:
    linear-gradient(currentColor, currentColor) 6px 8px / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 14px / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 6px 20px / 13px 2px no-repeat;
}

.desktop-app-symbol.is-diary::after {
  top: 4px;
  bottom: 4px;
  left: 10px;
  width: 2px;
  background: currentColor;
  opacity: 0.55;
}

.desktop-app-symbol.is-files::before {
  left: 3px;
  right: 3px;
  bottom: 5px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.desktop-app-symbol.is-files::after {
  top: 4px;
  left: 5px;
  width: 13px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.desktop-app-symbol.is-music::before {
  top: 4px;
  left: 14px;
  width: 9px;
  height: 17px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.desktop-app-symbol.is-music::after {
  left: 5px;
  bottom: 4px;
  width: 11px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 9px -2px 0 -3px currentColor;
}

.desktop-app-symbol.is-mail::before {
  inset: 6px 3px 6px;
  border: 2px solid currentColor;
  border-radius: 5px;
  background:
    linear-gradient(35deg, transparent 46%, currentColor 48% 52%, transparent 54%) center / 100% 100%,
    linear-gradient(-35deg, transparent 46%, currentColor 48% 52%, transparent 54%) center / 100% 100%;
}

.desktop-app-symbol.is-settings::before {
  inset: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -8px 0 -5px currentColor,
    0 8px 0 -5px currentColor,
    8px 0 0 -5px currentColor,
    -8px 0 0 -5px currentColor;
}

.desktop-app-symbol.is-settings::after {
  inset: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.desktop-app-symbol.is-trash::before {
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 18px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background:
    linear-gradient(currentColor, currentColor) 5px 4px / 2px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 4px / 2px 10px no-repeat;
}

.desktop-app-symbol.is-trash::after {
  top: 4px;
  left: 7px;
  width: 16px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-radius: 5px;
}

.desktop-app-symbol.is-default::before {
  inset: 5px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.desktop-icon-meta {
  display: none !important;
}

.desktop-dock {
  width: min(1110px, calc(100% - 96px));
  z-index: 8;
  flex-shrink: 0;
  padding: 9px 12px;
  border-radius: 22px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.desktop-topbar {
  z-index: 8;
  flex-shrink: 0;
}

.desktop-window-layer {
  z-index: 6;
}

.desktop-start-menu {
  z-index: 10;
}

.desktop-dock,
.desktop-topbar,
.desktop-icon,
.desktop-window,
.desktop-window * {
  pointer-events: auto;
}

.desktop-dock button,
.desktop-topbar button {
  pointer-events: auto;
}

.desktop-dock-apps {
  gap: 9px;
}

.desktop-start-button,
.desktop-dock-item,
.desktop-dock-clock {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(11, 14, 20, 0.62);
}

.desktop-start-button:hover,
.desktop-start-button.is-active,
.desktop-dock-item:hover,
.desktop-dock-item:focus-visible,
.desktop-dock-clock:hover,
.desktop-dock-clock:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(226, 179, 119, 0.28);
  background: rgba(226, 179, 119, 0.1);
}

.desktop-dock-item {
  width: 48px;
  height: 48px;
}

.desktop-dock-item.is-active {
  border-color: rgba(226, 179, 119, 0.42);
  background:
    radial-gradient(circle at top, rgba(226, 179, 119, 0.2), transparent 0 62%),
    rgba(255, 255, 255, 0.065);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.desktop-dock-item.is-minimized {
  opacity: 0.55;
  filter: saturate(0.65);
}

.desktop-start-menu {
  bottom: 96px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.desktop-window {
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(22, 27, 38, 0.92), rgba(10, 13, 20, 0.94));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.desktop-window.is-active {
  border-color: rgba(226, 179, 119, 0.28);
  box-shadow:
    0 36px 94px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(226, 179, 119, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.desktop-window-head {
  min-height: 56px;
  padding: 11px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
}

.desktop-window-title strong {
  color: rgba(250, 246, 240, 0.96);
}

.desktop-window-control {
  position: relative;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.desktop-window-control:hover,
.desktop-window-control:focus-visible {
  transform: scale(1.12);
}

.desktop-window-body {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 20%),
    rgba(7, 10, 15, 0.3);
}

.desktop-pane {
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(8, 11, 17, 0.52);
}

.desktop-pane-head {
  padding-bottom: 4px;
}

.desktop-contact-item,
.desktop-note-item,
.desktop-folder-item,
.desktop-mail-item,
.desktop-trash-item,
.music-track,
.desktop-file-row,
.desktop-start-item,
.desktop-recent-item {
  border-color: rgba(229, 236, 249, 0.075);
  background: rgba(255, 255, 255, 0.032);
}

.desktop-contact-item:hover,
.desktop-note-item:hover,
.desktop-folder-item:hover,
.desktop-mail-item:hover,
.desktop-trash-item:hover,
.music-track:hover,
.desktop-file-row:hover,
.desktop-start-item:hover,
.desktop-recent-item:hover,
.desktop-contact-item:focus-visible,
.desktop-note-item:focus-visible,
.desktop-folder-item:focus-visible,
.desktop-mail-item:focus-visible,
.desktop-trash-item:focus-visible,
.music-track:focus-visible,
.desktop-file-row:focus-visible,
.desktop-start-item:focus-visible,
.desktop-recent-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(226, 179, 119, 0.24);
  background: rgba(226, 179, 119, 0.08);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.desktop-contact-item.is-active,
.desktop-note-item.is-active,
.desktop-folder-item.is-active,
.desktop-mail-item.is-active,
.desktop-trash-item.is-active,
.music-track.is-active,
.desktop-file-row.is-active {
  border-color: rgba(226, 179, 119, 0.3);
  background:
    linear-gradient(180deg, rgba(226, 179, 119, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(12, 16, 24, 0.66);
}

.messages-app {
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
}

.desktop-thread-view,
.messages-thread {
  align-content: stretch;
}

.desktop-thread-list {
  align-content: end;
  min-height: 0;
  padding: 4px;
  overflow: auto;
}

.desktop-thread-bubble {
  border-radius: 20px;
}

.desktop-thread-bubble.is-incoming {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.065);
}

.desktop-thread-bubble.is-outgoing {
  background:
    linear-gradient(180deg, rgba(170, 88, 91, 0.86), rgba(105, 53, 58, 0.94));
}

.desktop-note-sheet,
.desktop-preview-card,
.desktop-mail-body,
.desktop-lock-card {
  border-color: rgba(229, 236, 249, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02)),
    rgba(11, 15, 22, 0.64);
}

.music-player {
  gap: 18px;
}

.music-art {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.25);
}

.music-play-button {
  border-color: rgba(226, 179, 119, 0.24);
}

.desktop-file-row {
  grid-template-columns: minmax(0, 1fr) minmax(86px, 0.3fr) minmax(100px, 0.32fr);
}

@media (max-width: 1180px) {
  .desktop-dock {
    width: calc(100% - 28px);
  }
}

@media (max-width: 960px) {
  .modal-window.is-laptop-modal.is-zoomlike {
    margin-top: 104px;
    height: calc(100vh - 116px);
    max-height: calc(100vh - 116px);
  }

  .desktop-window-body {
    padding: 14px;
  }
}

@media (max-width: 820px) {
  .desktop-icon-grid {
    inset: 150px 14px 118px 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: auto;
  }

  .desktop-icon {
    width: auto;
    min-height: 96px;
  }

  .desktop-window {
    width: min(96%, 780px) !important;
    height: min(78%, 780px) !important;
  }

  .desktop-dock {
    width: calc(100% - 16px);
    padding: 8px;
  }
}

@media (max-width: 640px) {
  .modal-window.is-laptop-modal.is-zoomlike {
    margin-top: 96px;
    height: calc(100vh - 104px);
    max-height: calc(100vh - 104px);
  }

  .desktop-shell {
    padding: 10px;
    border-radius: 22px;
  }

  .desktop-topbar {
    gap: 8px;
  }

  .desktop-topbar-section {
    gap: 8px;
  }

  .desktop-icon-grid {
    inset: 132px 10px 126px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-icon {
    min-height: 88px;
  }

  .desktop-dock-apps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .desktop-dock-item {
    width: 100%;
  }

  .desktop-window {
    top: 52% !important;
    width: min(98%, 640px) !important;
    height: min(82%, 720px) !important;
  }

  .desktop-file-row {
    grid-template-columns: 1fr;
  }
}

/* Laptop desktop visibility/interaction fix */
.modal-window.is-laptop-modal.is-zoomlike {
  margin-top: 0;
  height: calc(100vh - var(--topbar-safe-offset, 0px) - 18px) !important;
  max-height: calc(100vh - var(--topbar-safe-offset, 0px) - 18px) !important;
}

/* Laptop desktop visibility/interaction fix */
.modal-window.is-laptop-modal.is-zoomlike {
  overflow: hidden !important;
}

.modal-window.is-laptop-modal .modal-body {
  display: block;
  height: 100%;
  overflow: hidden !important;
  padding: 0 !important;
}

.modal-window.is-laptop-modal .desktop-shell {
  display: flex !important;
  flex-direction: column !important;
  align-content: normal !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.modal-window.is-laptop-modal .desktop-topbar {
  position: relative !important;
  flex: 0 0 auto !important;
  z-index: 20 !important;
  display: flex !important;
  margin: 0 !important;
  transform: none !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-window.is-laptop-modal .desktop-workspace {
  position: relative !important;
  flex: 1 1 auto !important;
  z-index: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.modal-window.is-laptop-modal .desktop-wallpaper {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.modal-window.is-laptop-modal .desktop-wallpaper-caption {
  z-index: 2 !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-window.is-laptop-modal .desktop-sidebar {
  z-index: 4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-window.is-laptop-modal .desktop-icon-grid {
  position: absolute !important;
  inset: 22px 24px 24px 24px !important;
  z-index: 6 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-window.is-laptop-modal .desktop-icon {
  position: absolute !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-window.is-laptop-modal .desktop-window-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.modal-window.is-laptop-modal .desktop-window {
  pointer-events: auto !important;
}

.modal-window.is-laptop-modal .desktop-start-menu {
  position: absolute !important;
  left: 18px !important;
  bottom: 92px !important;
  grid-row: auto !important;
  z-index: 30 !important;
}

.modal-window.is-laptop-modal .desktop-dock {
  position: relative !important;
  flex: 0 0 auto !important;
  z-index: 20 !important;
  display: grid !important;
  margin: 0 auto !important;
  transform: none !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-window.is-laptop-modal .desktop-dock button,
.modal-window.is-laptop-modal .desktop-start-button,
.modal-window.is-laptop-modal .desktop-exit-button {
  pointer-events: auto !important;
}

/* Laptop window control polish */
.modal-window.is-laptop-modal .desktop-window-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.modal-window.is-laptop-modal .desktop-window-control {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 50% !important;
  color: rgba(16, 18, 22, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 1px 3px rgba(0, 0, 0, 0.28) !important;
  transform: none !important;
  overflow: hidden !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-minimize {
  background: linear-gradient(180deg, #f8d071, #d79a2d) !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-maximize {
  background: linear-gradient(180deg, #87d184, #4d9b57) !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-close {
  background: linear-gradient(180deg, #f07b78, #cf4f52) !important;
}

.modal-window.is-laptop-modal .desktop-window-control span,
.modal-window.is-laptop-modal .desktop-window-control::before,
.modal-window.is-laptop-modal .desktop-window-control::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-minimize span {
  display: block !important;
  width: 8px !important;
  height: 2px !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-maximize span {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: transparent !important;
  border: 2px solid currentColor !important;
  border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-close span {
  display: none !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-close::before,
.modal-window.is-laptop-modal .desktop-window-control.is-close::after {
  content: "" !important;
  width: 9px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: currentColor !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.modal-window.is-laptop-modal .desktop-window-control.is-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.modal-window.is-laptop-modal .desktop-window-control:hover,
.modal-window.is-laptop-modal .desktop-window-control:focus-visible {
  filter: brightness(1.08) saturate(1.08);
  outline: 2px solid rgba(255, 255, 255, 0.22) !important;
  outline-offset: 2px !important;
}

.modal-window.is-laptop-modal .desktop-start-recent {
  display: none !important;
}

.modal-window.is-laptop-modal .desktop-icon {
  background: rgba(255, 255, 255, 0.012) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.modal-window.is-laptop-modal .desktop-icon:hover,
.modal-window.is-laptop-modal .desktop-icon:focus-visible,
.modal-window.is-laptop-modal .desktop-icon.is-selected,
.modal-window.is-laptop-modal .desktop-icon.is-active {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.modal-window.is-laptop-modal .desktop-icon-mark {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 0 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.22)),
    var(--app-accent) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 7px 14px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
}

.modal-window.is-laptop-modal .desktop-icon-mark::before,
.modal-window.is-laptop-modal .desktop-icon-mark::after {
  display: none !important;
}

.modal-window.is-laptop-modal .desktop-icon .desktop-app-image-icon {
  width: 78% !important;
  height: 78% !important;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.34)) !important;
}