@import"https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body{margin:0;padding:0}body{min-height:100vh;font-family:sans-serif;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;background-color:#1e1e2f;background-image:url(/snes-bg.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative;z-index:-1}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(14px) brightness(.55);backdrop-filter:blur(14px) brightness(.55);pointer-events:none;z-index:0}.containerRoot{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1rem;position:relative;font-family:Play;z-index:1}.container{position:relative;background:linear-gradient(180deg,#282841d9,#191928d9);padding:1.2rem;border-radius:1.25rem;max-width:34rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px #788cff40,0 0 25px #5a78ff40,0 20px 40px #0009}.container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#788cff99,#b478ff33,#788cff99);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;pointer-events:none}.containerBox{position:relative;padding-block:.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:1rem;background:#1e1e2d99;box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #0009,0 0 0 1px #dadbe040}h1{font-family:Play;font-size:2.8rem;font-weight:700;letter-spacing:.03em;color:#f2f4ff;white-space:nowrap;margin:.9rem;text-shadow:0 0 10px rgba(120,140,255,.35),0 2px 4px rgba(0,0,0,.6)}.heroArea{flex:8;width:100%;display:flex;flex-direction:column;align-items:center}.creditsArea{flex:2;width:100%;display:flex;flex-direction:column;align-items:center}.box{background:#19171e;padding:1rem;border-radius:.625rem;display:flex;justify-content:center;gap:.625rem;flex-wrap:wrap}.section{display:flex;flex-direction:column}.result{display:flex;flex-direction:column;gap:.625rem}.result p{margin:0}.snesbyte{display:flex;align-items:center;justify-content:center}.snesbyte p{margin-right:.5rem}.snesbyte input{width:3.125rem;height:1.5rem;text-align:center}input,select{background:#1e1e2de6;border:1px solid rgba(120,140,255,.25);color:#fff;border-radius:.5rem;box-shadow:inset 0 0 6px #0009}input:focus,select:focus{outline:none;border-color:#7a8cff;box-shadow:0 0 0 1px #7a8cff99,0 0 12px #7a8cff59}input[type=number]{width:5rem;padding:.3125rem;font-size:1rem;text-align:center}.color-input-row{width:100%;display:flex;gap:.75rem;margin-bottom:.75rem}.color-picker-column,.hex-input-column{flex:1;display:flex;flex-direction:column;justify-content:center}.hex-input-column label{font-size:.8rem;margin-bottom:.25rem;opacity:.85}.hex-input-column input{height:1.9rem;padding:0 .75rem;width:80%;text-align:center}.palette-selector{margin-top:1rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.palette-selector select{padding:.25rem .375rem;border-radius:.25rem}.palette-grid{margin-top:.75rem;display:grid;grid-template-columns:repeat(8,2.25rem);gap:.2rem;justify-content:center}.palette-slot{width:1.25rem;height:1.25rem;border:.0625rem solid #aaa;cursor:pointer;border-radius:.25rem}.palette-output-wrapper{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem;width:100%}.palette-output{height:2.75rem;resize:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap;font-family:monospace;text-align:center;border-radius:.375rem}.palette-buttons{display:flex;justify-content:center;align-items:center;gap:.625rem}.palette-buttons button{width:7rem;padding:.5rem 1rem;cursor:pointer;position:relative;overflow:hidden;background:linear-gradient(180deg,#2f3350,#1c1f35);color:#fff;border:1px solid rgba(120,140,255,.4);border-radius:.6rem;box-shadow:0 0 #0000,0 6px 18px #0009;transition:all .25s ease}.palette-buttons button:hover{box-shadow:0 0 16px #788cff80,0 8px 25px #000000b3}.palette-buttons button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#008cff40,#8a2be240);transform:translate(-100%);z-index:-1}.palette-buttons button.clicked:before{animation:sweep .2s ease-out forwards}.reset-button{background:#444}.palette-buttons button:focus,.palette-buttons button:focus-visible,.palette-buttons button:active{outline:none;box-shadow:none}@keyframes sweep{to{transform:translate(0)}}@media (max-width: 37.5rem){body{align-items:flex-start}.containerRoot{padding:.5rem}.container{width:90%;max-width:100%;padding:.75rem;display:flex;flex-direction:column;align-items:center}.containerBox{width:90%;padding:.75rem .5rem}h1{font-size:1.8rem;white-space:normal;line-height:1.2}.section,.box{width:90%;flex-direction:column}input[type=number]{width:4.5rem;height:2.25rem;font-size:1rem}.snesbyte{gap:.25rem}.snesbyte input{width:5rem;height:2.25rem}.palette-grid{grid-template-columns:repeat(8,1.75rem);gap:.4rem}.palette-slot{width:1.75rem;height:1.75rem}.palette-output{font-size:.85rem}.palette-buttons{flex-direction:column;width:100%;gap:.5rem}.palette-buttons button{width:100%;padding:.75rem;font-size:1rem}}.color-picker-box{width:100%;display:flex;flex-direction:column;align-items:center;margin:1.5rem 0}.custom-color-input{width:80%;height:60px;border:none;border-radius:10px;cursor:pointer;box-shadow:0 0 5px #0003;transition:transform .2s ease}.custom-color-input:hover{transform:scale(1.05)}@media (max-width: 600px){.color-picker-box{margin:0}}.credits{position:relative;background:linear-gradient(180deg,#282841d9,#191928d9);padding:.8rem 1rem;border-radius:1rem;width:82%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px #788cff40,0 0 18px #5a78ff2e,0 12px 28px #0009;text-align:center;z-index:1}.credits:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#8ca0ff73,#b478ff26,#8ca0ff73);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;pointer-events:none}.credits p{margin:0;font-size:.95rem;color:#e6e8ff;text-shadow:0 1px 2px rgba(0,0,0,.6)}@media (max-width: 600px){.credits{width:90%;padding:.6rem .8rem}.credits p{font-size:.9rem}}