:root {
    color-scheme: light dark;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --brand-color: light-dark(#126b83, #80d7ea);
    --brand-hover-color: light-dark(#0b5369, #b0ebf5);
    --brand-inverted-color: light-dark(#fff, #08222c);
    --main-color: light-dark(#19343e, #e6f2f5);
    --main-inverted-color: light-dark(#f1f7f9, #091a22);
    --secondary-color: light-dark(#506973, #b8cbd2);
    --secondary-inverted-color: light-dark(#fff, #142831);
    --border-color: light-dark(#d3e2e7, #3e5963);
    --focus-color: light-dark(#0b6b87, #a6e9f5);
    --page-glow-color: light-dark(#dceff3, #17333e);
    --surface-color: light-dark(#fff, #142831);
    --surface-shadow-color: light-dark(rgb(19 65 80 / .09), rgb(0 0 0 / .3));
    --button-shadow-color: light-dark(rgb(18 107 131 / .16), rgb(0 0 0 / .26));
    --button-hover-shadow-color: light-dark(rgb(18 107 131 / .22), rgb(0 0 0 / .32));
    --button-active-shadow-color: light-dark(rgb(18 107 131 / .18), rgb(0 0 0 / .2));
    --history-button-color: light-dark(#edf6f8, #1c3945);
    --history-button-hover-color: light-dark(#deeff3, #244956);
    --history-button-shadow-color: light-dark(rgb(18 107 131 / .09), rgb(0 0 0 / .2));
    --field-border-color: light-dark(#b9cdd4, #4d6874);
    --field-shadow-color: light-dark(rgb(19 65 80 / .05), rgb(0 0 0 / .15));
    --placeholder-color: light-dark(#6f858d, #a0b6bf);
    --field-hover-border-color: light-dark(#7fa9b7, #77b8cb);
    --history-row-color: light-dark(#f8fbfc, #192e37);
    --history-row-hover-color: light-dark(#edf6f8, #20414d);
    --line-background-color: light-dark(#eaf5f7, #1c3a45);
    --destination-border-color: light-dark(#bedbe3, #4b7a89);
    --destination-background-color: light-dark(#f8fcfd, #10242c);
}

:root.theme-light {
    color-scheme: light;
}

:root.theme-dark {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    min-block-size: 100vb;
    background: var(--main-inverted-color);
}

body {
    min-block-size: 100vb;
    margin-block: 0;
    margin-inline: 0;
    color: var(--main-color);
    background:
        radial-gradient(circle at center, var(--page-glow-color) 0, transparent 32rem),
        var(--main-inverted-color);
    font-family: var(--font-main);
    line-height: 1.65;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

#views {
    --page-gutter: 1vi;
    min-block-size: 100vb;
    padding-block: var(--page-gutter);
    padding-inline: var(--page-gutter);
}

[hidden] {
    display: none !important;
}

.view {
    max-inline-size: 54rem;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 5vi, 3rem);
    padding-inline: clamp(1.25rem, 5vi, 3rem);
    background: var(--surface-color);
    border: .0625rem solid var(--border-color);
    border-radius: clamp(1.1rem, 2vi, 1.5rem);
    box-shadow: 0 0 3.5rem var(--surface-shadow-color);
}

h1, h2 {
    margin-block: 0 1.25rem;
    line-height: 1.25;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

h1 {
    color: var(--brand-hover-color);
    font-size: clamp(1.9rem, 5vi, 2.8rem);
}

h2 {
    font-size: clamp(1.35rem, 3vi, 1.8rem);
}

p {
    margin-block: 0 1rem;
    overflow-wrap: anywhere;
}

p:last-child {
    margin-block-end: 0;
}

hr {
    block-size: .0625rem;
    margin-block: 1.75rem;
    border: 0;
    background: var(--border-color);
}

a {
    color: var(--brand-color);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--brand-hover-color);
    text-decoration-thickness: .13em;
}

:focus-visible {
    outline: .1875rem solid var(--focus-color);
    outline-offset: .1875rem;
}

input, select, button {
    font: inherit;
}

input[type="text"] {
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

#theme-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-block-end: 1rem;
}

#theme-control label {
    color: var(--secondary-color);
    font-weight: 700;
}

#theme-select {
    max-inline-size: 100%;
    min-block-size: 2.75rem;
    padding-block: .45rem;
    padding-inline: .75rem;
    border: .0625rem solid var(--field-border-color);
    border-radius: .75rem;
    background: var(--secondary-inverted-color);
    color: var(--main-color);
    cursor: pointer;
}

#theme-select:hover {
    border-color: var(--field-hover-border-color);
}

button.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-inline-size: 20rem;
    min-block-size: 3.25rem;
    margin-block: 1rem;
    margin-inline: auto;
    padding-block: .7rem;
    padding-inline: 1.5rem;
    border: .0625rem solid var(--brand-color);
    border-radius: .85rem;
    background: var(--brand-color);
    box-shadow: 0 0 1rem var(--button-shadow-color);
    color: var(--brand-inverted-color);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    appearance: none;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button.action-button:hover {
    background: var(--brand-hover-color);
    box-shadow: 0 0 1.25rem var(--button-hover-shadow-color);
    transform: scale(1.01);
}

button.action-button:active {
    transform: scale(.99);
    box-shadow: 0 0 .5rem var(--button-active-shadow-color);
}

#button-history {
    border-color: var(--border-color);
    background: var(--history-button-color);
    box-shadow: none;
    color: var(--brand-hover-color);
}

#button-history:hover {
    background: var(--history-button-hover-color);
    box-shadow: 0 0 1rem var(--history-button-shadow-color);
}

#configure-form {
    display: grid;
    gap: 1.25rem;
}

#configure-form > div {
    display: grid;
    gap: .4rem;
}

#configure-form label {
    color: var(--main-color);
    font-weight: 700;
}

#configure-form input,
#configure-form select {
    min-inline-size: 0;
    min-block-size: 3.25rem;
    justify-self: stretch;
    padding-block: .7rem;
    padding-inline: .9rem;
    border: .0625rem solid var(--field-border-color);
    border-radius: .75rem;
    background: var(--secondary-inverted-color);
    color: var(--main-color);
    font-size: 1.05rem;
    line-height: 1.4;
    box-shadow: 0 0 .125rem var(--field-shadow-color);
}

#configure-form input::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

#configure-form input:hover,
#configure-form select:hover {
    border-color: var(--field-hover-border-color);
}

#configure-form input:focus-visible,
#configure-form select:focus-visible {
    border-color: var(--focus-color);
}

#configure-form > .action-button {
    margin-block: .75rem 0;
}

#history-list {
    display: grid;
    gap: .75rem;
    margin-block: 0;
    padding-inline-start: 1.5rem;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

#history-list li {
    padding-inline-start: .2rem;
}

#history-list a {
    display: block;
    padding-block: .8rem;
    padding-inline: 1rem;
    border: .0625rem solid var(--border-color);
    border-radius: .75rem;
    background: var(--history-row-color);
    font-weight: 600;
    overflow-wrap: anywhere;
}

#history-list a:hover {
    background: var(--history-row-hover-color);
}

.view[data-route-name="display"] {
    padding-inline: 1vi;
    padding-block: 1vb;
    display: flex;
    flex-direction: column;
    max-inline-size: 90rem;
    min-block-size: calc(100vb - var(--page-gutter) - var(--page-gutter));
}

#display-kind {
    color: var(--secondary-color);
    font-size: max(5vi, 1.75rem);
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

#display-kind-value {
    color: var(--brand-color);
}

#display-line-for {
    margin-block: clamp(1.25rem, 3vi, 2rem) 1rem;
    padding-block: .65rem;
    padding-inline: 1rem;
    border-inline-start: .35rem solid var(--brand-color);
    border-radius: .75rem;
    background: var(--line-background-color);
    color: var(--main-color);
    font-size: max(3vi, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

#display-dest {
    display: grid;
    flex: 1;
    place-items: center;
    min-block-size: 10rem;
    padding-block: 1vi;
    padding-inline: 1vi;
    border: .125rem solid var(--destination-border-color);
    border-radius: 1.25rem;
    background: var(--destination-background-color);
    color: var(--brand-hover-color);
    font-size: max(8vi, 2rem);
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    overflow-wrap: anywhere;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

#display-credit {
    margin-block-start: 1rem;
    color: var(--secondary-color);
    font-size: max(1vi, 1rem);
    font-weight: 700;
    text-align: end;
}

.view[data-route-name="display"] hr {
    margin-block: 1rem .75rem;
}

.view[data-route-name="display"] p {
    color: var(--secondary-color);
    font-size: .9rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    button.action-button {
        transition: none;
    }

    button.action-button:hover,
    button.action-button:active {
        transform: none;
    }
}