:root {
    --app-header-height: 50px;
    /*
     * Tongueplace design-system contract.
     *
     * Components consume semantic/component tokens.  Palette values are kept
     * here so a theme can change the product without page-local color forks.
     * Page-prefixed variables below the core layer are compatibility aliases
     * and can be retired component by component.
     */
    --palette-white: rgb(255 255 255);
    --palette-black: rgb(0 0 0);
    --palette-ink: rgb(24 33 40);
    --palette-muted-strong: rgb(93 104 112);
    --palette-muted: rgb(101 113 122);
    --palette-muted-route: rgb(124 135 144);
    --palette-disabled: rgb(79 91 102);
    --palette-surface-subtle: rgb(243 245 247);
    --palette-border: rgb(228 232 237);
    --palette-border-soft: rgb(238 238 238);
    --palette-control-fill: rgb(228 232 238);
    --palette-blue-50: rgb(238 244 255);
    --palette-blue-75: rgb(237 246 255);
    --palette-blue-500: rgb(0 112 255);
    --palette-blue-600: rgb(0 103 235);
    --palette-blue-625: rgb(0 100 223);
    --palette-blue-700: rgb(0 95 204);
    --palette-green-500: rgb(0 159 0);
    --palette-green-600: rgb(0 143 0);
    --palette-green-700-action: rgb(0 128 0);
    --palette-green-50: rgb(237 248 239);
    --palette-green-700: rgb(8 120 62);
    --palette-pink-50: rgb(254 241 242);
    --palette-pink-500: rgb(255 10 95);
    --palette-red-50: rgb(255 240 244);
    --palette-red-700: rgb(192 0 67);

    --color-canvas: var(--palette-white);
    --color-surface: var(--palette-white);
    --color-on-action: var(--palette-white);
    --color-overlay-surface: rgba(255, 255, 255, .96);
    --color-surface-subtle: var(--palette-surface-subtle);
    --color-text-primary: var(--palette-ink);
    --color-text-secondary: var(--palette-muted-strong);
    --color-text-muted: var(--palette-muted);
    --color-text-tertiary: var(--palette-muted-route);
    --color-text-disabled: var(--palette-disabled);
    --color-border-default: var(--palette-border);
    --color-border-subtle: var(--palette-border-soft);
    --color-control-fill: var(--palette-control-fill);
    --color-brand: var(--palette-blue-500);
    --color-action: var(--palette-blue-600);
    --color-raised-action-hover: var(--palette-blue-625);
    --color-action-hover: var(--palette-blue-700);
    --color-action-soft: var(--palette-blue-50);
    --color-action-hover-soft: var(--palette-blue-75);
    --color-focus-ring: var(--palette-blue-700);
    --color-success-text: var(--palette-green-700);
    --color-success-soft: var(--palette-green-50);
    --color-success-action: var(--palette-green-500);
    --color-success-action-hover: var(--palette-green-600);
    --color-success-action-border: var(--palette-green-700-action);
    --color-success-selection: rgba(0, 159, 0, .12);
    --color-danger-text: var(--palette-red-700);
    --color-danger-soft: var(--palette-red-50);
    --color-favorite: var(--palette-pink-500);
    --color-favorite-soft: var(--palette-pink-50);

    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-9: 18px;
    --space-10: 20px;
    --space-11: 22px;
    --space-12: 24px;
    --space-14: 28px;
    --space-16: 32px;
    --space-24: 48px;
    --space-28: 56px;
    --space-32: 64px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-control: 14px;
    --radius-lg: 16px;
    --radius-popover: 18px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --radius-round: 50%;

    --font-size-caption: 13px;
    --line-height-caption: 18px;
    --font-size-label: 14px;
    --line-height-label: 20px;
    --font-size-body-sm: 15px;
    --line-height-body-sm: 20px;
    --font-size-body: 17px;
    --line-height-body: 22px;
    --font-size-title-sm: 20px;
    --line-height-title-sm: 25px;
    --font-size-title: 24px;
    --line-height-title: 29px;
    --font-size-heading: 28px;
    --line-height-heading: 34px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-strong: 650;
    --font-weight-bold: 700;

    --control-compact: 32px;
    --control-regular: 40px;
    --control-touch: 44px;
    --control-large: 52px;
    --control-xlarge: 56px;
    --control-tile: 64px;

    --app-control-track-radius: 4px;
    --app-control-thumb-radius: 10px;
    --app-control-thumb-border-width: 3px;
    --app-control-thumb-border-bottom-width: 5px;
    --app-range-track-height: 16px;
    --app-range-thumb-size: 34px;
    --app-switch-width: 44px;
    --app-switch-height: 30px;
    --app-switch-track-width: 40px;
    --app-switch-track-height: 18px;
    --app-switch-thumb-size: 30px;
    --app-switch-thumb-travel: 14px;

    --duration-fast: 120ms;
    --duration-standard: 160ms;
    --duration-emphasized: 200ms;
    --duration-slow: 280ms;
    --ease-standard: ease;

    --shadow-sm: 0 2px 7px rgba(23, 33, 42, .16);
    --shadow-popover: 0 12px 28px rgba(23, 33, 42, .14);
    --shadow-md: 0 8px 24px rgba(30, 43, 57, .12);
    --shadow-lg: 0 12px 32px rgba(31, 43, 51, .16);
    --shadow-overlay: 0 24px 80px rgba(20, 31, 41, .22);

    --layer-base: 0;
    --layer-raised: 10;
    --layer-dock: 1000;
    --layer-popover: 1200;
    --layer-modal: 2000;
    --layer-toast: 2400;

    --app-page-content-width: 960px;
    --app-dock-content-width: 640px;
}

