/* 外部フォント・外部画像は使わない（デモは外部へ通信しない） */
:root {
  /* 毎朝届く配達票の色。墨紺（文字・主ボタン）、朝陽（判子・選択）、便の朱（レベルの印）を使い分ける */
  --color-bg: #eef2f1; /* 朝の紙 */
  --color-card: #ffffff;
  --color-ink: #16233f; /* 墨紺 */
  --color-ink-hover: #2b3d66;
  --color-text: var(--color-ink);
  --color-sub: #4b5a6b;
  --color-sun: #f0b429; /* 朝陽。この上の文字は必ず墨紺（白だと読めない） */
  --color-stamp: #c8402a; /* 便の朱。レベルの印だけに使う */
  --color-selected: #fbefc8; /* 選んだ選択肢の地。朝陽をごく薄くしたもの */
  --color-border: #cbd2d9; /* 区切りなど、なくても内容が分かる線 */
  --color-border-strong: #7b8794; /* 入力欄・選択肢の枠。白と 3:1 以上にする */
  --color-warning-bg: #fff4d6;
  --color-warning-text: #6b4a00;
  /* 見本の藍は「サンプル値」専用。墨紺と似ているので、地には斜線も付けて形でも区別する */
  --color-sample-bg: #eef2ff;
  --color-sample-text: #3730a3;
  --color-sample-border: #c7d2fe;
  /* 題名と大きな数字だけ明朝系。明朝がない端末では、端末の標準の字体に落ちるだけで崩れない。
     ゴシックに戻すときは、この1行を body と同じ指定にする */
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  /* 角丸は3段階：配達票、入力欄、ボタン・選択肢 */
  --radius-slip: 4px;
  --radius-field: 8px;
  --radius-control: 12px;
  /* 固定バナーの高さに余白を足した値。実際の高さは折り返しで変わるので、app.js が測って上書きする。
     この値は、JS が動く前や使えない場合の代わり（1行のときの高さ） */
  --banner-offset: 56px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press-scale: 0.97;
  /* 画面の幅いっぱいの要素は、0.97 だと左右で10px前後動いて重く見えるため弱める */
  --press-scale-wide: 0.985;
  /* 入場の動きの移動量と、判子の最初の大きさ。動きを減らす設定では、
     ファイルの最後の1か所でまとめて 0 / 1 にして、位置も大きさも動かさない */
  --rise-after: 8px;
  --rise-view: 6px;
  --stamp-from: 1.15;
}

* {
  box-sizing: border-box;
}

html {
  /* 固定バナーに、スクロール先やフォーカスされた要素が隠れないよう、バナーの下までずらす。
     scrollIntoView（結果欄）も、Tab で動いたときも、これで共通に効く */
  scroll-padding-top: var(--banner-offset);
  /* タップしたときの灰色の四角を消す。代わりに、どの操作部品にも :active の押下表現がある */
  -webkit-tap-highlight-color: transparent;
  /* 横向きにしたときに文字が勝手に大きくならないようにする */
  -webkit-text-size-adjust: 100%;
}

/* ダブルタップの拡大を待たずに、タップをすぐ反応させる（拡大そのものは禁止しない） */
button,
a,
label {
  touch-action: manipulation;
}

/* ボタンの文字は「内容」ではなく操作部品なので、長押しで選択されたりメニューが出たりしないようにする。
   本文や入力欄には付けない（コピーできる必要がある） */
button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  /* 端末の文字サイズ設定に従うよう、px ではなく rem 基準にする */
  font-size: 1rem;
  line-height: 1.7;
}

.demo-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-ink);
  /* 朝陽の細い線で、ほかの墨紺の部品と区別する */
  border-bottom: 3px solid var(--color-sun);
  color: #ffffff;
  padding: 6px 16px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.site-header {
  padding: 16px 16px 0;
  max-width: 720px;
  margin: 0 auto;
}

/* 見出しは本文より行間を詰め、字間をわずかに締める（大きい字ほど字間が空いて見えるため）。
   日本語なので締めすぎず、かなを詰める palt を使う */
h1,
h2,
h3,
h4 {
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.site-header h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.3;
}

.tagline {
  margin: 0;
  color: var(--color-sub);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

h2 {
  font-size: 1.2rem;
  margin: 24px 0 8px;
}

h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

h4 {
  margin: 12px 0 4px;
}

[hidden] {
  display: none !important;
}

/* 「できた」後のまとまりを、押した位置の下から静かに出す。
   backwards にするのは、終了後に transform を残さないため */
#after:not([hidden]) {
  animation: after-in 220ms var(--ease-out) backwards;
}

@keyframes after-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise-after));
  }
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.choice-list {
  display: grid;
  gap: 8px;
}

