*{box-sizing:border-box}.logo,.logo:visited{text-decoration:none;color:var(--sf-primary);text-transform:uppercase;font-weight:600}:root{--sidebar-width: 280px;--sidebar-gutter: 0;--preview-height: 48vh;--console-height: 150px}.logo--image{max-width:200px}.app{grid-template-columns:var(--sidebar-width, 280px) var(--sidebar-gutter, 4px) 1fr;transition:none;min-height:calc(100vh - 56px)}.sidebar-resizer{width:var(--sidebar-gutter, 0)}.modal{background-color:var(--sf-surface-0)}.modal--wrap{background-color:var(--sf-surface-overlay);color:var(--sf-surface-inverse);-moz-tab-size:var(--sf-text--size-1);tab-size:var(--sf-text--size-1)}.editors{display:grid;grid-template-columns:var(--col-html, 1fr) var(--col-css, 1fr) var(--col-js, 1fr);height:auto;min-height:240px}.editor-child{border-radius:var(--sf-radius-1)}.editor.pfull{top:0;right:0;bottom:0;left:0;min-height:100vh;background:var(--sf-surface-0)}.editor.pfull .editor-child{background:var(--sf-surface-1, var(--sf-surface-0))}.editor textarea{height:calc(40vh - 60px)}.preview{border-top:1px solid var(--sf-outline-variant);height:var(--preview-height, 48vh);min-height:220px;flex:0 0 auto}.preview-main{border-radius:var(--sf-radius-1)}.console{border-top:1px dashed var(--sf-outline-variant);height:var(--console-height, 150px);min-height:120px;flex:0 0 auto;overflow:auto;font-family:ui-monospace,monospace;font-size:12px}.console-logs-wrap{overflow:auto}.console-logs{flex:1}.console.collapsed{height:0;min-height:0;border-top:0}.console.collapsed .sf-text-1{display:none}.console.collapsed .console-toggle{right:var(--sf-space-2);bottom:var(--sf-space-2)}.console.collapsed .console-wrap{border:0}.console-wrap{border-radius:var(--sf-radius-1)}.editor{min-height:220px}.menu-category__title{text-transform:capitalize;font-weight:600;letter-spacing:.02em;color:var(--sf-on-surface-variant, #c7c9d1)}.sidebar-scroll{bottom:4px;right:4px;pointer-events:none;transition:opacity .2s ease}.sidebar-scroll.visible{pointer-events:auto}.editor__wrap .source,.editor__wrap textarea{top:0;right:0;bottom:0;left:0}.editor__wrap pre.editor__highlight{pointer-events:none}.editor__highlight code{display:block;color:inherit}.editor__wrap textarea{background:transparent;color:transparent;caret-color:var(--sf-surface-inverse);-moz-tab-size:var(--sf-text--size-1);tab-size:var(--sf-text--size-1);font-family:var(--sf-mono);padding:0 var(--sf-space-1) var(--sf-space-1);font-size:var(--sf-text--size);line-height:var(--sf-text--height);border:0;resize:none}.editor.collapsed .editor__wrap{display:none}.editor.collapsed .editor-child--head{justify-content:space-between}.pfull{min-height:100vh}.main-section{min-width:0;min-height:0}.is-sidebar-collapsed{grid-template-columns:0 var(--sidebar-gutter, 4px) 1fr}body.is-resizing,body.is-resizing-x,body.is-resizing-y{-webkit-user-select:none;user-select:none}.horizontal-resizer-button{left:50%;transform:translate(-50%)}.horizontal-resizer-button:focus-visible{outline:2px solid var(--sf-primary)}@media (max-width: 900px){.app{grid-template-columns:1fr;min-height:calc(100vh - 56px)}.sidebar{position:fixed;top:56px;bottom:0;left:0;width:min(86vw,320px);z-index:20;transform:translate(0);transition:transform .22s ease}.is-sidebar-collapsed .sidebar{transform:translate(-100%)}.sidebar-resizer{display:none}.preview{height:42vh;min-height:200px}.console{height:120px;min-height:96px}}