.finder-window{position:absolute;top:50%;left:50%;translate:-50% -50%;width:60vw;height:50vh;display:flex;flex-direction:column;background-color:color-mix(in oklch,var(--black),var(--transparent) 20%);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--global-border-radius);box-shadow:0 24px 64px color-mix(in oklch,var(--black),var(--transparent) 30%);overflow:hidden;z-index:100;border:1px solid color-mix(in oklch,var(--grey),var(--transparent) 40%)}.finder-window.is-dragged{translate:none}.finder-window.document-window{width:72vw;height:92vh}.document-window .window-content{display:block}.window-title-bar{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid color-mix(in oklch,var(--grey),var(--transparent) 70%);-webkit-user-select:none;user-select:none;touch-action:none}.traffic-lights{display:flex;gap:8px}.traffic-light{width:14px;height:14px;padding:0;border:none;border-radius:50%;&.close{background-color:var(--red-light20);cursor:pointer}&.minimise{background-color:var(--yellow-light80)}&.maximise{background-color:var(--green-light50)}}.window-back{background:transparent;border:none;color:white;height:14px;display:flex;align-items:center;padding:0 8px;margin-left:8px;cursor:pointer;opacity:.7;&:hover{opacity:1}}.window-title{flex:1 1;font-weight:600;margin-left:16px;line-height:1;color:white}.window-body{flex:1 1;display:flex;overflow:hidden}.window-content{flex:1 1;padding:var(--micro);overflow:auto;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.window-content,.window-group{display:grid;gap:var(--nano);align-content:flex-start}.window-group{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.window-divider{grid-column:1/-1;border:none;border-top:1px solid color-mix(in oklch,var(--grey),var(--transparent) 70%);margin:4px 0}.preview-pane{position:absolute;top:0;right:0;width:24%;height:100%;z-index:50;padding:var(--nano);border-left:1px solid color-mix(in oklch,var(--grey),var(--transparent) 70%);background-color:color-mix(in oklch,var(--grey),var(--transparent) 80%);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);.preview-placeholder{text-align:center;opacity:.4}}.file-preview{.preview-icon{display:flex;justify-content:center;margin:16px 0 20px;.font-file-icon{width:96px;height:96px;font-size:48px}}.file-name{font-weight:700;font-size:92%;color:white}.file-kind{opacity:.6;margin-bottom:var(--nano)}.file-kind,.info-heading{font-size:80%;color:white}.info-heading{font-weight:700;padding:6px 0;border-bottom:1px solid color-mix(in oklch,var(--white),var(--transparent) 75%)}.info-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--nano);padding:6px 0;border-bottom:1px solid color-mix(in oklch,var(--white),var(--transparent) 88%);.info-label{opacity:.6;flex-shrink:0}.info-label,.info-value{font-size:80%;color:white}.info-value{text-align:right}}}#menu-bar{background-color:color-mix(in oklch,var(--white),var(--transparent) 90%);height:32px;z-index:5000;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px;*{line-height:1}#af-logo{color:white;svg{width:16px;fill:var(--white)}}#af-name{font-size:92%}}:root{--title-bar-height:32px}[data-range-meta]+[data-input-wrapper] input[type=range]{--thumb-height:32px;border:none;outline:none}#mock-ide-wrapper{#ide-window{width:100%;height:100%;border-radius:12px;background-color:var(--mock-ide-window-bg);border:1px solid color-mix(in oklch,var(--grey),var(--transparent) 70%);display:grid;grid-template-rows:var(--title-bar-height) 1fr}#title-bar{width:100%;height:var(--title-bar-height);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:12px 12px 0 0;background-color:var(--mock-ide-titlebar-bg);border-bottom:1px solid var(--mock-ide-titlebar-border);display:flex;align-items:center;padding:0 16px}#traffic-lights{display:flex;gap:8px;margin-left:12px;position:absolute;left:8px;div{width:12px;height:12px;border-radius:50%}}#title-bar-text p{color:var(--white);font-size:14px}#ide-workspace{position:relative;display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto;height:100%;overflow:scroll;@media screen and (max-width:1000px){grid-template-columns:1fr}}#explorer-panel{background-color:var(--mock-ide-explorer-bg);border-right:1px solid var(--mock-ide-explorer-border);position:relative;height:100%;overflow-y:auto;border-radius:0 0 0 12px;-webkit-user-select:none;user-select:none;@media screen and (max-width:1000px){position:absolute;transform:translateX(-100%);transition:transform .3s ease-in-out;z-index:1000;width:240px}&.visible{transform:translateX(0)}}#repo-path{font-size:14px;color:var(--mock-ide-explorer-text);display:flex;align-items:center;margin-left:24px;position:relative}details #repo-path:before{content:"";display:inline-block;position:absolute;top:6px;left:-16px;width:6px;height:6px;border-style:solid;border-width:0 1px 1px 0;transform:translateY(-30%) rotate(-45deg);color:white;transition:transform .1s linear;cursor:pointer}details[open] #repo-path:before{transform:translateY(-60%) rotate(45deg)}summary{cursor:pointer;position:relative}#explorer-contents{position:absolute;left:0;width:100%;min-height:100%}#file-list{display:flex;flex-direction:column;gap:8px;opacity:.8}#file-list p{color:var(--mock-ide-explorer-text);font-size:.8em;cursor:pointer}.file-name{cursor:pointer;padding:2px 6px;border-radius:4px}.file-name.active{background-color:var(--mock-ide-explorer-item-active-bg);p{color:var(--white)}}.file-name:before{content:"└─ ";opacity:.4;color:white}.file-name svg{width:16px;height:16px;margin:4px 4px 0}#editor-panel{display:grid;grid-template-rows:32px 1fr}#editor-tabs{display:flex;background-color:var(--mock-ide-tabs-container-bg);border-bottom:1px solid var(--mock-ide-tabs-container-border);position:sticky;top:0;z-index:100;overflow-x:scroll;scrollbar-width:none;overflow-y:hidden;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}#explorer-toggle{width:32px;flex-direction:column;align-content:center;flex-wrap:wrap;justify-content:center;align-items:flex-start;display:none;@media screen and (max-width:1000px){display:flex}p{line-height:4px}}.tab{height:100%;background-color:var(--mock-ide-tab-bg-default);padding:4px 12px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease-in-out;border-right:1px solid var(--mock-ide-tabs-container-border)}.tab:hover{background-color:var(--mock-ide-tab-bg-hover)}.tab p{color:var(--mock-ide-tab-label-default);font-size:14px;white-space:nowrap}.tab:not(#explorer-toggle) p:last-child:hover{color:var(--mock-ide-tab-close-button-default)}.tab.active{background-color:var(--mock-ide-tab-bg-active);border-bottom:1px solid var(--mock-ide-tab-border-active)}.tab.active:hover{background-color:var(--mock-ide-tab-bg-hover)}.tab.active p{color:var(--mock-ide-tab-text-active)}[data-code-block]{height:100%}#code-area{position:relative;border-radius:0 0 12px 0;overflow:hidden}#code-area pre{background-color:var(--mock-ide-code-area-bg);border-radius:0;font-size:inherit;overflow:scroll;position:absolute;top:0;left:0;width:100%;height:100%}#font-selector-buttons .rtg-options-wrapper label:first-of-type,.font-parse pre{font-family:AF Parse Grotesk Mono,monospace}#font-selector-buttons .rtg-options-wrapper label:nth-of-type(2),.font-operand pre{font-family:AF Operand Mono,monospace}#font-selector-buttons .rtg-options-wrapper label:nth-of-type(3),.font-functor pre{font-family:AF Functor Mono,monospace}#font-selector-buttons .rtg-options-wrapper label:nth-of-type(4),.font-struct pre{font-family:AF Struct Mono,monospace}#font-selector-buttons .rtg-options-wrapper label:nth-of-type(5),.font-monad pre{font-family:AF Monad Mono,monospace}pre code{font-family:inherit}#font-selector-buttons .rtg-options-wrapper label{font-weight:700}.token.car{color:var(--green)}[data-code-block] pre.language-css .token.property{color:var(--orange)!important}}#ide-settings{display:flex;flex-direction:column;max-width:560px}#mock-ide-wrapper #code-area :is(pre,code):focus,#mock-ide-wrapper #code-area :is(pre,code):focus-visible{outline:none;box-shadow:none}#af-os{display:flex;flex-direction:column;height:100dvh;background-color:var(--black);background-image:url(/_next/static/media/home-bg.62700311.png);background-size:cover;background-position:50%;background-repeat:no-repeat}#af-desktop{position:relative;flex:1 1;overflow:hidden;img{-webkit-user-drag:none}}.desktop-draggable{position:absolute;top:0;left:0;width:fit-content;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.desktop-draggable:active{cursor:grabbing}#editor-window{position:absolute;top:50%;left:50%;translate:-50% -50%;width:60vw;aspect-ratio:16/9;min-width:560px;min-height:480px;max-width:96vw;max-height:90vh;resize:both;overflow:hidden;contain:paint;box-shadow:0 16px 40px color-mix(in oklch,var(--black),var(--transparent) 40%);animation:ide-scale-out .4s cubic-bezier(.2,.8,.2,1) both}#editor-window.is-dragged{translate:none}#editor-window #mock-ide-wrapper{height:100%}@keyframes ide-scale-out{0%{transform:scale(.06);opacity:0}to{transform:scale(1);opacity:1}}.html-file-icon{font-size:18px}.doc-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center;.doc-specimen{font-size:96px;line-height:1;color:white}.doc-title{font-weight:700;color:white}.doc-note{font-size:13px;color:white;opacity:.5}}.font-file-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto;background-color:color-mix(in oklch,var(--white),var(--transparent) 85%);border-radius:var(--nano);font-size:28px;line-height:1;color:white}