:root{--background: 258deg 55% 13%;--foreground: 0 0% 98%;--card: 0 0% 10%;--card-foreground: 0 0% 98%;--primary: 210 100% 60%;--primary-foreground: 0 0% 100%;--secondary: 0 0% 15%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 15%;--muted-foreground: 0 0% 65%;--accent: 0 0% 15%;--accent-foreground: 0 0% 98%;--border: 0 0% 20%;--input: 0 0% 20%;--ring: 210 100% 60%;--success: 142 76% 36%;--br: 0;--br-50: 50%;--border-radius: var(--br);--search-box-border-radius: 0;--c-sale-bg: oklch(.778 .1668 63.87);--c-sale-text: oklch(.75 .1736 55.02);--c-blue: oklch(.7375 .1547 237.78);--c-w-4: oklch(100% 0 0 / .04);--c-w-6: oklch(100% 0 0 / .06);--c-w-8: oklch(100% 0 0 / .08);--c-w-12: oklch(100% 0 0 / .12);--c-w-20: oklch(100% 0 0 / .2);--c-w-35: oklch(100% 0 0 / .35);--c-w-50: oklch(100% 0 0 / .5);--c-w-75: oklch(100% 0 0 / .75);--c-w-85: oklch(100% 0 0 / .85);--c-w: oklch(100% 0 0 / 1);--c-b: oklch(18.5% 0 0 / 1);--c-b-80: oklch(18.5% 0 0 / .8);--c-b-70: oklch(18.5% 0 0 / .7);--c-b-50: oklch(18.5% 0 0 / .5);--c-b-35: oklch(18.5% 0 0 / .35);--c-b-20: oklch(18.5% 0 0 / .2);--fs-12: .75rem;--fs-13: .8125rem;--fs-14: .825rem;--fs-15: .9375rem;--fs-16: 1rem;--fs-18: 1.125rem;--fs-20: 1.25rem;--fs-32: 2rem;--fs-38: 2.375rem;--fs-56: 3.5rem;--fsc-13-15: clamp(var(--fs-13) .19vw + .766rem, var(--fs-15));--fsc-20-38: clamp(var(--fs-20), 1.714vw + .832rem, var(--fs-38));--fsc-20-32: clamp(var(--fs-20), 1.143vw + .971rem, var(--fs-32));--fsc-32-56: clamp(var(--fs-32), 1.4429rem + 2.2857vw, var(--fs-56));--fsc-44-64: clamp(2.75rem, 1.905vw + 2.286rem, 4rem);--fsc-20-56: clamp(var(--fs-20), 3.429vw + .414rem, var(--fs-56));--fw-400: "wght" 400;--fw-450: "wght" 500;--fw-550: "wght" 550;--fw-600: "wght" 600;--fw-650: "wght" 650;--ls: -.015em;--ls-4: -.04em;--ls-3-6: clamp(-.01875rem, -.0118rem + -.0286vw, -.0375rem);--ls-2-4: clamp(-.0125rem, -.0079rem + -.019vw, -.025rem);--p-4: .25rem;--p-8: .5rem;--p-12: .75rem;--p-16: 1rem;--p-24: 1.5rem;--p-32: 2rem;--p-40: 2.5rem;--p-48: 3rem;--p-56: 3.5rem;--p-64: 4rem;--pc-2-8: clamp(.125rem, .571vw - .014rem, .5rem);--pc-8-16: clamp(var(--p-8), .762vw + .314rem, var(--p-16));--pc-12-16: clamp(var(--p-12), .381vw + .657rem, var(--p-16));--pc-12-24: clamp(var(--p-12), 1.143vw + .471rem, var(--p-24));--pc-16-24: clamp(var(--p-16), .762vw + .814rem, var(--p-24));--pc-16-32: clamp(var(--p-16), 1.524vw + .629rem, var(--p-32));--pc-24-32: clamp(var(--p-24), .762vw + 1.314rem, var(--p-32));--pc-32-56: clamp(var(--p-32), 2.286vw + 1.443rem, var(--p-56));--pc-16-56: clamp(var(--p-16), 3.81vw + .071rem, var(--p-56));--pc-48-64: clamp(var(--p-48), 1.524vw + 2.629rem, var(--p-64))}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#080808;min-height:100vh;display:flex;flex-direction:column;height:100vh;justify-content:center;font-family:google-sans-flex,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}#app{max-width:800px;margin:0 auto}h1{font-size:10rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem;color:var(--c-w)}.subtitle{color:hsl(var(--muted-foreground));font-size:clamp(.875rem,2vw,.9375rem);margin-bottom:2rem;font-weight:400}.card{background:var(--c-b-35);padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--c-w-4)}.settings-row,.value-row,.viewport-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}label{font-weight:500;font-size:.875rem;color:var(--c-w);letter-spacing:-.01em}.number-input-wrapper{position:relative;width:100%}input[type=number],input[type=text],select{width:100%;padding:1.25rem .5rem;font-size:.9rem;transition:all .05s ease;background:transparent;border:1px solid transparent;border-bottom-color:var(--c-w-12);color:var(--c-w)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.spinner-buttons{position:absolute;right:0;top:0;height:100%;display:flex;flex-direction:column;border-left:.5px solid oklch(.28 0 0)}.spinner-up,.spinner-down{flex:1;width:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.spinner-up{border-bottom:.5px solid hsl(var(--border))}.spinner-up:hover,.spinner-down:hover{background:hsl(var(--muted) / .7);color:var(--c-w)}.spinner-up:active,.spinner-down:active{background:hsl(var(--muted) / .5)}.spinner-buttons svg{width:16px;height:16px}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding:.5rem 2.5rem .5rem .75rem}input[type=number]:hover,input[type=text]:hover,select:hover{border-color:hsl(var(--ring) / .5)}input[type=number]:focus,input[type=text]:focus,select:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring) / .2)}.output-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid hsl(var(--border))}.output-label{font-weight:500;font-size:.875rem;margin-bottom:.75rem;display:block;color:var(--c-w)}.output-display{background:#11061c;padding:1rem;border:1px solid oklch(.5 .31 280.48 / .59);position:relative;margin-bottom:1rem}.output-code{font-family:SF Mono,JetBrains Mono,Fira Code,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:clamp(.8125rem,2vw,.9375rem);color:var(--c-w);word-break:break-all;line-height:1.6;font-weight:500}.copy-button{background:var(--c-b);color:var(--c-w);border:none;padding:1.5rem;border-radius:var(--br);font-weight:500;font-size:.875rem;cursor:pointer;transition:all .15s ease;width:100%;font-family:inherit}.copy-button:hover{background:var(--c-w-12)}.copy-button:active{transform:scale(.98)}.copy-button.copied{background:#5c2de1;color:var(--c-w)}.image__wrapper{position:fixed;z-index:-1;filter:saturate(0) contrast(1.1);right:4rem;bottom:4rem;width:50%;opacity:.3}img{width:100%;height:auto}@media (max-width: 640px){.settings-row,.value-row,.viewport-row{grid-template-columns:1fr}body{padding:1rem .75rem}.card{padding:1.25rem}h1{font-size:1.5rem}.subtitle{font-size:.875rem}}select{-moz-appearance:none}select::-ms-expand{display:none}html{scroll-behavior:smooth}*:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}