/* [project]/components/system/system.css [app-client] (css) */
.sys {
  --ink: var(--color-ink);
  --line: var(--color-line);
  --line-2: var(--color-line-2);
  --bone: var(--color-bone);
  --bone-dim: var(--color-bone-dim);
  --muted: var(--color-muted);
  --crimson: var(--color-crimson);
  --crimson-btn: var(--color-crimson-btn);
  --steel: var(--color-steel);
  --steel-deep: var(--color-steel-deep);
  --display: var(--font-display);
  --ui: var(--font-sans);
  --mono: var(--font-mono);
  --brush: var(--font-brush);
  --sfx: var(--font-sfx);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

@media (min-width: 768px) {
  .sys {
    padding: 0 24px;
  }
}

.sys *, .sys :before, .sys :after {
  box-sizing: border-box;
}

.sys .speedbg {
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at var(--sx, 30%) var(--sy, 50%), #f1ebdf0d 0 .7deg, transparent .7deg 5deg);
  -webkit-mask: radial-gradient(90% 90% at var(--sx, 30%) var(--sy, 50%), transparent 12%, #000 45%, transparent 90%);
  -webkit-mask: radial-gradient(90% 90% at var(--sx, 30%) var(--sy, 50%), transparent 12%, #000 45%, transparent 90%);
  mask: radial-gradient(90% 90% at var(--sx, 30%) var(--sy, 50%), transparent 12%, #000 45%, transparent 90%);
  position: absolute;
  inset: 0;
}

.sys .kbg {
  pointer-events: none;
  font: 400 var(--ks, 300px) / 1 var(--brush);
  color: #f1ebdf0b;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
}

.sys .eyebrow {
  font: 700 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson);
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.sys .eyebrow:before {
  content: "";
  background: var(--crimson);
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.sys .eyebrow.st {
  color: var(--steel);
}

.sys .eyebrow.st:before {
  background: var(--steel);
}

.sys .big {
  font: 400 clamp(40px, 5.4vw, 76px) / .9 var(--display);
  text-transform: uppercase;
  letter-spacing: .005em;
}

.sys .big em, .sys .h3 em {
  color: var(--crimson);
  font-style: normal;
}

.sys .h3 {
  font: 400 clamp(26px, 2.6vw, 34px) / .98 var(--display);
  text-transform: uppercase;
}

.sys .lead {
  font: 500 18px/1.45 var(--ui);
  color: var(--bone-dim);
  max-width: 520px;
}

.sys .lead b {
  color: var(--bone);
}

.sys .small {
  font: 500 14px/1.45 var(--ui);
  color: var(--muted);
}

.sys .small a, .sys .lead a {
  color: var(--steel);
  text-underline-offset: 3px;
}

.sys .small code {
  font-family: var(--mono);
  color: var(--bone-dim);
}

.sys .act {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.sys .nf {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 40px;
  min-height: 560px;
  padding: 36px 0 20px;
  display: grid;
  position: relative;
}

.sys .nf .speedbg {
  z-index: -1;
  position: fixed;
}

.sys .nf-art {
  place-items: center;
  min-height: 470px;
  display: grid;
  position: relative;
}

.sys .nf-art .kbg {
  --ks: 300px;
  opacity: .8;
  top: 0;
  left: 50%;
  translate: -50%;
}

.sys .torn {
  width: 268px;
  height: 375px;
  position: relative;
}

.sys .torn .tp {
  position: absolute;
  inset: 0;
}

.sys .torn .tp .card {
  --w: 268px;
  box-shadow: none;
}

.sys .torn .fib {
  background: #efe6d3;
  border-radius: 14.74px;
  position: absolute;
  inset: 0;
}

.sys .torn .tp.b .fib {
  background: #d8cdb4;
}

.sys .torn .tp.a {
  translate: -8px;
  rotate: -4deg;
}

.sys .torn .tp.b {
  translate: 30px 58px;
  rotate: 12.5deg;
}

.sys .tape {
  z-index: 3;
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 48%);
  background: #f1ebdfc7;
  width: 92px;
  height: 26px;
  position: absolute;
  top: 18px;
  left: -28px;
  rotate: -38deg;
  box-shadow: 0 1px #0000004d;
}

.sys .nf-txt {
  justify-items: start;
  gap: 18px;
  display: grid;
  position: relative;
}

.sys .lookup {
  border: 1px dashed var(--line-2);
  min-height: 40px;
  font: 700 13px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  background: #0e0e12;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  display: inline-flex;
}

.sys .lookup code {
  color: var(--bone);
  letter-spacing: .14em;
}

.sys .lookup .sl {
  color: #ff5a70;
}

.sys .sfx {
  z-index: 4;
  font: 400 34px/1 var(--sfx);
  color: var(--bone);
  text-shadow: 3px 3px 0 var(--crimson-btn);
  letter-spacing: .02em;
  pointer-events: none;
  position: absolute;
  top: 58%;
  right: -58px;
  rotate: -14deg;
}

.sys .shop {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 34px 0 18px;
  display: grid;
  position: relative;
}

.sys .front {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  height: 440px;
  position: relative;
}

.sys .eave {
  clip-path: polygon(0 100%, 4% 0, 96% 0, 100% 100%);
  background: linear-gradient(#2a2a33, #15151a);
  border: 2px solid #000;
  height: 46px;
  position: absolute;
  top: 0;
  left: -4%;
  right: -4%;
  box-shadow: inset 0 -6px #0006;
}

.sys .plaque {
  z-index: 4;
  border: 2px solid var(--bone);
  box-shadow: 4px 4px 0 var(--crimson-btn);
  background: #0b0b0e;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 7px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50%;
}

.sys .plaque b {
  white-space: nowrap;
  font: 400 26px/1 var(--brush);
  color: var(--bone);
  letter-spacing: .1em;
}

.sys .plaque span {
  font: 400 16px/1 var(--display);
  letter-spacing: .2em;
  color: var(--bone-dim);
}

.sys .shutter {
  background: repeating-linear-gradient(#ffffff29 0 1px, #0000 1px 13px, #0000008c 13px 15px, #ffffff0d 15px 16px), linear-gradient(90deg, #3b4048, #5b626d 22%, #454a53 50%, #5e6570 78%, #363a42);
  border: 2px solid #000;
  border-top: 0;
  position: absolute;
  inset: 46px 0 28px;
  overflow: hidden;
}

.sys .shutter:after {
  content: "";
  background: #1a1c21;
  border: 2px solid #000;
  border-radius: 2px;
  width: 64px;
  height: 12px;
  margin-left: -32px;
  position: absolute;
  bottom: 22px;
  left: 50%;
  box-shadow: inset 0 2px #fff3;
}

.sys .graf {
  font: 400 30px/1 var(--brush);
  color: #08080a8c;
  position: absolute;
  bottom: 44px;
  right: 9%;
  rotate: -6deg;
}

.sys .sill {
  background: linear-gradient(#1b1b21, #0d0d10);
  border: 2px solid #000;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: -3%;
  right: -3%;
}

.sys .noren {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  height: 188px;
  display: grid;
  position: absolute;
  top: 46px;
  left: 5%;
  right: 5%;
}

.sys .noren:before {
  content: "";
  z-index: 3;
  background: linear-gradient(#8b6a43, #4e3a22);
  border: 1px solid #000;
  border-radius: 4px;
  height: 8px;
  position: absolute;
  top: 4px;
  left: -3%;
  right: -3%;
}

.sys .nr {
  transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6px));
  animation: 5.5s ease-in-out infinite alternate sys-sway;
  animation-delay: var(--d, 0s);
  background: linear-gradient(90deg, #00000047, #0000 18% 82%, #00000047), radial-gradient(circle, #00000024 1px, #0000 1.5px) 0 0 / 6px 6px, linear-gradient(#a10f26, #7d0b1c 80%, #6a0918);
  border: 2px solid #000;
  border-top: 0;
  place-items: center;
  padding-top: 22px;
  display: grid;
  position: relative;
}

.sys .nr b {
  font: 400 74px/1 var(--brush);
  color: var(--bone);
  text-shadow: 3px 3px #2a0309;
}

.sys .nr svg {
  width: 72px;
  height: 72px;
}

.sys .nr:after {
  content: "";
  background: #f1ebdf8c;
  height: 3px;
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
}

.sys .hang {
  z-index: 5;
  transform-origin: 50% -26px;
  animation: 3.8s ease-in-out infinite alternate sys-sway;
  position: absolute;
  top: 236px;
  right: 8%;
}

.sys .hang:before, .sys .hang:after {
  content: "";
  background: #c9bfa9;
  width: 2px;
  height: 28px;
  position: absolute;
  top: -26px;
}

.sys .hang:before {
  left: 22%;
  rotate: 14deg;
}

.sys .hang:after {
  right: 22%;
  rotate: -14deg;
}

.sys .hang div {
  color: #14100c;
  background: linear-gradient(#e9dfc8, #cfc2a5);
  border: 2px solid #000;
  justify-items: center;
  gap: 4px;
  padding: 10px 14px 9px;
  display: grid;
  box-shadow: 4px 5px #0009;
}

.sys .hang b {
  font: 400 28px/1 var(--brush);
  letter-spacing: .06em;
}

.sys .hang span {
  font: 400 13px/1 var(--display);
  letter-spacing: .2em;
}

@keyframes sys-sway {
  from {
    transform: rotate(-1.2deg) skewX(.6deg);
  }

  to {
    transform: rotate(1.2deg) skewX(-.6deg);
  }
}

.sys .shop-txt {
  justify-items: start;
  gap: 18px;
  display: grid;
  position: relative;
}

.sys .retry {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.sys .retry .small b {
  color: var(--bone);
  font-family: var(--mono);
}

.sys .retry .rt-chk {
  color: var(--bone);
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.sys .retry button[aria-disabled="true"] {
  cursor: progress;
  opacity: .75;
}

.sys .safe {
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  font: 600 15px/1.35 var(--ui);
  color: var(--bone-dim);
  background: #0f0f13cc;
  gap: 8px;
  padding: 14px 16px;
  list-style: none;
  display: grid;
}

.sys .safe li {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.sys .safe svg {
  width: 16px;
  height: 16px;
  color: var(--steel);
  flex: none;
  margin-top: 2px;
}

.sys .safe a, .sys .safe code {
  color: var(--steel);
}

.sys .safe code {
  font-family: var(--mono);
  color: var(--bone);
}

.sys .sk {
  background: #1a1a21;
  border-radius: 3px;
  display: block;
}

.sys .sk.l {
  background: #22222a;
}

.sys .sk.t {
  height: 12px;
}

.sys .sk.r {
  border-radius: 999px;
}

.sys .skw {
  animation: 1.3s ease-in-out infinite alternate sys-skp;
}

@keyframes sys-skp {
  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}

.sys .sk-hub {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
  padding: 20px 0 6px;
  display: grid;
}

.sys .sk-hero {
  border: 1px solid var(--line);
  background: #0f0f13;
  border-radius: 14px;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 300px;
  padding: 22px;
  display: grid;
  position: relative;
}

.sys .sk-pack {
  clip-path: polygon(0 4%, 8% 0, 16% 4%, 24% 0, 32% 4%, 40% 0, 48% 4%, 56% 0, 64% 4%, 72% 0, 80% 4%, 88% 0, 96% 4%, 100% 0, 100% 96%, 92% 100%, 84% 96%, 76% 100%, 68% 96%, 60% 100%, 52% 96%, 44% 100%, 36% 96%, 28% 100%, 20% 96%, 12% 100%, 4% 96%, 0 100%);
  background: linear-gradient(#22222a 0 10px, #0000 10px calc(100% - 10px), #22222a calc(100% - 10px)), #1a1a21;
  border-radius: 6px;
  height: 180px;
}

.sys .sk-col {
  gap: 12px;
  display: grid;
}

.sys .sk-bill {
  border: 1px solid var(--line);
  background: #0f0f13;
  border-radius: 14px;
  align-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 28px;
  display: grid;
}

.sys .sk-stats {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px 0 4px;
  display: grid;
}

.sys .sk-stat {
  border: 1px solid var(--line);
  background: #0f0f13;
  border-radius: 10px;
  align-content: start;
  gap: 10px;
  height: 96px;
  padding: 14px;
  display: grid;
}

.sys .sk-ag {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 0 4px;
  list-style: none;
  display: grid;
}

@media (min-width: 480px) {
  .sys .sk-ag {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .sys .sk-ag {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .sys .sk-ag {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.sys .skc {
  aspect-ratio: 1 / 1.4;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #17171d;
  border-radius: 8px;
  position: relative;
}

.sys .skc:before {
  content: "";
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  background: #1f1f27;
  border-radius: 0 0 4px 4px;
  height: 22%;
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.sys .skc:after {
  content: "";
  background: #26262f;
  border-top-left-radius: 4px;
  width: 22%;
  height: 10%;
  position: absolute;
  top: 5px;
  left: 5px;
}

.sys .sk-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  display: flex;
}

.sys .sk-v {
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  padding: 18px 0 4px;
  display: grid;
  position: relative;
}

.sys .sk-stage {
  height: 360px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: radial-gradient(60% 60% at 50% 45%, #ff2e4a1f, #0000 70%), #0b0b0e;
  border-radius: 12px;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.sys .sk-stage .speedbg {
  --sx: 50%;
  --sy: 45%;
}

.sys .sk-info {
  align-content: start;
  gap: 12px;
  padding-top: 10px;
  display: grid;
}

.sys .sk-ctrl {
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 14px;
  left: 50%;
  translate: -50%;
}

.sys .sk-ctrl .sk {
  background: #1d1d24;
  border-radius: 999px;
  width: 44px;
  height: 36px;
}

.sys .sk-ctrl .sk.w {
  width: 90px;
}

.sys .pg-h {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 0;
  display: flex;
}

.sys .pg-h b {
  font: 400 22px/1 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sys .pg-h .jp {
  font: 400 18px/1 var(--brush);
  color: var(--crimson);
}

.spin {
  --vw: 96px;
  width: var(--vw);
  height: calc(var(--vw) * 1.4);
  perspective: 600px;
  position: relative;
}

.spin .sp-3d {
  transform-style: preserve-3d;
  animation: 1.5s cubic-bezier(.55, .05, .35, .95) infinite sys-turn;
  position: absolute;
  inset: 0;
}

.spin .cback {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
}

.spin .cback + .cback {
  transform: rotateY(180deg);
}

.spin .cback .glare {
  display: none;
}

@keyframes sys-turn {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(360deg);
  }
}

.spin.mini {
  --vw: 16px;
  perspective: 80px;
  flex: none;
}

.spin.mini .sp-3d {
  animation: .7s ease-in-out infinite alternate sys-rock;
}

@keyframes sys-rock {
  from {
    transform: rotateY(-55deg);
  }

  to {
    transform: rotateY(55deg);
  }
}

.spin.mini .cb-seal, .spin.mini .cb-word, .spin.mini .cb-logo, .spin.mini .cn, .spin.mini .cb-frame, .spin.mini .cb-lines {
  display: none;
}

.spin.mini .cback {
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000;
}

.spin.mini .cb-in {
  box-shadow: inset 0 0 0 1px #f1ebdfbf;
}

.spin.mini .cb-bw {
  inset: 2px;
}

.spin.mini .cb-band {
  height: 5px;
  box-shadow: none;
  margin-top: -2.5px;
  top: 50%;
}

.sys .ldr {
  opacity: 0;
  justify-items: center;
  gap: 14px;
  padding: 90px 0 60px;
  animation: .2s linear .4s forwards sys-ldr-in;
  display: grid;
}

.sys .ldr p {
  font: 700 13px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

@keyframes sys-ldr-in {
  to {
    opacity: 1;
  }
}

.sys .emp {
  text-align: center;
  justify-items: center;
  gap: 14px;
  padding: 26px 0 8px;
  display: grid;
  position: relative;
}

.sys .emp .lead {
  max-width: 420px;
  font-size: 16.5px;
}

.sys .emp .act {
  justify-content: center;
}

.sys .binder {
  box-shadow: 0 0 0 1px var(--line-2), 0 22px 30px -18px #000;
  background: linear-gradient(90deg, #141419, #18181e 49.4%, #0c0c0f 49.6% 50.4%, #18181e 50.6%, #141419), #141419;
  border-radius: 10px;
  grid-template-columns: repeat(3, 74px);
  gap: 10px;
  padding: 16px;
  display: grid;
  position: relative;
  rotate: -2deg;
}

.sys .slot {
  aspect-ratio: 1 / 1.4;
  color: #4b4b58;
  font: 400 22px/1 var(--display);
  border: 2px dashed #3a3a47;
  border-radius: 5px;
  place-items: center;
  display: grid;
  position: relative;
}

.sys .slot:not(.first):before {
  content: "+";
}

.sys .slot.first {
  color: #0000;
  border: 0;
}

.sys .slot.first .cback {
  position: absolute;
  inset: 0;
  translate: 6px -8px;
  rotate: 4deg;
}

.sys .slot.first:after {
  content: "";
  border: 2px solid var(--crimson);
  opacity: .9;
  border-radius: 8px;
  position: absolute;
  inset: -5px;
}

.sys .tagp {
  z-index: 3;
  background: var(--bone);
  color: var(--ink);
  font: 800 12px/1.15 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--crimson-btn);
  text-align: left;
  max-width: 112px;
  padding: 6px 9px;
  position: absolute;
  top: 2px;
  right: -118px;
  rotate: 3deg;
}

.sys .tagp:before {
  content: "";
  background: var(--bone);
  width: 16px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: -16px;
}

@media (max-width: 520px) {
  .sys .tagp {
    white-space: nowrap;
    max-width: none;
    top: -34px;
    left: 50%;
    right: auto;
    translate: -50%;
    rotate: 0deg;
  }

  .sys .tagp:before {
    display: none;
  }
}

.sys .cpack {
  flex: none;
  width: 118px;
  height: 176px;
  position: relative;
}

.sys .cp-b {
  clip-path: polygon(0 3%, 6% 0, 12% 3%, 18% 0, 24% 3%, 30% 0, 36% 3%, 42% 0, 48% 3%, 54% 0, 60% 3%, 66% 0, 72% 3%, 78% 0, 84% 3%, 90% 0, 96% 3%, 100% 0, 100% 97%, 94% 100%, 88% 97%, 82% 100%, 76% 97%, 70% 100%, 64% 97%, 58% 100%, 52% 97%, 46% 100%, 40% 97%, 34% 100%, 28% 97%, 22% 100%, 16% 97%, 10% 100%, 4% 97%, 0 100%);
  background: linear-gradient(160deg, #2b2b33, #18181e 60%, #24242b);
  border-radius: 4px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sys .cp-fill {
  transform-origin: 50% 100%;
  transform: scaleY(var(--ch, .5));
  background: linear-gradient(180deg, #ff4b64, var(--crimson-btn) 40%, #7d0b1c);
  position: absolute;
  inset: 0;
}

.sys .cp-seal {
  width: 58px;
  height: 62px;
  position: absolute;
  top: 44%;
  left: 50%;
  translate: -50% -50%;
  rotate: -6deg;
}

.sys .cp-seal svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.sys .cp-seal b {
  font: 400 30px/1 var(--brush);
  color: #0a0a0c;
  place-items: center;
  padding-bottom: 4px;
  display: grid;
  position: absolute;
  inset: 0;
}

.sys .cp-name {
  text-align: center;
  font: 400 16px/1 var(--display);
  letter-spacing: .06em;
  color: var(--bone);
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
}

.sys .cp-pct {
  background: var(--ink);
  border: 1px solid var(--crimson);
  font: 700 12px/1 var(--mono);
  color: var(--bone);
  padding: 5px 7px;
  position: absolute;
  top: 16px;
  right: -12px;
  rotate: 5deg;
}

.sys .nb {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px 0 6px;
  display: grid;
}

.sys .nb-top {
  text-align: left;
  justify-items: start;
  gap: 12px;
  display: grid;
}

.sys .timer {
  font: 400 44px/1 var(--display);
  letter-spacing: .02em;
}

.sys .timer small {
  font: 700 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}

.sys .tnote {
  font: 700 12px/1.3 var(--mono);
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 16px;
}

.sys .todo {
  gap: 8px;
  margin-top: 14px;
  list-style: none;
  display: grid;
}

.sys .todo li {
  border: 1px solid var(--line);
  text-align: left;
  background: #0f0f13d9;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: grid;
}

.sys .todo .ic {
  border: 1px solid var(--line-2);
  width: 36px;
  height: 36px;
  color: var(--bone);
  background: #17171d;
  place-items: center;
  display: grid;
}

.sys .todo .ic svg {
  width: 20px;
  height: 20px;
}

.sys .todo b {
  font: 800 15px/1.15 var(--ui);
  letter-spacing: .02em;
  color: var(--bone);
  display: block;
}

.sys .todo span.s {
  font: 500 13.5px/1.3 var(--ui);
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

.sys .nores {
  width: 126px;
  height: 150px;
  position: relative;
}

.sys .nores .ghostc {
  border: 2px dashed #3a3a47;
  border-radius: 7px;
  width: 96px;
  height: 134px;
  position: absolute;
  top: 4px;
  left: 14px;
  rotate: -7deg;
}

.sys .nores .ghostc + .ghostc {
  border-color: #4b4b58;
  left: 24px;
  rotate: 6deg;
}

.sys .nores .mag {
  width: 70px;
  height: 70px;
  color: var(--bone);
  position: absolute;
  bottom: 0;
  right: -6px;
}

.sys .nores .mag circle {
  fill: #08080acc;
}

.sys .sugg {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}

.sys .sugg button {
  border: 1px solid var(--line-2);
  min-height: 38px;
  font: 700 14px/1 var(--ui);
  color: var(--bone);
  letter-spacing: .02em;
  background: #101015;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  display: inline-flex;
}

.sys .sugg button:hover {
  border-color: var(--steel);
  color: var(--steel);
}

.sys .sugg button small {
  font: 700 12px/1 var(--mono);
  color: var(--muted);
}

.sys .sn {
  text-align: left;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 20px 0 4px;
  display: grid;
}

.sys .sn-t {
  justify-items: start;
  gap: 10px;
  display: grid;
}

.sys .prog {
  gap: 6px;
  width: 100%;
  display: grid;
}

.sys .prog .bar {
  background: #1d1d24;
  height: 8px;
  position: relative;
  overflow: hidden;
  transform: skewX(-20deg);
}

.sys .prog .meta2 {
  font: 700 12px/1 var(--mono);
  color: var(--muted);
  letter-spacing: .06em;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.sys .prog .meta2 b {
  color: var(--bone);
}

.sys .tiers {
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  display: flex;
}

.sys .tiers > li {
  border: 1px solid var(--line-2);
  min-height: 28px;
  font: 700 12px/1 var(--mono);
  color: var(--bone-dim);
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  display: inline-flex;
}

.sys .tiers .frag {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.sys .tiers .frag svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 860px) {
  .sys .nf, .sys .shop, .sys .sk-hub {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .sys .nf {
    min-height: 0;
    padding-top: 12px;
  }

  .sys .nf-art {
    min-height: 0;
    padding: 14px 0 70px;
  }

  .sys .torn {
    transform-origin: 50% 0;
    margin-bottom: -60px;
    scale: .82;
  }

  .sys .sfx {
    right: -30px;
  }

  .sys .front {
    height: 380px;
  }

  .sys .nr b {
    font-size: 52px;
  }

  .sys .nr svg {
    width: 52px;
    height: 52px;
  }

  .sys .sk-v {
    grid-template-columns: minmax(0, 1fr);
  }

  .sys .sk-stage {
    height: 300px;
  }

  .sys .sk-hero {
    grid-template-columns: 90px 1fr;
    padding: 16px;
  }

  .sys .nb {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .sys .nb-top {
    text-align: center;
    justify-items: center;
  }
}

@media (max-width: 420px) {
  .sys .big {
    font-size: 40px;
  }
}

html.lite .sys .nr, html.lite .sys .hang, html.lite .sys .skw, html.lite .sys .spin .sp-3d, html.lite .sys .spin.mini .sp-3d {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sys .nr, .sys .hang, .sys .skw, .spin .sp-3d, .spin.mini .sp-3d {
    animation: none;
  }

  .sys .ldr {
    animation-duration: .01ms;
  }
}