:root {
  color-scheme:dark;
  --bg:#131310;
  --panel:#1c1c18;
  --ink:#f5f1e5;
  --muted:#b7b4a6;
  --line:#3b3931;
  --accent:#ff644b;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --display:Impact,Haettenschweiler,"Arial Narrow","Liberation Sans Narrow",sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,sans-serif;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select {
  font:inherit;
  color:inherit;
}

button,select {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

.shell {
  width:min(100% - 64px,1320px);
  margin-inline:auto;
}

.skip {
  position:absolute;
  left:12px;
  top:8px;
  transform:translateY(-150%);
  z-index:10;
  background:var(--ink);
  color:var(--bg);
  padding:10px;
}

.skip:focus {
  transform:none;
}

.top {
  border-bottom:1px solid var(--line);
}

.top-inner {
  height:62px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.brand b {
  font:italic 950 26px/1 Arial,sans-serif;
  letter-spacing:-.085em;
}

.brand b span,.top-link span {
  color:var(--accent);
}

.brand i,.top-label,.top-link {
  font:700 11px var(--mono);
  letter-spacing:.1em;
}

.brand i,.top-label {
  color:var(--muted);
}

.hero {
  background:#191913;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.hero-inner {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(390px,1fr) 1fr;
  min-height:432px;
  align-items:center;
}

.hero-copy {
  position:relative;
  z-index:1;
  padding-block:54px 52px;
}

.eyebrow,.micro {
  color:var(--accent);
  font:700 11px/1.55 var(--mono);
  text-transform:uppercase;
  letter-spacing:.16em;
}

.eyebrow:before {
  content:"";
  display:inline-block;
  width:25px;
  height:3px;
  background:var(--accent);
  vertical-align:middle;
  margin-right:10px;
}

.hero h1,.detail h1 {
  font:950 clamp(90px,12vw,175px)/.79 var(--display);
  text-transform:uppercase;
  letter-spacing:-.055em;
  margin:25px 0 20px;
}

.hero h1 span {
  display:block;
  color:var(--accent);
}

.hero-copy p {
  max-width:400px;
  color:#d1cdbf;
  margin:0 0 24px;
}

.hero-note {
  display:flex;
  gap:14px;
  align-items:center;
  font:700 11px var(--mono);
  letter-spacing:.08em;
}

.hero-note span {
  color:var(--muted);
}

.action {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:#161310;
  font:800 12px var(--mono);
  letter-spacing:.03em;
  padding:13px 16px;
  border:1px solid var(--accent);
  min-height:44px;
}

.action:hover {
  background:var(--ink);
  border-color:var(--ink);
}

.action.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}

.action.secondary:hover {
  border-color:var(--accent);
}

.montage {
  position:relative;
  height:100%;
  min-height:350px;
  display:grid;
  align-content:center;
  overflow:visible;
}

.sheets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:10px;
  width:min(102%,655px);
  transform:rotate(-8deg) translateX(10px);
  padding:16px 10px;
}

.sheet {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#2c2b23;
  box-shadow:8px 12px 0 #0006,0 0 0 1px #dddbc94a;
}

.sheet:nth-child(2) {
  transform:translateY(18px);
}

.sheet:nth-child(3) {
  transform:translateY(-8px);
}

.montage-caption {
  position:absolute;
  right:0;
  bottom:15px;
  background:var(--bg);
  padding:4px 8px;
  color:var(--muted);
  font:700 9px var(--mono);
  letter-spacing:.12em;
}

.catalog {
  padding-block:40px 70px;
}

.catalog-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:16px;
}

.catalog h2 {
  font:900 clamp(43px,6vw,78px)/.92 var(--display);
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:6px 0 0;
}

.progress-block {
  width:min(300px,100%);
  color:var(--muted);
  font:700 11px var(--mono);
  letter-spacing:.05em;
}

