.slide-layout:has(>.layout-surface){display:block;position:relative}
.layout-surface{position:relative;width:100%;height:100%;container-type:inline-size;overflow:hidden;background:#fff;color:#2c2c2c;font-family:Arial,sans-serif}
.slide-layout,.presentation-body{--paper:#fff;--ink:#292929;--muted:#777;--line:#d6d6d6;--accent:#333}
.layout-block{position:absolute;overflow:hidden;box-sizing:border-box}
.layout-block.layout-drawing{overflow:visible;pointer-events:none}
.layout-drawing-svg{display:block;width:100%;height:100%;overflow:visible}
.editor-canvas .layout-drawing-svg [data-drawing-hit]{pointer-events:visiblePainted}
.editor-canvas .layout-drawing-svg [data-drawing-label]{pointer-events:auto;cursor:text}
.drawing-endpoint{display:none;position:absolute;width:12px;height:12px;border:2px solid #fff;outline:1px solid #333;border-radius:50%;background:#333;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;cursor:crosshair;z-index:6}
.is-selected:not(.is-locked)>.drawing-endpoint{display:block}
.editor-canvas .layout-drawing>.layout-resize{pointer-events:auto}
.editor-canvas.has-drawing-tool,.editor-canvas.has-drawing-tool *{cursor:crosshair!important;touch-action:none}
.drawing-label-input{position:absolute;z-index:8;min-width:100px;max-width:90%;padding:4px 6px;box-sizing:border-box;background:white;color:#111;border:1px solid #333;pointer-events:auto;transform:translate(-50%,-50%);font:16px Arial,sans-serif}
.layout-block img,.layout-block video{width:100%;height:100%;object-fit:contain;margin:0;display:block}
.layout-text{width:100%;height:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35;font-weight:400}
.image-compare{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;isolation:isolate}
.image-compare .compare-image{position:absolute;inset:0;overflow:hidden}
.layout-block .image-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--compare-fit,cover);pointer-events:none}
.compare-image{background:#fff}
.compare-before{clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}
.image-compare .compare-label{position:absolute;top:16px;max-width:calc(50% - 30px);padding:5px 9px;background:#111b;color:white;font:13px/1.3 Arial,sans-serif;overflow-wrap:anywhere;pointer-events:none}
.compare-label:empty{display:none}.compare-label-before{left:16px}.compare-label-after{right:16px}
.compare-after .compare-label-after{clip-path:inset(0)}
.image-compare .compare-handle{position:absolute;left:clamp(0px,calc(var(--compare-position) - 22px),calc(100% - 44px));top:0;width:44px;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#111;cursor:ew-resize;touch-action:pan-y;z-index:3;transform:none;box-shadow:none}
.image-compare:before{content:"";position:absolute;left:var(--compare-position);top:0;bottom:0;width:44px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.24) 48%,rgba(0,0,0,.24) 52%,transparent);pointer-events:none;z-index:2}
.image-compare:after{content:"";position:absolute;left:var(--compare-position);top:0;bottom:0;width:1px;transform:translateX(-50%);background:rgba(255,255,255,.9);pointer-events:none;z-index:2}
.image-compare button.compare-handle:hover:not(:disabled),.image-compare button.compare-handle:active,.image-compare button.compare-handle:focus{background:transparent;box-shadow:none;outline:none}
.image-compare .compare-handle svg{display:block;width:20px;height:20px;overflow:visible}
.image-compare .compare-handle:hover .compare-grip{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.28)}
.image-compare .compare-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.92);color:#222;box-sizing:border-box;box-shadow:0 2px 8px #0003;pointer-events:none}
.image-compare .compare-handle:focus-visible span{outline:3px solid #444;outline-offset:3px}
.editor-canvas .compare-handle{touch-action:none}
.editor-canvas .is-locked .compare-handle{cursor:default}
.editor-canvas:has(.layout-surface){aspect-ratio:16/9;min-height:0;display:block}
.editor-canvas .layout-block{cursor:move;touch-action:none;outline:1px dashed transparent}
.editor-canvas .layout-block.is-selected{outline:2px solid #6f6f6f;outline-offset:-2px}
.editor-canvas .layout-block video,.editor-canvas .layout-block img{pointer-events:none}
.layout-resize{display:none;position:absolute;right:0;bottom:0;width:18px;height:18px;background:#6f6f6f;border:2px solid white;cursor:nwse-resize;touch-action:none}
.is-selected>.layout-resize{display:block}
.layout-resize[data-resize="nw"]{left:0;top:0;right:auto;bottom:auto}
.layout-resize[data-resize="ne"]{right:0;top:0;bottom:auto;cursor:nesw-resize}
.layout-resize[data-resize="sw"]{left:0;bottom:0;right:auto;cursor:nesw-resize}
.layout-resize{box-sizing:border-box;width:16px;height:16px;z-index:7}
.layout-resize[data-resize="n"],.layout-resize[data-resize="s"]{left:calc(50% - 8px);right:auto;cursor:ns-resize}
.layout-resize[data-resize="n"]{top:0;bottom:auto}
.layout-resize[data-resize="e"],.layout-resize[data-resize="w"]{top:calc(50% - 8px);bottom:auto;cursor:ew-resize}
.layout-resize[data-resize="w"]{left:0;right:auto}
.layout-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;font-size:12px}
.layout-properties{display:flex;align-items:start;gap:10px;flex-wrap:wrap;padding:14px 0;font-size:12px}
.layout-properties label{display:flex;flex-direction:column;gap:5px}
.layout-properties input[type=number]{width:72px}
.layout-properties textarea{width:min(440px,70vw);min-height:90px}
.layout-properties [hidden]{display:none!important}
.layout-properties input,.layout-properties textarea,.layout-properties select{padding:7px;border:1px solid #ccc;background:#fff}
.layout-properties .layout-source{width:min(350px,70vw)}
.layout-help{font-size:12px;line-height:1.6;color:#6b6b6b}

.layout-surface [hidden]{display:none!important}
.layout-video-fallback{position:absolute;inset:0}
.layout-video-error{position:absolute;bottom:8px;left:8px;padding:5px 8px;background:#ffffffde;color:#2c2c2c;font-size:14px}

.editor-canvas .layout-text.is-editing{cursor:text;user-select:text;touch-action:auto;outline:2px solid #6f6f6f;outline-offset:-2px;overflow:auto}
.editor-canvas .layout-block:has(.is-editing){cursor:text;touch-action:auto}
.editor-canvas .layout-block:has(.is-editing)>.layout-resize{display:none}
#block-overflow{width:100%;color:#925a24}

.editor-canvas.has-layout-grid .layout-surface::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,#6f6f6f30 1px,transparent 1px),linear-gradient(to bottom,#6f6f6f30 1px,transparent 1px);background-size:5% 5%;z-index:1}

/* Editing must not change the text content box relative to published layouts. */
.editor-canvas .layout-text[contenteditable]{border:0;padding:0}
#layout-block-select{max-width:260px;padding:8px}

.crop-controls{display:flex;gap:10px;align-items:start;flex-wrap:wrap;width:100%;padding:12px;background:#efeee8}
.crop-controls .crop-help,.crop-controls [role=status]{width:100%;line-height:1.6}
.crop-controls input[type=range]{width:180px}
.editor-canvas .layout-block.is-cropping{cursor:grab;outline:2px solid #ae742d}
.editor-canvas .layout-block.is-cropping>.layout-resize{display:none}
.editor-canvas .layout-block.is-cropping:active{cursor:grabbing}
#block-crop-mode[aria-pressed=true]{background:#2c2c2c;color:#fff}

.layout-selection{max-width:300px}
.layout-selection summary{cursor:pointer;padding:8px}
.layout-selection select{width:100%;min-width:220px;margin-top:6px}
.layout-selection p{font-size:11px;line-height:1.5;margin-top:6px}
#layout-selection-status{align-self:center;font-size:11px}
.editor-canvas.has-multi-selection .layout-resize{display:none}
.layout-properties:has(#block-w:disabled) #block-x,.layout-properties:has(#block-w:disabled) #block-y{border-color:#6f6f6f}
.layout-arrangement{width:100%;border-top:1px solid #d6d6cc;padding-top:10px}
.layout-arrangement summary{cursor:pointer}
.layout-arrangement>div{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:8px}
.layout-arrangement>p{font-size:11px;color:#6b6b6b;line-height:1.6;margin-top:8px}
.editor-canvas .layout-block.is-locked{cursor:default;outline-style:dotted}
.editor-canvas .layout-block.is-locked>.layout-resize{display:none}
.layout-marquee{position:absolute;border:1px solid #6f6f6f;background:#6f6f6f20;pointer-events:none;z-index:10}

.recovery-panel{margin-top:20px;padding-top:12px;border-top:1px solid #c5c5c5;font-size:11px;line-height:1.6}
.recovery-panel summary{cursor:pointer;font-size:12px}
.recovery-panel p{margin:10px 0;overflow-wrap:anywhere}
.recovery-panel label{display:block;margin:8px 0}
.recovery-panel button{font-size:11px;padding:7px;margin:4px 0}
.recovery-panel select{max-width:100%;display:block;margin-top:6px}
/* One image toolbar beside the canvas, wrapping within narrow editor columns. */
.editor-main>.crop-controls{box-sizing:border-box;max-width:100%;margin-top:12px;font-size:12px;gap:8px}
.crop-controls label{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.crop-controls input{box-sizing:border-box;max-width:100%;padding:6px;border:1px solid #ccc;background:#fff}
.crop-controls input[type=number]{width:72px}
.crop-controls button{max-width:100%;white-space:normal;padding:8px}
.crop-controls .crop-help,.crop-controls [role=status]{flex-basis:100%;overflow-wrap:anywhere}
.crop-controls [hidden]{display:none!important}
.layout-help summary{cursor:pointer}
.layout-help>p{margin-top:6px}

/* Native video controls own input only in explicit playback preview mode. */
.editor-canvas .layout-block.is-video-preview video{pointer-events:auto}
.editor-canvas .layout-block:has(video){cursor:move}
.editor-canvas .layout-block.is-video-preview{cursor:default}
.editor-canvas .layout-block:has(video)>.layout-resize{z-index:7;box-shadow:0 0 0 1px #353535}
.editor-canvas .layout-block.is-video-preview>.layout-resize{display:none}
.video-edit-hint{position:absolute;top:0;left:0;right:0;padding:6px 9px;background:#2e2e2edf;color:white;font-size:12px;line-height:1.4;pointer-events:none;z-index:2}
.is-video-preview>.video-edit-hint{display:none}

.layout-autoplay-hint{position:absolute;top:8px;left:8px;max-width:90%;padding:6px 9px;background:#ffffffde;color:#222;font-size:14px;pointer-events:none}

.layout-video-tools{position:absolute;bottom:8px;left:8px;display:flex;gap:8px;z-index:4}.layout-video-tools button{padding:6px 10px;background:#fffffff0;color:#222;border:1px solid #777;font:inherit;font-size:13px;cursor:pointer}

/* Public playback has one control, independent of video crop. */
.layout-surface .layout-video-tools{inset:auto 16px 16px auto}
.layout-surface .layout-video-tools button{position:static;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #ffffffaa;border-radius:50%;background:#1119;color:white;font:22px Arial,sans-serif;line-height:1}
@media(hover:hover) and (pointer:fine){.layout-video-tools{opacity:0;transition:opacity 160ms}.layout-block:hover>.layout-video-tools,.layout-block:focus-within>.layout-video-tools{opacity:1}}
@media(prefers-reduced-motion:reduce){.layout-video-tools{transition:none}}

.work-viewer .image-compare .compare-handle:focus-visible{outline:none}