/* =========================
   RITUALOS AERO — DESIGN BIBLE IMPLEMENTATION
   See DESIGN.md for the language this implements.

   Phase 0: tokens + reusable materials, proven on one hero demo
   (#window-contact). Everything here is additive — nothing outside the
   demo scope at the bottom of this file changes any existing element.
   ========================= */

:root {
  /* ---- glass: vivid, not pastel. Pulled from the SATURATED corners of the
     palette (tuna-pink, xp-blue-mid, gold, start-green) rather than the
     intentionally-pale candy-pink/window-body family — that's what makes
     this read as "loud aero" instead of "misty XP". Tints mix toward
     TRANSPARENT (preserves hue) rather than toward white (bleaches it out
     to milky), and saturation is boosted hard in backdrop-filter too. ---- */
  --aero-glass-shadow: color-mix(in srgb, var(--xp-blue-dark) 60%, transparent);

  /* true aqua — the material's namesake. Cyan-teal blend of the existing
     blue and green, not a new hue: this is what Aqua glass looked like on
     the actual hardware this whole language is quoting. */
  --aero-aqua:       color-mix(in srgb, var(--xp-blue-mid) 55%, var(--start-green-light) 45%);
  --aero-aqua-light: color-mix(in srgb, white 30%, var(--aero-aqua));

  /* colourful rim-glow — the "neon" edge, layered outside the shadow */
  --aero-glow-blue:  color-mix(in srgb, var(--xp-blue-mid) 80%, transparent);
  --aero-glow-gold:  color-mix(in srgb, var(--gold-mid) 75%, transparent);
  --aero-glow-aqua:  color-mix(in srgb, var(--aero-aqua) 80%, transparent);
  --aero-glow-green: color-mix(in srgb, var(--start-green-light) 75%, transparent);

  /* ---- aurora / sky (derived blends, not new hues) — pushed to full saturation ---- */
  --aero-aurora-mint:   color-mix(in srgb, var(--xp-blue-mid) 45%, var(--start-green-light) 55%);
  --aero-aurora-violet: color-mix(in srgb, var(--tuna-pink-dark) 45%, var(--xp-blue-mid) 55%);
  --aero-aurora-gold:   var(--gold-mid);

  /* ---- blur scale ---- */
  --aero-blur-sm: 8px;
  --aero-blur-md: 18px;
  --aero-blur-lg: 28px;

  /* ---- motion language: everything eases like it has water in it ---- */
  --aero-ease-buoyant: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aero-ease-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --aero-duration-fast:   180ms;
  --aero-duration-medium: 320ms;
  --aero-duration-slow:   620ms;
}

/* Phase-0 scaffolding (aero-glass/gel-button/titanium/dew/sky/aurora/
   grass utility classes, a 2.5D device-shell tilt, and generic
   open/hover/ripple motion classes) was never adopted by any actual
   element — every device that shipped got its own specific treatment
   instead (gtpaint-*/jukebox-*/videoplayer-*/aero-demo/etc.) — so it was
   removed as dead weight. aeroBuoyantOpen is kept: .window.aero-demo.
   window-opening (below) actually uses it. */
@keyframes aeroBuoyantOpen {
  0% { opacity: 0; transform: scale(0.82) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   AERO-DEMO WINDOW FAMILY — started as a #window-contact-only hero
   demo in Phase 0, now the shared chrome for every "glass content
   window": Contact, Exhibitions, Freelance, About Me, Press, Internet,
   the PDF viewer. Birdsweeper/Tuna/Video/Music are deliberately NOT
   part of this family yet (each gets its own device treatment, same as
   GT Paint/Bird Art already have). Content stays dark-on-light for
   legibility; the glass is decoration, not a contrast risk.

   Selectors below are `.window.aero-demo`, not ID-scoped — any window
   with the aero-demo class gets this chrome automatically. -->
   ========================================================= */

/* Xbox-Blades-style: ONE continuous, mostly-see-through glowing panel —
   not an XP title-bar-plus-body split. The title bar and content area
   below are both `background: transparent` and simply sit inside this
   single glass surface, so there's no seam. A glowing gradient border
   wraps the whole thing (not just a shadow underneath it), and the
   desktop is genuinely visible through the glass, not just tinted. */
.window.aero-demo {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--xp-blue-light) 24%, transparent) 0%,
    color-mix(in srgb, var(--aero-aqua) 22%, transparent) 45%,
    color-mix(in srgb, var(--start-green-light) 20%, transparent) 100%
  );
  backdrop-filter: blur(var(--aero-blur-lg)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--aero-blur-lg)) saturate(200%);
  border: 1.5px solid color-mix(in srgb, white 30%, var(--aero-aqua));
  border-radius: 20px;
  /* explicit colours here rather than a shared elevation variable —
     nested var() overrides inside a shared custom property don't reliably
     re-resolve per-element in this engine, so this demo writes its glow
     directly. The last entry is a crisp-edged halo ring (small blur, positive
     spread) traced right at the window's own silhouette — distinct from
     the soft ambient glows above it, which are all wide diffuse blurs
     with no spread and don't read as a deliberate line on their own. */
  box-shadow:
    0 20px 48px var(--aero-glass-shadow),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 50px var(--aero-glow-aqua),
    0 0 30px var(--aero-glow-blue),
    0 0 18px var(--aero-glow-green),
    0 0 10px 2px color-mix(in srgb, transparent 35%, var(--xp-blue-light));
  /* NOT setting position here — the base .window rule already provides
     position:absolute, which is load-bearing for both centerWindow()'s
     left/top math and the drag handler's viewport-to-CSS-coordinate
     conversion. Real bug, caught via live testing: this rule used to
     say `position: relative`, which (being higher specificity than
     .window alone) silently overrode that absolute positioning —
     turning every aero-demo window into a normal-flow box that stacks
     underneath the previous one instead of floating freely, and
     breaking the drag offset math along with it (that math assumes
     left/top are viewport-relative page coordinates, which is only
     true under position:absolute). position:absolute still gives its
     own ::before/::after pseudo-elements a valid containing block, so
     nothing else needed to change. */
  overflow: hidden;
}

/* soft diagonal light sweep across the whole glass, Xbox-blade style */
.window.aero-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.15) 100%);
  pointer-events: none;
  z-index: 0;
}

.window.aero-demo .title-bar {
  background: transparent;
  color: white;
  text-shadow: 0 0 14px color-mix(in srgb, var(--aero-aqua) 65%, white), 0 1px 3px rgba(0,0,0,0.4);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px 20px 0 0;
  min-height: 44px;
  padding: 8px 22px;
  position: relative;
  z-index: 1;
}

.window.aero-demo .title-bar button {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--danger-red-light) 85%, white) 0%, var(--danger-red-dark) 60%, color-mix(in srgb, var(--danger-red-dark) 80%, black) 100%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 2px 8px color-mix(in srgb, var(--danger-red-dark) 60%, transparent);
  position: relative;
  z-index: 1;
}

.window.aero-demo .title-bar button::before {
  content: "";
  position: absolute;
  inset: 10% 16% auto 16%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  pointer-events: none;
}

/* .pdf-list is Exhibitions/Freelance's own content container (no
   separate .window-content wrapper) — same treatment either way */
.window.aero-demo .window-content,
.window.aero-demo .pdf-list {
  background: transparent;
  border: none;
  border-radius: 0 0 20px 20px;
  padding: 18px;
  color: var(--text-navy);
  position: relative;
  z-index: 1;
}

/* =========================================================
   CONTENT BUBBLE — Stage 1 of the gel-content pass. EACH line gets its
   own separate pill, built from the exact same recipe as the start
   orb (#start-button.aero-orb): a three-stop gradient for real volume,
   a bright inset rim along the top, a darker inset shadow along the
   bottom, an outer drop shadow for lift, and a glossy highlight bulge
   riding on top. Reusable — any window's list can adopt this class once
   this look is confirmed on Contact — see DESIGN.md.

   Kept lighter than the start orb's saturated green (which can afford
   full saturation because it only ever holds a two-word white label)
   since this carries real body copy — the same shadow/highlight
   *structure*, just built on a paler blue so --text-navy stays legible
   (verified below, not eyeballed). ========================================================= */

.aero-content-bubble {
  position: relative;
  z-index: 1;
  display: block;
  margin: 10px 2px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.97) 0%,
    color-mix(in srgb, white 62%, var(--xp-blue-light)) 55%,
    color-mix(in srgb, white 35%, var(--xp-blue-light)) 100%
  );
  border: 1.5px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 -4px 8px color-mix(in srgb, var(--xp-blue-mid) 30%, transparent),
    inset 0 3px 0 rgba(255,255,255,0.85),
    0 6px 16px color-mix(in srgb, var(--aero-aqua) 35%, transparent);
  overflow: hidden;
  font-weight: 600;
  transition: transform var(--aero-duration-fast) var(--aero-ease-buoyant), box-shadow var(--aero-duration-fast) var(--aero-ease-soft);
}

/* the glossy bulge — identical recipe to the start orb's own ::before */
.aero-content-bubble::before {
  content: "";
  position: absolute;
  inset: 8% 14% auto 14%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  pointer-events: none;
}

