:root {
  --panel: rgba(13, 16, 26, 0.55);
  --line: rgba(255, 255, 255, 0.09);
  --txt: #e8ecf4;
  --mut: #8b94a8;
  --cyan: #67e8f9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  background: #f5f4ef;
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bond-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  width: 100%;
  aspect-ratio: 8 / 5;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  container: bond-frame / inline-size;
  border: 1px solid var(--widget-border, #313744);
  border-radius: var(--widget-radius, 20px);
  background: #f5f4ef;
}

.bond-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  margin: 8px;
  padding: 16px;
  overflow-y: auto;
  color: #18181b;
  background: #fff;
  border: 1px solid #e4e3de;
  border-radius: 12px;
}

.bond-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 8px 8px 8px 0;
  overflow: visible;
  border-radius: 12px;
  background: transparent;
}

#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: transparent; cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }

.hud { position: absolute; z-index: 10; }

/* ---- top left: title ---- */
.top-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; user-select: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#molecule-switch-host { width: calc(100% + 16px); margin: -8px -8px 0; }
.molecule-switch { width: 100%; max-width: 100%; }
.top-left .sub {
  width: 100%; margin-top: 8px; color: #242433; opacity: .5;
  font: 500 16px/20px "ALTMistral", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: normal;
}

/* ---- glass panels ---- */
.panel {
  padding-top: 12px;
}

