* { box-sizing: border-box; }

body {
    font-family: var(--md-ref-typeface-plain);
    background:
        radial-gradient(circle at top left, rgba(255, 185, 92, 0.14), transparent 26%),
        radial-gradient(circle at top right, rgba(243, 189, 115, 0.1), transparent 24%),
        linear-gradient(180deg, #1a140d 0%, #120e08 42%, #0f0b06 100%);
    color: var(--ks-text-primary);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

h1, h2, h3 {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

md-filled-button,
md-outlined-button,
md-filled-tonal-button,
md-filled-icon-button,
md-filled-tonal-icon-button,
md-outlined-icon-button {
    --md-sys-shape-corner-full: 999px;
}

md-filled-button,
md-filled-icon-button {
    --md-filled-button-container-color: var(--md-sys-color-primary);
    --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-icon-button-container-color: var(--md-sys-color-primary);
    --md-filled-icon-button-icon-color: var(--md-sys-color-on-primary);
}

md-filled-tonal-button,
md-filled-tonal-icon-button {
    --md-filled-tonal-button-container-color: var(--md-sys-color-secondary-container);
    --md-filled-tonal-button-label-text-color: var(--md-sys-color-secondary);
    --md-filled-tonal-icon-button-container-color: var(--md-sys-color-surface-container-highest);
    --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-primary);
}

md-outlined-button,
md-outlined-icon-button {
    --md-outlined-button-outline-color: var(--md-sys-color-outline);
    --md-outlined-button-label-text-color: var(--md-sys-color-on-surface);
}

md-primary-tab {
    --md-primary-tab-container-color: transparent;
    --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
    --md-primary-tab-active-label-text-color: var(--md-sys-color-primary);
    --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
}

md-menu.ks-material-menu {
    --md-menu-container-color: var(--md-sys-color-surface-container-high);
    --md-menu-item-label-text-color: var(--md-sys-color-on-surface);
    --md-menu-item-selected-container-color: rgba(255, 185, 92, 0.14);
}
[x-cloak] { display: none !important; }