/* Black Hole Lab: gallery styling. Warm paper-white type on near-black, brass hairlines. No external fonts. */
:root {
  --ink: #06070a;
  --paper: #ece4d3;
  --paper-dim: rgba(236, 228, 211, .62);
  --paper-faint: rgba(236, 228, 211, .38);
  --brass: #c9a563;
  --brass-dim: rgba(201, 165, 99, .45);
  --hair: rgba(201, 165, 99, .28);
  --glass: rgba(8, 9, 13, .62);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --panel-w: 316px;
  --pad: clamp(16px, 2.2vw, 32px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--ink); color: var(--paper); overflow: hidden; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#overlay { touch-action: none; cursor: grab; }
#overlay.over-body { cursor: grab; }
#overlay.dragging { cursor: grabbing; }
b { font-weight: 600; }
kbd { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 1px 5px; border: 1px solid var(--hair); border-radius: 3px; color: var(--paper-dim); }
h1, h2, p, dl, dd, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---- plaque (title) ---- */
.plaque { position: fixed; left: var(--pad); top: var(--pad); max-width: min(460px, calc(100vw - var(--panel-w) - 4 * var(--pad))); pointer-events: none; }
.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 12px; }
.eyebrow .sep { flex: 0 0 34px; height: 1px; background: var(--brass-dim); }
.plaque h1 { font-weight: 400; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.012em; margin: 14px 0 12px; text-shadow: 0 2px 30px rgba(0, 0, 0, .8); }
.plaque .sub { font-style: italic; font-size: 15px; line-height: 1.5; color: var(--paper-dim); max-width: 36ch; text-shadow: 0 1px 12px #000; }
.plaque .sub b { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--paper); font-weight: 500; }

/* ---- specimen data card ---- */
.specimen { position: fixed; left: var(--pad); bottom: var(--pad); width: 292px; padding: 16px 18px 12px; background: var(--glass); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hair); }
.specimen::before, .panel::before { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-left: 2px solid var(--brass); border-top: 2px solid var(--brass); pointer-events: none; }
.specimen h2, .panel h2 { font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); display: flex; justify-content: space-between; align-items: center; }
.live { color: var(--paper-faint); letter-spacing: .14em; display: inline-flex; align-items: center; gap: 6px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #7fd3a4; box-shadow: 0 0 8px #7fd3a4; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.specimen dl { margin-top: 12px; }
.specimen dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(236, 228, 211, .08); }
.specimen dl > div.gap { margin-top: 8px; border-top: 1px solid var(--hair); padding-top: 10px; }
.specimen dt { font-size: 13.5px; color: var(--paper-dim); }
.specimen dt em { display: block; font: 400 10px/1.5 var(--mono); letter-spacing: .04em; color: var(--paper-faint); font-style: normal; }
.specimen dd { font-family: var(--mono); font-size: 15px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.specimen dd b { font-weight: 500; }
.specimen dd small { color: var(--paper-faint); font-size: 10.5px; margin-left: 5px; letter-spacing: .06em; }
#log { list-style: none; padding: 0; margin-top: 10px; min-height: 54px; font: 400 10.5px/1.55 var(--mono); color: var(--paper-faint); letter-spacing: .02em; }
#log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fadein .6s ease; }
#log li:first-child { color: var(--paper-dim); }
#log li.swallow { color: #e8a37a; }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } }

/* ---- control panel ---- */
.panel { position: fixed; right: var(--pad); top: var(--pad); bottom: var(--pad); width: var(--panel-w); padding: 18px 22px 14px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--hair); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--brass-dim) transparent; display: flex; flex-direction: column; }
.panel-toggle { display: none; }
#panelBody { display: flex; flex-direction: column; gap: 14px; }
.panel section { display: flex; flex-direction: column; gap: 10px; }
.panel section + section { padding-top: 13px; border-top: 1px solid rgba(236, 228, 211, .08); }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.ctl .name { font-size: 15px; }
.ctl output { font: 500 12.5px/1 var(--mono); color: var(--brass); font-variant-numeric: tabular-nums; }
.ctl input { grid-column: 1 / -1; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--brass) var(--fill, 50%), rgba(236, 228, 211, .22) var(--fill, 50%)); }
input[type=range]::-moz-range-track { height: 1px; background: rgba(236, 228, 211, .22); }
input[type=range]::-moz-range-progress { height: 1px; background: var(--brass); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -6px; background: var(--ink); border: 1.5px solid var(--brass); transform: rotate(45deg); transition: background .15s, box-shadow .15s; }
input[type=range]::-moz-range-thumb { width: 11px; height: 11px; background: var(--ink); border: 1.5px solid var(--brass); border-radius: 0; transform: rotate(45deg); }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { background: var(--brass); box-shadow: 0 0 14px rgba(201, 165, 99, .55); }