.choice {
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  /* 右は、選んだときの ✓ の分を空けておく（出ても文字が動かない） */
  padding: 10px 40px 10px 14px;
  text-align: left;
  background: var(--color-card);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* 選んだことを、色だけでなく ✓ でも示す。後ろの書き方は代替テキストを空にする指定
  （ボタンの名前に ✓ を混ぜないため。未対応のブラウザは前の行が使われる） */
.choice::after {
  content: "✓";
  content: "✓" / "";
  position: absolute;
  top: 10px;
  right: 14px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}

.choice[aria-pressed="true"]::after {
  opacity: 1;
}

.choice small {
  display: block;
  color: var(--color-sub);
}

/* 太字にすると文字幅が変わって折り返しが動くため、枠と背景だけで示す */
.choice[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-selected);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

button {
  font: inherit;
  cursor: pointer;
}

button.primary,
button.secondary,
.button-link {
  min-height: 48px;
  padding: 8px 20px;
  border-radius: var(--radius-control);
  border: 2px solid var(--color-ink);
}

button.primary {
  background: var(--color-ink);
  color: #ffffff;
  font-weight: bold;
}

/* ホバーは、マウスなどで本当に重ねられる端末だけ。タッチ端末では触れたあとも残ってしまう。
   hover だけだと、ペンなど精密でない入力を hover 対応と申告する端末も通ってしまう */
@media (hover: hover) and (pointer: fine) {
  button.primary:hover:not(:disabled) {
    background: var(--color-ink-hover);
  }

  .choice:hover:not([aria-pressed="true"]) {
    background: var(--color-bg);
  }

  .link-button:hover {
    opacity: 0.75;
  }
}

button.secondary,
.button-link {
  background: var(--color-card);
  color: var(--color-ink);
}

/* 選んだ結果は、墨紺の塗りで示す。もう一方は白地に戻し、どちらを選んだか一目で分かるようにする。
   フォーカスの輪郭（墨紺の線）とは、輪郭が地から離れて出るので混ざらない */
#result-buttons button[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #ffffff;
}

#result-buttons:has(button[aria-pressed="true"]) button[aria-pressed="false"] {
  background: var(--color-card);
  color: var(--color-ink);
}

/* 「できた」だけに、色以外の手がかりとして ✓ を付ける。
   位置を固定して不透明度だけで出すので、押しても幅が変わらない。
   「うまくいかなかった」に ✓ を付けると成功に見えるため付けない */
#btn-done {
  position: relative;
  padding-inline: 32px;
}

#btn-done::before {
  /* 後ろの書き方は代替テキストを空にする指定。ボタンの名前（読み上げ）に ✓ を混ぜないため。
     未対応のブラウザは前の行が使われる */
  content: "✓";
  content: "✓" / "";
  position: absolute;
  left: 12px;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}

#btn-done[aria-pressed="true"]::before {
  opacity: 1;
}

/* 位置や大きさを動かすのは transform だけ。色や影の切り替えは、位置を動かさない短い遷移にする */
.choice,
button.primary,
button.secondary,
.button-link {
  transition:
    transform 160ms var(--ease-out),
    background-color 120ms var(--ease-out),
    border-color 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out),
    opacity 120ms var(--ease-out);
}

/* 無効のボタンは押せないので、沈ませない。タッチ端末でも押下は起きるため hover では絞らない */
.choice:active,
button.primary:active:not(:disabled),
button.secondary:active:not(:disabled),
.button-link:active {
  transform: scale(var(--press-scale));
}

/* 幅いっぱいの要素は、沈み込みの量だけを差し替える（:active のルールは上の1つに保つ） */
#level-list .choice,
#btn-start,
.button-link {
  --press-scale: var(--press-scale-wide);
}

.selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.selection-label {
  font-weight: bold;
  margin-right: auto;
}

.link-button {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--color-ink);
  text-decoration: underline;
  transition: opacity 120ms var(--ease-out);
}

.link-button:active {
  opacity: 0.6;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 押した直後の「できました」の状態（コピー済み、送信済み）。朝陽の薄い地と ✓ で示す。
   後ろの書き方は代替テキストを空にする指定（ボタンの名前に ✓ を混ぜないため） */
button.is-confirmed {
  background: var(--color-selected);
}

button.is-confirmed::after {
  content: " ✓";
  content: " ✓" / "";
}

/* 送り終えたボタンは、薄く無効に見せず、送り終えたことが読める濃さのままにする。
   送ったあとは結果ボタンも固定されるが、選んだほうは濃いままにして、どちらを選んだか残す */
button.is-confirmed:disabled,
#result-buttons button:disabled[aria-pressed="true"] {
  opacity: 1;
}

/* 文言が変わっても、ボタンの幅が動かないようにする。
   文字を大きくしたときに画面からはみ出さないよう、幅の上限は親の幅にする */
