.field-designer{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 32px}@media(min-width:992px){.field-designer{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}.field{margin:0;padding:0;width:100%;max-width:min(100vw - 48px,800px);aspect-ratio:1 / 1;height:auto;overflow:hidden;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--bg-elevated);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;touch-action:none}@media(min-width:992px){.field{max-width:none}}#container{flex-shrink:0;margin:0;overflow:hidden;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#container .konvajs-content,#container canvas{touch-action:none}.side-panel{padding:18px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--bg-elevated);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}.side-panel-heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}.toolbar-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--touch-min);padding:11px 16px;border:none;border-radius:999px;font-family:inherit;font-weight:700;font-size:.95rem;line-height:1;color:var(--on-accent);background:var(--accent);box-shadow:0 10px 22px var(--accent-glow);cursor:pointer;transition:transform var(--duration-fast) var(--ease-press),filter var(--duration-fast) var(--ease-out),background-color var(--duration) var(--ease-out)}.toolbar-btn:hover{color:var(--on-accent);filter:brightness(1.06);transform:translateY(-1px)}.toolbar-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.toolbar-btn:active{transform:scale(.98)}.toolbar-btn--secondary{color:var(--text-strong);background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--hairline);box-shadow:none}.toolbar-btn--secondary:hover{color:var(--text-strong);background:color-mix(in srgb,var(--text) 10%,transparent);border-color:color-mix(in srgb,var(--text) 24%,transparent)}.toolbar-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-toggle{display:flex;align-items:center;gap:12px;min-height:var(--touch-min);padding:6px 2px;cursor:pointer;-webkit-user-select:none;user-select:none}.field-toggle+.field-toggle{margin-top:2px}.field-toggle-input{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;flex:0 0 auto;margin:0;border:1.5px solid var(--hairline);border-radius:6px;background:var(--input-bg);cursor:pointer;display:grid;place-items:center;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.field-toggle-input:before{content:"";width:.62rem;height:.62rem;border-radius:2px;transform:scale(0);transition:transform var(--duration-fast) var(--ease-press);background:var(--on-accent);box-shadow:0 0 0 2px var(--accent) inset;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}.field-toggle-input:checked{background:var(--accent);border-color:var(--accent)}.field-toggle-input:checked:before{transform:scale(1)}.field-toggle-input:hover{border-color:var(--accent-2)}.field-toggle-input:focus-visible{outline:none;box-shadow:var(--focus-ring)}.field-toggle-label{color:var(--text);font-size:.95rem;line-height:1.3}.field-toggle:hover .field-toggle-label{color:var(--text-strong)}.field-names{display:flex;flex-direction:column;gap:8px}.field-input{width:100%;min-height:var(--touch-min);padding:10px 14px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text);font-family:inherit;font-size:.95rem;line-height:1.3;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.field-input::placeholder{color:var(--muted)}.field-input:hover{border-color:color-mix(in srgb,var(--text) 24%,transparent)}.field-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}.field-input--label{font-weight:600}.field-divider{border:none;border-top:1px solid var(--hairline);margin:2px 0;height:0}.how-to{margin:0 0 20px;padding:18px 20px;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--hairline);box-shadow:var(--shadow)}.how-to h2{margin:0 0 12px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}.how-to ol{margin:0;padding-left:1.25rem;color:var(--text);font-size:.95rem;line-height:1.6}.how-to li+li{margin-top:6px}.how-to strong{color:var(--text-strong);font-weight:600}.file-upload-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.alert-container{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;width:min(92vw,460px);pointer-events:none}.field-alert{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:12px 14px 12px 16px;border-radius:var(--radius-sm);background:var(--danger-bg);border:1px solid var(--danger-edge);color:var(--danger-fg);font-size:.92rem;line-height:1.4;box-shadow:var(--shadow);animation:field-alert-in var(--duration) var(--ease-out) both}.field-alert strong{color:var(--danger-fg);font-weight:700;margin-right:4px}.field-alert-close{flex:0 0 auto;width:var(--touch-min);min-height:var(--touch-min);margin:-4px -6px -4px 0;border:none;background:transparent;color:var(--danger-fg);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:999px;transition:background-color var(--duration-fast) var(--ease-out)}.field-alert-close:hover{background:color-mix(in srgb,var(--danger-fg) 14%,transparent)}.field-alert-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}@keyframes field-alert-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.toolbar-btn,.field-toggle-input,.field-input,.field-alert{transition:none}.field-alert{animation:none}}