.aero-content-bubble:hover {
  transform: translateY(-2px) scale(1.015);
}

/* link colour/underline only — the LIFT on hover comes from whichever
   bubble/card the link lives inside (its :hover already handles motion,
   and letting both rules transform the same element fights over which
   one wins instead of combining) */
/* deliberately no display/padding/border-radius here — those box-model
   properties belong to whichever bubble the link is (or is inside),
   and this rule's higher specificity (three classes + a type selector)
   would otherwise clobber .aero-content-bubble's own values whenever
   the SAME element carries both classes (every PDF/Press/Internet
   list item is exactly that: <a class="aero-content-bubble">) */
.window.aero-demo .window-content a,
.window.aero-demo .pdf-list a {
  color: var(--text-navy);
  font-weight: bold;
  text-decoration: none;
  transition: color var(--aero-duration-fast) ease;
}

.window.aero-demo .window-content a:hover,
.window.aero-demo .pdf-list a:hover {
  color: color-mix(in srgb, var(--text-navy) 70%, var(--xp-blue-mid));
  text-decoration: underline;
}

.window.aero-demo.window-opening {
  animation: aeroBuoyantOpen var(--aero-duration-medium) var(--aero-ease-buoyant);
}

@media (prefers-reduced-motion: reduce) {
  .window.aero-demo.window-opening {
    animation: none !important;
  }
  .aero-content-bubble:hover,
  .aero-content-card:hover {
    transform: none !important;
  }
}

/* =========================================================
   CONTENT CARD — the .aero-content-bubble pill works for single-line
   rows (an email address, a PDF filename) but looks wrong wrapped
   around multi-line body copy (the fully-rounded pill ends clip
   awkwardly once text wraps to a second line). Same gel material
   recipe, block shape instead of a capsule — used for About Me's
   biography paragraphs. ========================================================= */

.aero-content-card {
  position: relative;
  z-index: 1;
  display: block;
  margin: 12px 2px;
  padding: 14px 18px;
  border-radius: 22px;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.97) 0%,
    color-mix(in srgb, white 68%, var(--xp-blue-light)) 55%,
    color-mix(in srgb, white 45%, var(--xp-blue-light)) 100%
  );
  border: 1.5px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 -6px 12px color-mix(in srgb, var(--xp-blue-mid) 22%, transparent),
    inset 0 3px 0 rgba(255,255,255,0.85),
    0 8px 20px color-mix(in srgb, var(--aero-aqua) 28%, transparent);
  overflow: hidden;
  line-height: 1.55;
  transition: transform var(--aero-duration-fast) var(--aero-ease-buoyant), box-shadow var(--aero-duration-fast) var(--aero-ease-soft);
}

/* the glossy bulge, stretched to an ellipse wide enough for a paragraph
   block rather than the pill's tighter capsule highlight */
.aero-content-card::before {
  content: "";
  position: absolute;
  inset: 4% 6% auto 6%;
  height: 26%;
  border-radius: 999px / 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.aero-content-card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .aero-content-card {
    transition: none !important;
  }
}

/* =========================================================
   ABOUT BIO — a single continuous glass panel instead of one
   .aero-content-card pill per paragraph. Long-form biographical copy
   reads worse chopped into separate bubble/card chunks; this keeps the
   same gel-material language (soft gradient, glossy top highlight,
   aqua-tinted shadow) as one page-like surface, so the paragraphs can
   just be paragraphs — plain text, generous line-height, no per-block
   framing. ========================================================= */

.about-bio {
  position: relative;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.96) 0%,
    color-mix(in srgb, white 68%, var(--xp-blue-light)) 55%,
    color-mix(in srgb, white 48%, var(--xp-blue-light)) 100%
  );
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 22px;
  padding: 26px 30px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    0 8px 22px color-mix(in srgb, var(--aero-aqua) 25%, transparent);
  color: var(--text-navy);
}

/* the same glossy top highlight .aero-content-card uses, just sized for
   one large panel instead of a single-line pill */
.about-bio::before {
  content: "";
  position: absolute;
  inset: 3% 6% auto 6%;
  height: 10%;
  border-radius: 999px / 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.about-bio p {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  line-height: 1.7;
  font-size: 14.5px;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

.about-bio em {
  font-style: italic;
}

/* =========================================================
   PHASE 1 — THE WORLD
   Sky environment, aqua-glass dock, gel Start orb, dimensional
   icons, upgraded boot screen. See DESIGN.md.
   ========================================================= */

/* ---------------------------------------------------------
   SKY — composited over #bg-video (z-index 0), below #desktop
   (z-index 2). Follows the visitor's local time via aero.js,
   which toggles body.aero-time-{dawn,day,golden,night}.
   Performance: no backdrop-filter anywhere in this layer — only
   gradients, one blurred aurora div, and transform-animated
   clouds/bubbles, all GPU-cheap.
   --------------------------------------------------------- */

#aero-sky {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.aero-sky-tint {
  position: absolute;
  inset: 0;
  transition: background 4s ease;
}

body.aero-time-day .aero-sky-tint {
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue-light) 12%, transparent) 0%, transparent 60%);
}

body.aero-time-dawn .aero-sky-tint {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-mid) 22%, transparent) 0%, color-mix(in srgb, var(--xp-blue-light) 20%, transparent) 55%, transparent 100%);
}

body.aero-time-golden .aero-sky-tint {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-mid) 35%, transparent) 0%, color-mix(in srgb, var(--tuna-pink-dark) 16%, transparent) 45%, transparent 100%);
}

body.aero-time-night .aero-sky-tint {
  /* hue only here — actual darkening is .aero-sky-darken below, driven by
     a smooth continuous curve rather than this tint's discrete jump */
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue-dark) 35%, transparent) 0%, color-mix(in srgb, var(--xp-blue-dark) 24%, transparent) 100%);
}

/* Continuous colour-grade darken, independent of the dawn/day/golden/night
   buckets above — aero.js sets --aero-darkness (0 at noon, 1 at midnight)
   every minute from the visitor's real local time, so the video dims
   smoothly through the day rather than stepping between four fixed looks. */
.aero-sky-darken {
  position: absolute;
  inset: 0;
  background: black;
  opacity: calc(var(--aero-darkness, 0) * 0.72);
  transition: opacity 3s ease;
}

.aero-sky-aurora {
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  height: 55%;
  background: linear-gradient(100deg, transparent 0%, var(--aero-aurora-mint) 25%, transparent 45%, var(--aero-aurora-violet) 65%, transparent 90%);
  opacity: 0;
  filter: blur(40px);
  transition: opacity 4s ease;
  animation: aeroAuroraDrift 40s ease-in-out infinite alternate;
}

body.aero-time-night .aero-sky-aurora { opacity: 0.35; }
body.aero-time-dawn .aero-sky-aurora,
body.aero-time-golden .aero-sky-aurora { opacity: 0.12; }

@keyframes aeroAuroraDrift {
  0% { transform: translateX(-3%) translateY(0); }
  100% { transform: translateX(3%) translateY(-2%); }
}

.aero-sky-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 3s ease;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, white, transparent),
    radial-gradient(1.5px 1.5px at 25% 8%, white, transparent),
    radial-gradient(1px 1px at 40% 20%, white, transparent),
    radial-gradient(2px 2px at 55% 12%, white, transparent),
    radial-gradient(1px 1px at 68% 25%, white, transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 92% 18%, white, transparent),
    radial-gradient(1.5px 1.5px at 15% 35%, white, transparent),
    radial-gradient(1px 1px at 33% 30%, white, transparent),
    radial-gradient(2px 2px at 48% 38%, white, transparent),
    radial-gradient(1px 1px at 63% 33%, white, transparent),
    radial-gradient(1.5px 1.5px at 88% 32%, white, transparent);
}

body.aero-time-night .aero-sky-stars { opacity: 0.85; }

.aero-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  filter: blur(6px);
  opacity: 0.5;
}

.aero-cloud-1 { width: 240px; height: 70px; top: 12%; left: -20%; animation: aeroCloudDriftA 95s linear infinite; }
.aero-cloud-2 { width: 180px; height: 55px; top: 22%; left: -20%; animation: aeroCloudDriftB 135s linear infinite; animation-delay: -40s; }
.aero-cloud-3 { width: 300px; height: 85px; top: 7%; left: -20%; animation: aeroCloudDriftA 165s linear infinite; animation-delay: -90s; }

@keyframes aeroCloudDriftA {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}
@keyframes aeroCloudDriftB {
  from { transform: translateX(0); }
  to { transform: translateX(150vw); }
}

body.aero-time-night .aero-cloud {
  opacity: 0.15;
  background: radial-gradient(ellipse at center, rgba(180,200,255,0.3), rgba(180,200,255,0) 70%);
}

.aero-bubble {
  position: absolute;
  bottom: -5%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 75%);
  border: 1px solid rgba(255,255,255,0.4);
  opacity: 0;
}

