:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#312f30de;background-color:#91d2f7;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;padding:0;min-width:320px;min-height:100vh;background-image:url(/pc-background.jpg)}#root{width:100%;min-height:100vh;padding:0;margin:0}h1{font-size:2.2em;line-height:1.1;margin-top:0}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}}.App{text-align:center;padding:20px;font-family:Arial,sans-serif;max-width:1000px;margin:0 auto}.preset-colors{margin:30px 0}.preset-colors h2{color:#333;margin-top:0;margin-bottom:10px}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;max-width:600px;margin:0 auto}.color-button{padding:15px 10px;border-radius:8px;cursor:pointer;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.7);transition:transform .2s ease}.color-button:hover{transform:scale(1.05)}.color-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.main-content{display:flex;gap:0px;justify-content:center;align-items:flex-start;margin-top:20px;flex-wrap:wrap}.selected-colors{flex:1;min-width:300px;max-width:400px;padding:0;border-radius:10px}.selected-colors h3{color:#333!important;margin-top:0;margin-bottom:0;font-size:1.3rem}.selected-display{display:flex;justify-content:center;gap:20px;margin:15px 0;flex-wrap:wrap}.selected-color{text-align:center}.color-preview{width:70px;height:70px;border-radius:8px;margin:0 auto 10px}.reset-button{background-color:#ff4757;color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;font-size:14px;margin-top:0}.reset-button:hover{background-color:#ff3742}.result{flex:none;min-width:300px;max-width:300px;padding:0;border-radius:10px;margin-top:0}.result h2{color:#333!important;margin-top:0;margin-bottom:10px;font-size:1.3rem;text-align:center}.mixed-color{width:150px;height:80px;margin:15px auto;border-radius:12px;box-shadow:0 4px 8px #0003;transform:translate(8px)}.mixed-color:hover{transform:scale(1.05);transition:transform .2s ease}.result-name{margin:0;padding:0;font-size:.95rem;text-align:center;color:#333;transform:translate(13px)}.ratio-control{margin:20px 0;background-color:#f8f9fa;padding:15px;border-radius:10px}.ratio-control label{display:block;margin-bottom:10px;font-weight:700;font-size:16px;color:#333}.ratio-control input[type=range]{width:300px;height:8px}@media (max-width: 768px){.main-content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0px;padding:0}.selected-color{margin:0;padding:0}.result{width:100%;max-width:100%;padding:0;margin:0}h1,.preset-colors h2{font-size:1rem;margin:1px 0}.selected-colors h3,.result h2{font-size:.95rem;margin:0}.preset-colors{margin:0;padding:5px 0}.color-grid{grid-template-columns:repeat(3,1fr);gap:4px}.color-preview{width:60px;height:50px}.mixed-color{width:70%;height:60px;border-radius:6px;margin-top:0}.selected-display{display:flex;justify-content:center;gap:4px;margin:0;padding:0}.reset-button{margin-top:7px;padding:10px;font-size:18px}}