/* Editor interface stays independent of the page being edited. */
#cssEditor{position:fixed!important;inset:0 auto 0 0!important;width:400px!important;max-width:calc(100vw - 16px)!important;height:100dvh!important;z-index:1000!important;display:flex;flex-direction:column;gap:9px;padding:16px;background:#f6f6f8;color:#25232b;border-right:1px solid #d9d5df;text-align:left;box-shadow:4px 0 20px #24232b0a;overflow:auto;font:400 13px/1.5 Manrope,Arial,sans-serif}
#cssEditor *{box-sizing:border-box}#cssEditor p{font:400 12px/1.5 Manrope,Arial,sans-serif;margin:0;color:#554e60}#cssEditor strong{font-size:16px}#cssEditor label{font-size:12px;font-weight:600}#cssEditor button,#cssEditor select,#cssEditor input{font:400 12px/1.4 Manrope,Arial,sans-serif;min-height:36px;padding:7px 9px;color:#25232b;border:1px solid #d5d0dc;background:#fff;border-radius:8px;min-width:0;max-width:100%}#cssEditor button{cursor:pointer}#cssEditor button:disabled{opacity:.5;cursor:wait}#cssEditor select{width:100%}#cssEditor .css-editor-heading,#cssEditor .css-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}#cssEditor .css-editor-search{display:flex;gap:6px}#cssEditorSearch{flex:1;width:0}#cssEditor .css-editor-guide{font-size:12px}#cssEditor summary{cursor:pointer;font-weight:600}#cssEditor .css-editor-guide p{margin-top:8px}#cssEditorCode{flex:1 0 260px;min-height:260px;width:100%;padding:10px;border:1px solid #d5d0dc;border-radius:8px;background:#fff;color:#24232b;font:13px/1.55 Consolas,monospace;text-align:left;tab-size:2;resize:vertical;white-space:pre-wrap;overflow-wrap:break-word;overflow:auto}#cssEditorStatus{font:400 12px/1.4 Manrope,Arial,sans-serif;min-height:32px}.css-editor-toggle{position:fixed;left:12px;top:12px;z-index:1001;border:1px solid #d5d0dc;border-radius:10px;background:#f6f6f8;color:#25232b;padding:10px;font:600 13px/1.4 Manrope,Arial,sans-serif;cursor:pointer}.css-editor-toggle:focus-visible{outline:2px solid #662288}body:not(.css-editor-hidden) .css-editor-toggle{display:none}body.css-editor-hidden #cssEditor{display:none!important}
@media(min-width:1280px){body.css-editor-ready:not(.css-editor-hidden){padding-left:420px}}
@media(max-width:1279px){#cssEditor{box-shadow:8px 0 30px #24232b33}}

#cssEditor .css-editor-heading{position:sticky;top:0;background:#f6f6f8;z-index:1;padding-bottom:4px}

#cssEditor .css-editor-measure{position:absolute;left:-10000px;top:0;padding:10px;font:13px/1.55 Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word;text-align:left}

@media(max-width:1279px){body:not(.css-editor-ready) #cssEditor{display:none!important}}

/* Device previews have a real viewport: CSS media queries and JS use its width. */
#cssEditor .css-device-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#cssEditor .css-device-buttons button[aria-pressed="true"]{background:#e9e0ef;border-color:#9974ac;font-weight:600}
#cssDeviceStatus{font:400 12px/1.4 Manrope,Arial,sans-serif;color:#554e60;min-height:17px}
#cssDevicePreview{position:fixed;inset:0 0 0 420px;z-index:500;background:#e9e7eb;display:flex;justify-content:center;align-items:flex-start;padding:16px;overflow:hidden}
#cssDeviceFrame{display:block;flex:none;max-width:none!important;border:0;background:#fff;box-shadow:0 4px 24px #24232b22;transform-origin:top center}
body.css-device-mode{overflow:hidden!important}
body.css-device-mode > :not(#cssEditor):not(#cssEditorToggle):not(#cssDevicePreview){display:none!important}
body.css-editor-hidden #cssDevicePreview{left:0}
@media(max-width:1279px){#cssDevicePreview{left:0}}