:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--transition-speed:.5s;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh;transition:background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;color:#212529;background-color:#f8f9fa;place-items:center;margin:0;display:flex}#root{text-align:center;width:100%;max-width:1280px;margin:0 auto;padding:2rem}.app-container{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:600px;margin:0 auto;display:flex}h1{letter-spacing:-1px;font-size:3.2em;font-weight:700;line-height:1.1}.subtitle{opacity:.8;font-size:1.2rem;font-weight:300}.theme-toggle{-webkit-backdrop-filter:blur(8px);cursor:pointer;background:#fff6;border:none;border-radius:50%;padding:.5rem;font-size:1.5rem;line-height:1;transition:all .3s;position:absolute;top:-10px;right:0;box-shadow:0 4px 12px #0000000d}.theme-dark .theme-toggle{background:#0006;box-shadow:0 4px 12px #0000004d}.theme-toggle:hover{background:#fff9;transform:scale(1.1)}.theme-dark .theme-toggle:hover{background:#0009}.glass-panel{-webkit-backdrop-filter:blur(16px);width:100%;transition:all var(--transition-speed) ease-in-out;background:#fff6;border:1px solid #fff9;border-radius:24px;padding:2.5rem;box-shadow:0 8px 32px #0000000d}.color-input-wrapper{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.color-picker-btn{appearance:none;cursor:pointer;border:4px solid #fff;border-radius:50%;outline:none;width:120px;height:120px;padding:0;transition:transform .2s,box-shadow .2s;overflow:hidden;box-shadow:0 4px 12px #0000001a}.color-picker-btn::-webkit-color-swatch-wrapper{padding:0}.color-picker-btn::-webkit-color-swatch{border:none;border-radius:50%}.color-picker-btn::-moz-color-swatch{border:none;border-radius:50%}.color-picker-btn:hover{transform:scale(1.05);box-shadow:0 8px 24px #00000026}.hex-input{text-align:center;background:#fffc;border:1px solid #0000001a;border-radius:12px;outline:none;width:160px;padding:.8rem 1.2rem;font-family:monospace;font-size:1.2rem;transition:all .2s}.hex-input:focus{border-color:#000;box-shadow:0 0 0 2px #0000001a}.surprise-btn{cursor:pointer;background:#fff9;border:1px solid #0000001a;border-radius:20px;padding:.6rem 1.2rem;font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s;box-shadow:0 2px 8px #0000000d}.surprise-btn:hover{background:#ffffffe6;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.theme-dark .surprise-btn{color:#fff;background:#0006;border-color:#fff3}.theme-dark .surprise-btn:hover{background:#0009}.temperature-display{letter-spacing:-2px;text-transform:uppercase;margin:1.5rem 0;font-size:3.5rem;font-weight:800}details{background:#fff6;border-radius:16px;width:100%;margin-top:1rem;transition:all .3s;overflow:hidden}details[open]{background:#fff9;padding-bottom:1rem}summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:1.2rem;font-weight:600;list-style:none;display:flex}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-size:1.5rem;font-weight:400;transition:transform .3s}details[open] summary:after{transform:rotate(45deg)}.details-content{text-align:left;flex-direction:column;gap:1rem;padding:0 1.5rem 1rem;animation:.4s ease-out fadeIn;display:flex}.stat-row{border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;padding:.8rem 0;display:flex}.stat-row:last-child{border-bottom:none}.stat-label{color:#0009;text-transform:uppercase;letter-spacing:1px;font-size:.9rem;font-weight:600}.stat-value{align-items:center;gap:.5rem;font-size:1.1rem;font-weight:500;display:flex}.color-swatch{border:1px solid #0000001a;border-radius:50%;width:24px;height:24px;display:inline-block}.rgb-stats{flex-wrap:wrap;justify-content:flex-end}.rgb-text{text-align:right;opacity:.8;width:100%;font-size:.8rem}.rgb-bar-container{background:#0000001a;border-radius:4px;gap:4px;width:120px;height:8px;display:flex;overflow:hidden}.rgb-bar{height:100%}.rgb-bar.red{background:#ff4d4d}.rgb-bar.green{background:#4dff4d}.rgb-bar.blue{background:#4d4dff}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.theme-dark{color:#fff}.theme-dark .glass-panel{background:#0006;border:1px solid #ffffff1a}.theme-dark .hex-input{color:#fff;background:#0009;border-color:#fff3}.theme-dark details{background:#0000004d}.theme-dark details[open]{background:#00000080}.theme-dark .stat-label{color:#ffffffb3}.theme-dark .stat-row{border-bottom:1px solid #ffffff1a}@media (width<=600px){h1,.temperature-display{font-size:2.5rem}.glass-panel{-webkit-backdrop-filter:none;background:#ffffffd9;padding:1.5rem;box-shadow:0 4px 16px #0000000d}.theme-dark .glass-panel{background:#000000d9}.stat-row{flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.2rem 0}.stat-value{justify-content:flex-start;width:100%}.rgb-stats{justify-content:flex-start}.rgb-text{text-align:left}.details-content{padding:0 .5rem 1rem}}