:root{
  --paper:#d9d4c3;
  --paper-2:#cfc9b6;
  --ink:#1b1913;
  --carbon:#414f60;
  --stamp:#a2201c;
  --wear:#a89e85;
  --cash:#2c5740;
  --rule:#8d8570;
  --display:"Ultra",Georgia,serif;
  --mono:"Courier Prime","Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(27,25,19,.035) 0 1px,transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}

.form{
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 rgba(27,25,19,.22);
  margin:0 0 34px;
  position:relative;
}
.form::before,.form::after{
  content:"";position:absolute;left:0;right:0;height:7px;
  background:repeating-radial-gradient(circle at 5px 4px,var(--paper-2) 0 3.4px,transparent 3.6px 10px);
  background-size:10px 8px;
}
.form::before{top:-1px}
.form::after{bottom:-1px;transform:scaleY(-1)}
.form-head{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  border-bottom:1px solid var(--ink);
  padding:16px 22px 12px;
}
.form-no{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);font-weight:700;
}
.form-title{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--carbon)}
.form-body{padding:24px 22px 30px}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(38px,7.6vw,86px);line-height:.94;text-transform:uppercase}
h2{font-size:clamp(24px,3.6vw,40px);line-height:1.02;text-transform:uppercase;margin-bottom:14px}
h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
p{margin:0 0 14px;max-width:62ch}
.lede{font-size:17px}
.dim{color:var(--carbon)}
.tiny{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon)}

.masthead{padding:22px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.brand span{color:var(--stamp)}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--carbon);text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--stamp)}

.hero{padding:30px 0 6px}
.hero h1{margin-bottom:18px}
.hero .lede{max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:34px;align-items:end}
.stat-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;border-top:1px solid var(--rule);padding-top:14px}
.stat b{display:block;font-family:var(--display);font-size:26px;line-height:1}
.stat span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon)}

.field{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px dotted var(--rule)}
.field .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon);white-space:nowrap}
.field .fill{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-3px)}
.field .v{font-weight:700;white-space:nowrap}

.ticket{position:relative;background:var(--paper);border:1px solid var(--ink);padding:18px;overflow:hidden}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.serial{font-size:11px;letter-spacing:.18em;color:var(--carbon)}
.sprite-box{display:flex;justify-content:center;padding:8px 0 12px;background:
  repeating-linear-gradient(45deg,rgba(65,79,96,.05) 0 6px,transparent 6px 12px)}
.sprite-box svg{width:168px;height:168px;image-rendering:pixelated}
.meter{height:14px;border:1px solid var(--ink);background:var(--paper-2);position:relative;overflow:hidden}
.meter i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--carbon) 0 3px,#5b6a7d 3px 6px);width:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.meter.yield i{background:repeating-linear-gradient(90deg,var(--cash) 0 3px,#3d7053 3px 6px)}
.meter-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon);margin:12px 0 5px}

.stamp{
  position:absolute;top:34%;left:50%;
  transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);
  border:4px double var(--stamp);color:var(--stamp);
  font-family:var(--display);font-size:26px;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 16px;opacity:0;pointer-events:none;text-align:center;line-height:1;
  mix-blend-mode:multiply;
}
.stamp small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;margin-top:5px}
.stamp.hit{animation:slam .6s cubic-bezier(.15,1.4,.4,1) forwards}
@keyframes slam{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-22deg) scale(2.9)}
  55%{opacity:.95;transform:translate(-50%,-50%) rotate(-13deg) scale(.94)}
  70%{transform:translate(-50%,-50%) rotate(-13deg) scale(1.04)}
  100%{opacity:.9;transform:translate(-50%,-50%) rotate(-13deg) scale(1)}
}
.shake{animation:shk .34s ease-out}
@keyframes shk{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}
  45%{transform:translate(3px,-2px)}
  70%{transform:translate(-2px,-1px)}
}

