/* The desk scene. All positions use cqw of .scene (scene width = 100cqw, height = 62.5cqw).
   Wall 0–37.5cqw, desk from 37.5cqw, front edge 2.2cqw. Monitors 41.5cqw wide at 8cqw and 50.5cqw, top 5cqw, neck 6.7cqw. */
.scene{position:relative;width:100%;aspect-ratio:16/10;container-type:inline-size;overflow:hidden;border-radius:var(--panel-radius);background:var(--wall)}
.wall{position:absolute;left:0;right:0;top:0;height:37.5cqw;background:var(--wall)}
.desk{position:absolute;left:0;right:0;top:37.5cqw;bottom:0;background:var(--desk)}
.desk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2cqw;background:var(--desk-front)}
.sh{position:absolute;border-radius:50%;background:var(--shadow);filter:blur(.8cqw)}
.sun{position:absolute;pointer-events:none;left:-2cqw;top:0;width:26cqw;height:37.5cqw;background:linear-gradient(115deg,rgba(255,250,225,.75),rgba(255,250,225,0) 70%);clip-path:polygon(18% 0,62% 0,100% 100%,40% 100%);z-index:1}
.sun.b{left:22cqw;width:16cqw;opacity:.7}

/* monitors */
.mon{position:absolute;top:5cqw;width:41.5cqw;display:flex;flex-direction:column;align-items:center;z-index:2}
.mon.l{left:8cqw}.mon.r{left:50.5cqw}
.bezel{position:relative;width:100%;aspect-ratio:16/9.6;background:var(--mon);border-radius:.7cqw;padding:.8cqw .8cqw 1.5cqw;box-shadow:var(--mon-glow);box-sizing:border-box}
.bezel::after{content:"";position:absolute;right:1.4cqw;bottom:.55cqw;width:.35cqw;height:.35cqw;border-radius:50%;background:#7fd38a;opacity:.7}
.neck{width:3cqw;height:6.7cqw;margin-top:-.1cqw;background:var(--mon-stand)}
.foot{width:12cqw;height:1.5cqw;border-radius:50% 50% .4cqw .4cqw/100% 100% .4cqw .4cqw;background:var(--mon-stand);margin-top:-.2cqw}
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--s-bg);color:var(--s-fg);container-type:inline-size;border-radius:.15cqw;font-family:var(--f-ui)}
.screen .view{position:absolute;inset:0}

/* keyboard, mouse */
.kb{position:absolute;left:28.5cqw;top:43.2cqw;width:34cqw;height:9cqw;padding:.55cqw;box-sizing:border-box;background:var(--kb);border-radius:.8cqw;
  display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(5,1fr);gap:.3cqw;transform:perspective(70cqw) rotateX(46deg);transform-origin:50% 100%;z-index:3}
.kb i{background:var(--key);border:.06cqw solid var(--key-edge);border-radius:.22cqw;box-sizing:border-box}
.kb i.sp{grid-column:span 7}
.mouse{position:absolute;left:65cqw;top:44.6cqw;width:3.4cqw;height:5.6cqw;background:var(--mouse);border-radius:48% 48% 46% 46%/38% 38% 62% 62%;transform:perspective(40cqw) rotateX(35deg);z-index:3;overflow:hidden}
.mouse::before{content:"";position:absolute;left:50%;top:0;height:42%;border-left:.07cqw solid rgba(0,0,0,.2)}

/* coffee */
.cup{position:absolute;left:3.4cqw;top:40.4cqw;width:8.6cqw;height:11cqw;z-index:3}
.cup .saucer{position:absolute;left:-1.2cqw;right:-1.2cqw;bottom:0;height:2.2cqw;border-radius:50%;background:var(--saucer)}
.cup .body{position:absolute;left:.9cqw;right:.9cqw;bottom:1cqw;height:6.8cqw;background:var(--cup);border-radius:.3cqw .3cqw 2.6cqw 2.6cqw;box-sizing:border-box}
.cup .body::before{content:"";position:absolute;left:-.1cqw;right:-.1cqw;top:-.8cqw;height:1.6cqw;border-radius:50%;background:var(--cup);box-sizing:border-box}
.cup .body::after{content:"";position:absolute;left:.45cqw;right:.45cqw;top:-.45cqw;height:.95cqw;border-radius:50%;background:var(--coffee)}
.cup .handle{position:absolute;left:-.6cqw;bottom:2.6cqw;width:2.6cqw;height:3.4cqw;border:.75cqw solid var(--cup);border-right:0;border-radius:50% 0 0 50%;box-sizing:border-box}
.steam{position:absolute;left:1.2cqw;top:-4.2cqw;width:6cqw;height:7cqw;overflow:visible}
.steam path{fill:none;stroke:var(--steam);stroke-width:1.6;stroke-linecap:round;opacity:0;animation:steam 4.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.4s}.steam path:nth-child(3){animation-delay:2.8s}
@keyframes steam{0%{opacity:0;transform:translateY(12px) scaleY(.7)}30%{opacity:.9}100%{opacity:0;transform:translateY(-8px) scaleY(1.1)}}

