h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit; }
header, nav, main, section, article, aside, footer, figure, figcaption, search, hgroup { margin: 0; padding: 0; border: 0; }
/* LP12 control boundary, LP13 placement: the palette now sits in the stage
   dock's tools row (site.css). The inner box arranges three fixed item boxes
   (panel_palette_items_outer / panel_palette_items_inner are the permanent
   flex pair). Native buttons own interaction; context tags own no paint. */
.panel_palette_inner { display: flex; align-items: center; }
.panel_palette_item { width: 44px; height: 52px; }
.panel_palette_button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--surface_ink);
  cursor: pointer;
  touch-action: manipulation;
}
.panel_palette_chip {
  display: block;
  width: 26px;
  height: 34px;
  border: 1px solid #000;
  border-radius: 0;
  box-sizing: border-box;
}
.panel_palette_chip_paper { background: #f4ecd8; }
.panel_palette_chip_blue { background: #274d67; }
.panel_palette_chip_red { background: #572d35; }
.panel_palette_button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.panel_palette_button:hover .panel_palette_chip { box-shadow: 0 0 0 2px var(--surface_ink); }
.panel_palette_button:focus-visible { outline: 2px solid var(--surface_ink); outline-offset: 1px; }
/* Keep a dark, quiet disc behind the requested white OFF mark so the icon
   stays legible on the paper top bar. ON keeps the existing green signal. */
.a_plus .site_header .sound_control_header[aria-pressed="false"] { background: #687469; }
.a_plus .site_header .sound_control_header[aria-pressed="false"] .sound_star { background: #fff; box-shadow: none; }
.a_plus .site_header .sound_control_header[aria-pressed="false"] .sound_arc { border-top-color: #ffffffb3; border-right-color: #ffffffb3; }
.a_plus .opening_skip { display: inline-flex; align-items: center; gap: 12px; }
.a_plus .opening_skip_icon { display: block; flex: 0 0 auto; }

/* LP13: the three color cards ride as a small deck in the tools row, so the
   row stays narrow. Pointer or keyboard focus fans them out; pressing the deck
   opens the row of three. panel_palette_deck_outer / _inner are a fixed pair. */
.panel_palette_deck_outer { position: relative; display: flex; align-items: center; }
.panel_palette_deck {
  position: relative;
  display: block;
  width: 42px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--surface_ink);
  cursor: pointer;
  touch-action: manipulation;
}
.panel_palette_deck_cards { position: absolute; inset: 0; display: block; }
.panel_palette_deck_card {
  position: absolute;
  bottom: 8px;
  left: 7px;
  z-index: calc(3 - var(--deck_depth));
  transform: translate(calc(var(--deck_depth) * 2px), calc(var(--deck_depth) * 3px)) rotate(calc(var(--deck_depth) * 3deg));
  transform-origin: 50% 100%;
  transition: transform 190ms cubic-bezier(.2, .9, .25, 1.1);
}
.panel_palette_deck_card_paper { --deck_slot: 0; --deck_depth: 0; }
.panel_palette_deck_card_blue { --deck_slot: 1; --deck_depth: 1; }
.panel_palette_deck_card_red { --deck_slot: 2; --deck_depth: 2; }
.panel_palette_deck:hover .panel_palette_deck_card,
.panel_palette_deck:focus-visible .panel_palette_deck_card,
.panel_palette_deck[aria-expanded="true"] .panel_palette_deck_card {
  transform: translate(calc((var(--deck_slot) - 1) * 4px), -3px) rotate(calc((var(--deck_slot) - 1) * 16deg));
}
.panel_palette_deck:focus-visible { outline: 2px solid var(--surface_ink); outline-offset: 2px; }
.panel_palette_items_outer {
  position: absolute;
  right: -7px;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid var(--surface_line);
  border-radius: 6px;
  background: var(--surface_control);
  box-shadow: 0 12px 30px var(--surface_shadow);
  transform-origin: right bottom;
  animation: panel_palette_open 190ms cubic-bezier(.2, .8, .2, 1) both;
}
.panel_palette_items_outer[hidden] { display: none; }
@keyframes panel_palette_open {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel_palette_deck_card { transition: none; }
  .panel_palette_items_outer { animation: none; }
}

/* LP13 deal mode (panel_palette_deal on .panel_palette_outer). Pressing the
   deck deals the three cards into the row, top card first, 70 ms apart. The
   row has no frame, and the deck stays empty while the cards are out. Closing
   gathers them back, the chosen card last. Remove the class in shell.html to
   return to the framed row. */
.panel_palette_deal .panel_palette_items_outer {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.panel_palette_deal .panel_palette_chip,
.panel_palette_deal .panel_palette_deck_card { box-shadow: 0 4px 10px var(--surface_shadow); }
/* The flying card is only a picture: the button box takes the pointer, so a
   card passing under the mouse does not light up. While the cards wait on the
   deck, the top card stays on top (--deal_z from the deck order). */
.panel_palette_deal .panel_palette_chip { pointer-events: none; }
.panel_palette_deal .panel_palette_item { z-index: var(--deal_z, auto); }
.panel_palette_deal .panel_palette_deck_card {
  transition: transform 190ms cubic-bezier(.2, .9, .25, 1.1), opacity 0s linear var(--deal_delay, 0ms);
}
.panel_palette_deal .panel_palette_deck_empty .panel_palette_deck_card { opacity: 0; }
.panel_palette_deal .panel_palette_deck_gathering .panel_palette_deck_card {
  transform: translate(calc((var(--deck_slot) - 1) * 4px), -3px) rotate(calc((var(--deck_slot) - 1) * 16deg));
}
.panel_palette_deal .panel_palette_items_dealing .panel_palette_chip {
  animation: panel_palette_deal_out 260ms cubic-bezier(.2, .8, .25, 1) var(--deal_delay, 0ms) both;
}
.panel_palette_deal .panel_palette_items_gathering .panel_palette_chip {
  animation: panel_palette_gather 200ms cubic-bezier(.4, 0, .6, 1) var(--deal_delay, 0ms) both;
}
.panel_palette_deal .panel_palette_items_dealing .panel_palette_button::after {
  animation: panel_palette_dot_in 140ms ease 320ms both;
}
.panel_palette_deal .panel_palette_items_gathering .panel_palette_button::after { opacity: 0; }
/* The cards never fade: each one waits exactly over its deck card, and lands
   exactly on it, so the deck can switch at once without a blink. */
@keyframes panel_palette_deal_out {
  from { transform: translate(var(--deal_x), var(--deal_y)) rotate(var(--deal_turn)); }
  to { transform: none; }
}
@keyframes panel_palette_gather {
  from { transform: none; }
  to { transform: translate(var(--deal_x), var(--deal_y)) rotate(var(--deal_turn)); }
}
@keyframes panel_palette_dot_in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .panel_palette_deal .panel_palette_items_outer .panel_palette_chip,
  .panel_palette_deal .panel_palette_items_outer .panel_palette_button::after { animation: none; }
  .panel_palette_deal .panel_palette_deck_card { transition: none; }
}