:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f6f5;background:#292a32;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 12%,#b6a99788,transparent 48%),radial-gradient(ellipse at 95% 75%,#8ba3b577,transparent 46%),linear-gradient(135deg,#706358,#504957 62%,#3b5166);min-height:100vh}button,input{font:inherit}button{color:inherit;cursor:pointer;background:none;border:0}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #93caff;outline-offset:3px}button:disabled{opacity:.38;cursor:default}[hidden]{display:none!important}.demo-header{height:58px;max-width:1328px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:24px;font-size:13px}.brand{font-weight:600;text-decoration:none;font-size:17px;white-space:nowrap}.brand span{opacity:.5;font-weight:400}.demo-header p{flex:1;color:#eeeceacc;font-size:13px}.demo-header button{border:1px solid #ffffff30;border-radius:20px;padding:8px 15px}.demo-header button:hover{background:#ffffff15}.demo-footer{text-align:center;font-size:12px;color:#ffffff85;padding:5px 12px 16px}#stage{position:relative;width:min(1280px,100% - 32px);height:calc(100vh - 96px);min-height:500px;max-height:960px;margin:auto}.surface{color:var(--ink,#f5f4f3);background:var(--surface,rgba(131,127,128,.76));border:1px solid #ffffff48;box-shadow:0 25px 70px #15111c55,0 0 0 1px #16151b88,inset 0 1px #ffffff25;backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)}.launcher{position:absolute;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;--icon:78px;--font:13px;--label-gap:-2px;touch-action:none}.launcher.no-shadow{box-shadow:inset 0 1px #ffffff30}.launcher.clear-glass{backdrop-filter:blur(13px) saturate(1.2);-webkit-backdrop-filter:blur(13px) saturate(1.2);text-shadow:0 1px 2px #0009}.move-strip{height:18px;flex:none;cursor:grab}.move-strip:active,.panel-header:active{cursor:grabbing}.root-layer{display:flex;flex-direction:column;flex:1;min-height:0}.search-row{margin:0 24px;padding-bottom:6px;height:49px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff25;flex:none}.search-symbol{width:21px;height:21px;border:2px solid currentColor;border-radius:50%;opacity:.6;position:relative;flex:none;margin-right:3px;transform:scale(.82)}.search-symbol:after{content:"";position:absolute;right:-7px;bottom:-4px;width:10px;height:2px;background:currentColor;transform:rotate(48deg)}.search-row input{width:0;flex:1;color:inherit;border:0;background:none;font-size:24px;padding:0;outline:none}.search-row input::placeholder{color:inherit;opacity:.6}.more{width:56px;height:42px;font-size:21px;font-weight:600;letter-spacing:1px;margin-right:-24px}.search-clear{border-radius:50%;font-size:21px;line-height:24px;width:32px;height:32px;opacity:.7}.search-row.no-search{height:30px;justify-content:flex-end}.scroll-grid{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;overscroll-behavior-x:auto;scrollbar-width:none;outline:none}.grid-canvas{position:relative;min-height:100%}.app-cell{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;padding:0;transition:transform 440ms cubic-bezier(.4,0,.2,1);touch-action:none}.icon{width:var(--icon);height:var(--icon);flex:none;position:relative;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--icon)*.22)}.icon>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #00000017);pointer-events:none}.app-cell .label{font-size:var(--font);line-height:1.3;margin-top:var(--label-gap);width:var(--label-width);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.hide-labels .label{display:none}.app-cell.drag-origin{opacity:0;transition:none}.app-cell.drop-folder .icon{outline:3.5px solid #88baff;box-shadow:0 0 3px #88baff75}.folder-icon{background:#ffffff1c;border:1px solid #ffffff40;display:grid!important;grid-template-columns:repeat(2,35%);grid-template-rows:repeat(2,35%);gap:5.5%;align-content:center;justify-content:center!important;padding:3.5%}.folder-icon img{width:100%;height:100%;object-fit:contain;pointer-events:none}.section-band{position:absolute;left:26px;right:26px;border-bottom:1px solid #ffffff27;pointer-events:none}.section-band .section-menu{pointer-events:auto;position:absolute;right:-12px;top:0;height:26px;width:24px;font-size:13px;opacity:0;z-index:2}.section-band:hover .section-menu,.section-menu:focus-visible,.launcher:hover .section-band .section-menu{opacity:.55}.section-menu:hover{opacity:1!important}.dots{height:39px;flex:none;display:flex;justify-content:center;align-items:flex-start;padding-bottom:9px}.dots button{width:24px;height:30px;display:grid;place-items:center}.dots button:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3}.dots button[aria-current=true]:before{opacity:.95}.empty{padding:40px;text-align:center;opacity:.7;font-size:15px}.folder-veil{position:absolute;inset:0;border-radius:inherit;background:#00000024;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;z-index:10}.folder-panel{position:absolute;display:flex;flex-direction:column;border-radius:28px;animation:open-panel 240ms ease;overflow:hidden}.folder-header{height:81px;padding:18px 24px;display:flex;align-items:center;gap:10px;flex:none;position:relative}.folder-header:after{content:"";position:absolute;bottom:0;left:24px;right:24px;border-bottom:1px solid #ffffff25}.folder-header input{min-width:0;width:100%;font-size:28px;font-weight:600;color:inherit;background:transparent;border:0;text-align:center;outline:none}.folder-header .folder-glyph{font-size:26px}.close{border-radius:50%;background:#ffffff14;width:24px;height:24px;flex:none;font-size:17px;line-height:1}.folder-header .close{width:30px;height:30px}.resize{position:absolute;z-index:22;touch-action:none}.resize.e{right:0;top:18px;bottom:15px;width:8px;cursor:ew-resize}.resize.s{bottom:0;left:15px;right:15px;height:8px;cursor:ns-resize}.resize.se{bottom:3px;right:3px;width:26px;height:26px;cursor:nwse-resize;border-radius:0 0 12px 0}.resize.se:after{content:"";position:absolute;right:5px;bottom:6px;width:9px;height:9px;border-right:1px solid #ffffff66;border-bottom:1px solid #ffffff66}.settings{position:absolute;width:321px;z-index:30;border-radius:16px;display:flex;flex-direction:column;max-height:calc(100% - 16px);font-size:13px;overflow:hidden;background:rgba(117,114,118,.88)}.panel-header{display:flex;justify-content:space-between;align-items:center;height:46px;padding:8px 16px 6px;flex:none;cursor:grab;touch-action:none}.panel-header strong{font-size:15px}.settings-body{padding:0 16px;overflow:auto;min-height:0}.settings-group{border-bottom:1px solid #ffffff25;padding:8px 0}.accordion{width:100%;height:28px;display:flex;justify-content:space-between;align-items:center;font-weight:600;padding:0}.accordion span:last-child{font-size:15px;opacity:.75}.setting-row{display:flex;align-items:center;justify-content:space-between;min-height:30px;gap:12px}.setting-row>span:first-child{white-space:nowrap}.setting-row input[type=range]{width:164px;height:24px;min-width:0;accent-color:#f1f1f1;cursor:pointer}.setting-row input[type=checkbox]{appearance:none;width:36px;height:20px;border-radius:20px;background:#ffffff25;position:relative;flex:none;cursor:pointer}.setting-row input[type=checkbox]:before{content:"";position:absolute;width:17px;height:17px;top:1.5px;left:2px;background:#eeeff0;border-radius:50%;box-shadow:0 1px 2px #0002;transition:transform 140ms}.setting-row input:checked{background:#b4b5bd99}.setting-row input:checked:before{transform:translateX(15px)}.settings button.action{background:#ffffff10;border:1px solid #ffffff25;border-radius:6px;height:28px;padding:0 10px}.settings .wide{display:block;width:100%;margin:8px 0}.settings small{font-size:11px;color:#eee9;display:block;margin:3px 0 8px}.support-note{padding:12px 16px 14px;font-size:12px;flex:none}.support-note strong{font-size:13px}.support-note p{margin:8px 0 0;line-height:1.4}.support-note p:last-child{opacity:.65}.menu{position:fixed;min-width:184px;max-width:300px;max-height:calc(100vh - 16px);overflow:auto;z-index:100;padding:5px;border-radius:8px;background:rgba(86,87,95,.96);font-size:13px;box-shadow:0 7px 25px #0005,0 0 0 1px #1d1c2388;backdrop-filter:blur(25px);color:#fff}.menu button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:25px;text-align:left;border-radius:4px;padding:4px 8px}.menu button:hover,.menu button:focus-visible{background:#3678d7;outline:none}.menu hr{border:0;border-top:1px solid #ffffff25;margin:5px}.drag-ghost{position:fixed;left:0;top:0;z-index:150;pointer-events:none;will-change:transform;opacity:1;filter:drop-shadow(0 5px 6px #0003)}.dragging{user-select:none;cursor:grabbing!important}.dialog{color:#f7f5f4;border:1px solid #ffffff40;border-radius:16px;background:#67636d;padding:24px;max-width:400px;box-shadow:0 20px 60px #0005}.dialog::backdrop{background:#1115;backdrop-filter:blur(3px)}.dialog h2{font-size:19px;margin:0 0 10px}.dialog p{font-size:14px;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog button{border-radius:7px;background:#ffffff22;padding:8px 14px}.library{display:grid;gap:8px}.library button{text-align:left;display:flex;align-items:center;gap:12px}.library img{width:40px;height:40px}.live-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.video-demo{max-width:900px;margin:20px auto;text-align:center}.video-demo h1{font-size:28px}.video-demo p{opacity:.7}.video-demo video{display:block;width:100%;border-radius:18px;box-shadow:0 20px 70px #0004}.video-play{margin:16px;border:1px solid #ffffff50;border-radius:20px;padding:10px 24px}@keyframes open-panel{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media(max-width:1023px),(max-height:639px),(pointer:coarse){.demo-header p{display:none}.demo-header{justify-content:center}#stage{height:auto;min-height:0;max-height:none}.demo-footer{padding-top:24px}.video-demo{margin:20px auto}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}@supports not (backdrop-filter:blur(1px)){.surface{background:#77737c}}
.folder-glyph{position:relative;width:25px;height:18px;flex:none;background:currentColor;border-radius:3px;margin-top:4px}.folder-glyph:before{content:"";position:absolute;top:-4px;left:0;width:12px;height:6px;background:currentColor;border-radius:3px 3px 0 0}.panel-header{height:38px}.setting-row{min-height:24px}.setting-row input[type=range]{appearance:none;background:transparent}.setting-row input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#d7d4d045}.setting-row input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#f1f0ed;margin-top:-7px;box-shadow:0 1px 3px #0002}.setting-row input[type=range]::-moz-range-track{height:4px;background:#d7d4d045;border-radius:4px}.setting-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#f1f0ed}
.folder-panel{z-index:1;isolation:isolate;animation:none}
.section-band,.search-row,.folder-header:after{border-color:color-mix(in srgb,currentColor 18%,transparent)}
.folder-icon{border-color:color-mix(in srgb,currentColor 24%,transparent)}
/* Scaling only avoids WebKit's opacity/backdrop compositing issue. */
@keyframes folder-open{from{transform:scale(.96)}to{transform:scale(1)}}
.folder-panel{animation:folder-open 240ms ease-in-out}

