/* src/figure.css */
:root {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --page: #0a0a0a;
  --card: #121212;
  --card-edge: #1d1d1d;
  --muted: #5b5b5b;
  --label: #8c8c8c;
  --text: #c4c4c4;
  --line: #3b3b3b;
  --line-crease: var(--detail);
  --detail: #2d2d2d;
  --hi: #ececec;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--page);
  font-family: var(--mono);
  place-items:  center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

.card {
  position: relative;
  aspect-ratio: 1678 / 1409;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(120% 90% at 50% 40%, #151515, var(--card) 70%);
  border: 1px solid var(--card-edge);
  user-select: none;
  border-radius: clamp(16px, 3vw, 28px);
  width: min(880px, 100%);
  padding: clamp(16px, 3.4vw, 30px) clamp(16px, 3.8vw, 34px);
}

.card header, .card footer {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.card header {
  grid-row: 1;
}

.card footer {
  grid-row: 3;
}

.card header, .card footer {
  display: flex;
  letter-spacing: .14em;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: clamp(9px, 1.5vw, 13px);
}

.card header span, .card footer span {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .card header, .card footer {
    letter-spacing: .06em;
    gap: 3px 8px;
    font-size: clamp(7.5px, 2vw, 10px);
  }
}

.card .fig {
  color: var(--label);
  letter-spacing: .04em;
}

.card .title, .card .hint {
  color: var(--muted);
  text-transform: uppercase;
}

.card .status {
  color: var(--text);
  letter-spacing: .08em;
}

.card svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.edge, .detail {
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .16s;
}

.edge {
  stroke: var(--line);
}

.sil {
  stroke: var(--line-sil, var(--line));
}

.crease {
  stroke: var(--line-crease, var(--line));
}

.detail {
  stroke: var(--detail);
}