.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}}@layer components{.blog-content{display:flex;gap:2rem}.blog-content blockquote{border-left:4px solid #3b82f6;border-radius:.5rem;margin:2rem 0;background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:1.5rem 4rem 1.5rem 2rem;font-style:italic;color:#1e293b;font-size:1.125rem;line-height:1.7;position:relative;box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px 0 rgb(0 0 0/.06)}.dark .blog-content blockquote{background:linear-gradient(135deg,#1e293b,#334155);border-color:#60a5fa;color:#e2e8f0;box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -1px rgb(0 0 0/.06)}.blog-content code{border-radius:.375rem;background-color:rgb(245 245 245);padding:.25rem .5rem;color:rgb(38 38 38)}.dark .blog-content code{background-color:rgb(38 38 38);color:rgb(229 229 229)}.blog-content blockquote:before{content:'"';font-size:4rem;color:#3b82f6;position:absolute;top:-.5rem;right:1rem;font-family:serif;opacity:.3}.dark .blog-content blockquote:before{color:#60a5fa}.blog-content blockquote p{margin:0;color:inherit;font-weight:500;font-size:inherit;line-height:inherit;position:relative;z-index:1}.blog-content ul{list-style-type:disc;padding-left:2.5rem}.blog-content h2,.blog-content h3{font-family:var(--font-family-display);margin-top:3rem;margin-bottom:1.5rem;font-size:2.25rem;line-height:1.25;font-weight:600;color:rgb(23 23 23)}.dark .blog-content h2,.dark .blog-content h3{color:white}@media (min-width:640px){.blog-content h2,.blog-content h3{font-size:2.25rem;line-height:1.25}}.blog-content h3{font-size:1.875rem}.blog-content li,.blog-content p{margin-top:1.5rem;margin-right:auto;max-width:42rem;font-size:1.125rem;line-height:2rem;color:rgb(64 64 64)}.dark .blog-content li,.dark .blog-content p{color:rgb(212 212 212)}.blog-content a{color:rgb(64 64 64);text-decoration:underline}.dark .blog-content a{color:rgb(212 212 212)}.blog-content a:hover{color:rgb(23 23 23)}.dark .blog-content a:hover{color:white}.blog-content section a{text-decoration:underline}.blog-content .c-giphy{margin:auto auto 1rem;display:block;max-width:24rem}.blog-content p{margin-bottom:1rem}.blog-content pre{margin-top:0;margin-bottom:1.5rem;font-size:.875rem}.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-top:0;margin-bottom:1rem;text-align:center;font-size:1.5rem}.blog-content aside{position:sticky;top:1.25rem;height:-moz-min-content;height:min-content;width:24rem;background-color:rgb(255 255 255);padding:1.5rem;border:1px solid rgb(229 229 229);border-radius:.75rem;box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}.dark .blog-content aside{background-color:rgb(38 38 38/.5);border-color:rgb(64 64 64)}.blog-content aside ul{list-style-type:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:0}.blog-content aside ul ul{margin-top:.625rem;padding-left:1rem}.blog-content aside li{margin:0;font-size:.875rem}.blog-content aside li a{display:block;padding:.625rem .75rem;border-radius:.5rem;color:rgb(64 64 64);text-decoration:none;line-height:1.4;transition:all .2s ease-in-out}.dark .blog-content aside li a{color:rgb(212 212 212)}.blog-content aside li a:hover{background-color:rgb(245 245 245);color:rgb(0 0 0);transform:translateX(.25rem)}.dark .blog-content aside li a:hover{background-color:rgb(64 64 64);color:rgb(255 255 255)}.blog-content .content-anchor{margin-top:1.25rem;display:flex;justify-content:center}.blog-content .content-anchor a{font-size:.938rem;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;border-radius:9999px;background-color:rgb(245 245 245/.8);padding:.75rem 1.75rem;line-height:1;font-weight:600;color:rgb(23 23 23);box-shadow:0 1px 2px 0 rgb(0 0 0/.05);box-shadow:0 1px 2px 0 rgb(245 245 245);outline-offset:2px;transition:all .2s ease-in-out}.dark .blog-content .content-anchor a{background-color:rgb(38 38 38);color:white;box-shadow:0 1px 2px 0 rgb(23 23 23)}.blog-content .content-anchor a:hover{background-color:rgb(229 229 229/.6);box-shadow:0 1px 2px 0 rgb(245 245 245)}.dark .blog-content .content-anchor a:hover{background-color:rgb(64 64 64);box-shadow:0 1px 2px 0 rgb(23 23 23)}@media screen and (max-width:768px){.blog-content{font-size:1.125rem}.blog-content blockquote{padding:1rem .75rem}.blog-content h2{margin-top:1.5rem;font-size:1.5rem}.blog-content h3{margin-top:1.5rem;font-size:1.125rem}.blog-content blockquote p{font-size:1rem}.blog-content li,.blog-content p{margin-top:1rem;font-size:1rem}}@media screen and (min-width:769px){.blog-content{font-size:1.125rem}.blog-content h2{margin-top:3rem;font-size:2.25rem}.blog-content h3{margin-top:3rem;font-size:1.875rem}}@media screen and (max-width:1200px){.blog-content{margin-right:auto;margin-left:auto;max-width:48rem;padding-right:1rem;padding-left: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}}}