/* Only a stale direct-entry page receives this class. The normal path does
   not make a request and remains visible. */
html.client-time-zone-syncing body {
    visibility: hidden;
    pointer-events: none;
}

* {
      padding: 0;
      margin: 0;
      color: var(--color-text-primary);
      text-decoration: none;
      box-sizing: border-box;
  }
  
  html, body {
    height: fit-content;
    width: 100vw;
    margin: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-text-primary);
    font-weight: 400;
    gap: 8px;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--color-canvas);
    padding: 0 0 60px 0;
  }
  
   
   body::selection {
   background-color: var(--color-brand);
   color: var(--color-on-action);
   }
   

 .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding: 0 12px;
      gap: 12px;
      max-width: var(--app-page-content-width);
      
      height: fit-content;
  }
  
    /************** FONTS FADES **************/
  
.secondary { opacity: .8; }
.thirdly { opacity: .6; } 
.fourthly { opacity: .4; } 
  
     /************** TEXT ALIGN **************/
     
.text-centered { text-align: center; }
  
  /************** FONTS **************/
  
    .text-regular {  
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-regular);
        color: inherit;
    }
    
    .text-regular-secondary {
        color: var(--color-text-secondary);
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-regular);
    }
    
    .text-bold {  
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-medium);
        color: inherit;
    } 
    
    .text-main {  
        font-size: var(--font-size-title-sm);
        line-height: var(--line-height-title-sm);
        font-weight: var(--font-weight-medium);
        color: inherit;
    } 
    
    .text-main-center {  
        font-size: var(--font-size-title-sm);
        line-height: var(--line-height-title-sm);
        font-weight: var(--font-weight-medium);
        color: inherit;
        width: 100%;
        text-align: center;
    } 

    .text-btn {  
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        color: inherit;
    }

    .text-head {  
        font-size: 35px;
        line-height: 40px;
        font-weight: 700;
        text-align: center;
        color: inherit;
    }

    .text-title {  
        font-size: var(--font-size-heading);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bold);
        color: inherit;
    }
    
    .text-caption {  
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        font-weight: var(--font-weight-regular);
        color: inherit;
    }
    
    .text-caption-bold{  
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        font-weight: var(--font-weight-medium);
        color: inherit;
    } 
  
    

  /************** LOBBY HEADER **************/
  
  
  .pie-header {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      width: inherit;
      height: fit-content;
      position: relative;
      border-radius: 32px;
  }
  
  
 
  
  .pie-header-character {
      display: none;
      width: 100%;
      height: 100%;
      max-width: 280px;
      align-items: flex-end;
      
  }
 
  .character {
  display: flex;
  width: 100%;
  height: auto;
  object-fit: contain;
  }
  
  
    /************** CONTAINERS **************/
  
   .pie {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      border-radius: 32px;
  }
  
   @media (max-width: 604px) { 
    
    .pie {  background: none; padding: 0px;  }
       
   }
  

  .pie-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 20px;
      gap: 12px;
      background: #F5F6F8;
      border-radius: 20px;
  }
  
  .pie-container-additional {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 20px;
      gap: 12px;
      background: #e4e8ee;
      border-radius: 20px;
  }
  
  
   @media (max-width: 604px) {
       
    .pie-container-additional,
    .pie-container {   padding: 16px;  }
       
   }
  
  
   .settings-step-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 16px 0;
      gap: 16px;
  }

  .settings-menu {
      gap: 8px;
      width: 100%;
  }

  .settings-menu[hidden] {
      display: none !important;
  }

  .settings-menu:not([hidden]) {
      animation: settings-panel-in 280ms ease-out both;
  }

  @keyframes settings-panel-in {
      from {
          opacity: 0;
          transform: translateY(-12px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .settings-menu:not([hidden]) {
          animation: none;
      }
  }

  .settings-menu > .text-main-center {
      padding: 8px 8px 20px 8px;
  }

  .settings-menu .settings-step-wrapper {
      width: 100%;
      padding: 16px 2px;
  }

  .settings-menu .settings-step-wrapper .column-wrapper {
      align-items: flex-start;
      gap: 0px;
  }

  .settings-menu > .settings-step-wrapper > output {
      color: #0070FF;
  }

  .settings-menu output {
      display: block;
  }

  .settings-menu-actions {
      gap: 6px;
  }

  .settings-menu .btn[hidden],
  .settings-status[hidden] {
      display: none;
  }

  .settings-menu .btn:disabled,
  .settings-menu input:disabled {
      cursor: wait;
      opacity: .55;
  }

  .settings-status {
      width: 100%;
      padding: 4px 12px;
      color: #5D6870;
      text-align: center;
  }

  .settings-status.is-error {
      color: #D9004C;
  }
  
  
  
  .row-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 6px;
  }
  
  .column-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
  }

  .empty-state {
      padding: 24px 12px;
      text-align: center;
  }

  .empty-state-cover {
      display: block;
      width: 100%;
      max-width: 180px;
      aspect-ratio: 2 / 3;
      object-fit: contain;
  }
  
  .section-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 4px;
  }
  
  .lesson-menu-column-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 20px 0;
      background: #f3f5f7;
      border-radius: 14px;
  }
  
  
 
 
  /************** ITEMS **************/
  
  .line-disabled { 
      opacity: .4;
  }
  

   .word {
      cursor: pointer;
      width: inherit;
      height: fit-content;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      min-height: 100px;
      gap: 16px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid #E4E8ED;
      
      transition: all .2s ease;
  }

  .lesson {
      cursor: pointer;
      width: inherit;
      height: 78px;
      min-height: 78px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 12px 0;
      
      
      transition: all .2s ease;
  }
  
  .task {
      cursor: pointer;
      width: inherit;
      height: 64px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 16px;
      
      
      transition: all .2s ease;
  }
  
  .lesson:hover,
  .task:hover { padding: 0 0 0 16px; }
  
  
  
  .line-about {
      display: flex;
      width: inherit;
      height: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #E4E8ED;
  }
  
  .lesson > .line-about {
      min-height: 78px;
  }
  
  
    .line-about-word {
      display: flex;
      width: inherit;
      height: 100%;
      gap: 6px;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
  }
  
  
  .task:last-child .line-about { border-bottom: none; }
  .lesson:last-child .line-about { border-bottom: none; }
  
  
  .line-info {
      display: flex;
      flex-direction: column;
  }
  
  
  .line-info-word {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }
  
  .line-info-word > .chip {
      padding: 10px 0 0 0;
  }
  
  /************** CHIP **************/
  
  .chip {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;
      
      font-size: 13px;
      line-height: 17px;
      font-weight: 400;
  }
  
  .chip-bold {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;
      
      font-size: 17px;
      line-height: 22px;
      font-weight: 500;
  }
  
  
   .chip-tip {
       color: inherit;
       opacity: .6;
   }
  
  .chip-regular {
    color: #707C92;  
  }
  
  .chip-primary {
    color: #0070FF;  
  }
  
  .chip-current,
  .chip-quality {
    color: #009F00;  
  }
  
  .chip-useful {
    color: #8F00F0;  
  }
  
  .chip-streak-active {
    color: #B08D57;  
  }
  
  .chip-streak-active > span {
    color: #B08D57;  
  }
  
  
  
  .chip-streak-paused {
      color: #5D6870
  }
  
  .chip-streak-paused > span {
      color: #5D6870
  }
  
  
  .chip-actual {
    color: #FF6A00;  
  }
  
  .chip-mistake,
  .chip-special {
    color: #FF0A5F;  
  }
  
  
  .chip-additional {
    color: white;  
  }
  
  .chip-btn {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;
      
      font-size: 13px;
      line-height: 17px;
      font-weight: 500;
      
      padding: 6px 12px;
      border-radius: 999px;
  }
  
  .chip-btn-primary {
      color: #0070FF;
      background: #f3f5f7;
  }
  
  .chip-btn-regular {
      color: #5D6870;
      background: #f3f5f7;
  }
  

  
  /************** MENU **************/

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.spotlight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,18,18,0.25);
  backdrop-filter: blur(6px);
}

