/* Website colors follow practical page roles. Music and profile specimens keep their palettes. */
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]){
  --web-canvas:#EEF0F2;
  --web-page:#FFFFFF;
  --web-raised:#F5F6F7;
  --web-ink:#22252B;
  --web-muted:#626873;
  --web-edge:#DDE0E5;
  --web-shadow:#20242C;
  --web-highlight:#FFFFFF;
  --web-shadow-soft:rgba(24,28,34,.14);
  --web-shadow-deep:rgba(24,28,34,.27);
  --web-relief-dark:#D6D9DE;
  --web-relief-light:#FFFFFF;
  --sp-bg:var(--web-canvas);
  --sp-panel:var(--web-page);
  --sp-ink:var(--web-ink);
  --sp-muted:var(--web-muted);
  --pal-edge:var(--web-edge);
  --pal-shadow-soft:var(--web-shadow-soft);
  --pal-shadow-deep:var(--web-shadow-deep);
  --pal-relief-dark:var(--web-relief-dark);
  --pal-relief-light:var(--web-relief-light);
  background:var(--web-canvas);
  color:var(--web-ink);
}

.specimen-board.specimen-website-board[data-palette="midnight"][data-demo-example="website"]:not([data-palette="original"]),
.specimen-board.specimen-website-board[data-palette-tone="dark"][data-demo-example="website"]:not([data-palette="original"]){
  --web-canvas:#101216;
  --web-page:#171A20;
  --web-raised:#20242C;
  --web-ink:#F2F4F7;
  --web-muted:#B3BAC5;
  --web-edge:#3D424D;
  --web-shadow:#000000;
  --web-highlight:#59616E;
  --web-shadow-soft:rgba(0,0,0,.3);
  --web-shadow-deep:rgba(0,0,0,.52);
  --web-relief-dark:#0D0F13;
  --web-relief-light:#303540;
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"][data-palette-base="white"]{
  --web-canvas:#FFFFFF;
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"])>.specimen-backdrop{
  display:none;
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]) .website-scroll{
  background:var(--web-page);
  color:var(--web-ink);
  scrollbar-color:var(--web-edge) transparent;
}

/* Rebind both palette roles and resolved specimen aliases inside the page. */
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]) .website-surface{
  --pal-bg:var(--web-raised);
  --pal-panel:var(--web-page);
  --pal-soft:var(--web-raised);
  --pal-ink:var(--web-ink);
  --pal-muted:var(--web-muted);
  --pal-edge:var(--web-edge);
  --pal-shadow:var(--web-shadow);
  --pal-highlight:var(--web-highlight);
  --pal-shadow-soft:var(--web-shadow-soft);
  --pal-shadow-deep:var(--web-shadow-deep);
  --pal-relief-dark:var(--web-relief-dark);
  --pal-relief-light:var(--web-relief-light);
  --sp-bg:var(--web-raised);
  --sp-panel:var(--web-page);
  --sp-ink:var(--web-ink);
  --sp-muted:var(--web-muted);
  background:var(--web-page);
  color:var(--web-ink);
}

/* Large content areas remain neutral; the existing geometry and elevation are preserved. */
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]) .website-hero{
  background:var(--web-page);
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]) .website-services>article,
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]) .website-project{
  background:var(--web-page);
}

/* Soft relief needs a material slightly darker than its white highlight. */
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]):is(.style-neumorphic,.style-clay) .website-surface{
  --pal-bg:var(--web-raised);
  --sp-panel:var(--web-raised);
  background:var(--web-raised);
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]):is(.style-neumorphic,.style-clay) .website-hero,
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]):is(.style-neumorphic,.style-clay) .website-services>article,
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]):is(.style-neumorphic,.style-clay) .website-project{
  background:var(--web-raised);
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]).style-skeuomorphic .website-hero{
  background:linear-gradient(var(--web-page),var(--web-raised));
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]).style-artdeco .website-hero{
  background:repeating-linear-gradient(60deg,transparent 0,transparent 25px,color-mix(in srgb,var(--pal-accent) 4%,transparent) 25px,color-mix(in srgb,var(--pal-accent) 4%,transparent) 26px),var(--web-page);
}

.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]).style-y2k .website-hero,
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]).style-y2k .website-services>article,
.specimen-board.specimen-website-board[data-palette][data-demo-example="website"]:not([data-palette="original"]).style-y2k .website-project{
  background:linear-gradient(135deg,var(--web-page),var(--web-raised));
}