:root {
  --void: #000;
  --blued: #0c1014;   /* 바탕: 청열 처리한 강철 */
  --plate: #161b21;   /* 파인 면 */
  --scale: #2a3038;   /* 경계선: 산화 피막 */
  --mute: #8a929b;
  --steel: #c9cfd6;
  --bright: #eef1f4;

  /* 뜨임색. 달군 강철이 식으며 지나는 색이고, 타격 순간에만 쓴다. */
  --t-white: #fff8e7;
  --t-straw: #f0d48a;
  --t-bronze: #c98a4b;
  --t-purple: #8c62c4;
  --t-blue: #4f7fd1;

  --metal: linear-gradient(180deg, #f4f6f8 0%, #cdd2d8 44%, #a4abb3 56%, #d9dde2 100%);

  --text: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --num: "Big Shoulders Display", "Arial Narrow", var(--text);
  --sig: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: min(100vw - 32px, 420px);
  --wide: min(100vw - 32px, 560px);
  --impact: 110ms;    /* 망치가 닿는 시점. JS의 IMPACT_MS와 같아야 한다. */
  --cheer: 90ms;      /* 응원 망치가 닿는 시점. JS의 CHEER_IMPACT_MS와 같아야 한다. */
}

.sprites { position: absolute; width: 0; height: 0; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--blued);
  color: var(--steel);
  font: 400 15px/1.45 var(--text);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

#app { position: relative; height: 100dvh; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }

/* 상단 줄 */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: var(--col);
  height: 56px;
}
.facts { font-size: 13px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }
.nav { display: flex; margin: 0 -12px 0 auto; }
.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--mute);
}
.icon:hover { color: var(--bright); }
.back { margin-left: -14px; }