.spotlight-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* кликаем по меню, не по stage */
}

/* клон карточки (у него pointer-events можно оставить none) */
.spotlight-clone {
  pointer-events: none;
  will-change: transform;
  transition: transform 300ms ease;
}

/* меню в spotlight должно быть кликабельным */
.spotlight .lesson-menu {
  pointer-events: auto;
  z-index: 999;
}

html:has(body.menu-open),
body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}
  



.lesson-menu {
    position: fixed;
    z-index: 1001;
    display: none;
    flex-direction: column;
    width: min(420px, calc(100vw - 32px));
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    
    padding: 12px;
    gap: 4px;
    
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    
    box-sizing: border-box;

}

/* mobile bottom sheet */

@media (max-width: 604px) {

    .lesson-menu {
        width: calc( 100% - 32px);
        max-height: min(78vh, 640px);
        left: 16px;
        right: 0;
        bottom: 16px;
        top: auto;
        transform: none;

    }

}

.lesson-menu.is-open {
    display: flex;
}

.lesson-menu-content,
.lesson-menu-confirmation {
    width: 100%;
}

.lesson-menu-content {
    display: flex;
    flex-direction: column;
}

.lesson-menu-confirmation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-menu-content[hidden],
.lesson-menu-confirmation[hidden] {
    display: none !important;
}

