* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px system-ui, sans-serif; color: #20242b; background: #f7f8fa; }
body { display: flex; flex-direction: column; }
.pui-login { width: min(360px, calc(100% - 32px)); margin: 48px auto; padding: 24px; background: #fff; border: 1px solid #b7bec8; border-radius: 8px; }
.pui-login h1 { margin: 0 0 20px; font-size: 24px; }
.pui-auth-prompt { margin: 0 0 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pui-login form, .pui-login label { display: flex; flex-direction: column; gap: 8px; }
.pui-login form { gap: 16px; }
.pui-login input:not([type=hidden]) { min-width: 0; font: inherit; padding: 8px; border: 1px solid #b7bec8; border-radius: 4px; }
.pui-login [role=alert] { margin: 0; color: #b00020; }
.pui-login [role=alert]:empty { display: none; }
#pui-status { margin: 0; padding: 5px 12px; background: #e9edf2; font-size: 12px; min-height: 26px; }
.pui-session-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 4px 8px; }
.pui-session-note { display: block; margin-top: 4px; }
#pui-root { display: flex; flex: 1; min-height: 0; min-width: 0; }
.pui-Window, .pui-VBox, .pui-HBox, .pui-Scroll { display: flex; min-width: 0; min-height: 0; }
.pui-Window, .pui-VBox, .pui-Scroll { flex-direction: column; }
.pui-Window { flex: 1; padding: 12px; gap: 8px; overflow: hidden; }
.pui-VBox, .pui-HBox { gap: 8px; align-items: center; }
.pui-HBox { flex-direction: row; }
.pui-Label { display: inline-block; white-space: pre-wrap; flex-shrink: 0; }
.pui-Label[role=button]:hover { color: #245cca; }
.pui-Label[role=button]:focus-visible { outline: 2px solid #245cca; outline-offset: 2px; }
.pui-Button, .pui-TextEdit, .pui-TextField, .pui-MaskedField { font: inherit; color: inherit; padding: 5px 10px; border: 1px solid #b7bec8; border-radius: 4px; min-width: 0; }
.pui-Button { background: #fff; cursor: pointer; align-self: flex-start; }
.pui-Button:disabled { opacity: .45; cursor: default; }
.pui-TextEdit, .pui-TextField, .pui-MaskedField { background: #fff; }
.pui-Text { margin: 0; padding: 10px; white-space: pre; font: 13px ui-monospace, monospace; }
.pui-Html { min-width: 0; min-height: 0; overflow-wrap: anywhere; }
.pui-Spacer { min-width: 0; min-height: 0; }
.pui-Divider { align-self: stretch; width: 100%; border: 0; border-top: 1px solid #c5cad2; margin: 0; }
.pui-Divider.pui-divider-vertical { width: auto; border-top: 0; border-left: 1px solid #c5cad2; }
.pui-Scroll { overflow: auto; }
.pui-Grid { display: grid; gap: 8px; min-width: 0; min-height: 0; align-content: start; }
.pui-Grid > .pui-Label { display: flex; align-items: center; }
.pui-Stack { display: grid; min-width: 0; min-height: 0; }
.pui-Stack > * { grid-area: 1 / 1; }
.pui-ProgressBar { width: 100%; flex: 0 0 auto; }
.pui-Views, .pui-Tabs, .pui-Tab, .pui-tab-pages { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pui-Tabs { border: 1px solid #b7bec8; border-radius: 4px; background: #fff; --tab-indicator: inset 0 -3px #245cca; }
.pui-tab-pages { flex: 1 1 auto; padding: 8px; }
.pui-Views > [hidden], .pui-tab-pages > [hidden] { display: none !important; }
.pui-tab-list { display: flex; flex: 0 0 auto; min-width: 0; min-height: 0; overflow: auto; background: #e9edf2; border-bottom: 1px solid #b7bec8; border-radius: 3px 3px 0 0; }
.pui-tab-list > button { flex: 0 0 auto; font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: 8px 12px; cursor: pointer; white-space: nowrap; text-align: start; }
.pui-tab-list > button:hover { background: #f0f4fa; }
.pui-tab-list > button[aria-selected=true] { color: #245cca; background: #fff; box-shadow: var(--tab-indicator); }
.pui-tab-list > button:focus-visible { outline: 2px solid #245cca; outline-offset: -3px; }
.pui-Tabs[data-position=s] { flex-direction: column-reverse; --tab-indicator: inset 0 3px #245cca; }
.pui-Tabs[data-position=w] { flex-direction: row; --tab-indicator: inset -3px 0 #245cca; }
.pui-Tabs[data-position=e] { flex-direction: row-reverse; --tab-indicator: inset 3px 0 #245cca; }
.pui-Tabs[data-position=s] > .pui-tab-list { border-bottom: 0; border-top: 1px solid #b7bec8; border-radius: 0 0 3px 3px; }
.pui-Tabs[data-position=w] > .pui-tab-list, .pui-Tabs[data-position=e] > .pui-tab-list { flex-direction: column; }
.pui-Tabs[data-position=w] > .pui-tab-list { border-bottom: 0; border-right: 1px solid #b7bec8; border-radius: 3px 0 0 3px; }
.pui-Tabs[data-position=e] > .pui-tab-list { border-bottom: 0; border-left: 1px solid #b7bec8; border-radius: 0 3px 3px 0; }
.pui-Checkbox, .pui-RadioButton { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; }
.pui-ComboBox { display: inline-flex; min-width: 0; flex: 0 0 auto; align-self: flex-start; }
.pui-ComboBox > select, .pui-ComboBox > input { flex: 1 1 auto; font: inherit; color: inherit; min-width: 0; padding: 5px 10px; border: 1px solid #b7bec8; border-radius: 4px; background: white; }
.pui-ComboBox > input { border-right: 0; border-radius: 4px 0 0 4px; }
.pui-ComboBox > button { flex: 0 0 auto; font: inherit; color: inherit; margin: 0; padding: 5px 8px; border: 1px solid #b7bec8; border-radius: 0 4px 4px 0; background: white; cursor: pointer; }
.pui-ComboBox:has(> input:not([hidden]):focus-visible) { outline: auto; border-radius: 4px; }
.pui-ComboBox > input:focus-visible { outline: none; }
.pui-ComboBox > button:disabled { cursor: default; }
.pui-ComboBox > [hidden] { display: none !important; }
.pui-ComboBox > :disabled { opacity: .45; }
.pui-Canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.pui-Canvas > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pui-Table { overflow: auto; min-width: 0; min-height: 0; }
.pui-Table table { border-collapse: collapse; background: white; }
.pui-Table th, .pui-Table td { border: 1px solid #b7bec8; padding: 5px 8px; white-space: pre-wrap; }
.pui-Table th { background: #e9edf2; }
.pui-Table td:focus { outline: 2px solid #245cca; outline-offset: -2px; }
.pui-Table input, .pui-Table select { font: inherit; color: inherit; max-width: 100%; border: 0; outline: none; margin: 0; padding: 0; background: transparent; }
.pui-cell-editor { display: inline-flex; align-items: center; gap: 0; min-width: 0; max-width: 100%; }
.pui-cell-editor > input, .pui-cell-editor > select { min-width: 0; }
.pui-cell-editing { position: relative; }
.pui-cell-size { visibility: hidden; }
.pui-cell-editing > .pui-cell-editor { position: absolute; inset: 0; display: flex; overflow: hidden; }
.pui-cell-editing > .pui-cell-editor > span { flex: 0 0 auto; white-space: pre; }
.pui-cell-editing input[type=text] { flex: 1 1 0; width: 0; height: 100%; line-height: inherit; }
.pui-Table td:focus-within { background: #f0f4fa; }
.pui-cell-error { display: block; color: #b00020; font-size: 12px; }
.pui-Image { object-fit: contain; }

.pui-canvas-fps { position: absolute; right: 8px; top: 8px; padding: 4px; color: white; background: #101a2b; pointer-events: none; font: 12px sans-serif; }

/* The development sidebar is outside the application's VDOM and inert state. */
body.pui-with-ai { display:grid; grid-template-columns:minmax(0,1fr) 360px; }
.pui-with-ai > #pui-status { grid-column:1 / -1; }
.pui-with-ai > #pui-root { min-width:0; }
.pui-ai { box-sizing:border-box; padding:12px; border-left:1px solid #aab4c3;
  height:100dvh; position:sticky; top:0; display:flex; flex-direction:column; gap:8px;
  font:14px system-ui,sans-serif; background:#f5f7fb; color:#172235; overflow:auto; }
.pui-ai h2 { font-size:18px; margin:0; }
.pui-ai pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0; }
.pui-ai small { overflow-wrap:anywhere; }
.pui-ai-log { flex:1; min-height:180px; overflow:auto; }
.pui-ai textarea { min-height:70px; width:100%; box-sizing:border-box; }
.pui-ai button,.pui-ai select { padding:6px; }
@media(max-width:700px) {
  body.pui-with-ai { grid-template-columns:minmax(0,1fr); }
  .pui-ai { position:static; height:60vh; border-left:0; border-top:1px solid #aab4c3; }
}

[data-pui-id][hidden] { display: none !important; }

.pui-Splitter { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.pui-Splitter > [data-pui-id] { min-width: 0; min-height: 0; overflow: hidden; }
.pui-splitter-handle { flex: 0 0 6px; align-self: stretch; background: #d1d7df; cursor: col-resize; touch-action: none; user-select: none; }
.pui-Splitter[data-pui-direction="vertical"] > .pui-splitter-handle { cursor: row-resize; }
.pui-splitter-handle:hover, .pui-splitter-handle:focus-visible { background: #6689bb; outline: 1px solid #245cca; outline-offset: -1px; }

.pui-TextEdit { resize: none; min-height: 4em; overflow: auto; }

.pui-Modal { padding: 16px; border: 1px solid #bcc5d3; border-radius: 8px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); color: inherit; background: #fff; }
.pui-Modal[open] { display: flex; flex-direction: column; gap: 8px; }
.pui-Modal:not([open]) { display: none; }
.pui-Modal::backdrop { background: #0006; }
.pui-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
.pui-modal-header > button { cursor: pointer; }

/* Window already supplies the vertical flex layout; menus consume one row. */
.pui-MenuBar { display: flex; gap: 4px; flex: 0 0 auto; align-self: stretch; padding: 4px 12px; background: #e8ecf1; border-bottom: 1px solid #b7bec8; }
/* Extend across Window padding without changing the content's inset. */
.pui-Window > .pui-MenuBar { margin-left: calc(-1 * var(--pui-window-left, 12px)); margin-right: calc(-1 * var(--pui-window-right, 12px)); }
.pui-Window > .pui-MenuBar:first-child { margin-top: calc(-1 * var(--pui-window-top, 12px)); }
.pui-MenuBar > .pui-Menu { flex: 0 0 auto; }
.pui-Menu > button, .pui-MenuAction { font: inherit; color: inherit; background: transparent; border: 0; border-radius: 3px; padding: 6px 12px; cursor: pointer; text-align: left; white-space: nowrap; }
.pui-Menu > button:hover, .pui-MenuAction:hover, .pui-Menu > button[aria-expanded="true"] { background: #dbe4f0; }
.pui-Menu > button:focus-visible, .pui-MenuAction:focus-visible { outline: 2px solid #376be6; outline-offset: -2px; }
.pui-menu-popup { position: fixed; inset: auto; margin: 0; padding: 4px; min-width: 160px; max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); overflow: auto; color: #20242b; background: #fff; border: 1px solid #b7bec8; border-radius: 4px; box-shadow: 0 4px 14px #0003; }
.pui-menu-popup > .pui-Menu > button, .pui-menu-popup > .pui-MenuAction { display: block; width: 100%; }
.pui-menu-popup > .pui-Menu > button::after { content: '›'; float: right; margin-left: 20px; }
.pui-MenuAction:disabled { opacity: .45; cursor: default; }

/* Web's imperative SaveFile picker uses the browser top layer. */
.pui-savefile { width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border: 1px solid #bcc4d0; border-radius: 12px; background: #fff; color: #20242b; box-shadow: 0 16px 48px #0003; }
.pui-savefile::backdrop { background: #0006; }
.pui-savefile form, .pui-savefile-choices { display: flex; flex-direction: column; gap: 12px; }
.pui-savefile h2 { margin: 0 0 8px; font-size: 1.15rem; }
.pui-savefile p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pui-savefile label { display: flex; flex-direction: column; gap: 6px; }
.pui-savefile input { width: 100%; min-width: 0; padding: 8px; font: inherit; border: 1px solid #bcc4d0; border-radius: 4px; }
.pui-savefile-choices button { display: flex; align-items: center; gap: 14px; padding: 14px; width: 100%; text-align: left; }
.pui-savefile svg { width: 24px; height: 24px; flex: none; }
.pui-savefile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pui-savefile-entries { display: flex; flex-direction: column; height: 220px; overflow: auto; border: 1px solid #bcc4d0; border-radius: 4px; padding: 4px; }
.pui-savefile-entries button { display: block; width: 100%; min-width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 10px 12px; flex-shrink: 0; overflow-wrap: anywhere; cursor: pointer; background: transparent; }
.pui-savefile-entries button:hover, .pui-savefile-entries button:focus-visible { background: #e8eef8; }
.pui-savefile-entries button[data-directory="true"] { font-weight: 600; }
.pui-savefile-error { color: #a32424; }

/* Persistent, dismissible download links outside the application layout. */
.pui-downloads { position: fixed; right: 0; bottom: 0; width: min(400px, 100vw); padding: 20px; box-sizing: border-box; max-height: min(60vh, 600px); overflow: auto; display: flex; flex-direction: column; gap: 10px; z-index: 10000; }
.pui-downloads[hidden] { display: none; }
.pui-download-clear { align-self: flex-end; flex-shrink: 0; }
.pui-download-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; color: #20242b; border: 1px solid #d5dbe4; border-radius: 12px; padding: 18px; box-shadow: 0 3px 10px #0002; flex-shrink: 0; }
.pui-download-card strong { padding-right: 26px; overflow-wrap: anywhere; }
.pui-download-card time, .pui-download-size { font-size: 12px; color: #535c68; }
.pui-download-card a { align-self: flex-end; color: #2563a8; font-weight: 600; text-decoration: none; padding: 4px; }
.pui-download-card a:hover { text-decoration: underline; }
.pui-download-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; font-size: 22px; border: 0; border-radius: 50%; background: transparent; color: #535c68; cursor: pointer; }
.pui-download-close:hover { background: #edf1f5; }
.pui-message-dialog[data-kind="warning"] h2 { color: #805500; }
.pui-message-dialog[data-kind="critical"] h2 { color: #a32424; }
.pui-openfile { width: min(38rem, calc(100vw - 32px)); }
.pui-openfile-device { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; border: 1px dashed #bcc4d0; border-radius: 6px; background: #f6f8fc; }
.pui-openfile-device.drag { background: #e6efff; border-color: #315fbe; }
.pui-openfile-device p { font-size: 0.9em; color: #596374; }
.pui-openfile-section { font-weight: 600; }
.pui-file-path { display: flex; align-items: stretch; gap: 12px; overflow-wrap: anywhere; }
.pui-file-path input { flex: 1 1 0; min-width: 0; width: 0; }
.pui-openfile .pui-savefile-entries button { display: flex; align-items: center; gap: 10px; }
.pui-openfile .pui-savefile-entries button[aria-pressed="true"] { background: #e6efff; }
.pui-openfile-kind { margin-left: auto; color: #596374; font-size: 0.85em; }
.pui-openfile-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid #9ca9be; border-radius: 3px; }
.pui-openfile-selection { margin-right: auto; overflow-wrap: anywhere; min-width: 0; }

.pui-openfile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pui-openfile-heading h2 { margin: 0; }
.pui-openfile-heading button { border: 0; background: transparent; padding: 4px; }
.pui-openfile-device > button { display: flex; align-items: center; gap: 8px; }
.pui-file-path > button { align-self: stretch; flex-shrink: 0; white-space: nowrap; }
.pui-openfile-device > button { align-self: center; }
.pui-openfile > form > .pui-savefile-actions { flex-wrap: wrap; }
.pui-openfile > form > .pui-savefile-actions > button { flex-shrink: 0; }

.pui-Tree { overflow: auto; min-width: 0; min-height: 0; }
.pui-tree-row { display: flex; align-items: center; min-height: 28px; cursor: default; white-space: nowrap; padding-block: 2px; padding-inline-end: 8px; }
.pui-tree-row[hidden] { display: none; }
.pui-tree-row:hover { background: #52799618; }
.pui-tree-row[aria-selected="true"] { background: #52799630; }
.pui-tree-row:focus-visible { outline: 2px solid #527996; outline-offset: -2px; }
.pui-tree-arrow { flex: 0 0 32px; min-height: 32px; align-self: stretch; display: grid; place-items: center; font-size: 18px; cursor: pointer; user-select: none; }
.pui-tree-label { flex: 1; }