@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";
.pixel{--px-bg:#0a0000;--px-surface:#140505;--px-surface-2:#1e0808;--px-red:#e01b24;--px-red-bright:#ff2d38;--px-red-dim:#7a0f14;--px-amber:#ffb000;--px-text:#f4e4e4;--px-text-dim:#9c7676;--px-green:#4ade80;background:var(--px-bg);color:var(--px-text);background-image:repeating-linear-gradient(0deg,#e01b2409 0 1px,#0000 1px 3px);font-family:VT323,Courier New,monospace;font-size:20px;line-height:1.5}.pixel h1,.pixel h2,.pixel h3,.pixel .px-title,.pixel .px-btn,.pixel .px-label{letter-spacing:.02em;font-family:"Press Start 2P",VT323,monospace;font-weight:400;line-height:1.6}.pixel .px-frame{background:var(--px-surface);border:3px solid var(--px-red);box-shadow:0 0 0 3px var(--px-bg), 0 0 0 6px var(--px-red-dim), 6px 6px 0 0 #0009;image-rendering:pixelated}.pixel .px-frame-dim{background:var(--px-surface);border:3px solid var(--px-red-dim);box-shadow:4px 4px #00000080}.pixel .px-btn{text-transform:uppercase;min-height:44px;color:var(--px-text);background:var(--px-red-dim);border:3px solid var(--px-red);cursor:pointer;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:11px;transition:background-color .15s steps(2,end),color .15s steps(2,end);display:inline-flex;box-shadow:4px 4px #000}.pixel .px-btn:hover:not(:disabled){background:var(--px-red);color:#fff}.pixel .px-btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 #000}.pixel .px-btn:disabled{opacity:.4;cursor:not-allowed}.pixel .px-btn-primary{background:var(--px-red);border-color:var(--px-red-bright);color:#fff}.pixel .px-btn-primary:hover:not(:disabled){background:var(--px-red-bright)}.pixel .px-btn-ghost{border-color:var(--px-red-dim);color:var(--px-text-dim);background:0 0}.pixel .px-btn-ghost:hover:not(:disabled){background:var(--px-surface-2);color:var(--px-text)}.pixel .px-input{width:100%;min-height:44px;color:var(--px-text);border:3px solid var(--px-red-dim);background:#000;outline:none;padding:.625rem .875rem;font-family:VT323,monospace;font-size:20px;transition:border-color .15s steps(2,end)}.pixel .px-input::placeholder{color:var(--px-text-dim)}.pixel .px-input:focus{border-color:var(--px-red-bright);box-shadow:0 0 0 3px #e01b2459}.pixel .px-input:disabled{opacity:.5}.pixel a:focus-visible,.pixel button:focus-visible,.pixel input:focus-visible,.pixel [tabindex]:focus-visible{outline:3px solid var(--px-amber);outline-offset:2px}.pixel .px-caret:after{content:"_";color:var(--px-red-bright);animation:1s step-end infinite px-blink}@keyframes px-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}.pixel .px-meter{border:3px solid var(--px-red-dim);background:#000;height:20px;padding:2px}.pixel .px-meter-fill{background:repeating-linear-gradient(90deg, var(--px-red) 0px, var(--px-red) 8px, var(--px-red-bright) 8px, var(--px-red-bright) 10px);height:100%;transition:width .3s steps(8,end)}.pixel .px-row{border-bottom:2px dashed var(--px-red-dim)}.pixel .px-row:last-child{border-bottom:none}.pixel .px-tag{text-transform:uppercase;border:2px solid;padding:.25rem .5rem;font-family:"Press Start 2P",monospace;font-size:9px;display:inline-block}.pixel .px-tag-ok{color:var(--px-green)}.pixel .px-tag-off{color:var(--px-text-dim)}.pixel .px-tag-warn{color:var(--px-amber)}@media (prefers-reduced-motion:reduce){.pixel *,.pixel :before,.pixel :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:640px){.pixel h1{font-size:20px}.pixel h2{font-size:15px}.pixel .px-btn{padding:.75rem 1rem;font-size:10px}}