/* 대장간과 각인이 함께 쓰는 구조: 한 줄이 모루 윗면에 놓인다 */
.work { flex: 1; min-height: 0; display: flex; flex-direction: column; width: var(--col); padding-bottom: 20px; }
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.seat { position: relative; padding-bottom: 3px; }
.line {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--bright);
  font-size: 19px;
  font-weight: 500;
  text-align: center;
  caret-color: var(--t-straw);
}
.line::placeholder { color: var(--mute); font-weight: 400; opacity: 1; }
.face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #4a525c;
  transition: background-color .18s;
}
.line:focus ~ .face { background: #79828c; }
.line:not(:placeholder-shown) ~ .face { background: var(--bright); }
.anvil { display: block; width: 100%; aspect-ratio: 360 / 150; max-height: 26dvh; }
.slogan { margin-top: 20px; color: var(--mute); font-size: 13px; text-align: center; word-break: keep-all; }

.dock { position: relative; flex: none; height: 56px; }
.cta {
  width: 100%;
  height: 56px;
  border-radius: 2px;
  background: var(--metal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 0 #000;
  color: #12161b;
  font-size: 17px;
  font-weight: 600;
  transition: filter .12s, transform .06s;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: translateY(1px); filter: brightness(.92); }
form:has(.line:placeholder-shown) .cta {
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--scale);
  color: var(--mute);
}

/* 심연 */
#void { background: var(--void); }
#void.still { cursor: none; }
.time { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; font-family: var(--num); letter-spacing: 0; }
.count, .clock { grid-area: 1 / 1; line-height: 1; }
.count {
  padding: 0 .06em;
  background: linear-gradient(180deg, #fbfcfd 0%, #d3d8dd 46%, #868e97 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: min(82vw, 72dvh);
  font-weight: 700;
}
.clock { color: #626a74; font-size: min(36vw, 28dvh); font-weight: 300; opacity: 0; }
/* 이 서체에는 고정폭 숫자가 없다. 칸을 고정해야 초가 바뀔 때 시계가 좌우로 흔들리지 않는다. */
.clock i { display: inline-block; width: .36em; font-style: normal; text-align: center; }
.clock i.sep { width: .2em; }
[data-state="IMMERSION"] .count { opacity: 0; transform: scale(.5); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
[data-state="IMMERSION"] .clock { opacity: 1; transition: opacity 1.4s ease .25s; }
.done {
  flex: none;
  width: 156px;
  height: 52px;
  margin-bottom: 28px;
  border: 1px solid #3a424c;
  border-radius: 2px;
  color: var(--steel);
  font-size: 16px;
  font-weight: 500;
  transition: color .8s, border-color .8s;
}
.done:hover:enabled { border-color: var(--steel); color: var(--bright); }
.done:disabled { cursor: default; border-color: #15181c; color: #33393f; }

/* 각인 */
.ask {
  margin-bottom: 18px;
  color: var(--bright);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}
.minted {
  height: 3.1em;
  margin-top: 16px;
  color: var(--mute);
  font: 400 11px/1.5 var(--sig);
  letter-spacing: 0;
}
.minted span { display: block; width: 32ch; margin: 0 auto; clip-path: inset(0 100% 0 0); animation: punch .3s steps(32, end) forwards; }
.minted span + span { animation-delay: .26s; }
@keyframes punch { to { clip-path: inset(0); } }
.skip { display: block; height: 40px; margin: 4px auto -20px; padding: 0 12px; color: var(--mute); font-size: 13px; }
.skip:hover { color: var(--steel); }
.toast { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bright); font-size: 17px; font-weight: 500; }
.toast:empty { display: none; }

.hammer { position: absolute; left: calc(50% - 22px); bottom: 3px; display: none; width: 200px; height: 80px; transform-origin: 100% 46%; pointer-events: none; }
.sparks { position: absolute; left: 50%; bottom: 1px; width: 0; height: 0; pointer-events: none; }
.sparks i { position: absolute; width: 2px; height: 10px; background: var(--t-straw); opacity: 0; animation: spark .58s cubic-bezier(.1, .7, .3, 1) var(--impact) forwards; }
.flash {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 560px;
  height: 300px;
  margin: 0 0 -150px -280px;
  background: radial-gradient(closest-side, rgba(255, 248, 231, .6), transparent);
  opacity: 0;
  pointer-events: none;
}

[data-state="SUCCESS"] .ask,
[data-state="SUCCESS"] #strike .cta,
[data-state="SUCCESS"] .skip { opacity: 0; pointer-events: none; transition: opacity .08s; }
[data-state="SUCCESS"] #result { caret-color: transparent; animation: squash .3s ease-out var(--impact) forwards, temper 1.5s linear var(--impact) forwards; }
[data-state="SUCCESS"] #strike .face { animation: temper-fill 1.5s linear var(--impact) forwards, glow 1.1s ease-out var(--impact) forwards; }
[data-state="SUCCESS"] .hammer { display: block; animation: swing .62s forwards; }
[data-state="SUCCESS"] #strike .work { animation: jolt .32s linear var(--impact) forwards; }
[data-state="SUCCESS"] .flash { animation: flash .18s ease-out var(--impact) forwards; }

@keyframes swing {
  0% { transform: rotate(56deg); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, 1, .7); }
  18% { transform: rotate(0); opacity: 1; animation-timing-function: ease-out; }
  46% { transform: rotate(14deg); opacity: 1; }
  100% { transform: rotate(14deg); opacity: 0; }
}
@keyframes jolt {
  0% { transform: none; }
  14% { transform: translateY(8px); }
  34% { transform: translateY(-3px); }
  56% { transform: translateY(2px); }
  78% { transform: translateY(-1px); }
  100% { transform: none; }
}
@keyframes squash {
  0% { transform: scale(1.03, .8) translateY(5px); }
  100% { transform: none; }
}
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spark {
  0% { opacity: 1; transform: rotate(var(--r)) scaleY(1.5); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scaleY(.3); }
}
@keyframes temper {
  0% { color: var(--t-white); }
  14% { color: var(--t-straw); }
  36% { color: var(--t-bronze); }
  60% { color: var(--t-purple); }
  82% { color: var(--t-blue); }
  100% { color: var(--bright); }
}
@keyframes temper-fill {
  0% { background-color: var(--t-white); }
  14% { background-color: var(--t-straw); }
  36% { background-color: var(--t-bronze); }
  60% { background-color: var(--t-purple); }
  82% { background-color: var(--t-blue); }
  100% { background-color: var(--bright); }
}
@keyframes glow {
  0% { box-shadow: 0 0 26px 4px rgba(240, 212, 138, .75); }
  100% { box-shadow: 0 0 0 0 rgba(240, 212, 138, 0); }
}

/* 원장 */
#ledger { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#ledger .bar { width: var(--wide); justify-content: flex-start; gap: 2px; }
.title { font-size: 17px; font-weight: 600; color: var(--bright); }
.sum { flex: none; width: var(--wide); margin-bottom: 4px; color: var(--mute); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

.chain { flex: none; width: var(--wide); min-height: 18px; margin-bottom: 12px; color: var(--mute); font-size: 12px; }
.chain.broken { color: var(--t-bronze); }

.months, .plate { display: grid; grid-template-columns: repeat(var(--weeks), 1fr); column-gap: 4px; width: var(--wide); flex: none; }
.months { height: 18px; color: var(--mute); font-size: 11px; }
.months span { white-space: nowrap; }
.plate { grid-auto-rows: auto; row-gap: 4px; margin-bottom: 26px; }
.day {
  display: block;
  aspect-ratio: 1;
  border-radius: 1px;
  background: var(--plate);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7);
}
.day.on {
  background: linear-gradient(155deg, #f4f6f8 0%, #bcc3ca 52%, #8e969f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .6);
}
.day.today { outline: 1px solid var(--mute); outline-offset: 1px; }
.day.fresh { background: var(--bright); animation: temper-fill 2.4s linear both, glow 1.6s ease-out both; }

.log { flex: none; width: var(--wide); padding-bottom: 12px; }
.head, .row summary {
  display: grid;
  grid-template-columns: 44px 62px minmax(0, 1fr) 68px;
  gap: 10px;
  align-items: center;
}
.head { height: 28px; color: var(--mute); font-size: 11px; border-bottom: 1px solid var(--scale); }
.head span:last-child, .sig { text-align: right; }
.row { border-bottom: 1px solid #1c2127; }
.row summary { min-height: 42px; cursor: pointer; list-style: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.row summary::-webkit-details-marker { display: none; }
.row time { color: var(--mute); }
.row .text { overflow: hidden; color: var(--bright); text-overflow: ellipsis; white-space: nowrap; }
.sig { color: var(--mute); font-family: var(--sig); font-size: 11.5px; letter-spacing: 0; }
.row.fresh .sig { animation: temper 2.4s linear both; }
.more {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 2px 0 14px;
  font-size: 12px;
}
.more dt { color: var(--mute); }
.more dd { margin: 0; color: var(--steel); overflow-wrap: anywhere; }
.more dd.raw { font-family: var(--sig); font-size: 11px; letter-spacing: 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 14px; }
.row-actions .meta { margin-top: 0; }
.empty { padding: 28px 0; color: var(--mute); text-align: center; }

.export {
  position: sticky;
  bottom: 0;
  flex: none;
  width: 100%;
  margin-top: auto;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--blued) 22%);
}
.export > * { display: block; width: var(--wide); margin: 0 auto; }
.fmt { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.fmt label { position: relative; display: grid; place-items: center; min-width: 84px; height: 36px; color: var(--mute); font-size: 12px; cursor: pointer; }
.fmt input { position: absolute; opacity: 0; }
.fmt label:has(input:checked) { color: var(--bright); box-shadow: inset 0 -1px 0 var(--steel); }
.fmt label:has(input:focus-visible) { outline: 2px solid var(--steel); outline-offset: 1px; }
.cta:disabled { background: var(--plate); box-shadow: inset 0 0 0 1px var(--scale); color: var(--mute); cursor: default; filter: none; transform: none; }

/* 헤더 */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { flex: none; width: 24px; height: 24px; color: var(--steel); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon[aria-disabled="true"] { color: #4a525c; cursor: default; }

/* 서클 */
#circle { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#circle .bar { width: var(--wide); justify-content: flex-start; gap: 2px; }
.label { color: var(--mute); font-size: 12px; font-weight: 500; }
.block { flex: none; width: var(--wide); margin-top: 30px; }
.bar + .block { margin-top: 6px; }
.block:last-child { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.block-head { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--scale); }
.quiet { padding: 14px 0; color: var(--mute); font-size: 13px; }
.guild { padding: 14px 0; border-bottom: 1px solid #1c2127; }
.guild-name { color: var(--bright); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.meta { margin-top: 2px; color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.sprint { display: grid; grid-template-columns: repeat(var(--days), 1fr); gap: 4px; max-width: 240px; margin-top: 10px; }
.guild-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { min-height: 34px; padding: 0 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--scale); color: var(--steel); font-size: 12px; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--steel); color: var(--bright); }
.invite-url { margin-top: 8px; color: var(--mute); font: 400 11px/1.5 var(--sig); letter-spacing: 0; overflow-wrap: anywhere; }
.passport { margin-top: 6px; font-size: 12px; }
.passport summary { display: flex; align-items: center; min-height: 34px; color: var(--steel); cursor: pointer; list-style: none; }
.passport summary::-webkit-details-marker { display: none; }
.passport[open] summary { color: var(--bright); }
.passport ol { margin: 0; padding: 0 0 6px; list-style: none; }
.passport .artifact { grid-template-columns: minmax(0, 1fr) 26px; min-height: 0; padding: 0; border-bottom: 0; color: var(--steel); overflow-wrap: anywhere; }
.passport .artifact > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.passport .flag { height: 26px; }
.passport time { color: var(--mute); font-variant-numeric: tabular-nums; }
.guild-feed { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid #1c2127; }
.guild-feed .artifact:last-child { border-bottom: 0; }
.chip:disabled { box-shadow: inset 0 0 0 1px #1c2127; color: var(--mute); cursor: default; }
.chip.leave { margin-left: auto; box-shadow: none; color: var(--mute); }
.chip.leave:hover { color: var(--steel); }
.chip.leave.armed { color: var(--t-bronze); }

.feed-head { flex: none; display: flex; align-items: center; justify-content: space-between; width: var(--wide); height: 44px; margin-top: 22px; }
.share { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mute); font-size: 12px; cursor: pointer; }
.share input { position: relative; flex: none; width: 28px; height: 16px; margin: 0; border-radius: 2px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--scale); appearance: none; -webkit-appearance: none; cursor: pointer; }
.share input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; background: var(--mute); transition: transform .12s; }
.share input:checked { box-shadow: inset 0 0 0 1px var(--steel); }
.share input:checked::after { background: var(--bright); transform: translateX(12px); }
.share:has(input:checked) { color: var(--bright); }

.feed { flex: none; width: var(--wide); margin: 0; padding: 0; border-top: 1px solid var(--scale); list-style: none; }
.feed:focus { outline: 0; }
.share-note { flex: none; width: var(--wide); padding-bottom: 8px; color: var(--mute); font-size: 12px; }
.artifact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 26px;
  column-gap: 4px;
  align-items: center;
  min-height: 64px;
  padding: 9px 0;
  border-bottom: 1px solid #1c2127;
}
.artifact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 74px;
  bottom: -1px;
  height: 1px;
  transform-origin: right;
  pointer-events: none;
}
.artifact.mine > div, .artifact[role="status"] > .meta { grid-column: 1 / -1; }
.fact { color: var(--bright); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.feed-end { flex: none; width: var(--wide); padding: 14px 0 0; color: var(--mute); font-size: 12px; text-align: center; }

.cheer { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #66707a; }
.cheer:hover { color: var(--bright); }
.cheer svg { width: 24px; height: 24px; transform: rotate(26deg); transform-origin: 92% 46%; }
.cheer[aria-pressed="true"] { color: var(--bright); cursor: default; }
.cheer[aria-pressed="true"] svg { transform: none; }
.cheer .sparks { left: 11px; bottom: 11px; }
.cheer .sparks i { width: 1px; height: 6px; animation-duration: .42s; animation-delay: var(--cheer); }
.artifact.hit .cheer svg { animation: cheer .36s forwards; }
.artifact.hit .fact, .artifact.hit .meta { animation: nudge .2s ease-out var(--cheer); }
.artifact.hit::after { animation: temper-line 1.2s linear var(--cheer) forwards, run .4s ease-out var(--cheer) forwards; }
@keyframes cheer {
  0% { transform: rotate(26deg); animation-timing-function: cubic-bezier(.6, 0, 1, .7); }
  25% { transform: rotate(-9deg); animation-timing-function: ease-out; }
  58% { transform: rotate(7deg); }
  100% { transform: none; }
}
@keyframes nudge { 0% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes temper-line {
  0% { background: var(--t-white); }
  14% { background: var(--t-straw); }
  36% { background: var(--t-bronze); }
  60% { background: var(--t-purple); }
  82% { background: var(--t-blue); }
  100% { background: transparent; }
}

.flag { width: 26px; height: 44px; margin-right: -6px; color: #5d656f; font-size: 13px; letter-spacing: 0; }
.flag:hover, .flag[aria-expanded="true"] { color: var(--steel); }
.reasons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.reasons .meta { flex-basis: 100%; color: var(--t-bronze); }
.reason { min-height: 34px; padding: 0 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--scale); color: var(--steel); font-size: 12px; }
.reason:hover { box-shadow: inset 0 0 0 1px var(--steel); color: var(--bright); }

.smiths { margin: 0; padding: 0; list-style: none; }
.smith { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 46px; border-bottom: 1px solid #1c2127; font-size: 13px; }
.smith .who { color: var(--bright); font-weight: 500; }
.smith .tags { overflow: hidden; color: var(--mute); text-overflow: ellipsis; white-space: nowrap; }
.link { min-width: 56px; height: 44px; margin-right: -8px; padding: 0 8px; color: var(--steel); font-size: 13px; font-weight: 500; }
.link:hover { color: var(--bright); }
.link[aria-pressed="true"] { color: var(--mute); font-weight: 400; }
.cta.plain { height: 48px; margin-top: 14px; background: none; box-shadow: inset 0 0 0 1px #3a424c; color: var(--steel); font-size: 15px; font-weight: 500; }
.cta.plain:hover { box-shadow: inset 0 0 0 1px var(--steel); color: var(--bright); filter: none; }
.guild-form { margin-top: 14px; }
.field {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  outline: 0;
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--scale);
  color: var(--bright);
  font-size: 16px;
}
.field::placeholder { color: var(--mute); opacity: 1; }
.field:focus { box-shadow: inset 0 0 0 1px var(--steel); }
.guild-form .cta { margin-top: 10px; }

/* 초대 */
.invite-meta { color: var(--mute); font-size: 13px; text-align: center; word-break: keep-all; }
.invite-meta + .invite-meta { margin-top: 6px; color: var(--steel); }

/* 이메일 */
.email-cta { flex: none; width: var(--wide); margin-bottom: 12px; color: var(--steel); font-size: 12px; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.sheet { width: var(--col); max-width: none; margin: auto; padding: 22px 20px 12px; border: 1px solid var(--scale); border-radius: 2px; background: var(--blued); color: var(--steel); }
.sheet::backdrop { background: rgba(0, 0, 0, .72); }
.sheet h2 { margin-bottom: 6px; color: var(--bright); font-size: 17px; font-weight: 600; }
.sheet p { margin-bottom: 14px; color: var(--mute); font-size: 13px; word-break: keep-all; }
.sheet b { color: var(--bright); font-weight: 500; overflow-wrap: anywhere; }
.sheet .field { margin-bottom: 10px; }
.sheet .note { min-height: 18px; margin: 8px 0 0; color: var(--t-bronze); }
.sheet .skip { margin: 2px auto 0; }

#ios-tick { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-state="IMMERSION"] .count { transform: none; transition: opacity .2s; }
  [data-state="IMMERSION"] .clock { transition: opacity .2s; }
  [data-state="SUCCESS"] .hammer, .sparks { display: none; }
  [data-state="SUCCESS"] #result, [data-state="SUCCESS"] #strike .work, [data-state="SUCCESS"] #strike .face, [data-state="SUCCESS"] .flash { animation: none; }
  .minted span { clip-path: none; animation: none; }
  .day.fresh { animation: none; background: linear-gradient(155deg, #f4f6f8 0%, #bcc3ca 52%, #8e969f 100%); }
  .row.fresh .sig { animation: none; }
}