: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; top: 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%); }

#drawing-surface { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#drawing-surface path { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#drawing-surface.pencil-active { z-index: 4; pointer-events: auto; touch-action: none; cursor: crosshair; }
.pencil-tools { position: fixed; right: 20px; bottom: 20px; z-index: 6; display: flex; flex-direction: column; gap: 12px; align-items: center; }
#pencil-modes { display: flex; flex-direction: column; gap: 12px; }
.pencil-fab { width: 48px; height: 48px; padding: 12px; display: grid; place-items: center; border-radius: 50%; color: CanvasText; background: Canvas; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent); box-shadow: 0 3px 12px #00000020; }
.pencil-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pencil-fab[aria-pressed="true"] { color: Canvas; background: CanvasText; }

#background-tools { position: fixed; right: 140px; bottom: 20px; z-index: 6; }
.background-tool { position: relative; cursor: pointer; }
#background-color { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.background-tool:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Detail changes preserve each saved world rectangle. */
.card-icon { display: none; }
.card-icon svg, .fallback-kind svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fallback-kind { display: block; width: 36px; height: 36px; }
.workspace-card[data-presentation="compact"] { cursor: default; }
.workspace-card[data-presentation="compact"] .card-handle,
.workspace-card[data-presentation="compact"] .resize-handle,
.workspace-card[data-presentation="compact"] .fallback-name { display: none; }
.workspace-card[data-presentation="compact"][data-kind="file"] .preview-slot { pointer-events: none; }
.workspace-card[data-presentation="icon"] { padding: 0; background: color-mix(in srgb, CanvasText 8%, Canvas); cursor: pointer; }
.workspace-card[data-presentation="icon"] .card-handle,
.workspace-card[data-presentation="icon"] .preview-slot,
.workspace-card[data-presentation="icon"] .resize-handle { display: none; }
.workspace-card[data-presentation="icon"] .card-icon { display: block; pointer-events: auto; cursor: pointer; position: absolute; width: var(--icon-size); height: var(--icon-size); left: 50%; top: 50%; transform: translate(-50%, -50%); color: color-mix(in srgb, CanvasText 65%, Canvas); }
.pencil-tools[hidden] { display: none; }

/* A small workspace can retain detailed contents without offering layout edits. */
#viewport[data-presentation="compact"] .workspace-card:not([data-presentation="icon"]) { cursor: default; }
#viewport[data-presentation="compact"] .resize-handle,
#viewport[data-presentation="compact"] .grip { display: none; }

/* Mark an openable workspace without changing its layout or intercepting input. */
#viewport[data-presentation="compact"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) {
  #viewport[data-presentation="compact"]:hover::after { border-color: var(--accent); }
}
#viewport[data-presentation="compact"]:focus-visible::after { border-color: var(--accent); }

/* Saved rectangles describe content; hover chrome lives outside them. */
.workspace-card[data-presentation="full"] {
  --frame-side: 10px;
  --frame-top: 52px;
  --frame-bottom: 10px;
  --header-top: -42px;
  --frame-halo-x: 8px;
  --frame-halo-y: 8px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}
