/* Anybody's dollar sign is two stubs that read as an S at small sizes: borrow just that glyph from the system */
@font-face { font-family: 'Dollar'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto'); unicode-range: U+0024; }
:root {
  --space: #000;
  --yes: #ffb13d;
  --no: #6cc8ff;
  --ink: #e9eef5;
  --mute: #7d8a9c;
  --line: rgba(233, 238, 245, 0.14);
  --display: 'Dollar', 'Anybody', system-ui, sans-serif;
  --voice: 'Newsreader', Georgia, serif;
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { background: var(--space); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; min-height: 100vh; font-family: var(--display); font-variation-settings: 'wdth' 100; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--yes); outline-offset: 3px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }

.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gut); }
.mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; font-variation-settings: 'wdth' 118; }
.mark svg { width: 30px; height: 30px; margin: -3px 0; flex: none; }
.mark span { margin-right: -0.3em; } /* the tracking's trailing space */
.kick { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; font-weight: 560; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yes); font-variation-settings: 'wdth' 110; }
.kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 0 rgba(255, 177, 61, .6); animation: kick 2.2s ease-out infinite; }
@keyframes kick { 70% { box-shadow: 0 0 0 9px rgba(255, 177, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 177, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .kick i { animation: none; } }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); font-size: 15px; line-height: 1; }
.top nav a.xlogo { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.top nav a { text-decoration: none; color: rgba(233, 238, 245, 0.78); transition: color 0.2s; }
.top nav a:hover { color: var(--ink); }

main { position: relative; z-index: 2; pointer-events: none; } /* the 3D view underneath takes the clicks; only real controls catch them */
/* a soft shadow behind the words, so city lights never fight the type */
.hero::before { content: ''; position: fixed; z-index: -1; left: 0; bottom: 0; width: min(900px, 80vw); height: 75vh; background: radial-gradient(ellipse at 15% 85%, rgba(0,0,0,.62), transparent 68%); pointer-events: none; }
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gut) clamp(40px, 8vh, 96px); max-width: 1180px; pointer-events: none; }
.hero a, .hero button { pointer-events: auto; } /* text blocks are wider than they look: only real controls catch the pointer */
h1 { margin: 0; font-weight: 300; font-size: clamp(54px, 9.4vw, 158px); line-height: 0.86; letter-spacing: -0.02em; font-variation-settings: 'wdth' 62; }
h1 span { display: block; }
.lede { font-family: var(--voice); font-weight: 350; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.5; max-width: 33em; margin: 28px 0 0; color: rgba(233, 238, 245, 0.86); font-variation-settings: 'opsz' 20; }
.ctas { display: flex; gap: 26px; align-items: center; margin-top: 32px; }
.solid { background: var(--ink); color: #000; text-decoration: none; font-weight: 560; font-size: 16px; padding: 15px 26px; border-radius: 999px; font-variation-settings: 'wdth' 110; transition: background 0.2s; }
.solid:hover { background: #fff; }
.quiet { font-size: 16px; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.quiet:hover { border-color: var(--ink); }
.live { margin: 34px 0 0; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.live b { color: var(--ink); font-weight: 500; }
.live a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); pointer-events: auto; }
.live a:hover { border-color: var(--ink); }

#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: left; transition: opacity 0.35s; padding: 6px 10px 6px 9px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.38)); border-left: 1px solid rgba(233, 238, 245, 0.35); }
.tag .q { font-size: 12.5px; color: rgba(233, 238, 245, 0.88); font-variation-settings: 'wdth' 92; }
.tag .p { font-size: 22px; font-weight: 300; font-variation-settings: 'wdth' 70; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tag .p .y { color: var(--yes); }
.tag .p .n { color: var(--no); margin-left: 10px; }

@media (max-width: 640px) {
  .top nav a:not(:nth-child(2)) { display: none; }
  .ctas { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- a market, opened ---- */
.card { position: fixed; z-index: 6; right: var(--gut); top: 50%; transform: translateY(-50%); width: min(420px, calc(100vw - 2 * var(--gut)));
  padding: 30px 30px 26px; background: linear-gradient(180deg, rgba(4, 7, 14, 0.9), rgba(2, 3, 8, 0.94)); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); opacity: 0; translate: 24px 0; transition: opacity 0.35s, translate 0.45s cubic-bezier(.2,.8,.2,1); }
.card.on { opacity: 1; translate: 0 0; }
.card .x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.card .x:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.where { margin: 0 44px 0 0; font-size: 14px; color: var(--mute); }
.card h2 { margin: 10px 0 0; font-family: var(--voice); font-weight: 400; font-size: 30px; line-height: 1.15; font-variation-settings: 'opsz' 36; }
.odds { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.side { display: flex; flex-direction: column; }
.side .k { font-size: 14px; color: var(--mute); }
.side .v { font-size: 76px; font-weight: 250; line-height: 0.95; font-variation-settings: 'wdth' 58; font-variant-numeric: tabular-nums; }
.side.yes .v { color: var(--yes); } .side.no .v { color: var(--no); }
.bar { height: 4px; border-radius: 4px; background: var(--no); margin-top: 18px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--yes); transition: width 0.6s cubic-bezier(.2,.8,.2,1); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 24px; }
.facts dt { font-size: 13px; color: var(--mute); }
.facts dd { margin: 4px 0 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.card .solid { display: inline-block; }
.oracles { margin: 20px 0 0; font-family: var(--voice); font-size: 16px; line-height: 1.5; color: rgba(233,238,245,.7); }
body.picking { cursor: pointer; }

@media (max-width: 640px) {
  .card { top: auto; bottom: 12px; transform: none; right: 12px; left: 12px; width: auto; padding: 24px 22px 20px; translate: 0 24px; }
  .card.on { translate: 0 0; }
  .side .v { font-size: 60px; }
}
.hero, .live { transition: opacity 0.5s; }
body.focused .hero { opacity: 0; pointer-events: none; }
body.focused .hero a, body.focused .hero button { pointer-events: none; }

/* ---- the arrival ---- */
.veil { position: fixed; inset: 0; z-index: 20; background: #000; display: grid; place-items: center; transition: opacity 1.4s ease 0.2s, visibility 0s linear 1.6s; }
.veil p { font-family: var(--voice); font-style: italic; font-size: 19px; color: rgba(233,238,245,.7); animation: breathe 2.4s ease-in-out infinite; }
.veil.gone { opacity: 0; visibility: hidden; }
.veil.gone p { opacity: 0; transition: opacity 0.25s; animation: none; }
@keyframes breathe { 50% { opacity: .45; } }
.hero .kick, .hero h1 span, .hero .lede, .hero .ctas, .hero .live, .top { opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.8,.2,1); }
.hero h1 span:nth-child(2) { transition-delay: .12s; } .hero .lede { transition-delay: .3s; } .hero .ctas { transition-delay: .45s; } .hero .live { transition-delay: .6s; } .top { transition-delay: .5s; }
body.arrived .hero .kick, body.arrived .hero h1 span, body.arrived .hero .lede, body.arrived .hero .ctas, body.arrived .hero .live, body.arrived .top { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .veil p { animation: none; } }

/* ---- market rows and filter chips (the markets panel) ---- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 24px 14px 28px; }
.filters button { font: inherit; font-size: 13.5px; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.filters button[aria-selected="true"] { color: #000; background: var(--ink); border-color: var(--ink); }
.mlist { list-style: none; margin: 0; padding: 0 12px 30px; overflow-y: auto; flex: 1; }
.mlist button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 14px; padding: 13px 16px; cursor: pointer; }
.mlist button:hover, .mlist button:focus-visible { background: rgba(255,255,255,.05); }
.mlist .t { font-size: 16px; }
.mlist .s { grid-column: 1; font-size: 13px; color: var(--mute); }
.mlist .y { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 30px; font-weight: 300; color: var(--yes); font-variation-settings: 'wdth' 62; font-variant-numeric: tabular-nums; }

/* ---- /markets: the whole world ---- */
body.globe { overflow: hidden; }
.panel { position: fixed; z-index: 4; left: var(--gut); top: 84px; bottom: 24px; width: min(400px, calc(100vw - 2 * var(--gut))); display: flex; flex-direction: column;
  background: rgba(2, 4, 9, 0.84); border: 1px solid var(--line); border-radius: 22px; padding: 26px 10px 0; opacity: 0; transition: opacity 0.8s ease 0.3s; }
body.arrived .panel { opacity: 1; }
.panel h1 { font-size: 58px; line-height: 0.9; margin: 0 16px; font-weight: 300; font-variation-settings: 'wdth' 60; }
.panel .sub { margin: 10px 16px 18px; font-family: var(--voice); font-size: 16.5px; color: rgba(233,238,245,.72); }
.panel input[type=search] { margin: 0 16px; font: inherit; font-size: 15px; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; }
.panel input[type=search]::placeholder { color: var(--mute); }
.panel input[type=search]:focus { border-color: rgba(233,238,245,.4); }
.panel .filters { padding: 14px 16px 10px; }
.panel .mlist { padding: 0 2px 20px; }
.mlist button[aria-current] { background: rgba(255,177,61,.1); }
.mlist .none { padding: 18px 16px; font-family: var(--voice); color: var(--mute); }
.hint { position: fixed; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0; font-size: 14px; color: var(--mute); pointer-events: none; transition: opacity 0.8s; }
.hint.gone { opacity: 0; }
body.globe #gl { cursor: grab; touch-action: none; }
body.globe #gl:active { cursor: grabbing; }
body.globe.picking #gl { cursor: pointer; }
@media (min-width: 900px) { body.globe .hint { left: calc(50% + 210px); } }
@media (max-width: 899px) {
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 42vh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-top: 18px; }
  .panel h1 { font-size: 40px; }
  .panel .sub { margin-bottom: 12px; }
  body.globe .card { bottom: calc(42vh + 10px); }
  .hint { bottom: calc(42vh + 14px); }
}

/* ---- a market's detail, on the left: the chart, the numbers, how it settles ---- */
.detail { position: fixed; z-index: 6; left: var(--gut); top: 84px; max-height: calc(100vh - 108px); width: min(420px, calc(100vw - 2 * var(--gut))); overflow-y: auto;
  padding: 22px 26px 26px; background: linear-gradient(180deg, rgba(4, 7, 14, 0.92), rgba(2, 3, 8, 0.95)); border: 1px solid var(--line); border-radius: 22px;
  opacity: 0; translate: -24px 0; transition: opacity 0.35s, translate 0.45s cubic-bezier(.2,.8,.2,1); scrollbar-width: thin; }
.detail.on { opacity: 1; translate: 0 0; }
.detail .back { font: inherit; font-size: 14px; color: var(--mute); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.detail .back:hover { color: var(--ink); }
.detail .back::before { content: ''; display: inline-block; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 8px 1px 2px; }
.detail h2 { margin: 8px 0 0; font-family: var(--voice); font-weight: 400; font-size: 26px; line-height: 1.18; font-variation-settings: 'opsz' 30; }
.detail .chart { margin: 22px 0 0; }
.detail figcaption { font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.detail .plot { position: relative; }
.detail svg { display: block; width: 100%; outline: none; }
.detail svg:focus-visible { outline: 2px solid var(--yes); outline-offset: 4px; border-radius: 6px; }
.detail .gl { stroke: rgba(233, 238, 245, 0.08); stroke-width: 1; }
.detail .base { stroke: rgba(233, 238, 245, 0.22); stroke-width: 1; }
.detail .ax { fill: var(--mute); font-size: 11px; font-family: var(--display); }
.detail .now { fill: var(--ink); font-size: 15px; font-family: var(--display); font-variant-numeric: tabular-nums; }
.detail .xh { stroke: rgba(233, 238, 245, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.detail .tip[hidden] { display: none; }
.detail .tip { position: absolute; pointer-events: none; min-width: 110px; padding: 7px 10px; border-radius: 10px; background: #0b111c; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.detail .tip b { font-weight: 500; font-size: 14px; } .detail .tip span { font-size: 12px; color: var(--mute); }
.dstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 20px 0 0; }
.dstats dt { font-size: 12.5px; color: var(--mute); } .dstats dd { margin: 3px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.detail h3 { margin: 24px 0 0; font-size: 13px; font-weight: 500; color: var(--mute); }
.detail .rules { margin: 6px 0 0; font-family: var(--voice); font-size: 16.5px; line-height: 1.5; }
.detail details { margin-top: 12px; font-size: 14px; color: var(--mute); }
.detail summary { cursor: pointer; } .detail summary:hover { color: var(--ink); }
.detail details p { font-family: var(--voice); font-size: 15px; line-height: 1.5; white-space: pre-line; color: rgba(233,238,245,.75); }
.detail .src { margin: 12px 0 0; font-size: 14px; color: var(--mute); } .detail .src a { color: var(--ink); }
.detail table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.detail th, .detail td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.detail th { color: var(--mute); font-size: 12.5px; } .detail td:last-child, .detail th:last-child { text-align: right; }
body.globe.focused .panel { opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .detail { display: none; } }
body.focused .hint { opacity: 0; }

/* ---- /launch: the form on the left, the preview bottom right ---- */
.lform { overflow-y: auto; padding: 26px 26px 24px; scrollbar-width: thin; }
.lform h1 { margin: 0; }
.lform .sub { margin: 10px 0 6px; line-height: 1.45; }
.lform fieldset { border: 0; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.lform legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 13px; color: var(--mute); }
.lform fieldset > :not(legend) { clear: both; } /* a grid beside a floated legend gets squeezed past the edge */
.lform label { display: block; margin-top: 10px; }
.lform label > span:first-child { display: block; font-size: 13px; color: var(--mute); margin-bottom: 5px; }
.lform input:not([type=range]):not([type=file]) { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; outline: none; }
.lform input:not([type=range]):not([type=file]):focus { border-color: rgba(233,238,245,.45); }
.lform input::placeholder { color: rgba(125,138,156,.8); }
.coinrow { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.coinrow .names label:first-child { margin-top: 0; }
.pic { position: relative; margin: 0 !important; width: 112px; height: 112px; border-radius: 18px; border: 1px dashed rgba(233,238,245,.3); display: grid !important; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.03) center / cover no-repeat; text-align: center; font-size: 13px; color: var(--mute); overflow: hidden; }
.pic:hover { border-color: rgba(233,238,245,.6); color: var(--ink); }
.pic.has { border-style: solid; } .pic.has span { opacity: 0; }
.pic input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lform .q { margin: 4px 0 8px; font-size: 13px; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: inherit; font-size: 14px; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.chips button:hover { color: var(--ink); }
.chips button[aria-pressed="true"] { color: #000; background: var(--ink); border-color: var(--ink); }
.dial { margin-top: 18px !important; }
.dial .q { display: block; margin-bottom: 4px; }
.dial input[type=range] { width: 100%; appearance: none; background: transparent; height: 26px; margin: 0; cursor: pointer; }
.dial input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(233,238,245,.22); border-radius: 2px; }
.dial input[type=range]::-moz-range-track { height: 2px; background: rgba(233,238,245,.22); border-radius: 2px; }
.dial input[type=range]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--ink); border: 3px solid #03060c; box-shadow: 0 0 0 1px var(--ink); }
.dial input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid #03060c; box-shadow: 0 0 0 1px var(--ink); }
.dial .ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.dial .say { display: block; margin-top: 4px; font-family: var(--voice); font-size: 16px; color: var(--ink); }
.next { margin: 0; padding: 0; list-style: none; font-family: var(--voice); font-size: 16px; line-height: 1.5; color: rgba(233,238,245,.86); }
.next li + li { margin-top: 6px; }
.next b { font-weight: 500; color: var(--ink); }
.solid.big { display: block; width: 100%; margin-top: 22px; border: 0; font-family: var(--display); cursor: pointer; padding: 16px 26px; }
.solid.big:disabled { background: rgba(233,238,245,.18); color: rgba(233,238,245,.55); cursor: not-allowed; }
.lform .note { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--mute); transition: color .3s; }
.lform .note.flash { color: var(--yes); }
.lform .err { margin: 14px 0 0; text-align: center; font-size: 13.5px; line-height: 1.45; color: #ff9b8a; }
.lform details.more { margin-top: 14px; }
.lform details.more summary { cursor: pointer; font-size: 13px; color: var(--mute); list-style: none; }
.lform details.more summary::-webkit-details-marker { display: none; }
.lform details.more summary::after { content: ' +'; }
.lform details.more[open] summary::after { content: ' ‘2'; }
.lform details.more summary:hover { color: var(--ink); }
.preview { position: fixed; z-index: 4; right: var(--gut); bottom: 28px; width: min(380px, calc(100vw - 2 * var(--gut))); padding: 22px 24px 18px;
  background: linear-gradient(180deg, rgba(4, 7, 14, 0.88), rgba(2, 3, 8, 0.94)); border: 1px solid var(--line); border-radius: 22px; opacity: 0; transition: opacity .8s ease .5s; }
body.arrived .preview { opacity: 1; }
.preview .k { margin: 0; font-size: 13px; color: var(--mute); }
.preview .bet { margin: 6px 0 0; font-size: 46px; font-weight: 250; line-height: 1; font-variation-settings: 'wdth' 62; font-variant-numeric: tabular-nums; }
.preview .bet .yes { color: var(--yes); } .preview .bet .no { color: var(--no); }
.preview h2 { margin: 10px 0 0; font-family: var(--voice); font-weight: 400; font-size: 21px; line-height: 1.25; }
.preview .facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 26px; margin: 16px 0 0; }
.preview .facts dd { font-size: 16px; }
@media (max-width: 899px) {
  .lform { height: 58vh; }
  .preview { top: 70px; bottom: auto; left: 12px; right: 12px; width: auto; padding: 14px 16px 12px; border-radius: 18px; }
  .preview .bet { font-size: 32px; } .preview h2 { font-size: 17px; margin-top: 6px; } .preview .facts { margin-top: 10px; gap: 2px 18px; } .preview .facts dd { font-size: 14px; }
}

/* ---- /oracles: the table on the left, the live feed on the right ---- */
.boardpage .panel { overflow-y: auto; padding: 26px 12px 18px; }
.boardpage .panel h1, .boardpage .panel .sub { margin-left: 14px; margin-right: 14px; }
.ranks, .bets, .feed ol { list-style: none; margin: 0; padding: 0; }
.ranks button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.ranks button:hover, .ranks button:focus-visible { background: rgba(255,255,255,.05); }
.ranks button[aria-current] { background: rgba(255,177,61,.1); }
.ranks .n { font-size: 26px; font-weight: 250; font-variation-settings: 'wdth' 60; color: var(--mute); font-variant-numeric: tabular-nums; }
.ranks .nm { font-size: 17px; }
.ranks .nm i { font-style: normal; font-size: 11.5px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; }
.ranks small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.ranks .r { text-align: right; font-size: 24px; font-weight: 300; font-variation-settings: 'wdth' 64; font-variant-numeric: tabular-nums; }
.ranks .r small { font-size: 12.5px; font-variation-settings: 'wdth' 100; }
#one { padding: 0 14px; }
#one .back { font: inherit; font-size: 14px; color: var(--mute); background: none; border: 0; padding: 4px 0; cursor: pointer; }
#one .back:hover { color: var(--ink); }
#one .back::before { content: ''; display: inline-block; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 8px 1px 2px; }
#one h2 { margin: 8px 0 0; font-weight: 300; font-size: 44px; line-height: 0.95; font-variation-settings: 'wdth' 62; }
#one .who { margin: 10px 0 0; font-family: var(--voice); font-size: 16.5px; line-height: 1.45; color: rgba(233,238,245,.86); }
#one h3 { margin: 22px 0 6px; font-size: 13px; font-weight: 500; color: var(--mute); }
.bets li, .feed li { padding: 12px 0; border-top: 1px solid var(--line); }
.bets .lead, .feed .lead { margin: 0; font-size: 15px; }
.lead .yes { color: var(--yes); } .lead .no { color: var(--no); }
.lead .st { margin-left: 8px; font-size: 12.5px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.lead .st.won { color: var(--ink); border-color: rgba(233,238,245,.5); }
.bets .q, .feed .q { margin: 4px 0 0; font-family: var(--voice); font-size: 16px; line-height: 1.35; }
.bets .why, .feed .why { margin: 6px 0 0; font-family: var(--voice); font-style: italic; font-size: 15px; line-height: 1.45; color: rgba(233,238,245,.72); }
.feed .t { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); }
.feed { position: fixed; z-index: 4; right: var(--gut); top: 84px; bottom: 24px; width: min(360px, 28vw); overflow-y: auto; padding: 22px 22px 10px;
  background: rgba(2, 4, 9, 0.84); border: 1px solid var(--line); border-radius: 22px; opacity: 0; transition: opacity .8s ease .3s; scrollbar-width: thin; }
body.arrived .feed { opacity: 1; }
.feed .chip { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.feed .chip b { font-weight: 500; color: var(--ink); }
.feed h2 { margin: 0 0 4px; font-weight: 300; font-size: 34px; font-variation-settings: 'wdth' 62; }
.feed .none, .bets .none { color: var(--mute); font-family: var(--voice); border: 0; }
body.globe.focused .feed { opacity: 0; pointer-events: none; }
@media (max-width: 1100px) { .feed { display: none; } }

/* ---- the big market box ---- */
.detail { width: min(620px, 46vw); padding: 22px 30px 30px; }
.detail .dhead h2 { font-size: 34px; line-height: 1.12; margin-top: 10px; }
.dodds { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 0 34px; margin-top: 20px; }
.dodds .side .v { font-size: 84px; }
.dodds .solid { justify-self: end; align-self: center; }
.detail .bar { margin-top: 14px; }
.detail .chart { margin-top: 26px; }
.detail .dstats { grid-template-columns: repeat(3, 1fr); gap: 16px 20px; margin-top: 22px; }
.detail .bets li { padding: 12px 0; border-top: 1px solid var(--line); }
.detail .bets .none { border: 0; padding: 4px 0; color: var(--mute); font-family: var(--voice); }
@media (max-width: 1180px) { .dodds .side .v { font-size: 64px; } .detail .dstats { grid-template-columns: repeat(2, 1fr); } }

/* ---- /token: $ORACLE ---- */
main.tk { pointer-events: auto; padding: 0 var(--gut) 80px; max-width: 640px; }
.tk-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
/* the giant name keeps Anybody's own dollar sign: at this size its stubs read clearly */
.tk-hero h1 { font-family: 'Anybody', sans-serif; font-weight: 250; font-size: clamp(90px, 15vw, 230px); line-height: 0.82; letter-spacing: -0.02em; font-variation-settings: 'wdth' 56; margin: 0; }
.tk-hero .lede { max-width: 26em; }
.tk-hero .ctas .solid { border: 0; font-family: var(--display); cursor: pointer; }
.tk-hero .ctas .solid:disabled { background: rgba(233,238,245,.16); color: rgba(233,238,245,.7); cursor: default; }
.tk-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 36px; margin: 40px 0 0; }
.tk-facts dt { font-size: 13px; color: var(--mute); } .tk-facts dd { margin: 4px 0 0; font-size: 22px; font-weight: 300; font-variation-settings: 'wdth' 70; font-variant-numeric: tabular-nums; }
.tk-sec { margin-top: 30px; padding: 28px 30px; background: rgba(2, 4, 9, 0.84); border: 1px solid var(--line); border-radius: 22px; }
.tk-sec h2 { margin: 0 0 10px; font-weight: 300; font-size: 40px; font-variation-settings: 'wdth' 62; }
.tk-sec > p { margin: 0; font-family: var(--voice); font-size: 18px; line-height: 1.5; color: rgba(233,238,245,.86); }
.tk-sec a { color: var(--ink); }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--mute); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 10px 0 0; font-family: var(--voice); font-size: 17px; line-height: 1.55; color: rgba(233,238,245,.82); max-width: 34em; }
.tokenpage .tk-hero > *, .tokenpage .tk-sec { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.tokenpage.arrived .tk-hero > *, .tokenpage.arrived .tk-sec { opacity: 1; transform: none; }
@media (max-width: 640px) { .tk-facts { grid-template-columns: repeat(2, auto); } }

/* ---- /coin/<address> ---- */
.coinpage .cpanel { overflow-y: auto; padding: 26px 26px 20px; }
.chead { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; }
.cimg { width: 76px; height: 76px; border-radius: 18px; background: rgba(255,255,255,.06) center / cover no-repeat; display: grid; place-items: center; font-size: 34px; font-weight: 300; font-variation-settings: 'wdth' 62; color: var(--mute); }
.coinpage h1 { margin: 0; font-size: 46px; line-height: 0.95; }
.csym { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.cline { margin: 16px 0 0; font-family: var(--voice); font-size: 17px; line-height: 1.45; color: rgba(233,238,245,.86); }
.cline:empty { display: none; }
.coinpage .ctas { margin-top: 20px; }
.coinpage .ctas .quiet { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 3px; cursor: pointer; }
.coinpage .dstats { grid-template-columns: 1fr 1fr; margin-top: 22px; }
.coinpage h3 { margin: 22px 0 6px; font-size: 13px; font-weight: 500; color: var(--mute); }
.coinpage .who { margin: 0; font-family: var(--voice); font-size: 16.5px; line-height: 1.45; }
.coinpage .bets .t, .detail .bets .t { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); }
.coinpage .ctas { flex-wrap: wrap; gap: 14px 22px; }
.coinpage .ctas .solid, .coinpage .ctas .quiet { white-space: nowrap; }

/* the link preview capture (?og): just the planet, the headline and its line */
body.og .top, body.og .ctas, body.og .live, body.og #labels { display: none !important; }