/* Existing auxiliary screens, isolated from the approved studio layout. */
@scope (.legacy-surface) {

    :scope {
      color-scheme: light;
      --bg: #e9e9ef;
      --app: #f2f2f7;
      --surface: #ffffff;
      --field: #ffffff;
      --line: rgba(60, 60, 67, .14);
      --line-strong: rgba(60, 60, 67, .2);
      --text: #1c1c1e;
      --muted: #8e8e93;
      --muted-2: #c7c7cc;
      --accent: #007aff;
      --accent-pressed: #006ee6;
      --r-app: 30px;
      --r-group: 17px;
      --r-control: 14px;
      --r-inner: 11px;
      --r-pill: 999px;
      --shadow: 0 20px 70px rgba(0, 0, 0, .16);
      --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-family: var(--font);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      margin: 0;
      background:
        radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .82), transparent 32%),
        linear-gradient(180deg, #f8f8fb 0%, var(--bg) 58%, #dfdfe7 100%);
      color: var(--text);
    }

    body,
    button,
    input,
    textarea {
      font: 500 14px/1.45 var(--font);
    }

    button,
    input,
    textarea {
      -webkit-tap-highlight-color: transparent;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .stage {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    body.ui-hidden {
      background: transparent;
    }

    body.ui-hidden .stage {
      display: none;
    }

    .app {
      width: min(100%, 430px);
      min-height: min(860px, calc(100vh - 40px));
      border: 1px solid var(--line-strong);
      border-radius: var(--r-app);
      background: var(--app);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      isolation: isolate;
      contain: layout paint;
      opacity: 0;
      visibility: hidden;
    }

    .app.ready {
      opacity: 1;
      visibility: visible;
      transition: opacity 180ms cubic-bezier(.2, .8, .2, 1);
    }

    .screen {
      display: flex;
      flex-direction: column;
      position: absolute;
      inset: 0;
      min-height: min(860px, calc(100vh - 40px));
      padding: 14px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(12%, 0, 0) scale(.985);
      filter: blur(9px);
      transition:
        transform 560ms cubic-bezier(.16, 1, .3, 1),
        opacity 360ms cubic-bezier(.2, .8, .2, 1),
        filter 520ms cubic-bezier(.16, 1, .3, 1),
        visibility 0s linear 560ms;
      will-change: transform, opacity, filter;
      overflow-y: auto;
    }

    .screen.active {
      position: relative;
      z-index: 2;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
      transition-delay: 0s;
    }

    .screen.exiting {
      position: absolute;
      z-index: 1;
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    .screen.enter-from-right {
      transform: translate3d(24%, 0, 0) scale(.975);
      opacity: 0;
      filter: blur(11px);
    }

    .screen.enter-from-left {
      transform: translate3d(-18%, 0, 0) scale(.982);
      opacity: 0;
      filter: blur(8px);
    }

    .screen.exit-to-left {
      transform: translate3d(-18%, 0, 0) scale(.982);
      opacity: 0;
      filter: blur(8px);
    }

    .screen.exit-to-right {
      transform: translate3d(20%, 0, 0) scale(.978);
      opacity: 0;
      filter: blur(10px);
    }

    .app.motion-ready .screen.active :where(
      .topbar,
      .user-row,
      .group,
      .asset-card,
      .script-panel,
      .beta-link,
      .form-card,
      .profile-head,
      .feedback,
      .voice-activation,
      .closed-card,
      .record-card,
      .voice-later
    ) {
      animation: element-rise 620ms cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: calc(var(--stagger, 0) * 42ms);
      will-change: transform, opacity, filter;
    }

    .app.motion-ready .screen.active :where(.topbar, .profile-head) { --stagger: 0; }
    .app.motion-ready .screen.active :where(.user-row, .form-card, .voice-activation) { --stagger: 1; }
    .app.motion-ready .screen.active :where(.group, .asset-card, .closed-card, .record-card) { --stagger: 2; }
    .app.motion-ready .screen.active :where(.script-panel, .feedback) { --stagger: 3; }
    .app.motion-ready .screen.active :where(.beta-link, .voice-later) { --stagger: 4; }

    @keyframes element-rise {
      from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.985);
        filter: blur(6px);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      margin-bottom: 8px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 15px;
      font-weight: 760;
      letter-spacing: 0;
    }

    .brand-mark {
      width: 22px;
      height: 22px;
      border-radius: var(--r-inner);
      display: none;
    }

    .back-button {
      display: inline-grid;
      place-items: center;
      min-width: 38px;
      height: 38px;
      border-radius: var(--r-pill);
      background: rgba(118, 118, 128, .12);
      color: var(--text);
    }

    .back-button {
      grid-template-columns: auto auto;
      gap: 6px;
      width: auto;
      padding: 0 12px;
      font-weight: 680;
    }

    .primary-button {
      width: 100%;
      min-height: 48px;
      border-radius: var(--r-pill);
      background: var(--accent);
      color: #fff;
      font-weight: 780;
    }

    .job-note {
      min-height: 18px;
      margin: 10px 2px 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
      text-align: center;
    }

    .user-row {
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 10px;
      align-items: center;
      min-height: 62px;
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
      padding: 8px 10px;
      color: var(--text);
      text-align: left;
    }

    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .96) 0 10px, transparent 11px),
        radial-gradient(ellipse at 50% 78%, rgba(255, 255, 255, .45) 0 20px, transparent 21px),
        linear-gradient(180deg, #b9bbc4, #8e9099);
    }

    .avatar.large {
      width: 78px;
      height: 78px;
      margin: 0 auto;
      background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .96) 0 17px, transparent 18px),
        radial-gradient(ellipse at 50% 78%, rgba(255, 255, 255, .45) 0 33px, transparent 34px),
        linear-gradient(180deg, #b9bbc4, #8e9099);
    }

    .name {
      display: block;
      color: var(--text);
      font-size: 15px;
      font-weight: 760;
      letter-spacing: 0;
    }

    .company {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 560;
    }

    .chevron {
      color: var(--muted-2);
      font-size: 20px;
      line-height: 1;
    }

    .group {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
      overflow: hidden;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      width: 100%;
      min-height: 48px;
      border-bottom: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      padding: 0 14px;
      text-align: left;
      font-weight: 680;
    }

    .row:last-child {
      border-bottom: 0;
    }

    .row-value {
      color: var(--muted);
      font-size: 13px;
      font-weight: 560;
    }

    .row .chevron {
      font-size: 18px;
    }

    .home-layout {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-rows: 15fr 35fr 36fr 9fr 0fr;
      gap: 10px;
    }

    .home-layout .user-row,
    .home-layout .asset-card,
    .home-layout .beta-link {
      margin-top: 0;
      min-height: 0;
      height: 100%;
    }

    .home-layout .asset-card {
      display: flex;
      flex-direction: column;
    }

    .home-layout .asset-frame {
      flex: 1;
      min-height: 0;
      aspect-ratio: auto;
    }

    .home-layout .script-panel {
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .home-layout .script-panel .section-label {
      margin-top: 0;
      flex: 0 0 auto;
    }

    .home-layout .script-box {
      flex: 1;
      min-height: 0;
      height: auto;
    }

    .asset-card {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
      padding: 10px;
    }

    .asset-frame {
      position: relative;
      aspect-ratio: 16 / 10;
      border: 0;
      border-radius: var(--r-inner);
      background: var(--surface);
      overflow: hidden;
    }

    .asset-placeholder,
    .asset-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .asset-placeholder {
      display: grid;
      place-items: center;
      padding: 18px;
      color: var(--muted);
      background: #f7f7fa;
      text-align: center;
      font-size: 13px;
    }

    .asset-image {
      display: none;
      object-fit: cover;
    }

    .asset-frame.has-image .asset-image {
      display: block;
    }

    .asset-frame.has-image .asset-placeholder {
      display: none;
    }

    .asset-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .quality-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      margin-top: 10px;
      padding: 4px;
      border-radius: 12px;
      background: rgba(118, 118, 128, .1);
    }

    .quality-option {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      min-height: 38px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 720;
      text-align: left;
    }

    .quality-option span { font-size: 11px; font-weight: 650; }

    .quality-option.is-active {
      border-color: var(--line);
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }

    .ai-label {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .02em;
    }

    .ai-label[hidden] { display: none; }
    .record-ai-label { margin-top: 3px; }
    .pilot-access-note { margin: 8px 2px 0; }

    .secondary-button {
      min-height: 44px;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-pill);
      background: rgba(118, 118, 128, .08);
      color: var(--text);
      font-weight: 720;
    }

    .section-label {
      margin: 14px 2px 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .script-box {
      width: 100%;
      min-height: 118px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: var(--field);
      color: var(--text);
      outline: none;
      padding: 13px 14px;
      resize: vertical;
    }

    .script-meta,
    .job-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin: 6px 2px 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 620;
    }

    .script-box:focus,
    .text-input:focus {
      border-color: rgba(0, 122, 255, .46);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, .12);
    }

    .beta-link {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      min-height: 46px;
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: var(--surface);
      color: var(--text);
      padding: 0 14px;
      text-align: left;
      font-weight: 680;
    }

    .tool-list {
      display: grid;
      gap: 10px;
    }

    .tool-link {
      display: grid;
      gap: 4px;
      min-height: 72px;
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
      color: var(--text);
      padding: 14px;
      text-decoration: none;
    }

    .tool-link strong {
      font-size: 15px;
    }

    .tool-link span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .tool-link:focus-visible {
      outline: 3px solid rgba(0, 122, 255, .24);
      outline-offset: 2px;
    }

    .profile-screen {
      padding-top: 18px;
    }

    .profile-head {
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 8px 0 12px;
    }

    .profile-name-button {
      display: grid;
      justify-items: center;
      border-radius: var(--r-inner);
      background: transparent;
      color: var(--text);
      padding: 0;
    }

    body.account-unavailable .user-row .name,
    body.account-unavailable .profile-name-button .name {
      color: var(--muted);
    }

    .caption {
      margin: 18px 2px 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .feedback {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      min-height: 48px;
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: var(--surface);
      color: var(--text);
      padding: 0 14px;
      font-weight: 680;
    }

    .subpage {
      padding-top: 14px;
    }

    .subhead {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      margin-bottom: 10px;
    }

    .sub-title {
      margin: 0;
      color: var(--text);
      font-size: 17px;
      line-height: 1.2;
      text-align: center;
      font-weight: 760;
    }

      .form-card,
      .record-card,
      .closed-card {
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
      overflow: hidden;
    }

    .form-card {
      display: grid;
      gap: 12px;
      padding: 14px;
    }

    .field label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 680;
    }

    .text-input {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--r-inner);
      background: var(--field);
      color: var(--text);
      outline: none;
      padding: 0 12px;
    }

    .voice-screen {
      background: var(--surface);
      justify-content: space-between;
      padding-top: max(34px, env(safe-area-inset-top));
    }

    .voice-activation {
      flex: 1;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 18px;
      padding: 28px 14px 20px;
      text-align: center;
    }

    .voice-kicker {
      margin: 0;
      color: var(--text);
      font-size: 18px;
      font-weight: 780;
      letter-spacing: 0;
    }

    .voice-phrase {
      margin: 0;
      max-width: 350px;
      color: #050505;
      font-size: 32px;
      line-height: 1.18;
      font-weight: 820;
      letter-spacing: 0;
    }

    .voice-state {
      margin: 0;
      min-height: 20px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 620;
    }

    .voice-later {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: var(--r-pill);
      background: rgba(255, 255, 255, .72);
      color: var(--accent);
      font-weight: 720;
    }

    .voice-controls {
      display: grid;
      gap: 10px;
      width: 100%;
      max-width: 360px;
    }

    .voice-consent {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 9px;
      align-items: start;
      color: var(--muted);
      font-size: 12px;
      text-align: left;
    }

    .voice-consent input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--accent);
    }

    .voice-action-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .voice-action-row .primary-button,
    .voice-action-row .secondary-button {
      min-height: 46px;
    }

    .record-card {
      display: grid;
      grid-template-columns: 58px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      width: 100%;
      color: var(--text);
      text-align: left;
    }

    .record-list {
      display: grid;
      gap: 10px;
    }

    .empty-state {
      padding: 30px 18px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }

    .job-panel {
      display: grid;
      gap: 12px;
    }

    .job-preview {
      width: 100%;
      aspect-ratio: 9 / 16;
      max-height: 560px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: #111;
      object-fit: contain;
    }

    .job-preview[hidden] {
      display: none;
    }

    .progress-track {
      height: 8px;
      overflow: hidden;
      border-radius: var(--r-pill);
      background: rgba(118, 118, 128, .16);
    }

    .progress-bar {
      width: 0;
      height: 100%;
      background: var(--accent);
      transition: width 240ms ease;
    }

    .job-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .destructive-button {
      width: 100%;
      min-height: 46px;
      margin-top: 10px;
      border: 1px solid rgba(255, 59, 48, .22);
      border-radius: var(--r-pill);
      background: rgba(255, 59, 48, .08);
      color: #d70015;
      font-weight: 720;
    }

    .toast {
      position: absolute;
      z-index: 20;
      left: 14px;
      right: 14px;
      bottom: max(14px, env(safe-area-inset-bottom));
      padding: 11px 14px;
      border: 1px solid rgba(60, 60, 67, .18);
      border-radius: var(--r-control);
      background: rgba(28, 28, 30, .94);
      color: #fff;
      text-align: center;
      font-size: 13px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
    }

    .toast[hidden],
    .notice-overlay[hidden],
    .file-input {
      display: none;
    }

    .notice-overlay {
      position: absolute;
      z-index: 30;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(0, 0, 0, .36);
    }

    .notice-card {
      width: min(100%, 360px);
      display: grid;
      gap: 14px;
      padding: 20px;
      border-radius: var(--r-group);
      background: var(--surface);
      box-shadow: 0 18px 56px rgba(0, 0, 0, .24);
    }

    .notice-card strong { font-size: 18px; }
    .notice-card p { margin: 0; color: var(--muted); white-space: pre-wrap; line-height: 1.55; }

    button:disabled {
      cursor: default;
      opacity: .5;
      transform: none !important;
      box-shadow: none !important;
    }

    .thumb {
      height: 58px;
      border-radius: var(--r-inner);
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 34%, rgba(142, 142, 147, .25), transparent 22%),
        linear-gradient(180deg, #f7f7fb, #ececf2);
    }

    .record-title {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 720;
    }

    .record-state {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }

    .closed-card {
      display: grid;
      align-content: center;
      justify-items: center;
      min-height: 220px;
      padding: 28px;
      text-align: center;
    }

    .closed-card strong {
      color: var(--text);
      font-size: 17px;
      font-weight: 780;
    }

    .closed-card span {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    .tap {
      touch-action: manipulation;
      transition:
        transform 280ms cubic-bezier(.16, 1, .3, 1),
        background-color 240ms cubic-bezier(.2, .8, .2, 1),
        border-color 240ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 280ms cubic-bezier(.16, 1, .3, 1),
        opacity 160ms ease;
      will-change: transform;
    }

    .tap:hover {
      border-color: var(--line-strong);
      transform: translate3d(0, -1px, 0);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
    }

    .tap:active {
      transform: scale(.965);
      opacity: .92;
      transition-duration: 90ms;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
    }

    .primary-button:active {
      background: var(--accent-pressed);
    }

    .primary-button:disabled {
      cursor: default;
      border: 1px solid var(--line);
      background: rgba(118, 118, 128, .08);
      color: var(--muted);
      opacity: 1;
    }

    .secondary-button:disabled,
    .row:disabled {
      color: var(--muted);
      opacity: 1;
    }

    .script-box:disabled {
      background: #f7f7fa;
      color: var(--muted);
      cursor: default;
      opacity: 1;
      -webkit-text-fill-color: var(--muted);
    }

    [hidden] {
      display: none !important;
    }

    .auth-screen {
      justify-content: center;
      gap: 18px;
      padding: 28px;
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 16px;
      font-weight: 750;
    }

    .auth-heading {
      margin: 8px 0 2px;
      font-size: 28px;
      line-height: 1.12;
      letter-spacing: -.03em;
    }

    .auth-copy,
    .form-note,
    .admin-muted {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .auth-form,
    .admin-form {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--r-group);
      background: var(--surface);
    }

    .auth-links {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .text-button {
      padding: 8px 0;
      background: transparent;
      color: var(--accent);
    }

    .recovery-code {
      display: block;
      padding: 14px 10px;
      border-radius: var(--r-inner);
      background: #f2f2f7;
      font: 750 18px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
      text-align: center;
      letter-spacing: .04em;
      word-break: break-all;
      user-select: all;
    }

    .admin-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .stat {
      min-width: 0;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: var(--surface);
    }

    .stat span,
    .stat strong {
      display: block;
    }

    .stat span {
      color: var(--muted);
      font-size: 12px;
    }

    .stat strong {
      margin-top: 3px;
      font-size: 21px;
    }

    .admin-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .admin-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-radius: var(--r-control);
      background: var(--surface);
    }

    .admin-item strong,
    .admin-item span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .compact-button {
      min-width: 62px;
      padding: 7px 10px;
      border-radius: 9px;
      background: #ededf2;
      color: var(--text);
      font-size: 12px;
    }

    @media (max-width: 520px) {
      .stage {
        display: block;
        padding: 0;
      }

      .app {
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .screen {
        min-height: 100vh;
        padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
      }

      .screen,
      .screen.active,
      .screen.exiting {
        transform: none !important;
        filter: none !important;
      }
    }
  
}