/* Spec-sheet for a living thing. Pure black, off-white, one orange. Square corners, hairlines, pixel labels.
   One object per figure. Motion is limited to the 3D mind, a blink, the marquee and text being typed. */
:root{
  --bg:#000; --panel:#070605; --ink:#f5f2ee; --mute:#9c968f; --dim:#615b55;
  --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.26);
  --acc-rgb:150,178,255; --acc:rgb(var(--acc-rgb)); --acc-soft:rgba(var(--acc-rgb),.75); --acc-deep:rgba(var(--acc-rgb),.14); --ok:#7ddc9a; --bad:#ff5f57;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --pix:"Silkscreen","JetBrains Mono",monospace; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,72px)}
.px{font-family:var(--pix);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.acc{color:var(--acc)} .ink{color:var(--ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--pix);font-size:13px;letter-spacing:.22em}
.mark{width:20px;height:20px;border:2px solid var(--acc);position:relative}
.mark::after{content:"";position:absolute;inset:4px;background:var(--acc);animation:blink 2.4s steps(2) infinite}
nav{display:flex;gap:clamp(14px,2.2vw,36px)}
nav a:hover{color:var(--ink)} nav i{font-style:normal;color:var(--acc);margin-right:6px}
@media (max-width:980px){nav{display:none}}
.strip{display:flex;justify-content:space-between;gap:14px;padding-block:9px;border-top:1px solid var(--line)}
@media (max-width:620px){.strip span:nth-child(3){display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--pix);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  background:var(--acc);color:#000;border:1px solid var(--acc);padding:14px 18px;box-shadow:3px 3px 0 rgba(var(--acc-rgb),.38);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(var(--acc-rgb),.38)} .btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.out{background:var(--bg);color:var(--ink);border-color:var(--line2);box-shadow:3px 3px 0 var(--line)}
.btn[disabled]{opacity:.5;cursor:wait}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);padding:5px 9px;font-family:var(--pix);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);background:var(--bg);white-space:nowrap}
.tag.on{border-color:var(--acc);color:var(--acc)}
.tag.ok{color:var(--ok);border-color:#2c5a3b} .tag.bad{color:var(--bad);border-color:#6a2623} .tag.wait{color:var(--acc-soft)}

h1{font-weight:800;font-size:clamp(46px,6.4vw,94px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase}
h1 span,h2 span{display:block}
.ol{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
h2{font-weight:800;font-size:clamp(32px,4.2vw,58px);line-height:.95;letter-spacing:-.028em;text-transform:uppercase}
h3{font-weight:800;font-size:19px;letter-spacing:-.01em;text-transform:uppercase}
.lede{color:var(--mute);max-width:54ch}
.lede b{color:var(--ink);font-weight:600}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center;padding-block:clamp(40px,6vw,84px)}
@media (max-width:940px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero::before,.hero::after{content:"";position:absolute;top:24px;width:12px;height:12px;border-top:1px solid var(--line2)}
.hero::before{left:clamp(6px,2vw,30px);border-left:1px solid var(--line2)} .hero::after{right:clamp(6px,2vw,30px);border-right:1px solid var(--line2)}
.copy{display:flex;flex-direction:column;gap:26px;min-width:0;align-items:flex-start}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line2);width:100%;max-width:520px}
.spec div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.spec div:nth-child(2n){border-right:0} .spec div:nth-last-child(-n+2){border-bottom:0}
.spec b{display:block;font-family:var(--pix);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;overflow-wrap:anywhere}
.pick{display:flex;flex-direction:column;gap:10px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{font-family:var(--pix);font-size:9.5px;letter-spacing:.12em;padding:9px 11px;background:var(--bg);border:1px solid var(--line2);color:var(--mute);cursor:pointer}
.swatches button:hover{color:var(--ink)} .swatches button.on{border-color:var(--acc);color:#000;background:var(--acc)}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* figure frame */
.fig{position:relative;border:1px solid var(--line2);background-color:var(--panel);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px;min-width:0}
.fig canvas.mind{display:block;width:100%;aspect-ratio:1/.92;cursor:grab;touch-action:none}
.fig canvas.mind:active{cursor:grabbing}
.fig-top,.fig-bot{position:absolute;left:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.fig-top{top:12px;justify-content:flex-end} .fig-bot{bottom:12px}
.readout{border-top:1px solid var(--line2);background:var(--bg);padding:14px 16px;font-family:var(--mono);font-size:13.5px;line-height:1.5;min-height:6.2em;overflow-wrap:anywhere;white-space:pre-wrap}
.readout b{color:var(--acc);font-weight:500}
.caret::after{content:"█";color:var(--acc);animation:blink 1s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);color:var(--mute);white-space:nowrap}
.mq div{display:inline-block;padding-block:9px;font-family:var(--pix);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;animation:scroll 46s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(56px,8vw,120px);display:flex;flex-direction:column;gap:clamp(26px,3.4vw,46px);border-top:1px solid var(--line)}
.sec-top{display:flex;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sec-top i{font-style:normal;color:var(--acc);margin-right:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,80px);align-items:start}
.split.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:940px){.split,.split.rev{grid-template-columns:minmax(0,1fr)}}
.col{display:flex;flex-direction:column;gap:24px;min-width:0;align-items:flex-start}
.col>*{max-width:100%}
.points{width:100%;border-top:1px solid var(--line)}
.points div{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 10px;padding:16px 0;border-bottom:1px solid var(--line)}
.points i{font-style:normal;font-family:var(--pix);font-size:10px;color:var(--acc);padding-top:5px}
.points b{font-weight:600} .points p{grid-column:2;color:var(--mute);font-size:14.5px}

/* transcript */
.log{width:100%;border:1px solid var(--line2);background:var(--panel)}
.log-head,.log-foot{display:flex;justify-content:space-between;gap:10px;padding:11px 14px}
.log-head{border-bottom:1px solid var(--line2)} .log-foot{border-top:1px solid var(--line2)}
.live::before{content:"";display:inline-block;width:7px;height:7px;background:var(--acc);margin-right:9px;animation:blink 1.2s steps(2) infinite}
.rows{max-height:560px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.row{display:grid;grid-template-columns:44px 86px minmax(0,1fr);gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14.5px;align-items:baseline}
.row:last-child{border-bottom:0}
.row.new{animation:flash 1.4s ease-out}
@keyframes flash{from{background:var(--acc-deep)}}
.row .t{font-family:var(--pix);font-size:9.5px;color:var(--dim)}
.row .who{font-family:var(--pix);font-size:10px;letter-spacing:.1em;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .who:hover{color:var(--ink)}
.row p{overflow-wrap:anywhere;white-space:pre-wrap}
.row p em{font-style:normal;font-family:var(--pix);font-size:9.5px;letter-spacing:.12em;color:var(--dim);margin-right:8px;text-transform:uppercase}
.row.move p em{color:var(--ok)} .row.blocked p em{color:var(--bad)} .row.untrusted p{color:var(--mute)} .row.untrusted .who{color:var(--mute)}
.row.made p{font-family:var(--mono);font-size:13px} .row.system p{color:var(--dim);font-size:13px}
.row .q{display:block;color:var(--dim);font-size:13px;margin-bottom:3px}
.none{padding:26px 14px;color:var(--dim);font-family:var(--mono);font-size:13px}

/* mind list + preview */
.modes{width:100%;display:flex;flex-direction:column;gap:0}
.mode{text-align:left;background:none;border:0;border-top:1px solid var(--line);border-left:2px solid transparent;padding:16px 16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:7px;width:100%}
.mode:last-child{border-bottom:1px solid var(--line)}
.mode:hover{background:var(--panel)} .mode.on{border-left-color:var(--acc);background:var(--panel)}
.mode-top{display:flex;justify-content:space-between;gap:10px}
.mode p{color:var(--mute);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.card-in{padding:18px;border-top:1px solid var(--line2);background:var(--bg);display:flex;flex-direction:column;gap:16px}
canvas.steps{display:block;width:100%;height:260px}

/* console */
.term{width:100%;border:1px solid var(--line2);background:var(--panel);font-family:var(--mono);font-size:13.5px}
.term-log{height:250px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.term-log div{overflow-wrap:anywhere;white-space:pre-wrap}
.term-log .you{color:var(--ink)} .term-log .sys{color:var(--dim)} .term-log .mind{color:var(--acc)} .term-log .err{color:var(--bad)}
.term form,.talk{display:flex;gap:0;border-top:1px solid var(--line2);flex-wrap:wrap}
.term select,.term input,.talk input{background:var(--bg);border:0;border-right:1px solid var(--line2);border-radius:0}
.term select{width:auto;flex:none} .term input,.talk input{flex:1 1 160px}
.term .btn,.talk .btn{box-shadow:none;border:0}
.verdict{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#000a}
.verdict span{font-family:var(--pix);font-size:clamp(22px,3.4vw,40px);letter-spacing:.2em;color:var(--bad);border:2px solid var(--bad);padding:10px 22px;animation:blink .5s steps(2) 3}

/* bounty + grid cells */
.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));border:1px solid var(--line2);width:100%}
.cell{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.cell .big{font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.02em;text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.cell p{color:var(--mute);font-size:14.5px}
.cell.open .big{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.cell a.px:hover{color:var(--ink)}

/* faq */
.faq{width:100%;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;padding:18px 0;font-weight:600;font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--pix);color:var(--acc)}
details[open] summary::after{content:"–"}
details p{color:var(--mute);padding-bottom:20px;max-width:68ch}

/* coin page */
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border:1px solid var(--line2)}
.kv div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0;min-width:0}
.kv b{display:block;font-family:var(--mono);font-weight:500;font-size:17px;margin-top:4px;overflow-wrap:anywhere}
.box{width:100%;border:1px solid var(--line2);background:var(--panel)}
.box-head{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2)}
.box-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.box-body p{color:var(--mute);font-size:14px}
.check{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;font-size:14px;padding-top:9px;border-top:1px solid var(--line)}
.check i{font-style:normal;font-family:var(--pix);font-size:9.5px;padding-top:4px}
.check.ok i{color:var(--ok)} .check.no i{color:var(--bad)}
.check small{display:block;color:var(--mute);overflow-wrap:anywhere}
.meter{height:10px;border:1px solid var(--line2);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--acc);transition:width .8s}
.loop{display:flex;flex-wrap:wrap;gap:6px}

/* forms */
.form{display:flex;flex-direction:column;gap:18px;width:100%}
.field{display:flex;flex-direction:column;gap:8px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
@media (max-width:540px){.row2{grid-template-columns:minmax(0,1fr)}}
input,textarea,select{font:inherit;font-size:15px;color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:0;padding:13px 14px;width:100%}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--acc)}
textarea{min-height:120px;resize:vertical}
.msg{font-family:var(--mono);font-size:12.5px;color:var(--mute);min-height:1.4em}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}

.foot{display:flex;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;padding-block:26px 48px;border-top:1px solid var(--line)}
.foot span:first-child{color:var(--ink);letter-spacing:.22em}
.foot span:last-child{max-width:80ch}


/* in figures with a readout, the bottom tags sit on the canvas, not on the text */
.fig:has(.readout) .fig-bot{position:relative;left:0;right:0;bottom:0;margin-top:-38px;padding:0 12px 12px}

/* accent picker in the footer */
.accents{display:flex;align-items:center;gap:8px}
.accents button{width:18px;height:18px;padding:0;border:1px solid var(--line2);background:rgb(var(--c));cursor:pointer}
.accents button.on{outline:1px solid var(--ink);outline-offset:2px}

[hidden]{display:none!important}

.row.contest p em{color:var(--acc)}
a.cell:hover{background:var(--panel)}