.lesson-menu-confirmation-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px 20px;
    text-align: center;
}

.lesson-menu-confirmation-copy > * {
    width: 100%;
}

.lesson-menu-confirmation .lesson-menu-item {
    justify-content: center;
    background: #f3f5f7;
}

.lesson-menu-confirmation .lesson-menu-item.is-primary {
    color: #fff;
    background: #0070ff;
}

.lesson-menu-confirmation .lesson-menu-item.is-primary:hover {
    background: #0064e6;
}

.lesson-menu-item {
    cursor: pointer;
    width: 100%;
    padding: 6px 12px;
    white-space: nowrap;
    height: 64px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 25px;
    gap: 16px;
    color: black;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.lesson-menu-item > .icon { color: #5d6870; }

.lesson-menu-item:hover {
    background-color: #f3f5f7;
}


.lesson-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    transition: all .2s ease;
    display: none;
}


body.lesson-menu-open .lesson-overlay {
    display: block;
} 

/* Shared compact popover shell used by route, favorite and lesson actions. */
.app-popover {
    position: fixed;
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: var(--space-8);
    overflow-y: auto;
    border: 2px solid #eee;
    border-radius: var(--radius-popover);
    background: var(--color-surface);
    color: #1f2b33;
    box-shadow: var(--shadow-lg);
}

.app-popover[hidden] {
    display: none !important;
}

.app-popover__close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: var(--control-touch);
    height: var(--control-touch);
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
}

.app-popover__close .icon {
    color: currentColor;
    font-size: 12px;
}

.app-popover__title {
    min-height: 28px;
    margin: 0 42px 2px 0;
    color: #1f2b33;
    font-size: 16px;
    line-height: 22px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.app-popover__detail {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 17px;
    overflow-wrap: anywhere;
}

.app-popover__detail[hidden] {
    display: none;
}

.app-popover__actions {
    display: grid;
    gap: 6px;
}

.app-popover__action {
    appearance: none;
    display: grid;
    width: 100%;
    min-height: var(--control-touch);
    place-items: center;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: #273139;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 18px;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
}

.app-popover__action.is-primary {
    background: var(--color-brand);
    color: #fff;
}

.app-popover__action[aria-disabled="true"],
.app-popover__action:disabled,
.app-popover__close:disabled {
    cursor: default;
    opacity: .55;
}

.app-popover__close:focus-visible,
.app-popover__action:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: var(--space-1);
}
  
  /************** HEADER **************/

/* Page-header search/close controls. Card and list delete actions are separate. */
:is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) {
    box-sizing: border-box;
    appearance: none;
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #000;
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transform: var(--header-action-transform, none);
    transition: background-color 120ms ease;
    touch-action: manipulation;
}

.home-route-header > .home-route-header-action:has(> .icon-delete) {
    --header-action-transform: translateY(-50%);
}

:is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) > .icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    color: inherit;
    font-size: 24px;
    pointer-events: none;
}

