.header{min-height:100px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:35px;font-weight:700;text-align:center;padding-top:25px;color:#333}.banner{margin-top:30px;text-align:center;display:block}.banner img{width:500px}.container{margin:20px 0;text-align:center}.preview_img{width:500px;margin:20px auto}.palette{width:500px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:auto}.color-box{width:100%;aspect-ratio:1 / 1;border-radius:6px;font-size:16px;font-weight:700;line-height:0;color:#fff;text-shadow:0 0 3px #000;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word;position:relative;cursor:pointer}.copied{position:absolute;bottom:10px;font-size:14px;font-weight:500;background:rgb(0 0 0 / .5);padding:13px 10px;border-radius:5px;text-shadow:none}.footer{margin:30px 0 60px 0;text-align:center}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}input[type="file"]{width:100%;max-width:470px;padding:14px;background:#fff;border:1px solid #ccc;border-radius:8px;font-size:16px}@media (max-width:768px){.header{min-height:85px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:28px;font-weight:700;text-align:center;padding-top:20px;color:#333}.banner{margin-top:15px;text-align:center;display:block}.banner img{width:96%}.container{margin-bottom:10px;text-align:center}.preview_img{width:96%;margin:20px auto}.palette{width:96%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:auto}.color-box{width:100%;aspect-ratio:1 / 1;border-radius:6px;font-size:16px;font-weight:700;line-height:0;color:#fff;text-shadow:0 0 3px #000;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word;position:relative;cursor:pointer}.copied{position:absolute;bottom:5px;font-size:12px;font-weight:500;background:rgb(0 0 0 / .5);padding:10px 5px;border-radius:5px;text-shadow:none}.footer{margin:30px 0 60px 0;text-align:center}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}input[type="file"]{width:91%;font-size:16px;padding:8px}}@media (min-width:768px) and (max-width:1024px){.header{min-height:100px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:35px;font-weight:700;text-align:center;padding-top:25px;color:#333}.banner{margin-top:30px;text-align:center;display:block}.banner img{width:500px}.container{margin:20px 0;text-align:center}.preview_img{width:500px;margin:20px auto}.palette{width:500px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:auto}.color-box{width:100%;aspect-ratio:1 / 1;border-radius:6px;font-size:16px;font-weight:700;line-height:0;color:#fff;text-shadow:0 0 3px #000;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word;position:relative;cursor:pointer}.copied{position:absolute;bottom:10px;font-size:14px;font-weight:500;background:rgb(0 0 0 / .5);padding:13px 10px;border-radius:5px;text-shadow:none}.footer{margin:30px 0 60px 0;text-align:center}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}input[type="file"]{width:100%;max-width:470px;padding:14px;background:#fff;border:1px solid #ccc;border-radius:8px;font-size:16px}}