/* macOS desktop scene — a little stage, not a screenshot. Generic shapes
   only: no Apple artwork, no logos, no brand icons. The camera + cursor are
   driven per-frame by main.js on cheap transform/opacity properties. */
/* Stage: no real border — an inset shadow keeps the hairline out of layout,
   so the scaled scene fits the box exactly (860x480 * scale). */
.stage{overflow:hidden;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);background:#0a0c18}
/* Origin pinned at 0 0: main.js bakes the focus point into the transform
   itself (translate + scale). A per-frame transform-origin write was
   main-thread work phones paid on every frame of every camera move. */
.camera{position:absolute;inset:0;z-index:0;will-change:transform;transform-origin:0 0}
.stage-glow{z-index:1}
.search-panel{z-index:2}
.wallpaper{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#31219b 0%,#1d1670 30%,#0e1040 58%,#070820 100%)}
.wallpaper span{position:absolute;pointer-events:none}
.ribbon-a{left:-18%;top:6%;width:88%;height:72%;background:radial-gradient(50% 50% at 50% 50%,#4a3fd6 0%,#2c239e 45%,transparent 72%);filter:blur(38px);transform:rotate(-8deg)}
.ribbon-b{right:-22%;top:-14%;width:80%;height:78%;background:radial-gradient(50% 50% at 50% 50%,#5a48e8 0%,#2a1f96 50%,transparent 74%);filter:blur(44px)}
.beam{right:-6%;top:22%;width:46%;height:130%;background:linear-gradient(100deg,transparent 38%,rgba(200,214,255,.34) 47%,rgba(235,240,255,.5) 50%,rgba(150,175,255,.22) 54%,transparent 64%);filter:blur(22px);transform:rotate(8deg)}
.wallpaper::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 108%,rgba(4,5,16,.55),transparent 60%)}
.menubar{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;gap:15px;padding:0 14px;font-size:12px;color:#eef0f6;background:rgba(20,16,60,.42);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.1)}
.menubar span:not(.mb-app):not(.mb-right){color:#d6d8e2}
.mb-app{font-weight:700}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:12px;color:#e2e4ec;font-size:11px;white-space:nowrap}
.mb-stats{letter-spacing:3px;color:#dcdff0;font-size:10px}
.dock{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px;padding:9px 11px;border-radius:24px;background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);transition:opacity .45s ease-out}
body.zoomed .dock{opacity:0}
.dk{position:relative;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--fg,rgba(255,255,255,.94));text-shadow:0 1px 2px rgba(0,0,0,.3);background:linear-gradient(152deg,var(--g1) 0%,var(--g2) 58%,var(--g3,var(--g2)) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.35)}
.dk::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 42%,transparent 60%);pointer-events:none}
.dk.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:-.5px}
.dk.code{font-size:10px}
.dk.browser{background:radial-gradient(circle at 50% 50%,#eef1f6 0 8px,rgba(238,241,246,0) 9px),conic-gradient(from 20deg,#ea4335,#fbbc05,#34a853,#1a73e8,#7b5cf0,#ea4335)}
.dk .bdg{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a72,#ff3b30 70%);border:2px solid rgba(35,26,80,.95);z-index:1}
.dk.notes{background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(120,124,140,.45) 5px 6px) 9px 19px/24px calc(100% - 27px) no-repeat,linear-gradient(180deg,#f7d774 0 26%,#eef0f4 26%)}
.dk.notes::before{background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 50%)}
.dk-sep{width:1px;align-self:stretch;margin:4px 3px;background:rgba(255,255,255,.18)}
.dk.trash{background:transparent;box-shadow:none;text-shadow:none}
.dk.trash::before{display:none}
.dk.trash i{position:relative;display:block;width:22px;height:25px;border-radius:3px 3px 7px 7px;background:linear-gradient(180deg,#f2f4f8 0%,#c3c8d4 55%,#9aa0af 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 3px 0 4px rgba(255,255,255,.25),inset -3px 0 4px rgba(0,0,0,.12),0 3px 6px rgba(0,0,0,.35)}
.dk.trash i::before{content:"";position:absolute;top:-5px;left:-3px;right:-3px;height:5px;border-radius:3px;background:linear-gradient(180deg,#e8ebf1,#b9bec9)}
.dk.trash i::after{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:10px;height:5px;border:2px solid #c9ced8;border-bottom:0;border-radius:4px 4px 0 0}
.dk.running::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75)}
/* Keystroke overlay: what the fingers press, diegetic, then gone. */
.keyhint{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:6px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(10,11,16,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .3s ease-out,transform .3s var(--spring)}
.keyhint.show{opacity:1;transform:translateY(0)}
body:not(.live) .keyhint{display:none}
.keyhint kbd{font-family:inherit;font-size:12px;font-weight:600;color:#d5d7dd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-bottom-width:3px;border-radius:8px;padding:8px 12px;transition:background .12s,box-shadow .12s,transform .12s}
.keyhint kbd.pressed{background:rgba(255,255,255,.24);color:#fff;box-shadow:0 0 18px rgba(255,255,255,.25);transform:translateY(2px);border-bottom-width:1px}
/* The cursor: one compositor transform, squash on click, lean into motion. */
.cursor{position:absolute;left:0;top:0;z-index:4;width:22px;will-change:transform;pointer-events:none;visibility:hidden}
body.live .cursor{visibility:visible}
.cursor svg{display:block;width:100%;height:auto;fill:#101216;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.click-ripple{position:absolute;left:0;top:0;z-index:4;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid rgba(255,255,255,.85);border-radius:50%;opacity:0;pointer-events:none}
.click-ripple.ping{animation:ping .55s ease-out}
@keyframes ping{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.15)}}
/* 1:1 with ResultCell's overlay: black .48, 30px dial, 12px label. */
.copy-overlay{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.48);display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease-out;pointer-events:none}
.copy-overlay.working,.copy-overlay.done{opacity:1}
.dial svg{display:block;width:30px;height:30px;fill:none}
.dial-track{stroke:rgba(255,255,255,.2);stroke-width:2}
.dial-prog{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:81.68;stroke-dashoffset:81.68;transform:rotate(-90deg);transform-origin:center}
.copy-overlay.working .dial-prog{transition:stroke-dashoffset .9s linear}
.dial-check{stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transform-origin:center;transition:opacity .18s ease-out,transform .28s var(--spring)}
.copy-overlay.done .dial-check{opacity:1;transform:scale(1)}
.copy-label{font-size:12px;color:#fff}
/* Phone performance tier. At phone scale the scene composites at ~40%, and
   the glass materials read the same as solids — but backdrop blur inside an
   animating, scaled camera and 30–44px blur filters over it are what
   stuttered on a real device. Radii drop where a filter must stay. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .menubar{background:rgba(24,20,62,.86);-webkit-backdrop-filter:none;backdrop-filter:none}
  .dock{background:rgba(255,255,255,.16);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 10px 24px rgba(0,0,0,.45)}
  .keyhint{background:rgba(10,11,16,.92);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ribbon-a{filter:blur(12px)}
  .ribbon-b{filter:blur(14px)}
  .beam{filter:blur(10px)}
  .cursor svg{filter:none}
}
/* The scene is a fixed 860x480 canvas scaled as one unit (#demo-scene,
   sized from main.js), so none of its furniture reflows at small widths —
   the dock, menubar and panel always keep their designed proportions. */
@media(prefers-reduced-motion:reduce){
  .camera{transform:none !important}
  .cursor,.keyhint,.click-ripple{display:none}
  .copy-overlay{display:none}
}
.motion-paused .camera{transform:none !important}
.motion-paused .cursor,.motion-paused .keyhint{visibility:hidden}