/* ===== The room around the workstation (front view; coordinates share the monitor's box: 100% = screen) ===== */
.room, .room-front { --fl: calc(var(--deskTop) + 38vmin); }
.room { position: absolute; inset: 0; }
.room > * { position: absolute; }
.room > svg { display: block; }
.room .frame svg, .room .frame-2 svg, .room .tablet svg { display: block; width: 100%; height: 100%; }

/* wall + floor */
.wall { left: -260%; right: -260%; top: -260%; height: calc(360% + var(--chin) + 12.4vmin + 38vmin); background: linear-gradient(180deg, #141518 0%, #1E1F24 55%, #2A2B31 100%); }
.wall::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 92%, rgba(255,186,120,.10), transparent 70%); }
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2vmin; background: linear-gradient(#3B3C44, #2A2B31); box-shadow: 0 -.3vmin 0 rgba(255,255,255,.06); }
.floor { left: -260%; right: -260%; top: var(--fl); height: 170vmin; background: linear-gradient(180deg, #4D3B2D 0%, #3D2F23 30%, #2A2018 100%); }
.floor::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 21vmin, rgba(0,0,0,.25) 21vmin 21.5vmin), repeating-linear-gradient(180deg, transparent 0 5.4vmin, rgba(255,255,255,.035) 5.4vmin 5.7vmin); }
.floor::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1vmin; background: rgba(0,0,0,.4); }
.rug { left: 2%; width: 96%; top: calc(var(--fl) + 2vmin); height: 17vmin; border-radius: .8vmin; background: repeating-linear-gradient(90deg, #6B4A42 0 8vmin, #7E5A50 8vmin 9vmin, #5A3E38 9vmin 17vmin, #8A655A 17vmin 18vmin); box-shadow: 0 .8vmin 1.6vmin rgba(0,0,0,.45), inset 0 0 0 1.2vmin #4A3330; }

/* desk */
.desk { left: -8%; right: -8%; top: var(--deskTop); height: 3.6vmin; border-radius: .5vmin; background: linear-gradient(180deg, #9A7857 0%, #7C5F45 50%, #5C4634 100%); box-shadow: 0 1vmin 2vmin rgba(0,0,0,.5); }
.desk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5vmin; background: rgba(255,255,255,.22); }
.desk-apron { left: -7%; right: -7%; top: calc(var(--deskTop) + 3.6vmin); height: 7vmin; background: linear-gradient(180deg, #4F3B2C, #3F2E22); }
.leg { top: calc(var(--deskTop) + 10.6vmin); width: 5vmin; height: 28vmin; background: linear-gradient(90deg, #3C2C21, #5B4434 50%, #3C2C21); }
.leg.l { left: -3%; } .leg.r { right: -3%; }
.desk-glow { left: 50%; top: var(--deskTop); transform: translateX(-50%); width: 120%; height: 40vmin; background: radial-gradient(50% 100% at 50% 0%, rgba(120,170,255,.22), transparent 70%); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.booted .desk-glow { opacity: 1; }

/* on the desk */
.lamp { left: calc(-1 * var(--bz) - 30vmin); top: calc(var(--deskTop) - 34vmin); width: 24vmin; height: 36vmin; }
.lamp .base { position: absolute; left: 2vmin; bottom: 0; width: 12vmin; height: 2vmin; border-radius: 1vmin; background: #1C1D20; box-shadow: 0 .6vmin 1vmin rgba(0,0,0,.5); }
.lamp .arm { position: absolute; left: 7.4vmin; bottom: 1.5vmin; width: 1.2vmin; height: 28vmin; background: #2A2B30; transform-origin: 50% 100%; transform: rotate(18deg); border-radius: .6vmin; }
.lamp .shade { position: absolute; left: 10vmin; top: 1vmin; width: 14vmin; height: 7vmin; background: linear-gradient(180deg, #2E2F35, #17181B); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.lamp .bulb { position: absolute; left: 11.5vmin; top: 7.6vmin; width: 11vmin; height: 2vmin; border-radius: 50%; background: #FFE7B5; box-shadow: 0 0 2vmin #FFD98A; }
.lamp-glow { left: calc(-1 * var(--bz) - 50vmin); top: calc(var(--deskTop) - 44vmin); width: 60vmin; height: 44vmin; pointer-events: none; background: radial-gradient(45% 55% at 42% 30%, rgba(255,200,120,.22), transparent 70%); }
.pc { left: 72%; top: calc(var(--deskTop) + 10vmin); width: 13vmin; height: 28vmin; border-radius: .6vmin; background: linear-gradient(90deg, #15161A, #26272D 55%, #121316); box-shadow: 0 1vmin 2vmin rgba(0,0,0,.6); }
.pc::before { content: ""; position: absolute; left: 1.4vmin; top: 3vmin; width: 7vmin; height: 20vmin; border-radius: .4vmin; background: linear-gradient(180deg, rgba(90,220,255,.18), rgba(90,220,255,.04)); box-shadow: inset 0 0 0 .2vmin rgba(90,220,255,.35); }
.pc i { position: absolute; left: 9.8vmin; width: 1vmin; height: 1vmin; border-radius: 50%; background: #5ADCFF; box-shadow: 0 0 1vmin #5ADCFF; animation: led 2.2s ease-in-out infinite; animation-play-state: paused; }
.live .pc i { animation-play-state: running; }
.pc i:nth-child(1) { top: 3vmin; } .pc i:nth-child(2) { top: 5.2vmin; animation-delay: .7s; } .pc i:nth-child(3) { top: 7.4vmin; animation-delay: 1.4s; }
@keyframes led { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* wall: window, frame, racket, shelves */
.window { left: calc(-1 * var(--bz) - 126vmin); top: -64vmin; width: 48vmin; height: 74vmin; background: #2E2F35; border: 2.4vmin solid #3B3C44; box-shadow: inset 0 0 0 .6vmin #1B1C20, 0 2vmin 4vmin rgba(0,0,0,.5); }
.window::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0F1B33 0%, #27345E 45%, #B6633F 85%, #F2A65A 100%); }
.window::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2.2vmin; transform: translateX(-50%); background: #3B3C44; box-shadow: 0 0 0 .4vmin #1B1C20; }
.window i { position: absolute; left: 0; right: 0; top: 50%; height: 2.2vmin; transform: translateY(-50%); background: #3B3C44; box-shadow: 0 0 0 .4vmin #1B1C20; z-index: 1; }
.window b { position: absolute; left: 10%; top: 14%; width: 5vmin; height: 5vmin; border-radius: 50%; background: #FFF1C9; box-shadow: 0 0 3vmin rgba(255,240,200,.7); }
.window .city { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(0deg, #141825 0 35%, transparent 35%), repeating-linear-gradient(90deg, #1A1F2E 0 3vmin, transparent 3vmin 3.6vmin, #151928 3.6vmin 7.2vmin, transparent 7.2vmin 8vmin); }
.window .lights { position: absolute; left: 0; right: 0; bottom: 8%; height: 14%; background: radial-gradient(circle, #FFD37A 0 .5vmin, transparent .6vmin) 0 0 / 4.2vmin 3vmin, radial-gradient(circle, #FFE9A8 0 .4vmin, transparent .5vmin) 2.3vmin 1.6vmin / 5.6vmin 3.2vmin; opacity: .8; }
.sill { left: calc(-1 * var(--bz) - 130vmin); top: calc(-64vmin + 74vmin + 2.4vmin); width: 58vmin; height: 2.6vmin; background: linear-gradient(#44454E, #2E2F35); box-shadow: 0 1vmin 1.6vmin rgba(0,0,0,.5); }
.window-glow { left: calc(-1 * var(--bz) - 150vmin); top: -40vmin; width: 110vmin; height: 110vmin; pointer-events: none; background: radial-gradient(50% 50% at 40% 40%, rgba(255,170,110,.12), transparent 70%); }
.frame { left: calc(-1 * var(--bz) - 58vmin); top: -50vmin; width: 32vmin; height: 24vmin; padding: 1.3vmin; background: linear-gradient(180deg, #2B2724, #17150F); box-shadow: 0 1.8vmin 2.4vmin rgba(0,0,0,.55), inset 0 .2vmin 0 rgba(255,255,255,.12); }
.frame::before { content: ""; position: absolute; left: 50%; top: -1.6vmin; width: 1vmin; height: 1vmin; border-radius: 50%; background: #8C8471; transform: translateX(-50%); }
.frame-2 { left: calc(-1 * var(--bz) - 76vmin); top: -34vmin; width: 18vmin; height: 22vmin; padding: 1vmin; background: #E9E4D8; box-shadow: 0 1.4vmin 2vmin rgba(0,0,0,.5); font-family: var(--f-hand); color: #3A3320; font-size: 2.1vmin; line-height: 1.05; }
.frame-2 span { position: absolute; left: 1vmin; right: 1vmin; bottom: 1vmin; text-align: center; }
.frame-2 svg { height: 68%; }
.hook { left: calc(-1 * var(--bz) - 18vmin); top: -27vmin; width: 2.2vmin; height: 2.2vmin; border-radius: 50%; background: #8C8471; box-shadow: inset 0 0 0 .5vmin #2A2B31, 0 .3vmin .5vmin rgba(0,0,0,.6); }
.racket { left: calc(-1 * var(--bz) - 26vmin); top: -26vmin; width: 18.5vmin; height: 47vmin; transform: rotate(-12deg); transform-origin: 50% 2%; }
.shelf { left: calc(100% + var(--bz) + 26vmin); width: 56vmin; height: 2.4vmin; background: linear-gradient(180deg, #9A7857, #5C4634); box-shadow: 0 1.2vmin 1.8vmin rgba(0,0,0,.55); }
.shelf.s1 { top: -50vmin; } .shelf.s2 { top: -22vmin; }
.shelf > * { position: absolute; bottom: 100%; }
.bag { width: 7vmin; height: 10vmin; border-radius: .8vmin .8vmin .4vmin .4vmin; background: #3A2415; box-shadow: inset 0 -1vmin 0 rgba(0,0,0,.25); }
.bag::after { content: ""; position: absolute; left: 1vmin; right: 1vmin; top: 3vmin; height: 3.4vmin; background: #E9DCC4; }
.bag.b1 { left: 2vmin; } .bag.b2 { left: 9.6vmin; background: #5B2E1A; }
.cups { left: 19vmin; width: 14vmin; height: 4.2vmin; }
.cups i { position: absolute; bottom: 0; width: 4vmin; height: 4.2vmin; background: #F7F4EE; border-radius: .3vmin .3vmin 1.2vmin 1.2vmin; box-shadow: inset -.6vmin 0 0 rgba(0,0,0,.08); }
.cups i:nth-child(1) { left: 0; } .cups i:nth-child(2) { left: 4.8vmin; } .cups i:nth-child(3) { left: 9.6vmin; }
.trophy { left: 36vmin; width: 7vmin; height: 10vmin; }
.trophy::before { content: ""; position: absolute; left: .8vmin; right: .8vmin; top: 0; height: 5.4vmin; border-radius: 0 0 2.7vmin 2.7vmin; background: linear-gradient(90deg, #B8860B, #FFD866 50%, #B8860B); }
.trophy::after { content: ""; position: absolute; left: 1.6vmin; right: 1.6vmin; bottom: 0; height: 2.2vmin; background: #2A2B31; box-shadow: 0 -2.6vmin 0 -1.4vmin #D4A017; }
.shark-plush { left: 46vmin; width: 8vmin; height: 8vmin; border-radius: 1vmin; overflow: hidden; box-shadow: 0 .6vmin 1vmin rgba(0,0,0,.4); }
.shark-plush img { width: 100%; height: 100%; object-fit: cover; }
.books-s { left: 2vmin; width: 14vmin; height: 11vmin; }
.books-s i { position: absolute; bottom: 0; width: 3vmin; border-radius: .3vmin .3vmin 0 0; }
.books-s i:nth-child(1) { left: 0; height: 11vmin; background: #2F3F5A; } .books-s i:nth-child(2) { left: 3.4vmin; height: 9.6vmin; background: #B6433A; } .books-s i:nth-child(3) { left: 6.8vmin; height: 10.4vmin; background: #E7DCC5; } .books-s i:nth-child(4) { left: 10.2vmin; height: 8.6vmin; background: #4F8A3C; transform: rotate(8deg); transform-origin: 100% 100%; }
.shelf-globe { left: 20vmin; width: 9vmin; height: 11vmin; }
.shelf-globe::before { content: ""; position: absolute; left: 0; top: 0; width: 9vmin; height: 9vmin; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7FB7E8, #2E6EA8 60%, #1B3F66); box-shadow: inset -1.2vmin -1vmin 2vmin rgba(0,0,0,.35); }
.shelf-globe::after { content: ""; position: absolute; left: 2.5vmin; bottom: 0; width: 4vmin; height: 2.2vmin; border-radius: 50% 50% .4vmin .4vmin; background: #8C8471; }
.camera { left: 33vmin; width: 9vmin; height: 5.6vmin; border-radius: .8vmin; background: linear-gradient(180deg, #2A2B30, #141518); }
.camera::before { content: ""; position: absolute; left: 3vmin; top: 1vmin; width: 3.6vmin; height: 3.6vmin; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #6FA3D9, #1B2A40 60%); box-shadow: 0 0 0 .5vmin #3C3D44; }
.plant-s { left: 46vmin; width: 7vmin; height: 9vmin; }
.plant-s::before { content: ""; position: absolute; left: 1vmin; right: 1vmin; bottom: 0; height: 4vmin; border-radius: .4vmin .4vmin 1.2vmin 1.2vmin; background: #C9A07A; }
.plant-s::after { content: ""; position: absolute; left: 50%; bottom: 3.6vmin; width: 7vmin; height: 6vmin; transform: translateX(-50%); background: radial-gradient(circle at 50% 70%, #4F8A3C 0 30%, transparent 31%), radial-gradient(circle at 25% 50%, #3F7A31 0 28%, transparent 29%), radial-gradient(circle at 75% 50%, #5B9A45 0 28%, transparent 29%), radial-gradient(circle at 50% 25%, #6DB053 0 26%, transparent 27%); }

/* coffee corner: cart + machine */
.cart { left: calc(100% + var(--bz) + 24vmin); top: calc(var(--deskTop) + 4vmin); width: 60vmin; height: 34vmin; }
.cart .top { position: absolute; left: 0; right: 0; top: 0; height: 2.6vmin; border-radius: .5vmin; background: linear-gradient(180deg, #9A7857, #5C4634); box-shadow: 0 1vmin 2vmin rgba(0,0,0,.5); }
.cart .mid { position: absolute; left: 1.6vmin; right: 1.6vmin; top: 16vmin; height: 2vmin; background: #5C4634; }
.cart .post { position: absolute; top: 2.6vmin; width: 1.8vmin; height: 29vmin; background: #2A2B31; }
.cart .post.l { left: 1.6vmin; } .cart .post.r { right: 1.6vmin; }
.cart .wheel { position: absolute; bottom: -2.4vmin; width: 4vmin; height: 4vmin; border-radius: 50%; background: radial-gradient(circle, #8C8471 0 30%, #1C1D20 32%); }
.cart .wheel.l { left: 1vmin; } .cart .wheel.r { right: 1vmin; }
.cart .cups2 { position: absolute; left: 5vmin; top: 10.4vmin; width: 20vmin; height: 5.6vmin; }
.cart .cups2 i { position: absolute; bottom: 0; width: 5vmin; height: 5.6vmin; background: #F7F4EE; border-radius: .3vmin .3vmin 1.4vmin 1.4vmin; }
.cart .cups2 i:nth-child(1) { left: 0; } .cart .cups2 i:nth-child(2) { left: 6vmin; } .cart .cups2 i:nth-child(3) { left: 12vmin; }
.cart .beans { position: absolute; right: 6vmin; top: 7vmin; width: 10vmin; height: 9vmin; border-radius: 1vmin 1vmin .5vmin .5vmin; background: #3A2415; }
.cart .beans::after { content: "YR"; position: absolute; left: 1.2vmin; right: 1.2vmin; top: 2.6vmin; height: 3.4vmin; background: #E9DCC4; font-family: var(--f-slab); font-weight: 700; font-size: 2vmin; text-align: center; line-height: 3.4vmin; color: #3A2415; }
.machine { left: calc(100% + var(--bz) + 26vmin); top: calc(var(--deskTop) + 4vmin - 36vmin); width: 44vmin; height: 36vmin; }
.grinder { left: calc(100% + var(--bz) + 72vmin); top: calc(var(--deskTop) + 4vmin - 22vmin); width: 9vmin; height: 22vmin; }
.grinder::before { content: ""; position: absolute; left: 1vmin; right: 1vmin; top: 0; height: 7vmin; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); border: .4vmin solid rgba(255,255,255,.4); border-radius: 1vmin 1vmin .4vmin .4vmin; box-sizing: border-box; }
.grinder::after { content: ""; position: absolute; left: 0; right: 0; top: 7vmin; bottom: 0; border-radius: .6vmin; background: linear-gradient(90deg, #15161A, #2E2F35 55%, #121316); }
.scale { left: calc(100% + var(--bz) + 25vmin); top: calc(var(--deskTop) + 4vmin - 2.6vmin); width: 9vmin; height: 2.6vmin; border-radius: .4vmin; background: #1C1D20; }
.scale::after { content: "18.0g"; position: absolute; right: .6vmin; top: .2vmin; font-family: var(--f-bios); font-size: 2vmin; line-height: 2.2vmin; color: #7CFC8A; }

/* floor: bike, backpack, plant */
.bike { left: calc(-1 * var(--bz) - 128vmin); top: 20vmin; width: 66vmin; height: 40vmin; }
.bike-hook { left: calc(-1 * var(--bz) - 128vmin + 24.5vmin); top: 30.5vmin; width: 2.6vmin; height: 2.6vmin; border-radius: 50%; background: #8C8471; box-shadow: inset 0 0 0 .6vmin #2A2B31, 0 .3vmin .6vmin rgba(0,0,0,.6); }
.bike-hook.h2 { left: calc(-1 * var(--bz) - 128vmin + 42vmin); }
.pack { left: calc(-1 * var(--bz) - 56vmin); top: calc(var(--fl) + 2vmin - 17vmin); width: 13vmin; height: 17vmin; border-radius: 3vmin 3vmin 1.2vmin 1.2vmin; background: linear-gradient(90deg, #B8502E, #E8713A 55%, #B04A2A); box-shadow: 0 1vmin 1.6vmin rgba(0,0,0,.5); }
.pack::before { content: ""; position: absolute; left: 2vmin; right: 2vmin; top: 7vmin; height: 6vmin; border-radius: 1vmin; background: #8E3A20; }
.pack::after { content: ""; position: absolute; left: 4.5vmin; top: -2.4vmin; width: 4vmin; height: 2.8vmin; border: .8vmin solid #2A2B31; border-bottom: 0; border-radius: 2vmin 2vmin 0 0; box-sizing: border-box; }
.boots { left: calc(-1 * var(--bz) - 42vmin); top: calc(var(--fl) + 2vmin - 7vmin); width: 14vmin; height: 7vmin; }
.boots i { position: absolute; bottom: 0; width: 6.4vmin; height: 7vmin; border-radius: 1.6vmin 1.2vmin .6vmin 2vmin; background: linear-gradient(180deg, #6B4A2E, #3E2A18); }
.boots i:nth-child(2) { left: 7vmin; }
.plant { left: calc(100% + var(--bz) - 22vmin); top: calc(var(--fl) + 6vmin - 54vmin); width: 24vmin; height: 54vmin; }

/* ===== front layer: things in front of the monitor (desk items, chair, Yoav) ===== */
.room-front { position: absolute; inset: 0; pointer-events: none; }
.room-front > * { position: absolute; }
.room-front > svg { display: block; }
.room-front .mug svg, .room-front .tablet svg { display: block; width: 100%; height: 100%; }
.keyboard { left: 50%; transform: translateX(-50%); top: calc(var(--deskTop) + 2.6vmin - 10vmin); width: 58vmin; height: 10vmin; }
.mousepad { left: 66%; top: calc(var(--deskTop) + 2.4vmin - 8vmin); width: 17vmin; height: 8vmin; border-radius: 1vmin; background: #23252A; box-shadow: 0 .6vmin 1.2vmin rgba(0,0,0,.4); }
.mouse { left: calc(66% + 5.5vmin); top: calc(var(--deskTop) + 1.4vmin - 7vmin); width: 6vmin; height: 7vmin; border-radius: 3vmin 3vmin 3.5vmin 3.5vmin; background: linear-gradient(90deg, #D7D2C8, #FAF8F3 45%, #CFCAC0); box-shadow: 0 1vmin 1.6vmin rgba(0,0,0,.45); }
.mouse::before { content: ""; position: absolute; left: 50%; top: 1vmin; width: .8vmin; height: 1.8vmin; transform: translateX(-50%); border-radius: .5vmin; background: #8E8A80; }
.mug { left: 15%; top: calc(var(--deskTop) + 2.6vmin - 12vmin); width: 13vmin; height: 12vmin; filter: drop-shadow(0 1vmin 1vmin rgba(0,0,0,.35)); }
.steam { position: absolute; bottom: 92%; width: 2vmin; height: 8vmin; border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.3), transparent 70%); animation: steam 3.6s ease-in-out infinite; animation-play-state: paused; }
.live .steam { animation-play-state: running; }
.steam:nth-of-type(1) { left: 3vmin; } .steam:nth-of-type(2) { left: 5.4vmin; animation-delay: 1.2s; } .steam:nth-of-type(3) { left: 7.8vmin; animation-delay: 2.4s; }
@keyframes steam { 0% { transform: translateY(1vmin) scaleX(1); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-5vmin) scaleX(2.4) skewX(12deg); opacity: 0; } }
.note-desk { left: 25%; top: calc(var(--deskTop) + .4vmin); width: 9vmin; height: 6.5vmin; background: #FFE27A; transform: rotate(6deg); box-shadow: 0 .5vmin 1vmin rgba(0,0,0,.35); font-family: var(--f-hand); font-size: 2vmin; color: var(--note-ink); padding: .7vmin; line-height: 1; }
.tablet { left: 84%; top: calc(var(--deskTop) + 2.4vmin - 12vmin); width: 17vmin; height: 12vmin; border-radius: .8vmin; background: #0E1116; border: .6vmin solid #26272D; box-shadow: 0 1vmin 1.6vmin rgba(0,0,0,.5); overflow: hidden; }
.ball-tube { left: 5%; top: calc(var(--deskTop) + 2.6vmin - 13vmin); width: 5.4vmin; height: 13vmin; border-radius: 2.7vmin 2.7vmin .8vmin .8vmin; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.5) 40%, rgba(255,255,255,.15)); border: .4vmin solid rgba(255,255,255,.35); overflow: hidden; }
.ball-tube i { position: absolute; left: .4vmin; width: 3.8vmin; height: 3.8vmin; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2FF7A, #BFD400 70%, #8FA000); }
.ball-tube i:nth-child(1) { bottom: .4vmin; } .ball-tube i:nth-child(2) { bottom: 4.3vmin; } .ball-tube i:nth-child(3) { bottom: 8.2vmin; }
.chair { left: calc(50% - 30vmin); top: calc(var(--fl) + 3vmin - 48vmin); width: 36vmin; height: 48vmin; filter: drop-shadow(0 1.6vmin 1.6vmin rgba(0,0,0,.5)); }
@media (max-width: 760px) { .window, .window-glow, .sill, .frame-2 { display: none; } }