/* "A little further on Windows" — an asymmetric set of small screens, each with the island hanging from its top edge (sample data, previews only). */
.desktop-extras .eyebrow{color:#9bc8ce}
.desktop-extras header>p:not(.eyebrow){font-size:18px;line-height:1.7;color:#b9b5ae;margin:0}
.scenes-pause{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:8px 15px 8px 12px;border:1px solid #ffffff1c;border-radius:99px;background:#ffffff08;color:#c9c6cf;font:600 13px/1 var(--font);cursor:pointer}
.scenes-pause:hover{background:#ffffff12;color:#f1ece4}
.scenes-pause:focus-visible,.scene-modes button:focus-visible{outline:2px solid #9bc8ce;outline-offset:2px}
.scenes-pause-icon{width:10px;height:11px;border-inline:3px solid currentColor;box-sizing:border-box}
.scenes-pause[aria-pressed="true"] .scenes-pause-icon{border:0;border-left:9px solid currentColor;border-block:5.5px solid transparent;width:0;height:0}

.desktop-scenes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:300px 300px auto;gap:16px}
.scene{position:relative;overflow:hidden;border-radius:26px;border:1px solid #ffffff14;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 28px;min-width:0}
.scene-full{grid-column:1/8;grid-row:1/3;background:radial-gradient(120% 80% at 80% 10%,#3a2f5c 0%,transparent 60%),radial-gradient(90% 70% at 0% 100%,#173640 0%,transparent 62%),#0f121b}
.scene-media{grid-column:8/13;grid-row:1;background:radial-gradient(110% 90% at 85% 0%,#144a63 0%,transparent 62%),radial-gradient(80% 80% at 0% 100%,#2c2346 0%,transparent 70%),#0e121a}
.scene-signals{grid-column:8/13;grid-row:2;background:radial-gradient(100% 90% at 15% 0%,#3b2c4f 0%,transparent 60%),radial-gradient(90% 80% at 100% 100%,#1b3a3c 0%,transparent 70%),#0f111a}
.scene-shelf{grid-column:1/13;grid-row:3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:30px;padding:0 0 0 34px;min-height:270px;background:radial-gradient(70% 120% at 100% 0%,#4a2f2c 0%,transparent 60%),radial-gradient(60% 120% at 40% 100%,#1d2a3c 0%,transparent 70%),#0f121a}
.scene-screen{position:absolute;inset:0;z-index:-1;pointer-events:none}
.scene-shelf .scene-screen{position:relative;inset:auto;height:270px;z-index:0}
.scene-copy{position:relative;max-width:380px}
.scene-copy h3{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:0 0 8px;color:#f1ece4}
.scene-copy p{font-size:14.5px;line-height:1.6;color:#b4b1bb;margin:0}
.scene-full .scene-copy,.scene-media .scene-copy,.scene-signals .scene-copy{text-shadow:0 1px 14px #0b0d14}
.scene-full::after,.scene-media::after,.scene-signals::after{content:"";position:absolute;inset:auto 0 0;height:62%;z-index:-1;background:linear-gradient(0deg,#0b0d14f2 18%,#0b0d1400);pointer-events:none}
.scene-tag{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:99px;border:1px solid #ffffff1f;background:#0b0d1499;color:#cfd8dc;font-size:11px;font-weight:600;letter-spacing:.4px;text-shadow:none}

/* the island, drawn in the app's smoky glass */
.isle{position:absolute;top:0;left:50%;transform:translateX(-50%);box-sizing:border-box;color:#f1ece4;background:linear-gradient(180deg,#090b11f2,#171a24db);border:1px solid #ffffff17;border-top:0;border-radius:0 0 22px 22px;box-shadow:0 16px 36px -10px #000000b0,inset 0 -1px 0 #ffffff12;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.isle img{display:block}

/* 1 — above full-screen apps */
.slide{position:absolute;inset:0}
.slide-kicker{position:absolute;left:9%;top:24%;width:70px;height:6px;border-radius:3px;background:#c0b6e5aa}
.slide-title{position:absolute;left:9%;top:calc(24% + 22px);width:46%;height:16px;border-radius:8px;background:#f1ece42e}
.slide-title.short{top:calc(24% + 48px);width:30%}
.slide-bars{position:absolute;right:8%;top:22%;width:38%;height:34%;display:flex;align-items:flex-end;gap:9%;border-bottom:1px solid #ffffff1f}
.slide-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#91d6d8,#91d6d833)}
.slide-bars i:nth-child(n+4){background:linear-gradient(180deg,#c0b6e5,#c0b6e533)}
.slide-dots{position:absolute;right:8%;top:calc(56% + 18px);display:flex;gap:6px}
.slide-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff30}
.slide-dots i.on{width:18px;border-radius:3px;background:#91d6d8}
.isle-full{width:190px;height:36px;display:grid;place-items:center;overflow:hidden;transition:width .55s cubic-bezier(.3,.7,.2,1),height .55s cubic-bezier(.3,.7,.2,1),border-radius .55s,transform .5s ease,opacity .45s,background-color .4s}
.isle-row{display:flex;align-items:center;gap:22px;transition:opacity .25s}
.isle-row img{width:22px;height:auto}
.isle-clock{font-size:14px;font-weight:700;letter-spacing:.3px}
.isle-count{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#cbd5d6}
.isle-count i{width:6px;height:6px;border-radius:50%;background:#79daa3;box-shadow:0 0 8px #79daa3}
[data-mode="line"] .isle-full{width:140px;height:4px;border:0;border-radius:0 0 4px 4px;background:#79daa3;box-shadow:0 0 16px 1px #79daa3aa;animation:isle-breathe 3.2s ease-in-out infinite}
[data-mode="line"] .isle-row,[data-mode="hidden"] .isle-row{opacity:0}
[data-mode="hidden"] .isle-full{transform:translate(-50%,-120%);opacity:0}
@keyframes isle-breathe{50%{opacity:.45;box-shadow:0 0 6px #79daa366}}
.scene-modes{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding:4px;border-radius:14px;border:1px solid #ffffff17;background:#0b0d14b3;align-self:flex-start;backdrop-filter:blur(10px)}
.scene-modes button{padding:8px 13px;border:0;border-radius:10px;background:transparent;color:#b4b1bb;font:600 13px/1.2 var(--font);cursor:pointer}
.scene-modes button:hover{color:#f1ece4}
.scene-modes button[aria-pressed="true"]{background:#f1ece4;color:#10131c}

/* 2 — media */
.isle-media{width:min(340px,88%);padding:12px 16px 13px;border-radius:0 0 26px 26px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;column-gap:12px;row-gap:11px;align-items:center}
.isle-art{width:46px;height:46px;border-radius:11px}
.isle-track{display:grid;min-width:0}
.isle-track b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isle-track small{font-size:11.5px;color:#a9b3ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isle-eq{display:flex;align-items:flex-end;gap:3px;height:16px}
.isle-eq i{width:3px;height:40%;border-radius:2px;background:#91d6d8;animation:isle-eq 1.1s ease-in-out infinite}
.isle-eq i:nth-child(2){animation-delay:-.35s}.isle-eq i:nth-child(3){animation-delay:-.7s}.isle-eq i:nth-child(4){animation-delay:-.9s}
@keyframes isle-eq{50%{height:100%}}
.isle-progress{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:10.5px;color:#a9b3ba;font-variant-numeric:tabular-nums}
.isle-bar{flex:1;height:4px;border-radius:2px;background:#ffffff24;overflow:hidden}
.isle-bar i{display:block;height:100%;width:22%;border-radius:2px;background:#f1ece4;animation:isle-progress 14s linear infinite}
@keyframes isle-progress{from{width:22%}to{width:78%}}

/* 3 — system signals */
.isle-signals{width:226px;height:42px;border-radius:0 0 21px 21px}
.sig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;opacity:0;animation:sig-cycle 9s infinite}
.sig b{font-weight:700}
.sig svg{width:18px;height:18px;flex:none;fill:none;stroke:#f1ece4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sig-volume svg path:first-child{fill:#f1ece4}
.sig-caps{animation-delay:3s}.sig-lang{animation-delay:6s}
.sig-meter{width:96px;height:4px;border-radius:2px;background:#ffffff24;overflow:hidden}
.sig-meter i{display:block;height:100%;width:64%;background:#f1ece4;border-radius:2px;animation:sig-volume 9s infinite}
.sig-volume b{width:20px;font-size:12px;color:#cbd5d6;font-variant-numeric:tabular-nums}
.sig-on{width:7px;height:7px;border-radius:50%;background:#79daa3;box-shadow:0 0 8px #79daa3}
.sig-code{padding:3px 7px;border-radius:6px;border:1px solid #ffffff2e;font-size:11.5px;color:#a9b3ba}
.sig-code.on{background:#f1ece4;color:#10131c;border-color:#f1ece4}
.sig-arrow{color:#a9b3ba}
@keyframes sig-cycle{0%{opacity:0;transform:translateY(-5px)}4%,29%{opacity:1;transform:none}33%,100%{opacity:0;transform:none}}
@keyframes sig-volume{0%{width:34%}12%,100%{width:64%}}

/* 4 — file shelf */
.scene-shelf .scene-copy{padding-block:30px}
.isle-shelf{display:flex;gap:8px;padding:11px 14px 12px;border-radius:0 0 22px 22px;max-width:92%;white-space:nowrap}
.shelf-chip{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:10px;background:#ffffff0d;font-size:12px;color:#d5d9dd;min-width:0;overflow:hidden;text-overflow:ellipsis}
.scene-shelf .sample-type{width:24px;height:28px;border-radius:5px;font-size:7.5px}
.shelf-flying{position:absolute;z-index:2;top:22px;left:calc(50% - 60px);opacity:0;filter:drop-shadow(0 8px 14px #0009);animation:shelf-fly 6s cubic-bezier(.45,.05,.3,1) infinite}
.mini-window{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(290px,80%);height:124px;box-sizing:border-box;padding:28px 14px 12px;border-radius:14px;border:1px solid #ffffff1c;background:#141824e6;display:flex;flex-direction:column;gap:7px;box-shadow:0 18px 40px -16px #000}
.mini-bar{position:absolute;top:9px;left:12px;display:flex;gap:5px}
.mini-bar i{width:7px;height:7px;border-radius:50%;background:#ffffff26}
.bubble{display:block;height:12px;border-radius:7px;background:#ffffff1a}
.bubble.b1{width:58%}.bubble.b2{width:40%;align-self:flex-end;background:#91d6d833}
.bubble.file{align-self:flex-end;display:flex;align-items:center;gap:8px;height:auto;width:auto;padding:4px 10px 4px 4px;background:#91d6d826;opacity:0;animation:shelf-land 6s infinite}
.bubble.file em{display:block;width:56px;height:6px;border-radius:3px;background:#f1ece455}
@keyframes shelf-fly{0%,8%{opacity:0;transform:translate(0,0) scale(.9)}14%{opacity:1;transform:translate(0,4px) scale(1)}52%{opacity:1;transform:translate(96px,150px) rotate(-8deg)}60%,100%{opacity:0;transform:translate(104px,160px) scale(.85)}}
@keyframes shelf-land{0%,55%{opacity:0;transform:scale(.8)}62%,92%{opacity:1;transform:none}100%{opacity:0}}

/* pause button, and pause while off screen */
.desktop-scenes.is-paused *,.desktop-scenes.is-offscreen *{animation-play-state:paused!important}

@media(max-width:1080px){.scene-copy h3{font-size:19px}}
@media(max-width:960px){
 .desktop-scenes{grid-template-columns:1fr;grid-template-rows:none}
 .scene-full,.scene-media,.scene-signals,.scene-shelf{grid-column:1;grid-row:auto}
 .scene-full{min-height:470px}
 .scene-media,.scene-signals{min-height:300px}
 .scene-shelf{grid-template-columns:1fr;gap:0;padding:0}
 .scene-shelf .scene-copy{padding:6px 28px 26px;max-width:none}
 .scene-shelf .scene-screen{height:250px;order:-1}
 .scene-shelf .scene-copy{padding-bottom:26px}
}
@media(max-width:520px){
 .scene{padding:22px 20px;border-radius:22px}
 .scene-full{min-height:500px}
 .slide-bars{width:56%;top:20%;height:26%}
 .slide-title,.slide-kicker{display:none}
 .slide-dots{top:calc(46% + 14px)}
 .scene-modes{align-self:stretch}.scene-modes button{flex:1;padding:9px 6px}
 .scene-shelf .scene-copy{padding:4px 20px 22px}
 .isle-media{width:92%}
}
@media(prefers-reduced-motion:reduce){
 .desktop-scenes *{animation:none!important;transition:none!important}
 .scenes-pause{display:none}
 .isle-bar i{width:34%}
 .isle-signals{height:auto;padding:8px 0 10px;width:230px}
 .sig{position:static;opacity:1;height:30px}
 .shelf-flying{display:none}
 .bubble.file{opacity:1}
 [data-mode="line"] .isle-full{animation:none}
}