@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('./assets/fonts/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('./assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('./assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  --bg-dark: #121216;
  --bg-panel: #1a1a20;
  --bg-card: #1f222a;
  --bg-card-hover: #262a34;
  --border-color: #393e49;
  --border-active: #35d07f;
  --sqk-green: #35d07f;
  --sqk-gold: #ffe600;
  --sqk-orange: #f5a623;
  --sqk-purple: #a78bfa;
  --sqk-red: #ff889e;
  --text-main: #f2f2f4;
  --text-muted: #b0b5c1;
  --text-sub: #cbd0db;
  --focus-ring: #ffe600;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-heading-small: 1.25rem;
  --text-heading: 1.5rem;
  --text-display: 3rem;
  --text-number: 2rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-dark); color: var(--text-main); font: 400 var(--text-body)/1.6 var(--font-sans); overflow-wrap: break-word; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--sqk-green); text-decoration-thickness: from-font; text-underline-offset: .22em; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
::selection { background: var(--sqk-gold); color: var(--bg-dark); }
h1, h2, h3, p, dl, dd, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--text-display); line-height: 1.1; letter-spacing: -.045em; }
h2 { font-size: var(--text-heading); line-height: 1.3; letter-spacing: -.02em; }
h3 { font-size: var(--text-heading-small); line-height: 1.4; letter-spacing: -.01em; }
p { text-wrap: pretty; }
section, main { scroll-margin-block-start: var(--space-6); }
main:focus { outline: none; }
.skip-link { position: absolute; z-index: 10; inset-inline-start: 16px; inset-block-start: -100px; padding: 12px 16px; background: var(--sqk-gold); color: var(--bg-dark); }
.skip-link:focus { inset-block-start: 12px; }
.testnet-disclaimer-banner { background: #272619; color: #f4e9ba; border-block-end: 1px solid #656037; padding: 12px 24px; font-size: var(--text-small); line-height: 1.5; }
.testnet-disclaimer-banner p { max-width: 1160px; margin-inline: auto; }
.testnet-disclaimer-banner strong, .testnet-disclaimer-banner a { color: var(--sqk-gold); }
.sqk-navbar { border-block-end: 1px solid var(--border-color); }
.sqk-nav-container { max-width: 1208px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 16px 24px; }
.sqk-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-main); }
.sqk-brand { font-size: var(--text-heading-small); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; text-decoration: none; color: var(--text-main); }
.accent { color: var(--sqk-green); }
.sqk-nav-links { display: flex; gap: 24px; margin-inline: auto; }
.sqk-nav-links a { color: var(--text-muted); text-decoration: none; min-height: 44px; display: flex; align-items: center; font-size: var(--text-small); }
.sqk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: var(--text-small); font-weight: 600; line-height: 1.5; text-decoration: none; text-align: center; color: var(--text-main); background: var(--bg-card); }
.sqk-btn-primary { color: var(--bg-dark); background: var(--sqk-green); border-color: var(--sqk-green); }
.sqk-btn-outline { background: transparent; }
.sqk-btn:disabled { color: var(--text-muted); background: var(--bg-card); border-color: var(--border-color); }
.sqk-btn[aria-pressed='true'] { color: var(--sqk-gold); border-color: var(--sqk-gold); }
.quiet-btn { padding: 6px 10px; min-width: 44px; background: transparent; border-color: transparent; }
#connect-wallet-btn { margin-inline-start: auto; flex-shrink: 0; }
main { max-width: 1208px; margin-inline: auto; padding: 32px 24px 0; }
.sqk-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-block-end: 24px; }
.hero-subtitle { color: var(--text-muted); margin-block-start: 12px; }
.hero-subtitle strong { color: var(--sqk-gold); font-weight: 600; }
.mode-indicator { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--text-muted); font-size: var(--text-small); }
.dot { width: 6px; height: 6px; background: var(--sqk-green); border-radius: 50%; }
.simulator-wrapper { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-panel); }
.sim-viewport { padding: 24px; min-width: 0; border-inline-end: 1px solid var(--border-color); }
.rig-heading, .telemetry-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.rig-heading h2 { font-size: var(--text-heading-small); }
.wheel-scene { position: relative; min-height: 290px; margin-block: 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
#wheel-canvas { display: block; position: absolute; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; inset-block-start: 0; left: 50%; transform: translateX(-50%); }
.scene-metric { position: relative; z-index: 1; margin-block-start: 16px; display: flex; flex-direction: column; gap: 0; font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); background: var(--bg-panel); padding: 4px 0; min-width: 0; overflow-wrap: anywhere; }
.scene-metric strong { font-family: var(--font-mono); font-size: var(--text-number); font-weight: 600; line-height: 1.2; color: var(--text-main); font-variant-numeric: tabular-nums; }
.rpm-metric { justify-self: start; }
.score-metric { justify-self: end; text-align: end; }
.score-metric strong { color: var(--sqk-gold); }
.wheel-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.wheel-controls > button { flex: 1; }
.control-hint { font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); margin-block-start: 8px; }
.record-btn { width: 100%; margin-block-start: 20px; border-color: var(--sqk-green); color: var(--sqk-green); background: transparent; }
.demo-notice { margin-block-start: 8px; color: var(--text-sub); font-size: var(--text-small); line-height: 1.5; }
.record-status { font-size: var(--text-small); color: var(--sqk-green); line-height: 1.5; overflow-wrap: anywhere; }
.record-status:not(:empty) { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--border-color); }
.sim-telemetry { padding: 24px; min-width: 0; }
.sim-telemetry h2 { font-size: var(--text-heading-small); }
.telemetry-status { color: var(--sqk-green); font-size: var(--text-small); }
.panel-description { font-size: var(--text-small); color: var(--text-muted); margin-block-start: 4px; }
.telemetry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; margin-block: 24px; }
.metric-box dt { color: var(--text-muted); font-size: var(--text-small); }
.metric-box dd { font-family: var(--font-mono); font-size: var(--text-heading); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
small { font: 400 var(--text-small)/1.5 var(--font-sans); color: var(--text-muted); }
.block-progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-small); color: var(--text-muted); }
progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 4px; background: var(--bg-card-hover); color: var(--sqk-green); accent-color: var(--sqk-green); margin-block-start: 8px; }
progress::-webkit-progress-bar { background: var(--bg-card-hover); border-radius: 4px; }
progress::-webkit-progress-value { background: var(--sqk-green); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--sqk-green); border-radius: 4px; }
.terminal-box { margin-block-start: 24px; }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-small); color: var(--text-muted); border-block-end: 1px solid var(--border-color); }
.terminal-logs { margin: 8px 0 0; padding: 0; list-style: none; height: 106px; overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin; font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); }
.log-line { padding-block: 4px; }
.log-line.block, .log-line.speed { color: var(--sqk-green); }
.session-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 20px; }
.session-actions a { font-size: var(--text-small); }
.method-details { margin-block-start: 20px; font-size: var(--text-small); }
summary { cursor: pointer; padding-block: 12px; min-height: 44px; color: var(--text-sub); }
.method-details p { color: var(--text-muted); margin-block: 8px; max-width: 68ch; }
.sqk-section { padding-block: 56px; border-block-end: 1px solid var(--border-color); }
.section-header { margin-block-end: 24px; }
.section-header p { color: var(--text-muted); margin-block-start: 8px; max-width: 70ch; }
.aura-hub-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.aura-summary { padding-block: 12px; }
.aura-title { color: var(--text-muted); font-size: var(--text-small); }
.aura-number { font-family: var(--font-mono); font-size: var(--text-display); color: var(--sqk-gold); font-weight: 600; line-height: 1.3; margin-block-end: 12px; }
.aura-summary p, .aura-summary a { font-size: var(--text-small); }
.aura-summary > a { display: inline-flex; align-items: center; min-height: 44px; }
.demo-label { color: var(--sqk-gold); margin-block: 12px 0; }
.quest-list { list-style: none; margin: 0; padding: 0; }
.quest-item { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding-block: 16px; border-block-end: 1px solid var(--border-color); }
.quest-item:first-child { padding-block-start: 8px; }
.quest-item:last-child { border: 0; }
.quest-item h3 { font-size: var(--text-body); font-weight: 600; }
.quest-item p, .quest-progress span { font-size: var(--text-small); color: var(--text-muted); }
.quest-progress span { display: block; margin-block-start: 4px; font-variant-numeric: tabular-nums; }
.share-demo { display: flex; align-items: center; gap: 20px; margin-block-start: 24px; }
.share-demo p { font-size: var(--text-small); color: var(--text-muted); }
.nft-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tilt-card { perspective: 1000px; min-width: 0; }
.card-inner { padding: 24px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-panel); }
.card-badge { font-size: var(--text-small); color: var(--text-muted); }
.rarity-legendary { color: var(--sqk-gold); }.rarity-epic { color: var(--sqk-green); }.rarity-rare { color: var(--sqk-purple); }
.card-avatar { display: flex; justify-content: center; padding-block: 20px; }
.card-number { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-muted); }
.card-name { margin-block: 4px 16px; }
.trait-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--text-small); padding-block: 6px; color: var(--text-muted); }
.trait-row strong { font-weight: 600; color: var(--text-sub); }
.status-chip { color: var(--text-sub); }
.lore-section blockquote { font-size: var(--text-heading); line-height: 1.5; max-width: 48ch; margin-block-end: 32px; color: var(--sqk-gold); }
.manifesto-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.manifesto-columns p { color: var(--text-muted); margin-block-start: 8px; }
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; border-block-end: 1px solid var(--border-color); }
.token-row:last-child { border: 0; }
.token-row dd { display: flex; align-items: center; gap: 32px; }
.token-row strong { font-family: var(--font-mono); font-size: var(--text-heading); font-weight: 600; color: var(--sqk-green); }
.token-row dd span { font-size: var(--text-small); color: var(--text-muted); }
.sqk-footer { max-width: 1208px; margin-inline: auto; padding: 40px 24px; display: flex; justify-content: space-between; gap: 40px; font-size: var(--text-small); }
.sqk-footer p { color: var(--text-muted); margin-block-start: 12px; max-width: 60ch; }
.sqk-footer nav { display: flex; flex-direction: column; }
.sqk-footer nav a { display: flex; align-items: center; min-height: 44px; }
dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 48px); border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-panel); color: var(--text-main); padding: 24px; overscroll-behavior: contain; }
dialog::backdrop { background: rgb(0 0 0 / .75); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.dialog-heading h2 { font-size: var(--text-heading-small); }
#close-wallet { font-size: var(--text-heading); }
dialog p { color: var(--text-muted); font-size: var(--text-small); }
.wallet-options { display: flex; flex-direction: column; gap: 12px; margin-block: 24px 12px; }
.wallet-options .sqk-btn { width: 100%; justify-content: flex-start; min-height: 48px; text-align: start; }
.wallet-options img { width: 28px; height: 28px; object-fit: contain; }
.wallet-status { color: var(--sqk-gold); margin-block: 12px; }
.wallet-address { color: var(--text-main); font-family: var(--font-mono); overflow-wrap: anywhere; margin-block-start: 16px; }
.noscript-notice { margin: 24px; padding: 24px; background: var(--bg-card); }
@media (hover: hover) {
  a:hover { color: var(--text-main); }
  .sqk-btn:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--text-muted); color: var(--text-main); }
  .sqk-btn-primary:hover:not(:disabled) { background: #67e5a3; border-color: #67e5a3; color: var(--bg-dark); }
  .record-btn:hover:not(:disabled) { color: var(--sqk-green); border-color: var(--sqk-green); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .sqk-btn { transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms cubic-bezier(.2, 0, 0, 1); }
  .sqk-btn:active:not(:disabled) { transform: scale(.96); }
  .card-inner { transition: transform 150ms ease-out; }
}
@media (max-width: 68rem) {
  .sqk-nav-links { gap: 16px; }
  .sqk-nav-container { gap: 24px; }
  .sim-viewport, .sim-telemetry { padding: 20px; }
  .mode-indicator { display: none; }
  .card-inner { padding: 20px; }
  .aura-hub-grid { gap: 32px; }
}
@media (max-width: 54rem) {
  .sqk-nav-links { display: none; }
  .simulator-wrapper { grid-template-columns: minmax(0, 1fr); }
  .sim-viewport { border-inline-end: 0; border-block-end: 1px solid var(--border-color); }
  .wheel-scene { min-height: 260px; }
  .nft-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifesto-columns { grid-template-columns: 1fr; gap: 24px; }
  .aura-hub-grid { grid-template-columns: 1fr; gap: 24px; }
  .aura-summary { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 24px; }
  .aura-number { grid-column: 1; }.aura-summary > p { grid-column: 2; }
  .token-row dd { gap: 16px; }
  .sqk-footer { flex-direction: column; }
}
@media (max-width: 35rem) {
  :root { --text-display: 2rem; }
  .testnet-disclaimer-banner { padding: 12px 16px; }
  .sqk-nav-container { padding: 12px 16px; gap: 8px; }
  .sqk-logo { gap: 6px; }
  .sqk-logo img { width: 28px; height: 28px; }
  .sqk-brand { font-size: var(--text-body); }
  #connect-wallet-btn { padding-inline: 12px; }
  main { padding: 20px 16px 0; }
  .sqk-hero { margin-block-end: 20px; }
  h1 { letter-spacing: -.035em; }
  .hero-subtitle { font-size: var(--text-small); margin-block-start: 8px; }
  .desktop-break { display: none; }
  .sim-viewport, .sim-telemetry { padding: 16px; }
  .rig-heading h2 { font-size: var(--text-body); }
  .wheel-scene { min-height: 176px; margin-block-end: 12px; }
  #wheel-canvas { height: 160px; width: 160px; inset-block-start: 16px; left: 44%; }
  .scene-metric { margin-block-start: 4px; font-size: var(--text-small); }
  .scene-metric strong { font-size: var(--text-heading); }
  .score-metric span { max-width: 100px; }
  .wheel-controls { gap: 8px; }
  .wheel-controls .sqk-btn { padding-inline: 10px; }
  .record-btn { margin-block-start: 16px; }
  .sqk-section { padding-block: 40px; }
  .nft-cards-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card-inner { padding: 24px; }
  .card-avatar svg { width: 160px; height: 160px; }
  .aura-summary { display: block; }
  .quest-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .share-demo { flex-direction: column; align-items: flex-start; gap: 12px; }
  .token-row { align-items: flex-start; gap: 12px; }
  .token-row dd { flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }
  .token-row dt { max-width: 45%; }
  .sqk-footer { padding-inline: 16px; }
  dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 24px); border-radius: 16px 16px 0 0; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .dot { forced-color-adjust: none; }
  progress { border: 1px solid CanvasText; }
}