/* Optional desk materials only. Every rule is contained by the desk experiment. */
.desk-stage .desk-tablet{position:absolute;left:0;top:0;overflow:visible;transform-origin:0 0;background:linear-gradient(135deg,#313333 0%,#171b1b 12%,#101414 82%,#252a28 100%);box-shadow:inset 0 0 0 calc(var(--desk-tablet-unit)*.038) #939990,inset 0 0 0 calc(var(--desk-tablet-unit)*.085) #343b36,0 calc(var(--desk-tablet-unit)*.15) calc(var(--desk-tablet-unit)*.12) #202b2038,calc(var(--desk-tablet-unit)*.20) calc(var(--desk-tablet-unit)*.46) calc(var(--desk-tablet-unit)*.74) #24311e24;pointer-events:none;contain:layout}
.desk-stage .desk-tablet::before{content:'';position:absolute;inset:calc(var(--desk-tablet-unit)*.11);border-radius:inherit;pointer-events:none;box-shadow:inset calc(var(--desk-tablet-unit)*.025) calc(var(--desk-tablet-unit)*.025) calc(var(--desk-tablet-unit)*.025) #e9eee11a}
.desk-stage .desk-tablet-screen{position:absolute;overflow:hidden;contain:layout paint;background:#f5f5f3}
.desk-stage .desk-tablet-camera{position:absolute;top:calc(var(--desk-tablet-unit)*.35);left:50%;width:calc(var(--desk-tablet-unit)*.23);height:calc(var(--desk-tablet-unit)*.23);margin-left:calc(var(--desk-tablet-unit)*-.115);border-radius:50%;background:radial-gradient(circle at 38% 32%,#38434d 0 12%,#1d2831 22%,#080c0f 46%,#202623 64%,#0c100d 72%);box-shadow:0 0 0 calc(var(--desk-tablet-unit)*.035) #38403880;pointer-events:none}
.desk-stage .desk-prop{position:absolute;left:0;top:0;display:block;overflow:hidden;transform-origin:0 0;pointer-events:none;contain:layout paint}
.desk-stage .desk-prop text{text-transform:none;user-select:none}
.desk-stage .desk-note{display:block;overflow:hidden;transform-origin:0 0;pointer-events:none;contain:layout paint}
.desk-stage .desk-note text{text-transform:none;user-select:none}

/* Desk mode owns a separate surface; legacy whiteboard/orbit styles stay intact. */
.desk-stage{position:fixed;inset:0;z-index:500;overflow:hidden;background:#f5f5f3;pointer-events:auto;contain:strict}
.desk-stage .desk-surface{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;will-change:transform}
.desk-stage .desk-surface *{will-change:auto!important}
.desk-stage .desk-window,.desk-stage .desk-tablet-screen{position:absolute;inset:0;overflow:hidden;contain:layout paint;background:#f5f5f3}
.desk-stage .desk-tablet-screen{inset:auto}
.desk-stage .desk-window>footer,.desk-stage .desk-tablet-screen>footer{display:flex!important}
.desk-stage .desk-page{background:transparent;box-shadow:none;outline:0;overflow:visible;contain:layout}
.desk-stage .desk-page-contact,.desk-stage .desk-page-about{border:0;border-radius:0}
.desk-stage .desk-static-page video{visibility:hidden!important}
.desk-stage .desk-static-page .board-video-poster{visibility:visible!important}
.desk-stage .board-rail{overflow:hidden;contain:paint;-webkit-overflow-scrolling:auto}
.desk-stage .desk-trail{z-index:1;contain:layout}
.desk-stage .desk-trail .board-video-poster{position:absolute;inset:0;opacity:1!important;visibility:visible!important}
.desk-stage .desk-trail .board-copy{overflow:visible}
.desk-stage .desk-portrait{background:#faf9f2;outline:1px solid #c9c5b94d;box-shadow:1px 2px 2px #3432291b;overflow:hidden}
.desk-stage .desk-portrait>img{display:block;width:100%;height:100%;object-fit:cover}
.desk-stage .desk-marker{overflow:visible;z-index:0}
.desk-stage .desk-marker path{fill:none;stroke:#284c91;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
/* Enlarge both steel wires and their shadows 1.5x about the fixed 9px anchor.
   This mode class applies to live About too, preventing a pin/clip endpoint pop. */
body.desk-transition-mode .board-pin{width:9px;height:9px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
body.desk-transition-mode .board-pin::before{content:'';box-sizing:border-box;position:absolute;left:-4.275px;top:-19.875px;width:17.55px;height:48.75px;border:2.25px solid #777e7a;border-radius:7.5px 7.5px 6px 6px;background:transparent;box-shadow:.75px 1.05px .75px #2d36322e,inset .75px 0 #f6f7ec;transform:rotate(12deg)}
body.desk-transition-mode .board-pin::after{content:'';box-sizing:border-box;position:absolute;left:.405px;top:-14.025px;width:8.19px;height:35.1px;border:1.95px solid #aeb4ad;border-top-color:transparent;border-radius:0 0 4.5px 4.5px;box-shadow:.6px 0 #555f59;transform:rotate(12deg);background:none}
/* Decoded photo of a real steel paperclip. Its1024x1536 canvas has an upright
   409x1495px metal crop: fit that metal to the retained48.75px anchor frame.
   Auto width preserves aspect; transparent side padding is cropped equally. */
body.desk-transition-mode.board-paperclip-photo .board-pin::before{border:0;border-radius:0;background:transparent url('media/about-paperclip-photo-v1.webp') center/auto 102.74% no-repeat;box-shadow:none;filter:drop-shadow(.6px .9px .45px #28302942)}
body.desk-transition-mode.board-paperclip-photo .board-pin::after{display:none}

.desk-stage .desk-contact-window,.desk-stage .desk-contact-window #contact-page,.desk-stage .desk-contact-window .contact-layout.contact-pass-layout{background:transparent}