#copy-prompt {
  min-width: min(11rem, 100%);
}

button:focus-visible,
.choice:focus-visible,
.chip input:focus-visible + span,
a:focus-visible {
  /* 白地や朝の紙の地で 3:1 以上になる墨紺にする */
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* リンクにも押した感触を付ける（タップの灰色の四角を消した代わり） */
a {
  transition: opacity 120ms var(--ease-out);
}

a:active {
  opacity: 0.6;
}

/* 画面切り替え後にフォーカスを移す見出しは、操作部品ではないので輪郭を出さない */
[tabindex="-1"]:focus {
  outline: none;
}

#btn-start {
  margin-top: 20px;
  width: 100%;
}

/* 理由の一文が消えても、下の文が上に跳ねないよう、1行分の高さは確保しておく */
#start-hint {
  min-height: calc(0.9rem * 1.7);
}

/* ボタンの形をしたリンク。見た目と押した感触は副ボタン（button.secondary）と共通にして、
   審査員が見落とさないよう、ミッションを出すボタンの下に大きく置く */
.button-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

textarea.text-box {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-strong);
  color: inherit;
  line-height: 1.7;
  resize: vertical;
  overflow: hidden;
}

textarea.text-box[readonly] {
  border-color: transparent;
}

.text-box {
  background: var(--color-bg);
  border-radius: var(--radius-field);
  padding: 12px;
  margin: 0 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

.multiline {
  white-space: pre-wrap;
  margin: 0;
}

/* レベルの印。便の朱は、ここだけに使う */
.badge {
  display: inline-block;
  background: var(--color-stamp);
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.9rem;
}

.mission-meta {
  margin: 16px 0 0;
}

.goal {
  margin: 0 0 8px;
}

/* 画面の主題なので、ホームの手順の見出しより大きくする。明朝系で、票の題名らしくする */
#mission-title {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.35;
}

/* 毎朝届く配達票。角は小さく、影はなし。上段が今日のミッション、ミシン目の下が貼りつける文章 */
.slip {
  position: relative;
  margin: 16px 0;
  background: var(--color-card);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-slip);
}

.slip-head {
  padding: 0 16px 8px;
}

/* ミシン目は破線。両端の半円は、紙を切り取った跡 */
.slip-body {
  position: relative;
  padding: 16px;
  border-top: 2px dashed var(--color-border-strong);
}

.slip-body::before,
.slip-body::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  border-radius: 50%;
}

/* 票の外にはみ出す半分は切り落とし、内側の半円だけを見せる */
.slip-body::before {
  left: -10px;
  clip-path: inset(0 0 0 50%);
}

.slip-body::after {
  right: -10px;
  clip-path: inset(0 50% 0 0);
}

.slip-body > :first-child {
  margin-top: 0;
}

.slip-body > :last-child {
  margin-bottom: 0;
}

.note {
  color: var(--color-sub);
  font-size: 0.9rem;
  margin: 8px 0;
}

.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: bold;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

/* 結果の欄。票の控えのように、票と同じ枠にして、ここに受領の判子を押す。
   判子は、結果を出したときに自動で動く位置（画面の上端）に置く */
.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-slip);
}

.result-message {
  margin: 0;
  font-weight: bold;
  font-size: 1.1rem;
}

/* 「できた」のときだけ押す判子。文字は墨紺、地は朝陽で、色だけに頼らず「完了」と書く。
   押す前は少し大きく浮かせ、1倍に落として押した感じにする。
   外すときは同じ遷移が逆に動き、浮いて消える */
.stamp {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-sun);
  color: var(--color-ink);
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: rotate(-6deg) scale(var(--stamp-from));
  transition:
    transform 220ms var(--ease-out),
    opacity 220ms var(--ease-out);
}

.stamp.is-stamped {
  opacity: 1;
  transform: rotate(-6deg) scale(1);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}

legend {
  font-weight: bold;
  padding: 0;
}

/* ラジオは、見た目を押しやすいチップにする。本物の input はそのまま残し（キーボードと読み上げのため）、
   見えなくして、ラベル全体に重ねる。選ぶと墨紺で塗りつぶし、押した瞬間に少し沈む */
.chip {
  position: relative;
  display: inline-block;
  margin: 0 8px 8px 0;
}

.chip input {
  position: absolute;
  inset: 0;
  /* チップの見た目（span）より前に出して、タップが本物の input に届くようにする */
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--color-card);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  transition:
    transform 160ms var(--ease-out),
    background-color 120ms var(--ease-out),
    border-color 120ms var(--ease-out);
}

.chip input:checked + span {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #ffffff;
  font-weight: bold;
}

/* 押せるときだけ沈ませる。タップは前面の input に届くので、input の :active で見る */
.chip input:not(:disabled):active + span {
  transform: scale(var(--press-scale));
}