.btn{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:12px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--wear);
}
.btn:hover{background:#2a2720}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--wear)}
.btn:disabled{background:transparent;color:var(--wear);border-color:var(--wear);box-shadow:none;cursor:not-allowed}
.btn.danger{background:var(--stamp);border-color:var(--stamp)}
.btn.danger:hover{background:#8d1b17}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:rgba(27,25,19,.07)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink)}
.stage{padding:16px 14px;border-right:1px solid var(--ink);text-align:center}
.stage:last-child{border-right:0}
.stage svg{width:100%;max-width:110px;height:auto;image-rendering:pixelated}
.stage .nm{font-family:var(--display);font-size:16px;text-transform:uppercase;margin-top:10px}
.stage .yl{font-size:11px;letter-spacing:.14em;color:var(--carbon)}
.stage .bar{height:6px;background:var(--paper-2);border:1px solid var(--wear);margin-top:9px}
.stage .bar i{display:block;height:100%;background:var(--cash)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink)}
.two>div{padding:22px;border-right:1px solid var(--ink)}
.two>div:last-child{border-right:0}

.req{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px dotted var(--rule)}
.req .box{width:18px;height:18px;border:1px solid var(--ink);flex:none;margin-top:2px;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1}
.req .box.on{background:var(--ink);color:var(--paper)}
.req p{margin:4px 0 0;font-size:13px}

.pool{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.pool .big{font-family:var(--display);font-size:clamp(34px,6vw,64px);line-height:.9}
.pool .big em{font-style:normal;color:var(--carbon)}

.rules{columns:2;column-gap:34px}
.rules .r{break-inside:avoid;margin-bottom:18px}

footer{padding:30px 0 60px;border-top:1px solid var(--ink);margin-top:10px}
.foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
code{font-size:12px;background:rgba(65,79,96,.12);padding:1px 5px}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .two>div{border-right:0;border-bottom:1px solid var(--ink)}
  .two>div:last-child{border-bottom:0}
  .stages{grid-template-columns:repeat(2,1fr)}
  .stage:nth-child(2){border-right:0}
  .stage:nth-child(1),.stage:nth-child(2){border-bottom:1px solid var(--ink)}
  .rules{columns:1}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .stamp.hit{opacity:.9;transform:translate(-50%,-50%) rotate(-13deg) scale(1)}
}

html{scroll-behavior:smooth}
a{color:var(--ink)}
.nav a{padding:7px 10px;border:1px solid transparent;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-color:var(--wear)}
.nav a[aria-current="page"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.masthead{border-bottom:1px solid var(--ink)}
.chainbar{display:flex;gap:18px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--rule);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon)}
.chainbar b{color:var(--stamp);font-weight:700}
.page-head{padding:34px 0 8px}
.page-head .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp);margin-bottom:12px}
.hero{padding:30px 0 6px}
.btn{text-decoration:none;display:inline-block}
.req .box{background:var(--ink);color:var(--paper)}
.terminal{border:1px solid var(--ink);background:#12161b;min-height:520px;display:flex;flex-direction:column}
.terminal-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.2em;text-transform:uppercase;flex-wrap:wrap}
.terminal-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--cash);display:inline-block;margin-right:7px;vertical-align:middle}
.terminal-frame{flex:1;position:relative;min-height:460px}
.terminal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.terminal-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;color:#c9c2ae;background:#12161b}
.terminal-fallback h3{color:#e6dfc9;font-size:20px}
.terminal-fallback p{color:#9b937f}
.terminal-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--wear)}
.terminal-foot div{padding:12px 14px;border-right:1px solid rgba(168,158,133,.4);color:#c9c2ae}
.terminal-foot div:last-child{border-right:0}
.terminal-foot b{display:block;font-family:var(--display);font-size:19px;color:#e6dfc9;line-height:1.1}
.terminal-foot span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8d8570}
.next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 34px;border-top:1px solid var(--rule)}
.next a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--carbon)}
.next a:hover{color:var(--stamp)}
@media(max-width:860px){
  .terminal-foot{grid-template-columns:1fr}
  .terminal-foot div{border-right:0;border-bottom:1px solid rgba(168,158,133,.4)}
  .pool{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.ticker{border-bottom:1px solid var(--rule);overflow:hidden;position:relative;background:var(--paper)}
.ticker-track{display:flex;gap:0;width:max-content;animation:marq 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:8px;padding:8px 20px;border-right:1px dotted var(--rule);white-space:nowrap;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tick b{color:var(--ink);font-weight:700}
.tick span{color:var(--carbon)}
.tick .tag{font-size:9px;letter-spacing:.18em;padding:2px 6px;border:1px solid var(--wear);color:var(--carbon)}
.tick .tag.burn{color:var(--stamp);border-color:var(--stamp)}
.tick .tag.pay{color:var(--cash);border-color:var(--cash)}

.rail{position:fixed;top:0;right:0;width:236px;height:100vh;border-left:1px solid var(--ink);background:var(--paper);padding:14px 12px;overflow:hidden;z-index:5;display:none}
.rail h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);margin:0 0 10px;font-family:var(--mono);font-weight:700}
.rail-feed{display:flex;flex-direction:column;gap:0}
.rail-item{padding:9px 0;border-bottom:1px dotted var(--rule);font-size:11px;line-height:1.35}
.rail-item .who{font-weight:700}
.rail-item .when{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--wear);margin-top:3px}
.rail-item.fresh{animation:slide .5s ease-out}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* The rail is a fixed column, so the page has to give up the width it covers. That
   padding used to sit on body and applied everywhere, while the column itself only
   exists on the front page: every other page lost 236px to a sidebar that was not
   there, went wider than the window, and stopped centring. Scoped to pages that
   actually carry one. */