.progress-copy {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.progress-copy strong {
  color:var(--ink);
}

progress {
  display:block;
  width:100%;
  height:5px;
  appearance:none;
  border:0;
  background:var(--line);
  accent-color:var(--accent);
}

progress::-webkit-progress-bar {
  background:var(--line);
}

progress::-webkit-progress-value {
  background:var(--accent);
}

progress::-moz-progress-bar {
  background:var(--accent);
}

.filters {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8px;
  margin-top:22px;
}

.filters label {
  display:grid;
  gap:5px;
  color:var(--muted);
  font:700 10px var(--mono);
  letter-spacing:.12em;
}

.filters input,.filters select {
  width:100%;
  min-width:0;
  height:44px;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
  padding:0 10px;
  font:14px system-ui,sans-serif;
  letter-spacing:0;
}

.coverage {
  font:12px/1.5 var(--mono);
  color:var(--muted);
  margin:14px 0 0;
}

.group {
  margin-top:28px;
}

.group h3 {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  border-top:2px solid var(--accent);
  padding:10px 0;
  margin:0;
  font:900 30px/1 var(--display);
  letter-spacing:.025em;
}

.group h3 small {
  color:var(--muted);
  font:700 10px var(--mono);
  letter-spacing:.1em;
}

.rows {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
}

.row {
  display:grid;
  grid-template-columns:48px minmax(84px,120px) minmax(0,1fr) 158px 20px;
  gap:14px;
  align-items:center;
  min-height:73px;
  padding:8px 11px;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}

.row:hover {
  background:#24231c;
}

.row-name {
  font:900 25px/.95 var(--display);
  letter-spacing:.025em;
}

.row-topic {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d3d0c0;
  font-size:14px;
}

.row-meta {
  display:block;
  color:var(--muted);
  font:10px var(--mono);
  margin-top:4px;
}

.badge {
  color:var(--muted);
  font:700 10px/1.4 var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
}

.badge.ready {
  color:var(--accent);
}

.arrow {
  color:var(--accent);
  font-weight:900;
}

.cover {
  display:grid;
  place-items:center;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#303027;
  color:#d1cdb6;
  font:800 10px/1.15 var(--mono);
  text-align:center;
  position:relative;
}

.cover img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#171714;
}

.row .cover {
  width:40px;
}

.cover-placeholder {
  padding:4px;
  letter-spacing:.04em;
}

.watched .cover {
  filter:grayscale(1);
  opacity:.57;
}

.watched .row-name,.watched .row-topic {
  color:var(--muted);
}

.empty {
  border:1px solid var(--line);
  padding:24px;
  margin-top:22px;
}

.sources {
  border-top:1px solid var(--line);
  margin-top:44px;
  padding-top:12px;
  color:var(--muted);
  font-size:13px;
}

.sources summary {
  cursor:pointer;
  color:var(--ink);
  font:700 12px var(--mono);
}

.sources a,.footer a,.detail a.inline {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer {
  border-top:1px solid var(--line);
  padding-block:22px 35px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:center;
  font:11px/1.5 var(--mono);
  color:var(--muted);
}

.footer div {
  margin-right:auto;
}

.footer b {
  color:var(--ink);
}

.detail {
  padding-block:25px 55px;
}

.back {
  display:inline-block;
  font:800 11px var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
  padding-block:10px;
}

.back:hover {
  color:var(--accent);
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,290px);
  gap:25px;
}

.detail h1 {
  font-size:clamp(69px,10vw,134px);
  margin:12px 0 15px;
}

.detail-title {
  margin:0 0 20px;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.player {
  aspect-ratio:16/9;
  background:#090908;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
}

.player iframe {
  width:100%;
  height:100%;
  border:0;
}

.player-start {
  width:100%;
  height:100%;
  border:0;
  background:#151410;
  position:relative;
  isolation:isolate;
  color:#fff;
  display:grid;
  place-items:center;
}

.player-start img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.player-start:after {
  content:"";
  position:absolute;
  inset:0;
  background:#0005;
  z-index:-1;
}

.player-start span {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:72px;
  height:72px;
  background:var(--accent);
  color:#171310;
  font-size:28px;
}

.player-start:hover span {
  background:var(--ink);
}

.player-missing {
  padding:24px;
  text-align:center;
  max-width:430px;
  color:var(--muted);
}

.player-missing strong {
  display:block;
  color:var(--ink);
  margin-bottom:8px;
}

.parts {
  list-style:none;
  padding:0;
  margin:16px 0 24px;
  display:grid;
  gap:6px;
}

.part {
  width:100%;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--line);
  padding:11px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  font-size:13px;
  overflow-wrap:anywhere;
}