/* ---- top right: readouts ---- */
.top-right { user-select: none; }
.row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0;
  color: #18181b; font: 500 14px/20px "ALTMistral", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
}
.row .k { color: #6d6d78; }
.row .k sub { font-size: 11px; }
.row .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .v.scf-loading {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 20px;
}
.row .v.scf-loading::after {
  content: ""; display: block; flex: none; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid #b8b8bd; border-top-color: #27272a; border-radius: 50%;
  animation: spin .9s linear infinite;
}
.bond-controls { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#density-control-host { margin-top: -6px; padding-top: 12px; border-top: 1px solid #e4e3de; }
#density-control-host:empty { display: none; }

/* CTF Speedrun's sliding selector for the mutually exclusive orbitals. */
.bottom-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; margin-bottom: -8px; padding-top: 8px; }
#orbitals .orbital-switch { margin-left: -8px; }
.orbital-switch {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 2px; padding: 2px; border: 1px solid #e4e3de;
  border-radius: 7.5px; background: #f5f4ef; box-sizing: border-box;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.orbital-switch-thumb {
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 0;
  border-radius: 3.75px; background: #fbfbf8; outline: 1px solid #e4e3de;
  pointer-events: none; z-index: 0;
  transition: transform .35s cubic-bezier(.22, 1.1, .36, 1), width .35s cubic-bezier(.22, 1.1, .36, 1);
}
.orbital-switch button {
  appearance: none; cursor: pointer; position: relative; z-index: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  height: 26.25px; padding: 0 9.375px; border: 0; border-radius: 3.75px;
  background: transparent; color: #18181b;
  font: 500 13.125px/18.75px "ALTMistral", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em; opacity: .5; transition: opacity .2s ease;
  -webkit-user-select: none; user-select: none;
}
.orbital-switch button:hover { opacity: .75; }
.orbital-switch button[aria-pressed="true"] { opacity: 1; }
.orbital-switch button:focus-visible { outline: 2px solid #fa500f; outline-offset: 1px; }
.molecule-switch button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}
.molecule-switch button[aria-pressed="true"] { font-weight: 600; }

/* Timestral's 28 × 16 covariate toggle for ground-state density. */
#density-control-host .density-control {
  appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 0; border: 0; background: transparent; color: #18181b;
  font: 500 14px/20px "ALTMistral", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em; white-space: nowrap; cursor: pointer;
}
#density-control-host .density-control:focus-visible { outline: 2px solid #343446; outline-offset: 2px; }
.density-switch {
  position: relative; box-sizing: border-box; flex: none; width: 28px; height: 16px;
  border: 1px solid #c9c9c4; border-radius: 999px; background: #c9c9c4;
  transition: background-color .15s ease, border-color .15s ease;
}
.density-switch-thumb {
  position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: #fbfbf8; transition: transform .15s ease;
}
.density-control[aria-checked="true"] .density-switch { background: #343446; border-color: #343446; }
.density-control[aria-checked="true"] .density-switch-thumb { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) {
  .orbital-switch-thumb, .density-switch, .density-switch-thumb { transition: none; }
}

/* Malware Triage's right-edge scrubber, with the same hover and drag states. */
.bond-stage {
  --triage-inner-inset: 8px;
  --white: var(--color-surface-card, #fff);
  --border: var(--color-border-primary, #e4e3de);
}
.spark{position:absolute;top:0;right:0;bottom:0;left:auto;z-index:40;
  --notch-max:18px;--pill-pad-x:6px;
  --notch-park-x:calc(var(--notch-max) / 2 + var(--pill-pad-x) + var(--triage-inner-inset,8px));
  width:calc(var(--notch-max) + 2 * var(--pill-pad-x));
  min-width:calc(var(--notch-max) + 2 * var(--pill-pad-x));
  min-height:0;display:flex;align-items:center;margin:0;padding:0;background:none;border:none;
  pointer-events:none;transition:transform .36s cubic-bezier(.2,.75,.2,1);}
.strip{position:relative;z-index:1;pointer-events:auto;--notch-grey:#b8b8bd;--notch-h:3px;--notch-w:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;width:100%;height:calc(100% - 48px);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.strip::before{content:"";position:absolute;z-index:2;pointer-events:auto;top:-16px;bottom:-16px;left:-8px;right:calc(-1 * var(--triage-inner-inset,8px));}
.pill{position:absolute;z-index:0;pointer-events:none;
  top:0;height:0;right:0;left:0;
  border-radius:calc(var(--notch-max,18px) / 2 + var(--pill-pad-x,6px));
  background:color-mix(in srgb,var(--white,#fff) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--border,#e4e3de) 55%,transparent),0 6px 18px rgb(0 0 0 / .08);
  opacity:0;transform:translateX(var(--notch-park-x)) scaleX(.72);transform-origin:center center;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.2,1);}
.strip:hover ~ .pill,.strip.hot ~ .pill,.strip.scrubbing ~ .pill,.spark:hover .pill{opacity:1;transform:translateX(0) scaleX(1);}
.strip.scrubbing,.bond-frame.scrubbing,.bond-frame.scrubbing *{cursor:grabbing;}
.bond-frame.scrubbing,.bond-frame.scrubbing *{-webkit-user-select:none;user-select:none;}
.bond-frame.scrubbing ::selection{background:transparent;}
.strip i{flex:none;box-sizing:border-box;height:var(--notch-h);width:var(--notch-w);
  background-color:var(--notch-grey);
  position:relative;z-index:1;pointer-events:none;cursor:inherit;border-radius:999px;
  transform-origin:center center;
  transform:translateX(calc(var(--notch-park-x) - var(--park-shift, 0px)));
  transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.strip:hover i,.strip.hot i,.strip.scrubbing i,.spark:hover .strip i{transform:none;}
.strip i.selected{background-color:#27272a;}
.strip:focus-visible{outline:2px solid #27272a;outline-offset:4px;border-radius:8px;}
.scrub-distance{position:absolute;z-index:2;left:0;top:50%;
  transform:translate(-100%,-50%);white-space:nowrap;pointer-events:none;
  color:#18181b;font-family:"ALTMistral",ui-sans-serif,system-ui,sans-serif;
  font-size:.875rem;line-height:1.25rem;font-style:normal;font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:.02em;}
.distance-digit-cell{position:relative;display:inline-block;width:1ch;line-height:inherit;vertical-align:baseline;}
.distance-digit-cell::before{content:"0";visibility:hidden;}
.distance-digit{position:absolute;inset:0;display:block;text-align:center;}
.distance-digit.in-up{animation:distance-in-up .36s ease-out both;}
.distance-digit.out-up{animation:distance-out-up .36s ease-out both;}
.distance-digit.in-down{animation:distance-in-down .36s ease-out both;}
.distance-digit.out-down{animation:distance-out-down .36s ease-out both;}
@keyframes distance-in-up{from{transform:translateY(70%);opacity:0;}to{transform:none;opacity:1;}}
@keyframes distance-out-up{from{transform:none;opacity:1;}to{transform:translateY(-70%);opacity:0;}}
@keyframes distance-in-down{from{transform:translateY(-70%);opacity:0;}to{transform:none;opacity:1;}}
@keyframes distance-out-down{from{transform:none;opacity:1;}to{transform:translateY(70%);opacity:0;}}

/* ---- bottom right: energy curve ---- */
.bottom-right { right: 28px; bottom: 28px; padding: 12px 14px 9px; user-select: none; }
#curve { display: block; }
.caption { margin-top: 5px; font-size: 9.5px; color: var(--mut); letter-spacing: 0.06em; text-align: right; }
.caption sub { font-size: 7.5px; }

/* ---- loading overlay ---- */
#loading {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  gap: 12px; background: transparent; color: #6d6d78;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.bottom-right { display: none; }

@media (max-width: 700px) {
  .bond-frame { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; }
  .bond-side { margin: 8px; gap: 12px; }
  .bond-controls { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-inline: -8px; }
  .bottom-left { order: 0; margin: 0; padding: 0; }
  #orbitals .orbital-switch { margin-left: 0; }
  #density-control-host { order: 1; margin: 0; padding: 0; border: 0; }
  #density-control-host .density-control { width: auto; }
  .bond-stage { height: 440px; flex: none; margin: 0 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .spark { transition: none; }
}