/* Shared design tokens and controls for the website and offline player. */
:root {
    color-scheme: dark;
    --bg: #1b1d22;
    --surface: #25282f;
    --header: #202228;
    --text: #c5c8d0;
    --muted: #a5abb7;
    --strong: #f2f3f7;
    --line: #3b404b;
    --accent: #d5d9e2;
    --danger: #f1a9b0;
    --terminal-bg: #000;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --radius-control: 0.625rem;
    --radius-panel: 1rem;
    --control-height: 2.75rem;
    --control-font: 0.875rem;
    --control-padding: 0.625rem 1rem;
    --page-gutter: clamp(1rem, 4vw, 2.5rem);
    --page-space: clamp(1.75rem, 5vw, 3rem);
    --panel-padding: clamp(1rem, 3vw, 1.5rem);
    --content-width: 80rem;
    --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-family: var(--font-sans);
    font-size: 16px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    color: var(--text);
    background: radial-gradient(ellipse at 50% -20%, #383c4840, transparent 60%), var(--bg);
    font-size: 0.9375rem;
    line-height: 1.65;
}
h1,
h2,
h3 {
    margin: 0 0 var(--space-4);
    color: var(--strong);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}
h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}
h3 {
    font-size: 1.125rem;
}
p {
    margin: 0 0 var(--space-4);
}
p:last-child {
    margin-bottom: 0;
}
a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
}
a:hover {
    color: var(--strong);
}
button,
input,
select,
textarea {
    font: inherit;
    font-family: var(--font-sans);
}
button,
.button,
.file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    min-width: var(--control-height);
    max-width: 100%;
    padding: var(--control-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--strong);
    font-size: var(--control-font);
    font-weight: 550;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
:is(button, .button, .file-button):hover:not(:disabled) {
    background: #323640;
    border-color: #636c7c;
    color: var(--strong);
}
button:disabled,
input:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.primary {
    background: #e3e6ec;
    color: #202228;
    border-color: #e3e6ec;
}
.primary:hover:not(:disabled) {
    background: #fff;
    color: #111;
    border-color: #fff;
}
.danger {
    color: var(--danger);
    border-color: #794b54;
}
button[aria-pressed='true'] {
    background: #394252;
    border-color: #7a8599;
}
.button-icon,
.settings-cog,
[data-panel-move] {
    flex: 0 0 var(--control-height);
    width: var(--control-height);
    padding: 0;
    font-size: 1.125rem;
}
input,
select,
textarea:not(.xterm-helper-textarea) {
    min-width: 0;
    max-width: 100%;
    min-height: var(--control-height);
    padding: var(--control-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--header);
    color: var(--strong);
    font-size: var(--control-font);
    line-height: 1.25;
}
textarea:not(.xterm-helper-textarea) {
    resize: vertical;
    line-height: 1.6;
}
select {
    appearance: none;
    height: var(--control-height);
    padding-right: 2.5rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 14px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
input::placeholder,
textarea::placeholder {
    color: var(--muted);
}
input[type='checkbox'] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    margin: 0.2em 0 0;
    padding: 0;
    accent-color: var(--accent);
}
input[type='range'] {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--accent);
}
:focus-visible,
.file-button:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
code,
pre {
    font-family: var(--font-mono);
}
code {
    font-size: 0.875em;
    overflow-wrap: anywhere;
}
pre {
    max-width: 100%;
    overflow: auto;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--strong);
    font-size: 0.8125rem;
    line-height: 1.7;
}
pre code {
    overflow-wrap: normal;
}
.muted {
    color: var(--muted);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
[x-cloak],
[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}