@media (min-width:801px){html,body{height:100%;overflow:hidden}.topbar{position:sticky;top:0;z-index:20;height:72px;min-height:72px}.builder{height:calc(100vh - 72px);min-height:0;overflow:hidden;align-items:start;padding:0 28px}.controls{height:100%;max-height:100%;overflow-y:auto;align-self:stretch;padding:40px 24px 56px}.preview-panel{position:sticky;top:0;height:100%;max-height:100%;overflow:auto;align-self:start;justify-content:flex-start;padding-top:40px}}
@media (max-width:800px){html,body{height:auto;overflow:auto}.builder{height:auto;min-height:0;overflow:visible;padding:28px 20px 40px}.controls{height:auto;max-height:none;overflow:visible}.preview-panel{position:static;height:auto;max-height:none;overflow:visible;padding-top:0}}

.segmented-four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.motion-section{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--border)}.motion-actions{display:flex;gap:10px}.motion-actions button{flex:1}.motion-section>.control-label{display:block}
.webm-error{margin:0;color:var(--orange);font-size:12px;line-height:1.4}
.actions button:disabled{opacity:.45;cursor:not-allowed;transform:none}
:root{--cream:#f3f2ed;--charcoal:#171717;--orange:#c76315;--olive:#6a802e;--border:rgba(23,23,23,.16);--surface:rgba(255,255,255,.42)}*{box-sizing:border-box}html{background:var(--cream)}body{min-width:320px;margin:0;background:var(--cream);color:var(--charcoal);font-family:Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}.topbar{min-height:72px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.topbar strong,.back-link{font-size:14px;font-weight:400}.back-link{color:inherit;text-decoration:none}.builder{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:clamp(32px,6vw,80px);padding:40px 28px 56px}.controls{align-self:start;padding:24px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.2);display:flex;flex-direction:column;gap:23px}.control-group{display:grid;gap:9px}.control-group label,.control-label{color:rgba(23,23,23,.72);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}input,select,button{appearance:none;border:1px solid rgba(23,23,23,.24);border-radius:10px;color:inherit}input:not([type=checkbox]):not([type=range]),select{width:100%;padding:12px 14px;background:var(--surface);transition:border-color .16s,box-shadow .16s,background-color .16s}input:not([type=checkbox]):not([type=range]):hover,select:hover{border-color:rgba(23,23,23,.32);background:#fff}input:not([type=checkbox]):not([type=range]):focus,select:focus{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(199,99,21,.2);background:#fff}select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 15px center;background-repeat:no-repeat}.segmented-control,.monogram-choices,.position-grid{display:grid;gap:6px}.segmented-control{grid-template-columns:repeat(5,minmax(0,1fr));padding:4px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.24)}.segmented-two{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-three{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-control button,.position-grid button,.monogram-choices button{padding:9px 7px;border-color:transparent;background:transparent;font-size:12px}.segmented-control button[aria-pressed=true],.position-grid button[aria-pressed=true],.monogram-choices button[aria-pressed=true]{border-color:rgba(23,23,23,.2);background:var(--charcoal);color:var(--cream)}.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.color-swatch{min-height:58px;padding:8px;display:flex;align-items:flex-end;border-color:transparent;font-size:11px;text-align:left}.swatch-cream{background:var(--cream);border-color:rgba(23,23,23,.2)}.swatch-charcoal{background:var(--charcoal);color:var(--cream)}.swatch-orange{background:var(--orange);color:var(--cream)}.swatch-olive{background:var(--olive);color:var(--cream)}.color-swatch[aria-pressed=true]{outline:2px solid var(--charcoal);outline-offset:2px}.monogram-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.monogram-choices button{display:flex;align-items:center;justify-content:center;gap:8px}.monogram-choices span{width:12px;height:12px;display:block;border-radius:50%}.dot-orange{background:var(--orange)}.dot-charcoal{background:var(--charcoal)}.toggle-control{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;cursor:pointer}.toggle-switch{position:relative;width:42px;height:24px;flex:0 0 auto}.toggle-switch input{position:absolute;width:1px;height:1px;opacity:0}.toggle-track{width:100%;height:100%;display:block;border:1px solid rgba(23,23,23,.26);border-radius:999px;background:rgba(23,23,23,.12)}.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--cream);transition:transform .16s}.toggle-switch input:checked+.toggle-track{border-color:var(--charcoal);background:var(--charcoal)}.toggle-switch input:checked+.toggle-track .toggle-thumb{transform:translateX(18px)}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid var(--orange);outline-offset:3px}.range-group label{display:flex;justify-content:space-between;gap:12px}.range-group output{color:rgba(23,23,23,.58);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none}input[type=range]{width:100%;height:20px;padding:0;border:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(23,23,23,.18)}input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;appearance:none;border:2px solid var(--cream);border-radius:50%;background:var(--charcoal);box-shadow:0 0 0 1px var(--charcoal)}input[type=range]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}button{padding:12px 15px;background:transparent;font-size:13px;cursor:pointer;transition:background-color .16s,border-color .16s,transform .16s}button:hover{border-color:var(--charcoal);transform:translateY(-1px)}button:active{transform:translateY(0)}button:focus-visible{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(199,99,21,.2)}.actions{display:flex;gap:12px;padding-top:2px}.primary-button{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}.primary-button:hover{background:rgba(23,23,23,.88)}.preview-panel{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.canvas-wrap{width:min(100%,780px);padding:18px;background:rgba(23,23,23,.07)}canvas{display:block;width:100%;height:auto;background:var(--cream);cursor:default;touch-action:none}.canvas-interactive{cursor:grab}.canvas-dragging{cursor:grabbing}.canvas-tip,.canvas-size{width:min(100%,780px);color:rgba(23,23,23,.58);font-size:12px}.canvas-tip{margin:12px 0 0}.canvas-size{margin:6px 0 0}@media(max-width:800px){.topbar{padding:16px 20px}.builder{min-height:0;grid-template-columns:1fr;gap:32px;padding:28px 20px 40px}.controls{padding:20px}.preview-panel{order:-1}.canvas-wrap,.canvas-tip,.canvas-size{width:100%}}