*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#080a08;color:#f7f4e8}a{color:inherit;text-decoration:none}header{display:flex;align-items:center;justify-content:space-between;padding:20px 5vw;border-bottom:1px solid #2a3025}nav{display:flex;gap:24px;font-size:13px}main{max-width:1240px;margin:auto;padding:0 5vw 70px}.intro{padding:45px 0 28px}.eyebrow{font-size:11px;letter-spacing:2px}h1{font-size:clamp(42px,5vw,68px);margin:12px 0}p{color:#a8aea1;line-height:1.6}.studio{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}.preview,.editor{border:1px solid #2a3025;border-radius:16px;background:#10130f;padding:26px}.preview{position:sticky;top:20px}#art{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#22281f 0% 25%,#171b15 0% 50%) 0/24px 24px}#art svg{display:block;width:100%;height:100%}#art.circle{border-radius:50%}.preview-options{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin:20px 0}input{accent-color:#c8ff00}.small-previews{display:flex;align-items:center;gap:16px;color:#a8aea1;font-size:13px;margin:24px 0}#tiny svg{width:48px;height:48px;border-radius:50%;display:block}small{display:block;margin-top:6px;font-size:11px}.actions{display:flex;gap:10px}.actions button{flex:1}button,select{font:inherit;border:1px solid #3d4634;color:#f7f4e8;background:#171d13;border-radius:8px;padding:12px;cursor:pointer}button:hover{border-color:#c8ff00}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #c8ff00;outline-offset:4px}.primary{background:#c8ff00;color:#101500;border-color:#c8ff00;font-weight:bold}.hint{font-size:12px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title button{font-size:12px}h2{font-size:19px;font-weight:500;margin:0}.part{display:grid;grid-template-columns:80px 1fr 56px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #2a3025;font-size:13px}.part select{width:100%;min-width:0}.lock{font-size:11px;color:#a8aea1;display:flex;align-items:center;gap:4px}.colors-title{margin:25px 0 16px}#colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #2a3025;border-radius:8px;font-size:12px}.color input{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer}.bottom{display:flex;align-items:center;gap:16px;margin-top:24px}#status{font-size:12px;color:#c8ff00}footer{border-top:1px solid #2a3025;padding:26px 5vw;color:#a8aea1;font-size:12px}@media(max-width:800px){.studio{grid-template-columns:1fr}.preview{position:static;max-width:500px;width:100%;margin:auto}header{flex-wrap:wrap;gap:16px}nav{flex-wrap:wrap;gap:16px}.intro{padding-top:30px}.editor,.preview{padding:20px}.section-title{flex-wrap:wrap}.part{grid-template-columns:70px 1fr 56px}}
.color{justify-content:space-between;flex-wrap:wrap}.swatch{display:flex;align-items:center;gap:8px}.color .lock input{width:14px;height:14px}.color .lock{margin-left:auto}

.filters .filter{display:inline-block;padding:12px 18px;border:1px solid #3d4634;border-radius:8px;font-size:13px}.filters .filter:hover{border-color:#c8ff00}