@media(min-width:1360px){
  body.has-rail .rail{display:block}
  body.has-rail{padding-right:236px}
}

.wallet{display:flex;align-items:center;gap:10px}
.wallet-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:9px 13px;cursor:pointer}
.wallet-btn.on{background:transparent;color:var(--ink)}
.wallet-btn:hover{opacity:.85}
.wallet-note{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}

.phase{display:flex;gap:0;border:1px solid var(--ink);margin-bottom:26px}
.phase div{flex:1;padding:11px 10px;text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--wear);border-right:1px solid var(--ink)}
.phase div:last-child{border-right:0}
.phase div.done{color:var(--carbon)}
.phase div.now{background:var(--ink);color:var(--paper)}

.formrow{display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:6px 14px;margin-bottom:18px;max-width:480px}
.formrow label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon);white-space:nowrap}
.formrow input{font-family:var(--mono);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:5px 2px;width:100%}
.formrow input::placeholder{color:var(--wear)}
.formrow input:focus{outline:0;border-bottom-width:2px;background:rgba(65,79,96,.06)}
.formrow input:read-only{border-bottom-style:dotted;color:var(--carbon)}
.formrow .hint{grid-column:2;font-size:11px;color:var(--carbon);margin-top:-2px}
.msg{padding:11px 14px;border:1px solid var(--ink);margin:16px 0;font-size:13px;max-width:560px}
.msg.ok{border-color:var(--cash);color:var(--cash)}
.msg.err{border-color:var(--stamp);color:var(--stamp)}

.tickets{display:flex;gap:0;border:1px solid var(--ink);margin:18px 0}
.tickets div{flex:1;padding:14px;border-right:1px solid var(--ink)}
.tickets div:last-child{border-right:0}
.tickets b{display:block;font-family:var(--display);font-size:26px;line-height:1}
.tickets span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon)}
.tickets .off b{color:var(--wear)}

.plotwrap{border:1px solid var(--ink);background:var(--paper-2);padding:12px;overflow:auto}
.plotgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;min-width:480px}
.plot{aspect-ratio:1;background:var(--paper);border:1px solid rgba(141,133,112,.5);cursor:pointer;padding:0}
.plot:hover{border-color:var(--ink)}
.plot.taken{background:var(--carbon);border-color:var(--carbon);cursor:not-allowed}
.plot.mine{background:var(--stamp);border-color:var(--stamp)}
.plot.sel{background:var(--cash);border-color:var(--ink)}
.plot:disabled{cursor:not-allowed}
.plotmeta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon)}