/* Match the Home header icons without resizing buttons, tiles or the dock. */
.head-lesson .card-audio-autoplay-toggle > .icon-audio {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.head-lesson .card-audio-autoplay-toggle > .card-audio-autoplay-toggle__slash {
    width: calc(24px * 25 / 22);
}

@media (min-width: 769px) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) {
        padding: 7.6px;
    }

    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) > .icon {
        flex: 0 0 28.8px;
        width: 28.8px;
        min-width: 28.8px;
        height: 28.8px;
        min-height: 28.8px;
        font-size: 28.8px;
    }

    .head-lesson .card-audio-autoplay-toggle > .icon-audio {
        width: 28.8px;
        height: 28.8px;
        font-size: 28.8px;
    }

    .head-lesson .card-audio-autoplay-toggle > .card-audio-autoplay-toggle__slash {
        width: calc(28.8px * 25 / 22);
    }
}

:is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)):focus-visible {
    outline: 3px solid var(--color-focus-ring, #005fcc);
    outline-offset: -3px;
}

@media (hover: hover) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)):not(:disabled):hover {
        background: #f3f5f7;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) {
        transition: none;
    }
}

@media (forced-colors: active) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-delete, .icon-search)) {
        background: Canvas;
        color: ButtonText;
    }
}
  
  
 .head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: var(--app-page-content-width);
      padding: 0 20px;
      border-bottom: 0px solid #E4E8ED;
      height: 70px;
      
  }
  
  
  .logo {
      height: 40px;
      width: auto;
  }
  
  
   @media (max-width: 604px) { 
    
   .head { justify-content: center; height: 60px; }
       
    .logo {  height: 36px; }   
       
   }
   
   @media (max-width: 351px) { 
    
   .head { justify-content: center; height: 50px; }
       
    .logo {  height: 32px; }   
       
   }
  
  
  
  .menu {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: fit-content;
      gap: 28px;
      
  }
  
  
  @media (max-width: 604px) { 
     

   .menu {
    position: fixed;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    z-index: 999;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    height: fit-content;
    padding: 12px 20px 20px 20px;
    
    gap: 6px;
    
    border-top: 1px solid #E4E8ED;
    
    }

    
}
  
  
  

  .menu-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      
      cursor: pointer;
      color: #707C92;
      
      font-size: 18px;
      line-height: 25px;
      
      height: 60px;
      font-weight: 500;
      gap: 10px;
      
      padding: 8px 0;
      text-decoration: none;
      background: transparent;
  }
  
    @media (min-width: 605px) {
  
  .menu-list > .icon { display: none; } 
      
  }
  
  .menu-list-active {
      color: #0070FF;
     
      font-weight: 500;
      
  }
  
  
  
   @media (max-width: 604px) { 
  
  
  .menu-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      color: #5D6870;
      font-size: 11px;
      line-height: 13px;
      height: fit-content;
      font-weight: 500;
      gap: 6px;
      
      padding: 0px;
      border-radius: 0px;
      
  }
  
  .menu-list-active {
      color: #0070FF;
      background-color: transparent;
      font-weight: 500;
      border-top: 0px;
  }
  
}



  /************** BUTTONS **************/

.btn-square {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
    
    transition: all ease-in .12s;
    user-select: none;
}


.btn-high-square {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    min-height: 64px;
    min-width: 64px;
    width: 64px;
    
    transition: all ease-in .12s;
    user-select: none;
}

.btn-high {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-control);
    font-size: var(--font-size-title-sm);
    line-height: var(--line-height-title-sm);
    font-weight: var(--font-weight-medium);
    gap: var(--space-4);
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
    min-height: var(--control-tile);
    width: 100%;
    
    transition: opacity var(--duration-fast) ease-in;
    user-select: none;
}

.btn {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-control);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);
    gap: var(--space-4);
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
    min-height: var(--control-xlarge);
    width: 100%;
    
    transition: opacity var(--duration-fast) ease-in;
    user-select: none;
    outline: none;
    border: none; 
}

.btn:hover,
.btn-high:hover { opacity: .8; }





@media (max-width: 351px) { 
     
     .btn {  font: 500 13px/18px;  min-height: 50px;  gap: 4px; }

}



.btn-regular {
    color: white;
    background: #000;
}
  
.btn-control {
    color: #0070ff;
    background: #EDF6FF;
}
  
.btn-control-white-bg {
    color: #0070ff;
    background: white;
}
  
.btn-secondary {
    color: black;
    background: #F3F5F7;
}
  
  
.btn-thirdly {
    color: white;
    background-color: rgba(255,255,255,.2);
}
  
.btn-special {
    color: white;
    background-color: #FF0A5F;
}
  
.btn-choise {
    color: black;
    background: white;
}
  
.btn-choise-additional {
    color: black;
    background: #E4E8ED;
}
  
.btn-secondary-no-bg {
    color: black;
    background: none;
}

