:root {
  --display-font: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

.dot-menu-button {
  display: none;
}

.quick-mode-menu {
  display: none;
}

@media (max-width: 900px) {
  html,
  body {
    min-height: 100%;
  }

  body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #f6a5dd;
    transition: background-color 180ms ease;
  }

  body[data-app-mode="program"] {
    background: #f6a5dd;
  }

  body[data-app-mode="select"] {
    background: #ffdd3d;
  }

  body[data-app-mode="making"] {
    background: #ffdd3d;
  }

  .app {
    width: 100%;
    max-width: none;
    padding: 0 0 24px;
  }

  .topbar {
    position: relative;
    z-index: 15;
    min-height: 112px;
    margin: 0;
    padding: max(22px, env(safe-area-inset-top)) 24px 12px;
    background: transparent;
  }

  .brand small {
    display: none;
  }

  .brand h1 {
    font-family: var(--display-font);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
  }

  .brand h1::after {
    content: "®";
    position: relative;
    top: -.55em;
    margin-left: 2px;
    font-family: Arial, sans-serif;
    font-size: .42em;
  }

  .status {
    display: none;
  }

  .dot-menu-button {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(3, 7px);
    place-content: center;
    gap: 5px;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #ff4e16;
  }

  body[data-app-mode="select"] .dot-menu-button {
    background: #06b96f;
  }

  body[data-app-mode="making"] .dot-menu-button {
    background: #1766f5;
  }

  .dot-menu-button i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
  }

  .quick-mode-menu {
    position: fixed;
    z-index: 40;
    top: calc(max(22px, env(safe-area-inset-top)) + 70px);
    right: 16px;
    display: grid;
    gap: 6px;
    width: 176px;
    padding: 8px;
    border: 3px solid #090909;
    border-radius: 14px;
    background: #fff;
    box-shadow: 5px 5px 0 #090909;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: 150ms ease;
  }

  .quick-mode-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .quick-mode-menu button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #eef0f2;
    color: #090909;
    text-align: left;
    padding: 0 12px;
    font-family: var(--display-font);
    font-size: .78rem;
  }

  .mode {
    min-height: calc(100svh - 112px);
  }

  .desktop-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #programTrainer,
  #selectTrainer {
    order: 1;
  }

  .side-program,
  .side-select {
    order: 2;
    margin: 12px;
  }

  .trainer {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #ff4e16;
    box-shadow: none;
  }

  #selectTrainer .trainer {
    background: #06b96f;
  }

  .visual {
    height: 360px;
    min-height: 360px;
    margin-top: -1px;
  }

  .readouts {
    display: none;
  }

  .task-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 22px 12px;
    text-align: center;
  }

  .task-info .source {
    order: 3;
    margin: 18px 0 0;
    color: #fff;
    font-family: var(--display-font);
    font-size: 1.15rem;
    line-height: 1;
  }

  .task-info h2 {
    order: 1;
    width: 100%;
    max-width: 9.5ch;
    margin: 0 auto;
    font-family: var(--display-font);
    font-size: clamp(3.05rem, 14vw, 4.6rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  .task-info > p:not(.source) {
    order: 2;
    width: 100%;
    max-width: 24ch;
    margin: 16px auto 0;
    color: #fff;
    font-family: var(--display-font);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.18;
    text-align: center;
  }

  .chips {
    order: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    overflow: visible;
  }

  .chip {
    min-width: 0;
    min-height: 46px;
    display: grid;
    place-content: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    box-shadow: none;
    font-family: var(--display-font);
    font-size: .83rem;
  }

  .chip small {
    margin-top: 1px;
    font-family: Arial, sans-serif;
    font-size: .58rem;
  }

  .chip.active {
    border: 0;
    background: #ffdd3d;
    box-shadow: none;
  }

  .route {
    padding: 12px 24px 14px;
    background: transparent;
    color: #fff;
    text-align: center;
    font-family: var(--display-font);
    font-size: .8rem;
  }

  .transport {
    position: sticky;
    z-index: 10;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 14px;
    border-top: 0;
    background: #ff4e16;
  }

  #selectTrainer .transport {
    background: #06b96f;
  }

  .transport .btn {
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-family: var(--display-font);
    font-size: .8rem;
  }

  .transport .btn.primary {
    background: #ffdd3d;
  }

  .transport .btn.danger,
  .transport .btn:not(.primary) {
    background: rgba(255, 255, 255, .17);
    color: #fff;
  }

  .controls {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 16px 20px;
    border: 0;
    background: #fff;
  }

  .controls label {
    min-height: 70px;
    align-content: center;
    padding: 10px;
    border-radius: 10px;
    background: #f1f2f3;
  }

  .side-program,
  .side-select,
  #makingMode .panel {
    border: 3px solid #090909;
    border-radius: 22px;
    box-shadow: 5px 5px 0 #090909;
  }

  #makingMode {
    padding: 0 10px 18px;
  }

  #makingMode .maker {
    border-radius: 22px;
    background: #ffdd3d;
  }

  #makingMode .section-head h2 {
    font-family: var(--display-font);
    font-size: 2rem;
  }

  .input-method {
    font-family: var(--display-font);
  }

  .bottom-nav {
    border-top: 0;
    background: #fff;
  }

  .nav-btn {
    font-family: var(--display-font);
  }

  .nav-btn span {
    display: none;
  }
}

@media (max-width: 390px) {
  .topbar {
    padding-right: 18px;
    padding-left: 18px;
  }

  .task-info h2 {
    font-size: 2.8rem;
  }

  .visual {
    height: 330px;
    min-height: 330px;
  }

  .chip {
    font-size: .76rem;
  }
}