.workspace-card[data-presentation="full"].frame-below {
  --frame-top: 10px; --frame-bottom: 52px; --header-top: 100%;
}
.workspace-card[data-presentation="full"] .preview-slot { position: relative; pointer-events: auto; box-shadow: var(--card-shadow); }
.workspace-card[data-presentation="full"] .card-handle {
  position: absolute; left: 0; right: 0; top: var(--header-top); height: 42px;
}
.workspace-card[data-presentation="full"] .card-handle,
.workspace-card[data-presentation="full"] .resize-handle { visibility: hidden; pointer-events: none; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) {
  z-index: 2;
  pointer-events: auto;
}
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, .dragging) { z-index: 3; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .preview-slot { box-shadow: none; }
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .card-handle,
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing) .resize-handle {
  visibility: visible; pointer-events: auto;
}
/* Backdrop and hit halo retain hover across the outside overlay. */
.workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing)::before {
  content: ''; position: absolute;
  top: calc(0px - var(--frame-top)); bottom: calc(0px - var(--frame-bottom));
  left: calc(0px - var(--frame-side)); right: calc(0px - var(--frame-side));
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 24px; background: Canvas; box-shadow: var(--card-shadow);
  z-index: -1; pointer-events: auto;
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"]:is(:hover, .frame-hover, :focus-within, .dragging, .name-editing)::after {
  content: ''; position: absolute; z-index: -2;
  top: calc(0px - var(--frame-top) - var(--frame-halo-y));
  bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y));
  left: calc(0px - var(--frame-side) - var(--frame-halo-x));
  right: calc(0px - var(--frame-side) - var(--frame-halo-x));
  pointer-events: auto;
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-n, .resize-s) {
  left: 2px; right: 2px; height: calc(var(--frame-halo-y) + 4px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-n { top: calc(0px - var(--frame-top) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-s { bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-e, .resize-w) {
  top: calc(12px - var(--frame-top)); bottom: calc(12px - var(--frame-bottom)); width: calc(var(--frame-halo-x) + 4px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-e { right: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] .resize-w { left: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-nw, .resize-se, .resize-sw) {
  width: calc(var(--frame-halo-x) + 12px); height: calc(var(--frame-halo-y) + 12px);
}
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-nw) { top: calc(0px - var(--frame-top) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-se, .resize-sw) { bottom: calc(0px - var(--frame-bottom) - var(--frame-halo-y)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-ne, .resize-se) { right: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
#viewport[data-presentation="full"] .workspace-card[data-presentation="full"] :is(.resize-nw, .resize-sw) { left: calc(0px - var(--frame-side) - var(--frame-halo-x)); }
.workspace-card[data-presentation="full"].dragging { box-shadow: none; }
.workspace-card[data-presentation="full"].dragging::before { border-color: var(--accent); box-shadow: 0 8px 24px #00000028; }
body.dragging .workspace-card[data-presentation="full"] .preview-slot { pointer-events: none; }
body.native-dragging .workspace-card[data-presentation="full"] .preview-slot { pointer-events: none; }


.workspace-context-menu, .workspace-context-submenu { position: fixed; z-index: 10; width: min(190px, calc(100vw - 16px)); padding: 4px; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 8px; background: Canvas; color: CanvasText; box-shadow: 0 6px 20px #0003; font-size: 13px; }
.workspace-context-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 4px; text-align: left; white-space: nowrap; }
.workspace-context-menu button:hover, .workspace-context-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 18%, Canvas); outline: none; }
.workspace-context-submenu { position: absolute; top: -1px; left: calc(100% - 3px); }
.workspace-context-menu[data-side="left"] .workspace-context-submenu { left: auto; right: calc(100% - 3px); }
.workspace-context-menu[data-side="below"] .workspace-context-submenu { left: 0; top: 100%; }

.workspace-text-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.workspace-text { position: absolute; pointer-events: auto; font-family: system-ui, sans-serif; line-height: 1.25; border: 1px solid transparent; background: transparent; }
.workspace-text-content, .workspace-text-editor { width: 100%; height: 100%; padding: 4px; margin: 0; font: inherit; color: inherit; line-height: inherit; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; text-align: start; }
.workspace-text-editor { display: block; resize: none; outline: none; border: 0; border-radius: 0; background: transparent; user-select: text; }
.workspace-text:hover, .workspace-text:focus-visible, .workspace-text.text-selected { border-color: var(--accent); outline: none; }
.text-move, .text-resize { display: none; position: absolute; padding: 0; border-radius: 3px; background: Canvas; color: CanvasText; touch-action: none; }
.text-move { left: -1px; top: -22px; width: 28px; height: 22px; cursor: move; font-size: 17px; }
.text-resize { right: -5px; bottom: -5px; width: 12px; height: 12px; cursor: nwse-resize; }
.workspace-text.text-selected .text-move, .workspace-text.text-selected .text-resize { display: block; }
.text-readonly .text-move, .text-readonly .text-resize { display: none !important; }
.text-tool-toggle { position: fixed; right: 80px; bottom: 20px; z-index: 6; font: bold 24px Georgia, serif; }
.workspace-text-toolbar { position: fixed; right: 20px; bottom: 82px; z-index: 7; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 40px); padding: 8px; border: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-radius: 8px; background: Canvas; color: CanvasText; font-size: 12px; }
.workspace-text-toolbar label { display: flex; align-items: center; gap: 4px; }
.workspace-text-toolbar input[type="number"] { width: 58px; padding: 4px; color: inherit; background: Canvas; border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); }
.workspace-text-toolbar input[type="color"] { width: 32px; height: 28px; padding: 0; }
.workspace-text-toolbar button[aria-pressed="true"] { background: CanvasText; color: Canvas; }
#viewport.text-tool-active { cursor: text; }

#workspace-tools { position: fixed; right: 20px; bottom: 20px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#tools-panel { position: relative; display: flex; align-items: flex-end; gap: 12px; }
#tools-panel #background-tools, #tools-panel .text-tool-toggle, #tools-panel .pencil-tools { position: relative; right: auto; bottom: auto; }
#tools-panel .pencil-tools { gap: 0; }
#tools-panel #pencil-modes { position: absolute; right: 0; bottom: 60px; }
#tools-panel .workspace-text-toolbar { position: absolute; right: 0; bottom: 60px; width: max-content; }
#tools-toggle[aria-expanded="true"] { color: Canvas; background: CanvasText; }

/* Selection chrome never intercepts preview controls or changes saved rectangles. */
#viewport { user-select: none; -webkit-user-select: none; }
#viewport input, #viewport textarea, #viewport [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
.workspace-card.item-selected { outline: 2px solid var(--workspace-selection, var(--accent)); outline-offset: 3px; }
.workspace-card.item-selected > .preview-slot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--workspace-selection, var(--accent)) 24%, transparent); }
.workspace-marquee { position: absolute; z-index: 10; pointer-events: none; border: 1px solid var(--workspace-selection, var(--accent)); background: color-mix(in srgb, var(--workspace-selection, var(--accent)) 14%, transparent); }
#viewport.workspace-selecting .preview-slot { pointer-events: none; }

.workspace-actions { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 8px; background: Canvas; font-size: 12px; }
.workspace-actions span:empty { display: none; }
.workspace-actions button:disabled { opacity: .45; cursor: default; }
.workspace-actions-menu { position: fixed; z-index: 12; display: grid; gap: 4px; width: 190px; padding: 6px; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 8px; background: Canvas; box-shadow: 0 6px 24px #0003; }
.workspace-file-confirm { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #0005; }
.workspace-file-confirm > div { max-width: calc(100vw - 32px); padding: 20px; border-radius: 12px; background: Canvas; color: CanvasText; box-shadow: 0 8px 32px #0004; }
.workspace-file-confirm button { margin-right: 8px; }