/* Shared, static instructions for the five Startseite explorers. */
#startseite .start-interaction-help.start-interaction-help .interaction-help-lead { display:flex; align-items:center; gap:16px; margin-top:12px; }
#startseite .start-interaction-help.start-interaction-help .interaction-help-example { width:80px; height:52px; flex:0 0 80px; color:var(--help-accent); }
#startseite .interaction-help-orbit { animation:interaction-help-orbit 8s linear infinite; }
@keyframes interaction-help-orbit { to { stroke-dashoffset:-100; } }
@media(prefers-reduced-motion:reduce) { #startseite .interaction-help-orbit { animation:none; } }
#startseite .formula-explorer .formula-symbols { padding:0; border:0; background:none; }
#startseite .formula-explorer .formula-symbols > summary { box-sizing:border-box; width:100%; }
#startseite .formula-explorer .formula-symbols > :not(summary) { margin-left:18px; margin-right:18px; }
/* Reuse the navigation's moving edge, without its pill shape or surface shimmer. */
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary) {
  --control-light:var(--topic-color,var(--formula-accent,var(--dm-gold,#bda866)));
  --control-neutral:#101111;
  --control-ink:#e5e5e5;
  --control-fill:var(--control-neutral);
  border:2px solid color-mix(in srgb,var(--control-ink) 18%,transparent);
  border-radius:4px;
  background:var(--control-fill);
  position:relative;
  isolation:isolate;
  box-shadow:none;
  cursor:pointer;
}
:root[data-theme="light"] #startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary) {
  --control-neutral:#f7f7f7;
  --control-ink:#252525;
}
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary)::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2.4px;
  pointer-events:none;
  background:conic-gradient(from var(--magnetare-button-angle),transparent 0 61%,color-mix(in srgb,var(--control-light) 76%,white) 68%,white 73%,var(--control-light) 78%,transparent 86% 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);
  animation:magnetare-button-edge 8s linear infinite;
}
@media(prefers-reduced-motion:reduce) {
  #startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary)::before { animation:none; }
}
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button[aria-pressed="true"],button[aria-expanded="true"],details[open] > summary) {
  --control-fill:color-mix(in srgb,var(--control-ink) 12%,var(--control-neutral));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--control-ink) 45%,transparent);
}
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary):is(:hover,:focus-visible) {
  --control-fill:color-mix(in srgb,var(--control-ink) 16%,var(--control-neutral));
}
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary):active {
  box-shadow:inset 0 2px 4px #0004;
}
#startseite#startseite :is(.spectrum-card,.periodic-card,.standardmodel-card,.formula-explorer,#dark-matter-candidates) :is(button,summary):focus-visible {
  outline:3px solid var(--diagram-text,var(--formula-text,var(--dm-text,#f4efdf)));
  outline-offset:3px;
}
#startseite#startseite :is(.foundation-disclosure,.element-notes,.formula-symbols) > summary { padding-left:18px; padding-right:18px; }
#startseite#startseite :is(.origin-filter,.particle-filter,.particle-topic-button,.spectrum-detail-button,.spectrum-line-button) { padding-left:16px; padding-right:16px; }
#startseite#startseite .element-table li:has(.element-button) { border-color:transparent; background:transparent; }
#startseite .start-interaction-help.start-interaction-help {
  --help-text:#f4efdf; --help-muted:#d2cfc5; --help-accent:#e8c66c;
  box-sizing:border-box; padding:20px; margin:18px 0; border:1px solid #8e7845;
  border-left:4px solid var(--help-accent); border-radius:6px;
  background:#201f19; color:var(--help-text); text-align:left;
}
:root[data-theme="light"] #startseite .start-interaction-help.start-interaction-help {
  --help-text:#29251a; --help-muted:#514b3c; --help-accent:#795a0c; background:#f5efdf;
}
#startseite .start-interaction-help.start-interaction-help h4 { margin:0; font-size:20px; line-height:1.35; color:var(--help-text); }
#startseite .start-interaction-help.start-interaction-help p { margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--help-muted); }
#startseite .start-interaction-help.start-interaction-help .interaction-help-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:20px 0 0; padding:0; list-style:none; }
#startseite .start-interaction-help.start-interaction-help li { display:flex; gap:12px; padding:0; margin:0; min-width:0; background:none; border:0; }
#startseite .start-interaction-help.start-interaction-help li::before { content:none; }
#startseite .start-interaction-help.start-interaction-help svg { width:32px; height:32px; flex:0 0 32px; fill:none; stroke:var(--help-accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#startseite .start-interaction-help.start-interaction-help strong { display:block; margin:0; color:var(--help-text); font-size:16px; line-height:1.5; }
#startseite .start-interaction-help.start-interaction-help .interaction-help-keyboard { border-top:1px solid #8e784566; margin-top:18px; padding-top:10px; font-size:13px; }
@media(max-width:900px) {
  #startseite .start-interaction-help.start-interaction-help .interaction-help-steps { grid-template-columns:1fr; gap:18px; }
  #startseite .start-interaction-help.start-interaction-help { padding:16px; }
}