: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;button,div{width:12px;height:12px;border-radius:50%}button{padding:0;border:none;cursor:pointer}}#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;.ide-settings-range{width:200px;max-width:100%}}#mock-ide-wrapper #code-area :is(pre,code):focus,#mock-ide-wrapper #code-area :is(pre,code):focus-visible{outline:none;box-shadow:none}.ide-font-link{font-size:9px}#red-light{background-color:var(--red)}#yellow-light{background-color:var(--amber)}#green-light{background-color:var(--green)}#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;background-size:cover;background-position:50%;img{-webkit-user-drag:none}}.wallpaper-thumb{width:64px;height:44px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px rgb(0 0 0/.4)}.desktop-draggable{position:absolute;top:0;left:0;width:fit-content;cursor:grab;user-select:none;-webkit-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}@media (max-width:700px){#af-desktop #editor-window{left:8px!important;top:8px!important;translate:none;width:calc(100% - 16px);height:calc(100% - 16px);min-width:0;min-height:0;max-height:none;max-width:none;resize:none;aspect-ratio:auto}}#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;p{font-size:inherit;line-height:inherit;color:inherit}}