.aero-bubble-1 { width: 18px; height: 18px; left: 20%; animation: aeroBubbleFloat 24s ease-in infinite; }
.aero-bubble-2 { width: 12px; height: 12px; left: 55%; animation: aeroBubbleFloat 30s ease-in infinite; animation-delay: -9s; }
.aero-bubble-3 { width: 24px; height: 24px; left: 78%; animation: aeroBubbleFloat 36s ease-in infinite; animation-delay: -18s; }

@keyframes aeroBubbleFloat {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 0.6; }
  90% { opacity: 0.35; }
  100% { transform: translate(30px, -108vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aero-cloud, .aero-bubble, .aero-sky-aurora {
    animation: none !important;
  }
}

/* ---------------------------------------------------------
   TASKBAR — floating aqua-glass dock, detached from the
   viewport edge instead of flush against it.
   --------------------------------------------------------- */

#taskbar.aero-dock {
  left: 14px;
  right: 14px;
  bottom: 14px;
  width: auto;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue-light) 32%, transparent) 0%, color-mix(in srgb, var(--aero-aqua) 28%, transparent) 100%);
  backdrop-filter: blur(var(--aero-blur-md)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--aero-blur-md)) saturate(200%);
  border: 1.5px solid color-mix(in srgb, white 30%, var(--aero-aqua));
  border-top: 1.5px solid color-mix(in srgb, white 30%, var(--aero-aqua));
  box-shadow:
    0 12px 30px var(--aero-glass-shadow),
    0 0 30px var(--aero-glow-aqua),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

body.aero-time-night #taskbar.aero-dock {
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue-dark) 55%, transparent) 0%, color-mix(in srgb, black 40%, var(--xp-blue-dark)) 100%);
  border-color: color-mix(in srgb, white 15%, var(--aero-aqua));
}

/* Clock had zero gap to the audio toggle (its right edge landed exactly on
   the button's left edge) — barely noticeable on the old flush taskbar,
   obvious once everything's floating in glass. Pull it in a bit. */
#taskbar.aero-dock #clock {
  margin-right: 10px;
}

/* Start menu repositioned to sit above the floating dock (it used to be
   flush against an edge-to-edge taskbar) and lightly re-glassed to match */
#start-menu {
  bottom: 68px;
  left: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, white 55%, var(--aero-aqua)) 0%, color-mix(in srgb, var(--aero-aqua) 30%, white) 100%);
  backdrop-filter: blur(var(--aero-blur-sm)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--aero-blur-sm)) saturate(200%);
  border: 1.5px solid color-mix(in srgb, white 30%, var(--aero-aqua));
  border-radius: 16px;
  box-shadow:
    0 12px 28px var(--aero-glass-shadow),
    0 0 24px var(--aero-glow-aqua),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ---------------------------------------------------------
   START ORB — liquid gel sphere
   --------------------------------------------------------- */

#start-button.aero-orb {
  border-radius: 999px;
  margin-left: 4px;
  min-width: 96px;
  height: 40px;
  padding: 0 22px;
  background: linear-gradient(160deg, color-mix(in srgb, white 30%, var(--start-green-light)) 0%, var(--start-green-mid) 55%, var(--start-green-dark) 100%);
  border: 1.5px solid rgba(255,255,255,0.65);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.5),
    0 4px 16px color-mix(in srgb, var(--start-green-dark) 50%, transparent);
  position: relative;
  overflow: hidden;
  transition: transform var(--aero-duration-fast) var(--aero-ease-buoyant), box-shadow var(--aero-duration-fast) var(--aero-ease-soft);
}

#start-button.aero-orb::before {
  content: "";
  position: absolute;
  inset: 8% 14% auto 14%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  pointer-events: none;
}

#start-button.aero-orb:hover {
  transform: translateY(-2px) scale(1.03);
}

#start-button.aero-orb:active {
  transform: translateY(1px) scale(0.95);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.25),
    0 2px 6px color-mix(in srgb, var(--start-green-dark) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #start-button.aero-orb {
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   DIMENSIONAL DESKTOP ICONS — glass shelf + reflection.
   -webkit-box-reflect is Chromium/WebKit-only; icons simply
   have no reflection in Firefox, a harmless graceful
   degradation (no functionality depends on it).
   --------------------------------------------------------- */

.icon img {
  -webkit-box-reflect: below 2px linear-gradient(transparent, transparent 55%, rgba(255,255,255,0.25));
}

.icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 60%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, white 55%, var(--aero-aqua)) 0%, transparent 78%);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--aero-glass-shadow) 35%, transparent);
  pointer-events: none;
  opacity: 0.85;
}

body.aero-time-night .icon-title {
  text-shadow: 0 0 8px color-mix(in srgb, var(--aero-aqua) 55%, white), 0 1px 3px rgba(0,0,0,0.75);
}

/* ---------------------------------------------------------
   BOOT SCREEN — logo emerges through water/light; the loading
   bar becomes concentric ripples. Same DOM, same ~3s JS timing
   in script.js — purely a CSS re-skin, nothing structural
   changed so nothing about the boot sequence can break.
   --------------------------------------------------------- */

#boot-screen {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--aero-aqua) 10%, transparent) 0%, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--xp-blue-dark) 22%, #050505) 0%, #0a0a0a 45%, #030303 100%);
}

.boot-loading-text,
.boot-dots {
  color: color-mix(in srgb, white 72%, var(--aero-aqua));
}

.boot-logo {
  animation: bootLogoFloat 4s ease-in-out infinite, aeroLogoEmerge 1.4s ease-out;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, white 50%, var(--aero-aqua)))
    drop-shadow(0 0 26px color-mix(in srgb, var(--aero-aqua) 55%, transparent));
}

@keyframes aeroLogoEmerge {
  0% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(14px) scale(0.94); }
  55% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0) scale(1); }
}

.boot-bar {
  width: 90px;
  margin: 0 auto;
}

.boot-bar-track {
  position: relative;
  width: 90px;
  height: 90px;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.boot-bar-track::before,
.boot-bar-track::after,
.boot-bar-fill {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, white 45%, var(--aero-aqua));
  opacity: 0;
  animation: aeroBootRipple 2.4s ease-out infinite;
}

.boot-bar-track::after { animation-delay: 0.8s; }
.boot-bar-fill { width: 100%; height: 100%; left: 0; top: 0; background: none; animation-delay: 1.6s; }

