/* Precision surfaces and pointer-responsive depth. */
:root {
  --bg: #080b0c;
  --panel: #11171a;
  --ink: #f2f7f6;
  --muted: #9aa8ab;
  --line: #3c4b50;
  --edge: #617779;
  --ice: #80d9e1;
}
body {
  background: radial-gradient(ellipse at 90% 3%, #2841451c, transparent 30%),
    linear-gradient(90deg, transparent 49.94%, #88bfca04 50%, transparent 50.06%), var(--bg);
}
.topline { background: #0d1417; border-color: #2e4144; color: #93b3b8; }
.preview-label { color: #829b9f; }
.header { border-color: #405055; }
.header:after { content: ''; position: absolute; height: 2px; width: 86px; bottom: -1px; left: 64px; background: var(--lime); box-shadow: 0 0 18px #d5fc4940; }
.brand-suffix { color: #99a5a9; }
.desktop-nav { color: #c0ccce; }
.hero-description { color: #aebbc0; }
.eyebrow { color: #acbabd; }
.label { color: #b1c1c4; }
.hero-footnote { color: #728d91; }
.tiny-orbit { color: var(--ice); }
.race-word svg { display: none; }
h1 { letter-spacing: -1px; text-shadow: 0 2px 24px #d9f2f208; }
.hero h1 .lime { text-shadow: 0 0 45px #d5fc491a; }
.hero-copy .eyebrow:after { content: ''; width: 58px; height: 1px; background: linear-gradient(90deg, var(--ice), transparent); }
.button { border-radius: 4px; }
.button-primary { border: 1px solid #e5ff8e; box-shadow: inset 0 1px #f0ffbd, 0 0 0 3px #d5fc4906; }
.button-outline { border-color: #60767b; background: linear-gradient(145deg, #18222988, #0c1215); box-shadow: inset 0 1px #deffff0b; }
.button-outline:hover { background: #1c2c31; border-color: #9fcdd2; }
.icon-button { border-radius: 4px; border-color: #51676c; background: #0b1215; }
.icon-button:hover { background: #19282b; }
.tag { border-radius: 3px; border-color: #4e666c; background: #0d181d80; }
.lime-tag { color: var(--lime); border-color: #718947; background: #d5fc4909; }
.race-ticker { background: #121b1e; color: #d5fc49; border-color: #637e61; transform: none; width: 100%; margin-left: 0; height: 49px; box-shadow: inset 0 1px #a5cfdb18, 0 0 32px #59c9d207; }
.ticker-track { font-size: 19px; letter-spacing: 2px; }
.ticker-track b { color: #79bcc4; font-size: 22px; }
/* Crown and coin share one front-facing coordinate system. */
.hero-stage { perspective: 1100px; }
.stage-grid { opacity: .8; background-image: linear-gradient(#80d9e10c 1px, transparent 1px), linear-gradient(90deg, #80d9e10c 1px, transparent 1px); }
.stage-dots { opacity: .28; }
.stage-flag { opacity: .15; }
.coordinate { color: #6a9198; }
.orbit { border-color: #75cad13b; }
.orbit-two { border-color: #bfd57840; opacity: .5; }
.orbit:after { box-shadow: 0 0 14px #c0ed4870; }
.crowned-coin {
  width: 300px; height: 420px; left: 50%; top: 42%; scale: 1;
  transform: translate(-50%, -50%);
  animation: assembled-float 7s ease-in-out infinite;
}
.crown-asset {
  width: 278px; max-width: none; height: auto; left: 11px; top: 30px;
  transform: none;
  filter: drop-shadow(0 7px 3px #0009) drop-shadow(0 0 16px #d5fc4910);
  z-index: 3;
}
.coin-rim {
  width: 280px; height: 280px; left: 10px; top: 122px; padding: 11px;
  transform: none;
  background: conic-gradient(from 10deg, #effaff, #75878e 13%, #f5ffff 21%, #303d42 31%, #bcd6dc 43%, #f6ffff 50%, #4a5b60 64%, #d7ff75 75%, #617576 83%, #effaff);
  box-shadow: 0 7px 0 #56686a, 0 12px 0 #1a292e, 0 24px 35px #0009, 0 0 60px #9cedd00d;
}
.coin-rim:before { inset: 4px; border-color: #f4ffffc9; }
.coin-face { border: 3px solid #263a3d; }
.coin-rim:after { inset: 11px; background: linear-gradient(135deg, #e7ffff2b, transparent 37%, #0002); }
.coin-shadow { bottom: -20px; left: 20px; background: #72dce21b; transform: none; }
.crown-chip { transform: none; border-radius: 5px; border-color: #91b28e; background: linear-gradient(125deg, #1c2a30f2, #0b1519f2); box-shadow: inset 0 1px #e1ffff22, 0 12px 34px #0008, 0 0 0 3px #d5fc4907; }
.crown-chip div>span { color: #a3c5ca; }
.skin { border-color: #54767d; background: #0e171b; }
.skin.active { border-color: var(--lime); }
.skin-picker>span { color: #88a4aa; }
/* Bright perimeter, crisp inset edge, and small corner registration marks. */
.spotlight-card, .journey-card, .buyback-card, .ai-card, .final-cta {
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: linear-gradient(135deg, #1c272cd9, #10171bf5 46%, #0c1215);
  box-shadow: inset 0 0 0 1px #e0ffff06, inset 0 1px #d9ffff1a, 0 8px 20px #0003;
}
.spotlight-card:before, .journey-card:before, .buyback-card:before, .ai-card:before {
  content: ''; position: absolute; inset: 7px; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--ice),var(--ice)) left top/13px 1px no-repeat,
    linear-gradient(var(--ice),var(--ice)) left top/1px 13px no-repeat,
    linear-gradient(#a2bc80,#a2bc80) right bottom/13px 1px no-repeat,
    linear-gradient(#a2bc80,#a2bc80) right bottom/1px 13px no-repeat;
  opacity: .6; transition: opacity .2s;
}
.spotlight-head, .journey-top, .card-top { position: relative; }
.spotlight-card { border-top-color: #a4c681; }
.spotlight-identity span, .spotlight-card>p { color: #9faeb0; }
.spotlight-bottom { border-color: #3b4d54; }
.spotlight-bottom>span { color: #b4c5c5; }
.journey-top>.muted { color: #9bacb1; }
.cap-number strong span { color: #b3c5cc; }
.destination { color: #7e969e; }
.journey-track { background: #34444d; }
.journey-fill { background: linear-gradient(90deg, #6bbdc6, var(--lime)); }
.track-node { background: #122127; border-color: #6d8f7b; }
.node-b { color: #9bb5bf; border-color: #576e78; }
.journey-caption { color: #a6bbc1; }
.journey-note { border-color: #3b4d54; color: #98b2b9; }
.mini-bars i { background: linear-gradient(#b8f87b,#5bd2dd60); }
.buyback-card>strong>span { color: #9eb8bf; }
.teaser-prompt { background: #223435; border-color: #526f72; border-radius: 5px 5px 0 5px; }
.teaser-answer span:not(.ai-mark) { color: #90a7ad; }
.teaser-draft { background: #111e23; border-color: #446169; border-radius: 4px; }
.teaser-draft>div>span { color: #8facb4; }
.connection-node { border-radius: 8px; border-color: #74949e; background: linear-gradient(140deg,#30444c,#101a20); box-shadow: 4px 5px 0 #24333a; }
.connection-node.kmb-node { border-color: #aecb70; box-shadow: 4px 5px 0 #3a4828; }
.connection-line { background: linear-gradient(90deg,#7cd1dc,#b8dd74,#7cd1dc); }
.connection-line>.icon { background: #14232a; border-color: #719f95; }
.connection-caption { color: #8dabaf; }
.game-steps>article { border-color: #495f66; }
.game-steps>article:first-child { border-top-color: #9fb783; }
.game-stamp { color: #38535e; }
.final-cta { background: radial-gradient(ellipse at 50% 130%,#6ad6e31b,transparent 65%),linear-gradient(130deg,#18252b,#0c1418); }
.final-cta:after { content: ''; position: absolute; width: 90px; height: 2px; background: var(--lime); top: 0; left: calc(50% - 45px); box-shadow: 0 0 28px #d5fc4960; }
.footer-links { color: #a9bcc2; }
.footer-bottom { color: #77939c; border-color: #40565e; }
/* One motion layer handles all cards, including dynamically inserted assets. */
.tilt-card {
  --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; --depth: 0px; --card-scale: 1;
  position: relative;
  transform: perspective(1000px) translate3d(0,var(--lift),var(--depth)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
  transform-origin: center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .3s;
  backface-visibility: hidden;
}
.tilt-card:after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  border-radius: inherit;
  background: radial-gradient(450px circle at var(--mx,50%) var(--my,30%),#a5efff13,transparent 65%),
    linear-gradient(115deg,transparent 30%,#e9ffff08 45%,transparent 60%);
  transition: opacity .3s;
}
.tilt-card.is-tilting {
  --lift: -8px; --depth: 22px; --card-scale: 1.008;
  border-color: #b5e2dd;
  box-shadow: inset 0 0 0 1px #b9fbff15, inset 0 1px #e4ffff3b, 0 25px 42px #0008, 0 0 25px #79deef0c;
  transition: transform .14s ease-out, border-color .2s, box-shadow .25s;
  z-index: 3;
  will-change: transform;
}
.tilt-card.is-tilting:before, .tilt-card.is-tilting:after { opacity: 1; }
.tilt-card:focus-within { border-color: #a9d5d4; box-shadow: inset 0 1px #dfffff33, 0 0 0 2px #93e9ee0c; }
/* Apply the same crisp surfaces to the working flows. */
dialog { border-color: #749298; border-radius: 9px; background: #0e171cf7; box-shadow: 0 35px 140px #000c, 0 0 0 4px #80d9e10b; }
.dialog-top { background: #142127f7; border-color: #4b646d; }
.panel, .rule-item, .stat-box, .asset-tile { border-color: #526c76; border-radius: 6px; background: linear-gradient(135deg,#1c2a31,#101b20); box-shadow: inset 0 1px #d9ffff0b; }
.field input,.field textarea,.field select,.chat-input,.amount-field,.tabs { background: #0b151a; border-color: #4a6975; border-radius: 4px; }
.field input:focus,.field textarea:focus,.chat-input:focus { border-color: #9fe7e9; box-shadow: 0 0 0 2px #80d9e115; }
.detail-row { border-color: #354b55; color: #9eb6bf; }
.detail-row>strong { color: #d9e8ea; }
.notice { background: #7bdce208; border-color: #46656c; color: #a9c4ca; border-radius: 4px; }
.notice strong { color: #d8eeee; }
.token-preview { border-color: #587a80; background: radial-gradient(ellipse at center,#72dce219,transparent 65%),#101b20; border-radius: 6px; }
.tabs button { border-radius: 2px; }
.suggestion { background: #182a30; border-color: #43616b; color: #b6cdd0; border-radius: 4px; }
.suggestion:hover { background: #253c41; border-color: #7aaab0; }
.message.assistant { background: #172a31; border-color: #3e616e; border-radius: 5px; }
.chat-sidebar, .chat-form { border-color: #3c555e; }
.message-label { color: #a3d7d9; }
.code-block { background: #0b151a; border-color: #42606a; color: #bbd1d5; }
.permissions li { color: #aec3c7; }
.stat-box span { color: #9ab7c1; }
.stat-box strong small { color: #a8c4cc; }
th { color: #9bb9c2; } td { border-color: #354d58; }
.rule-item h3 { color: #e0eef0; }.rule-item p { color: #aec4ca; }
.asset-tile span { color: #b4d0d5; }
@keyframes assembled-float {
  0%,100% { transform: translate(-50%,-50%); }
  50% { transform: translate(-50%,calc(-50% - 9px)); }
}
@media(min-width:1441px) { .crowned-coin { scale: 1.07; } }
@media(max-width:1150px) { .header:after { left: 36px; } .crowned-coin { left: 52%; scale: .95; } }
@media(max-width:800px) { .header:after { left: 25px; } .crowned-coin { left: 49%; top: 41%; scale: .8; } }
@media(max-width:600px) {
  .header:after { left: 20px; width: 60px; }
  .crowned-coin { left: 50%; top: 40%; scale: .78; }
  .crown-chip { bottom: 46px; right: 4%; }
  .race-ticker { height: 43px; }
  .ticker-track { font-size: 17px; }
  .spotlight-card,.journey-card,.buyback-card,.ai-card { border-color: #607c84; border-radius: 5px; }
  .mobile-nav:not([hidden]) { background: #111f26fa; border-color: #60808b; border-radius: 6px; }
  .tilt-card { transform: none; }
}
@media(hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .tilt-card,.tilt-card.is-tilting { transform: none; will-change: auto; }
}
.reduce-motion .tilt-card,.reduce-motion .tilt-card.is-tilting { transform: none; will-change: auto; }
.reduce-motion .crowned-coin { transform: translate(-50%,-50%); }