@font-face { font-family: "Inter", sans-serif; src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); }

/** main colours for all bodies */
/** accent colours */
/** generic text colours */
/** generic colours */
/** other */
:root { --primary: #313131; --primary-plus-5: #3e3e3e; --primary-plus-10: #4b4b4b; --primary-plus-20: #646464; --primary-minus-10: #181818; --primary-minus-20: black; --shadow: 0 0px 8px 2px rgba(0, 0, 0, 0.3); --accent-orange: #f9a104; --accent-orange-dark: #fc4a03; --text-colour: rgba(255, 255, 255, 0.85); --text-colour-muted: rgba(255, 255, 255, 0.5); --red: #cc1e42; --blue: #00c2ff; --yellow: #f9a104; --green: #0bee7c; --divider: rgba(255, 255, 255, 0.05); --content-width: 1320px; }

.header { width: 100%; max-width: var(--content-width); background-color: var(--primary); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); }

.header .navbar { flex-wrap: wrap; display: flex; }

.header .navbar__item { font-size: 20px; font-weight: 500; padding: 8px 0px 8px 16px; color: var(--text-colour-muted); display: flex; gap: 16px; align-items: center; }

.header .navbar__item:hover { color: var(--text-colour); }

.header .navbar__item:not(:last-of-type)::after { content: ""; display: inline-block; width: 2px; height: 43px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 4px rgba(255, 255, 255, 0.1); }

.footer { width: 100%; max-width: var(--content-width); gap: 32px; padding-bottom: 16px; margin-top: auto; display: flex; align-items: center; justify-content: center; }

.footer__item { display: flex; align-items: center; justify-content: center; gap: 8px; }

.footer__item .icon { width: 20px; height: 20px; }

.content { display: flex; flex-direction: column; width: 100%; max-width: var(--content-width); gap: 16px; }

.act-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.list { display: grid; grid-template-columns: repeat(5, 1fr); }

.comparison { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1320px) { .content { padding: 8px; } }

@media (max-width: 1100px) { .act-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 800px) { .act-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 540px) { .act-grid { grid-template-columns: repeat(1, 1fr); } }

.rr-modal { background-color: var(--primary); min-width: 50%; max-width: 95%; }

.rr-modal__header { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); font-size: 24px; font-weight: bold; }

.rr-modal__content-box { display: grid !important; grid-template-columns: repeat(2, 1fr); padding: 8px; gap: 8px !important; scrollbar-width: thin; }

.rr-modal__buttons-container { padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, 0.7); scrollbar-width: thin; }

.rr-modal__button { background-color: var(--primary-plus-10); }

.rr-modal__button:hover { background-color: var(--primary-plus-20); }

@media (max-width: 1000px) { .rr-modal { min-width: 100%; max-width: 100%; } .rr-modal__content-box { grid-template-columns: repeat(1, 1fr); } }

.stage-list-item { display: grid; grid-template-areas: "title title" "chars words"; grid-template-columns: 1fr 1fr; width: 100%; background-color: var(--primary-minus-10); padding: 4px; }

.stage-list-item__title { grid-area: title; font-weight: 700; font-size: 16px; display: flex; gap: 4px; }

.stage-list-item__title-code { color: var(--text-colour-muted); display: flex; align-items: center; gap: 4px; }

.stage-list-item__title-code:empty { display: none; }

.stage-list-item__title-code::after { display: inline-block; content: ""; height: 100%; width: 1px; background-color: var(--accent-orange); }

.stage-list-item__title-name { margin: auto 0; }

.stage-list-item__length { display: flex; gap: 4px; color: var(--text-colour); font-size: 16px; }

.stage-list-item__length::before { display: inline-block; color: var(--text-colour-muted); }

.stage-list-item__length--chars::before { content: "Characters"; }

.stage-list-item__length--words::before { content: "Words"; }

.stage-list-item__length--words { grid-area: words; }

.stage-list-item__length--chars { grid-area: chars; }

* { box-sizing: border-box; }