@keyframes aeroBootRipple {
  0% { transform: scale(0.25); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-bar-track::before,
  .boot-bar-track::after,
  .boot-bar-fill {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* =========================================================
   PHASE 2 — DEVICE 1: GT PAINT — "THE GADGET" (rev. 3)
   A single sculpted handheld, not a rectangle: an SVG shell (screen
   bezel, tools-panel body, wheel rim — all chrome trim + aero-blue glass,
   drawn in index.html's <svg class="gt-shell">) with real functional
   controls layered on top at matching coordinates. Every control keeps
   its original id; gtpaint.js wires everything by getElementById and
   doesn't know or care where in the layout a button physically sits.

   Coordinate system: the shell's SVG viewBox is 0 0 1000 800, and the
   window is sized to match (1000x800, aspect-ratio locked) so every
   overlay below can be positioned in percent and stay aligned with the
   SVG shapes regardless of how the window ends up scaled by the site's
   responsive max-width/max-height clamps.
   ========================================================= */

/* #window-gtpaint + .aero-device-gadget (ID+class) beats style.css's bare
   #window-gtpaint size rule (ID alone) — needed since specificity, not
   source order, decides here and style.css loads first regardless.

   width/height must stay in lockstep: every overlay below is positioned
   in percent against the 1000x800 viewBox, so if the generic .window
   max-width/max-height clamps (each viewport-axis-based, independent of
   each other) were allowed to win, width and height would get squashed
   by different amounts on a viewport whose aspect ratio doesn't match
   the gadget's — skewing the whole silhouette and misaligning every
   overlay. Setting height:auto (so aspect-ratio derives it from width)
   and folding the viewport-height limit into the width formula itself
   keeps the ratio locked no matter how the window ends up clamped. */
#window-gtpaint.aero-device-gadget {
  width: min(1000px, 96vw, calc((100vh - 60px) * 1000 / 800));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 1000 / 800;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.gt-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* SVG elements clip their own rendered content to their box by default
     (overflow:hidden in the UA stylesheet), independent of whatever the
     parent .window allows — without this, every glow/blur filter that
     extends past the viewBox (gtNeonGlow, gtCaseOutline, gtShellDropShadow)
     gets hard-cropped right at the window's edge. */
  overflow: visible;
}

.window.aero-device-gadget .window-content {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  z-index: 1;
}

/* ---- screen: the canvas fills the SVG's dark inner recess ---- */

.window.aero-device-gadget .gtpaint-canvas-wrap {
  position: absolute;
  left: 6.5%;
  top: 5.75%;
  width: 60.6%;
  height: 45.75%;
  background: none;
  box-shadow: none;
  border-radius: 22px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.window.aero-device-gadget #gtpaint-canvas {
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 20px var(--aero-glow-aqua);
}

/* ---- exit orb: a real button (not static SVG) so the wobble/press
   animations actually affect the visible gel body ---- */

.gt-exit-orb {
  position: absolute;
  left: 65.4%;
  top: 0%;
  width: 9.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255,140,140,0.75);
  color: white;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  /* still a glowing hologram construct like the rest of the shell, just
     tinted red so it keeps reading as the exit/close control */
  background: radial-gradient(circle at 34% 26%, rgba(255,194,194,0.35) 0%, rgba(255,90,90,0.22) 45%, rgba(212,33,47,0.16) 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.4),
    inset 0 -6px 12px rgba(120,10,20,0.25),
    0 0 20px rgba(255,90,110,0.65),
    0 0 8px rgba(255,160,160,0.85);
  text-shadow: 0 0 7px rgba(255,120,130,0.9);
  transition: transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.gt-exit-orb:hover {
  animation: gtOrbWobble 0.5s ease-in-out;
}

.gt-exit-orb:active {
  transform: scale(0.86);
  transition: transform 0.08s ease;
}

@keyframes gtOrbWobble {
  0%, 100% { transform: scale(1, 1); }
  30%      { transform: scale(1.1, 0.9); }
  60%      { transform: scale(0.94, 1.06); }
  80%      { transform: scale(1.03, 0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .gt-exit-orb:hover { animation: none !important; }
  .gt-exit-orb { transition: none !important; }
}

/* ---- the tool wheel: a real rotary dial. .gtpaint-wheel is the fixed
   hit-area/rim; .gtpaint-wheel-ring is what actually rotates (dragged or
   scrolled — see initGTPaintWheel in gtpaint.js); the notch marks 12
   o'clock, the hub is a static decorative center cap. ---- */

.gtpaint-wheel {
  position: absolute;
  left: 61.5%;
  top: 50.125%;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* higher than .gtpaint-panel-content (z-index 2) and everything else on
     the shell deliberately — their bounding boxes overlap and the wheel
     must always win that overlap or dragging it would get intercepted */
  z-index: 5;
  touch-action: none;
  cursor: grab;
}

.gtpaint-wheel.gt-wheel-dragging {
  cursor: grabbing;
}

.gtpaint-wheel-notch {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid color-mix(in srgb, white 40%, var(--aero-aqua));
  filter: drop-shadow(0 0 4px var(--aero-glow-aqua));
  z-index: 3;
  pointer-events: none;
}

/* large glossy central sphere showing the active tool's icon (JS copies
   the active button's icon markup in here — see setTool() in gtpaint.js).
   Transparent hologram glass, not a solid gel ball. */
.gtpaint-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 46%;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.45), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 45%, color-mix(in srgb, transparent 72%, var(--xp-blue-mid)) 100%);
  border: 2px solid color-mix(in srgb, white 45%, var(--aero-aqua));
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,0.4),
    inset 0 -8px 16px rgba(0,20,40,0.12),
    0 0 22px var(--aero-glow-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.gtpaint-wheel-hub-icon {
  width: 42%;
  height: 42%;
  display: flex;
  filter: drop-shadow(0 1px 2px rgba(0,20,40,0.4));
}

.gtpaint-wheel-hub-icon svg {
  width: 100%;
  height: 100%;
}

/* the ring rotates as a whole (dragged/scrolled); overflow:hidden +
   border-radius:50% turns each wedge's slightly-oversized clip-path
   polygon into a perfect circular dial face. Inset from the wheel's own
   bounds so a visible band of the static chrome ring + green accent arc
   (drawn in the SVG shell behind, see gtChromeRing) shows all the way
   around as a distinct bezel, not just in the wedge gap seams. */
.gtpaint-wheel-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

/* each tool is a pie-slice wedge, not a floating circular button — the
   clip-path polygon points sit past the true rim (radius 60% vs the
   visible 50%) so the ring's overflow:hidden clips it to a clean circle
   instead of leaving flat chords at the wedge's outer corners. Small
   angular gaps between wedges (40° wedge in a 45° slot) let the chrome
   ring underneath read through as seam lines. */
.gtpaint-wheel-ring .gtpaint-tool {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  clip-path: polygon(50% 50%, 29.5% -6.4%, 70.5% -6.4%);
  transform: rotate(var(--r));
  transform-origin: 50% 50%;
  /* transparent hologram glass wedge, one light source upper-left */
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, transparent 55%, white) 0%, color-mix(in srgb, transparent 68%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 80%, var(--xp-blue-dark)) 100%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--aero-aqua) 40%, transparent));
  cursor: pointer;
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.gtpaint-tool-icon {
  position: absolute;
  /* pushed out from 14% so the icon's inner edge clears the central
     hub (.gtpaint-wheel-hub, radius 23% of the wheel) instead of
     dipping under it — icons sit at a constant radius from center
     regardless of --r, so this one offset fixes all 8 */
  top: 8%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  /* cancel the wedge's own placement rotation so the icon stays upright
     regardless of which slot it sits in (no rotated glyphs) */
  transform: rotate(calc(-1 * var(--r)));
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
  pointer-events: none;
}

.gtpaint-tool-icon svg {
  width: 100%;
  height: 100%;
}

/* active = the same glass wedge glows brighter cyan-white from within */
.gtpaint-wheel-ring .gtpaint-tool.active {
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, transparent 30%, white) 0%, color-mix(in srgb, transparent 45%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 65%, var(--xp-blue-mid)) 100%);
  filter: drop-shadow(0 0 14px color-mix(in srgb, white 25%, var(--aero-aqua)));
}

.gtpaint-wheel-ring .gtpaint-tool:hover {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--aero-aqua) 60%, transparent));
}

.gtpaint-wheel-ring .gtpaint-tool.active:hover {
  filter: drop-shadow(0 0 18px color-mix(in srgb, white 30%, var(--aero-aqua)));
}

.gtpaint-wheel-ring .gtpaint-tool:active {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--aero-aqua) 55%, transparent)) brightness(0.85);
}

/* ---- the colour wheel: a STATIC rainbow ring (no rotation — click or
   drag anywhere on it and the hue is computed directly from the angle,
   see initGTPaintColourWheel in gtpaint.js) around a large glossy pearl
   orb. The orb itself is draggable vertically for lightness, and
   double-click opens the native colour input for precision. A small
   thumb dot rotates to mark the current hue's position on the ring. ---- */

.gtpaint-colour-wheel {
  position: absolute;
  left: 64.8%;
  top: 76.375%;
  width: 18.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 4;
}

.gtpaint-colour-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    hsl(0, 85%, 55%), hsl(60, 85%, 55%), hsl(120, 85%, 55%),
    hsl(180, 85%, 55%), hsl(240, 85%, 55%), hsl(300, 85%, 55%), hsl(360, 85%, 55%));
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -6px 10px rgba(0,10,30,0.3),
    0 0 14px color-mix(in srgb, var(--aero-aqua) 45%, transparent);
  cursor: pointer;
  touch-action: none;
  z-index: 1;
}

/* rotates (transform only, set from JS) to point at the current hue;
   doesn't intercept pointer events itself so it never blocks the ring */
.gtpaint-colour-wheel-thumb {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.gtpaint-colour-wheel-thumb::after {
  content: "";
  position: absolute;
  top: 2%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0,20,40,0.5);
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

/* the large glossy pearl orb — a fixed white specular-highlight layer
   over a colour layer driven by --gtpaint-hub-color (set from JS), so
   the sphere always shows the current paint colour while keeping its
   glass gloss regardless of what that colour is */
.gtpaint-colour-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64%;
  height: 64%;
  margin: -32% 0 0 -32%;
  border-radius: 50%;
  --gtpaint-hub-color: #ff4fd8;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.25) 20%, transparent 42%),
    radial-gradient(circle at 55% 60%, color-mix(in srgb, var(--gtpaint-hub-color) 70%, white) 0%, var(--gtpaint-hub-color) 55%, color-mix(in srgb, var(--gtpaint-hub-color) 75%, black) 100%);
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,0.6),
    inset 0 -8px 16px rgba(0,0,0,0.22),
    0 4px 14px var(--aero-glass-shadow);
  cursor: ns-resize;
  touch-action: none;
  z-index: 3;
  padding: 0;
}

.gtpaint-colour-wheel-hub.gt-hub-dragging {
  cursor: ns-resize;
}

/* ---- tools panel content: readout + deck, contained within the SVG
   panel body's safe interior (avoids the concave swoop on the left) ---- */

.gtpaint-panel-content {
  position: absolute;
  left: 11%;
  top: 57.5%;
  width: 71%;
  height: 38.75%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  z-index: 2;
}

/* the readout sits directly on the shell surface — no separate panel
   background, so its edge doesn't fight the device's own sculpted shape.
   A single flat rule (the shared rim colour, square not rounded) marks
   it as a distinct strip without drawing a floating box. Width is capped
   so it ends before the tool wheel instead of running underneath it. */
.gtpaint-readout {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  width: 46%;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid color-mix(in srgb, white 45%, var(--aero-aqua));
  padding: 0 0 8px 0;
  box-shadow: none;
  flex-shrink: 0;
}

/* the flat colour swatch is gone (the colour orb replaces it) — this
   input stays in the DOM as the underlying value store, opened
   programmatically by double-clicking the orb, but is never itself
   visible or in the tab order as a redundant control */