.btn-disabled {
    color: #B9C3CB;
    background: #F3F5F7;
}
  
.btn-primary {
    color: white;
    background: #0070FF;
}  

/* Primary decisions in bottom docks use a consistent outline. */
.app-dock-cta {
    --app-dock-cta-background: var(--color-brand);
    --app-dock-cta-border: var(--color-focus-ring);
    --app-dock-cta-hover: var(--color-raised-action-hover);
    box-sizing: border-box;
    min-height: var(--control-xlarge);
    border: 3px solid var(--app-dock-cta-border);
    border-radius: var(--radius-lg);
    background: var(--app-dock-cta-background);
    color: #fff;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);
}

.app-dock-cta.is-success {
    --app-dock-cta-background: #009f00;
    --app-dock-cta-border: #008000;
    --app-dock-cta-hover: #008f00;
}

.app-dock-cta.is-neutral {
    --app-dock-cta-background: #fff;
    --app-dock-cta-border: #cbd3d9;
    --app-dock-cta-hover: #f7f8fa;
    color: var(--color-text-primary);
}

.app-dock-cta:is(:disabled, [aria-disabled="true"], .is-disabled) {
    border-color: #cbd3d9;
    background: var(--color-border-default);
    color: #4f5b66;
    cursor: default;
    opacity: 1;
}

.app-dock-attachments {
    display: flex;
    width: min(100%, var(--app-dock-content-width));
    max-width: var(--app-dock-content-width);
    min-width: 0;
    margin-inline: auto;
    padding: var(--space-6) var(--space-8) var(--space-1);
    align-items: center;
    gap: var(--space-5);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.app-dock-attachments::-webkit-scrollbar {
    display: none;
}

.app-dock-attachment {
    position: relative;
    display: grid;
    width: 58px;
    min-width: 58px;
    height: 58px;
    place-items: center;
}

.app-dock-attachment-visual {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    color: #0067eb;
    background: #f3f5f7;
}

.app-dock-attachment-slot.is-empty {
    pointer-events: none;
}

.app-dock-attachment-empty {
    border: 2px dashed #d8e1e7;
    background: #fff;
}

.app-dock-attachment-visual > .icon:not(.favorite-list-heart) {
    color: currentColor;
    font-size: 22px;
}

.app-dock-attachment-cover {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-dock-attachment-remove {
    appearance: none;
    position: absolute;
    z-index: 3;
    top: -3px;
    right: -3px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 2px solid #d7dde2;
    border-radius: 50%;
    color: #65717a;
    background: #fff;
    box-shadow: 0 2px 7px rgba(31, 43, 51, .12);
    cursor: pointer;
    font: inherit;
}

.app-dock-attachment-remove .icon {
    color: currentColor;
    font-size: 8px;
}

.app-dock-attachment-remove:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .app-dock-cta:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
        border-color: var(--app-dock-cta-border);
        background: var(--app-dock-cta-hover);
        opacity: 1;
    }
}

.study-details {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 4;
}

.settings-trigger {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 0;
    font: inherit;
}

.settings-trigger.is-open {
    display: none;
}

.btn-super-select { 
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 999px;
      
      cursor: pointer;
      transition: all .2s ease;
      
      display: flex;
      justify-content: center;
      align-items: center;
  }

.favorite-limit-disabled {
    opacity: .45;
    cursor: default;
}

.btn-select { 
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 999px;
      
      cursor: pointer;
      transition: all .2s ease;
      
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .btn-select-empty {
      color: black;
      background: white;
      border: 2px solid #B9C3CB;
  }
  
  .btn-select-selected {
      color: white;
      background: #0070FF;
  }
  
  .btn-select-done {
      color: white;
      background: #009F00;
  }
  
  .btn-select-warn {
      color: #FF0A5F;
      background: #FEF1F2;
  }

  .btn-learned {
      color: #0070FF;
      background: #F3F5F7;
  }

  .btn-learned.is-active {
      color: white;
      background: #0070FF;
  }
  
  .btn-select-wrong {
      color: white;
      background: #FF0A5F;
  }
  


  .label { 
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 999px;
      
      cursor: pointer;
      transition: all .2s ease;
      
      display: flex;
      justify-content: center;
      align-items: center;
      
      z-index: 99;
      
      border: 2px solid white;
      
      position: absolute;
      right: -4px;
      bottom: -4px;
  }
  
  .label-primary {
      color: white;
      background: #0070FF;
  }




/* Retired title/tutorial slider CSS. Removed after static production-reference audit; see docs/DESIGN_SYSTEM.md. */

/************** SUPERVISOR NOTICE **************/

#supervisor-notice[hidden] {
    display: none;
}

