:root{--primary:oklch(98.5% .006 82);--secondary:oklch(94.5% .008 80);--text:oklch(20.42% .01 42);--subtle:oklch(50.53% .018 72);--accent:oklch(64.65% .1874 36)}@media (prefers-color-scheme:dark){:root{--primary:oklch(20.5% .007 58);--secondary:oklch(37% .014 56);--text:oklch(96.5% .006 82);--subtle:oklch(63.5% .012 64);--accent:oklch(68.5% .162 39)}}*{box-sizing:border-box}body{background:var(--primary);color:var(--text);margin:0;font:16px/1.5 sans-serif}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}.controls{background:var(--secondary);flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:1rem;display:flex}.import-form{gap:.4rem;display:flex}#random-btn{margin-right:auto}.palette-footer{justify-content:flex-end;margin-top:1.5rem;display:flex}.import-form input[type=text]{background:var(--primary);color:var(--text);border:1px solid var(--subtle);padding:.2rem .4rem;font-family:monospace}.import-form input::placeholder{color:var(--subtle)}button{font:inherit;cursor:pointer;color:var(--text);background:0 0;border:1px solid #0000;padding:.15rem .35rem}button:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--primary)}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.btn-ghost{border-color:var(--secondary)}.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.hint{width:100%;min-height:1.2em;margin:0}.muted{color:var(--subtle)}.palette{flex-wrap:wrap;align-items:stretch;gap:.5rem;display:flex}.color-block{color:#fff;flex:200px;justify-content:center;align-items:center;min-height:340px;display:flex;position:relative;overflow:hidden}.color-block.is-light{color:#161616}.pill{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000047;align-items:center;gap:.4rem;padding:.4rem .6rem;display:flex}.color-block.is-light .pill{background:#ffffff73}.hash{opacity:.85;font:1.05rem/1 monospace}.hex-input{width:7ch;color:inherit;letter-spacing:.02em;text-transform:lowercase;background:0 0;border:0;padding:0;font:1.05rem/1 monospace}.hex-input:focus{outline:none}.icon-button{color:inherit;background:0 0;border:0;align-items:center;padding:3px;display:inline-flex}.icon-button:hover{background:#7f7f7f47;border:0}.block-editor{background:var(--secondary);color:var(--text);flex-direction:column;gap:.55rem;padding:.85rem;display:flex;position:absolute;bottom:0;left:0;right:0}.block-editor[hidden]{display:none}.slider-row{align-items:center;gap:.5rem;display:flex}.slider-row span{width:1ch;color:var(--subtle);font-size:.85rem}.slider-row input[type=range]{min-width:0;accent-color:var(--accent);flex:1}.actions{gap:.3rem;display:flex}.actions button{flex:1;justify-content:center;align-items:center;padding:.3rem .5rem;display:flex}.add-tile{border:2px dashed var(--subtle);min-height:340px;color:var(--text);background:0 0;flex:200px;font:1.1rem/1 sans-serif}.add-tile:hover{border-color:var(--accent);color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}