/* Windows 7 Aero desktop, the way the real machine is themed (Se7enAero). */

:root {
  --ui: "Segoe UI", Selawik, "Noto Sans", "Open Sans", "DejaVu Sans", sans-serif;
  --mono: Hack, "JetBrains Mono", "Noto Sans Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --text: #1b1b1b;
  --muted: #5b6b7f;
  --heading: #1e3287;
  --name: #1e395b;
  --rule: #c9d5e4;
  --select: #dcebfc;
  --select-edge: #7da2ce;
  --focus: #3399ff;

  --gentoo: url("data:image/png;base64,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");
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 0.9375rem/1.55 var(--ui);
  background-color: #0b3d82;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(140, 230, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 38% 24% at 20% 66%, rgba(110, 220, 120, 0.4), transparent 72%),
    radial-gradient(ellipse 34% 22% at 80% 60%, rgba(255, 175, 70, 0.42), transparent 72%),
    radial-gradient(ellipse 30% 20% at 52% 50%, rgba(235, 90, 170, 0.32), transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(90, 170, 255, 0.35), transparent 70%),
    linear-gradient(170deg, #06306a 0%, #0f5cb1 45%, #0b4a96 70%, #062a5c 100%);
  background-attachment: fixed;
}

/* The bright light streak across the wallpaper */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 3.5% at 50% 55%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(ellipse 62% 9% at 50% 57%, rgba(170, 230, 255, 0.35), transparent 70%);
  transform: rotate(-9deg);
}

::selection { background: #3399ff; color: #fff; }

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.noscript { color: #fff; }

/* ---- Layout -------------------------------------------------------------- */

.desktop {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.75rem;
  align-items: start;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem) clamp(0.6rem, 3vw, 2rem) 5.5rem;
}
.stack { display: grid; gap: 1.75rem; min-width: 0; }
.gadgets {
  position: sticky;
  top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 75rem) {
  .stack.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .stack.is-wide > #w-profile { grid-column: 1 / -1; }
  .stack.is-wide .details { columns: 1; }
}

/* Big monitors: every window gets its own column (up to three) */
@media (min-width: 100rem) {
  .desktop { max-width: 120rem; }
  .stack.is-multi { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); align-items: start; }
  .stack.is-multi > #w-profile { grid-column: auto; }
  .stack.is-multi .details { columns: 1; }
  .stack.is-multi .profile { grid-template-columns: minmax(0, 1fr); }
  .stack.is-four { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .stack.is-four > #w-profile { grid-area: 1 / 1 / 3 / 2; }
  .stack.is-four > #w-about { grid-area: 1 / 2; }
  .stack.is-four > #w-player { grid-area: 2 / 2; }
  .stack.is-four > #w-setup { grid-area: 1 / 3 / 3 / 4; }
}

@media (max-width: 60rem) {
  .desktop { grid-template-columns: minmax(0, 1fr); }
  .stack { display: contents; }
  #w-profile { order: 1; }
  .gadgets { order: 2; position: static; }
  .stack > .win:not(#w-profile) { order: 3; }
}

/* ---- Aero windows ------------------------------------------------------- */

.win[hidden] { display: none; }
.win {
  position: relative;
  min-width: 0;
  padding: 0 7px 7px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.16) 30px, rgba(255, 255, 255, 0.06) 31px, rgba(255, 255, 255, 0.18) 100%),
    rgba(110, 160, 215, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 12px 32px rgba(0, 10, 40, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.win.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.2) 30px, rgba(255, 255, 255, 0.08) 31px, rgba(255, 255, 255, 0.2) 100%),
    rgba(70, 135, 210, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 16px 40px rgba(0, 10, 40, 0.6);
}

.win-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  height: 30px;
}
.win-title {
  overflow: hidden;
  padding: 6px 0 0 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
  font-size: 0.8125rem;
  text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 3px #fff;
}
.win:not(.is-active) .win-title { color: #2b2b2b; }

.win-ctl { display: flex; flex: none; margin-top: -1px; }
.win-ctl button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 19px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-top: 0;
  border-left-width: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) 45%, rgba(0, 0, 0, 0.06) 50%, rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.win-ctl button:first-child { border-left-width: 1px; border-bottom-left-radius: 5px; }
