@font-face {
  font-family: "IBM Plex Mono";
  src: url('/assets/fonts/mono.woff2') format('woff2');
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #000; --panel: #0d0d0d; --ink: #eee; --accent: #fff;
  --muted: #b3b3b3; --nav-ink: #f3f3f3; --line: #555; --rule: #333;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Sarasa Mono SC", "D2Coding", monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #fafafa; --panel: #fff; --ink: #191919; --accent: #080808;
  --muted: #555; --nav-ink: #161616; --line: #898989; --rule: #c7c7c7;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 14px/1.65 var(--mono); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--paper); }
[hidden] { display: none !important; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, strong, b { font-weight: 500; }
h1, h2, h3 { line-height: 1.23; }
h1, h2 { letter-spacing: -.06em; }
img { max-width: 100%; }
.wrap { width: min(1310px, calc(100% - clamp(40px, 9.6vw, 144px))); margin-inline: auto; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; z-index: 3; top: 8px; left: 8px; background: var(--accent); color: var(--paper); padding: 8px 14px; }
.top, footer { background: var(--paper); }
.top { border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; min-height: 74px; gap: clamp(20px, 3.8vw, 64px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); }
.brand svg { width: 32px; height: 28px; }
.top .brand { min-width: 48px; min-height: 44px; }
.top .brand span { display: none; }
.nav nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav nav a { color: var(--nav-ink); padding: 8px 0; font-size: 12px; white-space: nowrap; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.controls { display: flex; align-items: center; gap: 16px; margin-left: auto; }
#theme { display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 9px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); border-radius: 2px; font-size: 11px; }
#theme .dark-tag, [data-theme="light"] #theme .light-tag { background: var(--accent); color: var(--paper); padding: 1px 3px; }
[data-theme="light"] #theme .dark-tag, #theme .light-tag { background: transparent; color: var(--muted); padding: 1px 3px; }
.nav nav { gap: 6px; }
.nav nav a, .footlink, .docnav a { border: 1px solid var(--line); border-radius: 2px; padding: 7px 11px; }
.nav nav a:hover, .footlink:hover, .docnav a:hover { text-decoration: none; border-color: var(--accent); }
.nav nav a[aria-current], .footlink[aria-current], .nav nav a:active, .footlink:active { color: var(--paper); background: var(--accent); border-color: var(--accent); text-decoration: none; }
.nav nav a[aria-current]:hover { color: var(--paper); }
.lang { padding-left: 12px; border-left: 1px solid var(--rule); }
.lang select { background: var(--paper); color: var(--nav-ink); border: 0; padding: 4px 3px; font-size: 12px; min-height: 32px; }
.mono, .k, .phasecap, .hero-status, .tier { font-size: 11px; letter-spacing: .075em; }
.k, .hero-status { color: var(--accent); }
.k { text-transform: uppercase; }
.hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(38px, 7vw, 118px); align-items: center; padding-block: clamp(45px, 5vw, 82px); }
.hero-copy { min-width: 0; }
.hero-status { display: flex; align-items: center; gap: 10px; color: var(--muted); text-transform: uppercase; }
.status-dot, .phase1 .stat::before { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin: clamp(24px, 3vw, 42px) 0 18px; color: var(--accent); font-size: clamp(68px, 8.15vw, 118px); line-height: .99; font-weight: 400; letter-spacing: -.09em; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent); }
.prompt-mark { display: block; font-size: .34em; letter-spacing: -.11em; line-height: 1; margin-bottom: .36em; }
.hero .intro { color: var(--ink); font-size: clamp(15px, 1.32vw, 19px); line-height: 1.65; max-width: 40ch; }
.buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero .buttons { margin-top: 28px; }
.btn, .tiny, .arrows button, .dialogtop button {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); border-radius: 2px; line-height: 1.35;
}
.btn { min-height: 42px; padding: 10px 17px; font-size: 13px; }
.btn.primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn.primary:hover { background: var(--nav-ink); border-color: var(--nav-ink); }
.ghost:hover, .tiny:hover, .dialogtop button:hover, .arrows button:hover { color: var(--accent); border-color: var(--accent); }
.scope-strip { width: min(260px, 65%); height: 30px; margin-top: clamp(25px, 3.1vw, 46px); position: relative; display: flex; align-items: center; color: var(--line); }
.scope-strip::before { content: ""; position: absolute; inset: 1px 0; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size: 18px 100%; mask-image: linear-gradient(transparent 45%, black 46%, black 55%, transparent 56%); }
.scope-strip svg { width: 100%; height: 30px; position: relative; }
.hero-art { justify-self: end; width: 100%; max-width: 435px; padding: 9px 9px 0; border: 1px solid var(--line); background: var(--paper); position: relative; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; width: 17px; height: 17px; pointer-events: none; color: var(--accent); }
.hero-art::before { top: -1px; left: -1px; border-left: 1px solid; border-top: 1px solid; }
.hero-art::after { bottom: -1px; right: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.artframe img, .card img, .mintposter img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.hero-art figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding-inline: 4px; }
.hero-art figcaption > div:first-child { display: grid; gap: 1px; }
.hero-art figcaption .mono, .cardinfo .mono { color: var(--muted); font-size: 10px; }
.hero-art figcaption a { color: var(--ink); font-size: 12px; }
.hero-art figcaption a:hover, .inline:hover, .foot a:hover, .docnav a:hover { color: var(--accent); }
.arrows { display: flex; gap: 5px; }
.arrows button, .dialogtop button, .tiny { font-size: 12px; padding: 6px 10px; }
.roadband { border-block: 1px solid var(--rule); padding-block: clamp(28px, 3vw, 44px); }
.sectionhead, .sectitle, .dialogtop { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.sectionhead { margin-bottom: 19px; }
.sectionhead h2 { font-size: clamp(20px, 2.25vw, 32px); color: var(--ink); }
.inline { color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.inline span { display: inline-block; margin-left: 4px; }
.phasegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.phasecard, .card, .surface, .featurepanel, .registry, .skillhow { background: var(--paper); border: 1px solid var(--line); }
.phasecard { display: block; padding: clamp(16px, 1.65vw, 25px); }
.phasecard:hover, .card:hover { border-color: var(--accent); }
.phasecap { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phasecap .mono { color: var(--muted); font-size: 10px; }
.stat { color: var(--muted); letter-spacing: 0; font-size: 11px; }
.phase1 .stat { color: var(--accent); }
.phase1 .stat::before { content: ""; margin-right: 5px; }
.phasecard h3 { display: flex; align-items: baseline; justify-content: space-between; color: var(--accent); margin: 24px 0 7px; font-size: clamp(18px, 1.65vw, 24px); letter-spacing: -.05em; }
.phasecard h3 span { color: var(--muted); font-size: 14px; }
.phasecard p, .surface p, .skillhow p, .prose p { color: var(--muted); }
.phasecard p { font-size: 12px; }
.selected { padding-block: clamp(32px, 4vw, 64px); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.card { display: flex; flex-direction: column; min-width: 0; }
.cardinfo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.cardinfo h3 { font-size: 17px; color: var(--ink); margin-top: 3px; letter-spacing: -.04em; }
.tier { color: var(--muted); font-size: 10px; letter-spacing: .02em; }
footer { border-top: 1px solid var(--rule); }
.foot { display: flex; align-items: center; gap: 28px; min-height: 77px; }
.foot .brand { font-size: 15px; }
.foot .brand svg { width: 22px; }
.foot > div { display: flex; gap: 20px; }
.footlink, .foot > span { color: var(--muted); font-size: 11px; }
.foot > span { margin-left: auto; }
.pagebody { padding-bottom: clamp(35px, 5vw, 72px); }
.subhead { padding-block: clamp(34px, 4.4vw, 65px) 26px; max-width: 900px; }
.subhead h1 { font-size: clamp(39px, 5vw, 76px); font-weight: 400; color: var(--accent); margin-bottom: 13px; }
.lead { max-width: 74ch; color: var(--muted); }
.duo, .mintlayout, .doclayout, .detail-layout { display: grid; align-items: start; gap: clamp(15px, 2.15vw, 32px); }
.duo, .detail-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widefirst, .mintlayout { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.mintlayout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.surface, .featurepanel, .registry, .skillhow { padding: clamp(18px, 2.2vw, 30px); overflow-wrap: anywhere; }
.surface h2, .skillhow h2, .registry h3, .prose h2 { color: var(--ink); font-size: clamp(19px, 1.65vw, 24px); letter-spacing: -.05em; }
.surface p, .prose p, .skillhow p { margin-top: 10px; }
.surface label, .filters label { display: block; font-size: 12px; color: var(--muted); }
input:not([type=range]), select, textarea { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 2px; padding: 10px 12px; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .82; }
input:not([type=range]):focus, textarea:focus, select:focus { border-color: var(--accent); }
.surface form { margin-top: 14px; }
.inputrow { display: flex; gap: 8px; margin-top: 6px; }
.inputrow input { flex: 1; min-width: 0; }
.surface output, .result { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; white-space: pre-line; }
.result:empty { display: none; }
.result a, .registry a, .prose code, #contract-info a, .spec dd a { color: var(--accent); overflow-wrap: anywhere; }
.result a:hover, .registry a:hover { text-decoration: underline; }
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding-block: 15px; border-block: 1px solid var(--rule); margin-bottom: 21px; }
.filters input, .filters select { display: block; margin-top: 4px; }
.filters output { margin-left: auto; align-self: center; color: var(--muted); font-size: 12px; }
.empty { grid-column: 1/-1; color: var(--muted); padding-block: 30px; }
dialog { width: min(780px, 94vw); max-height: 92svh; overflow: auto; background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: 20px; }
dialog::backdrop { background: rgb(0 0 0 / .85); }
.dialogtop { margin-bottom: 15px; }
.detail-layout img { width: 100%; }
.detail-layout h2 { color: var(--accent); font-size: 26px; margin: 8px 0 14px; }
.detail-layout .btn { margin-top: 18px; }
.trait { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.trait strong { color: var(--ink); }
.mintposter { position: sticky; top: 20px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.minttools { display: grid; gap: 14px; }
.mintstats { display: flex; gap: 16px 32px; flex-wrap: wrap; margin: 15px 0; }
.surface .sale-status { color: var(--accent); }
.phase { width: 100%; border-collapse: collapse; font-size: 12px; }
.phase td { padding: 9px 6px; border-top: 1px solid var(--rule); vertical-align: top; white-space: pre-line; }
.phase td:first-child { padding-left: 0; color: var(--accent); }
#contract-info { font-size: 12px; overflow-wrap: anywhere; }
#local-result { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; font: 12px/1.6 var(--mono); }
.promptbox blockquote { border-left: 2px solid var(--line); margin: 18px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.8; }
.skillhow ol { padding-left: 24px; }
.skillhow li { padding-block: 8px; border-bottom: 1px solid var(--rule); }
.skillhow li::marker { color: var(--accent); }
.querybox { max-width: 900px; }
.recordset { padding-top: 32px; }
.recordset > p { color: var(--muted); }
.recordset .sectionhead { margin-bottom: 10px; }
.indexrow { display: grid; grid-template-columns: 135px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.indexrow :is(small, .mono) { color: var(--muted); font-size: 11px; }
a.indexrow:hover, .eventrow a:hover { color: var(--accent); }
.eventrow { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding: 7px 0; }
#older-events { margin-top: 10px; }
.spec { margin: 14px 0; }
.spec > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--rule); padding: 10px 0; }
.spec dt { color: var(--muted); font-size: 12px; }
.spec dd { text-align: right; }
.tokenart { display: grid; gap: 14px; }
.tokenart .k { color: var(--muted); }
.tokenart strong { color: var(--accent); font-size: 21px; }
.dial { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 9px auto; border: 1px solid var(--rule); border-radius: 50%; }
.dial::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--line); border-radius: 50%; }
.dial i { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 50%; position: relative; }
.dial i::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; height: 24px; background: var(--accent); transform-origin: bottom; transform: rotate(40deg); }
.registry h3 { margin: 12px 0; }
.brief label { margin: 12px 0; }
.brief input, .brief textarea { display: block; width: 100%; margin-top: 4px; resize: vertical; }
.draft { padding: 14px 0; border-top: 1px solid var(--rule); }
.draft:first-child { margin-top: 16px; }
.draft p { white-space: pre-wrap; }
.draft .tiny { margin-top: 7px; }
.doclayout { grid-template-columns: 190px minmax(0, 1fr); }
.docnav { position: sticky; top: 20px; display: grid; gap: 10px; padding: 4px 14px; border-left: 2px solid var(--line); font-size: 13px; color: var(--muted); }
.prose { max-width: 78ch; }
.prose section { border-top: 1px solid var(--rule); padding-block: 18px; }
.prose .inline { margin-top: 8px; display: inline-block; }
.copy-feedback { position: fixed; bottom: 16px; right: 16px; z-index: 10; border: 1px solid var(--line); color: var(--accent); background: var(--paper); padding: 8px 14px; }
@media (max-width: 940px) {
  .nav { flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 8px 0; }
  .nav nav { order: 3; width: 100%; overflow-x: auto; gap: 20px; }
  .nav nav a { padding-block: 8px 11px; }
  .hero { gap: 25px; grid-template-columns: 1.13fr .87fr; }
  .hero h1 { font-size: clamp(60px, 8.3vw, 83px); }
  .phasegrid { gap: 8px; }
  .cardinfo { flex-wrap: wrap; gap: 2px 8px; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px); }
  .nav nav { gap: 18px; }
  .controls { gap: 11px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 32px; }
  .hero h1 { font-size: clamp(51px, 13vw, 82px); margin-block: 20px 12px; }
  .hero .buttons { margin-top: 17px; }
  .scope-strip { display: none; }
  .hero-art { justify-self: center; max-width: 405px; }
  .phasegrid, .duo, .mintlayout, .doclayout, .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .phasecard h3 { margin-top: 12px; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .selected .cards .card:last-child { display: none; }
  .cardinfo { padding: 9px; }
  .cardinfo h3 { font-size: 15px; }
  .foot { flex-wrap: wrap; gap: 10px 16px; padding-block: 16px; }
  .foot > span { margin-left: 0; }
  .mintposter { position: static; width: min(100%, 380px); margin-inline: auto; }
  .phase td { font-size: 11px; }
  .indexrow { grid-template-columns: minmax(0,1fr) auto auto; gap: 4px 10px; }
  .indexrow .mono { grid-column: 1 / -1; }
  .docnav { position: static; display: flex; flex-wrap: wrap; }
  .detail-layout img { max-width: 230px; }
  .filters output { margin-left: 0; }
  .inputrow .btn { white-space: nowrap; }
}

.hero-art { padding: 0; }
.hero-art img, .mintposter img { width: 100%; height: auto; display: block; aspect-ratio: auto; }
@media(max-width:940px){.nav nav{gap:6px;padding:5px 0}.nav nav a{padding:6px 9px}.foot>div{flex-wrap:wrap;gap:6px}}
.market{max-width:1200px}.marketmast,.marketlinks,.market-release,.market-nav,.marketbar,.bidrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.marketmast,.market-release{justify-content:space-between}.marketmast{border:1px solid var(--line);padding:22px 24px;background:var(--panel)}
.marketmast h2{font-size:clamp(23px,3vw,39px);margin-top:6px}.marketstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-top:0}
.marketstats>div{padding:16px 22px;border-right:1px solid var(--rule)}.marketstats>div:last-child{border:0}
.marketstats dt,.marketbar label,.market-foot,.marketempty,.market-release,.bidrow small{color:var(--muted);font-size:12px}.marketstats dd{font-size:18px;overflow-wrap:anywhere}
.market-release{padding-block:13px}.market-nav{gap:6px;padding-block:18px;border-top:1px solid var(--rule)}
.market-nav button{border:1px solid var(--line);background:var(--paper);padding:7px 12px;color:var(--ink);border-radius:2px}
.market-nav button[aria-pressed=true]{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.marketbar{align-items:end;padding:0 0 18px}.marketbar label:first-child{flex:1}.marketbar input,.marketbar select,.orderform input,.orderform select{width:100%;display:block;margin-top:4px}
.marketempty{border:1px solid var(--rule);padding:32px 22px;background:var(--panel)}.market-foot{border-top:1px solid var(--rule);padding-block:14px;margin-top:20px}
.marketgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:12px}.market-card{position:relative;border:1px solid var(--line);min-width:0}
.market-card a{display:block;padding:10px}.market-card h3{font-size:16px;margin-top:12px}.market-card p{font-size:12px;color:var(--muted)}.market-card>button{position:absolute;right:16px;top:16px}
.token-art{aspect-ratio:1;display:grid;place-items:center;background:var(--panel);border:1px solid var(--rule);font-size:24px}.token-art img{display:block;width:100%;height:100%;object-fit:contain}
.trade-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:12px}
#market-pager:not(:empty),#market-balance:not([hidden]){margin-top:15px}#item-dialog{width:min(650px,94vw)}#item-content p{overflow-wrap:anywhere;font-size:13px}
.item-info .token-art{width:min(230px,100%);margin-bottom:12px}.item-info small,.item-info a{display:block;font-size:12px}.item-info .traits{display:flex;gap:5px;flex-wrap:wrap;margin-block:8px}.traits span{border:1px solid var(--rule);padding:2px 5px;font-size:11px}
.order-actions,.orderform,.bidbook{display:grid;gap:10px;margin-top:15px}.order-actions>.btn,.order-actions>.tiny,.bidbook>.tiny{justify-self:start}.orderform{grid-template-columns:1fr 1fr;align-items:end}.orderform .btn{grid-column:1/-1;justify-self:start}.orderform label{font-size:12px;color:var(--muted)}
.bidbook{border-top:1px solid var(--rule);padding-top:14px}.bidrow{padding-block:8px;border-bottom:1px solid var(--rule)}.result{overflow-wrap:anywhere}.footlink[aria-current]:hover{color:var(--paper)}
@media(max-width:680px){.marketstats{grid-template-columns:repeat(2,minmax(0,1fr))}.marketstats>div{padding:12px;border-bottom:1px solid var(--rule)}.marketbar label:first-child{flex-basis:100%}.marketbar select{font-size:12px}.marketstats dd{font-size:14px}}

.top .brand { justify-content:center; min-width:42px; min-height:34px; border:1px solid var(--line); border-radius:2px }
.top .brand[aria-current], .top .brand:hover { border-color:var(--accent) }
.top .brand:active { background:var(--accent); color:var(--paper) }