.ec{grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start;gap:1.25rem;display:grid;container:ec/inline-size}@container ec (width<=760px){.ec{grid-template-columns:minmax(0,1fr)}}.ec-controls{flex-direction:column;gap:1.1rem;padding:1.25rem;display:flex}.ec-controls .form-group{margin:0}.ec-controls select{width:100%}.ec-field{border:none;min-width:0;margin:0;padding:0}.ec-sizes{gap:.5rem;display:grid}.ec-size{text-align:left;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-base);color:var(--text-secondary);font:inherit;cursor:pointer;transition:var(--transition);grid-template-rows:auto auto;grid-template-columns:44px 1fr;align-items:center;column-gap:.75rem;padding:.65rem .75rem;display:grid}.ec-size strong{color:var(--text-primary);font-size:.92rem}.ec-size>span:last-child{grid-column:2;font-size:.8rem}.ec-size:hover{background:var(--bg-surface-hover)}.ec-size.is-on{border-color:var(--primary);background:var(--primary-alpha)}.ec-size:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.ec-size-icon{opacity:.7;border:1.5px solid;border-radius:5px;grid-row:span 2;width:44px;height:32px;position:relative}.ec-size-icon:after{content:"";background:currentColor;border-radius:2px;position:absolute;left:4px;right:4px}.ec-size-s{align-self:center;height:14px}.ec-size-s:after{top:3px;bottom:3px;right:26px}.ec-size-m:after{height:12px;top:4px;right:26px}.ec-size-l{height:38px}.ec-size-l:after{height:8px;top:4px;right:26px;box-shadow:0 12px 0 -1px,0 18px 0 -1px}.ec-size.is-on .ec-size-icon{color:var(--primary);opacity:1}.ec-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.ec-accent{align-items:center;gap:.5rem;min-height:42px;display:flex}.ec-accent input[type=color]{border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:42px;height:34px;padding:0}.ec-accent code{color:var(--text-secondary);font-size:.82rem}.ec-note{border-radius:var(--radius-sm);color:#fbbf24;background:#f59e0b1a;align-items:flex-start;gap:.5rem;padding:.6rem .75rem;font-size:.84rem;display:flex}.ec-note svg{flex:none;margin-top:.15rem}.ec-code-head{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem;display:flex}.ec-code-head .form-label{margin:0}.ec-code{resize:vertical;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.5}.ec-help{color:var(--text-muted);margin-top:.4rem;font-size:.8rem}.ec-links{flex-wrap:wrap;gap:.5rem;margin-top:.6rem;display:flex}.ec-links a{text-decoration:none}.ec-preview{min-width:0;position:sticky;top:1rem}.ec-preview-head{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.ec-preview-head h2{font-size:1rem}.ec-stage{border-radius:var(--radius-lg);border:1px dashed var(--border-strong);background:repeating-linear-gradient(45deg, transparent 0 10px, #ffffff05 10px 20px), var(--bg-base);margin-top:.75rem;padding:1.5rem}.ec-stage.is-light{background:#e5e7eb;border-color:#0f172a26}.ec-stage.is-phone>iframe{max-width:360px;margin:0 auto}