:root { color-scheme: light dark; font-family: system-ui, sans-serif; --accent: #6386f7; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; }
#save-notice { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 10px 12px; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 8px; background: Canvas; box-shadow: 0 3px 12px #00000012; font-size: 12px; }
#save-status { max-width: 420px; color: color-mix(in srgb, CanvasText 65%, Canvas); }
#save-status[data-state="error"] { color: light-dark(#a23b20, #f5ad97); }
button { font: inherit; color: inherit; background: color-mix(in srgb, CanvasText 6%, Canvas); border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:focus-visible, .workspace-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#viewport { background: var(--workspace-color, Canvas); position: relative; flex: 1; min-height: 0; overflow: clip; overscroll-behavior: contain; }
#workspace-extent { position: relative; z-index: 1; }
#canvas { position: absolute; top: 0; left: 0; transform-origin: top left; }
#workspace-background::before, #workspace-background::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--workspace-ink, CanvasText) 42%, transparent) var(--dot-radius), transparent var(--dot-radius)); background-size: inherit; background-position: inherit; opacity: 0; transition: opacity 160ms ease; }
#workspace-background::before { mask-image: radial-gradient(circle 140px at var(--pointer-x, 0px) var(--pointer-y, 0px), #000 15%, transparent 100%); }
#workspace-background::after { mask-image: radial-gradient(circle 280px at var(--drag-x, 0px) var(--drag-y, 0px), #000 30%, transparent 100%); }
#workspace-background.pointer-nearby::before, #workspace-background.card-nearby::after { opacity: 1; }
.workspace-card { z-index: 1; }
#empty { position: relative; }
@media (prefers-reduced-motion: reduce) { #workspace-background::before, #workspace-background::after { transition: none; } }
.workspace-card { --card-shadow: 0 2px 6px #0000001f, 0 8px 24px #0000001f; position: absolute; top: 0; left: 0; width: 240px; height: 220px; padding: 0; border: 0; border-radius: 24px; background: color-mix(in srgb, CanvasText 5%, Canvas); box-shadow: var(--card-shadow); cursor: grab; touch-action: none; }
.card-handle { display: flex; align-items: center; gap: 8px; height: 42px; user-select: none; }
.grip { color: color-mix(in srgb, CanvasText 40%, Canvas); font-size: 17px; }
.card-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-object { padding: 3px 7px; font-size: 11px; }
.card-name { cursor: text; }
.card-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-name-input { width: 0; padding: 3px 4px; border: 1px solid var(--accent); border-radius: 4px; background: Canvas; color: CanvasText; font-family: inherit; user-select: text; touch-action: auto; }
.preview-slot { width: 100%; height: 100%; overflow: hidden; border-radius: 24px; background: Canvas; cursor: default; touch-action: auto; }
.resize-handle { position: absolute; z-index: 3; touch-action: none; }
.resize-n, .resize-s { left: 12px; right: 12px; height: 8px; }
.resize-n { top: 0; } .resize-s { bottom: 0; }
.resize-e, .resize-w { top: 12px; bottom: 12px; width: 8px; }
.resize-e { right: 0; } .resize-w { left: 0; }
.resize-ne, .resize-nw, .resize-se, .resize-sw { width: 12px; height: 12px; }
.resize-ne { top: 0; right: 0; } .resize-nw { top: 0; left: 0; }
.resize-se { bottom: 0; right: 0; } .resize-sw { bottom: 0; left: 0; }
body.resizing .workspace-card.resizing { cursor: inherit; }
.fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.fallback-kind { font-size: 24px; color: color-mix(in srgb, CanvasText 50%, Canvas); }
.fallback-name { font-size: 13px; overflow-wrap: anywhere; }
.workspace-card.dragging { z-index: 2; border-color: var(--accent); box-shadow: 0 8px 24px #00000028; cursor: grabbing; }
body.dragging { cursor: grabbing; user-select: none; }
/* Only a gesture already grabbed by the outer frame suppresses iframe hits. */
body.dragging .preview-slot { pointer-events: none; }
body.native-dragging .preview-slot { pointer-events: none; }
.workspace-card.native-drop-target { outline: 3px solid #78aaff; outline-offset: 3px; }
#viewport.native-drop-target { box-shadow: inset 0 0 0 3px #78aaff; }
/* The native image replaces the source while the OS owns pointer movement. */
body.native-dragging .native-drag-source { opacity: 0; }
body.native-dragging .native-drag-source,
body.native-dragging .native-drag-source * { pointer-events: none !important; }
#empty { margin: 0; padding: 40px 24px; color: color-mix(in srgb, var(--workspace-ink, CanvasText) 55%, Canvas); }
#interaction-status { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 24px); padding: 8px 12px; border-radius: 8px; background: Canvas; font-size: 12px; pointer-events: none; }
#interaction-status:empty { display: none; }
[hidden] { display: none !important; }

#zoom-controls { position: fixed; bottom: 12px; left: 12px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: Canvas; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); font-size: 12px; }
#zoom-level { min-width: 42px; text-align: center; }

/* Only an ongoing workspace gesture temporarily shields delegated content. */
#viewport.workspace-zooming .preview-slot, #viewport.workspace-panning .preview-slot { pointer-events: none; }
#viewport.pan-ready, #viewport.pan-ready .workspace-card { cursor: grab; }
#viewport.workspace-panning, #viewport.workspace-panning * { cursor: grabbing !important; user-select: none; }

#workspace-background { --dot-radius: 0.8px; --dot-diameter: calc(var(--dot-radius) * 2); position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--workspace-ink, CanvasText) 18%, transparent) var(--dot-radius), transparent var(--dot-radius)); }
#origin-x-axis, #origin-y-axis { position: absolute; top: 0; left: 0; z-index: 1; background: color-mix(in srgb, var(--workspace-ink, CanvasText) 22%, var(--workspace-color, Canvas)); }
#origin-x-axis { top: calc(0px - var(--dot-radius)); width: 100%; height: var(--dot-diameter); }
#origin-y-axis { left: calc(0px - var(--dot-radius)); width: var(--dot-diameter); height: 100%; }
#workspace-origin { position: absolute; z-index: 2; width: 7px; height: 7px; border: 1px solid color-mix(in srgb, CanvasText 40%, transparent); border-radius: 50%; background: Canvas; transform: translate(-50%, -50%); }