button{-webkit-appearance:none;appearance:none;border:0;background:transparent;border-radius:6px;font:inherit;color:inherit}:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#ccc;background:#1e1e1e;--border:#303030;--code-size:14px;--console-height:230px;--sidebar-width:260px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,select,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}[hidden]{display:none!important}.symbols{position:absolute;width:0;height:0;overflow:hidden}
button,select{transition:background-color 150ms,color 150ms,opacity 150ms,transform 180ms var(--ease)}button:hover:not(:disabled){background:#ffffff0c;color:#eee}button:active:not(:disabled){transform:scale(.96)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[role=separator]:focus-visible,summary:focus-visible{outline:1px solid #8da6bd;outline-offset:-1px}button{color:inherit}svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}
.app{height:var(--app-height,100dvh);width:100%;display:flex;flex-direction:column;overflow:hidden}.topbar{height:38px;flex-shrink:0;background:#181818;border-bottom:1px solid #292929;display:flex;align-items:center;gap:14px;padding:0 12px;z-index:5}.app-name{font-size:11px;color:#aaa}.layout-controls{margin-left:auto;display:flex;align-items:center;gap:5px}.icon-button{border:0;background:transparent;color:#969696;border-radius:4px;width:29px;height:28px;padding:5px;display:flex;justify-content:center;align-items:center;font-size:10px;flex-shrink:0}.icon-button svg{width:17px;height:17px}
#project-picker{max-width:230px;background:transparent;color:#aaa;border:0;font-size:11px;padding:5px;min-width:90px}select option{background:#252525;color:#ddd}#save-indicator{width:4px;height:4px;flex-shrink:0;border-radius:50%;background:#626c62}#save-indicator[data-state=pending]{background:#b4a488}#save-indicator[data-state=error]{background:#d69595}
.menu{position:relative}.menu>summary{list-style:none;cursor:pointer}.menu>summary::-webkit-details-marker{display:none}.menu[open]>summary{background:#303030}.menu-items{position:absolute;right:0;top:34px;width:250px;padding:5px;background:#252525;border:1px solid #454545;border-radius:6px;box-shadow:0 10px 40px #0007;z-index:30;max-height:80dvh;overflow:auto;animation:appear 160ms var(--ease)}.menu-items button{width:100%;display:block;text-align:left;border:0;border-radius:3px;padding:9px 12px;background:transparent;font-size:12px}.menu-items hr{border:0;border-top:1px solid #3a3a3a;margin:4px 7px}.menu-items>span{display:block;font-size:10px;color:#868686;padding:9px 12px;line-height:1.5}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns 260ms var(--ease)}.sidebar{min-width:0;overflow:hidden;background:#181818;border-right:1px solid #292929;display:flex;flex-direction:column;transition:opacity 180ms,visibility 260ms,transform 260ms var(--ease)}.sidebar-heading{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 18px;font-size:10px;letter-spacing:.4px;white-space:nowrap;color:#a6a6a6;flex-shrink:0}.sidebar-actions{display:flex;gap:2px}#tree{flex:1;min-height:0;overflow:auto;padding:6px 0}.tree-row{border:0;width:100%;display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;color:#bcbcbc;background:transparent;text-align:left;white-space:nowrap;min-height:29px}.tree-row.selected{background:#2a2a2a;color:#eee}.tree-name{overflow:hidden;text-overflow:ellipsis}.tree-row svg{width:15px;height:15px}.tree-row svg:first-child{width:10px;transition:transform 180ms var(--ease);transform:rotate(90deg)}.tree-row.collapsed svg:first-child{transform:rotate(0)}.file-mark{width:23px;text-align:center;font:10px Consolas,monospace;color:#aebfca;flex-shrink:0}.file-actions{display:flex;align-items:center;gap:4px;min-height:38px;border-top:1px solid #292929;padding:0 8px}.file-actions>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#777}
main{min-width:0;min-height:0;display:flex;flex-direction:column;background:#1e1e1e}.editor-bar{height:38px;flex-shrink:0;background:#181818;display:flex;align-items:stretch;justify-content:space-between}#tabs{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.tab{display:flex;align-items:center;border-right:1px solid #292929;border-top:1px solid transparent;flex-shrink:0;color:#8d8d8d;max-width:250px}.tab.active{background:#1e1e1e;border-top-color:#969696;color:#ddd}.tab-open{padding:0 13px;height:100%;font-size:12px;background:transparent;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{padding:0 5px;margin-right:4px;border:0;border-radius:3px;color:#777;display:flex;align-items:center;background:none;height:24px}.tab-close svg{width:13px;height:13px}.editor-actions,.console-actions{display:flex;align-items:center;gap:5px;padding-right:10px;flex-shrink:0}#run{color:#adbdac}#run svg{fill:currentColor;stroke:none;width:15px;height:15px}#stop{width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 220ms var(--ease),padding 220ms var(--ease),opacity 160ms}.app[data-state=running] #stop,.app[data-state=installing] #stop{width:28px;padding:5px;opacity:1;pointer-events:auto}
#editor{flex:1;min-height:100px;overflow:hidden}#empty-editor,#binary-preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px;color:#999;font-size:12px;overflow:auto}#binary-image{max-width:100%;max-height:70%;object-fit:contain}#empty-editor button,#binary-preview button{background:#292929;border:1px solid #444;border-radius:4px;padding:8px 14px}.cm-editor{height:100%}.cm-search input,.cm-search button{max-width:180px}.cm-search label{display:inline-flex;gap:3px}.cm-search button{padding:3px 6px}.edit-keys{display:none}
#resize-console{height:4px;flex-shrink:0;border-top:1px solid #333;cursor:row-resize;touch-action:none;transition:height 260ms var(--ease),background-color 160ms,visibility 260ms}#resize-console:hover{background:#65717d}.console-panel{height:var(--console-height);max-height:60%;flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#1e1e1e;transition:height 260ms var(--ease),opacity 160ms,visibility 260ms}.console-bar{height:35px;flex-shrink:0;padding-left:20px;display:flex;align-items:center;justify-content:space-between}.console-title{font-size:10px;letter-spacing:.3px;color:#bbb;height:100%;display:flex;align-items:center;border-bottom:1px solid #999}#duration{font-size:10px;color:#737373;margin-right:5px}#output{flex:1;min-height:0;overflow:auto;padding:12px 20px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/22px Consolas,'Liberation Mono',monospace;outline:none;color:#c7c7c7}.output-info{color:#888}.output-error{color:#d69595}.plot{display:block;max-width:100%;max-height:500px;object-fit:contain;margin:12px 0;background:#fff;border-radius:4px}
#terminal-form{flex-shrink:0;display:flex;align-items:flex-start;gap:8px;padding:8px 16px 10px;border-top:1px solid #292929;font:12px monospace;color:#777}#terminal-prompt{padding-top:4px;color:#999}#terminal-input{flex:1;min-width:0;max-height:120px;resize:vertical;background:transparent;color:#ddd;border:0;padding:3px 0;outline:none;font:12px/20px Consolas,monospace}#terminal-form button{border:0;background:#2a2a2a;color:#aaa;border-radius:4px;padding:4px 9px}#terminal-form.waiting{background:#ffffff03}
.statusbar{height:23px;flex-shrink:0;background:#181818;border-top:1px solid #303030;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px;color:#858585}.runtime-status{border:0;background:transparent;color:#858585;display:flex;align-items:center;gap:7px;padding:2px 0;font-size:10px}.status-right{display:flex;gap:20px}#status-dot{width:5px;height:5px;border-radius:50%;background:#999;transition:background-color 220ms}#status-dot[data-state=ready]{background:#92a88c}#status-dot[data-state=error]{background:#d69595}.app[data-state=loading] #status-dot,.app[data-state=running] #status-dot,.app[data-state=installing] #status-dot{animation:breathe 1.4s ease-in-out infinite}.sidebar-hidden .workspace{grid-template-columns:0px minmax(0,1fr)}.sidebar-hidden .sidebar{opacity:0;visibility:hidden;transform:translateX(-8px)}.console-hidden .console-panel{height:0;opacity:0;visibility:hidden}.console-hidden #resize-console{height:0;border:0;visibility:hidden}.resizing .console-panel{transition:none}.resizing{cursor:row-resize;user-select:none}.mobile-nav{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%,8px);max-width:min(500px,90vw);padding:10px 16px;border:1px solid #484848;border-radius:5px;background:#292929;font-size:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms,transform 240ms var(--ease),visibility 240ms;z-index:100}#toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
dialog{width:min(440px,calc(100vw - 32px));padding:22px;background:#232323;color:#ccc;border:1px solid #444;border-radius:10px;box-shadow:0 20px 90px #0006}dialog[open]{animation:appear 180ms var(--ease)}dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.dialog-head h2{font-size:16px;font-weight:500;margin:0}dialog label{display:block;font-size:11px;color:#aaa;margin:8px 0}dialog input{width:100%;font-size:14px;padding:10px;background:#181818;color:#ddd;border:1px solid #555;border-radius:5px}dialog p{font-size:12px;line-height:1.7;white-space:pre-wrap}#dialog-note{color:#999;overflow-wrap:anywhere}#dialog-error{color:#d69595}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog-actions button{border:1px solid #444;border-radius:5px;background:#303030;font-size:12px;padding:8px 14px}.dialog-actions #dialog-confirm{background:#d5d5d5;color:#242424;border-color:#d5d5d5}.dialog-actions #dialog-confirm.danger{background:#bc7e7e;border-color:#bc7e7e;color:#171717}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#424242;border:2px solid #1e1e1e;border-radius:6px}@keyframes breathe{50%{opacity:.4}}@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){:root{--sidebar-width:220px}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  :root{--code-size:14px}.app{padding-top:env(safe-area-inset-top)}.topbar{height:50px;padding:0 12px;gap:8px}.app-name{font-size:13px}#project-picker{max-width:calc(100vw - 145px);font-size:13px;padding:8px}#save-indicator{margin-left:3px}.desktop-only{display:none!important}.icon-button{width:42px;height:42px;padding:10px}.icon-button svg{width:19px;height:19px}.layout-controls{gap:0}.menu-items{top:46px;max-height:calc(var(--app-height,100dvh) - 120px);width:min(290px,calc(100vw - 24px));padding:6px}.menu-items button{font-size:14px;min-height:44px}.menu-items>span{font-size:11px;padding:12px}
  .workspace,.sidebar-hidden .workspace{display:flex;transition:none;flex:1;min-height:0}.sidebar,.sidebar-hidden .sidebar{width:100%;border:0;transform:none;opacity:1;visibility:visible;display:none}.app[data-mobile-view=files] .sidebar{display:flex;animation:appear 160ms var(--ease)}.app[data-mobile-view=files] main{display:none}main{width:100%;flex:1;min-height:0}.sidebar-heading{height:54px;padding:0 12px 0 20px;font-size:11px}.sidebar-actions{gap:4px}.tree-row{min-height:46px;font-size:15px;gap:9px}.tree-row svg{width:19px;height:19px}.tree-row svg:first-child{width:12px}.file-mark{font-size:12px;width:28px}.file-actions{min-height:54px;padding:0 12px}.file-actions>span{font-size:12px}.editor-bar{height:46px}.tab-open{font-size:13px;padding:0 12px}.tab-close{height:44px;width:34px;padding:9px;margin:0}.tab-close svg{width:17px;height:17px}.editor-actions{gap:0;padding-right:6px}.app[data-state=running] #stop,.app[data-state=installing] #stop{width:42px;padding:10px}#run svg{width:18px;height:18px}#tabs{max-width:calc(100% - 90px)}
  #resize-console{display:none}.console-panel,.console-hidden .console-panel{display:none;transition:none;max-height:none}.app[data-mobile-view=terminal] .console-panel{display:flex;flex:1;height:auto;opacity:1;visibility:visible;animation:appear 160ms var(--ease)}.app[data-mobile-view=terminal] #editor,.app[data-mobile-view=terminal] #empty-editor,.app[data-mobile-view=terminal] #binary-preview,.app[data-mobile-view=terminal] .edit-keys{display:none}.console-bar{height:45px;padding-left:16px}.console-title{font-size:11px}.console-actions{gap:0;padding-right:8px}#output{font-size:13px;line-height:23px;padding:12px 16px}#terminal-form{padding:10px 12px;gap:7px;align-items:center}#terminal-input{font-size:16px;line-height:24px;min-height:28px}#terminal-form button{min-width:42px;min-height:42px}#terminal-prompt{font-size:16px;padding:0}
  .edit-keys{display:flex;flex-shrink:0;align-items:center;overflow:auto;height:43px;padding:0 4px;border-top:1px solid #303030;background:#222;gap:2px;scrollbar-width:none}.edit-keys button{height:38px;min-width:38px;padding:0 9px;border:0;background:transparent;color:#b0b0b0;border-radius:4px;font:14px monospace}.edit-keys svg{width:17px;height:17px}.statusbar{height:20px;padding:0 10px;font-size:9px}.runtime-status{font-size:9px}.status-right{gap:12px}.mobile-nav{display:flex;align-items:stretch;justify-content:space-around;flex-shrink:0;min-height:58px;padding:3px 8px calc(3px + env(safe-area-inset-bottom));background:#181818;border-top:1px solid #303030}.mobile-nav button{position:relative;flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:49px;border:0;background:none;color:#707070;font-size:10px}.mobile-nav button[aria-current]{color:#d9d9d9}.mobile-nav svg{width:20px;height:20px}#terminal-badge{position:absolute;top:5px;left:calc(50% + 10px);width:5px;height:5px;border-radius:50%;background:#b2bdab}#toast{bottom:calc(77px + env(safe-area-inset-bottom));font-size:12px}dialog{padding:20px}dialog input{font-size:16px}.dialog-actions button{font-size:14px;min-height:44px}.cm-search input{font-size:16px;max-width:145px}.cm-search button{min-height:30px}.cm-search label{font-size:11px}.cm-scroller{overscroll-behavior:contain}.cm-tooltip{max-width:calc(100vw - 40px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:700px),(max-width:1000px) and (pointer:coarse){#editor{min-height:0}.edit-keys button{white-space:nowrap;flex-shrink:0;min-width:42px}.keyboard-open .mobile-nav{display:none}.keyboard-open .statusbar{display:none}}
/* Acciones de archivos y edición, con los mismos controles en escritorio y móvil. */
.project-root{border:0;background:transparent;padding:7px 18px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.3px;color:#999}.tree-entry{display:flex;align-items:stretch}.tree-entry .tree-row{flex:1;min-width:0}.tree-more{width:26px;height:29px;opacity:0}.tree-entry:hover .tree-more,.tree-entry:focus-within .tree-more{opacity:1}.tree-row.is-cut{opacity:.5}.file-actions{gap:1px}.file-actions .icon-button{width:27px}.edit-menu-label{display:flex;align-items:center;gap:7px;height:100%;padding:0 10px;list-style:none;font-size:11px;color:#aaa;cursor:pointer;white-space:nowrap}.edit-menu-label::-webkit-details-marker{display:none}.edit-menu-label:hover{background:#ffffff0c}.edit-menu-label span{color:#666}#edit-menu .menu-items{top:36px;width:260px}.menu-items kbd,.context-menu kbd{font:9px system-ui;color:#777;margin-left:auto;padding-left:15px}.menu-items button:has(kbd){display:flex;align-items:center;justify-content:space-between}.context-menu{position:fixed;min-width:230px;padding:5px;background:#252525;border:1px solid #454545;border-radius:6px;box-shadow:0 10px 40px #0007;z-index:60;max-height:calc(100dvh - 16px);overflow:auto;animation:appear 150ms var(--ease)}.context-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;text-align:left;font-size:12px;border:0;background:transparent;border-radius:3px}.context-menu hr{border:0;border-top:1px solid #3a3a3a;margin:4px 7px}.context-menu button:disabled{opacity:.35}.context-menu button:focus-visible{outline:none;background:#3b3b3b}#dialog-select,#dialog-textarea{width:100%;padding:10px;background:#181818;color:#ddd;border:1px solid #555;border-radius:5px;font-size:14px}#dialog-textarea{min-height:130px;max-height:40dvh;resize:vertical;font-family:Consolas,monospace}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.tree-more{opacity:1;width:42px;height:46px}.project-root{min-height:40px;font-size:12px;padding-left:20px}.file-actions .icon-button{width:42px;flex-shrink:0}.file-actions>span{font-size:11px}#edit-menu .menu-items{top:45px;right:-80px;width:min(280px,calc(100vw - 20px));max-height:calc(var(--app-height,100dvh) - 115px)}.edit-menu-label{font-size:12px;padding:0 7px}#tabs{max-width:calc(100% - 140px)}.context-menu{min-width:260px;max-width:calc(100vw - 16px)}.context-menu button{min-height:42px;font-size:14px}#dialog-select,#dialog-textarea{font-size:16px}.edit-keys button[data-text]{display:grid;place-items:center}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){#edit-menu .menu-items{position:fixed;left:10px;right:10px;top:calc(96px + env(safe-area-inset-top));width:auto;max-height:calc(var(--app-height,100dvh) - 180px)}.context-menu{max-height:calc(var(--app-height,100dvh) - 16px)}}

.tool-dialog{width:min(640px,calc(100vw - 24px));padding:16px;max-height:80dvh}.tool-dialog .dialog-head{margin-bottom:12px}.tool-results{overflow:auto;max-height:55dvh;padding-top:10px}.tool-result{width:100%;border:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:5px;font-size:13px;min-height:44px}.tool-result small{font:11px/1.5 Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#939393;max-width:100%}.tool-result:focus{background:#ffffff0d;outline:1px solid #64788b}.tool-result span{overflow-wrap:anywhere}.tool-dialog input{font-size:14px}@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.tool-dialog{margin:60px auto auto;max-height:calc(var(--app-height,100dvh) - 80px)}.tool-dialog input{font-size:16px}.tool-results{max-height:calc(var(--app-height,100dvh) - 245px)}.icon-button{min-width:44px;min-height:44px}.file-actions .icon-button{min-width:40px}.edit-keys{height:47px}.edit-keys button{min-height:44px}.tree-more{min-width:44px}}

.compare-dialog{width:min(1100px,calc(100vw - 24px));max-height:90dvh}.compare-dialog select{width:100%;padding:9px;background:#181818;color:#ddd;border:1px solid #555;border-radius:5px}.compare-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}.compare-columns section{min-width:0}.compare-columns h3{font-size:11px;font-weight:500;color:#999}.compare-columns pre{height:45dvh;overflow:auto;white-space:pre;tab-size:4;background:#191919;padding:12px;font:12px/1.7 Consolas,monospace;border:1px solid #343434;border-radius:5px}@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.compare-dialog{padding:14px}.compare-columns{grid-template-columns:1fr;gap:0}.compare-columns pre{height:22dvh}.compare-dialog select{font-size:16px}.compare-dialog .dialog-head{margin-bottom:6px}}

.tree-row.drop-target{outline:1px solid #7a91a6;outline-offset:-1px;background:#ffffff0d}

.cm-breakpoints{width:15px;cursor:pointer;color:#b78686}.cm-breakpoints .cm-gutterElement{padding:0 3px}.breakpoint-dot{font-size:10px}#debug-panel{max-height:65%;overflow:auto;border-bottom:1px solid #383838;flex-shrink:0}.debug-controls{display:flex;align-items:center;gap:5px;padding:5px 12px;font-size:11px;flex-wrap:wrap}.debug-controls span{margin-right:auto;color:#c9b595}.debug-controls button{border:1px solid #444;background:#2d2d2d;border-radius:4px;padding:5px 8px}#debug-values{margin:0;padding:8px 16px;font:11px/1.7 Consolas,monospace;white-space:pre;overflow:auto;max-height:180px}@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.debug-controls button{min-height:44px}.debug-controls span{width:100%}#debug-values{max-height:28dvh}.cm-breakpoints{width:18px}}

.notebook{flex:1;min-height:0;overflow:auto;padding:12px 22px}.notebook-toolbar,.notebook-cell-bar,.notebook-pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notebook-toolbar{position:sticky;top:-12px;background:#1e1e1e;padding:8px 0;z-index:2}.notebook button{background:#292929;border:1px solid #424242;border-radius:5px;padding:7px 10px;font-size:11px}.notebook-cell{margin:16px 0;border:1px solid #363636;border-radius:7px;overflow:hidden}.notebook-cell-bar{padding:7px 10px;background:#222}.notebook-cell-bar span{margin-right:auto;font:11px monospace;color:#929292}.notebook-source{height:180px}.notebook .cm-breakpoints{display:none}.notebook-output{max-height:300px;overflow:auto;padding:0 14px}.notebook-output pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 Consolas,monospace}.notebook-output img{max-width:100%}.notebook-output small{font-size:10px;color:#999}@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.notebook{padding:8px}.notebook button{min-height:44px}.notebook-source{height:200px}.app[data-mobile-view=terminal] .notebook{display:none}.notebook-toolbar{top:-8px}.notebook-cell-bar{gap:4px}.notebook-cell-bar button{padding:5px 8px}}

.data-dialog{width:min(1000px,calc(100vw - 24px))}.data-scroll{overflow:auto;max-height:65dvh}.data-dialog table{border-collapse:collapse;font-size:12px}.data-dialog th,.data-dialog td{padding:8px 12px;border:1px solid #373737;max-width:320px;overflow-wrap:anywhere;white-space:pre-wrap;vertical-align:top}.data-dialog th{position:sticky;top:0;background:#303030;font-weight:500}.data-dialog p{color:#999;font-size:11px}

@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.file-actions .icon-button{min-width:44px;min-height:44px}.notebook button{min-width:44px}.context-menu button{min-height:44px}}

/* En móvil, campos y superficies editables de al menos 16px evitan el zoom
   automático de enfoque de iOS. Se conserva el zoom por gesto del usuario. */
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
  #project-picker,
  #dialog input,
  #dialog-select,
  #dialog-textarea,
  #tool-dialog input,
  #compare-dialog select,
  .cm-search input,
  #terminal-input{font-size:16px}
  #editor .cm-editor,
  .notebook-source .cm-editor{font-size:max(16px,var(--code-size))}
  #editor .cm-search,
  .notebook .cm-search{font-size:16px}
  #editor .cm-scroller,
  .notebook-source .cm-scroller{overscroll-behavior:contain;touch-action:pan-x pan-y}
  #tree,#output,.notebook,.data-scroll{overscroll-behavior:contain}
}

/* Mobile workspace constraints: no accidental page zoom or clipped overlays. */
.mobile-keyboard-dismiss{display:none}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .topbar{min-width:0;gap:6px;padding-inline:8px}
 #project-picker{min-width:0;flex:1;max-width:none}
 .layout-controls{margin-left:0}
 .app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 dialog{max-height:calc(var(--app-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain}
 .tool-dialog{margin-block:12px;max-height:calc(var(--app-height,100dvh) - 24px)}
 .tool-results{max-height:max(80px,calc(var(--app-height,100dvh) - 160px))}
 .keyboard-open .mobile-keyboard-dismiss{display:flex}
 .keyboard-open .topbar{height:44px}
 .console-bar{min-height:44px}
 .mobile-nav button{color:#a0a0a0}
 .file-actions>span{min-width:0}
 .notebook-cell-bar{flex-wrap:wrap}
}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .app.keyboard-open[data-mobile-view=terminal] .topbar{display:none}
}

/* Focused mobile workspace: reveal editing helpers only while typing. */
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .app-name,.statusbar{display:none}
 .topbar{height:44px;border-bottom-color:#252525}
 #project-picker{font-weight:500}
 .editor-bar{height:44px;background:#1e1e1e}
 .tab{border-right:0;border-top:0;max-width:210px}
 .tab.active{background:transparent}
 .tab-open{color:#999}
 .tab.active .tab-open{color:#eee}
 .tab-close{color:#999}
 #tabs{max-width:none}
 .editor-actions{gap:0;padding-right:4px}
 .edit-menu-label{font-size:0;padding:0;width:44px;justify-content:center}
 .edit-menu-label span{font-size:18px;color:#aaa}
 .edit-keys{display:none}
 .keyboard-open[data-mobile-view=code] .edit-keys{display:flex;height:44px}
 .edit-keys [data-text],.edit-keys [data-edit=selectAll],.edit-keys [data-edit=deleteCharBackward],.edit-keys [data-edit=search]{display:none}
 .file-actions .icon-button:not(#file-more){display:none}
 .file-actions{min-height:48px;border-top-color:#252525}
 .sidebar-heading{height:48px}
 .project-root{color:#aaa;font-weight:400;letter-spacing:0}
 .mobile-nav{min-height:52px;padding-top:0;border-top-color:#292929}
 .mobile-nav button{min-height:48px;gap:3px;font-size:11px}
 .mobile-nav svg{width:18px;height:18px}
 .cm-lineNumbers .cm-gutterElement{padding-left:10px;padding-right:10px}
 .app[data-mobile-view=terminal]:not([data-state=running]):not([data-state=installing]) .editor-bar{display:none}
 .console-title{border-bottom:0;font-size:11px;letter-spacing:0;color:#999}
 .console-bar{border-bottom:1px solid #292929}
 .notebook-cell{border-color:#2c2c2c}
 .notebook-cell-bar{background:transparent}
 .notebook button{background:transparent;border-color:#333}
 .menu-items kbd{display:none}
}

/* Mobile studio: one calm toolbar, tools revealed only on demand. */
.mobile-document,.mobile-project-slot,.mobile-tool-icon{display:none}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .topbar{height:48px;padding:0 6px 0 16px;gap:0;background:#181818;display:flex!important}
 .keyboard-open .topbar{height:48px}
 .mobile-document{display:block;flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;font-size:14px;font-weight:500;padding:0 8px 0 0;height:44px;color:#ddd}
 #save-indicator{display:none}
 .layout-controls{flex-shrink:0;margin:0;gap:0}
 .editor-bar{display:none!important}
 .mobile-project-slot{display:block;padding:12px;border-bottom:1px solid #383838;margin-bottom:6px}
 .mobile-project-slot label{display:block;font-size:11px;color:#999;margin-bottom:6px}
 #project-picker{display:block;width:100%;max-width:none;padding:8px 0}
 .edit-menu-word{display:none}
 .mobile-tool-icon{display:block;width:18px;height:18px}
 .edit-menu-label{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
 #hide-keyboard{display:none;width:44px;height:44px;border:0;background:none;color:#aaa;font-size:22px;align-items:center;justify-content:center}
 .keyboard-open #hide-keyboard{display:flex}
 .app[data-state=running] #stop,.app[data-state=installing] #stop{width:44px;padding:10px}
 #edit-menu .menu-items,.menu-items{position:fixed;left:10px;right:10px;top:calc(54px + env(safe-area-inset-top));width:auto;max-height:calc(var(--app-height,100dvh) - 70px);border-radius:12px;padding:8px;box-shadow:0 12px 40px #0007}
 .edit-keys,.keyboard-open[data-mobile-view=code] .edit-keys{display:none!important}
 #edit-menu[open] .edit-keys{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));height:auto;overflow:visible;gap:4px;padding:12px 4px 4px;background:none;border-top:1px solid #383838;margin-top:8px}
 #edit-menu .edit-keys button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:4px;border:1px solid #383838;border-radius:7px;background:#ffffff04;font-size:16px;width:auto}
 #edit-menu .edit-keys [data-text],#edit-menu .edit-keys [data-edit=undo],#edit-menu .edit-keys [data-edit=redo],#edit-menu .edit-keys [data-edit=deleteCharBackward],#edit-menu .edit-keys [data-edit=selectAll],#edit-menu .edit-keys [data-edit=search]{display:none}
 .mobile-nav{background:#181818;border-top:1px solid #292929}
}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .app[data-mobile-view=terminal] .mobile-keyboard-dismiss,.app[data-mobile-view=terminal] .console-title{display:none}
 .app[data-mobile-view=files] #run,.app[data-mobile-view=files] #edit-menu{display:none}
}

/* Quiet surfaces, deliberate sheets and clear interaction states. */
.sheet-backdrop{position:fixed;inset:0;z-index:45;border:0;padding:0;background:#0007;cursor:default;touch-action:none}
.sheet-heading{display:none}
.sheet-status{font-size:11px;line-height:1.6;color:#999;margin:12px 8px 4px;overflow-wrap:anywhere}
.sheet-status.has-error{color:#e9a4a4}
.jump-output{position:absolute;z-index:3;bottom:70px;left:50%;transform:translateX(-50%);border:1px solid #555;background:#303030;color:#eee;border-radius:20px;padding:8px 14px;font-size:12px;white-space:nowrap;box-shadow:0 4px 16px #0005}
.console-panel{position:relative}
.sheet-edit-actions,.native-menu-groups,.sheet-edit-advanced{min-width:0}
.tool-result[aria-pressed=true]{background:#ffffff08;box-shadow:inset 2px 0 #aebfb5}
.tool-result{transition:background-color 120ms}
.tool-result small{white-space:normal;overflow-wrap:anywhere}
.tool-result:active{background:#ffffff14}
button,summary{-webkit-tap-highlight-color:transparent}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .topbar{position:relative;z-index:50}
 .topbar .icon-button,.edit-menu-label,#hide-keyboard{border-radius:9px}
 .topbar .icon-button:hover,.edit-menu-label:hover{background:transparent}
 .topbar .icon-button:active,.edit-menu-label:active{background:#ffffff0b}
 .mobile-document{letter-spacing:.1px}
 .app[data-save-state=pending] .mobile-document::after,.app[data-save-state=error] .mobile-document::after{content:'';display:inline-block;vertical-align:middle;width:5px;height:5px;border-radius:50%;margin-left:8px;background:#baa683}
 .app[data-save-state=error] .mobile-document::after{background:#e1a0a0}
 .mobile-nav button{position:relative;color:#8e9699;transition:color 120ms,background 120ms;border-radius:10px}
 .mobile-nav button[aria-current]{color:#e4ece8}
 .mobile-nav button[aria-current]::before{content:'';width:14px;height:2px;position:absolute;top:0;border-radius:2px;background:#b8c9c0}
 .mobile-nav button:active{background:#ffffff08;transform:none}
 #app-menu .menu-items,#edit-menu .menu-items,#file-menu{
  position:fixed;z-index:60;inset:auto 0 var(--viewport-bottom,0px);width:auto;min-width:0;max-width:none;
  max-height:calc(var(--app-height,100dvh) - 54px);margin:0;padding:0 12px calc(12px + env(safe-area-inset-bottom));
  border:1px solid #ffffff12;border-bottom:0;border-radius:20px 20px 0 0;background:#242628;color:#dce1e2;
  box-shadow:0 -10px 40px #0005;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;animation:sheet-in 180ms var(--ease);
 }
 #edit-menu .menu-items{left:8px;right:8px;bottom:calc(var(--viewport-bottom,0px) + 8px);max-height:calc(var(--app-height,100dvh) - 72px);border:1px solid #ffffff18;border-radius:16px;padding-bottom:12px}
 .sheet-heading{display:flex;position:sticky;top:0;z-index:2;flex-direction:column;align-items:center;background:#242628;padding:0 0 10px}
 .sheet-grip{display:flex!important;align-items:center;justify-content:center;min-height:28px!important;width:100%!important;padding:0!important;border:0;background:none;font-size:0!important;touch-action:none}
 .sheet-grip span{width:28px;height:4px;border-radius:4px;background:#697075;display:block}
 .sheet-heading-title{font-size:14px;font-weight:600;letter-spacing:.1px;padding:2px 0}
 .menu-items .mobile-project-slot{padding:8px 8px 12px;margin:0;border-bottom:1px solid #ffffff0b}
 .mobile-project-slot label{font-size:11px;color:#9da5a8}
 .sheet-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 0}
 .sheet-primary-actions button{border:1px solid #ffffff0b!important;background:#ffffff04!important;border-radius:9px!important;text-align:center!important;font-size:12px!important;min-height:48px}
 .sheet-group{border-top:1px solid #ffffff0c}
 .sheet-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:14px;padding:10px 8px;cursor:pointer;touch-action:manipulation}
 .sheet-group>summary::-webkit-details-marker{display:none}
 .sheet-group>summary::after{content:'⌄';font-size:16px;color:#9da5a8;transition:transform 150ms}
 .sheet-group[open]>summary::after{transform:rotate(180deg)}
 .sheet-group-content{padding:0 0 8px}
 .sheet-group-content button{padding:12px 14px!important;border-radius:8px!important;line-height:1.4}
 .menu-items .destructive-action{color:#e5aaaa}
 .sheet-edit-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 0 12px}
 .sheet-edit-actions button{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:12px!important;padding:8px 4px!important;text-align:center!important;background:#ffffff04;border:1px solid #ffffff0c!important;border-radius:9px!important}
 #edit-menu[open] .edit-keys{grid-template-columns:repeat(5,minmax(0,1fr));border-color:#ffffff0c;padding-top:12px}
 #edit-menu .edit-keys button{background:#ffffff04;border-color:#ffffff0c;border-radius:9px}
 #file-menu button:not(.sheet-grip){padding:12px;min-height:48px;border-radius:8px}
 #file-menu .destructive-action,#file-menu [data-file=delete]{color:#e5aaaa}
 dialog,.tool-dialog,.compare-dialog,.data-dialog{position:fixed;inset:auto 8px calc(var(--viewport-bottom,0px) + 8px);width:calc(100% - 16px);margin:0;max-height:calc(var(--app-height,100dvh) - 20px);padding:18px;border-radius:18px;background:#242628;border:1px solid #ffffff15;box-shadow:0 -10px 40px #0004;overscroll-behavior:contain}
 dialog::backdrop{background:#0008;backdrop-filter:blur(2px)}
 dialog[open]{animation:sheet-in 180ms var(--ease)}
 .dialog-head{margin-bottom:14px}
 .dialog-head h2{font-size:16px;font-weight:600;letter-spacing:-.1px}
 .dialog-actions{position:sticky;bottom:-18px;margin:12px -2px -2px;padding:12px 0 0;background:#242628}
 .dialog-actions button{border-radius:9px;min-height:46px}
 dialog input,#dialog-select,#dialog-textarea,.tool-dialog input{border:1px solid #ffffff16;background:#191c1e;border-radius:9px;padding:12px;color:#eef1f1}
 dialog input:focus-visible,dialog select:focus-visible,dialog textarea:focus-visible{outline:2px solid #9cafa4;outline-offset:1px}
 .tool-results{max-height:min(50dvh,max(64px,calc(var(--app-height,100dvh) - 180px)));padding-top:8px;overscroll-behavior:contain}
 .tool-dialog #tool-empty{font-size:13px;color:#aab2b5;padding:12px 2px}
 .tool-result{min-height:54px;padding:11px 12px;border-radius:9px;font-size:14px;gap:5px}
 .tool-result small{font-size:11px;color:#9fa9ad}
 .tool-result[aria-pressed=true]{background:#ffffff06;box-shadow:inset 2px 0 #aabfb3}
 #toast{bottom:calc(var(--viewport-bottom,0px) + 68px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);border-radius:12px;box-shadow:0 8px 30px #0005;background:#303538;border:1px solid #ffffff12;color:#e9eded;padding:12px 16px;line-height:1.5}
 .keyboard-open #toast{bottom:calc(var(--viewport-bottom,0px) + 16px)}
 .jump-output{bottom:78px;min-height:40px;border-radius:22px;background:#30383a;border-color:#ffffff14}
 .tree-row{min-height:48px}
 .tree-row.selected{background:#ffffff06}
 .tree-row:active{background:#ffffff0c;transform:none}
 .tree-more{color:#9ca6aa}
 .notebook-cell-bar{border-bottom:1px solid #ffffff0a}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 #file-menu{top:auto!important;left:0!important;right:0!important}
 #app-menu .menu-items>#offline-status{display:none}
}
button.sheet-backdrop,button.sheet-backdrop:hover,button.sheet-backdrop:active{transform:none!important;transition:none;background:#0007;border-radius:0}
.sheet-grip:active{transform:none!important}
.app[data-state=loading] #run{position:relative;opacity:.65}
.app[data-state=loading] #run svg{visibility:hidden}
.app[data-state=loading] #run::after{content:'';position:absolute;width:14px;height:14px;border:1.5px solid #68736d;border-top-color:#d0e0d6;border-radius:50%;animation:runtime-spin .8s linear infinite}
@keyframes runtime-spin{to{transform:rotate(360deg)}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .app[data-save-state=error] #save-indicator{display:block;width:5px;height:5px;margin:0 5px 0 0;background:#e1a0a0}
 .app[data-save-state=error] .mobile-document::after{display:none}
}
.jump-output:active:not(:disabled){transform:translateX(-50%)}

/* Desktop workbench: one primary action, contextual tools, stable code layout. */
@media (min-width:701px) and (pointer:fine),(min-width:1001px){
 :root{--sidebar-width:clamp(210px,18vw,280px)}
 .topbar{height:44px;gap:16px;padding:0 16px;background:#191b1c;border-color:#ffffff08}
 .app-name{font-size:13px;font-weight:600;letter-spacing:-.3px;color:#d2dbd7}
 #project-picker{font-size:12px;color:#b8c0bd;max-width:300px;border-radius:6px;padding:6px 8px}
 .layout-controls{gap:4px}.icon-button{width:32px;height:30px;border-radius:6px;font-size:11px}
 .layout-controls button[aria-expanded=true]{color:#c5d2cc;background:#ffffff05}
 .workspace{transition:grid-template-columns 280ms var(--ease)}
 .sidebar{transition:opacity 180ms ease,transform 280ms var(--ease),visibility 280ms}
 .console-panel{transition:height 280ms var(--ease),opacity 180ms ease,visibility 280ms}
 #resize-console{transition:height 280ms var(--ease),background-color 160ms ease,visibility 280ms}
 .resizing .console-panel,.resizing #resize-console{transition:none}
 .sidebar{background:#191b1c;border-color:#ffffff08}
 .sidebar-heading{height:44px;padding:0 12px 0 18px;font-size:12px;letter-spacing:0;color:#b5bdb9}
 .project-root{font-size:11px;font-weight:400;letter-spacing:0;color:#818d88;padding:7px 18px}
 #tree{padding:4px 8px}.tree-row{min-height:32px;font-size:12px;border-radius:5px}
 .tree-entry{border-radius:5px}.tree-entry:has(.selected){background:#ffffff07}
 .tree-row.selected{background:transparent;color:#e0e8e3}
 .tree-more{height:32px;color:#9eaaa5}.file-mark{color:#8b9c93}
 .file-actions{min-height:38px;border-color:#ffffff08;padding:0 10px 0 18px}
 .file-actions .icon-button:not(#file-more){display:none}
 .file-actions>span{font-size:11px;color:#929d98}
 .editor-bar{height:44px;background:#191b1c;border-bottom:1px solid #ffffff05}
 .tab{border:0;margin:5px 2px 5px 4px;border-radius:6px;max-width:240px}
 .tab.active{background:#ffffff08;box-shadow:inset 0 -1px #a9beb0}
 .tab-open{font-size:12px;padding:0 12px}.tab-close{opacity:0;color:#a0aaa5;margin-right:5px}
 .tab.active .tab-close,.tab:hover .tab-close,.tab:focus-within .tab-close{opacity:1}
 .editor-actions{gap:4px;padding:0 10px 0 8px}.edit-menu-label{height:30px;border-radius:6px;padding:0 10px;font-size:12px}
 .edit-menu-label .edit-menu-word{color:#aeb7b2}
 #run{width:38px;height:30px;margin-left:7px;background:#aebfb314;color:#c7ddcd;border:1px solid #aebfb31f}
 #run:hover:not(:disabled){background:#aebfb329;color:#e5f3e9}
 #stop{transition:width 220ms var(--ease),padding 220ms var(--ease),opacity 160ms ease;}
 #resize-console{height:6px;border-top:1px solid #ffffff0c;background:transparent;position:relative}
 #resize-console:hover,#resize-console:focus-visible{background:#a7b9ad44}
 .console-bar{height:36px;padding-left:18px}.console-title{border:0;font-size:12px;letter-spacing:0;color:#b7c1bb}
 #output{padding:8px 18px;font-size:12px;line-height:21px}
 #terminal-form{padding:6px 14px 7px 18px;border-color:#ffffff08}
 #terminal-input{resize:none}.statusbar{height:26px;border-color:#ffffff08;background:#191b1c;font-size:11px;color:#8d9992}
 .runtime-status{font-size:11px;color:#9ca89f}.status-right{gap:16px}
 .menu-items,.context-menu{border:1px solid #ffffff18;border-radius:10px;background:#25292a;box-shadow:0 12px 36px #0005;padding:6px;animation:desktop-pop 180ms var(--ease)}
 #app-menu .menu-items{width:340px;top:36px;max-height:calc(100dvh - 66px)}
 .sheet-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px 0 8px}
 .sheet-primary-actions button{font-size:12px;padding:10px 8px;min-height:38px;border:1px solid #ffffff09;background:#ffffff03;border-radius:6px}
 .sheet-primary-actions kbd{display:none}
 .sheet-group{border-top:1px solid #ffffff0a}
 .sheet-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:11px 10px;font-size:12px;border-radius:6px;cursor:pointer;color:#c8d0cc}
 .sheet-group>summary::-webkit-details-marker{display:none}
 .sheet-group>summary::after{content:'⌄';color:#84948a;transition:transform 120ms}
 .sheet-group[open]>summary::after{transform:rotate(180deg)}
 .sheet-group>summary:hover{background:#ffffff07}.sheet-group-content{padding:0 0 6px 6px}
 .menu-items button{border-radius:6px;font-size:12px;padding:9px 10px}
 #app-menu .menu-items>#offline-status{display:none}
 .sheet-status{font-size:11px;color:#8e9d94;margin:10px;line-height:1.5}
 .destructive-action{color:#d9a2a2}
 .font-settings{display:flex;align-items:center;gap:4px;margin:5px 4px 2px;padding:8px 4px 2px;border-top:1px solid #ffffff0c}
 .font-settings>span{font-size:11px;color:#9ba89f;margin-right:auto}
 .font-settings .icon-button{display:flex;width:32px;padding:4px;border:1px solid #ffffff0c;background:#ffffff03}
 .icon-button,.edit-menu-label,.sheet-group>summary{transition:background-color 160ms ease,color 160ms ease,opacity 160ms ease,transform 200ms var(--ease)}
 .icon-button:active:not(:disabled),.edit-menu-label:active{transform:scale(.94)}
 .tab{transition:background-color 180ms ease,box-shadow 220ms var(--ease),color 160ms ease}
 .tab-close{transition:opacity 160ms ease,background-color 160ms ease,transform 160ms var(--ease)}
 .tree-entry,.tree-row{transition:background-color 160ms ease,color 160ms ease}
 .tree-more{transition:opacity 160ms ease,background-color 160ms ease}
 .menu-items button,.context-menu button,.tool-result{transition:background-color 140ms ease,color 140ms ease,transform 180ms var(--ease)}
 .menu-items button:active:not(:disabled),.context-menu button:active:not(:disabled),.tool-result:active:not(:disabled){transform:translateX(2px)}
 .font-settings .icon-button:active:not(:disabled){transform:scale(.94)}
 #terminal-form{transition:background-color 180ms ease,border-color 180ms ease}
 #terminal-form:focus-within{background:#ffffff03;border-top-color:#aebfb333}
 .sheet-group[open] .sheet-group-content{animation:group-reveal 200ms var(--ease)}
 dialog[open]{animation:dialog-reveal 220ms var(--ease)}
 dialog{border-color:#ffffff18;border-radius:12px;background:#25292a;box-shadow:0 18px 64px #0006}
 dialog::backdrop{backdrop-filter:none;background:#0006}
 .tool-dialog{margin: min(14vh,120px) auto auto;width:min(620px,calc(100vw - 48px));max-height:72dvh}
 .tool-results{max-height:50dvh}.tool-result{border-radius:7px}
 .notebook{padding:12px 20px}.notebook-cell{border-color:#ffffff0e;border-radius:9px}
 .notebook-cell-bar{background:#ffffff02}.notebook button{border-color:#ffffff12;background:#ffffff03}
}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.font-settings{display:none}}
@keyframes desktop-pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

@keyframes group-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-reveal{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Intrinsic details transitions where supported; opacity reveal is the fallback. */
@supports (interpolate-size:allow-keywords){
 @media (min-width:701px) and (pointer:fine),(min-width:1001px){
  .sheet-group{interpolate-size:allow-keywords}
  .sheet-group::details-content{height:0;overflow:clip;opacity:0;transition:height 240ms var(--ease),opacity 160ms ease,content-visibility 240ms allow-discrete}
  .sheet-group[open]::details-content{height:auto;opacity:1}
 }
}

/* Personal appearance: shared tokens, local backgrounds and titanium glass. */
:root[data-appearance]{color:var(--text);background:var(--surface);--editor-surface:var(--surface);color-scheme:dark;--motion-time:280ms}
:root[data-appearance=paper],:root[data-appearance=sand]{color-scheme:light}
html[data-appearance] body{isolation:isolate;background:var(--surface);color:var(--text)}
html[data-backdrop=image] .studio-backdrop{display:block;position:absolute;left:0;right:0;top:calc(-1 * var(--backdrop-offset,0px));height:var(--backdrop-height,100dvh);z-index:-1;pointer-events:none;background:linear-gradient(rgb(0 0 0 / var(--studio-shade)),rgb(0 0 0 / var(--studio-shade))),var(--studio-image) center/cover no-repeat;filter:blur(var(--background-blur,0px));transform:scale(1.035)}
.studio-backdrop{display:none}
html[data-appearance] .app{position:relative;background:transparent}
html[data-appearance] :is(main,.console-panel,.notebook){background:var(--surface);color:var(--text)}
html[data-appearance] :is(.topbar,.sidebar,.editor-bar,.statusbar,.mobile-nav){background:var(--chrome);border-color:var(--edge);color:var(--muted)}
html[data-appearance] :is(.menu-items,.context-menu,dialog,.sheet-heading,.dialog-actions){background:var(--raised);color:var(--text);border-color:var(--edge)}
html[data-appearance] :is(.menu-items button,.context-menu button,.sheet-group>summary,.tool-result,.tab.active,.tree-row.selected,.mobile-document,.console-title,.dialog-head h2){color:var(--text)}
html[data-appearance] :is(.app-name,#project-picker,.sidebar-heading,.runtime-status,.edit-menu-word,.project-root,.tab-open,.tree-row,#output,#terminal-input){color:var(--text)}
html[data-appearance] :is(.sheet-status,.sheet-status small,.tool-result small,.file-actions>span,#duration,.status-right,.appearance-note){color:var(--muted)}
html[data-appearance] :is(dialog input,dialog select,dialog textarea){background:var(--surface);color:var(--text);border-color:var(--edge)}
html[data-appearance] button:hover:not(:disabled),html[data-appearance] summary:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text)}
html[data-appearance] :is(.tab.active,.tree-entry:has(.selected),.tool-result[aria-pressed=true]){background:color-mix(in srgb,var(--accent) 10%,transparent)}
html[data-appearance] .tab.active{box-shadow:inset 0 -1px var(--accent)}
html[data-appearance] :is(button,input,select,summary):focus-visible{outline-color:var(--accent)}
html[data-appearance] #run{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
html[data-appearance] #terminal-form{border-color:var(--edge)}
html[data-material=translucent] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:color-mix(in srgb,var(--chrome) 90%,transparent)}
:root[data-material=glass]{--editor-surface:rgb(24 30 37 / .84)}
html[data-material=glass] .workspace main{background:transparent}
html[data-material=glass] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:rgb(24 30 37 / .60);backdrop-filter:blur(var(--studio-blur)) saturate(.7);-webkit-backdrop-filter:blur(var(--studio-blur)) saturate(.7);border-color:#d5e3f014}
html[data-material=glass] :is(.menu-items,.context-menu,dialog,.sheet-heading){background:rgb(32 39 48 / .94);backdrop-filter:blur(var(--studio-blur));-webkit-backdrop-filter:blur(var(--studio-blur));border-color:#d5e3f022}
html[data-material=glass] .notebook{background:rgb(24 30 37 / .88)}
html[data-appearance] :is(.notebook-cell,.notebook button,.compare-columns pre,.data-dialog td,.data-dialog th){border-color:var(--edge);color:var(--text)}
html[data-appearance] :is(.notebook-toolbar,.notebook-cell-bar,.compare-columns pre,.data-dialog th){background:var(--chrome)}
html[data-appearance] .output-error{color:#d47f86}
.appearance-dialog{width:min(600px,calc(100vw - 32px));padding:0!important;max-height:85dvh;overflow:hidden!important;border-radius:18px}
.appearance-dialog[open]{display:flex;flex-direction:column}
.appearance-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid var(--edge)}
.appearance-head small{font-size:9px;letter-spacing:1.8px;color:var(--muted)}
.appearance-head h2{font-size:23px;letter-spacing:-.6px;font-weight:500;margin:6px 0 0}
.appearance-scroll{overflow:auto;padding:0 24px 12px;overscroll-behavior:contain;min-height:0}
.appearance-intro{font-size:12px;color:var(--muted);margin:16px 0}
.appearance-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.appearance-presets button{min-height:76px;border:1px solid var(--edge);border-radius:10px;background:var(--chrome);text-align:left;padding:12px;font-size:13px}
.appearance-presets small{display:block;margin-top:8px;font-size:10px;color:var(--muted)}
.appearance-presets [data-preset=titanium]{background:linear-gradient(135deg,#56657744,#12182088),url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"%3E%3Cpath fill="%233f5369" d="M0 60 50 5 100 60v10H0"/%3E%3C/svg%3E') center/cover;color:#e2e9ef}
.appearance-section{border-top:1px solid var(--edge);padding:18px 0;margin-top:18px}
.appearance-section h3,.appearance-section>summary{font-size:13px;font-weight:500;margin:0 0 14px;cursor:pointer;color:var(--text)}
.appearance-section>summary{margin-bottom:0}.appearance-section[open]>summary{margin-bottom:16px}
.appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.appearance-dialog label{font-size:12px;color:var(--muted);display:block;margin:10px 0}
.appearance-dialog select{width:100%;margin-top:8px;border-radius:8px;border:1px solid var(--edge);padding:10px;font-size:13px;min-height:40px}
.appearance-dialog input[type=range]{accent-color:var(--accent);width:100%;padding:0;margin:12px 0 0;height:22px;border:0;background:transparent}
.appearance-dialog output{float:right;color:var(--text);font-variant-numeric:tabular-nums}
.appearance-color{display:flex!important;align-items:center;justify-content:space-between}
.appearance-dialog input[type=color]{width:38px;height:30px;border:0;padding:2px;border-radius:6px}
.accent-swatches{display:flex;gap:12px;margin:12px 0}
.accent-swatches button{width:24px;height:24px;border-radius:50%;background:var(--swatch);border:2px solid var(--raised);box-shadow:0 0 0 1px var(--edge)}
.background-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.background-choices button{background:transparent;padding:3px;border:1px solid transparent;border-radius:9px;font-size:10px;text-align:left}
.background-choices button[aria-pressed=true]{border-color:var(--accent)}
.background-choices span{display:block;height:54px;background:var(--chrome) center/cover;border:1px solid var(--edge);border-radius:6px;margin-bottom:7px}
.appearance-upload input{font-size:11px;max-width:100%;padding:8px;margin-top:8px}
.appearance-note{font-size:11px!important;line-height:1.6!important;white-space:normal!important}
.appearance-check{display:flex!important;align-items:center;gap:8px;line-height:1.5}.appearance-check input{width:16px;height:16px;accent-color:var(--accent)}
.appearance-footer{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--edge);background:var(--raised)}
.appearance-footer span{flex:1}.appearance-footer button{border:1px solid var(--edge);border-radius:8px;padding:9px 12px;background:transparent;font-size:12px}
#appearance-save{background:var(--accent);color:var(--accent-ink,#15201b)}#appearance-error{color:#d47f86;font-size:12px}
.sheet-primary-actions [data-command=appearance]{grid-column:1/-1;text-align:left!important;min-height:42px;font-weight:500}
.studio-pet{position:fixed;right:22px;bottom:90px;z-index:8;width:48px;height:48px;border:0;background:transparent!important;color:var(--accent);opacity:.7;padding:0;transition:opacity 180ms,transform 220ms var(--ease)}
.studio-pet:hover{opacity:1}.studio-pet svg{width:48px;height:48px;stroke:none;animation:pet-breathe 4s ease-in-out infinite}
.studio-pet[data-pet=orb] svg,.studio-pet[data-pet=cat] .pet-orb{display:none}
.pet-orb{display:block;width:16px;height:16px;margin:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);animation:pet-breathe 4s ease-in-out infinite}
.studio-pet.greeting{animation:pet-greet 650ms var(--ease)}
@keyframes pet-breathe{50%{transform:translateY(-2px);opacity:.75}}@keyframes pet-greet{30%{transform:translateY(-7px) rotate(-8deg)}65%{transform:translateY(-3px) rotate(5deg)}}
@media(min-width:701px) and (pointer:fine),(min-width:1001px){
 html[data-density=compact] .tree-row{min-height:27px}html[data-density=compact] .tree-more{height:27px}
 html[data-density=compact] .editor-bar{height:38px}
 .focus-mode .statusbar,.focus-mode .sidebar-heading,.focus-mode .file-actions{display:none}
 .focus-mode .workspace{grid-template-columns:0 minmax(0,1fr)}.focus-mode .sidebar{visibility:hidden}
}
html[data-motion=subtle] :is(.workspace,.sidebar,.console-panel){transition-duration:160ms}
html[data-motion=subtle] :is(.icon-button,.menu-items button):active{transform:none}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .appearance-dialog{inset:auto 8px calc(var(--viewport-bottom,0px) + 8px);width:calc(100% - 16px);max-height:calc(var(--app-height,100dvh) - 24px);margin:0}
 .appearance-head{padding:18px}.appearance-scroll{padding:0 16px 12px}.appearance-head h2{font-size:22px}
 .appearance-dialog select,.appearance-upload input{font-size:16px}.appearance-footer{padding:12px}.appearance-footer button{min-height:44px;padding:8px;font-size:12px}
 .appearance-presets button{padding:9px}.appearance-presets small{line-height:1.5}.appearance-color input{min-height:44px}
 .background-choices button{min-height:80px}.accent-swatches button{width:36px;height:36px}
 .studio-pet{right:14px;bottom:124px;width:40px;height:40px}.studio-pet svg{width:40px;height:40px}.keyboard-open~.studio-pet,body:has(.keyboard-open) .studio-pet{display:none}
 html[data-material=glass] :is(.sidebar,.console-panel){backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(24 30 37 / .84)}
}
@media(prefers-reduced-transparency:reduce){html[data-appearance] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav,.menu-items,.context-menu,dialog,.sheet-heading){background:var(--chrome);backdrop-filter:none;-webkit-backdrop-filter:none}}

@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 /* A filtered toolbar would trap its fixed-position sheets inside its bounds. */
 html[data-material=glass] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(24 30 37 / .90)}
}

html[data-appearance] .cm-scroller{font-variant-ligatures:var(--code-ligatures,none)}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.desktop-appearance-layout{display:none}}
.appearance-upload button{border:1px solid var(--edge);border-radius:8px;background:var(--chrome);color:var(--text);font-size:12px;padding:10px 14px;min-height:40px;margin-top:10px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-material=glass] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav,.menu-items,.context-menu,dialog){background:rgb(24 30 37 / .95)}
}

:root[data-material=translucent]{--editor-surface:color-mix(in srgb,var(--surface) 88%,transparent)}
html[data-material=translucent] .workspace main{background:transparent}
.appearance-presets [data-preset=titanium] small{color:#c0cbd5}

/* Personal framing, independent surfaces and compact editor gutters. */
html[data-backdrop=image] .studio-backdrop{background-position:center,var(--background-position,50% 50%);transform:scale(calc(var(--background-scale,1) * 1.035))}
:root[data-material=glass]{--editor-surface:rgb(24 30 37 / var(--editor-opacity,.84))}
:root[data-material=translucent]{--editor-surface:color-mix(in srgb,var(--surface) calc(var(--editor-opacity,.84) * 100%),transparent)}
html[data-material=glass] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:rgb(24 30 37 / var(--panel-opacity,.60))}
html[data-material=translucent] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:color-mix(in srgb,var(--chrome) calc(var(--panel-opacity,.60) * 100%),transparent)}
html[data-material=glass] .notebook{background:rgb(24 30 37 / var(--editor-opacity,.84))}
.appearance-framing{margin:16px 0}.appearance-framing>summary{font-size:12px;cursor:pointer;padding:8px 0}
#appearance-framing-preview{height:115px;border:1px solid var(--edge);border-radius:9px;background:var(--studio-image) var(--background-position)/cover;overflow:hidden}
.profile-actions{display:flex;gap:8px;margin:10px 0}.profile-actions button,#profile-store,.appearance-preview-bar button{border:1px solid var(--edge);background:var(--chrome);color:var(--text);border-radius:8px;padding:9px 12px;font-size:12px;min-height:36px}
.appearance-preview-bar{padding:8px 20px;border-top:1px solid var(--edge);background:var(--raised)}
.appearance-preview-bar button{width:100%;min-height:38px;background:transparent}
#appearance-return{position:fixed;z-index:80;top:58px;left:50%;transform:translateX(-50%);border:1px solid var(--edge);border-radius:20px;background:var(--raised);color:var(--text);box-shadow:0 5px 24px #0005;padding:12px 18px;font-size:13px}
#appearance-return:active{transform:translateX(-50%) scale(.98)}
#appearance-style-status{font-size:12px;color:var(--muted)}
.favorite-toolbar{display:flex;align-items:center;gap:3px;padding-right:6px;border-right:1px solid var(--edge);margin-right:4px}
.favorite-mobile{display:none}.favorite-list{position:fixed;top:58px;right:8px;z-index:70;background:var(--raised);border:1px solid var(--edge);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 12px 32px #0005}
.favorite-list button{display:block;width:100%;border:0;background:transparent;color:var(--text);font-size:14px;text-align:left;min-height:44px;padding:10px}
.studio-pet{width:var(--pet-size,48px);height:var(--pet-size,48px)}.studio-pet svg{width:100%;height:100%}
.studio-pet[data-position=left]{left:18px;right:auto}
.studio-pet[data-state=sleep]::after{content:'z';position:absolute;right:0;top:0;font:10px system-ui;color:var(--muted);opacity:.7}
.studio-pet[data-state=working] svg{animation:pet-working 1.6s ease-in-out infinite}
.studio-pet[data-state=greeting]::after{content:'✦';position:absolute;right:0;top:0;font:13px system-ui;color:var(--accent)}
.studio-pet[data-state=attention]::after{content:'!';position:absolute;right:0;top:0;font:12px system-ui;color:#d8a488}
@keyframes pet-working{50%{transform:translateY(-3px) rotate(3deg)}}
html[data-appearance] .cm-lineNumbers .cm-gutterElement{padding-left:4px;padding-right:5px}
.cm-breakpoints{width:12px}.cm-breakpoints .cm-gutterElement{padding-inline:2px}
.cm-foldGutter .cm-gutterElement{padding-inline:2px}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .favorite-toolbar{display:none}.favorite-mobile{display:block}
 .appearance-preview-bar{padding:8px 12px}.appearance-preview-bar button,.profile-actions button,#profile-store{min-height:44px}
 .studio-pet{width:var(--pet-size,48px);height:var(--pet-size,48px)}.studio-pet svg{width:100%;height:100%}
 html[data-material=glass] .topbar{background:rgb(24 30 37 / max(.85,var(--panel-opacity,.6)));backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-material=glass] :is(.sidebar,.console-panel){backdrop-filter:none;-webkit-backdrop-filter:none}
 .cm-breakpoints{width:14px}
 html[data-appearance] .cm-lineNumbers .cm-gutterElement{padding-left:3px;padding-right:4px}
}
@media(prefers-reduced-transparency:reduce){html[data-appearance] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:var(--chrome)}:root[data-material=glass],:root[data-material=translucent]{--editor-surface:var(--surface)}}
#appearance-framing-preview{position:relative;background:none}
#appearance-framing-preview::before{content:'';position:absolute;inset:0;background:var(--studio-image) var(--background-position)/cover;transform:scale(var(--background-scale,1))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-material=glass] :is(.topbar,.sidebar,.editor-bar,.console-panel,.statusbar,.mobile-nav){background:rgb(24 30 37 / .95)}}
.favorite-mobile>summary{font-size:19px}.favorite-toolbar .icon-button{font-size:13px}

/* Form surfaces share the studio finish rather than browser default chrome. */
select,input[type=range],input[type=checkbox],input[type=color]{-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%239aa7ac' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:34px!important;cursor:pointer;transition:border-color 160ms,background-color 160ms,box-shadow 160ms}
#project-picker{padding-right:24px!important;background-position:right 5px center!important}
.appearance-dialog select,dialog :is(input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=file]),textarea),#dialog-select,.compare-dialog select{border-radius:10px;border:1px solid var(--edge,#ffffff18);box-shadow:inset 0 1px 0 #ffffff03;transition:border-color 160ms,box-shadow 160ms}
.appearance-dialog select:hover,dialog input:not([type=range]):hover{border-color:color-mix(in srgb,var(--muted,#a0adb2) 40%,transparent)}
.appearance-dialog :is(select,input:not([type=range])):focus-visible{outline:2px solid color-mix(in srgb,var(--accent,#b3c7ba) 65%,transparent);outline-offset:2px}
html[data-appearance] .appearance-dialog input[type=range],input[type=range]{--range-progress:50%;display:block;width:100%;height:32px;margin:9px 0 0;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;cursor:pointer;touch-action:pan-y;color:var(--accent,#b3c7ba)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:8px;background:linear-gradient(to right,var(--accent,#b3c7ba) 0 var(--range-progress),var(--edge,#ffffff18) var(--range-progress) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border:2px solid var(--raised,#282d30);border-radius:50%;background:var(--accent,#b3c7ba);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent,#b3c7ba) 35%,transparent),0 2px 5px #0003;transition:box-shadow 150ms,transform 180ms var(--ease)}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#b3c7ba) 12%,transparent),0 2px 5px #0003}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#b3c7ba) 12%,transparent)}
input[type=range]::-moz-range-track{height:4px;border:0;border-radius:8px;background:var(--edge,#ffffff18)}
input[type=range]::-moz-range-progress{height:4px;border-radius:8px;background:var(--accent,#b3c7ba)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--raised,#282d30);border-radius:50%;background:var(--accent,#b3c7ba);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent,#b3c7ba) 35%,transparent),0 2px 5px #0003;transition:box-shadow 150ms,transform 180ms var(--ease)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.14);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#b3c7ba) 12%,transparent)}
input[type=range]:focus-visible{outline:2px solid color-mix(in srgb,var(--accent,#b3c7ba) 55%,transparent);outline-offset:2px;border-radius:8px!important}
html[data-appearance] input[type=checkbox],input[type=checkbox]{position:relative;display:inline-block;flex:none;width:18px;height:18px;min-height:0;padding:0;margin:0 3px 0 0;border:1px solid color-mix(in srgb,var(--muted,#a0adb2) 45%,transparent);border-radius:5px;background:var(--chrome,#191c1e);box-shadow:inset 0 1px 2px #0001;vertical-align:middle;cursor:pointer;transition:background-color 150ms,border-color 150ms,box-shadow 150ms}
html[data-appearance] input[type=checkbox]:checked,input[type=checkbox]:checked{background:var(--accent,#b3c7ba);border-color:var(--accent,#b3c7ba)}
input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--accent-ink,#15201b);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=checkbox]:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#b3c7ba) 10%,transparent)}
.appearance-check{min-height:36px;padding:5px 0;cursor:pointer}
html[data-appearance] .appearance-dialog input[type=color]{width:38px;height:32px;min-height:32px;padding:3px;border:1px solid var(--edge);border-radius:9px;background:var(--chrome);cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}input[type=color]::-moz-color-swatch{border:0;border-radius:5px}
:is(.appearance-footer,.profile-actions,.dialog-actions,.debug-controls) button,#profile-store,#appearance-choose-image,#appearance-preview,.notebook button,#empty-new{border-radius:9px;border:1px solid var(--edge,#ffffff18);box-shadow:inset 0 1px 0 #ffffff04;transition:background-color 160ms,border-color 160ms,box-shadow 160ms,transform 180ms var(--ease)}
html[data-appearance] :is(.appearance-footer,.profile-actions,.dialog-actions,.debug-controls) button:hover:not(:disabled),html[data-appearance] :is(#profile-store,#appearance-choose-image,#appearance-preview):hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--raised))}
html[data-appearance] #appearance-save{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 2px 7px #0002,inset 0 1px 0 #ffffff15}
html[data-appearance] #appearance-save:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text));color:var(--accent-ink)}
.appearance-footer button:active:not(:disabled),.profile-actions button:active:not(:disabled),#profile-store:active:not(:disabled),#appearance-choose-image:active:not(:disabled),#appearance-preview:active:not(:disabled){transform:translateY(1px)}
button:disabled{box-shadow:none;opacity:.35}
.appearance-section>summary,.appearance-framing>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;border-radius:7px;min-height:36px}
.appearance-section>summary::-webkit-details-marker,.appearance-framing>summary::-webkit-details-marker{display:none}
.appearance-section>summary::after,.appearance-framing>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform 180ms var(--ease);margin:0 6px 3px 12px}
.appearance-section[open]>summary::after,.appearance-framing[open]>summary::after{transform:rotate(225deg);margin-top:5px}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 html[data-appearance] .appearance-dialog input[type=range]{height:44px}
 .appearance-check{min-height:44px}
 html[data-appearance] .appearance-dialog input[type=color]{height:38px;min-height:38px}
 input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
 input[type=range]::-moz-range-thumb{width:16px;height:16px}
 .appearance-section>summary,.appearance-framing>summary{min-height:44px}
}
@media(forced-colors:active){input[type=checkbox],input[type=range],select{-webkit-appearance:auto;appearance:auto}input[type=checkbox]::after{display:none}select{background-image:none!important}}
@media(max-width:400px){.appearance-grid{grid-template-columns:1fr;gap:0}}
/* Keep editor popovers above the editor when glass creates a stacking context. */
.editor-bar{position:relative;z-index:4}

/* Studio pickers: both the trigger and the opened choices are custom surfaces. */
.studio-select{position:relative;display:block;min-width:0;width:100%;color:var(--text,#dce4ed)}
select.studio-select-model{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;max-width:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
.studio-select-trigger{display:flex!important;align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:0;min-height:40px;padding:10px 12px!important;border:1px solid var(--edge,#ffffff18)!important;border-radius:10px!important;background:var(--surface,#191c1e)!important;color:var(--text,#dce4ed)!important;font-size:13px;text-align:left;box-shadow:inset 0 1px 0 #ffffff04;transition:background-color 160ms,border-color 160ms,box-shadow 160ms}
.studio-select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-select-trigger::after{content:'';width:7px;height:7px;flex:none;border:solid var(--muted,#9daebf);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform 180ms var(--ease)}
.studio-select-trigger[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}
.studio-select-trigger:hover:not(:disabled),.studio-select-trigger[aria-expanded=true]{border-color:color-mix(in srgb,var(--accent,#b3c7ba) 50%,transparent)!important;background:color-mix(in srgb,var(--accent,#b3c7ba) 5%,var(--surface,#191c1e))!important}
.studio-select-trigger:focus-visible{outline:2px solid var(--accent,#b3c7ba);outline-offset:2px}
.studio-select-trigger:active:not(:disabled){transform:none}
.studio-select-list{position:fixed;inset:auto;margin:0;padding:5px;min-width:0;border:1px solid var(--edge,#ffffff20);border-radius:12px;background:var(--raised,#2b333c);color:var(--text,#dce4ed);box-shadow:0 16px 48px #0005,0 2px 6px #0002;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;animation:picker-reveal 160ms var(--ease);font:13px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.studio-select-option{display:flex;align-items:center;gap:16px;min-height:36px;padding:8px 10px;border-radius:7px;cursor:pointer;overflow-wrap:anywhere;transition:background-color 120ms,color 120ms}
.studio-select-option::after{content:'';margin-left:auto;width:6px;height:10px;flex:none;border:solid transparent;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.studio-select-option[aria-selected=true]::after{border-color:var(--accent,#b3c7ba)}
.studio-select-option[data-highlight=true]{background:color-mix(in srgb,var(--accent,#b3c7ba) 12%,transparent)}
.studio-select-option[aria-disabled=true]{opacity:.4;cursor:default}
.appearance-dialog label>.studio-select{margin-top:8px}
.studio-select[data-select=project-picker]{width:auto;max-width:300px;min-width:90px}
.studio-select[data-select=project-picker]>.studio-select-trigger{min-height:30px;padding:6px 8px!important;font-size:12px;border-color:transparent!important;background:transparent!important;box-shadow:none}
.mobile-project-slot>.studio-select[data-select=project-picker]{width:100%;max-width:none}
.mobile-project-slot .studio-select-trigger{border-color:var(--edge)!important;background:var(--surface)!important}
html[data-material=glass] .studio-select-list{background:rgb(32 39 48 / .97);backdrop-filter:blur(var(--studio-blur));-webkit-backdrop-filter:blur(var(--studio-blur))}
@keyframes picker-reveal{from{opacity:0;transform:translateY(-3px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.studio-select-trigger{min-height:44px;font-size:16px}.studio-select-option{min-height:44px;font-size:15px}.mobile-project-slot .studio-select-trigger{min-height:44px}}
@media(prefers-reduced-motion:reduce){.studio-select-list{animation:none}.studio-select-trigger::after{transition:none}}
html[data-motion=reduced] .studio-select-list{animation:none}
@media(forced-colors:active){.studio-select-trigger,.studio-select-list{border:1px solid ButtonText!important}.studio-select-option[data-highlight=true]{outline:1px solid Highlight}.studio-select-option[aria-selected=true]::after{border-color:Highlight}}

/* Keep panel chrome fixed while content scrolls, including short landscape windows. */
.dialog-head,.appearance-head,.appearance-footer,.appearance-preview-bar{flex-shrink:0}
.dialog-head h2,.appearance-head>div{min-width:0;overflow-wrap:anywhere}
.dialog-head>.icon-button,.appearance-head>.icon-button{flex:none}
.data-dialog{width:fit-content;min-width:min(360px,calc(100vw - 32px));max-width:min(1000px,calc(100vw - 32px))}
.data-dialog table{min-width:100%}
.data-dialog caption{padding:0 0 12px;text-align:left;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.tool-result small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.appearance-section>summary,.appearance-framing>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:7px}
.appearance-section>summary::-webkit-details-marker,.appearance-framing>summary::-webkit-details-marker{display:none}
.appearance-section>summary::after,.appearance-framing>summary::after{content:'';width:7px;height:7px;flex:none;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform 180ms var(--ease)}
.appearance-section[open]>summary::after,.appearance-framing[open]>summary::after{transform:rotate(225deg)}
.appearance-section>summary:hover,.appearance-framing>summary:hover{color:var(--accent)}
/* CodeMirror find/replace shares the same controls as the rest of the studio. */
.cm-panels .cm-search{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 40px 10px 12px;position:relative;line-height:1.5}
.cm-panels .cm-search br{display:none}
.cm-panels .cm-search .cm-textfield{border:1px solid var(--edge);border-radius:8px;background:var(--surface);color:var(--text);padding:7px 9px;min-height:32px;max-width:180px;min-width:0}
.cm-panels .cm-search .cm-button{border:1px solid var(--edge);border-radius:8px;padding:6px 9px;min-height:32px;background:var(--raised);color:var(--text);box-shadow:none;text-transform:none;font-size:11px;transition:background-color 150ms,border-color 150ms,transform 180ms var(--ease)}
.cm-panels .cm-search label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px}
.cm-panels .cm-search button[name=close]{position:absolute;top:10px;right:9px;border-radius:7px;min-width:28px;min-height:28px;color:var(--muted)}
.cm-panels .cm-search :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 dialog,.tool-dialog,.compare-dialog,.data-dialog,.appearance-dialog{max-width:calc(100% - 16px);max-height:calc(var(--app-height,100dvh) - 24px)}
 .data-dialog{width:calc(100% - 16px);min-width:0}
 .accent-swatches{gap:6px;flex-wrap:wrap}
 .accent-swatches button{position:relative;width:44px;height:44px;background:transparent!important;border:0;box-shadow:none}
 .accent-swatches button::before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--swatch);border:2px solid var(--raised);box-shadow:0 0 0 1px var(--edge)}
 html[data-appearance] .appearance-dialog input[type=color]{width:44px;height:44px;min-height:44px}
 .sheet-primary-actions [data-command=appearance]{min-height:48px}
 .cm-panels .cm-search{gap:6px;padding:8px 44px 8px 10px}
 .cm-panels .cm-search .cm-textfield{font-size:16px;max-width:100%;width:100%;min-height:44px}
 .cm-panels .cm-search .cm-button{min-height:44px;font-size:12px}
 .cm-panels .cm-search label{min-height:44px}
 .cm-panels .cm-search button[name=close]{min-width:36px;min-height:44px;top:8px;right:4px}
}
/* Wide datasets scroll horizontally instead of compressing into vertical ribbons. */
.data-dialog table{width:max-content}
.data-dialog th,.data-dialog td{min-width:120px;max-width:320px}
@media(prefers-reduced-transparency:reduce){html[data-material=glass] .studio-select-list{background:var(--raised);backdrop-filter:none;-webkit-backdrop-filter:none}}

.background-library-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px}
.background-library-heading h4{font-size:12px;font-weight:500;margin:0;color:var(--text)}
#background-library-usage{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.background-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;max-height:280px;overflow:auto;padding:2px}
.background-library:empty{display:none}
.background-library button{min-width:0;padding:4px;border:1px solid transparent;border-radius:10px;text-align:left;font-size:11px;color:var(--text)}
.background-library button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.background-library-thumb{display:block;aspect-ratio:1.7;background:var(--chrome) center/cover;border-radius:7px;border:1px solid var(--edge);margin-bottom:7px}
.background-library button>span:last-child{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 3px 4px}
#background-library-actions{display:flex;align-items:end;gap:10px;margin:12px 0}
#background-library-actions label{flex:1;min-width:0;margin:0}
#background-library-actions input{margin-top:8px;min-height:40px}
#background-library-remove{flex:none;max-width:45%;font-size:11px;padding:10px;border:1px solid var(--edge);border-radius:9px;min-height:40px}
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){.background-library{grid-template-columns:repeat(2,minmax(0,1fr))}#background-library-actions input,#background-library-remove{min-height:44px}#background-library-actions input{font-size:16px}}

/* Keep iOS status/home areas independent of the wallpaper and glass layers. */
@media(max-width:700px),(max-width:1000px) and (pointer:coarse){
 .app::before,.app::after{content:'';position:fixed;left:0;right:0;z-index:6;pointer-events:none;background:var(--chrome,#181818)}
 .app::before{top:0;height:env(safe-area-inset-top,0px)}
 .app::after{bottom:0;height:env(safe-area-inset-bottom,0px)}
 html[data-appearance],html[data-appearance] body{background:var(--chrome)}
 html[data-appearance] :is(.mobile-nav,.topbar,.editor-bar){background:var(--chrome);backdrop-filter:none;-webkit-backdrop-filter:none}
 .keyboard-open::after{display:none}
}