body { background-color: var(--primary-minus-10); font-family: "Inter", sans-serif; color: var(--text-colour); margin: 0px; width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; overflow-y: scroll; gap: 16px; }

a { color: var(--accent-orange); text-decoration: none; transition: 200ms ease all; }

a:hover { color: var(--accent-orange-dark); }

details[open] summary { margin-bottom: 4px; }

details[open] summary::after { content: "Hide"; }

summary { user-select: none; width: max-content; }

summary::after { display: inline-block; content: "Expand"; }

label { cursor: pointer; user-select: none; }

input[type="text"] { background-color: var(--primary-plus-10); border: none; box-shadow: var(--shadow); padding: 4px 5px; }

input[type="text"]:focus-visible { outline: 1px solid var(--accent-orange-dark); }

button, summary { border: none; padding: 8px; outline: 1px solid transparent; font-size: 12px; font-weight: 600; background-color: var(--primary); cursor: pointer; color: var(--text-colour); transition: 250ms ease all; letter-spacing: 1px; }

button:hover, summary:hover { outline: 1px solid var(--accent-orange-dark); background-color: var(--primary-plus-10); }

select { background-color: var(--primary-plus-10); border: none; box-shadow: var(--shadow); cursor: pointer; padding: 4px 5px; }

.heading { background-color: var(--primary); margin: 0; box-shadow: var(--shadow); width: max-content; font-size: 24px; font-weight: 400; padding: 6px 10px; }

p { margin: 0; }

table { border-spacing: 0px; width: max-content; max-width: 100%; }

table th { text-align: start !important; padding-bottom: 8px; color: var(--accent); padding-left: 64px; }

table td { border-top: solid 1px var(--divider); padding: 8px 0px; text-align: start !important; padding-left: 64px; }

table tr:first-child > td { border-top: none; }

table tr td:first-child, table tr th:first-child { padding-left: 0px; }

.about thead { display: none; }

.act { display: grid; grid-template-areas: "header header" "chars words" "details details"; grid-template-rows: max-content max-content 1fr; position: relative; }

.act__cover { max-width: 100%; object-fit: cover; width: 100%; }

.act__cover--event { height: 120px; }

.act__header { position: relative; grid-area: header; display: flex; }

.act__title { font-size: 16px; font-weight: 600; padding: 10px 4px 4px 4px; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.9) 100%); position: absolute; bottom: 4px; width: 100%; display: flex; }

.act__length { display: flex; gap: 4px; color: var(--text-colour); font-size: 16px; margin-bottom: 4px; }

.act__length::before { display: inline-block; color: var(--text-colour-muted); }

.act__length--chars::before { content: "Characters"; }

.act__length--words::before { content: "Words"; }

.act__details-button { grid-area: details; padding: 4px 8px; }

.act--main .act__header { aspect-ratio: 1; }

.heading { display: flex; align-items: center; gap: 8px; background-color: var(--primary); width: max-content; padding: 3px 10px; box-shadow: var(--shadow); }

.heading__title { margin: 0; font-weight: 400; font-size: 24px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 43px; text-align: center; }

.heading__title--has-content.heading__title::after { font-size: 16px; order: 2; content: ""; display: inline-block; width: 2px; height: 43px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 4px rgba(255, 255, 255, 0.1); }

.heading__content { display: flex; gap: 8px; align-items: center; }

.heading__content span { color: var(--text-colour-muted); font-size: 16px; }

.heading__content .heading__count { display: flex; gap: 4px; color: var(--text-colour); width: max-content; }

.heading__content .heading__count::before { display: inline-flex; content: attr(data-type); color: var(--text-colour-muted); }

@media (max-width: 600px) { .heading { padding: 10px; flex-direction: column; } .heading__title { flex-direction: column; } .heading__title::after { height: 2px !important; width: 100% !important; } .heading__content { flex-direction: column; } }

.comparison--story .comparison-item--character.comparison-item--multi-count { grid-template-columns: max-content 150px 50px 1fr; }

