/* Public face. Sharp, lantern-orange, not a card dashboard. Ops keeps style.css. */

body:not(.ops) {
  --bg: #07080a;
  --bone: #efe6d6;
  --quiet: #9a9084;
  --faint: #6d655c;
  --line: #2a2622;
  --hot: #ff7a18;
  --hot-2: #ffb15a;
  --ink: var(--bone);
  --muted: var(--quiet);
  --green: var(--hot);
  --accent: var(--hot);
  --accent-hot: var(--hot-2);
  --accent-deep: var(--line);
  --signal: var(--hot);
  --ok: var(--hot-2);
  --font-sans: Syne, "Segoe UI", sans-serif;
  --font-display: Syne, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
}

body:not(.ops)::before { content: none; }
body:not(.ops) a { color: inherit; text-decoration: none; }
body:not(.ops) a:hover { color: var(--hot); }
body:not(.ops) code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
body:not(.ops) ::selection { background: var(--hot); color: #1a0d06; }
body:not(.ops) :focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
body:not(.ops) h1,
body:not(.ops) h2,
body:not(.ops) h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  color: var(--bone);
}
body:not(.ops) h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.9; font-weight: 800; }
body:not(.ops) h2 { font-size: 1.35rem; letter-spacing: -0.03em; }
body:not(.ops) h3 { font-size: 1.05rem; }