.gtpaint-color-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.gtpaint-readout-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.gtpaint-readout label {
  color: color-mix(in srgb, white 55%, var(--aero-aqua));
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gtpaint-readout #gtpaint-size-display,
.gtpaint-readout #gtpaint-font-size-display {
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 60%, transparent);
}

/* the deck has no panel background of its own — the buttons sit right on
   the shell's own plastic, as if they were moulded into the device
   rather than floating on a separate rounded rectangle */
.gtpaint-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: none;
  border-radius: 0;
  padding: 4px 0 0 0;
  box-shadow: none;
}

.gtpaint-deck .gtpaint-toolbar-row {
  gap: 6px;
}

.gtpaint-deck .gtpaint-subrow {
  border-top: 1px dashed color-mix(in srgb, white 40%, var(--aero-aqua) 40%);
}

/* ---- shared button treatment: frosted-white embossed pills (the belly
   is white now, not blue — see Revision 7), each one seated in its own
   subtle recess. Convex button (bright upper-left, shadow lower-right)
   + concave dish around it — the pairing sells "seated in the shell"
   rather than "floating pill on top of it". Active = green glow, the
   reference's accent colour for active/positive state (not gold). ---- */

.gtpaint-readout button,
.gtpaint-deck button,
.gtpaint-tool,
.gtpaint-stamp-swatch,
.gtpaint-shape-texture-btn,
.gtpaint-mirror-btn,
#gtpaint-rainbow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* transparent glass pill — barely-there fill, bright glowing edge.
     Revision 7: hologram pass, replacing the frosted-white opaque pill */
  background: linear-gradient(180deg, color-mix(in srgb, transparent 78%, white) 0%, color-mix(in srgb, transparent 85%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 90%, var(--xp-blue-light)) 100%);
  border: 1px solid color-mix(in srgb, white 55%, var(--aero-aqua));
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 8px color-mix(in srgb, var(--aero-aqua) 35%, transparent);
  transition: transform var(--aero-duration-fast) var(--aero-ease-buoyant), box-shadow var(--aero-duration-fast) var(--aero-ease-soft);
}

.gtpaint-btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--aero-aqua) 60%, transparent));
}

.gtpaint-btn-icon svg {
  width: 100%;
  height: 100%;
}

/* active = the same glass pill glows brighter cyan-white from within */
.gtpaint-deck .gtpaint-tool.active,
.gtpaint-mirror-btn.active,
.gtpaint-shape-texture-btn.active,
.gtpaint-stamp-swatch.active,
#gtpaint-rainbow-toggle.active {
  background: linear-gradient(180deg, color-mix(in srgb, transparent 45%, white) 0%, color-mix(in srgb, transparent 55%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 68%, var(--xp-blue-light)) 100%);
  color: white;
  border-color: color-mix(in srgb, white 70%, var(--aero-aqua));
  text-shadow: 0 0 8px white, 0 0 14px var(--aero-glow-aqua);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 16px color-mix(in srgb, var(--aero-aqua) 70%, white);
}

.gtpaint-deck button:hover,
.gtpaint-stamp-swatch:hover {
  transform: translateY(-2px);
}

/* background-preset swatches — small gel orbs showing their ACTUAL
   colour/gradient. Bug fix: the generic ".gtpaint-deck button" rule
   above (class+element, specificity 0,1,1) was beating each swatch's
   own single-class colour rule in style.css (0,1,0) regardless of load
   order, so every swatch rendered identically. Three classes here
   (0,3,0) beats that reliably. */
.gtpaint-deck .gtpaint-bg-swatch {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, white 65%, var(--aero-aqua));
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,0.6),
    inset 0 -4px 8px rgba(0,20,40,0.2),
    0 0 6px color-mix(in srgb, var(--aero-aqua) 40%, transparent);
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-white {
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #e9eff3 100%);
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-transparent {
  background:
    linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.18) 75%),
    #ffffff;
  background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, auto;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px, 0 0;
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-candy-sky {
  background: linear-gradient(135deg, var(--candy-pink-light), var(--xp-blue-light));
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-ghost-glow {
  background: radial-gradient(circle, var(--ghost-glow-pink-light), var(--ghost-glow-blue));
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-sunset-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--tuna-pink-dark));
}

.gtpaint-deck .gtpaint-bg-swatch.gtpaint-bg-rainbow {
  background: linear-gradient(90deg, var(--paint-pink), var(--paint-cyan), var(--paint-blue));
}

.gtpaint-deck button:active,
.gtpaint-stamp-swatch:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: inset 2px 2px 6px rgba(0,10,30,0.3);
}

/* sliders as a transparent grooved track with tick marks and a glowing
   cyan fill bar up to the thumb — --range-percent is kept in sync from
   JS on every 'input' event (see updateGTPaintRangeFill in gtpaint.js) */
.gtpaint-readout input[type="range"],
.gtpaint-deck input[type="range"] {
  height: 8px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 1px, transparent 1px, transparent 10%),
    linear-gradient(to right,
      color-mix(in srgb, white 25%, var(--aero-aqua)) 0%, color-mix(in srgb, white 25%, var(--aero-aqua)) var(--range-percent, 50%),
      color-mix(in srgb, transparent 82%, var(--aero-aqua)) var(--range-percent, 50%), color-mix(in srgb, transparent 82%, var(--aero-aqua)) 100%);
  box-shadow: inset 0 2px 4px rgba(0,20,40,0.25), inset 0 -1px 0 rgba(255,255,255,0.3), 0 0 6px color-mix(in srgb, var(--aero-aqua) 30%, transparent);
  -webkit-appearance: none;
  appearance: none;
}

.gtpaint-readout input[type="range"]::-webkit-slider-thumb,
.gtpaint-deck input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -6px;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.9) 0%, color-mix(in srgb, transparent 30%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 55%, var(--xp-blue-mid)) 100%);
  border: 1px solid color-mix(in srgb, white 60%, var(--aero-aqua));
  box-shadow: 0 0 8px color-mix(in srgb, var(--aero-aqua) 65%, white), inset 0 1px 2px rgba(255,255,255,0.7);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .gtpaint-deck button,
  .gtpaint-tool {
    transition: none !important;
  }
}

/* =========================================================
   PHASE 2 — DEVICE 2: VIDEO PLAYER — rebuilt from design_1.png in
   "video player design/" as a video sibling to the Jukebox: one
   continuous moulded shell (screen flowing into three lobes — left
   transport, centre video list, right transport), same hologram glass
   language (gtPlastic/gtRim/gtConvexLight/gtNeonGlow/gtScreenGlass/
   gtChromeRing), same red exit orb, same gtCaseOutline unifying case
   and lens-flare treatment as GT Paint and the Jukebox.

   Coordinate system: viewBox 0 0 1000 850, window locked to that same
   aspect ratio so every percentage-positioned overlay stays aligned
   regardless of how the responsive width/height clamp scales the
   window.
   ========================================================= */

#window-video-viewer.aero-device-gadget {
  width: min(1000px, 90vw, calc((100vh - 60px) * 1000 / 850));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 1000 / 850;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.videoplayer-exit-orb {
  left: 85.6%;
  top: 0.235%;
  width: 8.4%;
}

.videoplayer-screen-wrap {
  position: absolute;
  left: 9%;
  top: 8.824%;
  width: 69%;
  height: 45.647%;
  border-radius: 18px;
  overflow: hidden;
  background: #020608;
  z-index: 1;
}

#videoplayer-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020608;
  display: block;
  cursor: pointer;
}

.videoplayer-fullscreen-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,15,30,0.45);
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(3px);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.videoplayer-fullscreen-btn svg {
  width: 60%;
  height: 60%;
}

.videoplayer-fullscreen-btn:hover {
  filter: brightness(1.35);
}

.videoplayer-title-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: linear-gradient(0deg, rgba(0,10,20,0.75) 0%, rgba(0,10,20,0) 100%);
  color: color-mix(in srgb, white 85%, var(--aero-aqua));
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 60%, transparent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
  pointer-events: none;
}

/* ---- timecode: grooved chrome channel under the screen, same
   construction as the Jukebox's seek bar ---- */

.videoplayer-seek-row {
  position: absolute;
  left: 9%;
  top: 58.235%;
  width: 69%;
  height: 4.118%;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.videoplayer-time-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, white 75%, var(--aero-aqua));
  text-shadow: 0 0 4px color-mix(in srgb, var(--aero-aqua) 40%, transparent);
}

.videoplayer-seek-slider {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--start-green-light) 0%,
    var(--start-green-light) var(--videoplayer-seek-pct, 0%),
    rgba(0,15,30,0.55) var(--videoplayer-seek-pct, 0%),
    rgba(0,15,30,0.55) 100%);
  box-shadow: inset 0 2px 5px rgba(0,10,25,0.6), inset 0 -1px 2px rgba(255,255,255,0.15);
  cursor: pointer;
  outline: none;
}

.videoplayer-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--start-green-light) 55%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green), 0 1px 2px rgba(0,10,25,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
}

.videoplayer-seek-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--start-green-light) 55%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green), 0 1px 2px rgba(0,10,25,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
}