/* 送ったあとは固定する。選んだチップは濃いまま残し、選んでいないものだけ薄くする */
.chip input:disabled {
  cursor: not-allowed;
}

.chip input:disabled:not(:checked) + span {
  opacity: 0.45;
}

textarea:disabled {
  background: var(--color-bg);
  color: var(--color-sub);
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .chip input:not(:checked):hover + span {
    background: var(--color-bg);
  }
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
}

.field .note {
  margin: 2px 0 6px;
}

/* 画面には出さず、読み上げだけに伝える */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

textarea {
  display: block;
  width: 100%;
  font: inherit;
  /* 16px 未満だと iPhone の Safari で、入力欄にふれたときに画面が拡大されてしまう。
     端末の文字サイズを小さくしていても 16px を下回らないよう max で下限を置く。
     指示文の欄（.text-box）もこの textarea なので、ここ1か所で足りる */
  font-size: max(1rem, 16px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-field);
  padding: 8px;
}

/* 見本の地には藍の細い斜線を重ねる。墨紺の部品と似た色なので、色だけに頼らず形でも区別する */
.sample {
  background-color: var(--color-sample-bg);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    rgb(55 48 163 / 7%) 10px 11px
  );
  border-color: var(--color-sample-border);
}

.sample-label {
  display: inline-block;
  background: var(--color-sample-text);
  color: #ffffff;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0 0 8px;
}

.sample-label.big {
  font-size: 1rem;
  padding: 4px 12px;
}

/* 「みんなの結果」の数字。ダッシュボードの数字と同じ見せ方で、枠はつけない（カードの中なので） */
.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.result-stats dt {
  color: var(--color-sub);
  font-size: 0.8rem;
  line-height: 1.4;
}

.result-stats dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* 数字の見本は、どの幅でも2列にする。コンテンツの幅は最大720pxなので、4列にすると
   1枚が約160pxになり、「早くなった時間（合計）」のような名前が収まらず、途中で折り返してしまう */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-sample-border);
  border-radius: var(--radius-control);
  padding: 12px;
}

/* 狭い幅で折り返すときは、行の長さをそろえる。かっこの中は途中で切らない（.nobr） */
.stat-name {
  margin-bottom: 4px;
  color: var(--color-sub);
  font-size: 0.9rem;
  text-wrap: balance;
}

.nobr {
  white-space: nowrap;
}

/* 名前が2行になるカードがあっても、数字の高さがそろうよう、数字は下に寄せる */
.stat-value {
  margin-top: auto;
  font-family: var(--font-display);
  /* 最も狭い幅（320px）でも「約310時間」が1行に収まるよう、幅に合わせて縮める。390px 以上は 1.6rem */
  font-size: clamp(1.3rem, 6.5vw, 1.6rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.bars {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bars li {
  display: grid;
  grid-template-columns: 6.5em 1fr 3em;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bar-track {
  background: var(--color-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-field);
  height: 18px;
  overflow: hidden;
}

/* 長さは width ではなく scaleX で表す。左端を起点にして、伸びる動きを transform だけで行う */
.bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  transform: scaleX(var(--ratio));
  transform-origin: left center;
}

/* ダッシュボードに切り替わったときだけ、上から順に50msずつずらして伸ばす。
   直接リンクで開いたときは is-entering が付かないので、動かさない。
   数字は動かさず、棒だけを動かす */
#view-dashboard.is-entering .bar-fill {
  animation: bar-grow 300ms var(--ease-out) backwards;
  animation-delay: calc(100ms + var(--i) * 50ms);
}

@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

/* 画面が切り替わったこと、「もう1問」で中身が入れ替わったことが分かるよう、入場だけ動かす。
   どの画面も同じ動きにして、場所が変わった感覚をそろえる */
.view.is-entering {
  animation: view-in 180ms var(--ease-out) backwards;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise-view));
  }
}

/* 文言が変わったときだけ、不透明度で静かに出す（位置は動かさない） */
.note.is-fresh {
  animation: message-in 150ms var(--ease-out) backwards;
}

@keyframes message-in {
  from {
    opacity: 0;
  }
}

@media (min-width: 600px) {
  .choice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 動きを減らす設定は、ここ1か所にまとめる。
   位置と大きさは動かさず、不透明度の変化だけを残す（動きを全部なくしはしない）。
   沈み込みは弱めるだけ。棒グラフの伸びる動きは止めて、最初から伸びた状態で出す */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rise-after: 0px;
    --rise-view: 0px;
    --stamp-from: 1;
    --press-scale: 0.985;
    --press-scale-wide: 0.992;
  }

  #view-dashboard.is-entering .bar-fill {
    animation: none;
  }
}