/* The pretend desktop behind the live island on kirari.parley.live. The island's own looks come
   from the app's style sheet. */
#desk { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(1000px 560px at 22% 8%, #3a4560 0%, rgba(58,69,96,0) 62%), radial-gradient(900px 560px at 88% 96%, #5a4a3c 0%, rgba(90,74,60,0) 62%), #2a2d36; }
.d-browser { position: absolute; left: 0; top: 0; right: 0; bottom: 46px; background: #f6f7f9; overflow: hidden; }
.d-tabs { position: absolute; left: 0; top: 0; right: 0; height: 40px; background: #dde1e8; display: flex; align-items: flex-end; gap: 4px; padding: 0 12px; }
.d-tab { width: 196px; height: 32px; border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 500 12.5px 'Inter', system-ui, sans-serif; color: #4b5261; white-space: nowrap; overflow: hidden; }
.d-tab i { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.d-tab.on { background: #f6f7f9; color: #1b1f29; }
.d-bar { position: absolute; left: 0; top: 40px; right: 0; height: 42px; background: #f6f7f9; border-bottom: 1px solid #e3e6ec; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.d-bar b { width: 24px; height: 24px; border-radius: 50%; background: #e7eaf0; flex: none; }
.d-url { flex: 1; height: 28px; border-radius: 14px; background: #e9ecf1; display: flex; align-items: center; padding: 0 14px; font: 400 12.5px 'Inter', system-ui, sans-serif; color: #5a6170; }
.d-url u { text-decoration: none; color: #1b1f29; }
.d-page { position: absolute; left: 0; top: 83px; right: 0; bottom: 0; padding: 34px 96px; }
.d-page h4 { margin: 0 0 6px; font: 600 26px 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: #171a22; }
.d-page p { margin: 0 0 22px; font: 400 14px 'Inter', system-ui, sans-serif; color: #6a7180; }
.d-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.d-tile { height: 150px; border-radius: 16px; position: relative; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(20,24,40,.5); }
.d-tile::after { content: ''; position: absolute; left: 14px; bottom: 12px; width: 46%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.55); }
.t1 { background: linear-gradient(160deg, #2b3a67, #a8616f 55%, #f0a35e); } .t2 { background: linear-gradient(200deg, #0f2b3a, #1f7a8c 60%, #bfe9e1); }
.t3 { background: linear-gradient(140deg, #3a2d58, #8a63c7 60%, #f2c6e8); } .t4 { background: linear-gradient(170deg, #23351f, #6c9a4a 60%, #e8f0b4); }
.t5 { background: linear-gradient(210deg, #402418, #c0683a 60%, #f6d59a); } .t6 { background: linear-gradient(150deg, #1b2440, #4a6fd0 60%, #cfe0ff); }
.t7 { background: linear-gradient(190deg, #3a1f2e, #c0507a 60%, #ffd0dc); } .t8 { background: linear-gradient(130deg, #20302f, #3f9a8d 60%, #d8f4e6); }
.d-task { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: rgba(24,26,32,.94); display: flex; align-items: center; justify-content: center; gap: 10px; }
.d-task i { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.14); }
.d-task time { position: absolute; right: 18px; font: 500 12.5px 'Inter', system-ui, sans-serif; color: rgba(240,242,248,.86); }
.t-a { background: #d1fe17; } .t-b { background: #7c9cff; } .t-c { background: #ff9d6c; } .t-d { background: #6fd3b0; } .t-e { background: #c59bff; }