.spirograph-container{color:#e6e8ee;box-sizing:border-box;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:radial-gradient(1200px 800px at 40% 20%,#18234a 0%,#0b0e14 55%);place-items:center;height:100%;padding:18px;display:grid}.wrap{grid-template-columns:1fr 320px;gap:14px;width:min(980px,100%);display:grid}@media (max-width:900px){.wrap{grid-template-columns:1fr}}.card{background:linear-gradient(#ffffff0f,#ffffff08);border:1px solid #ffffff1f;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #00000059}canvas{background:radial-gradient(900px 700px at 60% 40%,#ffffff0f 0%,#fff0 60%),linear-gradient(#00000026,#00000059);width:100%;height:640px;display:block}.panel{gap:10px;padding:14px;display:grid}h1{letter-spacing:.3px;margin:0;font-size:16px}.hint{color:#9aa3b2;margin:0;font-size:12px;line-height:1.3}.row{gap:6px;display:grid}label{color:#9aa3b2;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;display:flex}.val{font-feature-settings:"tnum" 1,"lnum" 1;font-variant-numeric:tabular-nums;color:#e6e8ee;opacity:.9}input[type=range]{accent-color:#8aa4ff;width:100%}select,button{color:#e6e8ee;background:#00000040;border:1px solid #ffffff1f;border-radius:12px;outline:none;width:100%;padding:10px;font-size:13px}button{cursor:pointer;background:linear-gradient(#8aa4ff59,#8aa4ff2e)}button:active{transform:translateY(1px)}.grid2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.footer{color:#9aa3b2;margin-top:2px;font-size:11px;line-height:1.35}.circles-section{gap:8px;display:grid}.section-header{justify-content:space-between;align-items:center;display:flex}.section-header label{margin:0;font-size:13px;font-weight:500}.btn-add{border-radius:8px;width:auto;padding:6px 12px;font-size:12px}.circles-list{gap:8px;max-height:300px;display:grid;overflow-y:auto}.circle-item{background:#0003;border:1px solid #ffffff14;border-radius:10px;gap:8px;padding:10px;display:grid}.circle-header{align-items:center;gap:8px;display:flex}.color-indicator{cursor:pointer;border:1px solid #fff3;border-radius:6px;width:20px;height:20px}.color-picker{cursor:pointer;background:0 0;border:none;border-radius:6px;width:24px;height:24px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid #fff3;border-radius:4px}.btn-remove{background:#ff3b3033;border-radius:6px;width:24px;height:24px;margin-left:auto;padding:0;font-size:18px;line-height:1}.btn-remove:hover{background:#ff3b3059}.circle-controls{gap:6px;display:grid}.control-row{gap:4px;display:grid}.control-row label{font-size:11px}.control-row input[type=range]{height:20px}