.tokens{border:1px solid var(--ink)}
.token{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr auto;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.token:last-child{border-bottom:0}
.token .nm{font-weight:700}
.token .sym{font-size:11px;letter-spacing:.14em;color:var(--carbon)}
.token .num{font-family:var(--mono);font-size:13px}
.token .prog{height:8px;border:1px solid var(--ink);background:var(--paper-2)}
.token .prog i{display:block;height:100%;background:var(--cash)}
.token .grad{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cash)}
.thead{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr auto;gap:14px;padding:10px 16px;border-bottom:1px solid var(--ink);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon);background:var(--paper-2)}
@media(max-width:860px){
  .token,.thead{grid-template-columns:1.6fr 1fr auto}
  .token .num.mc,.thead span.mc{display:none}
  .tickets{flex-direction:column}
  .tickets div{border-right:0;border-bottom:1px solid var(--ink)}
  .phase div{font-size:9px;letter-spacing:.1em;padding:9px 4px}
}

.wallet-note{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);background:transparent;border:1px solid var(--stamp);padding:8px 10px;cursor:pointer}
.wallet-note:hover{background:var(--stamp);color:var(--paper)}
.wallet-note[hidden]{display:none}

.steps{counter-reset:s;max-width:520px}
.step{counter-increment:s;position:relative;padding:0 0 26px 46px;border-left:1px dotted var(--rule);margin-left:14px}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.step::before{content:counter(s);position:absolute;left:-15px;top:0;width:29px;height:29px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:700}
.step.done::before{background:var(--cash);border-color:var(--cash)}
/* Waiting on the wallet. Step 3 has no button of its own, so without a visible
   pending state it lit up at the same instant as step 4 and looked like nothing
   had happened in between. */
.step.doing::before{background:var(--stamp);border-color:var(--stamp);animation:stepPulse 1s ease-in-out infinite}
@keyframes stepPulse{0%,100%{opacity:1}50%{opacity:.45}}
.step.doing h3::after{content:" \2014 check your wallet";color:var(--stamp);font-size:11px;letter-spacing:.08em}
.step h3{margin:4px 0 8px}
.step p{font-size:12px;color:var(--carbon);margin-bottom:12px;max-width:42ch}
.step .formrow{margin-bottom:0}

.board-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.board-bar .search{flex:1;min-width:200px;display:grid;grid-template-columns:1fr;gap:0}
.board-bar input{font-family:var(--mono);font-size:14px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:9px 2px;width:100%}
.board-bar input:focus{outline:0;border-bottom-width:2px;background:rgba(65,79,96,.06)}
.board-bar input::placeholder{color:var(--wear)}

.create{display:grid;grid-template-columns:1.35fr .95fr;gap:0;border:1px solid var(--ink)}
.create>div{padding:24px;border-right:1px solid var(--ink)}
.create>div:last-child{border-right:0;background:var(--paper-2)}
.create h3{margin-bottom:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.formrow.wide{max-width:none}
/* Labels are nowrap in a 120px column, which is fine for "X handle" and not fine
   for "Link to your reply tagging two friends": the label ran straight over the
   input. Stack puts the label on its own line and lets it wrap. */
.formrow.stack{grid-template-columns:1fr}
.formrow.stack label{white-space:normal;line-height:1.5}
.formrow.stack .hint{grid-column:1}
.formrow textarea{grid-column:2;font-family:var(--mono);font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:9px 10px;width:100%;min-height:76px;resize:vertical}
.formrow textarea:focus{outline:0;background:rgba(65,79,96,.06)}
.formrow select{grid-column:2;font-family:var(--mono);font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:5px 2px;width:100%}

.preview{position:sticky;top:20px}
.preview .card{border:1px solid var(--ink);background:var(--paper);padding:16px}
.preview .logo{width:60px;height:60px;border:1px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;font-size:10px;letter-spacing:.14em;color:var(--wear);text-transform:uppercase;overflow:hidden;margin-bottom:12px}
.preview .logo img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.preview .pname{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1;word-break:break-word}
.preview .psym{font-size:11px;letter-spacing:.16em;color:var(--stamp);margin:5px 0 14px}
.preview .pdesc{font-size:12px;color:var(--carbon);margin-bottom:14px;min-height:32px}

.drop{border:1px dashed var(--ink);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;background:transparent}
.drop:hover{background:rgba(27,25,19,.05)}
.drop span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon)}
.drop input{display:none}

