:root{--bg:#0b0c10;--panel:#121418;--text:#e5e7eb;--muted:#9ca3af;--accent:#3b82f6}html,body{touch-action:manipulation;height:100%}body{background:radial-gradient(1000px 600px at 20% 0%,#111827,var(--bg));color:var(--text);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji}.container{background:radial-gradient(1000px 600px at 20% 0%,#111827,var(--bg));max-width:1000px;margin:0 auto;padding:24px 16px 56px}.header{justify-content:space-between;align-items:center;gap:12px;display:flex}.title{font-size:22px;font-weight:700}.panel{background:linear-gradient(#ffffff08,#ffffff05);border:1px solid #ffffff14;border-radius:12px;padding:16px}.panel.canvasWrap{padding:0}.row{gap:16px;display:flex}.col{flex:1}.controls{grid-template-columns:1fr 1fr;gap:12px;display:grid}.btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:10px 14px;font-weight:600}.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(20%)}.btn.secondary{background:#374151}.canvasWrap{background:#0f1115;border:1px dashed #ffffff1a;border-radius:12px;place-items:center;min-height:360px;display:grid;position:relative}.hint{color:var(--muted)}canvas{border-radius:12px;max-width:100%;height:auto}.select{color:#e5e7eb;background:#111827;border:1px solid #ffffff1a;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.2}.select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #3b82f659}.field select{width:100%}.field{gap:6px;display:grid}label{color:var(--muted);font-size:12px}input[type=range]{appearance:none;background:#374151;border-radius:999px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:none;border-radius:50%;width:22px;height:22px}input[type=range]::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:22px;height:22px}@media (max-width:900px){.row{flex-direction:column}.controls{grid-template-columns:1fr}.btn{width:100%}.canvasWrap{min-height:300px}.select{width:100%;min-height:44px;padding:12px 14px;font-size:16px}}@media (max-width:640px){.container{padding:16px 12px 40px}.title{font-size:18px}.hint{font-size:12px}.canvasWrap{min-height:240px}}