@layer app {
  :root {
    color-scheme: light;
  }
  :root[data-theme='dark'] {
    color-scheme: dark;
  }

  #app {
    min-height: 100vh;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .elm-header {
    padding: var(--s3);
  }
  .elm-header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--nav-max-width);
    margin: auto;
  }
  .elm-header .brand {
    border-bottom: 4px solid var(--purple);
    color: var(--purple);
    font-size: var(--f3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title);
  }
  .back-header nav {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    gap: var(--s2);
  }
  .back-header h1 {
    grid-column: 2;
    text-align: center;
    font-size: var(--f3);
  }
  .nav-actions {
    display: flex;
    gap: var(--s2);
    align-items: center;
  }
  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: inherit;
    font-size: 1.5rem;
  }
  .back-header button.nav-icon {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .ui-icon {
    display: inline-block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: inherit;
    stroke: currentColor;
  }
  .loader {
    animation: spin 1s linear infinite;
  }
  .audio-button {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
  }

  .elm-main {
    max-width: var(--main-max-width);
    margin: 0 auto;
    padding: var(--s3);
  }
  .elm-main.reference,
  .elm-main.study {
    max-width: unset;
    margin: 0;
    padding: 0;
  }
  .elm-main.search {
    padding: var(--s3);
  }
  .elm-main h2 {
    font-size: var(--f4);
  }
  .elm-main a {
    color: inherit;
  }
  .elm-main button {
    cursor: pointer;
  }
  .elm-main button:disabled {
    cursor: default;
    opacity: .5;
  }
  .error {
    color: var(--error);
  }

  .purple-inverse {
    background: var(--purple-solid);
    color: var(--inverse-text) !important;
  }
  .pink-inverse {
    background: var(--pink-solid);
    color: var(--inverse-text) !important;
  }
  .blue-inverse {
    background: var(--blue-solid);
    color: var(--inverse-text) !important;
  }
  .pink-dots {
    background-color: var(--pink-dots-bg);
    background-image: var(--dot-pattern-pink);
    color: var(--pink-tint-text);
  }
  .blue-dots {
    background-color: var(--blue-dots-bg);
    background-image: var(--dot-pattern-blue);
    color: var(--blue-tint-text);
  }
  .purple-dots {
    background-color: var(--purple-dots-bg);
    background-image: var(--dot-pattern-purple);
    color: var(--purple-tint-text);
  }
  .pink-border {
    border: 1px solid var(--pink);
  }
  .blue-border {
    border: 1px solid var(--blue);
  }
  .purple-border {
    border: 1px solid var(--purple);
  }

  .study-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s2) 0 var(--s4);
    margin: 0 auto var(--s4);
  }
  .home-games-link {
    max-width: var(--main-max-width);
    margin: var(--s4) auto;
    text-align: center;
  }
  .home-games-link a {
    display: block;
    text-decoration: none;
  }
  .game-button {
    display: flex;
    justify-content: center;
    margin: var(--s3) auto;
  }
  .game-button a {
    width: min(100%, 30rem);
    text-decoration: none;
  }
  .game-button button {
    width: 100%;
    min-height: 3rem;
    border-radius: var(--br2);
    font-size: var(--f4);
  }
  .game-study {
    max-width: var(--main-max-width);
    margin: 0 auto;
    padding: var(--s3);
  }
  .game-study fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s2) 0;
    padding: var(--s2);
    border: 1px solid var(--primary-dull);
    border-radius: var(--br2);
  }
  .game-study fieldset label {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
  }
  .game-study fieldset input {
    accent-color: var(--purple);
  }
  .game-study details {
    margin: var(--s3) 0;
    padding: var(--s2);
    border: 1px solid var(--purple);
    border-radius: var(--br2);
    background: var(--surface);
  }
  .game-study details summary {
    cursor: pointer;
    font-weight: var(--fw-bold);
  }
  .game-study .hiragana-quiz-panels,
  .game-study .zhuyin-quiz-panels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: center;
    padding: var(--s3) 0;
  }
  .game-study .hiragana-answer-box,
  .game-study .zhuyin-answer-box {
    position: relative;
    width: min(256px, 100%);
    height: 256px;
    border: 1px solid currentColor;
    border-radius: var(--br2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }
  .game-study .hiragana-answer-box.is-revealed,
  .game-study .zhuyin-answer-box.is-revealed {
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border-color: var(--purple);
  }
  .game-study .hiragana-answer-content,
  .game-study .zhuyin-answer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s2);
    text-align: center;
    overflow: hidden;
  }
  .game-study .hiragana-answer-content h2,
  .game-study .zhuyin-answer-content h2 {
    margin: 0;
    font-size: 5rem;
    line-height: 1;
  }
  .game-study .hiragana-answer-content h2.is-word,
  .game-study .zhuyin-answer-content h2.is-word {
    font-size: 2.5rem;
  }
  .game-study .hiragana-answer-content img {
    max-width: 100%;
    max-height: 100%;
  }
  .game-study .hiragana-canvas,
  .game-study .zhuyin-canvas {
    display: block;
    position: relative;
    flex: 0 0 256px;
    width: 256px;
    height: 256px;
    min-width: 256px;
    min-height: 256px;
    border: 1px solid currentColor;
    border-radius: var(--br2);
    background: var(--surface);
    touch-action: none;
    overflow: hidden;
  }
  .game-study .game-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
  }
  .game-study .hiragana-bottom-bar,
  .game-study .zhuyin-bottom-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
  }
  .game-study .hiragana-row-select,
  .game-study .zhuyin-row-select {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin: var(--s2) 0;
  }
  .game-study .hiragana-row-select button,
  .game-study .zhuyin-row-select button {
    border-radius: var(--br-full);
  }
  .game-progress {
    margin: var(--s2) 0;
    text-align: right;
    color: var(--secondary);
    font-size: var(--f6);
  }
  .journal-page {
    max-width: var(--main-max-width);
    margin: 0 auto;
  }
  .journal-page select {
    margin: var(--s2) 0;
    padding: var(--s2);
  }
  .journal-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s2) 0;
  }
  .journal-word {
    padding: var(--s1) var(--s2);
    border: 1px solid currentColor;
    border-radius: var(--br2);
    font-size: var(--f4);
    text-decoration: none;
  }
  .journal-word.is-used {
    background: var(--blue-bg);
    border-color: var(--blue);
    color: var(--blue);
  }
  .journal-editor {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s3);
  }
  .journal-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s2);
    font: inherit;
    font-size: var(--f5);
    line-height: 1.6;
    resize: vertical;
  }
  .study-button,
  .study-button-disabled {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 3rem;
    padding: var(--s2);
    border-radius: var(--br2);
    font-size: var(--f4);
    font-weight: var(--fw-medium);
    text-align: center;
  }
  .study-button {
    text-decoration: none;
    box-shadow: var(--button-shadow);
    transition: transform var(--transition-fast), box-shadow
      var(--transition-fast);
  }
  .study-button:active {
    box-shadow: var(--shadow-ink) 1px 1px 0;
    transform: translate(2px, 2px);
  }
  .study-button-disabled {
    border: 1px solid currentColor;
    color: var(--secondary);
    opacity: .35;
  }

  .progress-page .level-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--s2);
  }
  .level-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
  .level-heading button {
    height: 2em;
    width: 2em;
    padding: 0;
    margin-right: var(--s2);
  }
  .level-stats .totals {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    font-size: var(--f6);
  }
  .level-stats .totals h2 {
    margin-bottom: var(--s1);
  }
  .level-stats .totals p {
    margin: 0;
  }
  .progress-section {
    width: 100%;
    margin: var(--s1) 0;
  }
  .progress-section > summary {
    font-size: var(--f5);
    font-weight: var(--fw-medium);
    cursor: pointer;
  }
  .subject-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .subject-tile {
    display: inline-grid;
    place-items: center;
    padding: var(--s1);
    margin: var(--s1);
    border: 1px solid currentColor;
    border-radius: var(--br2);
    font-size: var(--f5);
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    transition: transform var(--transition-base);
  }
  .subject-tile:hover {
    transform: translateY(-2px);
  }
  .subject-tile.radical {
    color: var(--blue);
    box-shadow: var(--blue-shadow);
  }
  .subject-tile.character {
    color: var(--pink);
    box-shadow: var(--pink-shadow);
  }
  .subject-tile.vocabulary {
    color: var(--purple);
    box-shadow: var(--purple-shadow);
  }
  .subject-tile.locked {
    opacity: .6;
    box-shadow: none;
  }
  .subject-tile.started {
    border-color: currentColor;
  }
  .subject-tile.passed {
    border-color: var(--dot-border-color);
  }
  .subject-tile.passed.radical {
    background-color: var(--blue-dots-bg);
    background-image: var(--dot-pattern-blue);
    color: var(--blue-tint-text);
  }
  .subject-tile.passed.character {
    background-color: var(--pink-dots-bg);
    background-image: var(--dot-pattern-pink);
    color: var(--pink-tint-text);
  }
  .subject-tile.passed.vocabulary {
    background-color: var(--purple-dots-bg);
    background-image: var(--dot-pattern-purple);
    color: var(--purple-tint-text);
  }
  .grade-system {
    padding-top: var(--s3);
  }
  .progress-tabs {
    display: flex;
    gap: var(--s3);
    margin: var(--s3) 0 0;
  }
  .progress-tabs button {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--s2) 0;
    color: inherit;
    font-size: var(--f4);
    font-weight: var(--fw-bold);
    cursor: pointer;
  }
  .progress-tabs button:hover,
  .progress-tabs button:active,
  .grade-level:hover,
  .grade-level:active {
    transform: none;
  }
  .progress-tabs button:focus-visible,
  .grade-level:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .progress-tabs button:not(.selected) {
    opacity: .4;
  }
  .progress-tabs button.selected {
    text-decoration: underline;
  }
  .grade-system .stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0 var(--s3);
  }
  .grade-system .levels {
    flex: 1 1 10rem;
  }
  .grade-system h3 {
    font-size: var(--f6);
    margin: var(--s2) 0;
  }
  .grade-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .grade-level {
    appearance: none;
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--br2);
    box-shadow: none;
    background: transparent;
    color: inherit;
    text-align: left;
  }
  .grade-level.selected.character {
    border-color: transparent;
    background-color: var(--pink-dots-bg);
    background-image: var(--dot-pattern-pink);
    color: var(--pink-tint-text);
  }
  .grade-level.selected.vocabulary {
    border-color: transparent;
    background-color: var(--purple-dots-bg);
    background-image: var(--dot-pattern-purple);
    color: var(--purple-tint-text);
  }

  .known-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s3);
  }
  .known-controls input {
    width: 5em;
    padding: var(--s1);
  }
  .known-controls button {
    margin-left: auto;
  }
  .known-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--s2);
  }
  .known-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s2);
    border: 1px solid currentColor;
    border-radius: var(--br2);
    cursor: pointer;
  }
  .known-item.radical {
    background: var(--blue-bg);
    color: var(--blue);
  }
  .known-item.character {
    background: var(--pink-bg);
    color: var(--pink);
  }
  .known-item.vocabulary {
    background: var(--purple-bg);
    color: var(--purple);
  }
  .known-character {
    font-size: var(--f4);
    overflow-wrap: anywhere;
  }
  .known-item input {
    flex: none;
    accent-color: currentColor;
  }
  .custom-sets-list {
    list-style: none;
    padding: 0;
  }
  .custom-sets-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px dotted var(--primary-dull);
  }
  .custom-sets-page h2 {
    margin: var(--s4) 0 var(--s2);
  }
  .custom-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0;
  }
  .custom-file p {
    flex-basis: 100%;
  }
  .custom-file input {
    max-width: 100%;
    padding: var(--s1);
  }

  .welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--s3);
    background: rgba(0, 0, 0, .5);
  }
  .welcome-dialog {
    position: static;
    max-width: min(100%, 30rem);
    margin: 0;
    padding: var(--s4);
    border: 1px solid var(--purple);
    border-radius: var(--br2);
    background: var(--background);
    color: var(--body);
    box-shadow: var(--purple-shadow);
  }
  .welcome-dialog label,
  .welcome-dialog select {
    display: block;
    margin: var(--s3) 0;
  }
  .welcome-dialog select {
    max-width: 100%;
    padding: var(--s2);
  }

  .downloads-page .download-storage {
    padding: var(--s3);
    border: 1px solid var(--primary-dull);
    border-radius: var(--br2);
  }
  .downloads-page .download-storage h2 {
    margin-bottom: var(--s2);
  }
  .download-level {
    border-bottom: 1px dotted var(--primary-dull);
  }
  .download-level summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s3);
    cursor: pointer;
  }
  .download-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
  }
  .download-actions button {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
  }
  .download-actions span,
  .download-clear span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .download-level ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    max-height: 18rem;
    overflow: auto;
    list-style: none;
    padding: var(--s2) var(--s3);
  }
  .download-level li {
    padding: var(--s1);
    color: var(--purple);
  }
  .download-clear {
    margin-top: var(--s4);
  }

  .reference-page {
    --subject-color: var(--purple);
    --subject-bg: var(--purple-bg);
    --subject-solid: var(--purple-solid);
    --subject-dots-bg: var(--purple-dots-bg);
    --subject-pattern: var(--dot-pattern-purple);
    --subject-tint-text: var(--purple-tint-text);
    --subject-shadow: var(--purple-shadow);
  }
  .reference-page.character {
    --subject-color: var(--pink);
    --subject-bg: var(--pink-bg);
    --subject-solid: var(--pink-solid);
    --subject-dots-bg: var(--pink-dots-bg);
    --subject-pattern: var(--dot-pattern-pink);
    --subject-tint-text: var(--pink-tint-text);
    --subject-shadow: var(--pink-shadow);
  }
  .reference-page.radical {
    --subject-color: var(--blue);
    --subject-bg: var(--blue-bg);
    --subject-solid: var(--blue-solid);
    --subject-dots-bg: var(--blue-dots-bg);
    --subject-pattern: var(--dot-pattern-blue);
    --subject-tint-text: var(--blue-tint-text);
    --subject-shadow: var(--blue-shadow);
  }
  .study-header {
    position: relative;
    padding: var(--s1);
    text-align: center;
  }
  .study-header h1 {
    font-size: var(--f1);
    padding: var(--s3) var(--s2) var(--s1);
    line-height: var(--lh-title);
  }
  .study-topline {
    display: flex;
    justify-content: space-between;
    font-weight: var(--fw-bold);
    padding: var(--s1);
  }
  .study-topline a {
    color: inherit;
    text-decoration: none;
  }
  .study-subheader {
    padding: var(--s2);
    font-size: var(--f4);
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .reference-heading {
    background-color: var(--subject-dots-bg);
    background-image: var(--subject-pattern);
    color: var(--subject-tint-text);
  }
  .reference-heading .left {
    position: absolute;
    left: var(--s3);
    top: var(--s2);
    color: inherit;
    font-size: var(--f3);
    text-decoration: none;
    font-weight: var(--fw-bold);
  }
  .reference-heading .reference-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .reference-heading p {
    padding: 0 var(--s3) var(--s1);
  }
  .reference-page .study-subheader {
    background: var(--subject-solid);
    color: var(--inverse-text);
  }
  .card-details {
    max-width: var(--main-max-width);
    margin: auto;
    padding: var(--s3);
  }
  .card-details > details {
    margin-bottom: var(--s3);
    padding: var(--s2);
    border: 1px solid var(--subject-color);
    border-radius: var(--br2);
    box-shadow: var(--subject-shadow);
    background: var(--subject-bg);
    color: var(--subject-tint-text);
  }
  .card-details details summary {
    cursor: pointer;
    font-weight: var(--fw-bold);
  }
  .card-details > details h3 {
    padding: var(--s3) 0;
    text-align: center;
  }
  .card-details .reference-pronunciation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
  }
  .card-details .audio-button {
    padding: var(--s1);
    border: 0;
    box-shadow: none;
  }
  .card-details details.example {
    margin: var(--s1) 0;
    padding: var(--s1);
    border: 0;
  }
  .card-details h4 {
    margin: var(--s2) 0 var(--s1);
  }
  .card-details ul {
    padding-left: var(--s4);
    list-style: none;
  }
  .card-details ul li {
    display: inline;
  }
  .subject-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .subject-links a {
    padding: var(--s1) var(--s2);
    border: 1px solid currentColor;
    border-radius: var(--br2);
    text-decoration: none;
  }
  .reference-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s3);
    padding: var(--s3);
  }
  .reference-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
  }
  .reference-editor {
    padding-top: var(--s3);
  }
  .reference-editor textarea {
    display: block;
    width: 100%;
    min-height: 5rem;
    padding: var(--s2);
    border: 1px solid var(--purple);
    border-radius: var(--br2);
    background: var(--surface);
    color: var(--body);
  }

  .study-page {
    min-width: 300px;
  }
  .study-content {
    max-width: var(--main-max-width);
    margin: auto;
    padding: var(--s3) var(--s3) 0 var(--s3);
  }
  .study-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
  }
  .reference-actions .reference-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 2.75rem;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--subject-color);
    border-radius: var(--br2);
    background: var(--subject-bg);
    color: var(--subject-tint-text);
    box-shadow: var(--subject-shadow);
    text-decoration: none;
  }
  .answer-input {
    width: 100%;
    max-width: var(--main-max-width);
    margin: var(--s2) auto;
  }
  .answer-row {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: var(--s2) var(--s3);
    border-radius: var(--br2);
  }
  .answer-row:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .answer-row input {
    flex: 1;
    min-width: 0;
    width: 100%;
    font-size: var(--f4);
    text-align: center;
    padding: var(--s2) 3rem;
    margin: 0;
    border: 0;
    border-radius: var(--br2);
    background: transparent;
    color: inherit;
  }
  .answer-row input:focus {
    outline: none;
    box-shadow: none;
  }
  .answer-row input.green-bg {
    background: var(--green);
    color: var(--black);
  }
  .answer-row input.red-bg {
    background: var(--red);
    color: var(--black);
  }
  .answer-row input.green-bg + button,
  .answer-row input.red-bg + button {
    color: var(--black);
  }
  .answer-row button {
    position: absolute;
    top: 50%;
    right: var(--s1);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    box-shadow: none;
  }
  .answer-row button:hover {
    transform: translateY(-50%);
  }
  .study-quick-actions {
    position: fixed;
    right: var(--s2);
    bottom: calc(var(--s2) + var(--safe-bottom, 0px));
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: row;
    gap: var(--s2);
  }
  .study-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid var(--subject-color);
    border-radius: var(--br2);
    background: var(--subject-bg);
    color: var(--subject-tint-text);
    box-shadow: var(--subject-shadow);
  }
  @media (min-width: 769px) {
    .study-quick-actions {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .study-actions {
      visibility: hidden;
    }
  }
  .study-finished {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
  }
  .study-finished-heading {
    background-color: var(--subject-dots-bg);
    background-image: var(--subject-pattern);
    color: var(--subject-tint-text);
  }
  .study-finished-content {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding-bottom: var(--s4);
  }
  .study-finished-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
  }
  .study-finished-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
    min-width: 8rem;
    padding: var(--s3);
    border: 1px solid var(--subject-color);
    border-radius: var(--br2);
    background: var(--subject-bg);
    color: var(--subject-tint-text);
    box-shadow: var(--subject-shadow);
  }
  .study-finished-stat.is-success {
    border-color: var(--green-solid);
  }
  .study-finished-stat.is-failure {
    border-color: var(--red-solid);
  }
  .study-finished-value {
    font-size: var(--f1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title);
  }
  .study-finished-stat.is-success .study-finished-value {
    color: var(--green-solid);
  }
  .study-finished-stat.is-failure .study-finished-value {
    color: var(--red-solid);
  }
  .study-finished-label {
    font-size: var(--f5);
    font-weight: var(--fw-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .study-finished-actions {
    margin-top: auto;
  }
  .study-feedback {
    text-align: center;
  }
  .study-feedback .success {
    color: var(--green);
  }
  .study-feedback .failure {
    color: var(--red);
  }
  .study-feedback p {
    margin: 0;
  }
  .elm-main.settings {
    max-width: var(--main-max-width);
  }
  .settings-links {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    margin-bottom: var(--s4);
  }
  .settings-link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: var(--s3);
    border: 1px solid var(--blue);
    border-radius: var(--br2);
    background: var(--blue-bg);
    color: var(--blue-tint-text) !important;
    box-shadow: var(--blue-shadow);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow
      var(--transition-fast);
  }
  .settings-link:hover {
    text-decoration: underline;
  }
  .settings-link:active {
    box-shadow: var(--shadow-ink) 1px 1px 0;
    transform: translate(2px, 2px);
  }
  .settings-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
  .elm-main.settings label {
    display: block;
    margin: var(--s3) 0 var(--s1);
    font-weight: var(--fw-bold);
  }
  .elm-main.settings input:not([type='checkbox']),
  .elm-main.settings select {
    max-width: 100%;
    padding: var(--s2);
    border: 1px solid currentColor;
    border-radius: var(--br2);
    background: transparent;
    color: inherit;
  }
  .elm-main.settings select {
    box-shadow: var(--blue-shadow);
  }
  .elm-main.settings input[type='number'] {
    width: 5em;
  }
  .elm-main.settings input[type='checkbox'] {
    width: 2em;
    height: 2em;
    accent-color: var(--blue);
  }
  .elm-main.settings button {
    margin: var(--s1) var(--s2) var(--s1) 0;
  }
  .elm-main.settings > div > section {
    padding-bottom: var(--s3);
  }
  .elm-main.settings section h2 {
    margin-bottom: var(--s3);
  }
  .elm-main.settings .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s3);
    border-bottom: 1px dotted var(--primary-dull);
    font-size: var(--f6);
  }
  .elm-main.settings .settings-item label {
    margin: 0;
    padding: var(--s1) var(--s2);
  }
  .elm-main.settings .settings-item select {
    min-width: min(12em, 100%);
  }
  .elm-main.settings .settings-item input[type='number'] {
    width: 5em;
  }
  .sync-devices ul {
    list-style: none;
    padding: 0;
  }
  .sync-devices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s3) 0;
    border-bottom: 1px dotted var(--primary-dull);
  }
  .sync-device-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .sync-devices input {
    max-width: 100%;
  }
  .about-page > p {
    font-size: var(--f6);
    opacity: .7;
  }
  .about-page .made-by {
    text-align: center;
    padding: var(--s4) 0;
  }
  .about-page .made-by a {
    font-size: var(--f3);
    font-weight: var(--fw-bold);
    color: var(--body);
    text-decoration: none;
  }
  .about-page section {
    margin-bottom: var(--s4);
  }
  .about-page h2 {
    padding-bottom: var(--s2);
    border-bottom: 1px dotted var(--primary-dull);
  }
  .about-page a {
    color: var(--blue);
  }
  .license-list {
    list-style: none;
    padding: 0;
  }
  .license-list li {
    border-bottom: 1px dotted var(--primary-dull);
  }
  .license-list summary {
    cursor: pointer;
    font-weight: var(--fw-bold);
    padding: var(--s2) var(--s3);
  }
  .license-list details > p {
    padding: var(--s2) var(--s3);
  }
  .license-list pre {
    max-height: 25rem;
    overflow: auto;
    white-space: pre-wrap;
    background: var(--purple-bg);
    padding: var(--s3);
    border-radius: var(--br2);
  }
  .subject-list {
    list-style: none;
    padding: 0;
  }
  .subject-list li {
    padding: var(--s2);
    border-radius: var(--br2);
  }
  .subject-list li:hover {
    background: var(--purple-bg);
  }
  .subject-list a {
    display: flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
  }
  .subject-char {
    font-size: var(--f3);
    min-width: 2em;
    text-align: center;
  }
  .bold {
    font-weight: var(--fw-bold);
  }
  .f5 {
    font-size: var(--f5);
  }
}