.demo-app-frame-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;& .demo-app-frame{border:1px solid var(--border-color);border-radius:var(--16px);width:100%;max-width:1300px;height:100%;max-height:800px;box-shadow:var(--modal-box-shadow);color:var(--text-color);position:relative;overflow:hidden;&:before{content:"";z-index:-1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:light-dark(hsl(var(--hsl-white) / 70%),hsl(var(--hsl-black) / 70%));border-radius:var(--16px);position:absolute;inset:0}& .mde-layout .editor{position:relative}}}.demo-app-frame-container-scaled{& .demo-app-frame{width:var(--demo-layout-width,1000px);height:calc(100% / var(--demo-scale,1));max-height:none;transform:scale(var(--demo-scale,1));flex:none}& .demo-app-frame:before{-webkit-backdrop-filter:none;backdrop-filter:none}&:before{content:"";-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:calc(var(--16px) * var(--demo-scale,1));position:absolute;inset:0}& .md-codeblock-copy-button{display:none}}.demo-app-frame .cm-editor{& .cm-cursor{display:block}& .cm-selectionBackground{background:var(--editor-focused-selection-background)}&:not(:focus-within) :is(.cm-floating-toolbar,.mde-toolbar){display:block}&.demo-replaying .md-codeblock-copy-button{display:none}}@layer reset,base,tokens,recipes,utilities,theme,theme.ui,theme.ui.base;@layer theme.ui.components{.app-control-view{-webkit-user-select:none;user-select:none;min-height:40px;padding-right:2px;display:flex;& .app-control-title{-webkit-app-region:drag;color:var(--sidebar-menu-item-color);flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;margin:3px 0 3px 11px;display:flex;&>span{opacity:.6}}& .app-icon{width:24px;height:24px}& .app-control-spacer{-webkit-app-region:drag;flex:1;margin-top:3px}& .app-control-buttons{text-align:right;flex:0 auto;justify-content:flex-end;align-items:center;display:flex}}body.window-has-frame .app-control-view .settings-button{display:none}.ui.app-header-button{box-shadow:none;cursor:pointer;color:var(--button-text-color,#0009);line-height:var(--button-line-height,1em);background:0 0;border:none;justify-content:center;align-items:center;display:flex;&:not(.disabled):hover{background:var(--button-hover-background-color)}&.active{background:var(--button-focus-background-color)}}.ui.dropdown{&.inline{& .menu.visible{max-height:max(50vh,200px)}}& .svg-icon.dropdown-chevron.small{margin:0 .3rem;font-size:.7em}& .menu.visible{display:block;overflow:auto;& .header{font-size:.75rem}& .dropdown-search{margin:0;& input{background-color:var(--vertical-menu-background);border:none;border-radius:0;outline:none;width:100%;min-height:2.5rem}}}}.editor{z-index:0;flex-direction:row;flex:auto;justify-content:center;min-width:0;display:flex;& .mde .cm-editor .cm-scroller .cm-content{flex:100%}&.limit-max-width{&.editor-viewmode-edit .mde .cm-editor{& .cm-scroller{justify-content:center}& .cm-content{flex:0 1 calc(var(--readable-line-length-width,740px) + var(--md-block-overflow,0px))!important}}&.editor-viewmode-preview .mde-preview-container .mde-preview{--readable-width:min(var(--readable-line-length-width,740px), 100%);&>*{margin-inline:auto!important}&>:not(table,:has(.mde-preview-unwrap)){max-width:var(--readable-width)}&>:is(table,:has(.mde-preview-unwrap)){width:fit-content;min-width:var(--readable-width);max-width:100%}}}}.ui.form.editor-ai-inline-prompt-input{min-width:20em;& textarea{resize:none;border:none;outline:none;width:100%;height:auto;margin-right:.6em;padding:.3em .2em;overflow:auto}& .action-button-container{justify-content:center;align-items:flex-start;display:flex;& button.ui.button{corner-shape:round;width:1.4em;height:1.4em;font-size:var(--icon-button-font-size,1.28571rem);border:none;border-radius:2em;padding:.4em}}& .list-bar{outline:none;max-height:10em;margin-top:.3em}}.ui.tooltip.editor-ai-preset-prompt-tooltip{white-space:normal;text-align:left;max-width:22em}.list-bar.ui.selection.list{-webkit-user-select:none;user-select:none;outline:none;& .item.selected{color:var(--selection-list-hover-color);background:var(--selection-list-hover-background)}&:focus .item.selected{color:var(--selection-list-active-color);background:var(--selection-list-active-background);outline:2px solid var(--focused-outline-color);outline-offset:-2px}}.editor-header-layout{opacity:1;background:0 0;flex-direction:row;align-items:center;min-height:40px;padding:0 0 0 4px;transition:opacity 1.2s ease-in-out;display:flex}.editor-header-spacer{-webkit-app-region:drag;-webkit-user-select:none;user-select:none;flex:1;height:100%}.editor-header-view-mode{border:1px solid var(--border-color);corner-shape:var(--default-corner-shape);border-radius:var(--default-squircle-radius);flex-direction:row;flex:none;display:flex;& .ui.app-header-button{corner-shape:var(--default-corner-shape);--button-squircle-radius:calc(var(--default-squircle-radius) - 1px);border-radius:0;width:44px;padding:6px 8px;&:first-child{border-top-left-radius:var(--button-squircle-radius);border-bottom-left-radius:var(--button-squircle-radius)}&:last-child{border-top-right-radius:var(--button-squircle-radius);border-bottom-right-radius:var(--button-squircle-radius)}}}.editor-layout{background:var(--editor-background);flex-direction:column;flex:1;min-width:0;transition:background-color .4s ease-in-out;display:flex}.editor-meta-layout{flex-flow:wrap;padding-left:12px;padding-right:12px;font-size:.9rem;display:flex}.editor-meta-notebook{align-items:center;min-height:28px;margin-right:4px;display:flex;& .notebook-picker{min-width:auto;color:var(--text-color);margin-right:0;& .ui.dropdown{white-space:nowrap;flex-direction:row;align-items:center;gap:4px;display:flex;& .menu{min-width:220px}}}}.editor-title-bar-input{flex:auto;display:block;& input[type=text]{background:var(--editor-header-title-input-background,transparent);color:var(--input-color,var(--text-color));width:100%;height:1.7em;box-shadow:none;border:none;border-radius:0;padding-left:.5em;padding-right:0;font-size:1.5em}}.editor-title-bar-layout{background:var(--header-note-menu-background);flex-direction:row;flex:none;align-items:center;padding-right:8px;display:flex}.mac-traffic-light-buttons{gap:8px;display:flex;&>span{border-radius:50%;width:14px;height:14px}& .close{background:#ff5f57}& .minimize{background:#febc2e}& .zoom{background:#28c840}}.main-layout{box-sizing:border-box;opacity:1;flex-direction:row;height:100%;transition:opacity .4s ease-in-out;display:flex}.editor .mde{flex:1;min-width:0;display:flex;& .cm-editor{border:none;width:100%;height:100%;transition:background-color .4s ease-in-out;box-shadow:none!important}}.editor.editor-viewmode-preview .mde{display:none}.mde-image-resize-toolbar{font-family:var(--page-font);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;padding:4px 6px;display:flex;&>span{font-size:var(--tiny);padding-inline:var(--8px);color:var(--disabled-text-color)}}.cm-editor:not(:focus-within) .cm-image-resize-toolbar{display:none}.mde-layout{flex-direction:row;flex:auto;justify-content:center;width:100%;min-height:0;display:flex;position:relative}.mde-preview-container{-webkit-user-select:text;user-select:text;box-sizing:border-box;border:none;flex-direction:row;flex:1;justify-content:center;min-width:0;height:100%;display:flex;overflow:auto;&.hidden{display:none}&:focus{outline:none}& .mde-preview{flex:100%;min-width:0;padding:10px;display:block;& pre .ui.error.message{white-space:pre-wrap;display:block}}& .mde-preview-scroll-past-end{height:100%}}.mde-toolbar{-webkit-user-select:none;user-select:none;font-family:var(--page-font);padding:4px 6px;transition:color .4s ease-in-out;&.hidden{display:none}& i.separator{border-left:1px solid var(--border-color);color:#0000;text-indent:-10px;width:0;margin:0 6px;display:inline-block}}.cm-editor:not(:focus-within){& .cm-floating-toolbar,& .mde-toolbar{display:none}}button.mde-toolbar-item,.ui.dropdown.mde-toolbar-item{text-align:center;color:var(--unselected-text-color);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:1.4em;outline:none;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin:0;padding:0;transition:color .4s ease-in-out,border-color .2s ease-out;display:inline-flex;text-decoration:none!important;&>svg{flex:1}&.active,&:hover{background:var(--basic-button-hover-background);border-color:var(--strong-selected-border-color)}&:before{line-height:30px}&.disabled,&.disabled:hover{pointer-events:none;text-shadow:inherit;opacity:.5;border-color:#0000}}.mde-toolbar:hover button,.mde-toolbar:hover .ui.dropdown.mde-toolbar-item,.mde-toolbar button:focus{color:var(--text-color)!important}.mde-toolbar-item.mde-toolbar-item-alert.ui.dropdown{& span.label{display:inline-flex}& p.gfm-alert-title{margin:0;line-height:1;display:inline}& .menu.visible .item{flex-direction:row;align-items:center;gap:.4em;display:flex;&.gfm-alert-type-note{&>p.gfm-alert-title{color:var(--gfm-alert-note)}}&.gfm-alert-type-tip{&>p.gfm-alert-title{color:var(--gfm-alert-tip)}}&.gfm-alert-type-important{&>p.gfm-alert-title{color:var(--gfm-alert-important)}}&.gfm-alert-type-warning{&>p.gfm-alert-title{color:var(--gfm-alert-warning)}}&.gfm-alert-type-caution{&>p.gfm-alert-title{color:var(--gfm-alert-caution)}}}}.notebook-icon{min-width:var(--icon-width);display:inline-flex}.notebook-picker{-webkit-app-region:no-drag;min-width:260px;color:var(--header-note-menu-color);flex-direction:row;align-items:center;margin-right:4px;display:flex;&>.svg-icon{flex:none;margin-right:4px;& line,& circle,& path{stroke:var(--header-note-menu-color)}}}.note-list-bar{outline:none;flex:auto;width:100%;margin:0;padding:0;overflow:auto}.note-list-bar-layout{flex:0 auto}.note-list-bar-layout-content{width:var(--note-list-bar-width);box-sizing:border-box;background:var(--note-list-bar-background);border-right:var(--note-list-bar-border-right,none);flex-direction:column;margin:0;transition:background-color .4s ease-in-out,border-color .4s ease-in-out;display:flex;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important}.note-list-header{-webkit-app-region:drag;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;width:100%;min-height:40px;padding:0 2px;display:flex}.note-list-header-separator{border-bottom:var(--note-list-header-separator-border);margin-bottom:1px;padding-bottom:4px}.note-list-header .note-list-header-title-bar{text-align:center;flex:1;justify-content:center;align-items:center;gap:.3em;font-size:1.2em;font-weight:500;line-height:130%;display:flex;overflow:hidden;& .title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}& .notebook-icon,& .svg-icon{opacity:.8;flex:0 0 1em}}.note-list-item-view{border-bottom:var(--note-list-view-item-separator-border);padding:2px 0 10px 14px;&.active{background-color:var(--note-list-view-item-selected-background,var(--note-list-view-item-inactive-background,--note-list-view-item-active-background))}& .content{& .header{color:var(--note-list-view-item-header-color);word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.7em;margin:8px 8px 8px 0;font-weight:600;display:-webkit-box;overflow:hidden;& i.icon.linkify{opacity:.5}}& .description{flex-direction:column;font-size:12px;line-height:1.35em;display:flex;& .meta{flex:none;display:inline;&>*{margin-right:.4em;vertical-align:middle!important}}& .date{color:var(--note-list-view-item-date-color);white-space:nowrap;font-weight:400}& .tags{white-space:pre;& .ui.label{border-radius:12px;padding:3px 4px;font-size:x-small;font-weight:400;box-shadow:inset 0 0 0 1px #181a1c40}}& .text{color:var(--note-list-view-item-color);margin-right:8px;padding-top:4px;font-size:14px;&.summary{white-space:nowrap;text-overflow:ellipsis;padding-top:3px;padding-bottom:1px;overflow:hidden}}}& mark{border:var(--mark-border-width,1px) solid var(--mark-border-color,hsl(var(--hsl-yellow-400) / 40%));border-radius:var(--mark-border-radius,4px);background-color:var(--mark-background-color,hsl(var(--hsl-yellow-400) / 20%));color:light-dark(var(--mark-color,var(--color-gray-950)),var(--mark-color,var(--color-gray-50)));font-weight:var(--mark-font-weight,bold)}& .note-conflicted-icon.svg-icon{color:var(--warning-color)}& .note-pin-icon.svg-icon{color:var(--primary-color)}}&.task-dropped .content .header>span{text-decoration:line-through}}.note-list-bar:focus-within .note-list-item-view.focused{box-shadow:inset 5px 0px 0px var(--note-list-view-item-active-background)}.note-list-item-view.item.active{& .task-progress-view{& .frame{background-color:var(--task-progress-view-background-color)}& .progress{background-color:var(--task-progress-view-foreground-color)}}}.note-list-search-bar{background:var(--note-search-bar-background);flex:0 0 34px;display:flex;& .ui.input{width:100%;min-width:100px;margin:2px 12px;& input:not(:focus){border:var(--note-search-bar-input-border)}& input{background:var(--note-search-bar-input-background);outline-offset:var(--unfocused-outline-offset);outline-width:var(--focused-outline-width);outline-color:var(--unfocused-outline-color);outline-style:var(--focused-outline-style);transition:outline-offset var(--default-duration) var(--default-easing), outline-color var(--default-duration) var(--default-easing);padding:4px 8px;&:focus{outline-offset:var(--focused-outline-offset);outline-color:var(--focused-outline-color)}}& .svg-icon{text-align:center;opacity:.3;width:2.67143em;height:100%;margin:0;padding:7px 0;line-height:1;transition:opacity .3s;position:absolute;top:0;left:1px;right:auto}& .svg-icon.close-circle{cursor:pointer;left:auto;right:0}}}.note-status-picker{justify-content:center;align-items:center;display:flex;& .ui.dropdown{white-space:nowrap;margin-right:2px;&>.text{font-weight:400}&>.text>.icon{margin-right:.2rem}&>.menu{margin-top:.4rem}}}.note-status-picker-item .keymap{opacity:.4;margin-left:.4rem;font-size:x-small}.note-tags-bar{outline:none;flex-flow:wrap;flex:auto;align-items:center;min-height:32px;padding-right:2px;display:flex;position:relative}.note-tags-bar-input{flex:auto;& .ui.input{width:100%;padding:0;font-size:.9rem;&>input{background:var(--note-tags-bar-input-background,transparent);border:none;min-width:6em;height:24px;padding:4px}}}.note-tags-bar-item{display:inline-block;& .ui.label{padding:4px 6px;margin:6px 2px!important;&.active{outline:2px solid var(--focused-outline-color)}}}.ui.tag.label{text-wrap:nowrap;box-shadow:0px 0px 0px 1px var(--label-border-color,#181a1c40) inset;border-radius:12px;padding:.4em .5em;&.clickable{cursor:pointer;&:hover{outline:2px solid var(--focused-outline-color)}}&.small{margin:0;padding:4px 5px;font-size:x-small;&:not(:first-child){margin-left:.2em}}}.note-tags-bar-item-list{outline:none}.sidebar-layout{flex:none}.sidebar-layout-content{box-sizing:border-box;background-color:var(--sidebar-background);border-right:var(--sidebar-border-right,none);flex-direction:column;height:100%;transition:background-color .4s ease-in-out,border-color .4s ease-in-out;display:flex;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important}.sidebar-menu,.sidebar-workspace-menu{outline:none;width:100%;height:100%;overflow:auto}body.platform-win32,body.platform-linux{& .sidebar-menu{&::-webkit-scrollbar{width:var(--sidebar-scrollbar-width)}&::-webkit-scrollbar:hover{width:14px}&::-webkit-scrollbar-track{background:var(--sidebar-scrollbar-track-background)}&::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb-background)}&::-webkit-scrollbar-thumb:window-inactive{background:0 0}}}.sidebar-menu-book-list-item.sidebar-menu-item .sidebar-menu-item-content{& .notebook-icon{flex:0 0 16px;margin:1px}& .sidebar-menu-book-list-item-toggle{flex:0 0 1em;& line,& circle,& path{stroke:var(--sidebar-menu-item-color);stroke-width:3px}opacity:.5;cursor:pointer;padding:0;font-size:12px;transition:transform .2s ease-out;&.open{transform:rotate(90deg)}&:hover{opacity:.8}}}.sidebar-menu-book-list-item.sidebar-menu-item{&.is-dragging{opacity:.5!important}&.drop-book-before .sidebar-menu-item-content:before{content:"";background-color:var(--primary-color);z-index:10;pointer-events:none;height:2px;position:absolute;top:-1px;left:0;right:0}&.drop-book-after .sidebar-menu-item-content:after{content:"";background-color:var(--primary-color);z-index:10;pointer-events:none;height:2px;position:absolute;bottom:-1px;left:0;right:0}&.drop-book-into .sidebar-menu-item-content{outline:2px dashed var(--primary-color);outline-offset:-2px;border-radius:var(--default-border-radius)}}.sidebar-menu-item{color:var(--sidebar-menu-section-color);transition:background-color var(--default-duration) var(--default-easing), box-shadow var(--default-duration) var(--default-easing), color var(--default-duration) var(--default-easing);position:relative;box-shadow:inset 5px 0 #0000;&.active{background:var(--sidebar-menu-item-inactive-background,var(--sidebar-menu-item-active-background))}&.selectable{color:var(--sidebar-menu-item-color);cursor:pointer;border-radius:0}&.active{color:var(--sidebar-menu-active-item-color)}& .sidebar-menu-item-content{outline:none;flex-direction:row;align-items:center;gap:.3em;min-height:30px;margin-left:0;padding:0 6px 0 14px;font-size:14px;display:flex;&>.svg-icon{flex:0 0 16px;margin:1px}&>.tag-circular-icon{text-align:center;background:0 0;flex:0 0 20px;height:100%;margin:0 .25rem 0 0}& .content{white-space:nowrap;text-overflow:ellipsis;flex:auto;padding:0;overflow:hidden}&:hover .disclosure{display:flex}&:hover .disclosure-icon{margin:0 .2em;font-size:.7em;display:inline-block}& .disclosure{border:1px solid var(--sidebar-menu-action-color);cursor:pointer;color:var(--sidebar-menu-action-color);background:0 0;border-radius:16px;flex-direction:row;flex:0 auto;align-items:center;padding:4px 0 4px 6px;line-height:normal;display:none;&:hover{opacity:1;border-color:var(--sidebar-menu-action-hover-color);color:var(--sidebar-menu-action-hover-color)}&>.disclosure-label{font-size:xx-small;font-weight:300}&>i.disclosure-icon.icon{font-size:xx-small}}& .accessory-count{opacity:.6;margin-left:4px;margin-right:4px;font-size:10px;font-weight:200}& .accessory-button{cursor:pointer;color:var(--sidebar-menu-action-color);background:0 0;border:none;outline:none;align-self:stretch;align-items:center;padding:1px 0;font-size:16px;font-weight:400;display:flex;& svg.streamline.arrow-up-1,& svg.streamline.arrow-down-1{& path{stroke-width:2.5px}}&:hover{color:var(--sidebar-menu-action-hover-color)}&:last-child{margin-right:.2em}}}&.is-over-notes .sidebar-menu-item-content{background:var(--sidebar-menu-item-active-background)}&.with-disclosure:hover .sidebar-menu-item-content{& .accessory-count{display:none}}&.sidebar-menu-section-header{& .content{font-size:12px}}}.sidebar-menu:focus-within .sidebar-menu-item.active{box-shadow:inset 5px 0px 0px var(--sidebar-menu-item-active-background)}.sidebar-navigation-container{flex:auto;position:relative;overflow:hidden;& .sidebar-navigation{width:100%;height:100%}}.sidebar-workspace-title{border-bottom:1px solid var(--sidebar-menu-section-separator-color);flex-flow:wrap;align-items:center;column-gap:2px;width:100%;min-height:42px;margin-bottom:6px;padding-bottom:6px;padding-left:15px;padding-right:8px;display:flex;& .back-button{cursor:pointer;color:var(--sidebar-menu-item-color);background:0 0;border:none;flex-direction:row;align-items:center;margin-right:4px;padding:0;font-size:12px;display:flex;&>.svg-icon{width:16px;height:16px;margin:0!important}}& .breadcrumb-item{flex-direction:row;align-items:center;display:flex}& .breadcrumb-title{color:var(--sidebar-menu-item-color);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:4px;padding:4px;font-size:12px;display:flex;overflow:hidden}& .chevron-right{color:var(--sidebar-menu-section-color);text-align:center;width:16px;&>.svg-icon{opacity:.6;width:8px;height:8px}}& .sidebar-workspace-title-name{text-align:left;color:var(--sidebar-menu-item-color);flex:1;align-items:center;gap:4px;display:flex}}.tag-list{display:contents}.task-progress-bar{border-style:solid;border-width:1px;border-color:var(--task-progress-view-border-color,--task-progress-view-background-color);border-radius:12px;flex-direction:row;width:32px;height:6px;margin-left:2px;margin-right:4px;display:inline-flex;overflow:hidden;& .progress{background-color:var(--task-progress-view-foreground-color)}& .progress-remaining{background-color:var(--task-progress-view-background-color);flex:1}&.completed{border-color:var(--task-progress-view-completed-color);& path{fill:var(--task-progress-view-completed-color)}& .progress{background-color:var(--task-progress-view-completed-color)}}}.task-progress-view{color:color-mix(in srgb, currentColor, transparent 20%);mix-blend-mode:multiply;flex-direction:row;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.task-progress-view.completed{color:var(--task-progress-view-completed-color)}body[class*=dark-ui],.dark-mode{& .task-progress-view{mix-blend-mode:screen}}}@layer theme.preview,theme.syntax;.editor-ai-popover .popup-content{max-width:30em;&.submitting{text-align:center;min-width:12em;& .loader-dots{text-align:left;width:.8em;display:inline-block;&:after{vertical-align:bottom;content:".";animation:1.2s linear infinite demo-ai-loader-dots;display:inline-block}}}}@keyframes demo-ai-loader-dots{0%{color:#0000;text-shadow:.25em 0 #0000,.5em 0 #0000}25%{color:currentColor;text-shadow:.25em 0 #0000,.5em 0 #0000}50%{color:currentColor;text-shadow:.25em 0,.5em 0 #0000}75%{color:currentColor;text-shadow:.25em 0,.5em 0}to{color:#0000;text-shadow:.25em 0 #0000,.5em 0 #0000}}.cm-nes-inline-tooltip{text-indent:0}.mde-preview{--h1:2em;--h2:1.5em;--h3:1.25em;--h4:1em;--h5:.875em;--h6:.85em}.demo-take-player-chip{z-index:10;position:absolute;bottom:1.25em;right:1.25em;&:hover{opacity:1}}.demo-take-player-invite{z-index:10;corner-shape:round;border-radius:var(--30px);box-shadow:var(--floating-shadow);background-color:hsl(var(--hsl-black) / .7);outline:6px solid hsl(var(--hsl-black) / .4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:none;font-size:1.5em;animation:.4s ease-out both demo-take-player-invite-rise;position:absolute;top:50%;left:50%;translate:-50% -50%;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes demo-take-player-invite-rise{0%{opacity:0;filter:blur(20px);translate:-50% calc(.75em - 50%)}to{opacity:1;filter:blur();translate:-50% -50%}}