/* Try it here: small working models of what the apps do, drawn in the same macOS language as desktop.css.
   Home: drag an app onto Applications. SoundPost: connect, music quality, the play key, volume per app.
   Mission Boost: a Mission Control with its buttons and shortcuts. Everything here is our own drawing. */
.try-lede{max-width:620px;margin:-12px 0 24px;color:var(--muted);font-size:15px;line-height:24px}
[data-try-section][hidden]{display:none}
.visual.tv{height:330px}
@media (max-width:860px){.visual.tv{height:auto;min-height:300px}}
.tv{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:22px 24px;user-select:none;-webkit-user-select:none}
.tv .glyph{width:16px;height:16px}
.tv img{position:static;translate:none;max-width:none;filter:none}
.tv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}
.tv-sw{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:500}
.tv-sw b{color:var(--fg);font-weight:600}
.chip-st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font:600 12px var(--sans);background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);transition:background-color .3s,color .3s}
.chip-st.bad{background:color-mix(in srgb,#ff9f0a 20%,transparent);color:#ff9f0a}
.pill-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border:0;border-radius:15px;background:var(--tint-2);color:var(--fg);font:500 13px var(--sans);cursor:pointer;transition:background-color .2s,color .2s,scale .15s}
.pill-btn:active{scale:.97}
.pill-btn[aria-pressed=true]{background:var(--accent);color:#fff}
.tv-note{margin:0;min-height:20px;color:var(--muted);font-size:13px;line-height:20px;text-align:center}

/* --- SoundPost: connect --- */
.mini-bar{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;border-radius:9px;background:var(--menubar);box-shadow:inset 0 0 0 .5px var(--line);font:500 12px var(--sans);color:var(--menubar-fg)}
.mini-bar .l,.mini-bar .r{display:flex;align-items:center;gap:12px}
.mini-bar .l img{width:13px;height:13px}
.mini-bar .l span{color:var(--muted)}
.hp-btn{position:relative;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 6px;border:0;border-radius:5px;background:none;color:var(--menubar-fg);font:600 11.5px var(--sans);cursor:pointer}
.hp-btn:hover,.hp-btn[aria-pressed=true]{background:var(--menubar-hover)}
.hp-btn .pct{display:none;font-variant-numeric:tabular-nums}
.hp-btn[aria-pressed=true] .pct{display:inline}
.hp-btn.hint::after{content:"";position:absolute;inset:-3px;border-radius:8px;box-shadow:0 0 0 2px var(--accent);animation:hint 1.6s ease-out infinite}
@keyframes hint{0%{opacity:.9;scale:.9}100%{opacity:0;scale:1.35}}
.devs{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;min-height:130px}
.dev{position:relative;display:grid;justify-items:center;gap:8px;padding-top:44px;color:var(--muted);font-size:12px;font-weight:500;transition:color .3s}
.dev svg.dev-art{width:auto;height:66px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dev.on{color:var(--fg)}
.buds{position:absolute;top:0;left:50%;translate:-50% 0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:var(--card-edge),0 6px 16px #0006;color:var(--sp)}
.buds svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.batt{display:flex;justify-content:center;gap:18px;opacity:0;translate:0 6px;transition:opacity .4s,translate .4s var(--ease)}
.on .batt{opacity:1;translate:0}
.ring{display:grid;justify-items:center;gap:3px;color:var(--muted);font-size:10.5px}
.ring svg{width:30px;height:30px;rotate:-90deg}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:var(--tint-2)}.ring .fg{stroke:var(--green);stroke-linecap:round}
.ring b{color:var(--fg);font-size:11px;font-weight:600}

/* --- SoundPost: music quality --- */
.wave{display:block;width:100%;height:96px;overflow:visible}
.wave path{fill:none;stroke:var(--sp);stroke-width:2.2;stroke-linejoin:round;transition:stroke .3s;vector-effect:non-scaling-stroke}
.bad .wave path{stroke:#ff9f0a}
.q-mic .glyph{width:14px;height:14px}

/* --- SoundPost: play key --- */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--tint)}
.seg button{border:0;border-radius:999px;padding:4px 11px;background:none;color:var(--muted);font:500 12px var(--sans);cursor:pointer}
.seg button[aria-checked=true]{background:var(--raised);box-shadow:var(--raised-edge);color:var(--fg)}
.fkeys{display:flex;justify-content:center;gap:10px}
.fkey{display:grid;place-items:center;gap:0;width:66px;height:58px;padding:6px 0 4px;border:0;border-radius:10px;background:var(--kbd);box-shadow:var(--kbd-edge),0 2px 0 #00000059;color:var(--kbd-fg);cursor:pointer;transition:translate .08s,box-shadow .08s}
.fkey .glyph{width:20px;height:20px}
.fkey small{font:10px var(--mono);color:var(--muted)}
.fkey:active,.fkey.down{translate:0 2px;box-shadow:var(--kbd-edge),0 0 0 #0000}
.k-out{position:relative;display:grid;place-items:center;min-height:62px}
.k-hud,.k-win{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;width:min(300px,100%);padding:10px 14px 10px 10px;border-radius:18px;text-align:left;animation:k-in .35s var(--spring) backwards}
.k-txt{min-width:0}
.k-txt b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-txt small{display:block;color:var(--muted);font-size:12px;line-height:17px}
.k-art{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;color:#fff}
.tv .k-art .glyph{width:18px;height:18px}
.k-win{background:var(--card);box-shadow:var(--card-edge),0 14px 34px -10px #000a}
.k-win.shake{animation:k-in .35s var(--spring) backwards,shake .45s .2s}
@keyframes k-in{from{opacity:0;scale:.9;translate:0 8px}}
@keyframes shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}

/* --- SoundPost: volume per app --- */
.mx{display:grid;gap:12px}
.mx-row{display:grid;grid-template-columns:30px 74px minmax(0,1fr) 40px 26px;align-items:center;gap:10px;font-size:13px}
.mx-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff}
.mx-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mx-row output{color:var(--muted);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.mx-row .mute{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.mx-row .mute:hover{background:var(--tint-2);color:var(--fg)}
.mx-row .mute[aria-pressed=true]{color:var(--red)}
.mx-row .slider{height:20px}.mx-row .slider input{height:20px}
.mx-row .slider input::-webkit-slider-thumb{width:20px;height:20px}.mx-row .slider input::-moz-range-thumb{width:20px;height:20px}
.mx-row .slider input{background:linear-gradient(90deg,var(--fill) calc(10px + (100% - 20px) * var(--f,.5)),var(--track) 0)}
:root[data-theme=light] .mx-row .slider input{--fill:var(--accent)}
.meter{grid-column:2/5;height:4px;margin-top:-6px;border-radius:2px;background:var(--tint);overflow:hidden}
.meter i{display:block;height:100%;width:100%;transform-origin:0;scale:var(--lvl,0) 1;background:linear-gradient(90deg,var(--green) 60%,#ffd60a 82%,var(--red));transition:scale .08s linear}
.vol-hud{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:9px;width:210px;padding:9px 12px;border-radius:16px;font-size:12px;opacity:0;translate:0 -6px;transition:opacity .2s,translate .3s var(--spring);pointer-events:none}
.vol-hud.show{opacity:1;translate:0}
.vol-hud .track{flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.vol-hud .track i{display:block;height:100%;background:var(--fg);transform-origin:0;scale:var(--v,0) 1}
.vol-hud b{min-width:64px;font-weight:600}

/* --- Home: drag an app onto Applications --- */
.start{display:grid;gap:20px;min-width:0}
.dmg{position:relative;border-radius:18px;background:var(--card);box-shadow:var(--card-edge),0 30px 60px -30px #000c;overflow:hidden;user-select:none;-webkit-user-select:none}
.dmg-bar{position:relative;display:flex;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid var(--line);font:600 13px var(--sans)}
.dmg-bar .deco{display:flex;gap:8px}
.dmg-bar .deco i{width:12px;height:12px;border-radius:50%;background:var(--tint-2)}
.dmg:hover .dmg-bar .deco i:nth-child(1){background:#ff5f57}.dmg:hover .dmg-bar .deco i:nth-child(2){background:#febc2e}.dmg:hover .dmg-bar .deco i:nth-child(3){background:#28c840}
.dmg-bar span{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;gap:7px}
.dmg-bar span svg{width:16px;height:16px}
.dmg-bg{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:250px;padding:20px 28px 44px;background:radial-gradient(60% 80% at 50% 0,var(--glow),#0000),radial-gradient(50% 60% at 85% 100%,#5464ec1f,#0000)}
.dmg-src{display:grid;gap:10px;justify-items:center}
.dmg-app{position:relative;display:grid;justify-items:center;gap:4px;width:110px;padding:6px;border:0;border-radius:12px;background:none;color:var(--fg);font:500 12.5px var(--sans);cursor:grab;touch-action:none}
.dmg-app img{width:72px;height:72px;filter:drop-shadow(0 8px 14px #0006);transition:scale .2s var(--spring)}
.dmg-app:hover img{scale:1.05}
.dmg-app.dragging{opacity:.35}
.dmg-app:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.dmg-app.in::after{content:"";position:absolute;right:18px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain;box-shadow:0 2px 6px #0006;animation:k-in .4s var(--spring) backwards}
.dmg-arrow{width:120px;height:60px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 7}
.dmg-arrow .head{stroke-dasharray:none}
.dmg-to{position:relative;display:grid;justify-items:center;gap:4px;width:120px;padding:10px 6px;border-radius:14px;font:500 12.5px var(--sans);transition:background-color .15s}
.dmg-to img{width:88px;height:88px;transition:scale .25s var(--spring)}
.dmg-to.over{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.dmg-to.over img{scale:1.08}
.dmg-to.bounce img{animation:fold-bounce .5s var(--spring)}
@keyframes fold-bounce{40%{scale:1.14}}
.dmg-to .count{position:absolute;right:14px;top:8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font:600 12px/20px var(--sans);text-align:center}
.dmg-hint{position:absolute;left:0;right:0;bottom:14px;margin:0;color:var(--muted);font-size:13px;text-align:center}
.dmg-hint a{color:var(--accent);text-decoration:none}
.dmg-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.8;filter:drop-shadow(0 14px 24px #0008)}
.dmg-copy{background:color-mix(in srgb,var(--card) 90%,transparent);position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:3;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;width:min(340px,86%);padding:14px 16px;border-radius:18px;font-size:12.5px;animation:k-in .3s var(--spring) backwards}
.dmg-copy img{width:44px;height:44px}
.dmg-copy b{display:block;font-weight:600;margin-bottom:8px}
.dmg-copy .bar{display:block;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.dmg-copy .bar i{display:block;height:100%;width:100%;transform-origin:0;scale:0 1;background:var(--accent);border-radius:3px}
@media (max-width:640px){.dmg-bg{grid-template-columns:1fr auto 1fr;padding:16px 12px 52px}.dmg-arrow{width:48px}.dmg-app{width:88px}.dmg-app img{width:60px;height:60px}.dmg-to{width:96px}.dmg-to img{width:70px;height:70px}}

/* --- Mission Boost: Mission Control --- */
.mc{display:grid;gap:14px}
.mc-stage{position:relative;aspect-ratio:16/9;max-height:620px;width:100%;border-radius:16px;overflow:hidden;background-color:#120c14;background-image:var(--wall-ember);box-shadow:var(--frame-edge);outline:none;--bs:22px;container-type:inline-size;user-select:none;-webkit-user-select:none}
:root[data-wall] .mc-stage{background-image:var(--wall)}
.mc-stage:focus-visible{box-shadow:var(--frame-edge),0 0 0 3px var(--accent)}
.mc[data-size=small] .mc-stage{--bs:17px}.mc[data-size=large] .mc-stage{--bs:28px}
.mc-spaces{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:center;gap:10px;padding:2.2cqw 0 0;font:500 clamp(10px,1.1cqw,13px) var(--sans);color:#ffffffc7}
.mc-spaces span{padding:4px 12px;border-radius:999px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .2s}
.mc-spaces span.on{background:#ffffff38;color:#fff}
.mc-spaces span.new{animation:k-in .45s var(--spring) backwards;background:#0a84ffb3;color:#fff;cursor:pointer}
.mcw{position:absolute;z-index:1;outline:none;transition:opacity .35s,scale .35s var(--ease),translate .35s var(--ease)}
.mcw .w{position:absolute;inset:0;border-radius:clamp(5px,.9cqw,10px);overflow:hidden;background:#1e1e22;box-shadow:0 1.4cqw 3cqw -.6cqw #000c,0 0 0 1px #ffffff14;transition:box-shadow .15s}
.mcw:hover .w,.mcw:focus-visible .w,.mcw.hot .w{box-shadow:0 1.4cqw 3cqw -.6cqw #000c,0 0 0 3px #0a84ff}
.mcw .label{position:absolute;left:50%;top:calc(100% + .9cqw);translate:-50% 0;padding:3px 10px;border-radius:999px;background:#000000a6;color:#fff;font:500 clamp(9px,1cqw,12px) var(--sans);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.mcw:hover .label,.mcw:focus-visible .label,.mcw.hot .label{opacity:1}
.mcw.gone{opacity:0;scale:.82;pointer-events:none}
.mcw.away{opacity:0;pointer-events:none;visibility:hidden}
.mb-btns{position:absolute;z-index:3;left:calc(var(--bs) * -.42);top:calc(var(--bs) * -.42);display:flex;gap:calc(var(--bs) * .22);opacity:0;scale:.8;transition:opacity .12s,scale .15s var(--spring);pointer-events:none}
.mcw:hover .mb-btns,.mcw:focus-within .mb-btns,.mcw.hot .mb-btns{opacity:1;scale:1;pointer-events:auto}
.mb-b{display:grid;place-items:center;width:var(--bs);height:var(--bs);padding:0;border:0;border-radius:50%;background:var(--bf);color:var(--bg-g,#fff);box-shadow:0 0 0 var(--rw,1px) var(--rc,#0000002e),0 2px 6px #0006;cursor:pointer;transition:scale .12s}
.mb-b:hover{scale:1.1}
.mb-b svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.mc[data-look=classic] .mb-b.close{--bf:#EC4640}.mc[data-look=classic] .mb-b.min{--bf:#F5BF4F}.mc[data-look=classic] .mb-b.max{--bf:#4CC15E}
.mc[data-look=soft] .mb-b.close{--bf:#D9706B}.mc[data-look=soft] .mb-b.min{--bf:#E3C47A}.mc[data-look=soft] .mb-b.max{--bf:#86BC91}
.mc[data-look=graphite] .mb-b{--rc:#ffffff33}.mc[data-look=graphite] .mb-b.close{--bf:#2C2C2E}.mc[data-look=graphite] .mb-b.min{--bf:#636366}.mc[data-look=graphite] .mb-b.max{--bf:#98989D}
.mc[data-look=mono] .mb-b{--bf:#F5F5F7;--bg-g:#1C1C1E;--rc:#00000059}
.mc[data-look=outline] .mb-b{--bf:#0000004d;--rc:#ffffffd9;--rw:1.5px}
.looks{display:flex;gap:6px}
.look{display:flex;gap:3px;padding:6px 8px;border:0;border-radius:9px;background:var(--tint);cursor:pointer}
.look i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 .5px #0000004d}
.look[aria-checked=true]{box-shadow:0 0 0 2px var(--accent);background:var(--tint-2)}
.mc-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:13px;color:var(--muted)}
.mc-ctl .grp{display:flex;align-items:center;gap:8px}
.mc-ctl .grow{flex:1}
.mc-count{color:var(--fg);font-weight:500}
.mc-done{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;place-content:center;justify-items:center;gap:10px;padding:20px;text-align:center;color:#fff;font:500 clamp(13px,1.5cqw,17px) var(--sans);text-shadow:0 1px 8px #0008;animation:k-in .4s var(--spring) backwards}
.mc-done .pill-btn{pointer-events:auto;justify-self:center;background:#ffffff2e;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mc-done b{font:700 clamp(18px,2.4cqw,28px) var(--display)}
.mc-dock{position:absolute;left:50%;bottom:1.4cqw;translate:-50% 0;z-index:2;display:flex;align-items:flex-end;gap:.6cqw;padding:.6cqw .8cqw;border-radius:1.6cqw;background:#ffffff1f;-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 .5px 0 #ffffff40,0 0 0 .5px #0006}
.mc-dock .ic{position:relative;display:grid;place-items:center;width:3.6cqw;height:3.6cqw;min-width:20px;min-height:20px;border-radius:22%;color:#fff;transition:opacity .3s}
.mc-dock .ic svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mc-dock .ic.run::after{content:"";position:absolute;left:50%;bottom:-.5cqw;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#fff}
.mc-dock .ic.quit{opacity:.35}
.mc-dock .sep{width:1px;align-self:stretch;background:#ffffff40;margin:0 .3cqw}
.mc-dock .minw{width:4.4cqw;height:3.2cqw;min-width:24px;min-height:18px;border-radius:4px;overflow:hidden;cursor:pointer;box-shadow:0 2px 6px #0007;animation:k-in .35s var(--spring) backwards;border:0;padding:0;background:none}
.mc-dock .minw .w{position:relative;width:100%;height:100%}
/* window contents, drawn small */
.w .tb{display:flex;gap:4%;align-items:center;height:12%;min-height:8px;padding:0 5%;background:#ffffff0d;border-bottom:1px solid #ffffff12}
.w .tb i{width:5%;max-width:9px;aspect-ratio:1;border-radius:50%;background:#ffffff38}
.w .tb .addr{flex:1;height:50%;margin-left:6%;border-radius:999px;background:#ffffff14}
.w .body{position:absolute;inset:12% 0 0;padding:6% 7%;display:grid;align-content:start;gap:6%}
.w .ln{height:5%;min-height:3px;border-radius:2px;background:#ffffff26}
.w .ln.h{height:9%;width:62%;background:#ffffffb3}
.w.app-browser .pic{height:34%;border-radius:4px;background:linear-gradient(120deg,#2bb8b2,#5464ec 55%,#e8473d)}
.w.app-draft{background:#f7f5ef}.w.app-draft .tb{background:#00000008;border-color:#0000000f}.w.app-draft .tb i{background:#0000002e}.w.app-draft .ln{background:#00000024}.w.app-draft .ln.h{background:#000000a6}
.w.app-term{background:#0d1310}.w.app-term .body{font:clamp(5px,.75cqw,10px)/1.5 var(--mono);color:#7ee787;gap:0;white-space:nowrap;overflow:hidden}
.w.app-term .body span{color:#8b949e}
.w.app-inbox .row{display:grid;grid-template-columns:auto 1fr;gap:6%;align-items:center}
.w.app-inbox .row b{width:1.6cqw;aspect-ratio:1;border-radius:50%;background:#5464ec}
.w.app-inbox .row:nth-child(2) b{background:#e8473d}.w.app-inbox .row:nth-child(3) b{background:#17a59c}
.w.app-gallery .body{grid-template-columns:repeat(3,1fr);gap:4%}
.w.app-gallery .body i{aspect-ratio:1;border-radius:3px;background:linear-gradient(140deg,var(--a),var(--b))}
.w.app-player .body{grid-template-columns:40% 1fr;align-items:center;gap:8%}
.w.app-player .art{aspect-ratio:1;border-radius:5px;background:linear-gradient(135deg,#ff6b5f,#5464ec)}
.mc-keys li{transition:color .2s}
.mc-keys li.lit{color:var(--fg)}
.mc-keys li.lit kbd{background:var(--accent);color:#fff;box-shadow:none}
@media (max-width:640px){.mc-stage{aspect-ratio:4/3}.mc-ctl{gap:10px 14px}}