:root{--dark: 40%;--soft: 65%;--light: 85%;--lighter: 95%;--base-white: #ffffff;--base-black: #121212;--base-brand: #e1116f;--base-red: #fb3748;--base-blue: #335cff;--base-green: #1fc16b;--base-orange: #ff9147;--black-dark: hsl(from var(--base-black) h s var(--dark));--black-soft: hsl(from var(--base-black) h s var(--soft));--black-light: hsl(from var(--base-black) h s var(--light));--black-lighter: hsl(from var(--base-black) h s var(--lighter));--brand-dark: hsl(from var(--base-brand) h s var(--dark));--brand-soft: hsl(from var(--base-brand) h s var(--soft));--brand-light: hsl(from var(--base-brand) h s var(--light));--brand-lighter: hsl(from var(--base-brand) h s var(--lighter));--red-dark: hsl(from var(--base-red) h s var(--dark));--red-soft: hsl(from var(--base-red) h s var(--soft));--red-light: hsl(from var(--base-red) h s var(--light));--red-lighter: hsl(from var(--base-red) h s var(--lighter));--blue-dark: hsl(from var(--base-blue) h s var(--dark));--blue-soft: hsl(from var(--base-blue) h s var(--soft));--blue-light: hsl(from var(--base-blue) h s var(--light));--blue-lighter: hsl(from var(--base-blue) h s var(--lighter));--green-dark: hsl(from var(--base-green) h s var(--dark));--green-soft: hsl(from var(--base-green) h s var(--soft));--green-light: hsl(from var(--base-green) h s var(--light));--green-lighter: hsl(from var(--base-green) h s var(--lighter));--orange-dark: hsl(from var(--base-orange) h s var(--dark));--orange-soft: hsl(from var(--base-orange) h s var(--soft));--orange-light: hsl(from var(--base-orange) h s var(--light));--orange-lighter: hsl(from var(--base-orange) h s var(--lighter));--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-rounded: 999px;--radius-circle: 50%;--gap-xs: 4px;--gap-sm: 8px;--gap-md: 12px;--gap-lg: 16px;--gap-xl: 32px;--gap-2xl: 46px;--text-xs: 12px;--text-sm: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 24px;--text-2xl: 48px;--transition-fast: .1s;--transition-normal: .3s;--transition-slow: .5s}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}*:dir(rtl){font-family:Almarai,sans-serif}html{scroll-behavior:smooth}body{color:var(--base-black);background-color:var(--base-white)}h1,h2,h3,h4,h5,h6{font-weight:500}[data-button]{--button-padding: 8px 12px;--button-font-size: var(--text-md);--button-border-color: transparent;--button-outline-color: transparent;--button-bg-color: var(--base-brand);--button-text-color: var(--base-white);cursor:pointer;-webkit-user-select:none;user-select:none;width:fit-content;outline-offset:1.5px;padding:var(--button-padding);border-radius:var(--radius-sm);font-size:var(--button-font-size);color:var(--button-text-color);background-color:var(--button-bg-color);border:1px solid var(--button-border-color);outline:2.5px solid var(--button-outline-color);transition-duration:var(--transition-normal);display:flex;gap:var(--gap-sm);align-items:center;justify-content:space-between}[data-button]:hover{--button-bg-color: var(--brand-dark)}[data-button][data-button=secondary]{--button-bg-color: var(--brand-lighter);--button-text-color: var(--base-brand)}[data-button][data-button=secondary]:hover{--button-bg-color: var(--brand-light)}[data-button][data-button=outline]{--button-bg-color: transparent;--button-text-color: var(--base-black);--button-border-color: var(--black-light)}[data-button][data-button=outline]:hover{--button-bg-color: var(--black-lighter)}[data-button][data-button=ghost]{--button-bg-color: transparent;--button-text-color: var(--base-brand)}[data-button][data-button=ghost]:hover{--button-bg-color: var(--brand-lighter)}[data-button][data-button=destructive]{--button-bg-color: var(--base-red);--button-text-color: var(--base-white)}[data-button][data-button=destructive]:hover{--button-bg-color: var(--red-dark)}[data-button][data-size=icon]{--button-padding: 8px}[data-button][data-size=sm]{--button-padding: 6px 10px;--button-font-size: var(--text-sm)}[data-button][data-size=lg]{--button-padding: 8px 14px;--button-font-size: var(--text-lg)}[data-button]:active{filter:opacity(.7)}[data-button]:disabled{--button-bg-color: var(--black-lighter);--button-text-color: var(--black-soft);--button-border-color: transparent;pointer-events:none}[data-button]:focus-visible{--button-outline-color: var(--brand-lighter)}[data-input],[data-textarea]{--input-padding: 8px 12px;--input-font-size: var(--text-md);--input-border-color: var(--black-light);--input-outline-color: transparent;--input-bg-color: var(--base-white);--input-text-color: var(--base-black);width:250px;outline-offset:1.5px;padding:var(--input-padding);color:var(--input-text-color);border-radius:var(--radius-sm);font-size:var(--input-font-size);background-color:var(--input-bg-color);border:1px solid var(--input-border-color);outline:2.5px solid var(--input-outline-color);transition-duration:var(--transition-normal)}[data-input][data-textarea],[data-textarea][data-textarea]{height:80px;min-height:35px;max-height:150px;resize:vertical}[data-input]:disabled,[data-textarea]:disabled{--input-bg-color: var(--black-lighter);--input-text-color: var(--black-soft);--input-border-color: transparent;pointer-events:none}[data-input]:disabled::placeholder,[data-textarea]:disabled::placeholder{color:var(--input-text-color)}[data-input]:invalid,[data-textarea]:invalid{--input-border-color: var(--red-light)}[data-input]:focus,[data-textarea]:focus{--input-border-color: var(--base-black);--input-outline-color: var(--black-lighter)}[data-input]:focus:invalid,[data-textarea]:focus:invalid{--input-border-color: var(--base-red);--input-outline-color: var(--red-lighter)}[data-upload]{--upload-bg-color: var(--base-white);--upload-border-color: var(--black-light);--upload-content-color: var(--black-soft);padding:20px;-webkit-user-select:none;user-select:none;width:fit-content;border-radius:var(--radius-md);background-color:var(--upload-bg-color);border:1.5px dashed var(--upload-border-color);display:grid;gap:var(--gap-lg)}[data-upload] [data-upload-icon]{display:flex;justify-content:center;color:var(--upload-content-color)}[data-upload] [data-upload-content]{display:grid;gap:var(--gap-xs);text-align:center}[data-upload] [data-upload-content] [data-upload-title]{font-size:var(--text-md)}[data-upload] [data-upload-content] [data-upload-subtitle]{font-weight:400;font-size:var(--text-sm);color:var(--upload-content-color)}[data-upload] [data-upload-action]{display:flex;justify-content:center}[data-upload] [data-upload-action] [data-upload-input]{width:0;height:0;opacity:0;position:absolute}[data-upload]:has([data-upload-input]:disabled){--upload-border-color: transparent;--upload-bg-color: var(--black-lighter)}[data-upload]:has([data-upload-input]:disabled) [data-upload-content] [data-upload-title]{opacity:.7}[data-upload]:has([data-upload-input]:disabled) [data-upload-action] [data-button]{pointer-events:none;border-color:transparent;color:var(--upload-content-color)}[data-toggle]{--toggle-width: 36px;--toggle-height: 20px;--toggle-thumb-size: 14px;--toggle-thumb-offset: 2px;--toggle-outline-color: transparent;--toggle-bg-color: var(--black-light);--toggle-thumb-bg-color: var(--base-white);width:var(--toggle-width);height:var(--toggle-height);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;outline-offset:1.5px;border-radius:var(--radius-rounded);background-color:var(--toggle-bg-color);outline:2.5px solid var(--toggle-outline-color)}[data-toggle]:before{content:"";width:4px;height:4px;position:absolute;translate:5% -50%;inset-block-start:50%;border-radius:var(--radius-circle);left:var(--toggle-thumb-offset);border:5px solid var(--toggle-thumb-bg-color);transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19) 0s}[data-toggle]:active:before{scale:.9}[data-toggle]:checked{--toggle-bg-color: var(--base-brand)}[data-toggle]:checked:before{left:calc(100% - var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2)}[data-toggle]:disabled{--toggle-bg-color: var(--black-lighter);pointer-events:none}[data-toggle]:focus-visible{--toggle-outline-color: var(--brand-lighter)}[data-switch-toggle]{--switch-item-outline-color: transparent;--switch-item-text-color: var(--black-soft);--switch-toggle-bg-color: var(--black-lighter);--switch-item-checked-bg-color: var(--base-white);--switch-item-checked-text-color: var(--base-black);padding:4px;display:flex;width:fit-content;border-radius:var(--radius-sm);background-color:var(--switch-toggle-bg-color)}[data-switch-toggle][data-switch-toggle=vertical]{flex-direction:column}[data-switch-toggle] [data-switch-item]{display:flex;gap:var(--gap-sm);align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:6px 20px;text-align:center;outline-offset:1.5px;font-size:var(--text-md);color:var(--switch-item-text-color);border-radius:calc(var(--radius-sm) * .5);outline:2.5px solid var(--switch-item-outline-color);transition-duration:var(--transition-normal)}[data-switch-toggle] [data-switch-item][data-switch-item=icon]{padding:8px}[data-switch-toggle] [data-switch-item]>input[type=radio]{width:0;height:0;opacity:0;position:absolute}[data-switch-toggle] [data-switch-item]:has(input[type=radio]:checked){color:var(--switch-item-checked-text-color);background-color:var(--switch-item-checked-bg-color)}[data-switch-toggle] [data-switch-item]:has(input[type=radio]:focus-visible){--switch-item-outline-color: var(--brand-lighter)}[data-button-group]{--button-item-outline-color: transparent;--button-item-text-color: var(--black-dark);--button-toggle-bg-color: var(--base-white);--button-item-checked-bg-color: var(--black-lighter);--button-item-checked-text-color: var(--base-black);width:100%;display:flex;border-radius:var(--radius-sm);border:1px solid var(--black-light);background-color:var(--button-toggle-bg-color)}[data-button-group] [data-button-item]{width:100%;display:flex;gap:var(--gap-sm);align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:8px 12px;text-align:center;outline-offset:1.5px;font-size:var(--text-sm);color:var(--button-item-text-color);border-radius:calc(var(--radius-sm) * .9);outline:2.5px solid var(--button-item-outline-color);transition-duration:var(--transition-normal)}[data-button-group] [data-button-item]:not(:first-child):not(:last-child){border-inline:1px solid var(--black-light)}[data-button-group] [data-button-item]>input[type=radio]{width:0;height:0;opacity:0;position:absolute}[data-button-group] [data-button-item]:has(input[type=radio]:checked){color:var(--button-item-checked-text-color);background-color:var(--button-item-checked-bg-color)}[data-button-group] [data-button-item]:has(input[type=radio]:focus-visible){--button-item-outline-color: var(--brand-lighter)}[data-button-group] [data-button-item]:not(:first-child):not(:last-child){border-radius:0;border-inline-width:.5px}[data-button-group] [data-button-item]:first-child{border-end-end-radius:0;border-start-end-radius:0;border-inline-end:.5px solid var(--black-light)}[data-button-group] [data-button-item]:last-child{border-end-start-radius:0;border-start-start-radius:0;border-inline-start:.5px solid var(--black-light)}[data-note]{--note-padding: 16px;--note-icon-size: 20px;display:grid;width:fit-content;position:relative;font-size:var(--text-md);padding:var(--note-padding);border-radius:var(--radius-md);background-color:var(--note-bg-color);gap:var(--gap-xs);padding-inline-start:calc(var(--note-padding) + var(--note-icon-size) + var(--gap-md))}[data-note][data-note=success]{--note-icon-color: var(--green-dark);--note-bg-color: var(--green-lighter)}[data-note][data-note=error]{--note-icon-color: var(--red-dark);--note-bg-color: var(--red-lighter)}[data-note][data-note=warning]{--note-icon-color: var(--orange-dark);--note-bg-color: var(--orange-lighter)}[data-note][data-note=info]{--note-icon-color: var(--blue-dark);--note-bg-color: var(--blue-lighter)}[data-note][data-note=feature]{--note-icon-color: var(--black-soft);--note-bg-color: var(--black-lighter)}[data-note]>svg{position:absolute;inset:var(--note-padding);width:var(--note-icon-size);height:var(--note-icon-size);color:var(--note-icon-color)}[data-note] [data-note-title]{font-weight:500}[data-note] [data-note-description]{opacity:.7;font-weight:400}hr[data-separator]{border:.5px solid var(--black-light)}[data-hint]{display:flex;gap:var(--gap-xs);align-items:flex-start;color:var(--black-dark);font-size:var(--text-sm)}[data-hint]:dir(rtl){line-height:160%}[data-hint]>svg{width:16px;height:16px;flex-shrink:0}[data-hint][data-hint=error]{color:var(--base-red)}[data-hint][data-hint=disabled]{-webkit-user-select:none;user-select:none;color:var(--black-light)}[data-home]{padding:2em 10%;min-height:100vh;display:flex;gap:var(--gap-xl);align-items:center;flex-direction:column;background-color:var(--black-lighter)}[data-home] [data-intro]{width:50%;display:flex;gap:var(--gap-xl);flex-direction:column}[data-home] [data-intro] .intro-media{width:100%;padding:3em;display:grid;justify-content:center;animation:move 5s linear infinite}[data-home] [data-intro] .intro-media .frame{display:flex;align-items:center;justify-content:center;width:fit-content;position:relative;border:1.5px solid var(--base-brand)}[data-home] [data-intro] .intro-media .frame span{width:10px;height:10px;position:absolute;background-color:var(--base-white);border:1.5px solid var(--base-brand)}[data-home] [data-intro] .intro-media .frame span:nth-child(2){inset-block-start:-5px;inset-inline-start:-5px}[data-home] [data-intro] .intro-media .frame span:nth-child(3){inset-block-end:-5px;inset-inline-start:-5px}[data-home] [data-intro] .intro-media .frame span:nth-child(4){inset-block-start:-5px;inset-inline-end:-5px}[data-home] [data-intro] .intro-media .frame span:last-child{inset-inline-end:-5px;inset-block-end:-5px}[data-home] [data-intro] .intro-media .frame img{filter:grayscale(1)}@keyframes move{0%{transform:translateY(.5em)}50%{transform:translateY(-.5em)}to{transform:translateY(.5em)}}[data-home] [data-intro] .intro-media .cursor{position:relative}[data-home] [data-intro] .intro-media .cursor span{width:max-content;padding:6px 12px;position:absolute;inset-inline-start:115%;font-size:var(--text-sm);color:var(--base-white);text-transform:uppercase;border-radius:var(--radius-sm);background-color:var(--base-brand)}[data-home] [data-intro] .intro-media .cursor svg{rotate:-45deg;position:absolute;color:var(--base-brand);margin-block-start:-1em;inset-inline-end:-15%}[data-home] [data-intro] .intro-media .cursor svg:dir(rtl){rotate:45deg}[data-home] [data-intro] .intro-content{display:grid;gap:var(--gap-sm);text-align:center}[data-home] [data-intro] .intro-content h1{font-weight:700;text-transform:uppercase}[data-home] [data-intro] .intro-content p{color:var(--black-dark);font-size:var(--text-lg)}[data-home] [data-options]{width:50%;display:grid;gap:var(--gap-xl);grid-template-columns:repeat(2,1fr)}[data-home] [data-options] .option{outline:none;position:relative;color:currentColor;text-decoration:none;border:1px solid var(--black-light)}[data-home] [data-options] .option .dot{width:10px;height:10px;position:absolute;background-color:var(--base-white);border:1.5px solid var(--black-light)}[data-home] [data-options] .option .dot:nth-child(3){inset-block-start:-5px;inset-inline-start:-5px}[data-home] [data-options] .option .dot:nth-child(4){inset-block-end:-5px;inset-inline-start:-5px}[data-home] [data-options] .option .dot:nth-child(5){inset-block-start:-5px;inset-inline-end:-5px}[data-home] [data-options] .option .dot:last-child{inset-inline-end:-5px;inset-block-end:-5px}[data-home] [data-options] .option .content{padding:1em;text-align:center}[data-home] [data-options] .option .content span{font-weight:500;transition-duration:var(--transition-normal)}[data-home] [data-options] .option .visual{padding:1em;display:flex;justify-content:center;background-color:var(--black-light)}[data-home] [data-options] .option .visual .box{width:80%;height:150px;padding:1em;border-radius:var(--radius-md);background-color:var(--base-white);display:flex;gap:var(--gap-md);flex-direction:column}[data-home] [data-options] .option .visual .box span{width:100%;height:30%;border-radius:var(--radius-sm);background-color:var(--black-lighter);transition-duration:var(--transition-normal)}[data-home] [data-options] .option .visual .box div{height:100%;display:grid;gap:var(--gap-md);grid-template-columns:70% auto}[data-home] [data-options] .option .visual .box div span{height:100%}[data-home] [data-options] .option .visual .box.design{display:grid;grid-template-columns:repeat(3,1fr)}[data-home] [data-options] .option .visual .box.design span{height:100%}[data-home] [data-options] .option:hover,[data-home] [data-options] .option:focus-visible{border-color:var(--brand-soft)}[data-home] [data-options] .option:hover .dot,[data-home] [data-options] .option:focus-visible .dot{border-color:var(--base-brand)}[data-home] [data-options] .option:hover .visual .box>span:first-child,[data-home] [data-options] .option:focus-visible .visual .box>span:first-child{background-color:var(--base-brand)}[data-home] [data-language]{position:absolute;inset-block-start:2em;inset-inline-end:5%}[data-home] [data-language] [data-select]{--select-width: 150px}[data-select]{--select-width: 250px;width:var(--select-width)}[data-select] [data-select-trigger]{width:100%;cursor:pointer;padding:8px 12px;text-align:start;-webkit-user-select:none;user-select:none;outline-offset:1.5px;anchor-name:--select-trigger;border-radius:var(--radius-sm);background-color:var(--base-white);border:1px solid var(--black-light);display:flex;gap:var(--gap-md);align-items:center;justify-content:space-between;outline:2.5px solid transparent}[data-select] [data-select-trigger]>svg:first-child{color:var(--black-dark)}[data-select] [data-select-trigger]:disabled{pointer-events:none;color:var(--black-soft);border-color:transparent;background-color:var(--black-lighter)}[data-select] [data-select-trigger]:focus{border-color:var(--base-black);outline-color:var(--black-lighter)}[data-select] [data-select-content]{inset:auto;padding:6px;position:absolute;opacity:0;display:none;left:anchor(left);top:anchor(bottom);transform:translateY(0);border-radius:var(--radius-sm);background-color:var(--base-white);border:.5px solid var(--black-light);box-shadow:#0000000d 0 4px 12px;transition:display var(--transition-normal),transform var(--transition-normal),opacity var(--transition-normal) cubic-bezier(.18,.89,.43,1.19) 0s;transition-behavior:allow-discrete}[data-select] [data-select-content]:has([data-select-search]){padding-block-start:0}[data-select] [data-select-content] [data-select-item]{border:none;padding:8px;outline:none;cursor:pointer;overflow:hidden;font-weight:400;font-size:var(--text-sm);background-color:transparent;border-radius:var(--radius-xs);display:flex;gap:var(--gap-md);align-items:center;justify-content:space-between;transition-duration:var(--transition-normal)}[data-select] [data-select-content] [data-select-item][data-select-item=comic-relie] [data-select-item-label]{font-family:Comic Relief}[data-select] [data-select-content] [data-select-item][data-select-item=monoton] [data-select-item-label]{font-family:Monoton}[data-select] [data-select-content] [data-select-item][data-select-item=almarai] [data-select-item-label]{font-family:Almarai}[data-select] [data-select-content] [data-select-item] [data-select-item-label]{flex:2;text-align:start}[data-select] [data-select-content] [data-select-item]>svg:first-child{color:var(--black-dark)}[data-select] [data-select-content] [data-select-item][aria-selected=false]>svg:last-child{display:none}[data-select] [data-select-content] [data-select-item]:hover,[data-select] [data-select-content] [data-select-item]:focus-visible{background-color:var(--black-lighter)}[data-select] [data-select-content] [data-select-search]{display:flex;gap:var(--gap-sm);align-items:center;margin-block-end:6px;padding-inline-start:6px;border-block-end:.5px solid var(--black-light)}[data-select] [data-select-content] [data-select-search] svg{color:var(--black-soft)}[data-select] [data-select-content] [data-select-search] input[type=text]{width:100%;border:none;outline:none;padding-block:10px}[data-select] [data-select-content] [data-select-empty]{text-align:center;padding-block:20px;font-size:var(--text-sm)}[data-select] [data-select-content]:popover-open{opacity:1;display:grid;transform:translateY(8px)}@starting-style{[data-select] [data-select-content]:popover-open{opacity:0;display:grid;transform:translateY(0)}}[data-select]:not(:has([aria-selected=true])) [data-select-trigger]{color:var(--black-dark)}[data-select]:not(:has([aria-selected=true])) [data-select-trigger]>svg:first-child{color:var(--black-soft)}[data-select]:not(:has([aria-selected=true])) [data-select-trigger]>svg:last-child{color:var(--base-black)}[data-select] [data-select-item-label],[data-select] [data-select-trigger-value]{width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}[data-select] [data-select-item-img],[data-select] [data-select-trigger-img]:not(svg){object-fit:cover;border-radius:var(--radius-xs);border:.5px solid var(--black-light)}[data-select] svg{flex-shrink:0}[data-editor]{display:grid;gap:var(--gap-md);grid-template-rows:auto 1fr;padding:.5em;min-height:100vh;background-color:var(--black-lighter)}[data-editor] [data-header]{padding:1em;border-radius:var(--radius-md);background-color:var(--base-white);border:.5px solid var(--black-light);display:grid;grid-template-columns:repeat(3,1fr)}[data-editor] [data-header] .main-actions{display:flex;justify-content:center}[data-editor] [data-header] .theme-actions,[data-editor] [data-header] .primary-actions{display:flex;gap:var(--gap-md)}[data-editor] [data-header] .theme-actions.theme-actions,[data-editor] [data-header] .primary-actions.theme-actions{align-items:center}[data-editor] [data-header] .theme-actions.primary-actions,[data-editor] [data-header] .primary-actions.primary-actions{justify-content:end}[data-editor] [data-header] .theme-actions.primary-actions .group:dir(rtl),[data-editor] [data-header] .primary-actions.primary-actions .group:dir(rtl){flex-direction:row-reverse}[data-editor] [data-header] .theme-actions .theme-info,[data-editor] [data-header] .primary-actions .theme-info{display:flex;gap:var(--gap-sm);align-items:center;font-size:var(--text-sm)}[data-editor] [data-header] .theme-actions .theme-info small,[data-editor] [data-header] .primary-actions .theme-info small{display:flex;gap:var(--gap-sm);align-items:center;padding:4px 8px;font-weight:500;color:var(--green-dark);border-radius:var(--radius-xs);background-color:var(--green-lighter)}[data-editor] [data-header] .theme-actions .theme-info small:before,[data-editor] [data-header] .primary-actions .theme-info small:before{content:"";width:6px;height:6px;clip-path:circle();background-color:var(--base-green)}[data-editor] [data-header] .theme-actions .group,[data-editor] [data-header] .primary-actions .group{display:flex;gap:var(--gap-sm)}[data-editor] [data-header] .theme-actions .group:last-child button,[data-editor] [data-header] .primary-actions .group:last-child button{width:100px;justify-content:center}[data-editor] [data-core]{display:grid;gap:var(--gap-md);grid-template-columns:auto 450px;transition:var(--transition-normal) ease}[data-editor] [data-core]:has([data-preview=full-screen]){gap:0px;grid-template-columns:1fr 0px}[data-editor] [data-core]:has([data-preview=full-screen]) [data-controls]{border:none;overflow:hidden}[data-editor] [data-core] [data-controls]{display:flex;position:relative;border-radius:var(--radius-md);background-color:var(--base-white);border:.5px solid var(--black-light)}[data-editor] [data-core] [data-controls] [data-select]{--select-width: 100%}[data-editor] [data-core] [data-preview]{display:flex;justify-content:center}[data-editor] [data-core] [data-preview][data-preview=mobile] .preview-box{width:420px}[data-editor] [data-core] [data-preview] .preview-box{width:100%;display:flex;flex-direction:column;border-radius:var(--radius-md);border:.5px solid var(--black-light);transition-duration:var(--transition-normal);transition-timing-function:cubic-bezier(.18,.89,.43,1.19)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar{padding:1em;display:grid;align-items:center;grid-template-columns:repeat(3,1fr);background-color:var(--base-white);border-block-end:.5px solid var(--black-light);border-radius:var(--radius-md) var(--radius-md) 0 0}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .actions{display:flex;gap:var(--gap-sm)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .actions>div{width:8px;height:8px;clip-path:circle();background-color:var(--base-red)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .actions>div:nth-child(2){background-color:var(--base-orange)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .actions>div:last-child{background-color:var(--base-green)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .url{display:flex;gap:var(--gap-xl);align-content:center;justify-content:space-between;padding:4px 6px;color:var(--black-dark);border-radius:var(--radius-xs);background-color:var(--black-lighter)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .url a{color:currentColor;text-decoration:none;font-size:var(--text-sm)}[data-editor] [data-core] [data-preview] .preview-box .browser-bar .url a:hover{text-decoration:underline}[data-editor] [data-core] [data-preview] .preview-box iframe{border:none;border-radius:0 0 var(--radius-md) var(--radius-md)}[data-dropdown]{--dropdown-width: fit-content;width:var(--dropdown-width)}[data-dropdown] [data-dropdown-trigger]{--button-text-color: var(--base-black);anchor-name:--dropdown-trigger}[data-dropdown] [data-dropdown-trigger]:hover{--button-bg-color: var(--black-lighter)}[data-dropdown] [data-dropdown-trigger]:focus{outline-color:var(--black-lighter)}[data-dropdown] [data-dropdown-content]{inset:auto;padding:6px;position:absolute;opacity:0;display:none;left:anchor(left);top:anchor(bottom);transform:translateY(0);width:250px;border-radius:var(--radius-sm);background-color:var(--base-white);border:.5px solid var(--black-light);box-shadow:#0000000d 0 4px 12px;transition:display var(--transition-normal),transform var(--transition-normal),opacity var(--transition-normal) cubic-bezier(.18,.89,.43,1.19);transition-behavior:allow-discrete}[data-dropdown] [data-dropdown-content]:dir(rtl){left:auto;right:anchor(right)}[data-dropdown] [data-dropdown-content] [data-dropdown-item]{width:100%;border:none;padding:8px;outline:none;cursor:pointer;overflow:hidden;font-weight:400;font-size:var(--text-sm);background-color:transparent;border-radius:var(--radius-xs);display:flex;gap:var(--gap-md);align-items:center;justify-content:space-between;transition-duration:var(--transition-normal)}[data-dropdown] [data-dropdown-content] [data-dropdown-item] [data-dropdown-item-label]{flex:2;text-align:start}[data-dropdown] [data-dropdown-content] [data-dropdown-item] [data-toggle]{--toggle-width: 36px}[data-dropdown] [data-dropdown-content] [data-dropdown-item]>svg:first-child{color:var(--black-dark)}[data-dropdown] [data-dropdown-content] [data-dropdown-item]:hover,[data-dropdown] [data-dropdown-content] [data-dropdown-item]:focus-visible{background-color:var(--black-lighter)}[data-dropdown] [data-dropdown-content] [data-dropdown-label]{padding:8px;display:flex;align-items:center;justify-content:space-between}[data-dropdown] [data-dropdown-content] [data-dropdown-label] .info{display:grid;gap:var(--gap-xs)}[data-dropdown] [data-dropdown-content] [data-dropdown-label] .info span{font-size:var(--text-sm)}[data-dropdown] [data-dropdown-content] [data-dropdown-label] .info p{color:var(--black-soft);font-size:var(--text-xs)}[data-dropdown] [data-dropdown-content] [data-dropdown-label] .version{padding:2px 8px;font-size:var(--text-xs);border-radius:var(--radius-rounded);color:var(--base-brand);background-color:var(--brand-lighter);border:.5px solid var(--brand-soft)}[data-dropdown] [data-dropdown-content] [data-separator]{margin-block:var(--gap-xs);border-block-end:0}[data-dropdown] [data-dropdown-content]:popover-open{opacity:1;display:grid;transform:translateY(8px)}@starting-style{[data-dropdown] [data-dropdown-content]:popover-open{opacity:0;display:grid;transform:translateY(0)}}[data-dropdown] [data-dropdown-trigger-value]{width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}[data-dropdown] svg{flex-shrink:0}body:has(*:popover-open){overflow:hidden;overscroll-behavior:contain}[data-tooltip]{width:fit-content;height:fit-content;position:relative}[data-tooltip] [aria-describedby]:hover,[data-tooltip] [aria-describedby]:focus-visible{position:relative}[data-tooltip] [aria-describedby]:hover+[data-tooltip-content],[data-tooltip] [aria-describedby]:focus-visible+[data-tooltip-content]{scale:1;opacity:1;filter:blur(0px);visibility:visible}[data-tooltip] [data-tooltip-content]{z-index:2;opacity:0;scale:.9;filter:blur(1px);padding:6px 10px;width:max-content;position:absolute;visibility:hidden;isolation:isolate;translate:-50% 15px;left:50%;font-size:var(--text-xs);border-radius:var(--radius-sm);color:var(--base-white);background-color:var(--base-black);transition-duration:var(--transition-normal);transition-timing-function:cubic-bezier(.18,.89,.43,1.19)}[data-tooltip] [data-tooltip-content]:before{content:"";position:absolute;translate:-50% 0;inset-block-end:100%;left:50%;border:6px solid transparent;border-block-end-color:var(--base-black)}[data-tooltip][data-position=bottom] [aria-describedby]:hover+[data-tooltip-content],[data-tooltip][data-position=bottom] [aria-describedby]:focus-visible+[data-tooltip-content]{translate:-50% 10px}[data-tooltip][data-position=left] [data-tooltip-content]{inset:auto;translate:-15px 50%;inset-block-start:-25%}[data-tooltip][data-position=left] [data-tooltip-content]:dir(ltr){right:100%}[data-tooltip][data-position=left] [data-tooltip-content]:dir(ltr):before{left:100%}[data-tooltip][data-position=left] [data-tooltip-content]:dir(rtl){left:100%;translate:30px 50%}[data-tooltip][data-position=left] [data-tooltip-content]:dir(rtl):before{right:100%}[data-tooltip][data-position=left] [data-tooltip-content]:before{inset:auto;translate:0 -50%;inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:var(--base-black)}[data-tooltip][data-position=left] [aria-describedby]:hover+[data-tooltip-content]:dir(ltr),[data-tooltip][data-position=left] [aria-describedby]:focus-visible+[data-tooltip-content]:dir(ltr){translate:-10px 50%}[data-tooltip][data-position=left] [aria-describedby]:hover+[data-tooltip-content]:dir(rtl),[data-tooltip][data-position=left] [aria-describedby]:focus-visible+[data-tooltip-content]:dir(rtl){translate:15px 50%}[data-alert-dialog]{z-index:99;width:450px;position:fixed;translate:-50% -50%;inset-block-start:50%;left:50%;border-radius:var(--radius-lg);background-color:var(--base-white);border:1px solid var(--black-light);transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19)}[data-alert-dialog]:not([data-alert-dialog=true]){scale:.9;opacity:0;visibility:hidden}[data-alert-dialog] [data-alert-dialog-body]{padding:20px;display:flex;gap:var(--gap-lg);align-items:flex-start}[data-alert-dialog] [data-alert-dialog-body] [data-alert-dialog-icon]{display:flex;align-items:center;padding:.5em;border-radius:var(--radius-sm);color:var(--base-red);background-color:var(--red-lighter)}[data-alert-dialog] [data-alert-dialog-body] [data-alert-dialog-info]{display:grid;gap:var(--gap-sm)}[data-alert-dialog] [data-alert-dialog-body] [data-alert-dialog-info] h3{font-size:var(--text-lg)}[data-alert-dialog] [data-alert-dialog-body] [data-alert-dialog-info] p{line-height:150%;color:var(--black-dark);font-size:var(--text-md)}[data-alert-dialog] [data-alert-dialog-footer]{padding:16px 20px;display:flex;justify-content:end;border-block-start:1px solid var(--black-light)}[data-alert-dialog] [data-alert-dialog-footer] [data-alert-dialog-actions]{display:flex;gap:var(--gap-sm)}[data-backdrop]{top:0;right:0;bottom:0;left:0;z-index:98;position:fixed;-webkit-backdrop-filter:blur(5px) brightness(.5);backdrop-filter:blur(5px) brightness(.5)}[data-backdrop]:not([data-backdrop=true]){opacity:0;visibility:hidden}[data-controls-actions]{padding:1em;display:flex;flex-direction:column;justify-content:space-between}[data-controls-actions] .helper-actions{display:grid;gap:var(--gap-sm);justify-content:center}[data-controls-actions] .helper-actions [data-button]{anchor-name:--tutorial-trigger}[data-popover]{width:320px;z-index:2;inset-block-end:1em;inset-inline-end:94px;position:absolute;border-radius:var(--radius-md);border:1px solid var(--black-light);box-shadow:#00000008 0 4px 12px;transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19)}[data-popover][data-popover=false]{opacity:0;visibility:hidden;transform:translateY(8px)}[data-popover] [data-popover-view] iframe{border-radius:var(--radius-md) var(--radius-md) 0 0}[data-popover] [data-popover-content]{display:grid;gap:var(--gap-sm);padding:16px 20px;background-color:var(--base-white);border-radius:0 0 var(--radius-md) var(--radius-md)}[data-popover] [data-popover-content] h3{font-size:var(--text-md)}[data-popover] [data-popover-content] p{line-height:150%;color:var(--black-dark);font-size:var(--text-sm)}[data-popover] [data-popover-content] [data-popover-actions]{display:grid;gap:var(--gap-sm);grid-template-columns:70% auto;margin-block-start:var(--gap-md)}[data-popover] [data-popover-content] [data-popover-actions] [data-button]{width:100%;justify-content:center}[data-selector]{width:450px;overflow:hidden;position:absolute;inset-inline-end:450px;border-radius:var(--radius-md);background-color:var(--base-white);border:.5px solid var(--black-light);box-shadow:#0000000d 0 4px 12px;transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19)}[data-selector][data-selector=false]{opacity:0;visibility:hidden;transform:translateY(8px)}[data-selector] .selector-head{padding:1em;display:flex;align-items:center;justify-content:space-between;border-block-end:.5px solid var(--black-light)}[data-selector] .selector-head h4 small{color:var(--black-soft);font-size:var(--text-xs)}[data-selector] .selector-head [data-button]{--button-padding: 6px}[data-selector] .selector-core{padding:1em;display:grid;gap:var(--gap-md)}[data-selector] .selector-core input[type=search]{width:100%}[data-selector] .selector-core .options{display:grid;gap:var(--gap-md);grid-template-columns:repeat(2,1fr)}[data-selector] .selector-core .options .option{width:100%;align-items:start;flex-direction:column;font-size:var(--text-sm)}[data-selector] .selector-core .options .option .icon{padding:.5em;display:flex;align-items:center;color:var(--black-soft);border-radius:var(--radius-xs);background-color:var(--black-lighter);transition-duration:var(--transition-normal)}[data-selector] .selector-core .options .option:hover{color:var(--base-brand);border-color:var(--brand-soft);background-color:var(--brand-lighter)}[data-selector] .selector-core .options .option:hover .icon{color:var(--base-white);background-color:var(--base-brand)}[data-selector] .selector-core .options .empty{text-align:center;padding-block:3em;grid-column:1/-1}[data-selector] .selector-core .options .empty p{font-size:var(--text-md)}[data-selector] .selector-core .options .empty span{color:var(--black-soft);font-size:var(--text-sm)}[data-controls-accessory]{width:100%;max-height:89vh;display:flex;flex-direction:column}[data-controls-accessory] .controls-category{border-block-end:1px solid var(--black-light)}[data-controls-accessory] .controls-category>div{height:66px;padding:1em;display:flex;align-items:center;justify-content:space-between}[data-controls-accessory] .controls-category .settings-category{display:grid;grid-template-columns:.5fr 3fr .5fr}[data-controls-accessory] .controls-category .settings-category h4{text-align:center}[data-controls-accessory] .controls-category .settings-category [data-button=outline]:dir(rtl) svg{rotate:180deg}[data-controls-accessory] .sections{height:100%;padding:1em;display:flex;overflow-x:hidden;flex-direction:column}[data-controls-accessory] .sections ul li{list-style:none}[data-controls-accessory] .sections ul:has([style*="z-index: 1;"]) .section-container{animation:none}[data-controls-accessory] .sections .blocks-container{display:grid;grid-template-rows:0fr;transition:var(--transition-slow) cubic-bezier(.18,.89,.43,1.19) 0s}[data-controls-accessory] .sections .blocks-container .blocks-box{display:flex;gap:var(--gap-sm);overflow:hidden;position:relative;flex-direction:column;padding-inline-start:55px}[data-controls-accessory] .sections .blocks-container .blocks-box:before{content:"";width:22px;height:calc(100% - 27px);position:absolute;inset-inline-start:2em;border:1px solid transparent;border-block-end-color:var(--black-light);border-inline-start-color:var(--black-light);border-end-start-radius:var(--radius-sm)}[data-controls-accessory] .sections [data-add-block=primary]{width:100%;justify-content:start}[data-controls-accessory] .sections [data-add-section=primary]{width:auto;justify-content:flex-start;padding-inline-start:40px}[data-controls-accessory] .sections [data-add-section=secondary],[data-controls-accessory] .sections [data-add-block=secondary]{opacity:0;z-index:2;border:none;display:grid;position:absolute;height:var(--gap-sm);justify-content:center;anchor-name:--selector-trigger;border-radius:var(--radius-xs);background-color:var(--brand-lighter);width:calc(100% - 18px - var(--gap-md));inset-inline-end:0;inset-block-start:calc(var(--gap-sm) * -1);transition-duration:var(--transition-normal)}[data-controls-accessory] .sections [data-add-section=secondary]:not(:disabled),[data-controls-accessory] .sections [data-add-block=secondary]:not(:disabled){cursor:pointer}[data-controls-accessory] .sections [data-add-section=secondary][data-add-block=secondary],[data-controls-accessory] .sections [data-add-block=secondary][data-add-block=secondary]{width:100%;inset-block-start:calc(var(--gap-sm) * -1 - 1px)}[data-controls-accessory] .sections [data-add-section=secondary] .icon,[data-controls-accessory] .sections [data-add-block=secondary] .icon{scale:.8;padding:3px;display:flex;width:fit-content;position:relative;align-items:center;transform:translateY(-40%);color:var(--base-white);border-radius:var(--radius-circle);background-color:var(--base-brand);transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19) 0s}[data-controls-accessory] .sections [data-add-section=secondary]:hover:not(:disabled),[data-controls-accessory] .sections [data-add-section=secondary]:focus-visible:not(:disabled),[data-controls-accessory] .sections [data-add-block=secondary]:hover:not(:disabled),[data-controls-accessory] .sections [data-add-block=secondary]:focus-visible:not(:disabled){opacity:1}[data-controls-accessory] .sections [data-add-section=secondary]:hover:not(:disabled) .icon,[data-controls-accessory] .sections [data-add-section=secondary]:focus-visible:not(:disabled) .icon,[data-controls-accessory] .sections [data-add-block=secondary]:hover:not(:disabled) .icon,[data-controls-accessory] .sections [data-add-block=secondary]:focus-visible:not(:disabled) .icon{scale:1}[data-controls-accessory] .sections [data-add-section=secondary]:hover:not(:disabled):focus-visible,[data-controls-accessory] .sections [data-add-section=secondary]:focus-visible:not(:disabled):focus-visible,[data-controls-accessory] .sections [data-add-block=secondary]:hover:not(:disabled):focus-visible,[data-controls-accessory] .sections [data-add-block=secondary]:focus-visible:not(:disabled):focus-visible{outline-color:var(--brand-light)}[data-controls-accessory] .theme{height:100%;padding:1em;display:flex;gap:var(--gap-sm);flex-direction:column}[data-controls-accessory] .settings{padding:1em;overflow-y:scroll;display:flex;gap:var(--gap-lg);flex-direction:column}[data-controls-accessory] .settings .settings-type{width:100%}[data-controls-accessory] .settings .settings-type [data-switch-item]{width:100%;justify-content:center}[data-controls-accessory] .settings .setting{display:grid;gap:var(--gap-sm)}[data-controls-accessory] .settings .setting:first-child:has(.header) .header{border:none;padding-block-start:0}[data-controls-accessory] .settings .setting:has([data-toggle]){display:flex;align-items:center;justify-content:space-between}[data-controls-accessory] .settings .setting:has([data-toggle]) .label{width:100%;-webkit-user-select:none;user-select:none}[data-controls-accessory] .settings .setting .label{width:fit-content;color:var(--black-dark);font-size:var(--text-sm)}[data-controls-accessory] .settings .setting .input{width:100%}[data-controls-accessory] .settings .setting .header{display:flex;font-weight:700;position:relative;width:calc(100% + 2em);color:var(--black-dark);font-size:var(--text-sm);text-transform:uppercase;margin-inline-start:-1em;padding-inline-start:1em;padding-block-end:var(--gap-xs);padding-block-start:var(--gap-lg);border-block-start:1px solid var(--black-light)}.theme-setting-card{width:100%;padding:10px;display:flex;-webkit-user-select:none;user-select:none;gap:var(--gap-sm);position:relative;align-items:center;background-color:transparent;border-radius:var(--radius-sm);border:1px solid var(--black-light);outline-offset:1.5px;outline:2.5px solid transparent;transition-duration:var(--transition-normal)}.theme-setting-card .icon{padding:8px;display:flex;align-items:center;color:var(--black-soft);border-radius:var(--radius-xs);background-color:var(--black-lighter);transition-duration:var(--transition-normal)}.theme-setting-card .name{flex:2;font-size:var(--text-sm)}.theme-setting-card .actions{display:flex;gap:var(--gap-sm);opacity:0;visibility:hidden;transition-duration:var(--transition-normal)}.theme-setting-card .actions [data-button]{--button-padding: 6px}.theme-setting-card:hover:focus-visible,.theme-setting-card:focus-visible:focus-visible,.theme-setting-card:has(.actions [data-button]:focus-visible):focus-visible{outline-color:var(--brand-lighter)}.theme-setting-card:hover .actions,.theme-setting-card:focus-visible .actions,.theme-setting-card:has(.actions [data-button]:focus-visible) .actions{opacity:1;visibility:visible}.block-card{width:100%;padding:10px;display:flex;-webkit-user-select:none;user-select:none;gap:var(--gap-sm);position:relative;align-items:center;background-color:transparent;border-radius:var(--radius-sm);border:1px solid var(--black-light);outline-offset:1.5px;outline:2.5px solid transparent;transition-duration:var(--transition-normal);animation:added_block var(--transition-normal) cubic-bezier(.18,.89,.43,1) forwards}.block-card[data-deleted=true]{animation-name:removed_block}@keyframes added_block{0%{opacity:0;visibility:hidden;transform:translate(100%)}}@keyframes removed_block{to{opacity:0;visibility:hidden;transform:translate(100%)}}.block-card>.icon{cursor:grab;padding:8px;display:flex;align-items:center;color:var(--black-soft);border-radius:var(--radius-xs);background-color:var(--black-lighter);transition-duration:var(--transition-normal)}.block-card>.icon svg{transition-duration:var(--transition-fast)}.block-card>.icon svg:last-child{opacity:0;position:absolute;visibility:hidden}.block-card>.icon:active{cursor:grabbing}.block-card .name{flex:2;font-size:var(--text-sm)}.block-card .actions{display:flex;gap:var(--gap-sm);opacity:0;visibility:hidden;transition-duration:var(--transition-normal)}.block-card .actions [data-button]{--button-padding: 6px}.block-card .actions [data-button]:last-child{--button-bg-color: var(--red-lighter);--button-text-color: var(--base-red);--button-border-color: var(--red-light)}.block-card .actions [data-button]:last-child:hover{--button-bg-color: var(--base-red);--button-text-color: var(--base-white);--button-border-color: transparent}.block-card:not(:last-child):before{content:"";width:22px;position:absolute;inset-inline-start:-24px;border:.5px solid var(--black-light)}.block-card:hover:focus-visible,.block-card:focus-visible:focus-visible,.block-card:has(.actions [data-button]:focus-visible):focus-visible{outline-color:var(--brand-lighter)}.block-card:hover .icon svg:first-child,.block-card:focus-visible .icon svg:first-child,.block-card:has(.actions [data-button]:focus-visible) .icon svg:first-child{opacity:0;position:absolute;visibility:hidden}.block-card:hover .icon svg:last-child,.block-card:focus-visible .icon svg:last-child,.block-card:has(.actions [data-button]:focus-visible) .icon svg:last-child{opacity:1;position:relative;visibility:visible}.block-card:hover .actions,.block-card:focus-visible .actions,.block-card:has(.actions [data-button]:focus-visible) .actions{opacity:1;visibility:visible}.section-box{display:flex;gap:var(--gap-md);position:relative;align-items:center;margin-block-end:var(--gap-sm)}.section-box .section-card{width:100%;padding:10px;display:flex;-webkit-user-select:none;user-select:none;gap:var(--gap-sm);align-items:center;background-color:transparent;border-radius:var(--radius-sm);border:1px solid var(--black-light);outline-offset:1.5px;outline:2.5px solid transparent;transition-duration:var(--transition-normal)}.section-box .section-card .icon{cursor:grab;padding:8px;display:flex;align-items:center;color:var(--black-soft);border-radius:var(--radius-xs);background-color:var(--black-lighter);transition-duration:var(--transition-normal)}.section-box .section-card .icon svg{transition-duration:var(--transition-fast)}.section-box .section-card .icon svg:last-child{opacity:0;position:absolute;visibility:hidden}.section-box .section-card .icon:active{cursor:grabbing}.section-box .section-card .name{flex:2;font-size:var(--text-sm)}.section-box .section-card .actions{display:flex;gap:var(--gap-sm);opacity:0;visibility:hidden;transition-duration:var(--transition-normal)}.section-box .section-card .actions [data-button]{--button-padding: 6px}.section-box .section-card .actions [data-button]:last-child:not(:disabled){--button-bg-color: var(--red-lighter);--button-text-color: var(--base-red);--button-border-color: var(--red-light)}.section-box .section-card .actions [data-button]:last-child:not(:disabled):hover{--button-bg-color: var(--base-red);--button-text-color: var(--base-white);--button-border-color: transparent}.section-box .section-card:hover:focus-visible,.section-box .section-card:focus-visible:focus-visible,.section-box .section-card:has(.actions [data-button]:focus-visible):focus-visible{outline-color:var(--brand-lighter)}.section-box .section-card:hover .icon svg:first-child,.section-box .section-card:focus-visible .icon svg:first-child,.section-box .section-card:has(.actions [data-button]:focus-visible) .icon svg:first-child{opacity:0;position:absolute;visibility:hidden}.section-box .section-card:hover .icon svg:last-child,.section-box .section-card:focus-visible .icon svg:last-child,.section-box .section-card:has(.actions [data-button]:focus-visible) .icon svg:last-child{opacity:1;position:relative;visibility:visible}.section-box .section-card:hover .actions,.section-box .section-card:focus-visible .actions,.section-box .section-card:has(.actions [data-button]:focus-visible) .actions{opacity:1;visibility:visible}.section-box .section-control{height:100%;border:none;display:grid;cursor:pointer;align-items:center;background-color:transparent}.section-box .section-control[data-no-blocks=false]{visibility:hidden}.section-box .section-control>svg{rotate:-90deg;color:var(--black-light);transition:var(--transition-normal) cubic-bezier(.18,.89,.43,1.19) 0s}.section-box .section-control>svg:dir(rtl){rotate:90deg}.section-box .section-control>input[type=checkbox]{width:0;height:0;opacity:0;position:absolute}.section-box .section-control:has(input[type=checkbox]:checked)>svg{rotate:0deg;color:var(--base-brand)}.section-box .section-control:has(input[type=checkbox]:checked)+.section-card{border-color:var(--brand-soft);background-color:var(--brand-lighter)}.section-box .section-control:has(input[type=checkbox]:checked)+.section-card .icon{color:var(--base-white);background-color:var(--base-brand)}.section-box .section-control:hover>svg{color:var(--black-soft)}.section-box:has(input[type=checkbox]:checked)+.blocks-container{margin-block-end:var(--gap-sm);grid-template-rows:1fr!important}.section-box:has(input[type=checkbox]:checked)+.blocks-container .blocks-box{animation:overflow_visible forwards;animation-delay:var(--transition-normal)}@keyframes overflow_visible{to{overflow:visible}}.section-container{background-color:var(--base-white)}.section-container[data-animate=true]{animation:added var(--transition-normal) cubic-bezier(.18,.89,.43,1) forwards}@keyframes added{0%{opacity:0;visibility:hidden;transform:translate(-100%)}}.section-container:has(.section-box[data-deleted=true]){animation:removed var(--transition-normal) cubic-bezier(.18,.89,.43,1) forwards}@keyframes removed{to{opacity:0;visibility:hidden;transform:translate(-100%)}}[data-slider]{--slider-bg-color: var(--black-light);--slider-thumb-size: 18px;--slider-thumb-bg-color: var(--base-brand);--slider-thumb-border-color: var(--base-white);--slider-thumb-outline-color: var(--black-light);display:flex;gap:var(--gap-sm);align-items:center}[data-slider] [data-slider-input]{width:250px;outline:none;position:relative;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--radius-rounded)}[data-slider] [data-slider-input]:before{content:"";top:0;right:0;bottom:0;left:0;height:6px;width:calc(var(--value) * 1%);position:absolute;background-color:var(--slider-thumb-bg-color);border-radius:var(--radius-rounded)}[data-slider] [data-slider-input]::-webkit-slider-runnable-track{height:6px;background:var(--slider-bg-color);border-radius:var(--radius-rounded)}[data-slider] [data-slider-input]::-webkit-slider-thumb{z-index:1;cursor:pointer;position:relative;-moz-appearance:none;appearance:none;-webkit-appearance:none;margin-block-start:-6px;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:var(--radius-circle);background-color:var(--slider-thumb-bg-color);border:5px solid var(--slider-thumb-border-color);outline:.5px solid var(--slider-thumb-outline-color)}[data-slider] [data-slider-input]::-webkit-slider-thumb:hover{cursor:grab}[data-slider] [data-slider-input]::-webkit-slider-thumb:active{cursor:grabbing}[data-slider] [data-slider-input]:disabled{--slider-thumb-bg-color: var(--black-light);pointer-events:none}[data-slider] [data-slider-input]:focus{--slider-thumb-outline-color: var(--brand-lighter)}[data-slider] [data-slider-input]:focus::-webkit-slider-thumb{outline-width:2.5px}[data-slider] [data-slider-output]{display:flex}[data-slider] [data-slider-output] [data-input]{width:60px;-moz-appearance:textfield}[data-slider] [data-slider-output] [data-input]::-webkit-outer-spin-button,[data-slider] [data-slider-output] [data-input]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}[data-slider] [data-slider-output] span{display:flex;align-items:center;justify-content:center;padding-inline:12px;color:var(--black-dark);font-size:var(--text-sm);border:1px solid var(--black-light);border-inline-start:transparent;border-end-end-radius:var(--radius-sm);border-start-end-radius:var(--radius-sm)}[data-slider] [data-slider-output]:has(span) [data-input]{border-end-end-radius:0;border-start-end-radius:0}[data-color-picker]{display:flex;align-items:center;padding:8px 12px;position:relative;border-radius:var(--radius-sm);outline-offset:1px;outline:2px solid transparent;border:1px solid var(--black-light)}[data-color-picker] input[type=color]{z-index:2;border:none;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;position:absolute;background-color:transparent;width:calc(100% - 24px)!important}[data-color-picker] input[type=color]::-webkit-color-swatch-wrapper{padding:0;width:20px;height:20px}[data-color-picker] input[type=color]::-webkit-color-swatch{border:1px solid var(--black-light);border-radius:var(--radius-xs)}[data-color-picker] span{position:relative;text-transform:uppercase;font-size:var(--text-md);inset-inline-start:calc(20px + var(--gap-sm))}[data-color-picker]:has(input[type=color]:focus){border-color:var(--base-black);outline-color:var(--black-lighter)}[data-image-upload]{width:100%;height:100px;display:flex;gap:var(--gap-sm);justify-content:center;flex-direction:column;position:relative;border-style:dashed;color:var(--black-dark)}[data-image-upload] [data-image-upload-label]{font-size:var(--text-sm)}[data-image-upload] [data-image-upload-preview]:has(img){top:0;right:0;bottom:0;left:0;position:absolute}[data-image-upload] [data-image-upload-preview]:has(img):before{content:attr(data-image-upload-preview);top:50%;left:50%;z-index:2;position:absolute;translate:-50% -50%;color:var(--base-white)}[data-image-upload] [data-image-upload-preview]:has(img):after{content:"";top:0;right:0;bottom:0;left:0;position:absolute;-webkit-backdrop-filter:brightness(.7);backdrop-filter:brightness(.7);border-radius:var(--radius-sm)}[data-image-upload] [data-image-upload-preview]:has(img):before,[data-image-upload] [data-image-upload-preview]:has(img):after{opacity:0;visibility:hidden;transition-duration:var(--transition-normal)}[data-image-upload] [data-image-upload-preview]:has(img):hover:before,[data-image-upload] [data-image-upload-preview]:has(img):hover:after{opacity:1;visibility:visible}[data-image-upload] [data-image-upload-preview] img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm)}[data-image-upload]>input[type=file]{scale:0;opacity:0;position:absolute}[data-image-upload]:focus,[data-image-upload]:focus-visible{border-color:var(--base-black);outline-color:var(--black-lighter)}[data-design-system]{padding:5%;min-height:100vh;display:grid;gap:var(--gap-xl);grid-template-columns:auto 1px 400px;background-color:var(--black-lighter)}[data-design-system] .back{position:absolute;text-decoration:none;inset-block-start:5%;inset-inline-start:5%}[data-design-system] .back>svg:dir(rtl){rotate:180deg}[data-design-system] [data-design-system-components],[data-design-system] [data-separator],[data-design-system] [data-design-system-preview]{position:relative;inset-block-start:2.5%}[data-design-system] [data-design-system-components]{display:grid;gap:var(--gap-xl);grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}[data-design-system] [data-design-system-components] .component{cursor:pointer;display:flex;position:relative;flex-direction:column;justify-content:center;border:1.5px solid var(--black-light)}[data-design-system] [data-design-system-components] .component[data-selected=true]{border-color:var(--base-brand)}[data-design-system] [data-design-system-components] .component[data-selected=true]>.dot,[data-design-system] [data-design-system-components] .component[data-selected=true] .name{border-color:var(--base-brand)}[data-design-system] [data-design-system-components] .component[data-selected=true] .element{--black-light: var(--brand-light);--black-soft: var(--base-brand)}[data-design-system] [data-design-system-components] .component>.dot{width:10px;height:10px;position:absolute;background-color:var(--base-white);border:1.5px solid var(--black-light)}[data-design-system] [data-design-system-components] .component>.dot:nth-child(3){inset-block-start:-5px;inset-inline-start:-5px}[data-design-system] [data-design-system-components] .component>.dot:nth-child(4){inset-block-end:-5px;inset-inline-start:-5px}[data-design-system] [data-design-system-components] .component>.dot:nth-child(5){inset-block-start:-5px;inset-inline-end:-5px}[data-design-system] [data-design-system-components] .component>.dot:last-child{inset-inline-end:-5px;inset-block-end:-5px}[data-design-system] [data-design-system-components] .component .view{padding:1em;height:100%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--black-light)}[data-design-system] [data-design-system-components] .component .view .element{position:absolute;border-radius:var(--radius-sm);background-color:var(--base-white)}[data-design-system] [data-design-system-components] .component .view .element.button{width:40%;height:40px}[data-design-system] [data-design-system-components] .component .view .element.button:before{content:"";top:50%;left:50%;width:50%;height:5px;position:absolute;translate:-50% -50%;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.input{width:80%;height:40px}[data-design-system] [data-design-system-components] .component .view .element.input:before{content:"";top:50%;left:20px;width:25px;height:25px;position:absolute;translate:-50% -50%;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.textarea{width:80%;height:70%;padding:1em;display:flex;gap:var(--gap-md);flex-direction:column}[data-design-system] [data-design-system-components] .component .view .element.textarea:before,[data-design-system] [data-design-system-components] .component .view .element.textarea:after{content:"";width:70%;height:5px;display:block;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.textarea:after{width:50%;background-color:var(--black-light)}[data-design-system] [data-design-system-components] .component .view .element.toggle{width:60px;height:30px;border-radius:var(--radius-rounded)}[data-design-system] [data-design-system-components] .component .view .element.toggle:before,[data-design-system] [data-design-system-components] .component .view .element.toggle:after{content:"";top:50%;width:25px;height:25px;position:absolute;translate:0% -50%;border-radius:var(--radius-circle);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.toggle:after{scale:.2;background-color:var(--base-white)}[data-design-system] [data-design-system-components] .component .view .element.hint{width:80%;height:50px;padding:.5em;display:flex;gap:var(--gap-md);align-items:center;background-color:transparent}[data-design-system] [data-design-system-components] .component .view .element.hint:before,[data-design-system] [data-design-system-components] .component .view .element.hint:after{content:"";width:10px;height:10px;display:block;flex-shrink:0;border-radius:var(--radius-circle);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.hint:after{width:90%;height:5px;clip-path:none;border-radius:var(--radius-xs);background-color:var(--base-white)}[data-design-system] [data-design-system-components] .component .view .element.select{width:80%;height:40px;transform:translateY(-30px)}[data-design-system] [data-design-system-components] .component .view .element.select:before{content:"";width:100%;height:80px;inset-block-start:50px;inset-inline-start:0;position:absolute;border-radius:var(--radius-sm);background-image:linear-gradient(180deg,var(--base-white) 50%,transparent)}[data-design-system] [data-design-system-components] .component .view .element.select:after{content:"";width:6px;height:6px;rotate:45deg;position:absolute;inset-inline-end:20px;inset-block-start:14px;border-block-end:1.5px solid var(--black-soft);border-inline-end:1.5px solid var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.slider{width:80%;height:10px}[data-design-system] [data-design-system-components] .component .view .element.slider:before{content:"";top:0;right:0;bottom:0;left:0;width:50%;height:100%;position:absolute;border-radius:var(--radius-sm);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.slider:after{content:"";width:8px;height:8px;position:absolute;translate:-50% -50%;inset-block-start:50%;left:50%;border-radius:var(--radius-circle);background-color:var(--black-soft);border:6px solid var(--base-white);outline:.5px solid var(--black-light)}[data-design-system] [data-design-system-components] .component .view .element.tooltip{width:40%;height:30px}[data-design-system] [data-design-system-components] .component .view .element.tooltip:before,[data-design-system] [data-design-system-components] .component .view .element.tooltip:after{content:"";top:50%;left:50%;width:50%;height:5px;position:absolute;translate:-50% -50%;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.tooltip:after{top:calc(100% + 10px);width:0px;height:0px;border-radius:0;background-color:transparent;border:10px solid transparent;border-block-start-color:var(--base-white)}[data-design-system] [data-design-system-components] .component .view .element.color-picker{width:80%;height:50px;padding:.5em;display:flex;gap:var(--gap-md);align-items:center}[data-design-system] [data-design-system-components] .component .view .element.color-picker:before,[data-design-system] [data-design-system-components] .component .view .element.color-picker:after{content:"";width:50px;height:25px;display:block;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.color-picker:after{width:50%;height:5px;clip-path:none;background-color:var(--black-light)}[data-design-system] [data-design-system-components] .component .view .element.switch-toggle{width:80%;height:50px;padding:.5em var(--gap-xl);display:grid;gap:var(--gap-xl);align-items:center;grid-template-columns:repeat(2,1fr)}[data-design-system] [data-design-system-components] .component .view .element.switch-toggle:before,[data-design-system] [data-design-system-components] .component .view .element.switch-toggle:after{content:"";height:5px;border-radius:var(--radius-sm);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.switch-toggle:before{background-color:var(--black-light)}[data-design-system] [data-design-system-components] .component .view .element.alert-dialog{width:80%;height:70%;padding:1em;display:flex;gap:var(--gap-md);align-items:end;justify-content:flex-end}[data-design-system] [data-design-system-components] .component .view .element.alert-dialog:before,[data-design-system] [data-design-system-components] .component .view .element.alert-dialog:after{content:"";width:50px;height:20px;border-radius:var(--radius-xs);background-color:var(--black-soft)}[data-design-system] [data-design-system-components] .component .view .element.alert-dialog:before{background-color:var(--black-light)}[data-design-system] [data-design-system-components] .component .name{padding:1em;text-align:center;font-size:var(--text-md);text-transform:capitalize;padding-block-start:var(--gap-md);border-block-start:1.5px solid var(--black-light)}[data-design-system] [data-design-system-preview]{padding:2em;display:flex;gap:var(--gap-lg);flex-direction:column;background-color:var(--base-white);border:.5px solid var(--black-light);background-image:radial-gradient(var(--black-light) .5px,transparent .5px),radial-gradient(var(--black-soft) .5px,var(--base-white) .5px);background-size:20px 20px;background-position:0 0,10px 10px}[data-design-system] [data-design-system-preview] .variant [data-switch-toggle]:dir(rtl){flex-direction:row-reverse}[data-design-system] [data-design-system-preview] .variant [data-switch-toggle]:dir(rtl) [data-switch-item]{flex-direction:row-reverse}[data-404] [data-intro] .intro-media .frame img{filter:grayscale(1) contrast(.8)}[data-404] [data-intro] .intro-content .action{display:flex;justify-content:center;margin-block-start:var(--gap-lg)}[data-404] [data-intro] .intro-content .action a[data-button]{text-decoration:none}