.videoplayer-seek-slider::-moz-range-track {
  height: 10px;
  border-radius: 6px;
  background: transparent;
}

/* ---- vertical volume fader, seated in the chrome groove drawn in the
   SVG shell (x=862,y=70,w=16,h=400) ---- */

.videoplayer-volume-wrap {
  position: absolute;
  left: 86.2%;
  top: 8.235%;
  width: 1.6%;
  height: 47.06%;
  z-index: 2;
}

.videoplayer-volume-slider {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,
    var(--start-green-light) 0%,
    var(--start-green-light) var(--videoplayer-vol-pct, 100%),
    rgba(0,15,30,0.55) var(--videoplayer-vol-pct, 100%),
    rgba(0,15,30,0.55) 100%);
  border-radius: 6px;
  box-shadow: inset 0 2px 5px rgba(0,10,25,0.6), inset 0 -1px 2px rgba(255,255,255,0.15);
  cursor: pointer;
  outline: none;
}

.videoplayer-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--start-green-light) 55%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green), 0 1px 2px rgba(0,10,25,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
}

/* ---- transport lobes: fixed clusters (no rotation), same construction
   technique as the Jukebox's pod — one big glossy centre button,
   smaller flanking buttons. 200x140 viewBox units, so a widthPct times
   200 must equal heightPct times 140 for a button to render circular:
   heightPct = widthPct * 200/140. ---- */

.videoplayer-lobe {
  position: absolute;
  top: 65.88%;
  height: 16.47%;
  z-index: 5;
}

.videoplayer-lobe-left { left: 13%; width: 20%; }
.videoplayer-lobe-right { left: 65%; width: 20%; }

.videoplayer-transport-btn {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, white 50%, var(--aero-aqua));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  z-index: 3;
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft), transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.videoplayer-transport-btn svg {
  width: 46%;
  height: 46%;
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
}

.videoplayer-transport-btn:hover {
  filter: brightness(1.15);
}

.videoplayer-transport-btn:active {
  transform: scale(0.94);
}

.videoplayer-play-big,
.videoplayer-pause-big {
  left: 50%;
  width: 40%;
  height: 57.14%;
  margin: -28.57% 0 0 -20%;
  transform: none;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), color-mix(in srgb, transparent 40%, var(--aero-aqua)) 45%, color-mix(in srgb, transparent 62%, var(--xp-blue-dark)) 100%);
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,0.45),
    inset 0 -8px 16px rgba(0,20,40,0.15),
    0 0 22px var(--aero-glow-aqua);
}

.videoplayer-play-big:active,
.videoplayer-pause-big:active {
  transform: scale(0.94);
}

.videoplayer-skip-back,
.videoplayer-rewind,
.videoplayer-fast-forward,
.videoplayer-skip-forward {
  width: 22%;
  height: 31.43%;
  margin-top: -15.71%;
  transform: none;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.4), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 75%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), 0 0 10px var(--aero-glow-aqua);
}

.videoplayer-skip-back:active,
.videoplayer-rewind:active,
.videoplayer-fast-forward:active,
.videoplayer-skip-forward:active {
  transform: scale(0.94);
}

.videoplayer-skip-back { left: 8%; }
.videoplayer-rewind { right: 8%; }
.videoplayer-fast-forward { left: 8%; }
.videoplayer-skip-forward { right: 8%; }

.videoplayer-active {
  filter: drop-shadow(0 0 14px color-mix(in srgb, white 25%, var(--start-green-light)));
}

/* ---- centre lobe: video list tray, same construction as the
   Jukebox's tracklist tray ---- */

.videoplayer-lobe-center {
  left: 33%;
  width: 32%;
  height: 28.24%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,25,45,0.28);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.videoplayer-list-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.videoplayer-list-title {
  flex: 1;
  font-size: 11px;
  font-weight: bold;
  color: color-mix(in srgb, white 85%, var(--aero-aqua));
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 50%, transparent);
}

.videoplayer-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 6px;
}

.videoplayer-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  font-size: 11px;
  transition: background var(--aero-duration-fast) var(--aero-ease-soft);
}

.videoplayer-list-row:hover {
  background: rgba(255,255,255,0.08);
}

.videoplayer-list-row.playing {
  background: color-mix(in srgb, transparent 78%, var(--start-green-light));
  color: white;
  text-shadow: 0 0 6px var(--aero-glow-green);
}

.videoplayer-list-num {
  flex: 0 0 auto;
  width: 16px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.videoplayer-list-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.videoplayer-list-eq {
  display: none;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 2px;
  width: 12px;
  height: 11px;
}

.videoplayer-list-row.playing .videoplayer-list-eq {
  display: flex;
}

.videoplayer-list-eq span {
  width: 2px;
  background: var(--start-green-light);
  border-radius: 1px;
  box-shadow: 0 0 4px var(--aero-glow-green);
  animation: jukeboxEq 0.9s ease-in-out infinite;
}

.videoplayer-list-eq span:nth-child(1) { animation-delay: 0s; }
.videoplayer-list-eq span:nth-child(2) { animation-delay: 0.2s; }
.videoplayer-list-eq span:nth-child(3) { animation-delay: 0.4s; }

/* =========================================================
   PHASE 2 — DEVICE 3: MUSIC PLAYER — "The Jukebox"
   Rebuilt from design_1.png in /music player design ref/. Same hologram
   glass language as GT Paint/Video Player (reuses their gtPlastic/gtRim/
   gtConvexLight/gtNeonGlow/gtScreenGlass/gtChromeRing/gtSoftBlur/
   gtShellDropShadow defs directly by id). A continuous moulded pill —
   the screen zone flowing into a narrower tracklist tray, per the
   sketch — plus a FIXED (non-rotating) transport pod overlapping the
   bottom-right corner: central play/pause, prev/next flanking, a
   drag-to-set volume ring around the rim, shuffle/repeat/mute dots.
   Native <audio> element routed through Web Audio (see musicplayer.js)
   replaces the old Spotify iframe entirely — it can't be audio-analysed
   cross-origin.

   Coordinate system: viewBox 0 0 900 800, window locked to that aspect
   ratio (see #window-music.aero-device-gadget below) so every
   percentage-positioned overlay stays aligned regardless of how the
   responsive width/height clamp scales the window.
   ========================================================= */

#window-music.aero-device-gadget {
  width: min(900px, 90vw, calc((100vh - 60px) * 900 / 800));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 900 / 800;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.jukebox-exit-orb {
  left: 64.22%;
  top: 0.25%;
  width: 8.89%;
}

/* ---- screen: the visualizer canvas fills the SVG's dark inner recess ---- */

.jukebox-screen-wrap {
  position: absolute;
  left: 10.56%;
  top: 10.625%;
  width: 56.67%;
  height: 37.5%;
  border-radius: 18px;
  overflow: hidden;
  background: #020608;
  z-index: 1;
}

#jukebox-visualizer {
  width: 100%;
  height: 100%;
  display: block;
}

.jukebox-mode-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,15,30,0.45);
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(3px);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.jukebox-mode-btn svg {
  width: 60%;
  height: 60%;
}

.jukebox-mode-btn:hover {
  filter: brightness(1.35);
}

.jukebox-track-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: linear-gradient(0deg, rgba(0,10,20,0.75) 0%, rgba(0,10,20,0) 100%);
  color: color-mix(in srgb, white 85%, var(--aero-aqua));
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 60%, transparent);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.jukebox-track-info span {
  display: inline-block;
  white-space: nowrap;
}

.jukebox-track-info span.jukebox-marquee {
  padding-left: 24px;
  animation: jukeboxMarquee 10s linear infinite;
}

@keyframes jukeboxMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- seek bar: grooved chrome channel under the screen ---- */

.jukebox-seek-row {
  position: absolute;
  left: 10.56%;
  top: 51.4%;
  width: 56.67%;
  height: 4%;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.jukebox-time {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, white 75%, var(--aero-aqua));
  text-shadow: 0 0 4px color-mix(in srgb, var(--aero-aqua) 40%, transparent);
}

.jukebox-seek-slider {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--start-green-light) 0%,
    var(--start-green-light) var(--jukebox-seek-pct, 0%),
    rgba(0,15,30,0.55) var(--jukebox-seek-pct, 0%),
    rgba(0,15,30,0.55) 100%);
  box-shadow: inset 0 2px 5px rgba(0,10,25,0.6), inset 0 -1px 2px rgba(255,255,255,0.15);
  cursor: pointer;
  outline: none;
}

.jukebox-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--start-green-light) 55%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green), 0 1px 2px rgba(0,10,25,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
}

.jukebox-seek-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, white, var(--start-green-light) 55%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green), 0 1px 2px rgba(0,10,25,0.5);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
}

.jukebox-seek-slider::-moz-range-track {
  height: 10px;
  border-radius: 6px;
  background: transparent;
}

/* ---- tracklist tray: frosted inset panel, scrollable ---- */

.jukebox-tracklist-wrap {
  position: absolute;
  left: 18.89%;
  top: 56.25%;
  width: 38.89%;
  height: 26.25%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,25,45,0.28);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.jukebox-tracklist-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.jukebox-tracklist-title {
  flex: 1;
  font-size: 11px;
  font-weight: bold;
  color: color-mix(in srgb, white 85%, var(--aero-aqua));
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 50%, transparent);
}