.acc{border-top:1px solid var(--rule);margin-top:8px}
.acc summary{cursor:pointer;padding:13px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:" +";color:var(--stamp)}
.acc[open] summary::after{content:" \2212";color:var(--stamp)}
.acc .inner{padding:4px 0 12px}

@media(max-width:860px){
  .create{grid-template-columns:1fr}
  .create>div{border-right:0;border-bottom:1px solid var(--ink)}
  .create>div:last-child{border-bottom:0}
  .pair{grid-template-columns:1fr}
  .preview{position:static}
  .formrow{grid-template-columns:1fr}
  .formrow .hint,.formrow textarea,.formrow select{grid-column:1}
}

.term{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--ink)}
.term>div{padding:20px;border-right:1px solid var(--ink)}
.term>div:last-child{border-right:0;background:var(--paper-2)}
.term h3{margin-bottom:12px}

.sidebtn{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.sidebtn button{flex:1;min-width:100px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:11px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.sidebtn button.on[data-side="buy"]{background:var(--cash);border-color:var(--cash);color:var(--paper)}
.sidebtn button.on[data-side="sell"]{background:var(--stamp);border-color:var(--stamp);color:var(--paper)}

.quote{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);margin-bottom:16px}
.quote b{font-family:var(--display);font-size:26px;line-height:1}
.quote span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon)}

.progress{margin:18px 0}
.progress .cap{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon);margin-bottom:6px}
.progress .track{height:16px;border:1px solid var(--ink);background:var(--paper)}
.progress .track i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--cash) 0 4px,#3d7053 4px 8px);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.progress .track i.done{background:repeating-linear-gradient(90deg,var(--stamp) 0 4px,#8d1b17 4px 8px)}

.board{border:1px solid var(--ink);margin-top:8px}
.board .row{display:grid;grid-template-columns:44px 1fr 1fr 90px;gap:12px;padding:11px 14px;border-bottom:1px solid var(--rule);align-items:center;font-size:13px}
.board .row:last-child{border-bottom:0}
.board .head{background:var(--paper-2);border-bottom:1px solid var(--ink);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon)}
.board .rank{font-family:var(--display);font-size:17px}
.board .row.gtd{background:rgba(44,87,64,.09)}
.board .row.fcfs{background:rgba(65,79,96,.06)}
.board .row.me{outline:2px solid var(--stamp);outline-offset:-2px}
.board .addr{font-family:var(--mono)}
.board .tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;white-space:nowrap}
.board .tag.g{color:var(--cash)}
.board .tag.f{color:var(--carbon)}
.board .num{font-family:var(--mono);text-align:right}

.term-note{font-size:11px;color:var(--carbon);margin-top:10px;line-height:1.5}
@media(max-width:860px){
  .term{grid-template-columns:1fr}
  .term>div{border-right:0;border-bottom:1px solid var(--ink)}
  .term>div:last-child{border-bottom:0}
  .board .row{grid-template-columns:34px 1fr 74px;gap:8px}
  .board .row .num.fills,.board .head .num.fills{display:none}
}