/* plant */
.plant{position:absolute;pointer-events:none;right:0;top:22cqw;width:8cqw;height:20cqw;z-index:2}
.plant .pot{position:absolute;left:1.6cqw;bottom:0;width:4.6cqw;height:4.6cqw;background:#c66b43;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.plant .lf{position:absolute;width:2.4cqw;height:7cqw;background:linear-gradient(90deg,#3f7a4b,#5d9a62);border-radius:50% 50% 50% 50%/80% 80% 20% 20%;bottom:3.8cqw;left:2.8cqw;transform-origin:50% 100%}

/* notepad with the services: 9 lines of 2.05cqw */
.pad{position:absolute;left:70.8cqw;top:39.6cqw;width:24.6cqw;height:21.6cqw;z-index:4;transform:rotate(-2.6deg);transform-origin:50% 100%}
.pad .sheet{position:relative;width:100%;height:100%;box-sizing:border-box;background:
  linear-gradient(90deg,transparent 2.6cqw,var(--pad-margin) 2.6cqw,var(--pad-margin) calc(2.6cqw + .12cqw),transparent calc(2.6cqw + .12cqw)),
  repeating-linear-gradient(180deg,transparent 0 calc(2.05cqw - .1cqw),var(--pad-line) calc(2.05cqw - .1cqw) 2.05cqw),var(--pad);
  background-position:0 0,0 1.05cqw,0 0;
  border-radius:.25cqw;box-shadow:.25cqw .5cqw 1.1cqw var(--shadow);padding:1.05cqw .6cqw 0 3.2cqw;color:var(--pad-ink);font-family:var(--hand)}
.pad .sheet::before{content:"";position:absolute;left:0;right:0;top:-.2cqw;height:1.1cqw;background:var(--ink-pad);opacity:.82;border-radius:.2cqw .2cqw 0 0}
.pad h2{margin:0;font:700 1.4cqw/2.05cqw var(--hand);height:2.05cqw;letter-spacing:.02em}
.pad ol{list-style:none;margin:0;padding:0}
.pad li button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;font:400 1.2cqw/2.05cqw var(--hand);height:2.05cqw;white-space:nowrap;position:relative;color:var(--pad-ink)}
.pad li button span{position:relative}
.pad li button span::after{content:"";position:absolute;left:-.2cqw;right:-.3cqw;bottom:.22cqw;height:.16cqw;background:var(--pad-hi);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.pad li button:hover span::after,.pad li button:focus-visible span::after{transform:scaleX(1)}
.pad li button:focus-visible{outline:.15cqw dashed var(--pad-hi);outline-offset:0}
.pad li button[aria-pressed="true"]{color:var(--pad-hi)}
.pad li button[aria-pressed="true"]::before{content:"";position:absolute;left:-2.3cqw;top:.5cqw;width:1.1cqw;height:.6cqw;border-left:.2cqw solid var(--pad-hi);border-bottom:.2cqw solid var(--pad-hi);transform:rotate(-45deg)}
.pen{position:absolute;left:92.8cqw;top:41cqw;width:1cqw;height:17cqw;z-index:5;transform:rotate(14deg);border-radius:.5cqw .5cqw .2cqw .2cqw;background:linear-gradient(90deg,#1d3557,#3d5a80 50%,#1d3557)}
.pen::after{content:"";position:absolute;left:.15cqw;right:.15cqw;bottom:-1.3cqw;height:1.4cqw;background:#c9c4b8;clip-path:polygon(0 0,100% 0,50% 100%)}

/* contact pad between cup and keyboard */
.cpad{all:unset;display:block;cursor:pointer;position:absolute;left:13.4cqw;top:47.4cqw;width:12.6cqw;height:11.8cqw;z-index:4;transform:rotate(5deg);transition:transform .25s;color:var(--pad-ink)}
.cpad:hover{transform:rotate(3deg) translateY(-.4cqw)}
.cpad:focus-visible{outline:.2cqw dashed var(--pad-hi);outline-offset:.3cqw}
.cpad .sheet{display:block;background:repeating-linear-gradient(180deg,transparent 0 calc(1.8cqw - .1cqw),var(--pad-line) calc(1.8cqw - .1cqw) 1.8cqw),var(--cpad);background-position:0 1.6cqw;padding:2cqw 1cqw 0;font:400 1.25cqw/1.8cqw var(--hand);box-shadow:.2cqw .4cqw .9cqw var(--shadow);border-radius:.2cqw;height:9.8cqw;box-sizing:border-box}
.cpad .rings{position:absolute;left:.8cqw;right:.8cqw;top:-.7cqw;height:1.4cqw;background:radial-gradient(circle at 50% 70%,var(--ink-pad) .32cqw,transparent .36cqw) 0 0/1.3cqw 100% repeat-x}
.cpad b{display:block;font-weight:700;font-size:1.55cqw;color:var(--pad-hi)}

/* keyboard hint on the desk's front edge; pointless on touch screens */
.keys{position:absolute;left:1.6cqw;bottom:.5cqw;z-index:6;margin:0;font:500 1cqw/1.2cqw var(--f-mono);letter-spacing:.05em;color:rgba(255,245,225,.85)}
.keys kbd{font:inherit;color:#fff}
@media (hover:none){.keys{display:none}}

/* phones: the scene is cropped to the two monitors stacked on the wall; the service list below takes over the notepad's job */
@media (max-width:767px){
  .scene{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:5cqw;padding:5cqw 0 0}
  .wall,.desk,.sh,.sun,.kb,.mouse,.cup,.pen,.plant,.cpad,.pad,.keys,.neck,.foot{display:none}
  .mon{position:static;width:92cqw}
  .scene::after{content:"";display:block;width:100%;height:7cqw;background:var(--desk);border-bottom:2.5cqw solid var(--desk-front)}
}