/* The Kitsune demo. The look of the landing page: same colours, same two typefaces. */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400-600.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --orange: #FF6600; --green: #34D399; --gray: #8E97AD; --bg: #111828; --bg-deep: #070A12; --card: #1B243A;
  --card-orange: #2A1602; --text: #F6F1E8; --text-soft: #B9C0D0; --ink: #140A02; --hairline: rgba(142, 151, 173, 0.22);
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg-deep); color: var(--text-soft); font: 400 1.0625rem/1.55 var(--body); }
h1, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.top { display: flex; align-items: center; gap: 16px; padding: 28px clamp(20px, 5vw, 64px) 0; }
.top__mark { width: 34px; height: 34px; flex: none; margin-right: -2px; }
.wordmark { font: 700 1.125rem/1 var(--display); letter-spacing: 0.46em; text-transform: uppercase; color: var(--text); }
.tag { padding: 5px 10px 5px 12px; border: 1px solid rgba(255, 102, 0, 0.55); border-radius: 999px; color: var(--orange); font: 600 0.6875rem/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; }

main { max-width: 1120px; margin: 0 auto; padding: clamp(36px, 7vh, 80px) clamp(20px, 5vw, 64px) 80px; }
.eyebrow { font: 600 0.8125rem/1.4 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: var(--orange); }
.title { margin-top: 18px; max-width: 18ch; font: 700 clamp(2.125rem, 5.2vw, 3.75rem)/1.05 var(--display); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.title--small { max-width: none; font-size: clamp(1.875rem, 4.2vw, 3rem); }
.lede { margin-top: 22px; max-width: 58ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-soft); }
.quiet { margin-top: 16px; max-width: 62ch; font-size: 0.9375rem; color: var(--gray); }
.error { margin-top: 14px; font-weight: 600; color: #FF9A6B; }
.sample { margin-bottom: 28px; padding: 14px 18px; border: 1px dashed rgba(255, 102, 0, 0.6); border-radius: 14px; color: var(--text); font-size: 0.9375rem; }
.sample strong { color: var(--orange); }

.button { display: inline-block; padding: 17px 34px; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 600 1.0625rem/1 var(--body); letter-spacing: 0.01em; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(255, 102, 0, 0.6); }
.button:disabled { background: none; color: var(--gray); box-shadow: inset 0 0 0 1.5px var(--gray); cursor: not-allowed; }

/* 1. Connect */
.path { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; color: var(--text); font-weight: 600; }
.path li { display: flex; align-items: center; gap: 10px; }
.path span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card-orange); color: var(--orange); font-size: 0.875rem; }
.connect { margin-top: 44px; max-width: 720px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--hairline); border-radius: 20px; background: var(--card); }
.connect label { display: block; font: 600 0.8125rem/1.4 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray); }
.connect__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.connect input { flex: 1 1 320px; min-width: 0; padding: 16px 18px; border: 1.5px solid var(--hairline); border-radius: 14px; background: var(--bg-deep); color: var(--text); font: 400 1rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.connect input:focus { border-color: var(--orange); outline: none; }
.connect--typed { margin-top: 18px; border-style: dashed; background: none; }
.button--quiet { background: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--gray); }
.who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 0.9375rem; color: var(--gray); }
.who span span { color: var(--text); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
/* The way out: the usual door with an arrow. Its name is read out and shown on hover. */
.who button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline); border-radius: 12px; background: none; color: var(--gray); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.who button:hover, .who button:focus-visible { color: var(--orange); border-color: var(--orange); outline: none; }
.who svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 2. Files */
.files { display: grid; gap: 28px; margin-top: 34px; }
@media (min-width: 860px) { .files { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; } }
.have { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--card); }
.have img { width: 80px; flex: none; }
.have > div { min-width: 0; }
.label { font: 600 0.8125rem/1.4 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gray); }
.number { font: 700 clamp(2.5rem, 6vw, 4.25rem)/1 var(--display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
/* The card is narrow: its number is smaller than the counters of the run, and smaller again when it is long. */
.have .number { font-size: 2.5rem; }
.have .number.is-long { font-size: 1.875rem; }
.drop { display: grid; gap: 6px; justify-items: center; padding: clamp(28px, 5vw, 52px) 20px; border: 2px dashed rgba(142, 151, 173, 0.45); border-radius: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.drop strong { font: 700 1.375rem/1.2 var(--display); color: var(--text); }
.drop > span { color: var(--gray); font-size: 0.9375rem; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--orange); background: rgba(255, 102, 0, 0.06); }
.list { margin-top: 18px; }
.list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hairline); color: var(--text); }
.list li:last-child { border-bottom: 1px solid var(--hairline); }
.list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .cost { color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list .refused { grid-column: 1 / -1; margin-top: -6px; color: #FF9A6B; font-size: 0.9375rem; }
.list button { padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--gray); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.list button:hover { color: var(--text); }
/* Said in place of the drop box when this wallet has had its run, or the demo is closed for the day. */
.notice { padding: clamp(22px, 3vw, 34px); border: 1px dashed rgba(255, 102, 0, 0.6); border-radius: 20px; }
.notice h2 { font: 700 clamp(1.25rem, 2.4vw, 1.625rem)/1.2 var(--display); color: var(--text); }
.notice p { margin-top: 12px; max-width: 58ch; color: var(--text-soft); }
.need { margin-top: 20px; color: var(--text); font-weight: 600; }
.need.is-short { color: #FF9A6B; }
#generate { margin-top: 20px; }

/* 3. The run: the screen of the kit's mock */
.run__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.count { color: var(--text-soft); font-size: clamp(1.0625rem, 1.8vw, 1.375rem); font-variant-numeric: tabular-nums; }
.bar { margin-top: 22px; height: 6px; border-radius: 999px; background: var(--card); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--orange); transition: width 0.6s ease; }
.run { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 34px; }
@media (min-width: 860px) { .run { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 48px; align-items: start; } }
.coin { position: relative; justify-self: center; width: min(100%, 340px); text-align: center; }
.coin figcaption { margin-top: 14px; font: 600 0.8125rem/1.4 var(--body); letter-spacing: 0.34em; text-transform: uppercase; color: var(--orange); }
/* The coin is a still picture: it does not spin. While work is done its light breathes. */
.coin::before { content: ""; position: absolute; inset: 4% 4% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 102, 0, 0.45), rgba(255, 102, 0, 0)); opacity: 0; }
.coin img { position: relative; }
.coin.is-working::before { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.25; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.08); } }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.meter { padding: clamp(18px, 2.6vw, 30px); border-radius: 20px; background: var(--card); }
.meter--burned { background: var(--card-orange); box-shadow: inset 0 0 0 2px var(--orange); }
.meter--burned .label, .meter--burned .number { color: var(--orange); }
.meter .number { margin-top: 10px; }
.lines { margin-top: 22px; }
.lines li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; color: var(--text); font-size: clamp(1rem, 1.6vw, 1.1875rem); }
.lines li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lines li span:first-child::before { content: "✓"; margin-right: 12px; color: var(--orange); font-weight: 700; }
.lines li.is-not span:first-child::before { content: "!"; }
.lines li span:last-child { color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lines li:nth-child(2) { opacity: 0.8; }
.lines li:nth-child(n+3) { opacity: 0.55; }

/* 4. The result */
#screen-done .button { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .coin.is-working::before { opacity: 0.7; } }

/* The help page: how to get energy. */
.link { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.help a:not(.button) { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.help__grid { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 760px) { .help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help__card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--hairline); border-radius: 20px; background: var(--card); }
.help__card img { width: 56px; height: 56px; margin-bottom: 10px; }
.help__card h2, .help__title { font: 700 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--display); color: var(--text); }
.help__card p { margin-top: 12px; }
.help__title { margin-top: 56px; }
.path--tall { flex-direction: column; gap: 16px; margin-top: 22px; font-weight: 400; color: var(--text-soft); }
.help__back { margin-top: 40px; }
.help__back .button { text-decoration: none; }