:root{--pcs-bg: rgba(0, 0, 0, .6);--pcs-bg-blur: 20px;--pcs-text: #ffffff;--pcs-button-bg: rgba(255, 255, 255, .9);--pcs-button-text: #000000;--pcs-button-hover-bg: rgba(255, 255, 255, 1);--pcs-padding: 2rem;--pcs-gap: 1.5rem;--pcs-font-size: 1.125rem;--pcs-font-weight: 400;--pcs-title-size: 1.5rem;--pcs-title-weight: 600;--pcs-border-radius: 1rem;--pcs-z-index: 9999}.pcs-overlay{position:fixed;inset:0;z-index:var(--pcs-z-index);background:var(--pcs-bg);backdrop-filter:blur(var(--pcs-bg-blur));-webkit-backdrop-filter:blur(var(--pcs-bg-blur));color:var(--pcs-text);display:flex;align-items:center;justify-content:center;padding:var(--pcs-padding);font-size:var(--pcs-font-size);font-weight:var(--pcs-font-weight);overflow-y:auto}body.pcs-overlay-active{overflow:hidden}.pcs-content{text-align:center;max-width:32rem;display:flex;flex-direction:column;gap:var(--pcs-gap);width:100%}.pcs-title{font-size:var(--pcs-title-size);font-weight:var(--pcs-title-weight);margin:0}.pcs-message{margin:0;line-height:1.6;padding:0 .5rem}.pcs-button{background:var(--pcs-button-bg);color:var(--pcs-button-text);border:none;padding:1rem 2rem;border-radius:var(--pcs-border-radius);font-size:var(--pcs-font-size);font-weight:600;cursor:pointer;transition:background .2s,transform .1s;width:100%;margin-top:.5rem}.pcs-button:hover{background:var(--pcs-button-hover-bg);transform:translateY(-1px)}.pcs-button:active{transform:translateY(0)}.pcs-button:focus-visible{outline:2px solid var(--pcs-text);outline-offset:2px}@font-face{font-family:Bungee;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/bungee@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/bungee@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Baloo;font-style:normal;font-display:swap;font-weight:400 800;src:url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-2:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--rgb-base-bg: 253, 246, 227;--rgb-section-bg: 238, 232, 213;--rgb-scrollbar: 131, 148, 150;--rgb-green: 133, 153, 0;--color-bg-base: #fdf6e3;--color-text-base: #657b83;--color-text-header: #586e75;--color-text-muted: #839496;--color-accent-blue: #268bd2;--color-accent-cyan: #2aa198;--color-accent-green: #859900;--color-border-base: #eee8d5;--spacing-unit: .5rem;--radius-unit: .5rem;--font-size-base: 1.25rem;--blur-base: 10px;--transition-base: all .2s}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Baloo,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-base);background:var(--color-bg-base);position:relative;overflow-x:hidden}header{background:rgba(var(--rgb-base-bg),.9);padding:calc(var(--spacing-unit) * 4);text-align:center}header img{filter:drop-shadow(0 0 26px var(--color-bg-base))}h1{font-family:Bungee,sans-serif;font-size:calc(var(--font-size-base) * 2);margin-bottom:var(--spacing-unit);color:var(--color-text-header);text-shadow:0 0 42px var(--color-accent-cyan)}.subtitle{color:var(--color-text-muted);font-size:calc(var(--font-size-base) * 1.4);text-shadow:0 0 6px var(--color-border-base)}main{max-width:1200px;margin:0 auto;padding:calc(var(--spacing-unit) * 4)}@media(max-width:768px){main{padding:0}}section{background:rgba(var(--rgb-section-bg),.5);backdrop-filter:blur(calc(var(--blur-base) * 2));-webkit-backdrop-filter:blur(calc(var(--blur-base) * 2));border-radius:calc(var(--radius-unit) * 4);padding:calc(var(--spacing-unit) * 4);margin-bottom:calc(var(--spacing-unit) * 4);box-shadow:0 2px 4px #657b831a;border:1px solid rgba(var(--rgb-section-bg),.6)}h2{font-size:calc(var(--font-size-base) * 1.6);font-family:Bungee,monospace!important;margin-bottom:calc(var(--spacing-unit) * 2);padding-bottom:var(--spacing-unit);color:var(--color-text-header)}.example,.info{border-radius:0 calc(var(--radius-unit) * 2) calc(var(--radius-unit) * 2) 0}.example{margin:calc(var(--spacing-unit) * 2) 0;padding:calc(var(--spacing-unit) * 2);background:rgba(var(--rgb-section-bg),.4);backdrop-filter:blur(var(--blur-base));-webkit-backdrop-filter:blur(var(--blur-base));border-left:6px solid var(--color-accent-blue)}.example h3{font-size:calc(var(--font-size-base) * 1.1);margin-bottom:18px;color:var(--color-accent-blue);display:flex;align-items:center;gap:var(--spacing-unit);flex-wrap:wrap}.code-wrapper{position:relative;margin:var(--spacing-unit) 0}.code{color:var(--color-text-base)!important;padding:calc(var(--spacing-unit) * 2);border-radius:calc(var(--radius-unit) * 2);overflow-x:auto;font-size:var(--font-size-base)!important;margin:0;backdrop-filter:blur(var(--blur-base));-webkit-backdrop-filter:blur(var(--blur-base))}.code code,pre.code code{display:block;background:transparent!important;padding:0}pre.code{margin:0;background:var(--color-bg-base)!important}.copy-btn{position:absolute;top:var(--spacing-unit);right:var(--spacing-unit);background:rgba(var(--rgb-section-bg),.6);border:1px solid rgba(var(--rgb-scrollbar),.4);color:var(--color-text-base);padding:4px 8px;border-radius:var(--radius-unit);cursor:pointer;font-size:calc(var(--font-size-base) * .8);font-family:Baloo,system-ui;transition:var(--transition-base);font-weight:500}.copy-btn:hover{background:rgba(var(--rgb-section-bg),.8);color:var(--color-text-header);border-color:rgba(var(--rgb-scrollbar),.6)}.copy-btn:active{transform:scale(.9)}.copy-btn.copied{background:rgba(var(--rgb-green),.3);border-color:rgba(var(--rgb-green),.5);color:var(--color-accent-green)}.example h3 button{background:var(--color-accent-blue);color:var(--color-bg-base);border:2px solid transparent;padding:calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2.5);border-radius:var(--radius-unit);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s;margin-left:auto;box-shadow:0 2px 0 var(--color-text-header)}.example h3 button:hover{background:var(--color-accent-cyan);transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.example h3 button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--color-text-header)}.info{background:rgba(var(--rgb-section-bg),.5);border-left:6px solid var(--color-accent-cyan);padding:calc(var(--spacing-unit) * 2);margin:calc(var(--spacing-unit) * 2) 0}.info strong{color:var(--color-accent-cyan);font-size:calc(var(--font-size-base) * 1.2)}.info code{background:var(--color-bg-base);color:var(--color-text-base);padding:calc(var(--spacing-unit) * .4) calc(var(--spacing-unit) * .8);border-radius:calc(var(--radius-unit) * .5);font-size:calc(var(--font-size-base) * 1.1)}pre.astro-code{font-size:calc(var(--font-size-base) * 1.2);border-radius:calc(var(--radius-unit) * 3);padding:1em;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-scrollbar),.5) rgba(var(--rgb-section-bg),.4)}.device-badge{display:inline-block;background:rgba(var(--rgb-section-bg),.6);border:2px solid var(--color-accent-cyan);color:var(--color-text-header);padding:calc(var(--spacing-unit) * .8) calc(var(--spacing-unit) * 2);border-radius:calc(var(--radius-unit) * 4);font-size:calc(var(--font-size-base) * 1.1);margin-bottom:calc(var(--spacing-unit) * 2)}.device-badge span{font-weight:700;color:var(--color-accent-cyan);text-transform:uppercase}.hint{--hint-rgb: var(--rgb-scrollbar);display:inline-block;font-size:calc(var(--font-size-base) * .75);font-weight:400;padding:calc(var(--spacing-unit) * .3) calc(var(--spacing-unit) * 1);border-radius:calc(var(--radius-unit) * 2);background:rgba(var(--hint-rgb),.15);color:var(--color-text-muted);border:1px solid rgba(var(--hint-rgb),.3)}.hint.active{--hint-rgb: var(--rgb-green);color:var(--color-accent-green)}