.desktop{--panel-width:696px;--panel-height:256px;--toast-width:288px;--grid-columns:5;isolation:isolate;aspect-ratio:1512/877;contain:layout paint;background:#154c70;border-radius:22px;width:calc(100% - 80px);max-width:1512px;min-height:460px;margin:138px auto 0;position:relative;overflow:hidden}.desktop-world{pointer-events:none;position:absolute;inset:0}.wallpaper{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.wallpaper-shade{background:#0003;position:absolute;inset:0}.menubar{background:#0003;justify-content:space-between;align-items:center;height:37px;display:flex;position:absolute;inset:0 0 auto}.apple-menu{display:block}.menu-controls{color:#e2e2e2d9;letter-spacing:-.3px;align-items:center;gap:21px;padding:4px 17px;font:500 13.5px/16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;display:flex}.menu-controls span+span{margin-left:-13px}.folders{flex-direction:column;gap:12px;display:flex;position:absolute;top:88px;right:42px}.folder{flex-direction:column;align-items:center;gap:8px;width:126.143px;height:105.5px;font:500 12px/16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;display:flex}.folder img{margin-top:2px}.capture-flash{background:var(--neutral100);opacity:0;pointer-events:none;z-index:2;position:absolute;inset:0}.capture{left:50%;top:max(50%,calc(var(--panel-rest-height,var(--panel-height)) + 108px));z-index:3;position:absolute;transform:translate(-50%,-50%)}.capture:active{transform:translate(-50%,calc(1px - 50%))}.panel-anchor{width:var(--panel-width);height:var(--panel-height);transform-origin:top;z-index:4;pointer-events:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.panel{width:var(--panel-width);height:var(--panel-height);pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;position:relative}.panel-shape{width:var(--panel-width);height:var(--panel-height);position:absolute;inset:0;overflow:visible}.panel-shape>path{pointer-events:fill}.panel-clipped{pointer-events:none;position:absolute;inset:0}.panel-content{opacity:1;pointer-events:auto;position:absolute;inset:0}.panel-content[inert]{pointer-events:none}.panel-header{justify-content:space-between;align-items:center;gap:4px;height:32px;display:flex;position:absolute;top:32px;left:32px;right:32px}.tabs{overscroll-behavior-x:contain;scrollbar-width:none;gap:4px;min-width:0;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab,.settings{flex-shrink:0}.tab{color:var(--neutral100);white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:500;line-height:16px;transition:background-color 50ms ease-in-out}.tab:hover,.settings:hover{background:var(--hover)}.tab.active{background:var(--active)}.settings{border-radius:12px;place-items:center;width:32px;height:32px;padding:0;transition:background-color 50ms ease-in-out;display:grid}.settings img{display:block}.panel-view{position:absolute;inset:64px 20px 0}.empty-state{color:#999;place-items:center;margin:0;font-size:12px;line-height:16px;display:grid;position:absolute;inset:0}.file-grid{overscroll-behavior:contain;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));scrollbar-width:thin;scrollbar-color:#373737 transparent;grid-auto-rows:112px;place-content:start space-between;gap:8px;height:100%;padding:24px 12px 12px;display:grid;overflow-y:auto}.file-grid::-webkit-scrollbar{width:10px}.file-grid::-webkit-scrollbar-thumb{background:#373737 padding-box padding-box;border-right:4px solid #000;border-radius:8px}.file-cell{flex-direction:column;justify-self:center;align-items:center;width:100%;min-width:0;max-width:104px;height:112px;padding:0;display:flex;outline-offset:-2px!important}.file-preview{border-radius:4px;place-items:center;width:72px;height:72px;margin-bottom:4px;display:grid}.file-preview img{object-fit:cover;border:0;border-radius:3px;width:60px;height:42px;box-shadow:0 0 0 1px #ffffff26}.file-cell[aria-pressed=true] .file-preview{background:#1c1c1c;outline:2px solid #007aff}.file-cell span:not(.file-preview){text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:12px;line-height:16px;overflow:hidden}.file-cell[aria-pressed=true] .filename{background:#0058d0;border-radius:3px}.drop-zone{color:#999;border:1px dashed #504f50;border-radius:12px;place-items:center;font-size:12px;display:grid;position:absolute;inset:12px}.toast{width:calc(var(--toast-width) - 48px);text-align:center;height:20px;color:var(--neutral100);white-space:nowrap;pointer-events:none;font-size:12px;line-height:20px;position:absolute;top:48px;left:50%;transform:translate(-50%)}.notch-hit{pointer-events:auto;border-radius:0 0 8px 8px;width:199px;height:32px;padding:0;position:absolute;top:0;left:248.5px}.notch-hit:focus-visible{outline-offset:-3px}.panel[data-state=open] .notch-hit{pointer-events:none}.camera{pointer-events:none;background:radial-gradient(circle at 40% 40%,#12171e,#080808);border:1px solid #171717;border-radius:50%;width:6px;height:6px;position:absolute;top:13px;left:calc(50% - 3px)}.demo-settings{z-index:2;background:#1c1c1c;border:1px solid #373737;border-radius:12px;padding:12px;font-size:12px;position:absolute;top:70px;right:32px;box-shadow:0 8px 20px #0008}.demo-settings label{align-items:center;gap:24px;display:flex}.demo-settings label+label{margin-top:12px}.demo-settings input{accent-color:#999}.desktop .screenshot-toast{height:32px;top:40px}.desktop[data-display=without-notch] .toast.screenshot-toast{height:32px;top:4px}.toast-previews{height:32px;position:absolute;top:0;left:50%}.toast-preview{place-items:center;width:32px;height:32px;display:grid;position:absolute;top:0;left:0}.toast-preview img{object-fit:contain;border-radius:3px;display:block;box-shadow:0 0 0 1px #ffffff26}.toast-overflow{box-sizing:border-box;z-index:2;text-align:center;background:linear-gradient(90deg,#0000,#000 20px);width:82px;height:32px;padding-left:20px;padding-right:30px;font-size:16px;line-height:32px;position:absolute;top:0}@media (width>=1728px){.desktop{width:1512px}}@media (width<=900px){.desktop{width:calc(100% - 48px);margin-top:88px}.capture{min-height:48px;padding:12px 18px;font-size:15px}.capture img{width:20px;height:20px}}@media (width<=600px){.desktop{aspect-ratio:auto;border-radius:16px;width:calc(100% - 48px);height:460px;margin-top:56px}.capture{top:auto;bottom:36px;transform:translate(-50%)}.capture:active{transform:translate(-50%,1px)}.panel-header{gap:4px;height:44px;top:36px;left:32px;right:32px}.tab{min-height:44px;padding:14px 12px;font-size:12px;line-height:16px}.settings{width:32px;height:44px}.panel-view{top:84px}.file-grid{padding-top:12px}.menu-controls{gap:12px;padding-right:12px}.menu-controls>img:nth-child(n+3){display:none}.drop-zone{text-align:center;padding:12px}.empty-state,.drop-zone{font-size:13px;line-height:18px}.toast{font-size:13px}.notch-hit{min-height:44px}}.grid-selection-overlay{pointer-events:none;z-index:2;position:absolute;inset:0;overflow:hidden}.grid-selection-box{pointer-events:none;background:#448aff26;border:1px solid #8dbbff99;border-radius:2px;position:absolute}.grid-edge-fade{z-index:3;pointer-events:none;opacity:0;height:20px;position:absolute;left:0}.grid-edge-fade-top{background:linear-gradient(#000,#0000);top:0}.grid-edge-fade-bottom{background:linear-gradient(#0000,#000);bottom:0}.article-demo-host{aspect-ratio:16/9;isolation:isolate;background:#154c70;border-radius:16px;width:100%;position:relative;overflow:hidden}.article-demo .article-demo-desktop{aspect-ratio:auto;transform-origin:0 0;pointer-events:none;width:960px;max-width:none;height:540px;min-height:0;color:var(--neutral100);border-radius:0;margin:0;font:12px/16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;position:absolute;inset:0}.article-demo .desktop img{border-radius:0}.article-demo .wallpaper{width:100%;height:100%}.article-demo .folders,.article-demo .menu-controls{display:none}.article-demo .desktop .apple-menu{width:43px;height:25px}.article-demo .file-preview img{border-radius:3px;width:60px;height:42px}.article-demo .settings img{width:32px;height:32px}.article-demo .file-grid{grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden}.article-demo .panel-view{top:64px}.article-demo .panel-header{top:32px;left:32px;right:32px}.article-demo .tab{padding:8px 12px;font-size:12px;line-height:16px}.article-demo-shortcut{color:var(--neutral100);letter-spacing:6px;opacity:0;pointer-events:none;background:#17171bd9;border:1px solid #e2e2e226;border-radius:16px;padding:14px 24px;font:500 32px/40px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;position:absolute;top:395px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0002}.article-demo-destination{background:#202024;border:1px solid #e2e2e233;border-radius:14px;width:272px;height:162px;position:absolute;top:320px;left:640px;overflow:hidden;box-shadow:0 12px 32px #0004}.article-demo-window-title{color:var(--neutral100);border-bottom:1px solid #e2e2e214;padding:14px 16px;font-size:14px}.article-demo-drop{color:#aaa;border:1px dashed #e2e2e240;border-radius:8px;place-items:center;font-size:13px;display:grid;position:absolute;inset:60px 16px 16px}.article-demo-attachments{opacity:0;gap:12px;display:flex;position:absolute;top:80px;left:18px;right:18px}.article-demo .article-demo-attachments img{object-fit:cover;border:2px solid var(--neutral100);border-radius:3px;width:68px;height:48px}.article-demo .article-demo-cursor{z-index:10;transform-origin:0 0;opacity:0;width:22px;height:28px;position:absolute;top:0;left:0}.article-demo-drag{z-index:9;opacity:0;transform-origin:50px 43px;position:absolute;top:0;left:0}.article-demo-selection{z-index:2;opacity:0;pointer-events:none}.article-demo-flash{background:var(--neutral100);opacity:0;pointer-events:none;z-index:3;position:absolute;inset:0}.article-demo-footer{justify-content:space-between;align-items:flex-start;gap:20px;margin-top:12px;display:flex}.article-demo-footer figcaption{flex:1;margin:0}.article-demo-toggle{color:#bcbcbc;border:1px solid #373737;border-radius:8px;flex:none;min-height:40px;padding:8px 12px;font-size:13px;line-height:20px}.article-demo-toggle:hover{color:var(--neutral100);background:#292929}@media (width<=600px){.article-demo-host{border-radius:12px}.article-demo-footer{flex-direction:column;gap:12px}.article-demo-toggle{min-height:44px}}