.assets{display:flex;gap:0;border:1px solid var(--ink);margin-bottom:16px}
.assets button{flex:1;padding:12px 8px;border:0;border-right:1px solid var(--ink);background:transparent;cursor:pointer;font-family:var(--mono);text-align:center}
.assets button:last-child{border-right:0}
.assets button .sym{display:block;font-family:var(--display);font-size:17px;text-transform:uppercase;line-height:1}
.assets button .px{display:block;font-size:11px;color:var(--carbon);margin-top:4px}
.assets button.on{background:var(--ink)}
.assets button.on .sym{color:var(--paper)}
.assets button.on .px{color:var(--wear)}

.chart{border:1px solid var(--ink);background:var(--paper);position:relative;margin-bottom:16px}
.chart canvas{display:block;width:100%;height:210px}
.chart .empty{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wear)}
.chart .legend{display:flex;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--rule);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon)}

.lev{display:flex;gap:0;border:1px solid var(--ink);margin-bottom:16px}
.lev button{flex:1;padding:10px;border:0;border-right:1px solid var(--ink);background:transparent;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em}
.lev button:last-child{border-right:0}
.lev button.on{background:var(--ink);color:var(--paper)}

.preview{border:1px solid var(--rule);padding:14px;margin:16px 0;background:var(--paper)}
.preview .field{padding:5px 0}
.preview .field:last-child{border-bottom:0}

.wallets{position:fixed;inset:0;background:rgba(27,25,19,.72);display:grid;place-items:center;z-index:40;padding:20px}
.wallets[hidden]{display:none}
.wallets .box{background:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 rgba(27,25,19,.35);max-width:380px;width:100%}
.wallets .box h3{padding:16px 18px;border-bottom:1px solid var(--ink);margin:0}
.wallets .list{padding:8px}
.wallets .list button{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--mono);font-size:14px;text-align:left}
.wallets .list button:hover{border-color:var(--ink);background:rgba(27,25,19,.05)}
.wallets .list img{width:26px;height:26px}
.wallets .none{padding:18px;font-size:13px;color:var(--carbon)}
.wallets .close{display:block;width:100%;padding:12px;border:0;border-top:1px solid var(--rule);background:transparent;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon)}

.panel{border:1px solid var(--ink);background:var(--paper);padding:16px;margin:16px 0}
.panel[hidden]{display:none}
.panel h4{font-family:var(--display);font-size:15px;text-transform:uppercase;margin:0 0 12px}
.panel .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.panel .row .formrow{flex:1;min-width:150px;margin-bottom:0}

.book{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);margin-bottom:16px;font-family:var(--mono);font-size:12px}
.book>div{padding:0}
.book .side{border-right:1px solid var(--ink)}
.book .side:last-child{border-right:0}
.book .cap{padding:8px 12px;border-bottom:1px solid var(--ink);background:var(--paper-2);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon);display:flex;justify-content:space-between}
.book .lvl{display:flex;justify-content:space-between;padding:4px 12px;position:relative}
.book .lvl i{position:absolute;top:0;bottom:0;right:0;opacity:.14}
.book .bid i{background:var(--cash)}
.book .ask i{background:var(--stamp)}
.book .lvl b{position:relative;font-weight:400}
.book .bid b:first-child{color:var(--cash)}
.book .ask b:first-child{color:var(--stamp)}
.book .empty{padding:14px 12px;color:var(--wear);font-size:11px}

.risk{border:1px solid var(--stamp);padding:12px 14px;margin:12px 0;background:rgba(162,32,28,.05)}
.risk .field .v{color:var(--stamp)}
.risk .warn{font-size:11px;color:var(--stamp);margin-top:8px;line-height:1.5}

