:root{font-family:system-ui,sans-serif;color:#1f2933;background:#f1f5f9}body,#root{margin:0;min-height:100vh}.layout{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;min-height:100vh;box-sizing:border-box}.panel{order:1;display:flex;flex-direction:column;gap:1rem;padding:1.25rem;background:#fff;border-radius:12px;box-shadow:0 8px 24px #0f172a1f}.panel label{display:flex;flex-direction:column;gap:.35rem;font-weight:600}.panel .field.field--color{position:relative}.panel .field--toggle{flex-direction:row;align-items:center;gap:.5rem}.panel .field--toggle input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:#2563eb}.panel .field-color-controls{position:relative;display:flex;align-items:center;gap:.5rem}.panel .field-color-trigger{width:2.75rem;height:2.75rem;padding:4px;border-radius:8px;border:4px solid #dcdcdc;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:box-shadow .2s ease}.panel .field-color-trigger:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}.panel .field-color-popover{position:absolute;top:calc(100% + .5rem);left:0;z-index:10;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem 1rem 1rem;width:min(240px,100%);border-radius:12px;background:#fff;box-shadow:0 18px 36px #0f172a2e;border:1px solid #e2e8f0}.panel .field-color-close{position:absolute;top:-.5rem;right:-.5rem;padding:0;width:1.4rem;height:1.4rem;border:none;border-radius:999px;background-color:#505050;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.panel .field-color-close:hover,.panel .field-color-close:focus-visible{background:#2563eb1a;color:#1d4ed8;outline:none}.panel .field-color-close svg{width:1rem;height:1rem}.panel .field-color-popover .react-colorful{gap:.75rem;width:100%}.panel .field-color-popover .react-colorful__saturation{border-radius:12px}.panel .field-color-popover .react-colorful__hue{height:12px;border-radius:999px}.panel .field-color-popover .react-colorful__pointer{width:14px;height:14px;box-shadow:0 0 0 2px #fff,0 0 0 4px #0f172a29}.panel .field-color-popover .react-colorful__pointer-fill{border-radius:50%}.panel .field-color-hex-input{font:inherit;padding:.6rem .75rem;border-radius:8px;border:1px solid #cbd5f5;background:#f8fafc;text-transform:uppercase;letter-spacing:.08em}.panel input,.panel select{font:inherit;padding:.6rem .75rem;border-radius:8px;border:1px solid #cbd5f5;background:#f8fafc}.panel .field-reset{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:999px;border:1px solid #cbd5f5;background:#e2e8f0;color:#1f2933;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;margin-top:0}.panel .field-reset svg{width:1rem;height:1rem}.panel .field-reset:disabled{opacity:.55;cursor:default}.panel button{margin-top:auto;padding:.75rem;border:none;border-radius:8px;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}.preview{order:0;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px #94a3b81f,0 12px 32px #0f172a24;padding:1rem;display:flex;justify-content:center;align-items:center;overflow:auto;touch-action:pinch-zoom;overscroll-behavior:contain;min-height:240px}.preview svg{max-width:100%;width:100%;height:auto}@media (min-width: 960px){.layout{display:grid;grid-template-columns:320px 1fr;align-items:stretch;gap:1.5rem;padding:1.5rem}.panel{order:0;padding:1.5rem}.preview{order:0;min-height:0}}