/* The top-edge launcher and its drop-down live inside the illustrated desktop. */
.top-edge-trigger{position:absolute;z-index:11;top:0;left:50%;transform:translateX(-50%);height:34px;min-width:112px;padding:0 15px;border:1px solid #e5f5c64d;border-top:0;border-radius:0 0 12px 12px;background:#213b2eed;color:#e3f6c8;font:600 11px Manrope,sans-serif;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 5px 20px #17342630}
.top-edge-trigger:hover,.top-edge-trigger[aria-expanded=true]{background:#dff2b9;color:#233b2c}
.drift-layout-picker{position:absolute;z-index:10;left:50%;top:42px;width:min(510px,94%);padding:17px;border:1px solid #efffd455;border-radius:16px;background:#23382ef2;backdrop-filter:blur(18px);box-shadow:0 18px 45px #112f3855;opacity:0;visibility:hidden;transform:translate(-50%,-24px) scale(.96);transform-origin:50% 0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .25s}
.picker-open .drift-layout-picker{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.picker-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b8cbb2;font:9px DM Mono,monospace;margin-bottom:14px;letter-spacing:.06em}
.picker-heading span:last-child{color:#e1f3bb;letter-spacing:0}
.picker-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.picker-options button{padding:10px 9px 8px;border:1px solid #dcefc224;border-radius:9px;background:#ffffff05;color:#bed0b7;font:500 11px Manrope,sans-serif;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.picker-options button:hover,.picker-options button.is-hovered{background:#ddf5ad26;border-color:#dff5b7;transform:translateY(-3px);color:#f3ffe2}
.picker-options button[aria-pressed=true]{background:#d9efad1c;color:#e0f6b9}
.layout-thumb{height:42px;display:grid;gap:3px;margin-bottom:8px;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}
.layout-thumb i{border:1px solid #d7eead66;border-radius:3px;background:#c5df9d40}
.thumb-focus i:first-child{grid-area:1/1/3/3}.thumb-focus i:nth-child(4){grid-area:2/3/3/5}
.thumb-balanced i:first-child{grid-area:1/1/3/3}.thumb-balanced i:nth-child(2){grid-area:1/3/2/5}
.thumb-columns{grid-template-columns:repeat(3,1fr)}.thumb-columns i:first-child{grid-area:1/1/3/2}.thumb-columns i:nth-child(2){grid-area:1/2/3/3}
.thumb-grid{grid-template-columns:1fr 1fr}
.demo-cursor,.is-snapping .demo-cursor{width:24px;height:30px;transform:none;pointer-events:none;z-index:14;opacity:0;transition:left .85s cubic-bezier(.4,0,.2,1),top .85s cubic-bezier(.4,0,.2,1),opacity .25s,transform .15s}
.demo-cursor svg{width:100%;height:100%;display:block}
.demo-cursor span{font:600 10px Manrope,sans-serif;transform:none;left:20px;top:26px;padding:4px 7px}
.cursor-visible .demo-cursor{opacity:1}.cursor-click .demo-cursor{transform:scale(.8)}
.cursor-click .demo-cursor:after{content:'';position:absolute;left:-9px;top:-9px;width:28px;height:28px;border:2px solid #e6ffb2;border-radius:50%;animation:click-ring .45s ease-out both}
@keyframes click-ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0}}
.snap-grid{display:none}
.workspace-demo[data-mode=columns]:not(.is-scattered) .app-browser{left:3%;top:10%;width:30%;height:77%}
.workspace-demo[data-mode=columns]:not(.is-scattered) .app-notes{left:35%;top:10%;width:30%;height:77%}
.workspace-demo[data-mode=columns]:not(.is-scattered) .app-code{left:67%;top:10%;width:30%;height:37%}
.workspace-demo[data-mode=columns]:not(.is-scattered) .app-music{left:67%;top:49.5%;width:30%;height:37.5%}
.workspace-demo[data-mode=grid]:not(.is-scattered) .app-browser{left:3%;top:10%;width:46%;height:37%}
.workspace-demo[data-mode=grid]:not(.is-scattered) .app-notes{left:51%;top:10%;width:46%;height:37%}
.workspace-demo[data-mode=grid]:not(.is-scattered) .app-code{left:3%;top:49.5%;width:46%;height:37.5%}
.workspace-demo[data-mode=grid]:not(.is-scattered) .app-music{left:51%;top:49.5%;width:46%;height:37.5%}
.workspace-demo[data-mode=columns] .studio-body>strong{font-size:2.5cqw}
.workspace-demo[data-mode=columns] .art-sculpture{top:40%;right:2cqw}
.workspace-demo[data-mode=grid] .studio-body>strong{font-size:2cqw;margin-top:.7cqw}
.workspace-demo[data-mode=grid] .art-sculpture{top:-20%;right:0}
.workspace-demo[data-mode=grid] .studio-footer{display:none}
.workspace-demo[data-mode=grid] .music-body,.workspace-demo[data-mode=columns] .music-body{display:flex;gap:2cqw;align-items:center;text-align:left;padding:2cqw}
.workspace-demo[data-mode=grid] .album-art,.workspace-demo[data-mode=columns] .album-art{margin:0;flex:none}
.workspace-demo[data-mode=grid] .track-info,.workspace-demo[data-mode=columns] .track-info{flex:1}
.demo-caption{min-width:0}
@media(max-width:700px){
 .top-edge-trigger{height:29px;min-width:95px;font-size:10px;padding-inline:10px}
 .drift-layout-picker{top:35px;padding:12px 10px;border-radius:12px}
 .picker-heading{font-size:7px;margin-bottom:10px}
 .picker-options{gap:5px}.picker-options button{padding:8px 5px;font-size:9px}
 .layout-thumb{height:32px;gap:2px;margin-bottom:6px}
 .desktop-menubar>span:last-child{font-size:1.5cqw}
 .demo-cursor{width:20px;height:25px}.demo-cursor span{font-size:8px;left:15px;top:22px}
 .thumb-focus i:nth-child(3){grid-column:3/5}.thumb-focus i:nth-child(2){display:none}
 .thumb-balanced i:first-child{grid-area:1/1/2/5}.thumb-balanced i:nth-child(2){grid-area:2/1/3/3}.thumb-balanced i:nth-child(3){grid-area:2/3/3/5}.thumb-balanced i:nth-child(4){display:none}
 .thumb-columns i:nth-child(3){grid-area:1/3/3/4}.thumb-columns i:nth-child(4){display:none}
 .thumb-grid i:nth-child(3){grid-column:1/3}.thumb-grid i:nth-child(4){display:none}
 .workspace-demo[data-mode=columns]:not(.is-scattered) .app-browser{left:3%;width:30%;top:12%;height:73%}
 .workspace-demo[data-mode=columns]:not(.is-scattered) .app-notes{left:35%;width:30%;top:12%;height:73%}
 .workspace-demo[data-mode=columns]:not(.is-scattered) .app-code{left:67%;width:30%;top:12%;height:73%}
 .workspace-demo[data-mode=grid]:not(.is-scattered) .app-browser{left:3%;width:46%;top:12%;height:35%}
 .workspace-demo[data-mode=grid]:not(.is-scattered) .app-notes{left:51%;width:46%;top:12%;height:35%}
 .workspace-demo[data-mode=grid]:not(.is-scattered) .app-code{left:3%;width:94%;top:49%;height:36%}
 .workspace-demo[data-mode=columns] .studio-body>strong{font-size:2.8cqw}
 .workspace-demo[data-mode=columns] .art-sculpture{width:20cqw;right:0;top:48%}
 .workspace-demo[data-mode=columns] .studio-footer{display:none}
 .workspace-demo[data-mode=grid] .studio-body>strong{font-size:3.1cqw;margin-top:1cqw}
 .workspace-demo[data-mode=grid] .art-sculpture{top:15%;right:-15cqw;opacity:.45}
}
@media(prefers-reduced-motion:reduce){.drift-layout-picker,.demo-cursor,.picker-options button{transition:none}.cursor-click .demo-cursor:after{animation:none}}