*{box-sizing:border-box}body{margin:0;background:#101310;color:#f3f1e8;font:14px/1.6 system-ui}a{color:inherit;text-decoration:none}header{padding:22px 4%;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff22}header a:first-child{font-size:22px;font-weight:800}main{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:35px;padding:32px 4%}h1{font-size:clamp(32px,4vw,62px);letter-spacing:-2px;line-height:1.1;margin:15px 0}h2{margin-top:0}.eyebrow{font-size:10px;letter-spacing:2px;color:#d5fa73}p{color:#aab4a5}iframe{width:100%;height:65vh;min-height:380px;border:1px solid #394134;border-radius:12px;background:black}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}button,.import{border:1px solid #46513c;background:#222a1d;color:#e9f3df;padding:12px 14px;border-radius:6px;cursor:pointer;font:12px system-ui}.actions button:first-child{background:#d5fa73;color:#101310}aside{background:#191f17;padding:24px;border-radius:12px}label{display:block;margin:16px 0;font-size:12px;color:#c8d2c0}output{float:right;color:#d5fa73}input:not([type=checkbox]),select{display:block;width:100%;margin-top:7px;accent-color:#d5fa73}input[type=text],select{padding:10px;background:#0d110b;border:1px solid #46513c;color:white}input[type=color]{height:35px;border:0;background:none}.note{font-size:11px;line-height:1.6}.check{display:flex;gap:7px}.import input{max-width:210px}#status{font-size:12px}@media(max-width:850px){main{grid-template-columns:1fr}iframe{height:55vh;min-height:330px}aside{max-width:100%}}
.wheel-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.wheel-picker canvas{width:150px;height:150px;touch-action:none;cursor:crosshair}.wheel-picker .hex{width:90px!important;font-family:monospace}input[hidden]{display:none!important}aside{max-height:85vh;overflow:auto;position:sticky;top:20px}@media(max-width:850px){aside{max-height:none;position:static}.wheel-picker canvas{width:130px;height:130px}}