.supervisor-notice {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: #000;
    background: #EDF6FF;
    border-radius: 16px;
}

.supervisor-notice-marker {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: #0070FF;
    border-radius: 50%;
}

.supervisor-notice > p {
    min-width: 0;
    flex: 1 1 auto;
}

.supervisor-notice-dismiss {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    opacity: .55;
}

.supervisor-notice-dismiss:hover,
.supervisor-notice-dismiss:focus-visible {
    background: rgba(0, 0, 0, .06);
    opacity: 1;
}

.supervisor-notice-dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.supervisor-notice.is-event {
    background: #F1F8F1;
}

.supervisor-notice.is-event > .supervisor-notice-marker {
    background: #008000;
}

.supervisor-notice.is-warning {
    background: #FEF1F2;
}

.supervisor-notice.is-warning > .supervisor-notice-marker {
    background: #FF0A5F;
}

.supervisor-notice.is-suggestion {
    background: #EDF6FF;
}

/* Retired dates-preset, lesson-review and duplicate practice chooser CSS. Removed after static production-reference audit; see docs/DESIGN_SYSTEM.md. */

/************** MINIATURES **************/

.icon-circled {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 999px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-clean { 
    color: #0070FF;
    background-color: white;
}


.task-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 12px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}



.task-icon-done {
    color: #009F00;
    background: #E5F5E5;
}


.task-icon-default {
    color: #707C92;
    background: #F3F5F7;
}


.lesson-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    position: relative;
    
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}


.lesson-icon-mini {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    position: relative;
    
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.avatar-image {
      width: 100%;
      height: 100%;
      aspect-ratio: 1/1;
      
      position: absolute;
      border-radius: 999px;
      left: 0px;
      top: 0px;
      
      background-color: #f3f5f7;
  }
  
  .avatar-image-miniature {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
      aspect-ratio: 1/1;
      
      background-size: cover;
      background-position: center;
      border-radius: 999px;
      
      background-color: #f3f5f7;
  }



 /************** ISLAND **************/
 
   .dynamic-island {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 28px 0;
      width: 100%;
  }
  
    @media (max-width: 604px) { 
     
      .dynamic-island { padding: 20px 0; }
        
    }
    
    


 .dynamic-island-point {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    gap: 8px;
    cursor: pointer;
    background: none;
    width: 100%;
    
    transition: all ease-in .12s;
    user-select: none;
  }

 
  /************** SEARCH **************/

.search {
    
    background-color: #f3f5f7;
    padding: 12px 20px;
    border-radius: 14px;
    height: 64px;
    width: inherit;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    
    cursor: pointer;
    border: none;
    outline: none;
    
    -webkit-tap-highlight-color: transparent;
    
}

.search::placeholder { color: #727b81; }

.search:focus { background-color: #E4E8ED; }




  /************** RANGE **************/
  
 .range-control {
    --range-progress: 0%;

    position: relative;

    width: 100%;
    height: 20px;
    padding: 2px;

    background: linear-gradient(
        to right,
        #0070FF 0%,
        #0070FF var(--range-progress),
        #FFFFFF var(--range-progress),
        #FFFFFF 100%
    );
    border-radius: 99px;

    box-sizing: border-box;
}

/* Сам input занимает внутреннюю область 16px высотой */
.daily-minutes-range {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    cursor: pointer;
}

/* Прозрачная дорожка — фон уже находится на контейнере */
.daily-minutes-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;

    background: transparent;
    border-radius: 99px;
}

.daily-minutes-range::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -6px;

    appearance: none;
    -webkit-appearance: none;

    background: #FFFFFF;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 112, 255, 1);
}

/* Firefox */
.daily-minutes-range::-moz-range-track {
    width: 100%;
    height: 28px;

    background: transparent;
    border: 0;
    border-radius: 99px;
}

.daily-minutes-range::-moz-range-thumb {
    width: 28px;
    height: 28px;

    background: #FFFFFF;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 112, 255, 0.0);
}

/* Маркеры располагаются по центрам возможных положений бегунка */
.range-markers {
    position: absolute;
    z-index: 1;

    top: 2px;
    right: 10px;
    bottom: 2px;
    left: 10px;

    pointer-events: none;
}

.range-markers span {
    position: absolute;
    top: 50%;
    left: var(--position);

    width: 6px;
    height: 6px;

    background: rgba(93, 104, 112, 0.25);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.range-markers span.is-filled {
    background: rgba(255, 255, 255, 0.5);
}

.daily-minutes-range:focus-visible {
    outline: none;
}

.range-control:has(.daily-minutes-range:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 1);
    outline-offset: 3px;
}



  /************** SHARED RANGE + SWITCH **************/

.app-range {
    --range-progress: 0%;

    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    min-height: var(--control-touch);
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
}

.app-range::before {
    position: absolute;
    top: 50%;
    right: 17px;
    left: 17px;
    height: var(--app-range-track-height);
    border-radius: var(--app-control-track-radius);
    background: linear-gradient(
        to right,
        var(--color-brand) 0%,
        var(--color-brand) var(--range-progress),
        var(--color-surface-subtle) var(--range-progress),
        var(--color-surface-subtle) 100%
    );
    content: "";
    transform: translateY(-50%);
}

.app-range__input {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--control-touch);
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.app-range__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    border: 0;
    background: transparent;
}

