*{box-sizing:border-box}body{color:#181412;background:#eeeae6;margin:0;font-family:Inter,Arial,sans-serif}.header{color:#fff;background:#181412;justify-content:space-between;align-items:center;height:64px;padding:0 26px;display:flex}.logo{letter-spacing:.18em;font-size:14px;font-weight:800}.header-title{letter-spacing:.16em;opacity:.5;font-size:10px}.layout{grid-template-columns:330px 1fr;min-height:calc(100vh - 64px);display:grid}.sidebar{background:#fff;border-right:1px solid #ddd7d2;padding:26px}.sidebar h2{margin:0 0 28px;font-size:17px}.field{margin-bottom:20px}.field label{justify-content:space-between;margin-bottom:7px;font-size:11px;font-weight:700;display:flex}.field label b{color:#8c817b;font-weight:400}.field input[type=number]{background:#faf9f7;border:1px solid #d8d1cc;border-radius:5px;outline:none;width:100%;height:38px;padding:0 10px}.field input[type=number]:focus{border-color:#e9511d}.unit-input{position:relative}.unit-input input{padding-right:35px!important}.unit-input span{color:#918780;font-size:10px;position:absolute;top:11px;right:10px}.segmented{grid-template-columns:1fr 1fr;gap:5px;display:grid}.segmented button{color:#746a64;background:#faf9f7;border:1px solid #d8d1cc;border-radius:5px;height:40px;font-size:10px}.segmented button.active{color:#fff;background:#181412;border-color:#181412}.range{accent-color:#e9511d;width:100%}.random-button{background:#fff;border:1px solid #d8d1cc;border-radius:5px;width:100%;height:40px;margin-bottom:20px;font-size:11px;font-weight:600}.animation-row{border-top:1px solid #e2ddd9;border-bottom:1px solid #e2ddd9;justify-content:space-between;align-items:center;padding:14px 0;font-size:11px;font-weight:700;display:flex}.switch{background:#d5cfca;border:none;border-radius:20px;width:40px;height:22px;padding:2px}.switch i{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;display:block}.switch.on{background:#e9511d}.switch.on i{transform:translate(18px)}.export-buttons{gap:8px;margin-top:25px;display:grid}.export-buttons button{border-radius:5px;height:42px;font-size:11px;font-weight:700}.export-svg{color:#fff;background:#e9511d;border:1px solid #e9511d}.export-jpg{background:#fff;border:1px solid #d8d1cc}.preview-area{background:#e6e0db;flex-direction:column;min-width:0;padding:22px;display:flex}.preview-info{color:#817770;gap:20px;margin-bottom:12px;font-size:10px;display:flex}.preview{background:radial-gradient(circle at 30% 20%,#fffc,#0000 40%);border:1px solid #1e140f1f;flex:1;justify-content:center;align-items:center;min-height:400px;padding:20px;display:flex;overflow:hidden}.preview svg{width:100%;height:auto;max-height:calc(100vh - 135px);display:block;box-shadow:0 20px 50px #28190f29}.editing{-webkit-user-select:none;user-select:none}.preview svg{touch-action:none;-webkit-user-select:none;user-select:none}.edit-help{opacity:.55;margin-top:8px;font-size:11px;line-height:1.45}.spot-controls{gap:6px;display:flex}.spot-controls button{flex:1}.spot-controls button:disabled{opacity:.35;cursor:not-allowed}.spot-list{flex-direction:column;gap:4px;margin-top:8px;display:flex}.spot{text-align:left}.spot.active{font-weight:700}.edit-modes{grid-template-columns:1fr;display:grid}@media (width<=850px){.layout{grid-template-columns:1fr}.sidebar{border-bottom:1px solid #ddd7d2;border-right:none}.preview{min-height:350px}}