.html-shell{min-height:100vh;color:var(--foreground)}.html-workspace{height:100vh;min-height:0;padding:calc(var(--topbar-height) + 16px) 14px calc(var(--statusbar-height) + 12px);grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);gap:12px;display:grid}.html-panel{border:1px solid var(--border);background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent));min-width:0;min-height:0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px)saturate(145%);backdrop-filter:blur(24px)saturate(145%);border-radius:18px;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.html-panel-header{min-height:var(--panel-bar-height);border-bottom:1px solid var(--border);background:var(--panel-bar-bg);color:var(--brand-strong);justify-content:space-between;align-items:center;gap:16px;padding:8px 14px;font-size:.78rem;font-weight:700;display:flex}.html-panel-header>span:last-child{color:var(--text-soft);font-weight:500}.html-editor{resize:none;width:100%;min-height:0;color:var(--code-text);tab-size:2;background:0 0;border:0;outline:0;padding:18px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.88rem;line-height:1.65}.html-preview-panel{background:#fff}.html-preview{background:#fff;border:0;width:100%;height:100%;min-height:0}.html-auto-run{color:var(--text-soft);cursor:pointer;align-items:center;gap:7px;font-weight:600;display:inline-flex}.html-auto-run input{accent-color:var(--brand)}@media (max-width:1100px){body{overflow:auto}.html-shell{padding-top:0}.html-topbar{border-radius:0 0 18px 18px;position:relative;inset:0}.html-workspace{grid-template-columns:1fr;height:auto;padding:12px}.html-panel{min-height:520px}.html-statusbar{margin:0 12px 12px;position:relative;inset:auto}}@media (max-width:640px){.html-panel{min-height:420px}.html-statusbar span:last-child{display:none}}