.pixel-border{border-image-source:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><rect width="8" height="8" fill="none" stroke="currentColor" stroke-width="1"/></svg>');border-image-slice:2;border-image-width:2px;border-image-outset:0;border-image-repeat:stretch;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.pixel-border-inner,.pixel-border-mini{border-style:solid}.pixel-border-inner,.pixel-border-mini,.pixel-dot{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.pixel-dot{border-radius:0}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(-1px,-1px)}60%{transform:translate(1px,1px)}80%{transform:translate(1px,-1px)}}.animate-glitch{animation:glitch .3s ease-in-out infinite alternate}@keyframes circuit-flow{0%{stroke-dashoffset:20}to{stroke-dashoffset:0}}.animate-circuit-flow{stroke-dasharray:5,5;animation:circuit-flow 1s linear infinite}.pixel-book-container{display:flex;width:100%;max-width:800px;height:500px;position:relative;margin:0 auto;perspective:1000px}.pixel-page{position:relative;width:45%;height:100%;background:#f0f0f0;border:4px solid #000;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;box-shadow:inset 0 0 0 2px #fff,4px 4px 0 #888,8px 8px 0 #666}.pixel-page-left{border-right:2px solid #000;transform-origin:right center}.pixel-page-right{border-left:2px solid #000;transform-origin:left center}.pixel-book-spine{width:10%;height:100%;background:#333;border:4px solid #000;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;box-shadow:inset 0 0 0 2px #555,0 4px 8px rgba(0,0,0,.3)}.pixel-spine-text{writing-mode:vertical-rl;text-orientation:mixed;font-family:Courier New,monospace;font-weight:700;font-size:12px;color:#fff;letter-spacing:2px}.pixel-page-content{padding:20px;height:100%;overflow:hidden;font-family:Courier New,monospace}.pixel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #000}.pixel-title{font-size:16px;font-weight:700;color:#000;letter-spacing:1px}.pixel-version{font-size:10px;color:#666;background:#000;color:#0f0;padding:2px 6px;border:1px solid #0f0}.pixel-section{margin-bottom:20px}.pixel-section-title{font-size:12px;font-weight:700;color:#000;margin-bottom:8px;letter-spacing:1px}.pixel-color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.pixel-color-item{display:flex;align-items:center;gap:6px}.pixel-color-swatch{width:16px;height:16px;border:2px solid #000;image-rendering:pixelated}.pixel-color-label{font-size:8px;color:#000;font-family:Courier New,monospace}.pixel-text-samples{space-y:4px}.pixel-text-large{font-size:14px;font-weight:700;color:#000;margin-bottom:2px}.pixel-text-medium{font-size:12px;color:#333;margin-bottom:2px}.pixel-text-small{font-size:10px;color:#666;margin-bottom:2px}.pixel-component-demo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pixel-button-primary{background:#4ade80;border:2px solid #000;padding:6px 12px;font-size:10px;font-weight:700;color:#000;cursor:pointer;transition:all .1s;image-rendering:pixelated;box-shadow:2px 2px 0 #22c55e}.pixel-button-primary:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #22c55e}.pixel-button-secondary{background:#94a3b8;border:2px solid #000;padding:6px 12px;font-size:10px;font-weight:700;color:#000;cursor:pointer;transition:all .1s;image-rendering:pixelated;box-shadow:2px 2px 0 #64748b}.pixel-button-secondary:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #64748b}.pixel-card{width:100%;border:2px solid #000;background:#fff;image-rendering:pixelated;box-shadow:2px 2px 0 #ccc}.pixel-card-header{background:#1e293b;color:#fff;padding:6px 10px;font-size:10px;font-weight:700;border-bottom:2px solid #000}.pixel-card-content{padding:10px}.pixel-progress-bar{width:100%;height:12px;background:#ddd;border:1px solid #000;margin-bottom:6px;image-rendering:pixelated}.pixel-progress-fill{height:100%;background:#22c55e;transition:width .3s ease}.pixel-stats{display:flex;justify-content:space-between;font-size:8px;color:#333}.pixel-grid-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.pixel-grid-item{height:16px;background:#e2e8f0;border:1px solid #000;image-rendering:pixelated}.pixel-grid-item:nth-child(odd){background:#cbd5e1}.pixel-book-shadow{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:90%;height:20px;background:rgba(0,0,0,.2);border-radius:50%;filter:blur(10px);z-index:-1}.pixel-floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}.pixel-float{position:absolute;width:4px;height:4px;background:#4ade80;border:1px solid #22c55e;animation:pixelFloat 3s ease-in-out infinite;image-rendering:pixelated}@keyframes pixelFloat{0%,to{transform:translateY(0) rotate(0deg);opacity:.6}50%{transform:translateY(-20px) rotate(180deg);opacity:1}}@media (max-width:768px){.pixel-book-container{max-width:600px;height:400px}.pixel-page-content{padding:15px}.pixel-title{font-size:14px}.pixel-section-title{font-size:11px}}@media (max-width:640px){.pixel-book-container{flex-direction:column;height:600px}.pixel-page{width:100%;height:45%}.pixel-page-left{border-right:4px solid #000;border-bottom:2px solid #000}.pixel-page-right{border-left:4px solid #000;border-top:2px solid #000}.pixel-book-spine{width:100%;height:10%;flex-direction:row}.pixel-spine-text{writing-mode:horizontal-tb;text-orientation:mixed}}.blog-content{display:flex;-moz-column-gap:2rem;column-gap:2rem}.blog-content blockquote{border-left:7px solid #0369a1;border-radius:0 .8rem .8rem 0;margin-bottom:1rem;margin-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-top:1rem;font-weight:500}.blog-content blockquote,.blog-content code{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.blog-content code{border-radius:.375rem;padding:.25rem .5rem}.blog-content blockquote p{margin:0}.blog-content ul{list-style-type:disc;padding-left:2.5rem}.blog-content h2,.blog-content h3{margin-bottom:1.5rem;margin-top:3rem;font-family:var(--font-lexend),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:2.25rem;line-height:2.75rem;font-weight:600;line-height:1.25;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}@media (min-width:640px){.blog-content h2,.blog-content h3{font-size:2.25rem;line-height:2.75rem;line-height:1.25}}.blog-content h3{font-size:1.875rem;line-height:2.25rem}.blog-content li,.blog-content p{margin-right:auto;margin-top:1.5rem;max-width:42rem;font-size:1.125rem;line-height:2rem;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.blog-content a{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.blog-content section a{text-decoration-line:underline}.blog-content .c-giphy{margin:auto auto 1rem;display:block;max-width:24rem}.blog-content p{margin-bottom:1rem}.blog-content pre{margin-bottom:1.5rem;margin-top:0;font-size:.875rem;line-height:1.25rem}.blog-content li{margin-top:1rem}.blog-content iframe{margin-top:1.5rem;width:100%}.blog-content img{margin:0 auto 2rem;border-radius:.5rem}.blog-content .blog-image-standalone{margin:1.5rem auto 2rem;display:block;width:100%;max-width:56rem;border-radius:.5rem}.blog-content p:has(.blog-image-standalone){max-width:none}.blog-content aside h2{margin-bottom:1rem;margin-top:0;text-align:center;font-size:1.5rem;line-height:2rem}.blog-content aside{position:sticky;top:1.25rem;height:-moz-min-content;height:min-content;width:24rem;--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity));padding:2rem}.blog-content aside ul{list-style-type:none;padding-left:0}.blog-content aside ul ul{margin-top:.625rem}.blog-content aside li{margin-bottom:.5rem;font-size:1rem;line-height:1.75rem}.blog-content .content-anchor{margin-top:1.25rem;display:flex;justify-content:center}.blog-content .content-anchor a{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;border-radius:9999px;background-color:rgba(241,245,249,.8);padding:.75rem 1.75rem;font-size:.938rem;line-height:1.5rem;font-weight:600;line-height:1;--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity));--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:rgba(224,242,254,.5);--tw-shadow:var(--tw-shadow-colored);outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(241 245 249/var(--tw-ring-opacity));transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.blog-content .content-anchor a:hover{background-color:rgba(226,232,240,.6);--tw-shadow-color:rgba(224,242,254,.5);--tw-shadow:var(--tw-shadow-colored)}.blog-content .content-anchor a:active{transition-property:none}@media screen and (max-width:768px){.blog-content{font-size:1.125rem;line-height:1.75rem}.blog-content blockquote{padding:1rem .75rem}.blog-content h2{margin-top:1.5rem;font-size:1.5rem;line-height:2rem}.blog-content h3{margin-top:1.5rem;font-size:1.125rem;line-height:1.75rem}.blog-content blockquote p,.blog-content li,.blog-content p{font-size:1rem;line-height:1.75rem}.blog-content li,.blog-content p{margin-top:1rem}}@media screen and (min-width:769px){.blog-content{font-size:1.125rem;line-height:1.75rem}.blog-content h2{margin-top:3rem;font-size:2.25rem;line-height:2.75rem}.blog-content h3{margin-top:3rem;font-size:1.875rem;line-height:2.25rem}}@media screen and (max-width:1200px){.blog-content{margin-left:auto;margin-right:auto;max-width:48rem;padding-left:1rem;padding-right:1rem;flex-direction:column}.blog-content aside,.blog-content section{width:100%}.blog-content aside{position:static}}@media screen and (min-width:1201px){.blog-content section{width:calc(100% - 430px);margin:auto}}