body{margin:0;background:#0a0a0a}
a{color:#a9a7a1;text-decoration:none}a:hover{color:#ecebe6}
button{font:inherit}
.ext{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125}
.nocur,.nocur *{cursor:none !important}
.icon{position:absolute;pointer-events:auto;width:100px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;margin:0;background:transparent;border:0;color:#ecebe6;touch-action:none;user-select:none;-webkit-user-select:none;transition:left 760ms cubic-bezier(.65,0,.2,1),top 760ms cubic-bezier(.65,0,.2,1),transform 760ms cubic-bezier(.65,0,.2,1),opacity 520ms ease}
.icon.dragging{transition:none}
.is-sorted .icon{pointer-events:none}
.icon img{-webkit-user-drag:none;user-select:none}
.lbl{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;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.7);padding:1px 4px;border-radius:4px;max-width:100px}
.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}
.vprev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none}
.vdur{position:absolute;right:2px;bottom:2px;padding:1px 3px 0;background:#0a0a0a;color:#ecebe6;font-family:'Roboto Mono',monospace;font-size:7px;line-height:9px;letter-spacing:.06em;pointer-events:none}
.vbar{opacity:0;transition:opacity .2s ease}
.mbox:hover .vbar,.vbar.paused,.vbar:focus-within{opacity:1}
.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}}
.folders{opacity:0;pointer-events:none;transition:opacity 380ms ease}
.folders.show{opacity:1;transition-delay:640ms}
.folders.show .folderbtn,.folders.show .spine{pointer-events:auto}
.spine{transition:transform 240ms cubic-bezier(.3,.7,.2,1)}
.spine:hover,.spine:focus-visible,.spine.on{transform:translateY(-14px)}
.spine.sub:hover,.spine.sub:focus-visible,.spine.sub.on{transform:translateY(-12px)}
.cond{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:'wdth' 62}
.sortbtn:hover .sortbox,.sortbtn:focus-visible .sortbox{background:#ecebe6 !important;color:#0a0a0a !important}
.is-sorted .lasso,.W-out .lasso,.W-gone .lasso,.P-run .lasso,.P-boot .lasso{pointer-events:none !important}
.panel{animation:panelIn 220ms ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wicon:focus-visible .lbl{background:#3462ff}
.sbtn:hover,.vbtn:hover{color:#ecebe6 !important}
.shelfscroll::-webkit-scrollbar{display:none}
.shelfbtn:hover,.shelfbtn:focus-visible{border-color:#3462ff !important;color:#3462ff !important;outline:none}
.lmut{color:#8f8d87}
.lrow:hover{background:rgba(236,235,230,0.05)}
.lrow.on,.lrow:focus-visible{background:#3462ff !important;outline:none}
.lrow.on .lmut,.lrow:focus-visible .lmut{color:#ecebe6}
.navbtn:hover{color:#ecebe6 !important}
@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 tflash{0%{opacity:1}20%{opacity:0}35%{opacity:1}100%{opacity:1}}
@keyframes tflashIn{0%{opacity:1}60%{opacity:1}75%{opacity:0}100%{opacity:0}}
.W-out .icon *,.W-in .icon *,.P-run .icon *{animation-delay:inherit}
.W-out .field:not(.is-sorted) .icon:not(.gone){animation:wipeOut 440ms steps(1,end) forwards}
.W-out .field:not(.is-sorted) .icon:not(.gone) .tint{animation:tflash 440ms steps(1,end) forwards;animation-delay:inherit}
.W-out .folders.show .spine{animation:wipeOutC 440ms steps(1,end) forwards}
.W-out .sortslot{animation:wipeOut 440ms steps(1,end) forwards}
.W-out .hnav{animation:wipeOut 440ms steps(1,end) 350ms forwards}
.W-out footer{animation:wipeOut 440ms steps(1,end) 700ms forwards}
.W-out .hlogo{animation:wipeOut 440ms steps(1,end) 1100ms forwards}
.W-out .status{animation:wipeOut 440ms steps(1,end) 1250ms forwards}
.W-out .icon,.W-out .spine,.W-out header,.W-out footer{pointer-events:none !important}
.W-gone header,.W-gone footer,.W-gone .icon,.W-gone .folders{opacity:0 !important;pointer-events:none !important}
.W-gone .spine{pointer-events:none !important}
.W-in .field:not(.is-sorted) .icon:not(.gone){animation:wipeIn 440ms steps(1,end) both}
.W-in .field:not(.is-sorted) .icon:not(.gone) .tint{animation:tflashIn 440ms steps(1,end) both;animation-delay:inherit}
.W-in header{animation:wipeIn 440ms steps(1,end) both}
.W-in footer{animation:wipeIn 440ms steps(1,end) 100ms 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}
.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:73px;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}
.icon.flag .flagtag{opacity:1}
.icon.flag .tint{animation:pTint 700ms steps(1,end) both}
.icon.zap{animation:zapOut 440ms steps(1,end) forwards}
@keyframes pTint{0%{opacity:0}2%{opacity:1}14%{opacity:0}26%{opacity:1}38%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes zapOut{0%{opacity:1}25%{opacity:0}45%{opacity:1}70%{opacity:0}100%{opacity:0}}
@keyframes flagOn{0%{opacity:0}1%{opacity:1}100%{opacity:1}}
@keyframes pOut{0%{opacity:1}62%{opacity:1}68%{opacity:0}76%{opacity:1}84%{opacity:0}100%{opacity:0}}
.P-run .field .icon:not(.gone):not(.exe){animation:pOut 1150ms steps(1,end) both}
.P-run .field .icon:not(.gone):not(.exe) .flagtag{animation:flagOn 1150ms steps(1,end) both;animation-delay:inherit}
.P-run .field .icon:not(.gone):not(.exe) .tint{animation:pTint 700ms steps(1,end) both;animation-delay:inherit}
.P-run .icon,.P-boot .icon,.P-run header,.P-boot header,.P-run footer,.P-boot footer{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}}
.introcell{background-color:#000;background-image:url(/a/anarchive-mark.svg);background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:440px auto;animation:cellOut 260ms steps(1,end) forwards}
.introcell.b{animation-name:cellOutB}
@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}
.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:440px;height:auto;pointer-events:none;animation:glowMove 1.3s ease-in-out infinite alternate}
.introglow.g1{filter:blur(6px)}
.introglow.g2{filter:blur(26px);animation-duration:1.7s}
@keyframes glowMove{0%{opacity:.3;transform:none}100%{opacity:.7;transform:translate(0.3%,-0.4%)}}
/* 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:250px;aspect-ratio:330.25/314.75}
.isbox img{position:absolute;inset:0;width:100%;height:100%;display:block}
.isg{filter:blur(26px);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}}
@keyframes holdOut{0%{opacity:1}1%,100%{opacity:0}}
@media (max-width:820px){
.sortslot{position:static !important;transform:none !important}
.folders{flex-wrap:wrap;gap:24px !important;padding:24px}
.detail{flex-direction:column !important}
.detailinfo{width:auto !important}
.footgrid{grid-template-columns:1fr auto !important}
.footright{display:none !important}
}