.app-range__input::-webkit-slider-thumb {
    width: var(--app-range-thumb-size);
    height: var(--app-range-thumb-size);
    margin-top: -7px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border: var(--app-control-thumb-border-width) solid var(--color-brand);
    border-bottom-width: var(--app-control-thumb-border-bottom-width);
    border-radius: var(--app-control-thumb-radius);
    background: var(--color-surface);
    box-shadow: none;
}

.app-range__input::-moz-range-track {
    width: 100%;
    height: 20px;
    border: 0;
    background: transparent;
}

.app-range__input::-moz-range-thumb {
    width: var(--app-range-thumb-size);
    height: var(--app-range-thumb-size);
    box-sizing: border-box;
    border: var(--app-control-thumb-border-width) solid var(--color-brand);
    border-bottom-width: var(--app-control-thumb-border-bottom-width);
    border-radius: var(--app-control-thumb-radius);
    background: var(--color-surface);
    box-shadow: none;
}

.app-range__markers {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 17px;
    bottom: auto;
    left: 17px;
    height: var(--app-range-track-height);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-range__markers span {
    position: absolute;
    top: 50%;
    left: var(--position);
    width: 5px;
    height: 5px;
    border-radius: var(--radius-round);
    background: rgba(93, 104, 112, .3);
    transform: translate(-50%, -50%);
}

.app-range__markers span.is-filled {
    background: rgba(255, 255, 255, .72);
}

.app-range__input:focus-visible {
    outline: none;
}

.app-range:has(.app-range__input:focus-visible) {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--app-control-thumb-radius);
}

.app-range__input:disabled {
    cursor: wait;
    opacity: .55;
}

.app-switch-label {
    display: inline-flex;
    min-height: var(--control-touch);
    align-items: center;
    cursor: pointer;
}

.app-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.app-switch {
    position: relative;
    display: inline-block;
    width: var(--app-switch-width);
    height: var(--app-switch-height);
    flex: 0 0 var(--app-switch-width);
    border: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.app-switch::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: var(--app-switch-track-width);
    height: var(--app-switch-track-height);
    border: 0;
    border-radius: var(--app-control-track-radius);
    background: var(--color-control-fill);
    content: "";
    transform: translateY(-50%);
    transition: background-color var(--duration-standard) var(--ease-standard);
}

.app-switch::after {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--app-switch-thumb-size);
    height: var(--app-switch-thumb-size);
    box-sizing: border-box;
    border: var(--app-control-thumb-border-width) solid var(--color-brand);
    border-bottom-width: var(--app-control-thumb-border-bottom-width);
    border-radius: var(--app-control-thumb-radius);
    background: var(--color-surface);
    content: "";
    box-shadow: none;
    transition: transform var(--duration-standard) var(--ease-standard);
}

.app-switch-input:checked + .app-switch::before {
    background: var(--color-brand);
}

.app-switch-input:checked + .app-switch::after {
    transform: translateX(var(--app-switch-thumb-travel));
}

.app-switch-input:focus-visible + .app-switch::after {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.app-switch-input:disabled + .app-switch {
    cursor: wait;
    opacity: .55;
}

.app-switch-label:has(.app-switch-input:disabled) {
    cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
    .app-switch::before,
    .app-switch::after {
        transition: none;
    }
}

@media (forced-colors: active) {
    .app-range::before,
    .app-switch::before {
        border: 1px solid CanvasText;
        background: Canvas;
    }

    .app-range__input::-webkit-slider-thumb,
    .app-switch::after {
        border-color: Highlight;
        background: Canvas;
    }

    .app-range__input::-moz-range-thumb {
        border-color: Highlight;
        background: Canvas;
    }

    .app-switch-input:checked + .app-switch::before {
        background: Highlight;
    }
}