:root{--background: 0 0% 7%;--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%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:hsl(var(--background));color:hsl(var(--foreground));line-height:1.6;padding:2rem 1rem;min-height:100vh}#app{max-width:800px;margin:0 auto}h1{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem;color:hsl(var(--foreground))}.subtitle{color:hsl(var(--muted-foreground));font-size:clamp(.875rem,2vw,.9375rem);margin-bottom:2rem;font-weight:400}.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:8px;padding:clamp(1.5rem,3vw,2rem);box-shadow:0 1px 2px #0000004d}.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:hsl(var(--foreground));letter-spacing:-.01em}.number-input-wrapper{position:relative;width:100%}input[type=number],input[type=text],select{width:100%;padding:.5rem 2.25rem .5rem .75rem;border:1px solid hsl(var(--input));border-radius:6px;font-size:.9375rem;transition:all .15s ease;background:hsl(var(--background));color:hsl(var(--foreground));font-family:inherit}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:1px solid hsl(var(--border));border-radius:0 6px 6px 0;overflow:hidden}.spinner-up,.spinner-down{flex:1;width:28px;display:flex;align-items:center;justify-content:center;background:hsl(var(--muted));border:none;color:hsl(var(--muted-foreground));cursor:pointer;transition:all .1s ease;padding:0}.spinner-up{border-bottom:.5px solid hsl(var(--border))}.spinner-up:hover,.spinner-down:hover{background:hsl(var(--muted) / .7);color:hsl(var(--foreground))}.spinner-up:active,.spinner-down:active{background:hsl(var(--muted) / .5)}.spinner-buttons svg{width:8px;height:5px;opacity:.7}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:hsl(var(--foreground))}.output-display{background:hsl(var(--muted));padding:1rem;border-radius:6px;border:1px solid hsl(var(--border));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:hsl(var(--foreground));word-break:break-all;line-height:1.6;font-weight:500}.copy-button{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:none;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .15s ease;width:100%;font-family:inherit}.copy-button:hover{background:hsl(var(--primary) / .9)}.copy-button:active{transform:scale(.98)}.copy-button.copied{background:hsl(var(--success))}@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}