.comparison-item { display: grid; align-items: center; column-gap: 4px; background-color: rgba(255, 255, 255, 0.04); }

.comparison-item--story { grid-template-areas: "name bar"; grid-template-columns: 300px 1fr; }

.comparison-item--character.comparison-item--multi-count { grid-template-areas: "avatar name labels bar"; grid-template-columns: max-content 150px 250px 1fr; }

.comparison-item--character.comparison-item--single-count { grid-template-areas: "avatar name bar"; grid-template-columns: max-content 200px 1fr; }

.comparison-item.odd { background-color: rgba(255, 255, 255, 0.08); }

.comparison-item__name { grid-area: name; padding-left: 8px; }

.comparison-item__count-container { display: flex; position: absolute; gap: 4px; left: calc(100% + 8px); height: 100%; align-items: center; width: max-content; }

.comparison-item__count--exact { opacity: 0; transition: 100ms ease all; color: var(--text-colour-muted); }

.comparison-item__bars-labels { grid-area: labels; display: grid; grid-template-columns: 1fr; gap: 2px; }

.comparison-item__bar-label { width: 100%; display: flex; align-items: center; }

.comparison-item__bars-container { grid-area: bar; display: grid; grid-template-columns: 1fr; gap: 2px; }

.comparison-item__bars-container:hover .comparison-item__count--exact { opacity: 1; }

.comparison-item__bar { background-color: var(--primary-plus-10); height: 40px; background-position: center; border-radius: 0 4px 4px 0; position: relative; }

.comparison-item--character .comparison-item__bar { height: 20px; }

.comparison-item__avatar-container { padding: 2px; grid-area: avatar; display: flex; align-items: center; justify-content: center; height: calc(var(--size) + 4px); width: calc(var(--size) + 4px); --size: 60px; position: relative; }

.comparison-item__avatar { width: calc(var(--size) - 8px); height: calc(var(--size) - 8px); position: relative; mask-image: url("/img/masks/diamond.svg"); mask-position: center; mask-size: cover; -webkit-mask-image: url("/img/masks/diamond.svg"); -webkit-mask-size: cover; -webkit-mask-position: center; background-position: center; background-size: cover; z-index: 2; background-color: #404040; }

.comparison-item__avatar-border { z-index: 1; filter: brightness(40%); position: absolute; width: calc(var(--size)); height: calc(var(--size)); background-image: url("/img/masks/diamond.svg"); background-position: center; background-size: cover; }

.comparison-item.hidden { display: none; }

@media (max-width: 1380px) { .comparison-item__bars-container { padding-right: 60px; } }

@media (max-width: 800px) { .comparison-item--story { grid-template-columns: 200px 1fr !important; } .comparison-item--character.comparison-item--multi-count { grid-template-columns: max-content 100px 150px 1fr !important; } .comparison-item--character.comparison-item--single-count { grid-template-columns: max-content 100px 1fr !important; } .comparison-item__count--exact { display: none; } .comparison-item__bars-container { padding-right: 60px; } }

.comparison-header { display: flex; gap: 8px; justify-content: space-between; }

.comparison-header__controls { width: max-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }

.comparison-header__controls .label { width: max-content; }

.comparison-header__controls select, .comparison-header__controls input[type="text"] { min-width: 150px; }

@media (max-width: 600px) { .comparison-header__title { padding: 10px; flex-direction: column; height: max-content; } .comparison-header__title::after { height: 2px; width: 100%; } }

*[data-read-time] { position: relative; }

*[data-read-time]::after { content: attr(data-read-time); position: absolute; opacity: 0; bottom: calc(100% + 4px); width: max-content; background-color: var(--primary-plus-10); transition: ease all 250ms; padding: 4px; left: 50%; transform: translate(-50%, 0); color: var(--accent-orange); box-shadow: var(--shadow); z-index: 1000; }

*[data-read-time]:hover::after { opacity: 1; }

/*# sourceMappingURL=main.css.map */