.jukebox-extlink {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.jukebox-extlink svg {
  width: 62%;
  height: 62%;
}

.jukebox-extlink:hover {
  filter: brightness(1.35);
}

.jukebox-tracklist {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 6px;
}

.jukebox-track-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: color-mix(in srgb, white 80%, var(--aero-aqua));
  font-size: 11px;
  transition: background var(--aero-duration-fast) var(--aero-ease-soft);
}

.jukebox-track-row:hover {
  background: rgba(255,255,255,0.08);
}

.jukebox-track-row.playing {
  background: color-mix(in srgb, transparent 78%, var(--start-green-light));
  color: white;
  text-shadow: 0 0 6px var(--aero-glow-green);
}

.jukebox-track-num {
  flex: 0 0 auto;
  width: 16px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.jukebox-track-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jukebox-track-duration {
  flex: 0 0 auto;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.jukebox-track-eq {
  display: none;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 2px;
  width: 12px;
  height: 11px;
}

.jukebox-track-row.playing .jukebox-track-eq {
  display: flex;
}

.jukebox-track-eq span {
  width: 2px;
  background: var(--start-green-light);
  border-radius: 1px;
  box-shadow: 0 0 4px var(--aero-glow-green);
  animation: jukeboxEq 0.9s ease-in-out infinite;
}

.jukebox-track-eq span:nth-child(1) { animation-delay: 0s; }
.jukebox-track-eq span:nth-child(2) { animation-delay: 0.2s; }
.jukebox-track-eq span:nth-child(3) { animation-delay: 0.4s; }

@keyframes jukeboxEq {
  0%, 100% { height: 3px; }
  50% { height: 11px; }
}

/* ---- transport pod: FIXED cluster (does not rotate) seated in a
   moulded well — construction technique borrowed from GT Paint's wheel
   housing (rim → shadow groove → recessed face) but rendered in the
   current transparent hologram material rather than solid chrome. ---- */

.jukebox-pod {
  position: absolute;
  left: 61.67%;
  top: 56.875%;
  width: 33.33%;
  aspect-ratio: 1;
  z-index: 5;
}

.jukebox-volume-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  touch-action: none;
}

.jukebox-volume-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--start-green-light) calc(var(--jukebox-vol, 0.7) * 360deg),
    rgba(255,255,255,0.15) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  filter: drop-shadow(0 0 6px var(--aero-glow-green));
  pointer-events: none;
  z-index: 1;
}

.jukebox-volume-thumb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(calc(var(--jukebox-vol, 0.7) * 360deg));
  z-index: 1;
}

.jukebox-volume-thumb::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, white, var(--start-green-light) 60%, var(--start-green-dark) 100%);
  box-shadow: 0 0 6px var(--aero-glow-green);
}

.jukebox-pod-well {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.15), rgba(0,10,20,0.35) 55%, rgba(0,5,15,0.55) 100%);
  box-shadow:
    inset 0 6px 14px rgba(0,10,25,0.55),
    inset 0 -4px 10px rgba(255,255,255,0.12),
    0 1px 2px rgba(255,255,255,0.2);
  z-index: 2;
  pointer-events: none;
}

.jukebox-btn {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, white 50%, var(--aero-aqua));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  z-index: 3;
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft), transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.jukebox-btn svg {
  width: 46%;
  height: 46%;
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
}

.jukebox-btn:hover {
  filter: brightness(1.15);
}

.jukebox-btn:active {
  transform: translateY(-50%) scale(0.94);
}

.jukebox-playpause {
  left: 50%;
  width: 34%;
  height: 34%;
  margin: -17% 0 0 -17%;
  transform: none;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), color-mix(in srgb, transparent 40%, var(--aero-aqua)) 45%, color-mix(in srgb, transparent 62%, var(--xp-blue-dark)) 100%);
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,0.45),
    inset 0 -8px 16px rgba(0,20,40,0.15),
    0 0 22px var(--aero-glow-aqua);
}

.jukebox-playpause:active {
  transform: scale(0.94);
}

.jukebox-prev,
.jukebox-next {
  width: 19%;
  height: 19%;
  margin-top: -9.5%;
  transform: none;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.4), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 75%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), 0 0 10px var(--aero-glow-aqua);
}

.jukebox-prev:active,
.jukebox-next:active {
  transform: scale(0.94);
}

.jukebox-prev { left: 15%; }
.jukebox-next { right: 15%; }

.jukebox-dot {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, white 45%, var(--aero-aqua));
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.5), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 75%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 0 6px var(--aero-glow-aqua);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.jukebox-dot svg {
  width: 55%;
  height: 55%;
}

.jukebox-dot[aria-pressed="true"] {
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.6), color-mix(in srgb, transparent 30%, var(--start-green-light)) 50%, color-mix(in srgb, transparent 55%, var(--start-green-dark)) 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 0 10px var(--aero-glow-green);
}

.jukebox-shuffle { top: 8%; left: 20%; }
.jukebox-repeat  { top: 8%; right: 20%; }
.jukebox-mute    { top: 2%; left: 50%; margin-left: -5.5%; }

@media (prefers-reduced-motion: reduce) {
  .jukebox-track-info span.jukebox-marquee { animation: none; }
  .jukebox-track-eq span { animation: none; height: 6px; }
}

/* =========================================================
   LENS FLARES — ambient decoration, spawned by lens-flares.js every
   time a window opens. Normal blending (not "screen" — these assets are
   mostly-transparent with the flare's own colour/brightness baked into
   the alpha, and "screen" against this theme's light sky/glass washes
   them out to near-invisible). pointer-events:none + a high z-index
   mean they can never block a click, even parked directly over a
   button. Position/size/rotation/opacity/timing are all set inline
   per-instance from JS; these classes just own the animation and the
   "off" state.
   ========================================================= */

.aero-lens-flare-live,
.aero-lens-flare-static {
  position: absolute;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%) rotate(var(--aero-flare-rot, 0deg));
  opacity: var(--aero-flare-opacity, 0.65);
  pointer-events: none;
  z-index: 60;
  user-select: none;
}

.aero-lens-flare-live {
  animation:
    aeroLensFlareIn 1.1s ease-out both,
    aeroLensFlareDrift 9s ease-in-out infinite;
}

@keyframes aeroLensFlareIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--aero-flare-rot, 0deg)) scale(0.8);
  }
  100% {
    opacity: var(--aero-flare-opacity, 0.65);
    transform: translate(-50%, -50%) rotate(var(--aero-flare-rot, 0deg)) scale(1);
  }
}

@keyframes aeroLensFlareDrift {
  0%, 100% { opacity: var(--aero-flare-opacity, 0.65); }
  50%      { opacity: calc(var(--aero-flare-opacity, 0.65) * 0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .aero-lens-flare-live { animation: none; }
}

/* =========================================================
   PHASE 2 — DEVICE: TUNA (snake) — rebuilt from "core design.png" in
   tuna design/ as a handheld sibling to GT Paint/the Jukebox/the Video
   Player: a screen zone (bezel + speaker grille) flowing into a control
   body (New Game + Leaderboard gel buttons, a D-pad). Same hologram
   glass language, same gtCaseOutline unifying case + lens flares.

   Coordinate system: viewBox 0 0 900 950.
   ========================================================= */

#window-tuna.aero-device-gadget {
  width: min(700px, 85vw, calc((100vh - 60px) * 700 / 900));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 700 / 900;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.tuna-exit-orb {
  left: 82.571%;
  top: 0.222%;
  width: 11.429%;
}

.tuna-screen-wrap {
  position: absolute;
  left: 12.857%;
  top: 8.889%;
  width: 74.286%;
  height: 57.778%;
  border-radius: 14px;
  overflow: hidden;
  background: #020608;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tuna-score-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: linear-gradient(0deg, rgba(0,10,20,0.75) 0%, rgba(0,10,20,0) 100%);
  color: color-mix(in srgb, white 85%, var(--aero-aqua));
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 0 6px color-mix(in srgb, var(--aero-aqua) 60%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* ---- gel action buttons: New Game / Leaderboard ---- */

.tuna-gel-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, white 50%, var(--aero-aqua));
  border-radius: 50%;
  color: white;
  cursor: pointer;
  z-index: 3;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.5), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 75%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), 0 0 10px var(--aero-glow-aqua);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft), transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.tuna-gel-btn svg {
  width: 34%;
  height: 34%;
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
}

.tuna-gel-btn span {
  font-size: 9px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,15,35,0.6);
  white-space: nowrap;
}

.tuna-gel-btn:hover {
  filter: brightness(1.15);
}

.tuna-gel-btn:active {
  transform: scale(0.94);
}

.tuna-new-game-btn {
  left: 15.429%;
  top: 80.333%;
  width: 12%;
  aspect-ratio: 1;
}

.tuna-leaderboard-btn {
  left: 27.857%;
  top: 90%;
  width: 10%;
  aspect-ratio: 1;
}

