[data-post-editor=notepad][data-animating=true]{grid-template-columns:minmax(0,1fr) 330px}
[data-post-editor=notepad][data-animating=true] :is(.notepad-canvas-formats,.notepad-edit-actions,.notepad-preview-footer,.notepad-inline-layer){display:none!important}
[data-post-editor=notepad][data-animating=true] .notepad-preview-wrap{display:flex;align-items:center;justify-content:center;height:auto;max-width:100%}
[data-post-editor=notepad][data-animating=true] .app-preview-stage{border-bottom:0;border-radius:0}
.notepad-workspace .ios-animation-toggle{margin-left:auto}
.notepad-workspace:not([data-animating=true]) .notepad-edit-actions{flex:1;justify-content:flex-end;margin-left:0}
@media(max-width:1100px){[data-post-editor=notepad][data-animating=true]{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:800px){[data-post-editor=notepad][data-animating=true]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.notepad-workspace .ios-animation-toggle{margin:0 0 0 auto}.notepad-workspace:not([data-animating=true]) .notepad-edit-actions{flex-basis:100%;justify-content:space-between}}

/* Give the palette its own breathing room instead of touching the size inputs. */
.notepad-animation-background-controls{margin-top:22px;padding-top:18px;border-top:1px solid #e9ede6}
.app-page .notepad-animation-background-controls h4{margin:0 0 12px;font-size:12px;font-weight:600;line-height:1.5;color:#344130}
.notepad-animation-background-controls .notepad-backgrounds{gap:8px;margin:14px 0 16px;padding:2px}
.notepad-animation-background-controls .notepad-backgrounds button{display:block;width:100%;height:34px;min-width:0;padding:3px;border:1px solid #e1e5dd;border-radius:9px;background:#fff;box-shadow:none}
.notepad-animation-background-controls .notepad-backgrounds button span{display:block;height:100%;border-radius:5px;background:var(--notepad-swatch)}
.notepad-animation-background-controls .notepad-backgrounds button[aria-pressed=true]{border-color:#2954ef;box-shadow:0 0 0 2px #2954ef18}
.notepad-animation-background-controls .notepad-backgrounds button:focus-visible{outline:2px solid #2954ef;outline-offset:2px}
.notepad-animation-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.notepad-animation-color{display:grid;gap:7px;min-width:0;font-size:11px;color:#60705b}
.notepad-color-control{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid #dce1d8;border-radius:8px;background:#fff;padding:9px 7px;font-size:10px;font-variant-numeric:tabular-nums}
.notepad-color-control input[type=color]{display:block;width:24px;height:24px;min-width:24px;padding:0;border:0;border-radius:5px;background:transparent;appearance:none;cursor:pointer}
.notepad-color-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}.notepad-color-control input[type=color]::-webkit-color-swatch{border:1px solid #0001;border-radius:5px}.notepad-color-control input[type=color]::-moz-color-swatch{border:1px solid #0001;border-radius:5px}
.notepad-color-control:focus-within{outline:2px solid #2954ef;outline-offset:2px}
.notepad-window-size-help{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#7b877a;font-size:10px;line-height:1.6}
.notepad-window-size-help button{flex-shrink:0;border:1px solid #d8e0f5;border-radius:6px;padding:5px 7px;background:#f3f6ff;color:#2954ef;font:inherit;font-weight:500;cursor:pointer}.notepad-window-size-help button:hover{background:#e9efff}.notepad-window-size-help button:focus-visible{outline:2px solid #2954ef;outline-offset:2px}

.notepad-crop-area[data-top-crop=true] span{top:auto;bottom:calc(100% + 7px)}