.folder-name{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:10px}.folder-name input{flex:0 1 auto;max-width:calc(100% - 35px);padding:0}

/* The browser handles horizontal gestures and mandatory page snapping. */
.page-viewport{position:relative;display:flex;flex:1;min-height:0;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.native-page-track{display:flex;height:100%;flex:none}.page-slot{position:relative;display:flex;flex:none;height:100%;scroll-snap-align:start;scroll-snap-stop:normal;min-width:0}.page-slot>.scroll-grid{width:100%;min-width:0;flex:none}.page-viewport.is-paging .app-cell{pointer-events:none}
.page-preview{width:100%;height:100%;flex:none;overflow:hidden}
.page-preview .app-cell{transition:none}
.page-viewport::-webkit-scrollbar,.scroll-grid::-webkit-scrollbar,.settings-body::-webkit-scrollbar{display:none;width:0;height:0}
.settings-body{scrollbar-width:none}
.icon>img.inset-art{width:82%;height:82%;border-radius:23%;box-shadow:0 2px 3px #0002}
.drag-ghost.icon{position:fixed;transition:none;transform-origin:center;contain:layout style}

/* Page indicators float over the content, so clipping happens at the window edge. */
.root-layer{position:relative}
.dots{position:absolute;bottom:0;left:0;width:100%;z-index:3;pointer-events:none}
.dots button{pointer-events:auto}
.section-band{border-bottom:0}
.section-band:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.section-band:has(.section-menu):after{right:18px}
.section-band .section-menu{top:auto;bottom:-12px;right:-8px;height:25px;line-height:25px;padding:0;display:flex;align-items:center;justify-content:center}
.app-cell.pressed:not(.drag-origin) .icon:after{content:"";position:absolute;inset:5%;border:1.5px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:23%;pointer-events:none}
.icon.folder-icon{width:calc(var(--icon)*.88);height:calc(var(--icon)*.88);margin:calc(var(--icon)*.06) 0;border-radius:calc(var(--icon)*.2)}
.drag-layer{position:fixed;overflow:hidden;pointer-events:none;z-index:150}
.drag-layer .drag-ghost.icon{position:absolute;margin:0}

/* Launcher labels and controls are not selectable; editable fields still are. */
.launcher,.settings,.menu{-webkit-user-select:none;user-select:none}
.launcher input,.settings input{-webkit-user-select:text;user-select:text}
.icon,.icon img{-webkit-user-drag:none}

.no-glass,.no-glass .surface,.no-glass .folder-veil{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.menu.no-glass,.settings.no-glass,.dialog.no-glass{background:var(--solid-surface);color:var(--ink)}
.dialog.no-glass::backdrop{backdrop-filter:none}
body{background:#665d5c url('/demo/assets/wallpaper.jpg') center/cover fixed no-repeat}
.demo-header,.demo-footer{text-shadow:0 1px 3px #0008}

.search-row{overflow:hidden;min-height:0}
.settings-leaving{z-index:1}

.settings-dismiss{position:fixed;inset:0;z-index:25;background:transparent}
.menu:focus{outline:none}.submenu{position:fixed}
.section-highlight{position:absolute;left:16px;right:16px;border:2px solid #a8cfff;border-radius:12px;pointer-events:none;z-index:3}

/* Keep all three dots inside the search row clipping boundary. */
.search-row .more{flex:none;margin-right:0}

.menu-folder-label{display:flex;align-items:center;gap:8px}
.menu .folder-glyph{width:15px;height:11px;border-radius:2px;margin-top:2px}
.menu .folder-glyph:before{top:-3px;width:7px;height:4px;border-radius:2px 2px 0 0}