body:not(.ops) .rank-rookie { --rank: #cbbfa8; }
body:not(.ops) .rank-hacker { --rank: #7ec8c3; }
body:not(.ops) .rank-expert { --rank: #d2a06a; }
body:not(.ops) .rank-master { --rank: #ff7a18; }
body:not(.ops) .rank-legend { --rank: #e24b2a; }
body:not(.ops) .rank-grandmaster { --rank: #f3efe6; }
body:not(.ops) .rank-unranked { --rank: var(--faint); }

.diff-1 { --diff: #ffc14a; }
.diff-2 { --diff: #ff9a3c; }
.diff-3 { --diff: #ff7a18; }
.diff-4 { --diff: #ff4d3a; }
.diff-5 { --diff: #ff2a2a; }

.shell__main {
  width: min(1080px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 1.5rem 0 3.2rem;
}
body:not(.ops):has(.hero) .shell__main {
  width: 100%;
  padding-top: 0;
}
body:not(.ops):has(.hero) main > :not(.hero),
body:not(.ops):has(.hero) .foot {
  width: min(1080px, calc(100% - 2.4rem));
  margin-left: auto;
  margin-right: auto;
}

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 3.4rem;
  padding: 0 1.15rem;
  background: rgba(7, 8, 10, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--bone);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.05em;
}
.brand__slash { color: var(--hot); font-weight: 700; }
body:not(.ops) a.brand:hover { color: var(--bone); }
.top__nav { display: flex; align-items: center; gap: 0.15rem; }
.top__nav a {
  padding: 0.35rem 0.55rem;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
body:not(.ops) .top__nav a:hover { color: var(--bone); }
body:not(.ops) .top__nav a[aria-current="page"] { color: var(--hot); }
.top__end {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}
.top__you { font-weight: 700; }
.top__logout button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--quiet);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.top__logout button:hover { color: var(--hot); }
.lang {
  display: flex;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
body:not(.ops) .lang a { color: var(--faint); }
body:not(.ops) .lang a[aria-current="true"] { color: var(--bone); }

.act {
  display: inline-flex;
  align-items: center;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.act::before { content: "> "; }
body:not(.ops) a.act,
body:not(.ops) a.act:hover { color: var(--hot); }
body:not(.ops) a.act:hover { color: var(--hot-2); }
.act--dim { color: var(--quiet); }
body:not(.ops) a.act--dim { color: var(--quiet); }
body:not(.ops) a.act--dim:hover { color: var(--hot); }
.hero__actions,
.none .act,
.miss .act,
.termline .act { margin-top: 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.1rem; }

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 3.4rem);
  padding: 1.4rem 1.15rem;
  overflow: hidden;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: max-content;
  max-width: 100%;
}
.hero__line {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  width: max-content;
  max-width: 100%;
}
.hero__text {
  flex: none;
  width: max-content;
  max-width: 100%;
}
.hero .tag,
.hero__note,
.hero__actions {
  width: 0;
  min-width: 100%;
}
.hero .tag { font-size: 0.58rem; }
body:not(.ops) .hero h1 {
  width: max-content;
  max-width: min(34rem, calc(100vw - 6rem));
  font-size: clamp(1.68rem, 3.5vw, 3.08rem);
}
body:not(.ops) .hero em { font-style: normal; color: var(--hot); }
.hero__note {
  max-width: 24rem;
  margin: 0.63rem 0 0;
  color: var(--quiet);
  font-size: 0.74rem;
}
.hero__actions { gap: 0.77rem; }
body:not(.ops) .hero .canal {
  position: relative;
  flex: none;
  width: 12rem;
  height: 8rem;
  max-width: 100%;
  margin-left: -2.35rem;
  margin-right: 2.35rem;
  background: var(--bg);
  pointer-events: none;
}

.tag {
  margin: 0 0 0.45rem;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-head { margin-bottom: 0.2rem; }
.lede { max-width: 38rem; margin: 0.7rem 0 0; color: var(--quiet); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.2rem 0 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
body:not(.ops) .section-head a {
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__how {
  width: 0;
  min-width: 100%;
  margin-top: 1.35rem;
}
.hero__how .section-head { margin-top: 0; }

.flow {
  display: block;
  min-height: 2.6rem;
  margin: 0;
  padding: 0.35rem 0 0;
  list-style: none;
  font-family: var(--font-mono);
}
.flow li { display: none; }
.flow li.is-live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
}
.flow__n {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0;
  visibility: hidden;
}
.flow__n::before {
  content: "anon@cyberops:~$ ";
  color: var(--hot);
}
.flow[data-flow]:not(.is-armed) h3,
.flow[data-flow]:not(.is-armed) p { visibility: hidden; }
.flow[data-flow] .flow__n.is-on { visibility: visible; }
body:not(.ops) .flow h3 {
  margin: 0;
  padding: 0;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
}
.flow p {
  margin: 0;
  padding: 0;
  min-height: 0;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
}
.flow code { color: var(--hot-2); font-family: inherit; }
.flow .is-typing::after {
  content: "";
  display: inline-block;
  width: 0.62ch;
  height: 1.05em;
  margin-left: 0.08em;
  background: var(--hot);
  vertical-align: text-bottom;
  animation: flow-caret 0.9s steps(1) infinite;
}
@keyframes flow-caret { 50% { opacity: 0; } }
.flow__replay {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.flow__replay::before { content: "> "; }
.flow__replay:hover { color: var(--hot-2); }

.man {
  margin-top: 2.2rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
}
.man__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: start;
}
.man details {
  margin: 0;
  border: 1px solid var(--line);
}
.man summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  color: var(--hot);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  cursor: pointer;
  list-style: none;
}
.man summary::-webkit-details-marker { display: none; }
.man summary::marker { content: ""; }
.man summary::after {
  content: "+";
  color: var(--quiet);
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
}
.man details[open] summary::after { content: "–"; }
.man summary:hover::after { color: var(--hot); }
.man details p {
  margin: 0;
  padding: 0 1.05rem 1.1rem;
  color: var(--quiet);
}

.reel { --reel-ms: 8s; }
.reel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.55rem;
  min-height: 8.5rem;
  padding: 1.1rem 0.15rem 1.2rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  color: var(--bone);
}
.slide__diff {
  color: var(--diff, var(--hot));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.slide__name {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
body:not(.ops) a.slide:hover { color: inherit; }
body:not(.ops) a.slide:hover .slide__name { color: var(--hot); }
.reel__bar {
  height: 1px;
  background: var(--line);
}
.reel__fill {
  display: block;
  height: 1px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left center;
}
.reel.is-armed .reel__fill { animation: reel-fill var(--reel-ms) linear; }
@keyframes reel-fill { to { transform: scaleX(1); } }
.reel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
}
.reel__nav button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.reel__nav button:hover { color: var(--hot); }
.reel__nav [data-reel-prev]::before { content: "< "; }
.reel__nav [data-reel-next]::after { content: " >"; }
.reel__nav [data-reel-count] {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .reel__track { scroll-behavior: auto; }
  .reel__fill { display: none; }
}

.frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: stretch;
  margin-top: 1rem;
}
.frame {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1.05rem 1.1rem;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
}
.frame__label {
  color: var(--hot);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.frame__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.frame__text { color: var(--quiet); font-size: 0.86rem; }
body:not(.ops) a.frame:hover { color: inherit; border-color: var(--hot); }
body:not(.ops) a.frame:hover .frame__name { color: var(--hot); }

.cuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 1.1rem 0 0.3rem;
}
.cut {
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.cut:hover { color: var(--bone); }
.cut.is-on,
.cut.is-on:hover { color: var(--hot); }
.cut.is-on::before { content: "["; }
.cut.is-on::after { content: "]"; }

body:not(.ops) .board {
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-top: 3px solid var(--bone);
  background: none;
}
body:not(.ops) .board li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.rankline a {
  display: grid;
  grid-template-columns: 2.6rem 7rem minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone);
}
.rankline--high a { padding: 0.7rem 0; }
.rankline--ace a { padding: 0.9rem 0 1rem; }
body:not(.ops) .rankline a:hover { color: inherit; }
body:not(.ops) .rankline a:hover .rankline__name { color: var(--hot); }
.rankline__n {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}
.rankline--high .rankline__n { color: var(--rank); font-size: 0.95rem; }
.rankline--ace .rankline__n { color: var(--hot); font-size: 1.35rem; }
.rankline .crest {
  width: 5rem;
  justify-self: center;
}
.rankline .crest:not(.crest--bare) .crest__plate {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--crest) 55%, transparent));
}
.rankline .crest .who__shot { box-shadow: 0 0 0 2px var(--bg); }
.rankline--high .crest { width: 5.75rem; }
.rankline--ace .crest { width: 6.75rem; }
.rankline__id { min-width: 0; }
.rankline__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.rankline--high .rankline__name { font-size: 1.22rem; }
.rankline--ace .rankline__name {
  font-size: 1.85rem;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.rankline__rank {
  display: block;
  margin-top: 0.48rem;
  color: var(--rank, var(--quiet));
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rankline--ace .rankline__rank { margin-top: 0.62rem; font-size: 0.72rem; }
.rankline__solves {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  text-align: right;
  color: var(--bone);
}
.rankline--ace .rankline__solves { font-size: 1.5rem; }
.rankline__solves small {
  display: block;
  margin-top: 0.28rem;
  color: var(--faint);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stone-empty {
  margin-top: 1.6rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--bone);
}

.scars {
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid #e24b2a;
}
.scar {
  display: grid;
  grid-template-columns: 2.4rem 3.5rem minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.scar--open { padding: 1rem 0 1.1rem; }
.scar__n {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
}
.scar--open .scar__n { color: #ff6a4a; font-size: 0.95rem; }
.scar__seal {
  position: relative;
  width: 2.7rem;
  height: 3.2rem;
  justify-self: center;
}
.scar--open .scar__seal { width: 3.25rem; height: 3.85rem; }
.scar__face {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  background: #12100e;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px #a33a2e;
}
.scar--open .scar__face {
  width: 3.25rem;
  height: 3.25rem;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px #e24b2a;
}
body:not(.ops) a.scar__seal:hover .scar__face {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px #ff6a4a;
}
body:not(.ops) .scar--open a.scar__seal:hover .scar__face {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px #ff6a4a;
}
.scar__drop {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.55rem;
  height: 0.74rem;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.scar--open .scar__drop { width: 0.68rem; height: 0.92rem; }
.scar__drop path { fill: #ff4d3a; }
.scar--open .scar__drop { filter: drop-shadow(0 0 5px rgba(255, 77, 58, 0.55)); }
.scar__body { min-width: 0; }
.scar__lab,
.scar__who {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.ops) a.scar__lab {
  color: var(--bone);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body:not(.ops) .scar--open a.scar__lab { font-size: 1.7rem; }
body:not(.ops) .scar--open a.scar__who { margin-top: 0.5rem; }
body:not(.ops) a.scar__lab:hover { color: var(--hot); }
body:not(.ops) a.scar__who {
  margin-top: 0.42rem;
  color: #ff6a4a;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body:not(.ops) a.scar__who:hover { color: var(--bone); }
.scar__when {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1;
  text-align: right;
  color: var(--quiet);
}
.scar--open .scar__when { color: var(--bone); font-size: 0.92rem; }
.scar__when small {
  display: block;
  margin-top: 0.32rem;
  color: var(--faint);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.scar-empty {
  margin-top: 1.6rem;
  padding-top: 0.9rem;
  border-top: 3px solid #e24b2a;
}

.feed { margin: 0; padding: 0; list-style: none; }
.feed li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.feed__tag { color: var(--hot); letter-spacing: 0.08em; }
.feed__tag--off { color: var(--faint); }
.feed a { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; }
.feed__meta { color: var(--quiet); }
.feed__meta:last-child { text-align: right; }
.feed .is-blood .feed__tag { color: var(--hot-2); }

.passages__count {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
.crossings {
  position: relative;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}
.crossings::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  left: 3.55rem;
  width: 1px;
  background: var(--line);
}
.crossing__link {
  display: grid;
  grid-template-columns: 2.2rem 1rem minmax(0, 1fr) auto;
  gap: 0.7rem 0.85rem;
  align-items: center;
  padding: 0.85rem 0;
  color: inherit;
}
body:not(.ops) a.crossing__link:hover { color: inherit; }
.crossing__idx {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.crossing.is-blood .crossing__idx { color: #ff6a4a; }
.crossing__mark {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  position: relative;
  z-index: 1;
}
.crossing__mark svg {
  width: 0.72rem;
  height: 0.72rem;
  overflow: visible;
}
.crossing.is-blood .crossing__mark svg { width: 0.62rem; height: 0.82rem; }
.crossing__mark circle {
  fill: var(--bg);
  stroke: var(--quiet);
  stroke-width: 1.4;
}
.crossing__mark path { fill: #ff4d3a; }
.crossing.is-blood .crossing__mark {
  filter: drop-shadow(0 0 6px color-mix(in srgb, #ff4d3a 55%, transparent));
}
.crossing__name {
  display: block;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.crossing__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin-top: 0.18rem;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crossing__blood { color: #ff6a4a; }
.crossing__time {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body:not(.ops) a.crossing__link:hover .crossing__name { color: var(--hot); }
body:not(.ops) a.crossing__link:hover .crossing__mark circle { stroke: var(--hot); }
.passages__empty {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  margin-top: 0.85rem;
}
.passages__empty .crossing__mark { margin-top: 0.35rem; }
.passages__empty .act { margin-top: 0.7rem; }

.back { margin: 0 0 0.9rem; color: var(--quiet); font-family: var(--font-mono); font-size: 0.78rem; }
.op { max-width: 46rem; }
.op__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.8rem 0 0;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.op__line span:first-child { color: var(--diff, var(--hot)); }
.aims {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: aim;
}
.aims li {
  counter-increment: aim;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--quiet);
}
.aims li::before {
  content: counter(aim, decimal-leading-zero);
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.op h2,
.termline h2 { margin-top: 1.6rem; }
.termline { margin-top: 1.8rem; padding-top: 0.2rem; }
.termline p { margin: 0.4rem 0 0; color: var(--quiet); }
.termline__cmd {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.85rem 0;
  border: 0;
  border-top: 1px solid var(--hot);
  border-bottom: 1px solid var(--hot);
  background: none;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-align: left;
  cursor: pointer;
}
.termline__cmd code { color: inherit; }
.termline__cmd:hover { color: var(--hot-2); }
.termline__note {
  margin: 0.45rem 0 0;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.termline__after code { color: var(--bone); }

.who__head {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
}
.who__id {
  min-width: 0;
  container-type: inline-size;
}
body:not(.ops) .who h1 {
  font-size: 1.85rem;
  font-size: clamp(1.2rem, calc(100cqi / (max(var(--len, 12), 1) * 1.02)), 2.15rem);
  line-height: 1;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.crest {
  position: relative;
  width: 8rem;
  aspect-ratio: 1;
  --crest: var(--faint);
  --crest-hi: var(--bone);
  --crest-deep: #1a1816;
}
.crest--iron { --crest: #9aa4b0; --crest-hi: #e6edf4; --crest-deep: #1c222a; }
.crest--bronze { --crest: #d08945; --crest-hi: #ffe0bf; --crest-deep: #3a2010; }
.crest--silver { --crest: #d5dee8; --crest-hi: #f7fbff; --crest-deep: #222830; }
.crest--gold { --crest: #f0d48a; --crest-hi: #fff6d4; --crest-deep: #3a2c10; }
.crest--platinum { --crest: #7ec8c3; --crest-hi: #e7fffb; --crest-deep: #0d2c2a; }
.crest--emerald { --crest: #3dbe7a; --crest-hi: #d9ffe8; --crest-deep: #0c2e1c; }
.crest--diamond { --crest: #7eb0ff; --crest-hi: #e8f1ff; --crest-deep: #101828; }
.crest--master { --crest: #c49bff; --crest-hi: #f3e8ff; --crest-deep: #241433; }
.crest--grandmaster { --crest: #ff5a42; --crest-hi: #ffd2c8; --crest-deep: #2c0e0c; }
.crest--challenger { --crest: #f6e7c1; --crest-hi: #fffaf0; --crest-deep: #ff7a18; }
.crest__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.crest:not(.crest--bare) .crest__plate {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--crest) 42%, transparent));
}
.crest .who__shot {
  position: absolute;
  left: 18%;
  top: 18%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  background: #12100e;
  box-shadow: 0 0 0 3px var(--bg);
}
.crest__ring {
  fill: none;
  stroke: var(--crest);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.crest__ring--heavy { stroke-width: 2.7; }
.crest__ring--inner { stroke-width: 1.15; opacity: 0.8; }
.crest__groove {
  fill: none;
  stroke: var(--crest-deep);
  stroke-width: 1.35;
  stroke-linejoin: round;
}
.crest__mill {
  fill: none;
  stroke: var(--crest-hi);
  stroke-width: 2.5;
  stroke-dasharray: 1.35 4.8;
}
.crest__fill { fill: var(--crest); stroke: none; }
.crest__stud {
  fill: var(--crest-hi);
  stroke: var(--crest-deep);
  stroke-width: 0.6;
}

.who .crest .who__shot,
.who .crest .crest__plate { z-index: 1; }
.who .orbits {
  position: absolute;
  inset: -14%;
  z-index: 2;
  pointer-events: none;
  perspective: 16rem;
  transform-style: preserve-3d;
}
.who .orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(66% + (var(--i) * 3.2%));
  height: calc(66% + (var(--i) * 3.2%));
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--orbit) 22%, transparent);
  border-top-color: #fff;
  border-right-color: var(--orbit);
  box-shadow:
    0 0 6px var(--orbit),
    0 0 16px color-mix(in srgb, var(--orbit) 70%, transparent);
  --axis: calc(var(--i) * 32.7deg);
  --tilt: calc(30deg + (var(--i) * 2.1deg));
  transform: translate(-50%, -50%) rotate(var(--axis)) rotateX(var(--tilt));
  animation: orbit-spin calc(2.6s + (var(--i) * 0.38s)) linear infinite;
}
.who .orbit:nth-child(even) { animation-direction: reverse; }
.who .orbit:nth-child(11n + 1) { --orbit: #8fd4ff; }
.who .orbit:nth-child(11n + 2) { --orbit: #ff8a2a; }
.who .orbit:nth-child(11n + 3) { --orbit: #f5fbff; }
.who .orbit:nth-child(11n + 4) { --orbit: #ffd15a; }
.who .orbit:nth-child(11n + 5) { --orbit: #3dffe8; }
.who .orbit:nth-child(11n + 6) { --orbit: #39ff88; }
.who .orbit:nth-child(11n + 7) { --orbit: #7eb6ff; }
.who .orbit:nth-child(11n + 8) { --orbit: #d18bff; }
.who .orbit:nth-child(11n + 9) { --orbit: #ff4d6a; }
.who .orbit:nth-child(11n + 10) { --orbit: #ff7a18; }
.who .orbit:nth-child(11n + 11) { --orbit: #ffe28a; }
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(var(--axis)) rotateX(var(--tilt)) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(var(--axis)) rotateX(var(--tilt)) rotate(1turn); }
}

.who__shot {
  width: 7.2rem;
  height: 8.6rem;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  background: #12100e;
}
.who__handle {
  margin: 0.25rem 0 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.who__rank {
  margin: 0.2rem 0 0;
  color: var(--rank, var(--hot));
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 1.1rem 0 0;
  padding: 0.7rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ladder li {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ladder .is-on { color: var(--quiet); }
.ladder .is-now { color: var(--hot); font-size: 0.82rem; }
.facts,
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.9rem 0 0;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.facts b,
.fields b { color: var(--bone); font-weight: 600; }
body:not(.ops) .facts a { color: var(--hot); }

.medals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.2rem, 1fr));
  gap: 1.8rem 1rem;
  margin: 0.4rem 0 0;
  padding: 0.55rem 0 0.2rem;
  overflow: visible;
  list-style: none;
}
.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.12rem;
  --enamel: #1a100c;
  --metal: #ff7a18;
  --metal-hi: #ffe1c2;
  --ribbon: #6a3014;
}
.medal.tone-iron { --enamel: #161b22; --metal: #d5dde6; --metal-hi: #f4f7fb; --ribbon: #3d4654; }
.medal.tone-bronze { --enamel: #24160e; --metal: #e4a15a; --metal-hi: #ffd7ad; --ribbon: #6e3414; }
.medal.tone-blood { --enamel: #2a1010; --metal: #ff6a4a; --metal-hi: #ffc4b4; --ribbon: #7a1c18; }
.medal.tone-gold { --enamel: #261e0c; --metal: #f0d48a; --metal-hi: #fff6d4; --ribbon: #8a6420; }
.medal.tone-orange { --enamel: #241208; --metal: #ff7a18; --metal-hi: #ffd7a8; --ribbon: #8a3a10; }
.medal.tone-teal { --enamel: #0e2220; --metal: #8ee0cc; --metal-hi: #e7fff8; --ribbon: #14584e; }
.medal.glyph-flag { --enamel: #1c0c06; --metal: #ff7a18; --metal-hi: #ffd8ae; --ribbon: #7a3412; }
.medal.glyph-three { --enamel: #1a100a; --metal: #e09a55; --metal-hi: #ffe0bf; --ribbon: #6a3816; }
.medal.glyph-sweep { --enamel: #1a1408; --metal: #f3d78a; --metal-hi: #fff8dc; --ribbon: #8a6420; }
.medal.glyph-blood { --enamel: #160608; --metal: #ff4d3a; --metal-hi: #ffc3b6; --ribbon: #6a1418; }
.medal.glyph-clean { --enamel: #071614; --metal: #7ee0c8; --metal-hi: #e9fff8; --ribbon: #0e3e38; }
.medal.glyph-wide { --enamel: #12161c; --metal: #c9d3de; --metal-hi: #f5f8fb; --ribbon: #2a3340; }
.medal.glyph-d1 { --enamel: #14181e; --metal: #b7c2ce; --metal-hi: #eef3f8; --ribbon: #343b48; }
.medal.glyph-d2 { --enamel: #1c100a; --metal: #e08a45; --metal-hi: #ffd2ae; --ribbon: #6a3414; }
.medal.glyph-d3 { --enamel: #1a0e06; --metal: #ff9a3c; --metal-hi: #ffe3bf; --ribbon: #7a3a10; }
.medal.glyph-d4 { --enamel: #18080c; --metal: #ff5a42; --metal-hi: #ffc8ba; --ribbon: #6e161c; }
.medal.glyph-d5 { --enamel: #161208; --metal: #f6e7c1; --metal-hi: #fffaf0; --ribbon: #8a7040; }
.medal.glyph-hex { --enamel: #141210; --metal: #9a9084; --metal-hi: #efe6d6; --ribbon: #3a342e; }
.medal__stage {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 8rem;
}
.medal__disc {
  width: 5.5rem;
  height: auto;
  overflow: visible;
  display: block;
}
.medal.glyph-flag .medal__disc { width: 5.7rem; }
.medal.glyph-three .medal__disc { width: 5.6rem; }
.medal.glyph-sweep .medal__disc { width: 6.5rem; }
.medal.glyph-blood .medal__disc { width: 3.55rem; }
.medal.glyph-clean .medal__disc { width: 5.15rem; }
.medal.glyph-wide .medal__disc { width: min(9rem, 100%); }
.medal.glyph-d1 .medal__disc { width: 4.7rem; }
.medal.glyph-d2 .medal__disc { width: 4.9rem; }
.medal.glyph-d3 .medal__disc { width: 4.55rem; }
.medal.glyph-d4 .medal__disc { width: 5.15rem; }
.medal.glyph-d5 .medal__disc { width: 5.15rem; }
.medal:not(.is-locked) .medal__disc {
  filter:
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 10px color-mix(in srgb, var(--metal) 32%, transparent));
  transition: transform 0.22s ease;
}
.medal:not(.is-locked):hover .medal__disc { transform: translateY(-4px); }
.medal__ribbon { fill: var(--ribbon); }
.medal__ribbon--bar { opacity: 0.78; }
.medal__face {
  fill: var(--enamel);
  stroke: var(--metal);
  stroke-width: 1.45;
  stroke-linejoin: round;
}
.medal__light { stroke: none; pointer-events: none; }
.medal__shade { fill: #000; opacity: 0.28; stroke: none; }
.medal__rim { fill: none; stroke: var(--metal); stroke-width: 1.25; }
.medal__hair {
  fill: none;
  stroke: var(--metal-hi);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.72;
}
.medal__sheen,
.medal__glint { fill: #fff; opacity: 0.2; stroke: none; }
.medal__ink {
  fill: none;
  stroke: var(--metal);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medal__ink--fine { stroke-width: 1.05; }
.medal__ink--bold { stroke-width: 2.15; }
.medal__link {
  fill: none;
  stroke: var(--metal);
  stroke-width: 4.2;
  stroke-linecap: round;
}
.medal__fill { fill: var(--metal); stroke: none; }
.medal__band { fill: var(--metal); opacity: 0.34; stroke: none; }
.medal__rivet { fill: var(--metal-hi); stroke: var(--enamel); stroke-width: 0.55; }
.medal__mill {
  fill: none;
  stroke: var(--metal);
  stroke-width: 2.6;
  stroke-dasharray: 1.2 2.15;
  stroke-linecap: butt;
}
.medal__num {
  fill: var(--metal);
  stroke: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
}
.medal__state {
  margin-top: 0.15rem;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.medal strong { font-weight: 700; font-size: 0.95rem; }
.medal__copy {
  max-width: 12rem;
  color: var(--quiet);
  font-size: 0.74rem;
  line-height: 1.35;
}
.medal.is-locked { filter: grayscale(1); opacity: 0.42; }
.medal.is-locked .medal__state,
.medal.is-locked strong,
.medal.is-locked .medal__copy { color: var(--faint); }

.none,
.miss { margin-top: 1rem; color: var(--quiet); }
.none__title { color: var(--bone); font-weight: 700; font-size: 1.2rem; }
.miss__code {
  margin: 0;
  color: var(--hot);
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
}
.site-banner {
  margin: 0 0 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid #ffb000;
  border-bottom: 1px solid #ffb000;
  color: #ffb000;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.site-banner--stop { border-color: #ff4d3a; color: #ff4d3a; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  margin-top: 2.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.88rem;
}
.foot p { margin: 0; }
.foot__brand { color: var(--bone); font-weight: 800; letter-spacing: -0.04em; }
.foot__brand span { color: var(--hot); margin-right: 0.3rem; }

body:not(.ops) .range-toggle,
body:not(.ops) .range-toggle.is-open {
  position: static;
  width: auto;
  height: auto;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hot);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
body:not(.ops) .range-toggle:hover { color: var(--hot-2); }
body:not(.ops) .range-toggle__mark { display: none; }
body:not(.ops) .range-toggle .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body:not(.ops) .range {
  background: #0c0a09;
  color: var(--bone);
  border-left: 1px solid var(--hot);
  font-family: var(--font-mono);
}
body:not(.ops) .range__head,
body:not(.ops) .range__form { border-color: var(--line); }
body:not(.ops) .range__title,
body:not(.ops) .range__prompt,
body:not(.ops) .range__echo-prompt { color: var(--hot); font-family: var(--font-mono); }
body:not(.ops) .range__title { font-size: 1rem; }
body:not(.ops) .range__input { color: var(--bone); }
body:not(.ops) .range__line--ok { color: var(--hot-2); }
body:not(.ops) .range__line--err { color: #ff6a4a; }
body:not(.ops) .foot {
  border-top: 1px solid var(--line);
  color: var(--faint);
}
body:not(.ops) .foot__brand {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--bone);
}

@media (max-width: 900px) {
  .top { flex-wrap: wrap; height: auto; padding: 0.65rem 0.85rem; gap: 0.45rem 0.8rem; }
  .top__nav { order: 3; width: 100%; overflow-x: auto; }
  .hero { padding-left: 0.9rem; padding-right: 0.9rem; }
  .hero__copy { padding: 0; }
  .hero__line { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hero__text { max-width: 100%; }
  body:not(.ops) .hero h1 { max-width: 100%; }
  body:not(.ops) .hero .canal { margin-left: 0; margin-right: 0; }
  body:not(.ops):has(.hero) main > :not(.hero),
  body:not(.ops):has(.hero) .foot {
    width: min(1080px, calc(100% - 1.5rem));
  }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li + li { border-left: 0; padding-left: 0; }
  .slide { min-height: 0; }
  .slide__name { font-size: clamp(2rem, 9vw, 3rem); }
  .feed li { grid-template-columns: auto minmax(0, 1fr); }
  .feed__meta:last-child { text-align: left; }
  .scar,
  .scar--open {
    grid-template-columns: 1.6rem 2.8rem minmax(0, 1fr);
    gap: 0.15rem 0.65rem;
  }
  .scar__when {
    grid-column: 3;
    margin-top: -0.2rem;
    text-align: left;
    font-size: 0.72rem;
  }
  .scar__when small { display: inline; margin: 0 0 0 0.45rem; }
  body:not(.ops) .scar--open a.scar__lab { font-size: 1.35rem; }
  .scar__seal { width: 2.35rem; height: 2.8rem; }
  .scar--open .scar__seal { width: 2.7rem; height: 3.2rem; }
  .scar__face,
  .scar--open .scar__face { width: 100%; height: auto; aspect-ratio: 1; }
  .crossing__link { grid-template-columns: 1.8rem 1rem minmax(0, 1fr); }
  .crossing__time { grid-column: 3; margin-top: -0.35rem; }
  .crossings::before { left: 3.15rem; }
  .shell__main { width: min(1080px, calc(100% - 1.5rem)); }
}

@media (max-width: 640px) {
  .man__grid,
  .frames { grid-template-columns: 1fr; }
  .who__head { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .who__head .crest { width: 5.5rem; }
  .rankline a,
  .rankline--high a,
  .rankline--ace a {
    grid-template-columns: 1.7rem 4.6rem minmax(0, 1fr) auto;
    gap: 0.15rem 0.55rem;
  }
  .rankline .crest { width: 3.5rem; }
  .rankline--high .crest { width: 4rem; }
  .rankline--ace .crest { width: 4.45rem; }
  .rankline--ace .rankline__name { font-size: 1.3rem; }
  .rankline--ace .rankline__solves { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.ops) .range { transition: none; }
  .flow .is-typing::after { animation: none; }
  .who .crest::before,
  .who .crest::after,
  .who .crest__plate,
  .who .crest__mill,
  .who .crest__ring--heavy,
  .who .crest__fill,
  .who .crest__stud,
  .who .orbit { animation: none; }
}