:root {
      --bg: #07090e;
      --panel: #0d1119;
      --panel-2: #111722;
      --ink: #f3f0e6;
      --muted: #b8bfca;
      --dim: #7e8797;
      --paper: #efe9d8;
      --paper-ink: #12161b;
      --paper-muted: #555d68;
      --paper-coral: #b3264a;
      --lime: #d8ff3e;
      --cyan: #45e6dc;
      --coral: #ff5c7a;
      --amber: #ffb84d;
      --line: rgba(255, 255, 255, 0.14);
      --line-strong: rgba(255, 255, 255, 0.28);
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
      --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 320px;
      background: var(--bg);
      color-scheme: dark;
      scroll-behavior: smooth;
    }

    body {
      position: relative;
      min-width: 320px;
      min-height: 100vh;
      min-height: 100dvh;
      margin: 0;
      overflow-x: hidden;
      background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(180deg, #07090e 0%, #090c13 48%, #07090e 100%);
      color: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    body::before {
      z-index: 40;
      opacity: 0.2;
      background: repeating-linear-gradient(
        180deg,
        transparent 0 3px,
        rgba(255, 255, 255, 0.025) 3px 4px
      );
    }

    button {
      font: inherit;
    }

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

    ::selection {
      background: var(--lime);
      color: #080b12;
    }

    * {
      scrollbar-color: rgba(216, 255, 62, 0.45) var(--bg);
      scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: #2a3443;
      border: 2px solid var(--bg);
    }

    .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;
    }

    .app-shell {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
    }

    .app-shell::before,
    .app-shell::after {
      content: "";
      position: fixed;
      z-index: 3;
      width: 20px;
      height: 20px;
      pointer-events: none;
      border-color: rgba(216, 255, 62, 0.42);
      border-style: solid;
    }

    .app-shell::before {
      top: 10px;
      left: 10px;
      border-width: 1px 0 0 1px;
    }

    .app-shell::after {
      right: 10px;
      bottom: 10px;
      border-width: 0 1px 1px 0;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: calc(16px + env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 16px;
      border-bottom: 1px solid var(--line);
    }

    .brand-lockup,
    .system-status {
      display: flex;
      align-items: center;
      min-width: 0;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .brand-lockup {
      gap: 10px;
      color: var(--ink);
    }

    .brand-sigil {
      display: grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      border: 1px solid var(--lime);
      color: var(--lime);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .brand-name {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .brand-divider {
      width: 1px;
      height: 14px;
      background: var(--line-strong);
    }

    .brand-sub {
      color: var(--dim);
    }

    .system-status {
      flex: 0 0 auto;
      gap: 8px;
      color: var(--lime);
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      background: currentColor;
      outline: 1px solid rgba(216, 255, 62, 0.35);
      outline-offset: 3px;
      transition: background-color 180ms ease;
    }

    body[data-screen="quiz"] .status-dot {
      color: var(--cyan);
      outline-color: rgba(69, 230, 220, 0.35);
    }

    body[data-screen="result"] .status-dot {
      color: var(--amber);
      outline-color: rgba(255, 184, 77, 0.35);
    }

    .status-short {
      display: none;
    }

    .app-main {
      display: flex;
      flex: 1;
      width: 100%;
    }

    .screen {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: clamp(26px, 5vw, 64px) clamp(16px, 4vw, 40px);
    }

    .screen.quiz-screen {
      align-items: flex-start;
    }

    .home-layout {
      display: grid;
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      gap: clamp(38px, 7vw, 76px);
      align-items: center;
    }

    .hero-copy {
      max-width: 640px;
    }

    .wordmark {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
      color: var(--ink);
      line-height: 1;
    }

    .wordmark__brand {
      display: block;
      font-size: clamp(4.6rem, 19vw, 6rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 0.8;
      text-transform: uppercase;
      text-shadow:
        3px 0 0 rgba(69, 230, 220, 0.32),
        -3px 0 0 rgba(255, 92, 122, 0.26);
    }

    .wordmark__cn {
      display: block;
      margin-top: clamp(12px, 1.8vw, 18px);
      font-size: clamp(0.95rem, 1.8vw, 1.1rem);
      font-weight: 800;
      letter-spacing: 0.16em;
      line-height: 1.3;
    }

    .wordmark-sub {
      margin: 14px 0 0;
      color: var(--cyan);
      font-family: var(--mono);
      font-size: clamp(0.68rem, 1.6vw, 0.82rem);
      letter-spacing: 0.1em;
      line-height: 1.5;
    }

    .hero-title {
      max-width: 12em;
      margin: clamp(28px, 5vw, 44px) 0 18px;
      font-size: clamp(2rem, 5.2vw, 3.35rem);
      font-weight: 900;
      letter-spacing: -0.025em;
      line-height: 1.12;
      text-wrap: balance;
    }

    .hero-body {
      max-width: 40ch;
      margin: 0;
      color: var(--muted);
      font-size: clamp(0.98rem, 1.7vw, 1.08rem);
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 28px;
    }

    .hero-time {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .privacy-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 16px 0 0;
      color: var(--dim);
      font-size: 12px;
      line-height: 1.6;
    }

    .privacy-mark {
      display: inline-block;
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      background: var(--cyan);
      outline: 1px solid rgba(69, 230, 220, 0.3);
      outline-offset: 2px;
    }

    .btn {
      display: inline-flex;
      min-height: 54px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 18px 0 20px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 800;
      line-height: 1;
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
    }

    .btn svg {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }

    .btn-primary {
      border: 1px solid var(--lime);
      background: var(--lime);
      color: #0a0d0d;
      box-shadow: 0 14px 34px rgba(216, 255, 62, 0.12);
    }

    .btn-ghost {
      border: 1px solid var(--line-strong);
      background: transparent;
      color: var(--ink);
    }

    .btn:focus-visible,
    .option:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    .question-title:focus-visible,
    #result-title:focus-visible,
    #transition-title:focus-visible {
      outline: none;
      text-decoration: underline;
      text-decoration-color: var(--cyan);
      text-decoration-thickness: 2px;
      text-underline-offset: 7px;
    }

    #paywall-title:focus-visible,
    #history-title:focus-visible,
    #public-error-title:focus-visible {
      outline: none;
      text-decoration: none;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .case-file {
      position: relative;
      justify-self: center;
      width: min(100%, 350px);
      transform: rotate(1.2deg);
    }

    .case-file::before {
      content: "";
      position: absolute;
      top: -13px;
      left: 50%;
      z-index: 2;
      width: 92px;
      height: 25px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 184, 77, 0.72);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
      transform: translateX(-50%) rotate(-2deg);
    }

    .case-file__paper {
      position: relative;
      padding: 24px 24px 20px;
      background-color: var(--paper);
      background-image: linear-gradient(rgba(18, 22, 27, 0.035) 1px, transparent 1px);
      background-size: 100% 26px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 26px 70px rgba(0, 0, 0, 0.52);
      color: var(--paper-ink);
    }

    .case-file__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--paper-ink);
    }

    .case-file__title {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .case-file__id {
      margin: 7px 0 0;
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .case-file__tag {
      padding: 3px 5px;
      border: 1px solid rgba(18, 22, 27, 0.35);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.1em;
      transform: rotate(2deg);
    }

    .case-file__subject {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0 10px;
      border-bottom: 1px dashed rgba(18, 22, 27, 0.3);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .case-file__subject strong {
      color: var(--paper-ink);
      font-size: 10px;
    }

    .case-file__slots {
      margin-top: 4px;
    }

    .preview-row {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 12px;
      align-items: baseline;
      padding: 11px 0;
      border-bottom: 1px dashed rgba(18, 22, 27, 0.22);
    }

    .preview-row span {
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .preview-row strong {
      color: var(--paper-ink);
      font-size: 0.98rem;
      font-weight: 700;
    }

    .case-file__score {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(18, 22, 27, 0.35);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .case-file__score strong {
      color: var(--paper-ink);
      font-size: 1.05rem;
    }

    .case-file__bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed rgba(18, 22, 27, 0.28);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.08em;
      line-height: 1.5;
      text-align: right;
    }

    .case-file__bottom em {
      color: var(--paper-coral);
      font-style: normal;
    }

    .barcode {
      display: block;
      width: 110px;
      height: 24px;
      flex: 0 0 110px;
    }

    .quiz-wrap,
    .result-wrap {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
    }

    .quiz-topline,
    .result-topline {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .progress {
      display: grid;
      grid-template-columns: repeat(var(--progress-count, 3), 1fr);
      gap: 4px;
      margin-top: 12px;
    }

    .progress span {
      display: block;
      height: 3px;
      background: rgba(255, 255, 255, 0.12);
      transition: background-color 180ms ease;
    }

    .progress span.is-on {
      background: var(--lime);
    }

    .quiz-scene {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: clamp(22px, 4vw, 32px) 0 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .quiz-scene span {
      flex: 0 0 auto;
      padding-top: 3px;
      color: var(--cyan);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.1em;
    }

    .quiz-scene + .message {
      margin-top: 14px;
    }

    .message {
      position: relative;
      margin-top: clamp(28px, 5vw, 48px);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .message::before,
    .message::after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      background: var(--cyan);
    }

    .message::before {
      width: 30px;
      height: 2px;
    }

    .message::after {
      width: 2px;
      height: 30px;
    }

    .message--user::before,
    .message--user::after {
      background: var(--lime);
    }

    .message--user .message__avatar {
      background: var(--lime);
      color: var(--bg);
    }

    .message--event::before,
    .message--event::after {
      background: var(--amber);
    }

    .message--event .message__avatar {
      background: var(--amber);
      color: var(--bg);
    }

    .message__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    .message__avatar {
      display: grid;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      place-items: center;
      background: var(--cyan);
      color: #061012;
      font-size: 10px;
      font-weight: 900;
    }

    .message__time {
      margin-left: auto;
      color: var(--dim);
      font-variant-numeric: tabular-nums;
    }

    .message__quote {
      margin: 0;
      padding: clamp(20px, 4vw, 30px);
      color: var(--ink);
      font-size: clamp(1.22rem, 3.4vw, 1.9rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.55;
      text-wrap: balance;
    }

    .question-title {
      max-width: 24ch;
      margin: 24px 0 18px;
      font-size: clamp(1.6rem, 4vw, 2.35rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.2;
      text-wrap: balance;
    }

    .options {
      display: grid;
      gap: 10px;
    }

    .options.is-locked {
      pointer-events: none;
    }

    .options.is-locked .option:not(.is-selected) {
      opacity: 0.4;
    }

    .option {
      display: grid;
      width: 100%;
      min-height: 78px;
      grid-template-columns: 44px 1fr 24px;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-2);
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
    }

    .option__key {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border: 1px solid var(--line-strong);
      background: rgba(216, 255, 62, 0.04);
      color: var(--lime);
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1;
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    }

    .option__body {
      min-width: 0;
    }

    .option__body strong {
      display: block;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.25;
    }

    .option__body small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .option__reply {
      display: block;
      font-size: 0.98rem;
      font-weight: 600;
      line-height: 1.55;
    }

    .option__arrow {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      color: var(--dim);
      transition:
        color 160ms ease,
        transform 160ms ease;
    }

    .option__arrow svg {
      width: 22px;
      height: 22px;
    }

    .option.is-selected {
      border-color: var(--lime);
      background: rgba(216, 255, 62, 0.08);
    }

    .option.is-selected .option__key {
      border-color: var(--lime);
      background: var(--lime);
      color: #0a0d0d;
    }

    .option.is-selected .option__arrow {
      color: var(--lime);
    }

    .quiz-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 18px 0 0;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    .quiz-hint span {
      display: inline-block;
      width: 5px;
      height: 5px;
      flex: 0 0 5px;
      background: var(--cyan);
    }

    .result-topline {
      margin-bottom: 16px;
    }

    .report {
      position: relative;
      overflow: hidden;
      padding: clamp(20px, 4vw, 36px);
      background: var(--paper);
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
      color: var(--paper-ink);
    }

    .report::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(18, 22, 27, 0.18);
      pointer-events: none;
    }

    .report__head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .report__head h2 {
      max-width: none;
      margin: 0;
      font-size: clamp(2.1rem, 5.4vw, 3.2rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 0.95;
      text-wrap: balance;
      white-space: nowrap;
    }

    .rarity-stamp {
      display: flex;
      min-width: 94px;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 12px 9px;
      border: 2px solid var(--rarity);
      outline: 1px solid var(--rarity);
      outline-offset: 3px;
      background: var(--rarity-wash);
      color: var(--rarity-ink);
      text-align: center;
      transform: rotate(-6deg);
    }

    .rarity-stamp__key {
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 0.82;
    }

    .rarity-stamp__name {
      margin-top: 6px;
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .report__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      margin-top: 18px;
      padding: 10px 0;
      border-top: 2px solid var(--paper-ink);
      border-bottom: 1px solid rgba(18, 22, 27, 0.35);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .slots {
      margin-top: 20px;
    }

    .slot {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 14px;
      padding: 16px 0;
      border-bottom: 1px dashed rgba(18, 22, 27, 0.28);
    }

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

    .slot__index {
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.6;
    }

    .slot__label {
      display: block;
      margin-bottom: 6px;
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .slot p {
      margin: 0;
      color: var(--paper-ink);
      font-size: clamp(1rem, 2.5vw, 1.15rem);
      font-weight: 600;
      line-height: 1.7;
    }

    .slot strong {
      font-weight: 900;
    }

    .tension {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 2px solid var(--paper-ink);
    }

    .tension__head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--paper-ink);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tension__head span:last-child {
      color: var(--paper-muted);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 0.08em;
    }

    .tension__row {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      color: var(--paper-ink);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .tension__row strong {
      color: var(--paper-ink);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .meter {
      display: flex;
      gap: 3px;
      width: 100%;
      max-width: 180px;
    }

    .meter span {
      display: block;
      height: 7px;
      flex: 1;
      border: 1px solid rgba(18, 22, 27, 0.18);
      background: rgba(18, 22, 27, 0.1);
    }

    .meter span.is-on {
      border-color: var(--paper-ink);
      background: var(--paper-ink);
    }

    .meter--relation span.is-on {
      border-color: var(--coral);
      background: var(--coral);
    }

    .tension__formula {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px dashed rgba(18, 22, 27, 0.28);
      color: var(--paper-ink);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .tension__formula span:last-child {
      color: var(--rarity-ink);
    }

    .verdict {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid rgba(18, 22, 27, 0.35);
    }

    .verdict__label {
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .verdict p {
      margin: 8px 0 0;
      color: var(--paper-ink);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.75;
    }

    .report__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid rgba(18, 22, 27, 0.35);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.06em;
      line-height: 1.6;
      text-align: right;
    }

    .report__footer .barcode {
      color: var(--paper-ink);
    }

    .result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .result-actions .btn {
      flex: 1 1 200px;
    }

    .result-hint {
      margin: 14px 0 0;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      line-height: 1.6;
      text-align: center;
    }

    .quiz-topline {
      flex-wrap: wrap;
      row-gap: 8px;
    }

    .quiz-topline__left {
      display: flex;
      min-width: 0;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .quiz-back {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      border: 1px solid rgba(216, 255, 62, 0.48);
      border-radius: 6px;
      background: rgba(216, 255, 62, 0.06);
      color: var(--ink);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    }

    .quiz-back svg {
      width: 18px;
      height: 18px;
    }

    .quiz-back:hover {
      border-color: var(--lime);
      background: rgba(216, 255, 62, 0.12);
      color: var(--cyan);
    }

    .quiz-back:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .quiz-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }

    .quiz-footer .quiz-hint {
      margin: 0;
    }

    .quiz-footer__spacer {
      display: block;
      min-height: 44px;
    }

    .transition-wrap {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
    }

    .transition-card {
      position: relative;
      overflow: hidden;
      padding: clamp(26px, 5vw, 44px);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .transition-card::before,
    .transition-card::after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      background: var(--cyan);
    }

    .transition-card::before {
      width: 30px;
      height: 2px;
    }

    .transition-card::after {
      width: 2px;
      height: 30px;
    }

    .transition-meta {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    .transition-stamp {
      position: absolute;
      top: 26px;
      right: 26px;
      padding: 6px 8px;
      border: 2px solid var(--amber);
      color: var(--amber);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      opacity: 0.82;
      transform: rotate(7deg);
    }

    .transition-card h2 {
      max-width: 12ch;
      margin: clamp(40px, 7vw, 68px) 0 14px;
      font-size: clamp(2rem, 6vw, 3.2rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.05;
      text-wrap: balance;
    }

    .transition-body {
      max-width: 34ch;
      margin: 0;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.8;
    }

    .transition-actions {
      margin-top: 28px;
    }

    .transition-actions .btn {
      min-width: 180px;
    }

    .rarity-explainer {
      margin: 10px 0 0;
      color: var(--paper-muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .evidence {
      margin-top: 18px;
      border-top: 1px solid rgba(18, 22, 27, 0.35);
    }

    .evidence summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 10px;
      background: rgba(18, 22, 27, 0.045);
      color: var(--paper-ink);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      list-style: none;
      transition: background-color 160ms ease;
    }

    .evidence summary:hover {
      background: rgba(18, 22, 27, 0.075);
    }

    .evidence summary::-webkit-details-marker {
      display: none;
    }

    .evidence summary::after {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg);
      transition: transform 160ms ease;
    }

    .evidence[open] summary::after {
      transform: rotate(-135deg);
    }

    .evidence__summary-meta {
      color: var(--paper-muted);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 0.08em;
    }

    .evidence__body {
      padding: 2px 0 4px;
    }

    .evidence__group {
      padding: 10px 0 12px;
      border-top: 1px dashed rgba(18, 22, 27, 0.22);
    }

    .evidence__group-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--paper-ink);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .evidence__row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
    }

    .evidence__name {
      color: var(--paper-ink);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .evidence__badge {
      display: inline-block;
      margin-left: 8px;
      padding: 1px 4px;
      border: 1px solid rgba(18, 22, 27, 0.35);
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 8px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.04em;
      vertical-align: 1px;
    }

    .evidence__score {
      color: var(--paper-muted);
      font-family: var(--mono);
      font-size: 10px;
      white-space: nowrap;
    }

    .evidence__bar {
      height: 4px;
      margin-top: 6px;
      background: rgba(18, 22, 27, 0.1);
    }

    .evidence__bar i {
      display: block;
      height: 100%;
      background: var(--paper-ink);
    }

    .evidence__group--relation .evidence__bar i {
      background: var(--coral);
    }

    .evidence__note {
      margin: 8px 0 0;
      color: var(--paper-muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .result-actions--secondary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 10px;
    }

    .result-actions--secondary .btn {
      width: 100%;
      flex-basis: auto;
      justify-content: center;
    }

    .result-actions--secondary .btn-share {
      grid-column: 1 / -1;
    }

    .btn-compact {
      min-height: 46px;
      font-size: 0.9rem;
    }

    .share-status {
      min-height: 1.6em;
      margin: 10px 0 0;
      color: var(--cyan);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .share-status[data-tone="error"] {
      color: var(--coral);
    }

    .copy-fallback {
      display: grid;
      gap: 6px;
      margin-top: 10px;
    }

    .copy-fallback span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      text-align: center;
    }

    .copy-fallback textarea {
      width: 100%;
      min-height: 118px;
      padding: 10px;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: var(--panel);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.6;
      resize: vertical;
    }

    .status-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px 18px;
      padding: 14px clamp(16px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .scan-overlay {
      position: fixed;
      inset: 0;
      z-index: 60;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 120ms ease;
    }

    .scan-overlay::before {
      content: "";
      position: absolute;
      top: -50vh;
      right: 0;
      left: 0;
      height: 42vh;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(69, 230, 220, 0.03) 24%,
        rgba(69, 230, 220, 0.38) 50%,
        rgba(216, 255, 62, 0.12) 54%,
        transparent 100%
      );
      filter: blur(1px);
    }

    .scan-overlay.is-active {
      opacity: 1;
    }

    .scan-overlay.is-active::before {
      animation: scan-sweep 460ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes scan-sweep {
      to {
        transform: translateY(170vh);
      }
    }

    .noscript {
      position: relative;
      z-index: 2;
      margin: 0;
      padding: 20px;
      background: var(--paper);
      color: var(--paper-ink);
      font-family: var(--sans);
      text-align: center;
    }

    @media (hover: hover) {
      .btn-primary:hover {
        background: #e4ff72;
        transform: translateY(-2px);
      }

      .btn-ghost:hover {
        border-color: rgba(216, 255, 62, 0.55);
        background: rgba(255, 255, 255, 0.05);
        transform: translateY(-2px);
      }

      .option:hover {
        border-color: rgba(216, 255, 62, 0.58);
        background: #151d27;
        transform: translateX(3px);
      }

      .option:hover .option__key {
        border-color: var(--lime);
        color: var(--lime);
      }

      .option:hover .option__arrow {
        color: var(--lime);
        transform: translateX(3px);
      }
    }

    @media (min-width: 860px) {
      .home-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
      }

      .case-file {
        justify-self: end;
        width: min(100%, 360px);
        transform: rotate(2.2deg) translateY(8px);
      }

      .screen {
        min-height: calc(100vh - 130px);
        min-height: calc(100dvh - 130px);
      }

      .result-actions--secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .result-actions--secondary .btn-share {
        grid-column: auto;
      }
    }

    @media (max-width: 639px) {
      .brand-sub,
      .brand-divider,
      .status-long {
        display: none;
      }

      .status-short {
        display: inline;
      }

      .case-file {
        transform: rotate(0.8deg);
      }
    }

    @media (max-width: 420px) {
      .wordmark__brand {
        font-size: clamp(4.1rem, 22vw, 5rem);
      }

      .hero-title {
        max-width: none;
        font-size: clamp(1.9rem, 10vw, 2.4rem);
      }

      .case-file__paper {
        padding: 20px 18px 16px;
      }

      .report {
        padding: 20px 16px;
      }

      .report__head {
        gap: 10px;
      }

      .report__head h2 {
        font-size: clamp(1.8rem, 8vw, 2.2rem);
      }

      .rarity-stamp {
        min-width: 78px;
        padding: 8px 8px 7px;
      }

      .rarity-stamp__key {
        font-size: 1.9rem;
      }

      .report__meta {
        gap: 5px 10px;
        font-size: 8px;
      }

      .slot {
        grid-template-columns: 22px 1fr;
        gap: 9px;
      }

      .tension__row {
        grid-template-columns: 56px 1fr auto;
        gap: 6px;
        font-size: 11px;
      }

      .result-actions {
        flex-direction: column;
      }

      .result-actions .btn {
        width: 100%;
        flex-basis: auto;
      }

      .transition-stamp {
        top: 18px;
        right: 16px;
        padding: 4px 6px;
        font-size: 8px;
      }

      .transition-card h2 {
        margin-top: 48px;
      }

      .evidence__summary-meta {
        display: none;
      }

      .evidence__score {
        font-size: 9px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    .topbar__actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .account-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .account-link,
    .account-badge {
      display: inline-flex;
      min-height: 32px;
      align-items: center;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .account-link {
      cursor: pointer;
    }

    .account-link:hover {
      border-color: rgba(216, 255, 62, 0.55);
      color: var(--lime);
    }

    .account-link--muted,
    .account-badge {
      color: var(--dim);
    }

    .account-badge--unlocked {
      border-color: rgba(216, 255, 62, 0.38);
      color: var(--lime);
    }

    .hero-offer {
      margin: 14px 0 0;
      color: var(--amber);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      line-height: 1.6;
    }

    .unlock-notice {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      margin: 12px 0 0;
      padding: 10px 12px;
      border: 1px solid rgba(216, 255, 62, 0.32);
      border-radius: 6px;
      background: rgba(216, 255, 62, 0.06);
      color: var(--lime);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.6;
    }

    .unlock-notice[data-tone="error"] {
      border-color: rgba(255, 107, 107, 0.38);
      background: rgba(255, 107, 107, 0.07);
      color: var(--coral);
    }

    .app-dialog {
      width: min(92vw, 460px);
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: var(--panel);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
      color: var(--ink);
    }

    .app-dialog::backdrop {
      background: rgba(0, 0, 0, 0.68);
    }

    .app-dialog form {
      display: grid;
      gap: 14px;
      padding: 24px;
    }

    .app-dialog p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.7;
    }

    .dialog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .dialog-head h2 {
      margin: 0;
      font-size: 1.45rem;
      letter-spacing: -0.02em;
    }

    .dialog-close {
      min-height: 34px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: transparent;
      color: var(--dim);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 9px;
    }

    .dialog-close:hover {
      border-color: var(--line-strong);
      color: var(--ink);
    }

    .field-label {
      display: grid;
      gap: 7px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .field-label input,
    .share-link-input {
      width: 100%;
      min-height: 46px;
      padding: 0 12px;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: var(--panel-2);
      color: var(--ink);
      font: inherit;
      font-size: 0.95rem;
      letter-spacing: normal;
      text-transform: none;
    }

    .field-label input:focus-visible,
    .share-link-input:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .form-status {
      min-height: 1.4em;
      margin: 0;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.6;
    }

    .form-status[data-tone="error"] {
      color: var(--coral);
    }

    .form-status[data-tone="success"] {
      color: var(--lime);
    }

    .form-status[data-tone="pending"] {
      color: var(--cyan);
    }

    .btn-block {
      width: 100%;
      justify-content: center;
    }

    .paywall-wrap,
    .history-wrap {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
    }

    .paywall-card {
      position: relative;
      padding: clamp(24px, 5vw, 44px);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .paywall-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
    }

    .paywall-card h2 {
      max-width: 12ch;
      margin: 24px 0 14px;
      font-size: clamp(2rem, 6vw, 3.2rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    .paywall-card h2 em {
      color: var(--lime);
      font-style: normal;
    }

    .paywall-body {
      max-width: 42ch;
      margin: 0;
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.8;
    }

    .paywall-unlock {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px dashed var(--line-strong);
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.7;
    }

    .paywall-unlock ul {
      display: grid;
      gap: 5px;
      margin: 8px 0 0;
      padding-left: 18px;
    }

    .paywall-price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 12px;
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .paywall-price strong {
      color: var(--lime);
      font-size: clamp(2rem, 6vw, 3rem);
      line-height: 1;
    }

    .paywall-price span {
      color: var(--muted);
      font-size: 0.85rem;
    }

    .paywall-price small {
      width: 100%;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10.5px;
      line-height: 1.6;
    }

    .paywall-actions {
      display: grid;
      gap: 10px;
      margin-top: 22px;
    }

    .paywall-actions .btn {
      width: 100%;
      justify-content: space-between;
    }

    .purchase-info {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-2);
    }

    .purchase-info p {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .purchase-info__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .purchase-info p.purchase-config {
      margin: 10px 0 0;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.6;
    }

    .paywall-card > .form-status {
      margin-top: 14px;
    }

    .demo-code {
      margin: 14px 0 0;
      color: var(--amber);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.6;
    }

    .demo-code code {
      color: var(--ink);
    }

    .paywall-home {
      margin-top: 18px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--dim);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .history-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .history-head h2 {
      margin: 8px 0 0;
      font-size: clamp(2rem, 5vw, 3rem);
      letter-spacing: -0.03em;
    }

    .history-list {
      border-top: 1px solid var(--line);
    }

    .history-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }

    .history-item__main {
      min-width: 0;
    }

    .history-date {
      display: block;
      margin-bottom: 7px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
    }

    .history-item__main strong {
      display: block;
      font-size: 1.05rem;
      line-height: 1.4;
    }

    .history-item__main small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .history-item__meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 9px;
    }

    .history-rarity {
      color: var(--lime);
      font-weight: 700;
    }

    .history-item__actions {
      display: flex;
      gap: 12px;
      grid-column: 1 / -1;
    }

    .history-item__actions button {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 10px;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .history-item__actions button:hover {
      color: var(--cyan);
    }

    .history-empty {
      padding: 28px 0;
      color: var(--muted);
      line-height: 1.7;
    }

    .history-empty p {
      margin: 0 0 14px;
    }

    .save-panel {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid rgba(69, 230, 220, 0.24);
      border-radius: 8px;
      background: rgba(69, 230, 220, 0.05);
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .save-panel p {
      margin: 0 0 10px;
    }

    .save-panel p.save-panel__tip {
      margin: 10px 0 0;
      color: var(--dim);
      font-size: 0.8rem;
    }

    .inline-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--cyan);
      cursor: pointer;
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .inline-link:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .save-panel--muted {
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.03);
      color: var(--dim);
    }

    .save-panel--error {
      border-color: rgba(255, 92, 122, 0.35);
      background: rgba(255, 92, 122, 0.06);
      color: var(--coral);
    }

    .share-link-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .share-link-input {
      min-width: 0;
      flex: 1;
    }

    .status-strip a {
      color: var(--dim);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .status-strip a:hover {
      color: var(--cyan);
    }

    .legal-page {
      width: min(92vw, 760px);
      margin: 40px auto;
      padding: clamp(24px, 5vw, 48px);
      background: var(--paper);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
      color: var(--paper-ink);
      line-height: 1.8;
    }

    .legal-page h1 {
      margin: 0 0 18px;
      font-size: clamp(2rem, 5vw, 3rem);
      letter-spacing: -0.03em;
    }

    .legal-page h2 {
      margin: 28px 0 8px;
      font-size: 1.05rem;
    }

    .legal-page p,
    .legal-page li {
      color: var(--paper-muted);
      font-size: 0.95rem;
    }

    .legal-page ul {
      padding-left: 20px;
    }

    .legal-back {
      display: inline-block;
      margin-bottom: 22px;
      color: var(--paper-ink);
      font-family: var(--mono);
      font-size: 10px;
    }

    .legal-note {
      margin-top: 30px;
      padding-top: 14px;
      border-top: 1px solid rgba(18, 22, 27, 0.25);
      font-family: var(--mono);
      font-size: 9px;
    }

    @media (max-width: 639px) {
      .topbar__actions {
        gap: 8px;
      }

      .account-link,
      .account-badge {
        min-height: 30px;
        padding: 0 6px;
        font-size: 8px;
      }

      .history-item {
        grid-template-columns: 1fr;
      }

      .history-item__meta {
        flex-direction: row;
        align-items: center;
      }

      .share-link-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .share-link-input {
        grid-column: 1 / -1;
      }

      .share-link-row .btn {
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .app-dialog form {
        padding: 20px;
      }

      .paywall-card {
        padding: 22px 18px;
      }

      .paywall-card h2 {
        font-size: clamp(1.9rem, 10vw, 2.5rem);
      }

      .history-head {
        align-items: flex-start;
        flex-direction: column;
      }
    }