.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggle { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: transparent; color: var(--paper-dim); border: 1px solid rgba(236, 228, 211, .14); font: 400 14px var(--serif); cursor: pointer; text-align: left; transition: border-color .15s, color .15s, background .15s; }
.toggle i { flex: 0 0 auto; width: 18px; height: 10px; border: 1px solid var(--paper-faint); border-radius: 6px; position: relative; transition: border-color .15s; }
.toggle i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-faint); transition: transform .18s, background .15s; }
.toggle[aria-checked=true] { color: var(--paper); border-color: var(--brass-dim); background: rgba(201, 165, 99, .07); }
.toggle[aria-checked=true] i { border-color: var(--brass); }
.toggle[aria-checked=true] i::after { background: var(--brass); transform: translateX(8px); }
.toggle:hover { border-color: var(--brass); }

.actions { flex-direction: row !important; gap: 10px !important; }
.btn { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: transparent; border: 1px solid var(--brass-dim); color: var(--paper); font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s, transform .08s; }
.btn:hover { border-color: var(--brass); background: rgba(201, 165, 99, .1); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: rgba(201, 165, 99, .16); border-color: var(--brass); }
.btn.primary:hover { background: rgba(201, 165, 99, .28); }
.hint { font-size: 12.5px; line-height: 1.55; font-style: italic; color: var(--paper-faint); margin-top: 4px; }
.hint b { font-style: normal; color: var(--paper-dim); font-weight: 500; }

/* ---- field note ---- */
.note { position: fixed; bottom: var(--pad); left: calc(var(--pad) * 2 + 292px); right: calc(var(--pad) * 2 + var(--panel-w)); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.note .kicker { font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin-bottom: 9px; }
.note .text { font-style: italic; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.5; color: var(--paper); max-width: 52ch; text-shadow: 0 1px 14px #000, 0 0 3px #000; transition: opacity .8s ease; }
.note.fade .text, .note.fade .kicker { opacity: 0; }
.note .kicker { transition: opacity .8s ease; }

.fallback { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; background: var(--ink); padding: 24px; }
.fallback[hidden] { display: none; }
.fallback h2 { font-weight: 400; font-size: 28px; }
.fallback p { color: var(--paper-dim); max-width: 46ch; font-style: italic; }

/* ---- smaller screens: panel becomes a bottom sheet ---- */
@media (max-width: 900px) {
  :root { --panel-w: 100vw; }
  .plaque { max-width: calc(100vw - 2 * var(--pad)); }
  .plaque .sub { display: none; }
  .specimen { left: var(--pad); right: var(--pad); width: auto; bottom: auto; top: 108px; padding: 10px 12px 8px; }
  .specimen dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; margin-top: 8px; }
  .specimen dt em, #log { display: none; }
  .specimen dl > div.gap { margin-top: 0; border-top: 0; padding-top: 6px; }
  .specimen dt { font-size: 11.5px; } .specimen dd { font-size: 13px; }
  .panel { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 46vh; padding: 12px 18px 16px; border-width: 1px 0 0; }
  .panel-toggle { display: block; background: none; border: 0; color: var(--brass); font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; padding: 4px 0 10px; text-align: left; cursor: pointer; }
  .panel.collapsed #panelBody { display: none; }
  .note { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }