:root{--app-bg: #f4f4f3;--panel: #fafafa;--panel-strong: #fafafa;--line: rgba(0, 0, 0, .07);--text: #18181b;--muted: #71717a;--accent: #18181b;--accent-hover: #27272a;--accent-foreground: #fafafa;--accent-soft: #f4f4f5;--editor-bg: #fafafa;--editor-ratio: 42%}#root{width:100%;height:100%;min-height:0}body{background:var(--app-bg)}.topbar{min-height:68px;padding:14px 22px;background:var(--app-bg)}.brand-block{gap:9px}.site-name{font-size:14px;font-weight:800;letter-spacing:.08em}.brand-name{color:var(--muted);font-size:14px;font-weight:550}.brand-separator{margin:0;color:var(--muted)}.ui-button{white-space:nowrap;flex-shrink:0;height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:7px;color:var(--accent-foreground);background:var(--accent);font-family:inherit;font-size:13px;font-weight:550;line-height:1;cursor:pointer;transition:color .14s ease,background .14s ease,border-color .14s ease}@media(max-width:480px){html[data-runtime=web] .topbar{padding:12px}.toolbar{width:100%;justify-content:space-between;gap:3px}.toolbar .ui-button{padding-inline:7px;gap:5px;font-size:12px}.toolbar .theme-button{width:32px;padding:0}.toolbar-divider{margin-inline:1px}}.ui-button:hover{background:var(--accent-hover)}.ui-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}.ui-button--outline{border-color:var(--line);color:var(--text);background:var(--panel-strong)}.ui-button--outline:hover,.ui-button--ghost:hover{color:var(--text);background:var(--accent-soft)}.ui-button--ghost{color:var(--muted);background:transparent}.ui-button--sm{height:36px;padding-inline:12px}.ui-button--icon{width:36px;height:36px;padding:0}.ui-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workspace{grid-template-columns:minmax(320px,var(--editor-ratio)) 5px minmax(380px,1fr)}.pane-header{height:52px;padding:0 20px;background:var(--panel-strong)}.pane-title,.preview-header .pane-title{font-family:inherit;font-size:13px;font-weight:550;letter-spacing:0;text-transform:none}.status-dot{width:5px;height:5px;box-shadow:none}.mini-button{border:0;border-radius:6px}.editor-wrap{grid-template-columns:46px 1fr}.line-numbers,#editor{padding-top:20px;font-size:15px;line-height:26px}.line-numbers{padding-right:11px}#editor{padding-left:20px}.resize-handle:after{inset:0 1px;border-radius:0}.preview-stage{padding:24px 20px 64px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--preview-bg)}.preview-header{background:var(--preview-bg)}.phone-sheet{width:min(100%,640px);border-color:#0000000a;border-radius:2px;box-shadow:var(--shadow)}.ui-tooltip{z-index:50;padding:6px 9px;border-radius:6px;color:var(--accent-foreground);background:var(--accent);font-size:12px;line-height:1;animation:tooltip-in .12s ease-out}.ui-tooltip-arrow{fill:var(--accent)}@keyframes tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media(max-width:840px){#root{height:auto;min-height:100vh}.brand-name,.brand-separator{display:none}.pane{border-radius:12px}.phone-sheet{width:min(100%,640px)}}