/* ---- D-pad: 4 separate directional buttons in a plus arrangement,
   seated in the recessed chrome well drawn in the SVG shell. Clicking
   works exactly like the arrow keys (see tunaSetDirection in
   script.js) — arrow keys remain the primary/smarter way to play. ---- */

.tuna-dpad {
  position: absolute;
  left: 59.286%;
  top: 80.556%;
  width: 21.429%;
  aspect-ratio: 1;
  z-index: 5;
}

.tuna-dpad-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  margin: -15% 0 0 -15%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.4), color-mix(in srgb, transparent 60%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 78%, var(--xp-blue-dark)) 100%);
  border: 1.5px solid color-mix(in srgb, white 45%, var(--aero-aqua));
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3);
  pointer-events: none;
  z-index: 2;
}

.tuna-dpad-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, white 50%, var(--aero-aqua));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  z-index: 3;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.45), color-mix(in srgb, transparent 58%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 76%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), 0 0 10px var(--aero-glow-aqua);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft), transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.tuna-dpad-btn svg {
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
}

.tuna-dpad-btn:hover {
  filter: brightness(1.15);
}

.tuna-dpad-btn:active {
  transform: scale(0.92);
}

.tuna-dpad-up,
.tuna-dpad-down {
  width: 32%;
  height: 40%;
  left: 50%;
  margin-left: -16%;
}

.tuna-dpad-up { top: 2%; }
.tuna-dpad-down { bottom: 2%; }

.tuna-dpad-left,
.tuna-dpad-right {
  width: 40%;
  height: 32%;
  top: 50%;
  margin-top: -16%;
}

.tuna-dpad-left { left: 2%; }
.tuna-dpad-right { right: 2%; }

/* =========================================================
   PHASE 2 — DEVICE: BIRDSWEEPER — a rectangular sibling to GT Paint/the
   Jukebox/the Video Player/Tuna. Kept as a plain rounded rectangle (the
   user's explicit call — "this one can remain a rectangle as its how
   the original minesweeper game would look"), same construction as the
   original Video Player device, rather than a sculpted silhouette. Same
   hologram glass language, same gtCaseOutline unifying case and
   lens-flare treatment (automatic via the existing openWindow() hook).

   Coordinate system: viewBox 0 0 640 760.
   ========================================================= */

#window-game.aero-device-gadget {
  width: min(640px, 85vw, calc((100vh - 60px) * 640 / 760));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 640 / 760;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.birdsweeper-exit-orb {
  left: 88.125%;
  top: 1.316%;
  width: 9.375%;
}

.birdsweeper-screen-wrap {
  position: absolute;
  left: 9.688%;
  top: 8.158%;
  width: 80.625%;
  height: 67.895%;
  border-radius: 12px;
  overflow: hidden;
  background: #020608;
  z-index: 1;
}

#birdsweeper-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.birdsweeper-reset-btn {
  position: absolute;
  left: 34.375%;
  top: 82.895%;
  width: 31.25%;
  height: 9.211%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, white 50%, var(--aero-aqua));
  border-radius: 999px;
  color: white;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  z-index: 3;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.5), color-mix(in srgb, transparent 55%, var(--aero-aqua)) 50%, color-mix(in srgb, transparent 75%, var(--xp-blue-dark)) 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), 0 0 10px var(--aero-glow-aqua);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft), transform var(--aero-duration-fast) var(--aero-ease-soft);
}

.birdsweeper-reset-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,15,35,0.45));
}

.birdsweeper-reset-btn:hover {
  filter: brightness(1.15);
}

.birdsweeper-reset-btn:active {
  transform: scale(0.96);
}

/* =========================================================
   START MENU — icon rows + hover flyout submenus. Rows are built
   in script.js (buildStartMenu()) from the shared `icons` array,
   so they stay in sync with the desktop/taskbar. Idle rows stay
   plain (style.css's #start-menu li still supplies spacing/type);
   hover/active adopt the same gel-pill recipe as
   .aero-content-bubble. Compound selectors (id + two classes) are
   used throughout so these rules reliably beat style.css's plain
   `#start-menu li` regardless of stylesheet load order — see
   DESIGN.md for why a bare .start-menu-item class alone would lose
   that specificity fight. ========================================================= */

#start-menu {
  width: 240px;
}

#start-menu li.start-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  box-shadow: none;
}

#start-menu li.start-menu-item:hover {
  background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, color-mix(in srgb, white 55%, var(--xp-blue-light)) 100%);
  box-shadow:
    inset 0 -3px 6px color-mix(in srgb, var(--xp-blue-mid) 25%, transparent),
    inset 0 2px 0 rgba(255,255,255,0.85),
    0 3px 10px color-mix(in srgb, var(--aero-aqua) 30%, transparent);
}

#start-menu li.start-menu-item:active {
  background: linear-gradient(160deg, color-mix(in srgb, white 40%, var(--xp-blue-light)) 0%, color-mix(in srgb, white 20%, var(--xp-blue-light)) 100%);
}

.start-menu-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

.start-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-menu-arrow {
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}

/* ---- flyout submenu — pops out to the right of the menu, its
   bottom edge pinned to the hovered row's bottom edge so it grows
   upward (the menu itself is anchored to the taskbar at the
   bottom of the screen, so this keeps long lists like Exhibitions'
   12 PDFs from running off the top of the viewport) ---- */
.start-menu-flyout {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 6px;
  min-width: 250px;
  max-width: 300px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.97) 0%,
    color-mix(in srgb, white 55%, var(--xp-blue-light)) 55%,
    color-mix(in srgb, white 30%, var(--xp-blue-light)) 100%
  );
  border: 1.5px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    0 10px 28px color-mix(in srgb, var(--aero-aqua) 40%, transparent);
  display: none;
  z-index: 5;
}

#start-menu li.has-flyout:hover .start-menu-flyout {
  display: block;
}

.start-menu-flyout-item {
  display: block;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-navy);
  text-decoration: none;
  line-height: 1.3;
  white-space: normal;
  background: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, color-mix(in srgb, white 70%, var(--xp-blue-light)) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  transition: transform var(--aero-duration-fast) var(--aero-ease-buoyant), background var(--aero-duration-fast) ease;
}

.start-menu-flyout-item:last-child {
  margin-bottom: 0;
}

.start-menu-flyout-item:hover {
  background: linear-gradient(160deg, rgba(255,255,255,0.98) 0%, color-mix(in srgb, white 40%, var(--xp-blue-light)) 100%);
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .start-menu-flyout-item:hover {
    transform: none;
  }
}

/* =========================================================
   GT PAINT MODALS — aero-glass replacement for native prompt()/
   confirm() (the Type tool's text entry, and the close-with-unsaved-
   work warning — see showGTPaintModal() in gtpaint.js). Same fixed,
   self-centering glass-panel recipe as Tuna's popup shell
   (.tuna-popup in style.css: position:fixed + translate(-50%,-50%),
   opaque-ish aqua gradient since it sits directly over the busy
   desktop), just under Paint's own class name since it isn't a Tuna
   concept and the two shouldn't be coupled by a shared class.
   ========================================================= */

.gtpaint-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 360px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: linear-gradient(160deg, color-mix(in srgb, transparent 12%, var(--aero-aqua)) 0%, color-mix(in srgb, transparent 22%, var(--xp-blue-light)) 45%, color-mix(in srgb, transparent 30%, var(--xp-blue-dark)) 100%);
  backdrop-filter: blur(16px);
  border: 1.5px solid color-mix(in srgb, white 70%, var(--aero-aqua));
  border-radius: 20px;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 26px color-mix(in srgb, var(--aero-aqua) 45%, transparent),
    0 12px 30px rgba(0,10,25,0.5);
}

.gtpaint-modal-content {
  width: 100%;
  padding: 24px 22px 22px;
  text-align: center;
  box-sizing: border-box;
  color: color-mix(in srgb, white 88%, var(--aero-aqua));
  cursor: grab;
}

.gtpaint-modal-content:active {
  cursor: grabbing;
}

.gtpaint-modal-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: white;
  text-shadow: 0 0 10px color-mix(in srgb, var(--aero-aqua) 70%, transparent);
  user-select: none;
}

.gtpaint-modal-message {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  user-select: none;
}

.gtpaint-modal-input {
  display: block;
  width: 82%;
  margin: 0 auto 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, white 55%, var(--aero-aqua));
  text-align: center;
  background: rgba(255,255,255,0.85);
  color: var(--text-navy);
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0,20,40,0.15);
}

.gtpaint-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.gtpaint-modal-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, white 55%, var(--aero-aqua));
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.55), color-mix(in srgb, transparent 40%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 62%, var(--xp-blue-dark)) 100%);
  color: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 0 12px var(--aero-glow-aqua);
  transition: filter var(--aero-duration-fast) var(--aero-ease-soft);
}

.gtpaint-modal-btn:hover {
  filter: brightness(1.15);
}

.gtpaint-modal-btn-secondary {
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.35), color-mix(in srgb, transparent 60%, var(--aero-aqua)) 55%, color-mix(in srgb, transparent 78%, var(--xp-blue-dark)) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .gtpaint-modal.window-opening {
    animation: none !important;
  }
}