body{margin:0;background:#0a0a0a}
a{color:#a9a7a1;text-decoration:none}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.ext{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125}
.base{transition:filter 120ms}
.L-v .base,.L-on .base{filter:grayscale(1) contrast(1.3) brightness(.85)}
.tint{position:absolute;inset:0;background:#2b55ff;mix-blend-mode:color;opacity:0;pointer-events:none}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);opacity:0;pointer-events:none}
.dro{position:absolute;overflow:hidden;opacity:0;pointer-events:none}
.vbar button:focus-visible,.vtrack:focus-visible{outline:1px solid #3462ff;outline-offset:2px}
.dro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3)}
.dro .tint{opacity:1 !important;animation:none !important}
.L-v .tint,.L-v .scan{animation:zin 720ms steps(1,end) forwards}
.L-r .tint,.L-r .scan{animation:zout 520ms steps(1,end) forwards}
.L-on .tint,.L-on .scan{opacity:1}
.L-v .dro{animation:dro 720ms steps(1,end) forwards}
.L-v .dro.d2{animation-delay:70ms}
@keyframes zin{0%{opacity:1}12%{opacity:0}22%{opacity:1}31%{opacity:0}43%{opacity:1}52%{opacity:0}62%{opacity:1}100%{opacity:1}}
@keyframes zout{0%{opacity:0}14%{opacity:1}27%{opacity:0}39%{opacity:1}54%{opacity:0}100%{opacity:0}}
@keyframes dro{0%{opacity:0}12%{opacity:1}31%{opacity:0}43%{opacity:1}62%{opacity:0}100%{opacity:0}}
.sw{display:block;opacity:0;transform:translateY(56px);transition:opacity 420ms ease,transform 760ms cubic-bezier(.2,.75,.2,1)}
.go .sw{opacity:1;transform:none}
.shelf{opacity:0;transition:opacity 600ms ease 160ms}
.go .shelf{opacity:1}
.spine{transition:transform 260ms cubic-bezier(.3,.7,.2,1)}
.spine:active{transform:translateY(-8px)}
.spine.pull{transform:translateY(-34px)}
.spine.sub.pull{transform:translateY(-24px)}
@media (hover:hover){.spine:hover{transform:translateY(-12px)}.spine.pull:hover{transform:translateY(-34px)}}
.push{animation:push 300ms cubic-bezier(.25,.8,.25,1)}
@keyframes push{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.rise{animation:rise 240ms ease-out}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mlbl{font-family:'Roboto Mono',monospace;font-size:10px;font-weight:500;line-height:1.3;letter-spacing:0.02em;text-align:center;white-space:pre-line;word-break:break-all;color:#ffffff;padding:1px 4px;border-radius:3px;max-width:100%;box-sizing:border-box}
.mitem:active .mlbl,.mitem:focus-visible .mlbl{background:#3462ff}
@media (hover:hover){.mitem:hover .mlbl{background:#3462ff}}
.q{font-family:'Roboto Mono',monospace;font-size:16px;letter-spacing:0.12em;color:#ecebe6;caret-color:#c92b00;background:transparent;border:0;outline:none;padding:0;margin:0;-webkit-appearance:none;appearance:none;border-radius:0}
.q::placeholder{color:#6a6964;opacity:1}
.back:active{opacity:.6}
.shelfscroll::-webkit-scrollbar{display:none}
@keyframes wipeOut{0%{opacity:1}20%{opacity:0}35%{opacity:1}55%{opacity:0}70%{opacity:1}85%{opacity:0}100%{opacity:0}}
@keyframes wipeOutC{0%{opacity:1;color:#ecebe6}20%{opacity:0}35%{opacity:1;color:#3462ff}55%{opacity:0;color:#3462ff}70%{opacity:1;color:#3462ff}85%{opacity:0}100%{opacity:0}}
@keyframes wipeIn{0%{opacity:0}25%{opacity:1}40%{opacity:0}60%{opacity:1}75%{opacity:0}100%{opacity:1}}
@keyframes wipeInC{0%{opacity:0;color:#3462ff}25%{opacity:1;color:#3462ff}40%{opacity:0}60%{opacity:1;color:#3462ff}75%{opacity:0}100%{opacity:1;color:#ecebe6}}
.W-out .shelf{animation:wipeOut 440ms steps(1,end) forwards}
.W-out .hnav{animation:wipeOut 440ms steps(1,end) 300ms forwards}
.W-out footer{animation:wipeOut 440ms steps(1,end) 600ms forwards}
.W-out .hlogo{animation:wipeOut 440ms steps(1,end) 1000ms forwards}
.W-out .status{animation:wipeOut 440ms steps(1,end) 1150ms forwards}
.W-out header,.W-out footer,.W-out main{pointer-events:none !important}
.cur{animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
.flagtag{position:absolute;left:50%;top:44%;transform:translateX(-50%);font-family:'Roboto Mono',monospace;font-size:10px;font-weight:500;line-height:1.3;letter-spacing:0.02em;color:#0a0a0a;background:#ffffff;border:1px solid #ffffff;padding:0 4px;border-radius:4px;opacity:0;pointer-events:none;white-space:nowrap}
@keyframes flagOn{0%{opacity:0}1%{opacity:1}100%{opacity:1}}
@keyframes pOutC{0%{opacity:1;color:#ecebe6}62%{opacity:1;color:#ecebe6}68%{opacity:0}76%{opacity:1;color:#3462ff}84%{opacity:0}100%{opacity:0}}
.spine.gone{opacity:0 !important;pointer-events:none !important}
.P-run .spine:not(.gone):not(.sub){animation:pOutC 1150ms steps(1,end) both}
.P-run .spine:not(.gone):not(.sub) .flagtag{animation:flagOn 1150ms steps(1,end) both;animation-delay:inherit}
.P-run header,.P-run footer,.P-run main,.P-boot header,.P-boot footer,.P-boot main{pointer-events:none !important}
.sdot{animation:blink 900ms steps(1,end) infinite}
.tl{animation:tlIn 10ms steps(1,end) both}
@keyframes tlIn{from{opacity:0}to{opacity:1}}
.W-gone header,.W-gone footer,.W-gone main{opacity:0 !important;pointer-events:none !important}
.W-in header{animation:wipeIn 440ms steps(1,end) both}
.W-in footer{animation:wipeIn 440ms steps(1,end) 100ms both}
.W-in .shelf{animation:wipeIn 440ms steps(1,end) 220ms both}
.W-in .spine{animation:wipeInC 440ms steps(1,end) both}
.capin{animation:wipeIn 520ms steps(1,end) both}
.capcheck{opacity:0;transition:opacity 160ms}
.solved .capcheck{opacity:1}
.solved .capgap{opacity:0}
.cappiece{transition:border-color 300ms,box-shadow 300ms}
.solved .cappiece{border-color:transparent !important;box-shadow:none !important}
.solved .capknob{border-color:#3462ff !important;color:#3462ff !important}
.capknob.back,.cappiece.back{transition:transform 280ms cubic-bezier(.3,.7,.2,1),left 280ms cubic-bezier(.3,.7,.2,1)}
.capknob:focus-visible{border-color:#3462ff !important;outline:none}
.mrow:active .mname,.mrow:focus-visible .mname{background:#3462ff}
@media (hover:hover){.sbtn:hover{color:#ecebe6 !important}.mrow:hover .mname{background:#3462ff}}
.capspin{display:block;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:1px solid #ecebe6;border-top-color:transparent;animation:capspin 700ms linear infinite}
@keyframes capspin{to{transform:rotate(360deg)}}
.capbtn:active .capbox,.capbtn:focus-visible .capbox{border-color:#3462ff !important}
@media (hover:hover){.capbtn:hover .capbox{border-color:#3462ff !important}}
.introcell{position:relative;overflow:hidden;background-color:#000;animation:cellOut 260ms steps(1,end) forwards}
.introcell.b{animation-name:cellOutB}
.introlayer{position:absolute;width:1000%;height:2000%;background-image:url(/a/anarchive-mark.svg);background-repeat:no-repeat;background-position:center;background-size:64% auto}
@keyframes cellOut{0%{opacity:1}35%{opacity:0}55%{opacity:1}100%{opacity:0}}
@keyframes cellOutB{0%{opacity:1;background-color:#000}25%{opacity:1;background-color:#3462ff}50%{opacity:1;background-color:#000}100%{opacity:0}}
.introhold{animation:holdOut 100ms linear 2000ms forwards}
@keyframes holdOut{0%{opacity:1}1%,100%{opacity:0}}
.introglowwrap{position:absolute;inset:0;pointer-events:none;display:grid;grid-template:100%/100%;place-items:center;animation:glowFade 650ms ease-out 1400ms forwards}
@keyframes glowFade{from{opacity:1}to{opacity:0}}
.introglow{grid-area:1/1;width:64%;height:auto;pointer-events:none;animation:glowMove 1.3s ease-in-out infinite alternate}
.introglow.g1{filter:blur(5px)}
.introglow.g2{filter:blur(20px);animation-duration:1.7s}
@keyframes glowMove{0%{opacity:.3;transform:none}100%{opacity:.7;transform:translate(0.4%,-0.5%)}}
/* intro opener: the INTERSPIKE mark glitches away in white and reveals the ANARCHIVE mark underneath */
.introsplash{position:absolute;inset:0;background:#000;display:grid;grid-template:100%/100%;place-items:center;pointer-events:none;animation:splashOut 360ms steps(1,end) 600ms forwards}
@keyframes splashOut{0%{opacity:1}22%{opacity:0}34%{opacity:1}58%{opacity:0}68%{opacity:1}86%{opacity:0}92%{opacity:1}100%{opacity:0;visibility:hidden}}
.isbox{grid-area:1/1;position:relative;width:36%;aspect-ratio:330.25/314.75}
.isbox img{position:absolute;inset:0;width:100%;height:100%;display:block}
.isg{filter:blur(20px);animation:glowMove 1.3s ease-in-out 1}
.ism{animation:isM 360ms steps(1,end) 600ms both}
@keyframes isM{0%{clip-path:inset(0)}16%{clip-path:inset(0 0 55% 0)}40%{clip-path:inset(30% 0 0 0)}64%{clip-path:inset(0 0 25% 0)}100%{clip-path:inset(0)}}
.iss{opacity:0;animation:360ms steps(1,end) 600ms both}
.iss.s1{clip-path:inset(10% 0 72% 0);animation-name:isS1}
.iss.s2{clip-path:inset(40% 0 45% 0);animation-name:isS2}
.iss.s3{clip-path:inset(68% 0 14% 0);animation-name:isS3}
@keyframes isS1{0%{opacity:0}10%{opacity:1;transform:translateX(-18%)}36%{transform:translateX(12%)}60%{opacity:0}74%{opacity:1;transform:translateX(-8%)}100%{opacity:0}}
@keyframes isS2{0%{opacity:0}18%{opacity:1;transform:translateX(22%)}44%{transform:translateX(-14%)}70%{opacity:1;transform:translateX(6%)}88%{opacity:0}}
@keyframes isS3{0%{opacity:0}8%{opacity:1;transform:translateX(9%)}30%{opacity:0}52%{opacity:1;transform:translateX(-20%)}80%{opacity:0}}
.isb{position:absolute;background:#fff;opacity:0;animation:360ms steps(1,end) 600ms both}
.isb.b1{left:-18%;top:16%;width:70%;height:6%;animation-name:isB1}
.isb.b2{left:34%;top:47%;width:86%;height:4%;animation-name:isB2}
.isb.b3{left:6%;top:72%;width:48%;height:9%;animation-name:isB3}
.isb.b4{left:-30%;top:58%;width:160%;height:2%;animation-name:isB4}
@keyframes isB1{0%{opacity:0}14%{opacity:1}30%{opacity:0}62%{opacity:1;transform:translateX(24%)}76%{opacity:0}}
@keyframes isB2{0%{opacity:0}26%{opacity:1}44%{opacity:0}80%{opacity:1;transform:translateX(-30%)}94%{opacity:0}}
@keyframes isB3{0%{opacity:0}6%{opacity:1}20%{opacity:0}48%{opacity:1;transform:translateX(-16%)}66%{opacity:0}}
@keyframes isB4{0%{opacity:0}36%{opacity:1}50%{opacity:0}}