.alt-panel{padding:var(--spacing-r)}[data-variant=modular] .alt-panel{padding:var(--spacing-r) var(--spacing-m)}[data-variant=templates] .alt-panel{padding:var(--spacing-m) var(--spacing-s) var(--spacing-r)}[data-variant=templates] .alt-panel[data-variant=recommended]{padding:var(--spacing-r)}[data-variant=templates] .alt-panel img{border-radius:1.5em}.controls{gap:var(--spacing-r);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}@media (width<=768px){.controls{grid-template-columns:1fr}}.control-item{margin-block-end:var(--spacing-r)}.control-item label,.control-item .alt-uppercase{margin-block-end:var(--spacing-r);display:block}.control-item input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;inline-size:100%;display:block}.control-item input[type=range]:focus{outline:none}.control-item input[type=range]::-webkit-slider-runnable-track{background-color:var(--color-base);border-radius:var(--border-radius-r);height:.5rem}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--color-accent);border-radius:var(--border-radius-r);width:1rem;height:1rem;margin-top:-4px}.control-item input[type=range]:focus::-webkit-slider-thumb{border:1px solid var(--color-border);outline:3px solid var(--color-border);outline-offset:.125rem}.control-item input[type=range]::-moz-range-track{background-color:var(--color-base);border-radius:var(--border-radius-r);height:.5rem}.control-item input[type=range]::-moz-range-thumb{background-color:var(--color-accent);border-radius:var(--border-radius-r);border:none;width:1rem;height:1rem}.control-item input[type=range]:focus::-moz-range-thumb{border:1px solid var(--color-border);outline:3px solid var(--color-border);outline-offset:.125rem}select{-webkit-appearance:none;background-color:var(--color-base);border:var(--border-width-r) solid var(--color-border);border-radius:var(--border-radius-r);box-sizing:border-box;color:inherit;font-family:inherit;font-size:var(--font-size-xs);padding:5px var(--spacing-s);text-align:center;width:100%}.input-with-unit{gap:var(--spacing-s);display:flex}.input-with-unit input{-webkit-appearance:none;background-color:var(--color-base);border:var(--border-width-r) solid var(--color-border);border-radius:var(--border-radius-r);color:inherit;font-family:inherit;font-size:var(--font-size-xs);text-align:center;flex:1;padding:5px}.input-with-unit select{width:unset}.btn-group{margin-block-end:var(--spacing-r)}.btn-secondary{background-color:#6c757d}.btn-secondary:hover{background-color:#5a6268}.btn-copied{background-color:#218838}#gridPreview{width:100%;min-height:400px;margin-block-end:var(--spacing-r);overflow:hidden}[data-variant=modular] #gridPreview{box-sizing:border-box;padding-inline:var(--spacing-s)}.compound{gap:var(--grid-column-gap);width:100%;height:100%;display:grid}.column{animation:fade .75s ease-in-out var(--delay,0s) forwards;background-color:var(--color-accent);opacity:0;min-height:100px;translate:0 .5rem}@keyframes fade{to{opacity:1;translate:0}}.sm-compound{gap:var(--spacing-s);grid-auto-rows:5rem;grid-template-columns:repeat(var(--cols,2), 1fr);margin-block-start:var(--spacing-r);display:grid}.sm-compound--second{grid-template-columns:repeat(var(--cols,4),1fr)}.sm-compound__column{background-color:var(--color-accent)}.gap-controls{align-items:center;gap:var(--spacing-s);display:flex}.code-tabs{border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-s);display:flex}.code-tab{background-color:unset;border-radius:unset;border-width:unset;cursor:pointer;padding:var(--spacing-s) var(--spacing-m)}.code-tab.active{border-bottom:var(--border-width-l) solid var(--color-accent)}.code-content{display:none}.code-content.active{display:block}.modular{gap:var(--grid-column-gap);width:100%;height:100%;min-height:300px;display:grid}.module{background-color:var(--color-accent);cursor:pointer;user-select:none;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.module:hover{z-index:10}.module.spanned{z-index:2;background-color:#fbae3c}.module.dragging{opacity:.9;z-index:100}.module-highlight{background-color:var(--color-background-default);font-size:var(--font-size-2xs);border-radius:12px;padding:3px 8px;position:absolute;top:8px;right:8px}.grid-track-numbers{color:var(--color-background-default);font-size:var(--font-size-2xs)}.resize-handle{border:2px solid var(--color-text-default);cursor:pointer;opacity:0;height:12px;transition:all var(--animate-duration-faster) var(--animate-function);z-index:20;background-color:#9d191d;border-radius:50%;width:12px;position:absolute}.module:hover .resize-handle{opacity:1}.resize-handle:hover{background:#fbae3c;scale:1.2}.resize-handle.bottom-right{cursor:nwse-resize;bottom:5px;right:5px}.resize-handle.bottom-left{cursor:nesw-resize;bottom:-8px;left:-8px}.resize-handle.top-right{cursor:nesw-resize;top:-8px;right:-8px}.resize-handle.top-left{cursor:nwse-resize;top:-8px;left:-8px}.resize-handle.bottom{cursor:ns-resize;bottom:-8px;left:50%;translate:-50%}.resize-handle.top{cursor:ns-resize;top:-8px;left:50%;translate:-50%}.resize-handle.right{cursor:ew-resize;top:50%;right:-8px;translate:0 -50%}.resize-handle.left{cursor:ew-resize;top:50%;left:-8px;translate:0 -50%}.resize-overlay{background-color:var(--color-background-default);border:var(--border-width-l) dashed #fff;opacity:0;pointer-events:none;transition:opacity var(--animate-duration-faster) var(--animate-function);z-index:5;position:absolute;inset:0}.module.resizing .resize-overlay{opacity:1}.modal{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-content{background:var(--color-background-default);border:var(--border-width-l) solid var(--color-border);border-radius:var(--border-radius-l);margin-trim:block;max-width:400px;padding:var(--spacing-l);width:90%;position:relative}.modal-close{background-color:unset;cursor:pointer;font-size:var(--font-size-l);border:none;position:absolute;top:0;right:0}.span-controls{gap:0 var(--spacing-l);grid-template-columns:1fr 1fr;margin-block-end:var(--spacing-r);display:grid}.span-control input{-webkit-appearance:none;background-color:var(--color-base);border:var(--border-width-r) solid var(--color-border);border-radius:var(--border-radius-r);box-sizing:border-box;color:inherit;font-family:inherit;font-size:var(--font-size-xs);text-align:center;width:100%;padding:5px}.reset-span,.reset-span:hover{background-color:#9d191d}