.share{position:fixed;inset:0;background:rgba(27,25,19,.86);display:grid;place-items:center;z-index:60;padding:20px;overflow:auto}
.share[hidden]{display:none}
.share .box{background:var(--paper);border:1px solid var(--ink);box-shadow:5px 5px 0 rgba(27,25,19,.4);max-width:640px;width:100%}
.share .head{padding:18px 22px;border-bottom:1px solid var(--ink)}
.share .head h3{font-family:var(--display);font-size:26px;text-transform:uppercase;margin:0}
.share .head p{margin:6px 0 0;font-size:13px;color:var(--carbon)}
.share .card-wrap{padding:22px;background:var(--paper-2)}
.share .card-wrap img{width:100%;display:block;border:1px solid var(--ink);image-rendering:pixelated}
.share .card-wrap .fallback{border:1px solid var(--ink);background:var(--paper);padding:30px;text-align:center}
.share .card-wrap .fallback .code{font-family:var(--display);font-size:34px;color:var(--stamp);letter-spacing:.04em}
.share .acts{display:flex;gap:10px;flex-wrap:wrap;padding:18px 22px;border-top:1px solid var(--ink)}
.share .acts .btn{flex:1;min-width:140px;text-align:center}
.share .note{padding:0 22px 20px;font-size:12px;color:var(--carbon);line-height:1.55}

.token{cursor:pointer}
.token:hover{background:rgba(27,25,19,.05)}
.token.open{background:rgba(27,25,19,.07)}

.detail{border:1px solid var(--ink);border-top:0;background:var(--paper-2);padding:20px}
.detail[hidden]{display:none}
.detail .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.detail .top h3{font-family:var(--display);font-size:24px;text-transform:uppercase;margin:0}
.detail .top .sym{font-size:11px;letter-spacing:.16em;color:var(--stamp);margin-top:4px}
.detail .top .last{text-align:right}
.detail .top .last b{font-family:var(--display);font-size:22px;display:block;line-height:1}
.detail .top .last span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon)}
.detail .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.detail .chart{border:1px solid var(--ink);background:var(--paper);position:relative;margin:0}
.detail .chart canvas{display:block;width:100%;height:190px}
.detail .side{border:1px solid var(--ink);background:var(--paper);padding:16px}
.detail .addr{font-family:var(--mono);font-size:11px;color:var(--carbon);word-break:break-all;margin-top:12px}

@media(max-width:860px){
  .detail .cols{grid-template-columns:1fr}
}

/* A ticker is decoration. On a phone the screen is the scarce thing. */
@media(max-width:760px){
  .ticker{display:none}
  .masthead{padding:14px 0 10px}
  .nav{gap:2px}
  .nav a{padding:6px 8px;font-size:10px;letter-spacing:.1em}
  .chainbar{gap:10px;font-size:9px}
  .form-body{padding:18px 14px 22px}
  .form-head{padding:13px 14px 10px}
  .wrap{padding:0 12px}
  h1{font-size:clamp(30px,9vw,44px)}
  .assets button .sym{font-size:15px}
  .chart canvas{height:160px}
  .book{font-size:11px}
  .book .lvl{padding:3px 9px}
  .stat-row{gap:16px}
  .btn{padding:11px 14px;font-size:11px}
  .btn-row .btn{flex:1;min-width:0}
  .preview .field .k,.field .k{font-size:10px}
  .steps{max-width:none}
  .step{padding-left:38px}
  .share .box{max-height:92vh;overflow:auto}
  .share .acts{padding:14px}
  .share .acts .btn{min-width:0;flex:1 1 45%}
}

@media(max-width:420px){
  .nav a{padding:5px 6px}
  .assets button{padding:9px 4px}
  .lev button{padding:8px 2px;font-size:11px}
  .board .row{grid-template-columns:28px 1fr 66px}
}

/* ---- Form C-1b: ticket status ------------------------------------------ */
/* Added with the verify flow, which previously had no interface at all. */
.status { border: 1px solid var(--ink); background: var(--paper2, #d9d4c3); }
.status .srow {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid rgba(27, 25, 19, .18);
  font-size: 13px;
}
.status .srow span:last-child { color: #7a3f1c; text-align: right; }
.status .srow.ok span:last-child { color: #2c5740; font-weight: 700; }
.status .total {
  padding: 12px; text-align: right; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}
.status .total b { font-size: 26px; letter-spacing: 0; }
#verify input[readonly] { opacity: .85; }