@layer components {
  /* Clear dark glass: light frost preserves the small code shapes behind it. */
  .site-header {
    background: rgb(7 12 19 / 72%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    box-shadow: 0 1px 0 rgb(200 232 255 / 4%);
  }
  .console,
  .service-card,
  .project-card,
  .contact-panel,
  .section-console {
    --muted: #b6c8da;
    --faint: #a1b8cc;
    -webkit-backdrop-filter: blur(3px) saturate(150%) brightness(115%);
    backdrop-filter: blur(3px) saturate(150%) brightness(115%);
    border-color: rgb(216 241 255 / 30%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 42%),
      inset 1px 0 0 rgb(236 249 255 / 13%),
      inset 0 -1px 0 rgb(171 216 243 / 12%),
      0 0 0 1px rgb(0 0 0 / 20%),
      0 20px 50px rgb(0 0 0 / 20%);
  }
  .console {
    background: linear-gradient(
      125deg,
      rgb(228 245 255 / 10%),
      rgb(135 192 231 / 3%) 55%,
      rgb(198 229 250 / 6%)
    );
    border-radius: 18px;
    overflow: hidden;
  }
  .console::before,
  .console::after {
    display: none;
  }
  .console-bar {
    background: rgb(200 232 255 / 5%);
  }
  .service-card {
    background: linear-gradient(
      140deg,
      rgb(245 251 255 / 12%),
      rgb(162 211 243 / 3.5%) 48%,
      rgb(225 244 255 / 6%)
    );
    border-radius: 22px;
  }
  .service-card:hover,
  .service-card:focus-within {
    background: linear-gradient(
      140deg,
      rgb(245 251 255 / 17%),
      rgb(162 211 243 / 5%) 48%,
      rgb(225 244 255 / 9%)
    );
    border-color: rgb(223 246 255 / 55%);
  }
  .work-section {
    background: rgb(8 17 28 / 12%);
  }
  .project-card {
    background: linear-gradient(
      145deg,
      rgb(238 250 255 / 11%),
      rgb(173 221 250 / 3.5%) 65%,
      rgb(225 244 255 / 6%)
    );
    border-radius: 22px;
    overflow: hidden;
  }
  .contact-panel {
    background: linear-gradient(
      115deg,
      rgb(232 247 255 / 15%),
      rgb(170 219 250 / 4%) 60%,
      rgb(225 244 255 / 7%)
    );
    border-radius: 26px;
  }
  .contact-grid {
    opacity: 0.15;
  }
  .ticker {
    background: rgb(15 31 47 / 50%);
  }
  .process-grid li {
    border-top-color: rgb(136 192 228 / 40%);
  }

  /* Decorative transition consoles reserve their space; headings remain untouched. */
  .entry-anchor {
    min-width: 0;
  }
  .tile-entry-anchor {
    display: grid;
  }
  .console-entry-anchor {
    margin: -9px 0 28px;
  }
  .section-console {
    position: relative;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
    background: linear-gradient(
      120deg,
      rgb(231 247 255 / 10%),
      rgb(169 218 249 / 3%) 55%,
      rgb(225 244 255 / 5%)
    );
    font-family: var(--mono);
  }
  .section-console-bar {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 17px;
    background: rgb(59 93 121 / 13%);
    border-bottom: 1px solid rgb(143 199 232 / 15%);
    color: var(--cyan);
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: 1px;
  }
  .console-mode {
    color: var(--faint);
  }
  .decoder-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 195px;
    align-items: center;
    gap: 25px;
    padding: 12px 17px 7px;
  }
  .decode-data {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    height: 33px;
    color: #70c5e3;
    font: 9px/1.8 var(--mono);
    letter-spacing: 1.3px;
    white-space: pre;
    mask-image: linear-gradient(90deg, #000 65%, transparent);
  }
  .decoder-route {
    font: 8px/1.9 var(--mono);
    letter-spacing: 1px;
    color: #a6c6d9;
    white-space: pre-line;
    border-left: 1px solid rgb(143 199 232 / 25%);
    padding-left: 18px;
  }
  .console-result {
    padding: 0 17px 12px;
    font: 8px/1.7 var(--mono);
    letter-spacing: 0.4px;
    color: var(--muted);
  }
  .terminal-body {
    padding: 12px 17px 7px;
  }
  .terminal-write-row {
    display: flex;
    gap: 11px;
    min-height: 20px;
    font: 10px/2 var(--mono);
    color: #b9d5e8;
    overflow-wrap: anywhere;
  }
  .terminal-prompt {
    color: var(--cyan);
  }
  .terminal-write {
    color: #d2e9f4;
  }
  .section-console-terminal .console-result {
    color: #8aaabe;
  }
  .service-card[data-entry="assembling"]::before,
  .project-card[data-entry="assembling"]::before {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    inset: 0 auto 0 0;
    width: 35%;
    background: linear-gradient(
      90deg,
      transparent,
      rgb(81 205 240 / 8%),
      transparent
    );
    animation: assemble-scan 1.15s ease-out both;
  }
  .project-card {
    position: relative;
  }
  @keyframes assemble-scan {
    from {
      transform: translateX(-110%);
    }
    to {
      transform: translateX(390%);
    }
  }
  @media (max-width: 650px) {
    .console-entry-anchor {
      margin: -4px 0 22px;
    }
    .section-console-bar {
      padding-inline: 13px;
      font-size: 7px;
      letter-spacing: 0.7px;
    }
    .console-mode {
      display: none;
    }
    .decoder-body {
      grid-template-columns: minmax(0, 1fr);
      padding-inline: 13px;
      gap: 6px;
    }
    .decoder-route {
      display: none;
    }
    .console-result {
      padding-inline: 13px;
      font-size: 7px;
    }
    .terminal-body {
      padding-inline: 13px;
    }
    .terminal-write-row {
      font-size: 8px;
      min-height: 18px;
    }
  }

  /* Keep the solid-surface fallback readable when blur is unavailable or unwanted. */
  @supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
  ) {
    .site-header,
    .console,
    .service-card,
    .project-card,
    .contact-panel,
    .section-console {
      background: rgb(10 22 36 / 94%);
    }
  }
  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .site-header,
    .console,
    .service-card,
    .project-card,
    .contact-panel,
    .section-console {
      background: var(--panel);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}