/* Site embed only (tools/sync-panel.sh): the square editor and its preview dots, nothing else.
   The page around the card is transparent so a point dragged past the square shows over the site. */
:root { color-scheme: dark; }   /* same scheme as the site, or Chrome paints the iframe opaque white */
html, body { background: transparent !important; overflow: hidden; scrollbar-gutter: auto !important; }
body { padding: 150px 0 70px !important; }
.sim-bar, .ae-tab, #toast, #tip, .oc-libwrap, #libwrap { display: none !important; }
.sim-stage { display: block !important; padding: 0 !important; }
.ae-dock, .ae-body, .oc-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; transition: none !important; }
.ae-dock { margin: 0 !important; }
.ae-body { max-height: none !important; overflow: visible !important; }
.oc-main > *:not(#canvas):not(.oc-pvrow) { display: none !important; }
.oc-main { background: #131316; border: 1px solid #1C1C21; border-radius: 14px; padding: 12px 12px 8px; overflow: visible !important; }
.oc-canvas { aspect-ratio: 1 !important; overflow: visible !important; }
.sim-stage, .ae-dock, .ae-body, .oc-panel, #panel, .oc-main, #main { overflow: visible !important; }   /* nothing may clip a point above the square */
.oc-pvrow { margin-top: 8px !important; overflow: visible !important; }
.oc-pvbar { height: 46px !important; margin: -14px 0 !important; position: relative; z-index: 1; }   /* room for the glow: no cropped square */