.personal-records {
  display: none;
  position: relative;
  z-index: 3;
  min-height: 72svh;
  padding: 96px clamp(24px,6vw,88px) 150px;
  border-top: 1px solid rgba(224,232,238,.1);
  background:
    linear-gradient(180deg,rgba(1,4,8,.66),rgba(2,7,12,.9)),
    radial-gradient(circle at 72% 12%,rgba(211,224,232,.055),transparent 38%);
}

html[data-crossroad-phase="postlaunch"] .personal-records { display: block; }

.personal-records::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-w) + var(--axis-x));
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(rgba(222,231,237,.08),rgba(222,231,237,.26),transparent);
  box-shadow: 0 0 22px rgba(221,230,236,.06);
}

.personal-records-head {
  max-width: 980px;
  margin-left: calc(var(--rail-w) + var(--axis-x) + 56px);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.personal-records-kicker {
  margin: 0 0 13px;
  color: #aab7c2;
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .28em;
}

.personal-records-head h2 {
  margin: 0;
  color: var(--silver);
  font: 700 clamp(34px,5vw,58px)/.9 var(--display);
  letter-spacing: .08em;
}

.personal-records-intro {
  max-width: 480px;
  margin: 19px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .055em;
}

.personal-records-manage {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid rgba(222,231,237,.24);
  background: rgba(255,255,255,.02);
  color: var(--silver);
  padding: 10px 15px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
}

.personal-records-manage:hover,
.personal-records-manage:focus-visible { border-color: var(--silver); outline: none; }

.personal-records-count {
  margin: 34px 0 15px calc(var(--rail-w) + var(--axis-x) + 56px);
  color: #6f7c87;
  font: 700 9px/1 var(--mono);
  letter-spacing: .18em;
}

.personal-records-list {
  max-width: 980px;
  margin-left: calc(var(--rail-w) + var(--axis-x) + 56px);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.personal-records-empty {
  grid-column: 1 / -1;
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  border: 1px solid rgba(222,231,237,.12);
  background: rgba(0,3,6,.4);
  color: var(--muted);
  text-align: center;
  font: 600 12px/1.7 var(--mono);
  letter-spacing: .07em;
}

.personal-records-empty button {
  border: 1px solid rgba(222,231,237,.22);
  background: transparent;
  color: var(--silver);
  padding: 11px 15px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  cursor: pointer;
}

.personal-record {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 172px minmax(0,1fr);
  min-height: 142px;
  border: 1px solid rgba(222,231,237,.13);
  background: linear-gradient(145deg,rgba(222,231,237,.035),rgba(0,3,6,.78));
  overflow: hidden;
}

.personal-record.is-featured { grid-column: 1 / -1; grid-template-columns: minmax(260px,42%) minmax(0,1fr); min-height: 218px; }
.personal-record::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(222,231,237,.38); }
.personal-record.is-featured::before { background: var(--silver); box-shadow: 0 0 18px rgba(222,231,237,.22); }

.personal-record-media { position: relative; min-height: 142px; background: #010509; overflow: hidden; }
.personal-record.is-featured .personal-record-media { min-height: 218px; }
.personal-record-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.65) contrast(1.06); transition: opacity 220ms,filter 220ms,transform 500ms; }
.personal-record:hover .personal-record-media img { opacity: .82; filter: saturate(.9) contrast(1.04); transform: scale(1.015); }
.personal-record-play { position: absolute; inset: 0; display: grid; place-items: center; color: white; text-decoration: none; background: radial-gradient(circle,transparent 15%,rgba(0,0,0,.34)); }
.personal-record-play span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); font-size: 15px; background: rgba(1,5,9,.46); }

.personal-record-body { min-width: 0; padding: 17px 18px 15px; }
.personal-record-state { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #8e9aa5; font: 700 8px/1.2 var(--mono); letter-spacing: .16em; }
.personal-record-state time { color: #77838d; }
.personal-record h3 { margin: 17px 0 10px; color: var(--silver); font: 700 15px/1.45 var(--mono); letter-spacing: .045em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.personal-record.is-featured h3 { margin-top: 24px; font-size: clamp(18px,2.2vw,25px); }
.personal-record-meta { margin: 0; color: var(--muted); font: 600 9px/1.5 var(--mono); letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-record-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.personal-record-tags span { border: 1px solid rgba(222,231,237,.13); padding: 4px 6px; color: #87939e; font: 600 8px/1 var(--mono); letter-spacing: .07em; }
.personal-record-note { margin: 14px 0 0; color: #71808c; font-size: 11px; line-height: 1.7; letter-spacing: .04em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.personal-records-phase-mark {
  position: absolute;
  top: 20px;
  right: clamp(24px,6vw,88px);
  color: #53616c;
  font: 700 8px/1 var(--mono);
  letter-spacing: .2em;
}

@media (max-width:900px) {
  .personal-records-list { grid-template-columns: 1fr; }
  .personal-record.is-featured { grid-column: auto; }
}

@media (max-width:760px) {
  .personal-records { padding: 76px 14px 110px; }
  .personal-records::before { left: var(--axis-x); }
  .personal-records-head,.personal-records-list { margin-left: calc(var(--axis-x) + 32px); }
  .personal-records-head { align-items: flex-start; flex-direction: column; }
  .personal-records-count { margin-left: calc(var(--axis-x) + 32px); }
  .personal-records-manage { width: 100%; }
  .personal-record,.personal-record.is-featured { grid-template-columns: 110px minmax(0,1fr); min-height: 142px; }
  .personal-record.is-featured .personal-record-media { min-height: 142px; }
  .personal-record.is-featured h3 { margin-top: 17px; font-size: 15px; }
  .personal-record-body { padding: 13px; }
  .personal-record-note { display: none; }
  .personal-records-phase-mark { right: 14px; }
}

@media (max-width:440px) {
  .personal-record,.personal-record.is-featured { grid-template-columns: 88px minmax(0,1fr); }
  .personal-record-state time { display: none; }
  .personal-record-tags span:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion:reduce) { .personal-record-media img { transition: none; } }