.part[aria-pressed=true] {
  border-color:var(--accent);
}

.part i {
  font:700 11px var(--mono);
  color:var(--accent);
}

.detail-aside {
  align-self:start;
  display:grid;
  gap:12px;
  padding-top:44px;
}

.detail-aside .cover {
  width:min(100%,245px);
  aspect-ratio:3/4;
}

.detail-aside .action {
  width:min(100%,245px);
}

.detail-status {
  color:var(--muted);
  font:11px/1.4 var(--mono);
  margin:0;
}

.detail-nav {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-top:20px;
  border-top:1px solid var(--line);
  margin-top:24px;
}

.detail-nav a {
  font:700 11px var(--mono);
  color:var(--accent);
  padding-block:10px;
}

.loading {
  padding:32px 0;
}

@media(max-width:920px) {
  .hero-inner {
    grid-template-columns:minmax(300px,1fr) 1fr;
  }
  .hero h1 {
    font-size:clamp(78px,13vw,130px);
  }
  .row {
    grid-template-columns:42px 82px minmax(0,1fr) 115px 12px;
    gap:10px;
  }
}

@media(max-width:620px) {
  .shell {
    width:calc(100% - 28px);
  }
  .top-inner {
    height:53px;
  }
  .top-label,.brand i {
    display:none;
  }
  .hero-inner {
    display:block;
    min-height:0;
  }
  .hero-copy {
    padding:31px 0 6px;
  }
  .hero h1 {
    font-size:clamp(74px,17vw,108px);
    margin:19px 0 15px;
  }
  .hero-copy p {
    font-size:14px;
    margin-bottom:13px;
  }
  .montage {
    height:205px;
    min-height:0;
    align-content:center;
    overflow:hidden;
    margin-right:-14px;
  }
  .sheets {
    width:min(330px,91%);
    gap:6px;
    justify-self:center;
    padding:5px;
  }
  .montage-caption {
    right:14px;
    bottom:6px;
  }
  .catalog {
    padding-block:29px 45px;
  }
  .catalog-head {
    align-items:start;
    flex-direction:column;
    gap:14px;
  }
  .filters {
    grid-template-columns:1fr 1fr;
    margin-top:15px;
  }
  .filters label:first-child {
    grid-column:1/-1;
  }
  .row {
    min-height:76px;
    grid-template-columns:34px 66px minmax(0,1fr) 11px;
    gap:7px;
    padding:7px 3px;
  }
  .row .cover {
    width:32px;
  }
  .row-name {
    font-size:20px;
  }
  .row-topic {
    font-size:12px;
  }
  .row-meta {
    font-size:9px;
  }
  .row .badge {
    grid-column:3;
    grid-row:2;
    font-size:9px;
    margin-top:-9px;
  }
  .row .arrow {
    grid-column:4;
    grid-row:1/3;
  }
  .row .cover,.row .row-name {
    grid-row:1/3;
  }
  .detail {
    padding-top:12px;
  }
  .detail-grid {
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .detail-aside {
    padding-top:10px;
    width:100%;
    grid-template-columns:70px minmax(0,1fr);
    align-items:start;
  }
  .detail-aside .cover {
    grid-row:1/4;
  }
  .detail-aside .action {
    width:100%;
  }
  .detail-status {
    grid-column:2;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

.top-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.top-link .top-link-label {
  color: var(--ink);
}

#site-language {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  font: 700 12px/1.3 system-ui, sans-serif;
}

#site-language:hover {
  border-color: var(--accent);
}

.top-label, .top-link, .hero-note .action, .filters label,
.detail .back, .detail .action, .group h3 small, .progress-copy {
  text-transform: uppercase;
}