:root {
  color-scheme: dark;
  --bg: #101918; --panel: #17221f; --panel-deep: #121c1a; --border: #30403a;
  --text: #f3f0e6; --muted: #a5b3a8; --gold: #f0c979; --teal: #92cfbb;
  --ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 44% 0, #203028 0, var(--bg) 540px); color: var(--text); font: 14px/1.45 var(--ui); }
button, input, select { font: inherit; }
button, select, input { color: var(--text); }
button { cursor: pointer; }
button:disabled, select:disabled { cursor: wait; opacity: .55; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.site-header { min-height: 65px; display: flex; align-items: center; gap: 18px; padding: 0 clamp(18px, 3vw, 50px); border-bottom: 1px solid var(--border); background: #111b19; }
.brand { display: flex; gap: 11px; align-items: center; font-weight: 560; font-size: 16px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand img { flex: none; }
.brand b { font-weight: 740; }
.header-note, .version, .eyebrow { color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .12em; }
.header-note { border-left: 1px solid #3a4942; padding-left: 17px; }
.wiki-status { margin-left: auto; padding: 6px 9px; border: 1px solid #384a40; border-radius: 5px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; }
.version { display: flex; align-items: center; gap: 7px; border: 1px solid #384a40; padding: 6px 10px; border-radius: 5px; color: #b9c9be; white-space: nowrap; }
.version i { background: #83bc9b; width: 6px; height: 6px; border-radius: 50%; }
.shell { max-width: 1920px; margin: 0 auto; padding: 25px clamp(12px, 1.5vw, 28px) 20px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.eyebrow { margin: 0; color: var(--gold); }
h1, h2, p { margin: 0; }
h1 { margin-top: 3px; font-size: clamp(29px, 4vw, 45px); line-height: 1.1; letter-spacing: -.045em; }
.intro p:not(.eyebrow) { margin-top: 7px; color: var(--muted); }
.intro-data { display: flex; gap: 7px; padding-bottom: 3px; }
.intro-data span { color: var(--muted); background: #192620; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; white-space: nowrap; }
.workspace { display: grid; grid-template-columns: 242px minmax(0, 1fr); gap: 14px; align-items: start; }
.sidebar, .map-column { display: grid; gap: 12px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.side-block { padding: 13px 14px; }
.side-block h2, .layer-panel summary { font-size: 14px; font-weight: 750; }
.layer-panel summary { cursor: pointer; padding: 13px 14px 11px; }
.layer-panel summary small { font-weight: 500; float: right; color: var(--muted); font-size: 10px; }
.layer-content { padding: 0 13px 12px; }
.layer-group { border: 0; margin: 0; padding: 5px 0 0; }
.layer-group + .layer-group { border-top: 1px solid #2a3933; margin-top: 8px; padding-top: 8px; }
.layer-heading { margin: 4px 0; font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .09em; color: var(--muted); }
.layer { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12px; cursor: pointer; }
.layer input { margin: 0 1px 0 0; width: 14px; height: 14px; accent-color: #d9b66e; }
.swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--swatch); flex: none; }
.field-label { display: block; color: var(--muted); margin: 6px 0 5px; font-size: 11px; }
select, input { min-width: 0; padding: 6px 7px; background: var(--panel-deep); border: 1px solid #3a4b43; border-radius: 4px; }
select { width: 100%; }
input { width: 100%; }
.jump-form { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; }
.jump-form label, .slice-form label { color: var(--muted); font-size: 11px; }
.jump-form button, .slice-form button { border-radius: 4px; border: 1px solid #57674b; color: #f3d38e; background: #313b28; min-height: 32px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
.side-note { color: var(--muted); margin-top: 7px; font-size: 11px; }
.easy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.easy-form > label:not(.layer) { color: var(--muted); font-size: 11px; }
.easy-form select, .easy-form input[type=number] { margin-top: 3px; }
.easy-check { grid-column: 1 / -1; }
.easy-results { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; max-height: 230px; overflow: auto; list-style: none; }
.easy-results:empty { display: none; }
.easy-result { text-align: left; width: 100%; }
.easy-result span { display: block; color: var(--muted); }
#discovery-items { max-height: 310px; overflow: auto; }
.discovery-group { border-top: 1px solid var(--border); margin-top: 6px; }
.discovery-group summary { padding: 6px 2px; color: var(--teal); font-size: 12px; }
.discovery-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 3px; }
.discovery-item .layer { line-height: 1.3; }
.discovery-item input { flex: none; }
.map-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 10px; flex-wrap: wrap; min-height: 50px; }
.segmented { display: inline-flex; gap: 3px; border: 1px solid #36463d; background: #111c18; padding: 3px; border-radius: 5px; }
.segmented button { padding: 5px 9px; background: transparent; color: #bec8bd; border: 0; border-radius: 3px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.segmented button:hover { background: #25352c; }
.segmented button[aria-pressed=true] { color: #f5d38e; background: #35412b; }
.map-instruction { color: var(--muted); font-size: 12px; }
.quiet-button, .slice-form .quiet-button { background: #192621; border: 1px solid #3c4c43; border-radius: 4px; padding: 5px 8px; color: #cad6cb; font-size: 11px; }
.map-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.share-result, .map-note { border-bottom: 1px solid var(--border); color: var(--muted); padding: 6px 12px; font-size: 11px; }
.share-result input { margin-top: 5px; }
.map-frame { position: relative; height: clamp(380px, 65vh, 800px); background: #0f1817; border-block: 1px solid var(--border); overflow: hidden; }
.map-frame canvas, .profile-frame canvas { width: 100%; height: 100%; display: block; }
.map-frame canvas { cursor: crosshair; touch-action: none; }
.map-frame canvas.dragging { cursor: grabbing; }
.map-frame canvas:focus-visible, .profile-frame canvas:focus-visible { outline-offset: -3px; }
.loading { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; background: #101918d9; padding: 18px; color: var(--muted); text-align: center; }
.loading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.map-axis, .map-coordinate, .map-legend, .map-zoom { position: absolute; border: 1px solid #465a50; background: #111c19eb; border-radius: 4px; color: #d6e0d7; }
.map-axis { top: 11px; left: 11px; padding: 5px 7px; display: grid; font-size: 10px; pointer-events: none; }
.map-coordinate { bottom: 10px; left: 10px; padding: 4px 7px; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.map-zoom { top: 11px; right: 11px; display: grid; overflow: hidden; }
.map-zoom button { border: 0; background: transparent; color: #f3e6c9; width: 35px; height: 34px; font-size: 20px; line-height: 1; }
.map-zoom button + button { border-top: 1px solid #465a50; }
.map-zoom button:hover { background: #2f4135; }
.map-legend { bottom: 10px; right: 10px; display: grid; gap: 3px; max-width: 66%; padding: 5px 8px; font-size: 10px; pointer-events: none; }
.legend-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.legend-color { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 13px; color: #171b17; font-size: 9px; font-weight: 800; border-radius: 2px; }
.inspection { min-height: 65px; display: flex; align-items: center; gap: 14px; padding: 10px 12px; flex-wrap: wrap; }
.inspection > div:first-child { display: grid; max-width: 440px; }
.inspection strong { font-size: 13px; }
.inspection span { color: var(--muted); font-size: 11px; }
.inspection .value { min-width: 55px; display: grid; }
.inspection .value b { color: var(--gold); font-size: 13px; white-space: nowrap; }
.dig-plan { border-top: 1px solid var(--border); padding: 10px 12px; }
.dig-heading, .profile-key { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.dig-heading h2 { font-size: 14px; }
#dig-results { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
#dig-results .value { display: grid; }
#dig-results .value span { color: var(--muted); font-size: 11px; }
#dig-results .value b { color: var(--gold); }
.slice-panel { padding: 13px 14px 11px; }
.slice-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.slice-heading h2 { font-size: 21px; letter-spacing: -.025em; line-height: 1.15; }
.slice-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-top: 9px; }
.slice-form fieldset { display: flex; gap: 5px; padding: 0; margin: 0; border: 0; min-width: 0; }
.slice-form legend { padding: 0; color: var(--muted); font-size: 10px; font-weight: 680; }
.endpoint { display: inline-block; width: 14px; text-align: center; color: var(--gold); }
.slice-form input { width: 73px; }
.slice-status { color: var(--muted); font-size: 11px; margin: 8px 0 7px; min-height: 16px; }
.profile-key { margin: 0 0 7px; color: var(--muted); font-size: 11px; }
.profile-highlight { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.profile-key button { color: var(--teal); }
.profile-frame { height: 202px; position: relative; border: 1px solid #34463e; border-radius: 5px; background: #101a18; overflow: hidden; }
.profile-frame canvas { cursor: crosshair; }
.profile-empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 12px; color: var(--muted); text-align: center; pointer-events: none; }
.profile-readout { min-height: 22px; color: var(--muted); font-size: 11px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sample-details { border-top: 1px solid #314039; margin-top: 4px; padding: 7px 0 1px; font-size: 11px; }
.sample-details summary { cursor: pointer; color: var(--teal); }
.sample-table-wrap { max-height: 280px; overflow: auto; margin-top: 7px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
td, th { padding: 3px 7px; text-align: right; }
th { background: #27362c; position: sticky; top: 0; }
tbody tr:nth-child(even) { background: #202d27; }
footer { padding: 16px 0 4px; color: var(--muted); font-size: 11px; }
@media (max-width: 880px) {
  .workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .intro-data { display: none; }
  .map-instruction { font-size: 11px; }
}
@media (max-width: 640px) {
  .site-header { padding: 8px 12px; gap: 7px; min-height: 56px; }
  .brand { font-size: 13px; gap: 6px; }
  .brand img { width: 32px; height: 32px; }
  .header-note { display: none; }
  .wiki-status { padding: 4px 6px; font-size: 10px; }
  .version { padding: 4px 5px; font-size: 8px; letter-spacing: .05em; }
  .shell { padding: 16px 10px; }
  .intro { margin-bottom: 12px; }
  .intro p:not(.eyebrow) { font-size: 12px; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .sidebar .layer-panel { grid-column: 1 / -1; }
  #layer-details .layer-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .layer-group + .layer-group { border-top: 0; margin-top: 0; padding-top: 5px; }
  .side-block { padding: 9px; }
  .map-toolbar { gap: 7px; }
  .map-instruction { order: 3; width: 100%; }
  .map-frame { height: clamp(385px, 58svh, 500px); }
  .map-legend { max-width: 59%; padding: 4px; }
  .slice-panel { padding: 10px; }
  .slice-form { gap: 5px; }
  .slice-form input { width: 62px; }
}