.win-ctl button:last-child { width: 46px; border-bottom-right-radius: 5px; }
.win-ctl .close { background: linear-gradient(#eaa595, #d9664f 45%, #c1391f 50%, #d77355); }
.win-ctl button:hover { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 235, 255, 0.6) 45%, rgba(80, 170, 255, 0.35) 50%, rgba(170, 230, 255, 0.7)); }
.win-ctl .close:hover { background: linear-gradient(#f7b9a8, #ef7a5f 45%, #e0391a 50%, #f08b6d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 90, 50, 0.7); }
.win-ctl svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }

.win-body {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.win.is-min .win-body { display: none; }

.win.is-max {
  position: fixed;
  inset: 0 0 40px 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 0;
}
.win.is-max .win-body { flex: 1; }

.heading {
  margin: 0 0 1.1rem;
  color: var(--heading);
  font: 400 1.375rem/1.3 var(--ui);
}
.heading--small { margin-bottom: 0.7rem; font-size: 1.0625rem; }

/* ---- Profile window ----------------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem 2rem;
  align-items: center;
  background: linear-gradient(#fff, #eef4fb);
}

/* Win7 user picture frame */
.tile {
  position: relative;
  width: clamp(6.5rem, 18vw, 10rem);
  aspect-ratio: 1;
  border: 1px solid #8a9bb0;
  border-radius: 10px;
  background: linear-gradient(#fdfdfd, #cfd8e3);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0, 0, 0, 0.25);
}
.tile-fallback, .tile img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 5px;
}
.tile-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3b8fd6, #1a5aa6);
  color: #fff;
  font: 300 clamp(2.4rem, 6vw, 3.4rem)/1 var(--ui);
}
.tile img { display: block; object-fit: cover; object-position: 50% 35%; }
.tile img[hidden] { display: none; }
.tile::after {
  content: "";
  position: absolute;
  inset: 6px 6px 52% 6px;
  z-index: 2;
  border-radius: 5px 5px 40% 40% / 5px 5px 18% 18%;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.who h1 {
  margin: 0;
  color: var(--name);
  font: 300 clamp(2rem, 5.5vw, 3.1rem)/1.1 var(--ui);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.ids { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0; }
.handle, .pronouns {
  padding: 0.05rem 0.55rem 0.1rem;
  border: 1px solid var(--select-edge);
  border-radius: 3px;
  background: linear-gradient(#f2f7fd, var(--select));
  color: var(--name);
  font-size: 0.875rem;
  font-weight: 600;
}
.pronouns { border-color: #c2c9d3; background: #f5f6f8; color: var(--muted); font-weight: 400; }
.tagline { margin: 0.75rem 0 0; color: #3c4b5e; font-size: 1.0625rem; }
.motto {
  margin: 1rem 0 0;
  padding: 0.45rem 0.85rem 0.5rem;
  border-left: 3px solid #3c7fb1;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #eaf3fc, rgba(234, 243, 252, 0));
  color: var(--name);
  font-style: italic;
}
.motto p { margin: 0; }

@media (max-width: 26rem) {
  .profile { grid-template-columns: 1fr; }
}

/* ---- About window ------------------------------------------------------- */

.details {
  columns: 2 16rem;
  column-gap: 2.5rem;
}
.details .block { break-inside: avoid; margin-bottom: 1.75rem; }
.details .block:last-child { margin-bottom: 0; }
.bio p { margin: 0 0 0.85em; }
.bio p:last-child { margin-bottom: 0; }

.rows { margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.15rem 0; }
.row .label { flex: none; color: var(--muted); }
.row .leader {
  flex: 1;
  min-width: 1.25rem;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-0.28em);
}
.row .value { text-align: right; font-weight: 600; }
.row .value small { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 0.05rem 0.6rem 0.1rem;
  border: 1px solid var(--select-edge);
  border-radius: 3px;
  background: linear-gradient(#f2f7fd, var(--select));
  font-size: 0.875rem;
}

/* ---- Battlestation window: Win7 "System" control panel style ----------- */

.sys-group + .sys-group { margin-top: 1.6rem; }
.sys-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: var(--heading);
  font: 400 1.0625rem/1.3 var(--ui);
}
.sys-head::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}
.sys-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
}
.sys-logo {
  width: 5.5rem;
  height: 5.5rem;
  background: var(--gentoo) center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(40, 30, 90, 0.3));
}
.sys-list {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.45rem 1rem;
  margin: 0;
  padding-left: 0.9rem;
}
.sys-list dt { color: var(--muted); }
.sys-list dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.sys-list dd small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }

/* Narrow window (side by side, or a phone): labels above values */
.win-body.sys { container-type: inline-size; }
@container (max-width: 36rem) {
  .sys-logo { display: none; }
  .sys-split { grid-template-columns: minmax(0, 1fr); }
  .sys-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; }
  .sys-list dt { margin-top: 0.55rem; font-size: 0.8125rem; }
  .sys-list dt:first-child { margin-top: 0; }
}

/* ---- Gadgets ------------------------------------------------------------- */

.gadget[hidden] { display: none; }
.gadget {
  position: relative;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.06) 52%, rgba(255, 255, 255, 0.1)),
    rgba(12, 28, 55, 0.62);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gadget p { margin: 0; }

/* Discord gadget */
.dg-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem !important;
  font-size: 0.75rem;
  opacity: 0.8;
}
.dg-label svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.dg-head { display: flex; align-items: center; gap: 0.8rem; }
.dg-avatar { position: relative; flex: none; width: 3.75rem; height: 3.75rem; }
.dg-avatar img, .dg-avatar .dg-blank {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(135deg, #3b8fd6, #1a5aa6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.dg-dot {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 1.05rem;
  height: 1.05rem;
  border: 3px solid #13284a;
  border-radius: 50%;
  background: #80848e;
}
.s-online { background: #23a55a !important; }
.s-idle { background: #f0b232 !important; }
.s-dnd { background: #f23f43 !important; }
.dg-names { min-width: 0; }
.dg-name { font-size: 1rem; font-weight: 600; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-sub { font-size: 0.8125rem; opacity: 0.82; line-height: 1.4; }

/* Win7 tooltip-style balloon for the custom status */
.dg-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem !important;
  padding: 0.45rem 0.65rem;
  border: 1px solid #767676;
  border-radius: 4px;
  background: linear-gradient(#fff, #e4e5f0);
  color: #2b2b2b;
  font-size: 0.875rem;
  line-height: 1.35;
  text-shadow: none;
}
.dg-bubble::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid #767676;
  border-top: 1px solid #767676;
  background: #fff;
  transform: rotate(45deg);
}
.dg-emoji { flex: none; width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center; }

.dg-act {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-art {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.4rem;
  font-weight: 300;
}
.dg-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dg-art svg { width: 55%; height: 55%; fill: #fff; }
.dg-text { min-width: 0; }
.dg-text p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-kind { font-size: 0.75rem; opacity: 0.75; }
.dg-title { font-size: 0.9375rem; font-weight: 600; }
.dg-title a { color: #fff; }
.dg-progress { margin-top: 0.45rem; }

/* Win7 progress bar */
.dg-bar {
  height: 9px;
  overflow: hidden;
  border: 1px solid #5a6f86;
  border-radius: 3px;
  background: linear-gradient(#f3f3f3, #d6d6d6);
}
.dg-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(#c5f7b4, #57d335 45%, #26ab0b 50%, #63db44);
}
.dg-times { display: flex; justify-content: space-between; margin-top: 0.15rem; font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* Win7 push button */
.btn7 {
  display: block;
  margin-top: 1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #707070;
  border-radius: 3px;
  background: linear-gradient(#f2f2f2, #ebebeb 45%, #dddddd 50%, #cfcfcf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  color: #000;
  text-align: center;
  text-shadow: none;
  font-size: 0.875rem;
}
.btn7:hover {
  text-decoration: none;
  border-color: #3c7fb1;
  background: linear-gradient(#eaf6fd, #d9f0fc 45%, #bee6fd 50%, #a7d9f5);
}

/* ---- Taskbar ------------------------------------------------------------- */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0 0 3.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.16) 50%),
    rgba(16, 30, 50, 0.8);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

/* Start orb with the Gentoo logo */
.orb {
  position: absolute;
  left: 0.35rem;
  bottom: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  background:
    var(--gentoo) 52% 50% / 62% no-repeat,
    radial-gradient(circle at 50% 115%, #77e4ff 0, #2386dc 42%, #0c3e88 76%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 8px rgba(80, 180, 255, 0.5);
  cursor: pointer;
}
.orb::before {
  content: "";
  position: absolute;
  inset: 2px 5px 52% 5px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
}
.orb:hover, .orb[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 16px rgba(120, 220, 255, 0.95);
}

.tasks {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 3px;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 0.25rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.tasks::-webkit-scrollbar { display: none; }
.task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 36px;
  min-width: 50px;
  padding: 0 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}
.task:hover {
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.45);
  background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 12px rgba(140, 200, 255, 0.5);
}
.task svg { width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.task svg.stroke { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.task--window { min-width: 8rem; justify-content: flex-start; }

.tray {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
}
.tray-status[hidden] { display: none; }
.tray-status {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #80848e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.tray-clock { white-space: nowrap; }
.tray-clock span { display: block; }

@media (max-width: 30rem) {
  .tray-clock span + span { display: none; }
  .peek { width: 10px; }
  .task { min-width: 42px; padding: 0 0.55rem; }
}

/* ---- Start menu ------------------------------------------------------------ */

.start[hidden] { display: none; }
.start {
  position: fixed;
  left: 0.35rem;
  bottom: 42px;
  z-index: 45;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem;
  width: min(25rem, calc(100vw - 0.7rem));
  padding: 7px;
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07)),
    rgba(18, 40, 75, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 10px 30px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
@media (prefers-reduced-motion: no-preference) {
  .start:not([hidden]) { animation: start-open 0.16s ease-out; }
}
@keyframes start-open {
  from { opacity: 0; transform: translateY(8px); }
}
.start-left {
  min-height: 15rem;
  padding: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background: #fff;
}
.start-list, .start-links { margin: 0; padding: 0; list-style: none; }
.start-list button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.start-list button:hover, .start-list button:focus-visible {
  outline: none;
  border-color: var(--select-edge);
  background: linear-gradient(#f2f7fd, var(--select));
}
.start-list svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #1e5aa8; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.start-list small { display: block; color: var(--muted); font-size: 0.75rem; }

.start-right { display: flex; flex-direction: column; padding: 0 0.15rem 0.25rem 0.55rem; color: #fff; }
.start-tile {
  width: 56px;
  height: 56px;
  margin: -34px auto 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: linear-gradient(135deg, #3b8fd6, #1a5aa6) center / cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.start-name { margin: 0 0 0.6rem; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.start-links a, .start-links button {
  display: block;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.start-links a:hover, .start-links button:hover {
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
}

/* ==========================================================================
   Aero, turned up
   ========================================================================== */

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

/* The wallpaper is an SVG behind everything */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body::before { content: none; }

/* Glass frames: stronger blur, colour tint and the diagonal reflections */
.win {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.18) 30px, rgba(255, 255, 255, 0.05) 31px, rgba(255, 255, 255, 0.16) 100%),
    rgba(95, 150, 215, 0.38);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.08);
  backdrop-filter: blur(14px) saturate(170%) brightness(1.08);
}
.win.is-active {
  z-index: 5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.22) 30px, rgba(255, 255, 255, 0.07) 31px, rgba(255, 255, 255, 0.2) 100%),
    rgba(60, 130, 215, 0.5);
}
.win::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 0 14%,
      rgba(255, 255, 255, 0.22) 14% 17%,
      transparent 17% 31%,
      rgba(255, 255, 255, 0.14) 31% 37%,
      transparent 37% 62%,
      rgba(255, 255, 255, 0.16) 62% 64%,
      transparent 64% 78%,
      rgba(255, 255, 255, 0.1) 78% 85%,
      transparent 85%);
}

/* The soft white glow behind window titles */
.win-title { position: relative; z-index: 0; overflow: visible; }
.win-title::before {
  content: "";
  position: absolute;
  inset: 3px -16px -3px -12px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.win-bar { overflow: hidden; }
.win-title { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }

/* Caption buttons glow on hover, like the real ones */
.win-ctl button { transition: box-shadow 0.2s, background 0.2s; }
.win-ctl .min:hover, .win-ctl .max:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 9px rgba(110, 200, 255, 0.95); }

/* Windows can be dragged by their title bar on wide screens */
@media (min-width: 60.01rem) {
  .win-bar { cursor: default; touch-action: none; }
  .win.is-dragging { transition: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 24px 50px rgba(0, 10, 40, 0.65); }
}

/* Windows pop in when the page opens, like Win7 opening a window */
@media (prefers-reduced-motion: no-preference) {
  .boot .win, .boot .gadget:not([hidden]) {
    animation: win-open 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .win-ctl button { transition: box-shadow 0.2s, background 0.2s; }
}
@keyframes win-open {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
}

/* Taskbar buttons: the glow that follows the pointer */
.task { position: relative; overflow: hidden; }
.task::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) 110%, rgba(130, 210, 255, 0.85), rgba(130, 210, 255, 0) 70%);
  transition: opacity 0.15s;
}
.task:hover::before { opacity: 1; }
.task > * { position: relative; }
.task--window {
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
}

.orb { transition: box-shadow 0.2s; }
.orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 230, 255, 0.55), rgba(150, 230, 255, 0));
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.orb:hover::after, .orb[aria-expanded="true"]::after { opacity: 1; }

/* Aero Peek: the "Show desktop" strip at the end of the taskbar */
.peek {
  flex: none;
  width: 15px;
  height: 100%;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22));
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.peek:hover, .peek[aria-pressed="true"] { background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.5)); }

.peeking .win, .peeking .gadget {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.peeking .win > *, .peeking .win::before, .peeking .gadget > * { opacity: 0; }
.win > *, .gadget > * { transition: opacity 0.2s; }

.desktop-shown .desktop { visibility: hidden; }

/* Start menu: search box, Shut down, empty state */
.start-left { display: flex; flex-direction: column; }
.start-list { flex: 1; }
.start-empty { margin: 0.6rem; color: var(--muted); font-size: 0.875rem; }
.start-empty[hidden] { display: none; }
.start-search { display: block; margin-top: 0.4rem; padding-top: 0.45rem; border-top: 1px solid #d6e0ec; }
.start-search input {
  width: 100%;
  padding: 0.3rem 0.55rem;
  border: 1px solid #a3b6cc;
  border-radius: 3px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 0.8125rem;
  font-style: italic;
}
.start-search input:not(:placeholder-shown) { font-style: normal; }
.start-search input:focus { outline: none; border-color: #3c7fb1; box-shadow: 0 0 0 1px rgba(60, 127, 177, 0.3); }
.start-links { flex: 1; }
.shutdown {
  align-self: flex-end;
  margin-top: 0.6rem;
  padding: 0.25rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  background: linear-gradient(#e4a08e, #c85b42 48%, #ad3a20 52%, #c8664c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.shutdown:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 10px rgba(255, 120, 80, 0.8); }

/* The Win7 "Shutting down..." screen */
.shutdown-screen[hidden] { display: none; }
.shutdown-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  background: radial-gradient(ellipse at 50% 55%, #1d6fc4, #0a3a7c 55%, #041d45);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.shutdown-screen p { margin: 0; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin 0.9s linear infinite; }
  .shutdown-screen:not([hidden]) { animation: fade-in 0.4s ease-out; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }

/* Gadgets get the same glass reflections */
.gadget { overflow: hidden; isolation: isolate; }
.gadget::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 0 22%, rgba(255, 255, 255, 0.12) 22% 30%, transparent 30% 68%, rgba(255, 255, 255, 0.08) 68% 72%, transparent 72%);
}

.win.is-max { translate: none !important; }

/* ---- Resizable windows --------------------------------------------------- */

.win-grip { display: none; }
@media (min-width: 60.01rem) {
  .win-grip { position: absolute; z-index: 6; display: block; touch-action: none; }
  .win-grip--e { top: 30px; right: -4px; bottom: 14px; width: 9px; cursor: ew-resize; }
  .win-grip--s { left: 14px; right: 14px; bottom: -4px; height: 9px; cursor: ns-resize; }
  .win-grip--se {
    right: 1px;
    bottom: 1px;
    width: 15px;
    height: 15px;
    cursor: nwse-resize;
    /* the dotted Win7 size grip */
    background:
      radial-gradient(circle, rgba(60, 70, 85, 0.75) 1px, transparent 1.5px) 100% 100% / 4px 4px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  .win.is-max .win-grip, .win.is-min .win-grip { display: none; }
}
.win.is-sized { display: flex; flex-direction: column; justify-self: start; max-width: none; }
.win.is-sized .win-body { flex: 1; min-height: 0; overflow: auto; }
.win.is-resizing { user-select: none; }
.win.is-max { width: auto !important; height: auto !important; }
.win.is-min { height: auto !important; }

/* ---- Windows Media Player 12 ------------------------------------------------ */
.win-body.wmp {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
}
.wmp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 38%);
  flex: 1;
  min-height: 15rem;
}
/* Now Playing: the cover with its reflection on black */
.wmp-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.25rem 1rem 0.75rem;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, #1d3550, #0a1220 60%, #000);
  color: #fff;
  text-align: center;
}
.wmp-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #3b8fd6, #12407e);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  -webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.28));
}
.wmp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wmp-art svg { width: 45%; height: 45%; fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.4; stroke-linejoin: round; }
.wmp-info { width: 100%; min-width: 0; margin-top: 1.75rem; }
.wmp-info p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wmp-title { font-size: 1rem; font-weight: 600; text-shadow: 0 1px 3px #000; }
.wmp-sub { color: #a9bfd6; font-size: 0.8125rem; }
.wmp-sub:empty { display: none; }
/* The "Play" list pane */
.wmp-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 22rem;
  border-left: 1px solid #000;
  background: linear-gradient(#fff, #f3f7fb);
}
.wmp-list-head {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #d5dfea;
  background: linear-gradient(#fdfeff, #e6eef7);
  color: var(--heading);
  font: 400 0.875rem/1.3 var(--ui);
}
.wmp-list-head span { color: var(--muted); }
.wmp-songs { flex: 1; margin: 0; padding: 0.25rem; overflow-y: auto; list-style: none; }
.wmp-song {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #000;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.wmp-song:hover { border-color: #b8d6fb; background: linear-gradient(#fafbfd, #ebf3fd); }
.wmp-song.is-current { border-color: var(--select-edge); background: linear-gradient(#f2f7fd, var(--select)); }
.wmp-song.is-current .wmp-song-title { color: #1e5aa8; font-weight: 600; }
.wmp-song-text { flex: 1; min-width: 0; }
.wmp-song-text > * { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wmp-song small { color: var(--muted); font-size: 0.75rem; }
.wmp-len { flex: none; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.wmp-empty { margin: 0; padding: 0.75rem; color: var(--muted); font-size: 0.8125rem; }
.wmp-empty[hidden] { display: none; }
/* The glossy black control bar */
.wmp-bar {
  padding: 0.35rem 0.75rem 0.45rem;
  border-top: 1px solid #5a6a7c;
  background: linear-gradient(#4c5a6a, #27323f 48%, #0d151e 52%, #18222d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
}
.wmp-ctl {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem;
  align-items: center;
  margin-top: 0.3rem;
}
.wmp-time { margin: 0; color: #cfe0f2; font-size: 0.75rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; }
.wmp-buttons { display: flex; align-items: center; justify-content: center; gap: 0.15rem; }
.wmp-sep { width: 1px; height: 1.4rem; margin: 0 0.35rem; background: rgba(255, 255, 255, 0.15); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.6); }
.wmp-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.wmp-btn svg { width: 16px; height: 16px; fill: #e4edf7; filter: drop-shadow(0 1px 1px #000); }
.wmp-btn svg.stroke { fill: none; stroke: #e4edf7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wmp-btn:hover { border-color: rgba(255, 255, 255, 0.3); background: radial-gradient(circle at 50% 100%, rgba(120, 200, 255, 0.55), rgba(255, 255, 255, 0.05) 75%); }
.wmp-btn[aria-pressed="true"] { border-color: rgba(120, 200, 255, 0.55); background: linear-gradient(rgba(80, 160, 230, 0.55), rgba(20, 70, 130, 0.55)); }
/* Previous / Play / Next as one joined pill, the big round Play in the middle */
.wmp-cluster {
  display: flex;
  align-items: center;
  margin: 0 0.35rem;
  padding: 0 2px;
  border: 1px solid #000;
  border-radius: 999px;
  background: linear-gradient(#6a7786, #333e4b 48%, #10171f 52%, #2a3542);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wmp-skip { width: 34px; height: 24px; border-radius: 999px; }
.wmp-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -2px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, #7fe0ff 0, #2b8be0 40%, #0d3e86 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 4px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.wmp-play::before {
  content: "";
  position: absolute;
  inset: 2px 5px 50% 5px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
  pointer-events: none;
}
.wmp-play svg { position: relative; width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
.wmp-play:hover, .wmp-play.is-playing { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 12px rgba(110, 210, 255, 0.95); }
/* Seek and volume sliders */
.wmp-seek, .wmp-vol {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.wmp-seek { width: 100%; }
.wmp-vol { width: 4.5rem; margin-left: 0.25rem; --p: 80%; }
.wmp-seek:disabled { cursor: default; }
.wmp-seek::-webkit-slider-runnable-track, .wmp-vol::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  background: linear-gradient(#7fd3ff, #1e7fd6) 0 0 / var(--p) 100% no-repeat, linear-gradient(#1a222b, #3a4552);
}
.wmp-seek::-moz-range-track, .wmp-vol::-moz-range-track {
  height: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  background: linear-gradient(#1a222b, #3a4552);
}
.wmp-seek::-moz-range-progress, .wmp-vol::-moz-range-progress { height: 5px; border-radius: 3px; background: linear-gradient(#7fd3ff, #1e7fd6); }
.wmp-seek::-webkit-slider-thumb, .wmp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border: 1px solid #0c2a4f;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #a9dcff 55%, #3d8fd8);
}
.wmp-seek::-moz-range-thumb, .wmp-vol::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid #0c2a4f;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #a9dcff 55%, #3d8fd8);
}
.wmp-seek:disabled::-webkit-slider-thumb { visibility: hidden; }
.wmp-seek:disabled::-moz-range-thumb { visibility: hidden; }
.win.is-max .wmp-list, .win.is-sized .wmp-list { max-height: none; }
.win.is-sized .win-body.wmp { overflow: hidden; }
/* Narrow window or phone: playlist under the cover, smaller controls */
@container (max-width: 32rem) {
  .wmp-main { grid-template-columns: minmax(0, 1fr); }
  .wmp-list { max-height: 14rem; border-left: 0; border-top: 1px solid #000; }
  .wmp-art { width: 6.5rem; }
  .wmp-ctl { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.2rem; }
  .wmp-time { order: 1; }
  .wmp-ctl > span:empty { display: none; }
  .wmp-vol { width: 3.5rem; }
  .wmp-sep { display: none; }
}

/* ---- "Click to enter" welcome screen ---------------------------------------- */
.splash[hidden] { display: none; }
.splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(ellipse at 50% 45%, #2a86d8, #0d4a96 45%, #062a5c 80%, #041d45);
}
.splash.is-leaving { opacity: 0; pointer-events: none; transition: opacity 0.45s ease-out; }
.splash-on { overflow: hidden; }
.splash-on .desktop, .splash-on .taskbar { visibility: hidden; }
.splash-enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 0;
  background:
    radial-gradient(ellipse 60% 6% at 50% 82%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 80% 14% at 50% 84%, rgba(140, 220, 255, 0.25), transparent 70%);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.splash-enter:focus-visible { outline: none; }
/* The big glassy Win7 logon picture frame */
.splash-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7.5rem, 22vw, 11.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  background: linear-gradient(135deg, #3b8fd6, #1a5aa6) center / cover;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.25), 0 0 0 8px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.55);
  font: 300 3.2rem/1 var(--ui);
  transition: box-shadow 0.2s;
}
.splash-tile::after {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  border-radius: 12px 12px 40% 40% / 12px 12px 18% 18%;
  background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.03));
}
.splash-enter:hover .splash-tile, .splash-enter:focus-visible .splash-tile {
  box-shadow: 0 0 0 7px rgba(170, 225, 255, 0.45), 0 0 0 8px rgba(0, 0, 0, 0.35), 0 0 28px rgba(120, 210, 255, 0.85);
}
.splash-name { margin-top: 0.6rem; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 300; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.splash-hint {
  padding: 0.3rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.08) 52%, rgba(255, 255, 255, 0.14));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  font-size: 0.9375rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .splash-hint { animation: splash-pulse 2.4s ease-in-out infinite; }
}
@keyframes splash-pulse { 50% { opacity: 0.6; } }