:root {
  color-scheme: dark;
  --outro-white: #f2f0e9;
  --outro-red: #ff483d;
  --outro-charcoal: #101313;
  font-family: "Arial Narrow", Impact, sans-serif;
}
* { box-sizing: border-box; }
html, body, #player { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: transparent; color: var(--outro-white); }
#player { position: relative; background: #101313; }
#outro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1.5s linear; }
#outro.ended { opacity: 0; }
#shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #101313b8, transparent 78%); transition: opacity .28s ease; }
#brand-mark { position: absolute; z-index: 2; top: 3.4vh; left: 4vw; color: var(--outro-white); font: italic 950 clamp(21px, 2.5vw, 40px)/1 Impact, "Arial Narrow", sans-serif; letter-spacing: -.055em; text-shadow: 0 2px 14px #000c; }
#brand-mark::after { content: ""; display: block; width: 2.1em; height: 3px; margin-top: .18em; background: var(--outro-red); transform: skewX(-25deg); }
#credits { position: absolute; left: 4vw; bottom: 10.5vh; width: 92vw; opacity: 0; transform: translateY(18px); transition: opacity .28s ease, transform .28s ease; text-shadow: 0 2px 16px #000b; }
#credits.visible { opacity: 1; transform: translateY(0); }
#credits.page-exiting { opacity: 0; transform: translateX(-2.5vw) skewX(-3deg); }
#category { display: table; max-width: 90%; margin: 0; padding: .04em .16em .1em 0; color: var(--outro-white); font-size: clamp(27px, 3.6vw, 68px); font-style: italic; font-weight: 850; font-stretch: condensed; line-height: .94; letter-spacing: -.045em; text-transform: uppercase; transform-origin: left bottom; }
#category::after { content: ""; display: block; width: clamp(100px, 20vw, 300px); height: 3px; margin-top: .15em; background: #ff483dc9; transform: skewX(-22deg); }
#category.category-crew_support { padding: .1em .2em .12em .14em; background: #101313a8; box-shadow: 0 0 0 .1em #101313a8; }
#category-subtitle { width: fit-content; margin: .55vh 0 4.5vh; padding: .12em .42em; color: #f2f0e9e8; background: #1013139c; font: 750 clamp(11px, 1.1vw, 17px)/1 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.credit-ribbons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(6.5vh, auto); gap: 4.5vh 1.25vw; width: min(100%, 1800px); }
.credit-ribbon { position: relative; display: flex; align-items: center; min-width: 0; min-height: 6.5vh; padding: .26em .55em .26em clamp(38px, 4.5vw, 58px); color: var(--outro-white); animation: ribbon-enter .34s cubic-bezier(.16,.84,.26,1) var(--ribbon-delay, 0s) both; }
.credit-ribbon::before { content: ""; position: absolute; z-index: 0; inset: 0; border: 1px solid #f2f0e96b; background-image: radial-gradient(circle, #ffffff18 .55px, transparent .8px), linear-gradient(100deg, #101313df, #101313bd 78%, #101313a8); background-size: 8px 8px, auto; clip-path: polygon(0 0, 96% 0, 100% 20%, 97.5% 50%, 100% 80%, 97% 100%, 0 100%, 1.5% 50%); }
.credit-ribbon::after { content: ""; position: absolute; z-index: 1; top: 13%; right: 10%; width: 2px; height: 74%; background: #ff483da8; transform: rotate(23deg); }
.credit-avatar-wrap { position: absolute; z-index: 2; left: clamp(-15px, -1vw, -8px); top: 50%; display: grid; place-items: center; width: clamp(48px, 4.4vw, 70px); aspect-ratio: 1; transform: translateY(-50%); }
.credit-avatar-wrap::before { content: ""; position: absolute; inset: 0; border: 2px solid #ff483dc9; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(28deg); }
.credit-avatar-wrap.is-anonymous::before { border: 2px solid #9146ff; box-shadow: 0 0 0 2px #9146ff99; transform: none; }
.credit-avatar-wrap.avatar-missing::before { border-color: #aeb1ba55; border-right-color: transparent; }
.credit-avatar { width: 88%; height: 88%; border: 1px solid #f2f0e9d9; border-radius: 50%; object-fit: cover; }
.anonymous-silhouette { position: relative; display: block; width: 88%; height: 88%; overflow: hidden; border-radius: 50%; background: #2d3036; }
.anonymous-silhouette::before { content: ""; position: absolute; top: 21%; left: 36%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #aeb1ba; }
.anonymous-silhouette::after { content: ""; position: absolute; left: 20%; bottom: 8%; width: 59%; height: 35%; border-radius: 50% 50% 18% 18%; background: #aeb1ba; }
.missing-avatar-mark { position: relative; display: block; width: 88%; height: 88%; border: 1px solid #aeb1ba88; border-radius: 50%; background: #303238a8; }
.missing-avatar-mark::before { content: ""; position: absolute; inset: 23%; border: 1px dashed #aeb1ba99; border-radius: 50%; }
.missing-avatar-mark::after { content: ""; position: absolute; left: 18%; top: 48%; width: 64%; height: 1px; background: #aeb1ba99; transform: rotate(-36deg); }
.credit-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: .12em; min-width: 0; width: 100%; }
.credit-name { display: block; min-width: 0; color: var(--outro-white); font-size: clamp(14px, 1.55vw, 25px); font-style: italic; font-weight: 800; line-height: .98; text-transform: uppercase; overflow-wrap: anywhere; }
.credit-detail { display: block; color: var(--outro-white); font: 850 clamp(12px, 1.18vw, 18px)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 7px #000; }
@keyframes ribbon-enter { 0% { opacity: 0; transform: translateX(-2.2vw) skewX(-5deg); } 72% { opacity: 1; transform: translateX(.25vw) skewX(1deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
#status { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(560px, 88vw); margin: 0; padding: 1.1em 1.35em; transform: translate(-50%, -50%); border: 1px solid #f2f0e96b; border-left: 4px solid var(--outro-red); background: #101313ed; color: var(--outro-white); text-align: center; font: 650 clamp(15px, 1.5vw, 21px)/1.45 system-ui, sans-serif; box-shadow: 0 10px 34px #0009; }
#status[hidden] { display: none; }
#sound { position: absolute; z-index: 5; right: 3vw; bottom: 3vh; border: 1px solid #f2f0e9a8; border-radius: 2px; padding: .55em .85em; background: #101313d9; color: var(--outro-white); font: 700 clamp(13px, 1.25vw, 19px)/1.1 system-ui, sans-serif; cursor: pointer; }
#sound[hidden] { display: none; }