:root{color-scheme:dark;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#1b1b1a;overflow:hidden}button,a,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:5px}[hidden]{display:none!important}#desk,#table{position:absolute;inset:0;overflow:hidden}#table{background:#252521 url('/desk/rectified/mat.png') center / cover no-repeat}#scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;isolation:isolate;touch-action:pan-x pan-y}
.sticky-surface{display:block;width:100%;height:100%;background:url('/desk/contact-note.jpg') 46.58% 37.64% / 152.18% 265.97%;clip-path:polygon(2.1% .4%,99.6% 3.4%,98.8% 98.7%,.4% 99.5%)}.contact-fallback{position:fixed;z-index:100;left:clamp(24px,10.8vw,180px);top:clamp(32px,9.2vh,87px);width:clamp(160px,16.2vw,270px);aspect-ratio:757/770;filter:var(--desk-rest-shadow)}.contact-fallback a{display:block;width:100%;height:100%;color:inherit}.piece.contact-note{cursor:grab}.piece.contact-note.dragging{cursor:grabbing}.piece.contact-note:focus-visible:after{border-color:#fbefab}

.enter{position:fixed;z-index:110;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));min-height:44px;border:1px solid #73675b;border-radius:4px;padding:11px 18px;color:#32291f;background:#f4ead7;box-shadow:0 3px 12px #0005;font-size:14px}.enter span{padding-left:12px}.enter:disabled{cursor:progress}
.piece{position:absolute;left:0;top:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline:0;transform-origin:center;will-change:transform;--lift:0;--tilt:0;--tilt-x:0;filter:var(--desk-rest-shadow)}.piece .surface{display:block;width:100%;height:100%;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt)) translateZ(calc(var(--lift)*12px));transition:filter .12s,transform .13s;pointer-events:none}.piece img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}.piece.photo .surface{padding:18px;background:#f0e9dc;box-shadow:inset 0 0 1px #9c8e74}.piece.photo img{object-fit:cover}.piece.notebook .surface{clip-path:polygon(13.2% 1.5%,17% 1.3%,49.9% 9.5%,52.5% 10.4%,88% 9.1%,90.8% 12.9%,94.9% 96.1%,92.8% 98.4%,8% 98%,6.5% 95%,11% 6%)}.piece.notebook{filter:var(--desk-rest-shadow)}.piece.patch{filter:var(--desk-rest-shadow)}.piece.paper .surface{background:#ecddc2 url('/desk/paper.webp') center/100% 100%;color:#302b23;padding:75px 28px 18px;display:flex;align-items:flex-end;text-align:left;font:600 31px/1.17 Georgia,serif;box-shadow:0 1px 2px #9c8e74}.piece:focus-visible{outline:3px solid #fff;outline-offset:7px}.piece.dragging{cursor:grabbing;filter:var(--desk-lift-shadow)}.piece.dragging .surface{transition:none}.piece.dragging:after{opacity:0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){.contact-fallback{left:20px;top:30px;width:154px}}
@media(prefers-reduced-motion:reduce){.piece .surface{transition:none!important;transform:none!important}.piece.dragging{filter:var(--desk-rest-shadow)}}
/* Only the actual notebook silhouette catches a pointer; its empty corners let
   the photograph below receive the grab. The parent still casts the shadow. */
.piece.notebook{pointer-events:none}.piece.notebook .surface{pointer-events:auto}.piece.notebook img{pointer-events:none}

@media(max-width:600px){.piece.paper .surface{font-size:28px;padding:60px 20px 16px}}

.piece.original-layer{pointer-events:none}.piece.original-layer .surface{pointer-events:auto;background-repeat:no-repeat}.piece.contact-note{pointer-events:none}.piece.contact-note .surface{pointer-events:auto;clip-path:polygon(2.1% .4%,99.6% 3.4%,98.8% 98.7%,.4% 99.5%)}

/* One light source, one contact treatment, and one lifted treatment for every item. */
@property --ring-sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
.marker-ring{opacity:.64;filter:saturate(.6);position:absolute;left:0;top:0;pointer-events:none;background-image:url('/desk/marker-rings.png');background-repeat:no-repeat;mask-image:conic-gradient(from 180deg,#000 var(--ring-sweep),transparent 0);transform-origin:center}
.piece:focus-visible{outline:none}
.piece,.contact-fallback{--desk-rest-shadow:drop-shadow(var(--shadow-contact-x,1px) var(--shadow-contact-y,2px) 1px rgb(15 12 8 / .20)) drop-shadow(var(--shadow-cast-x,2px) var(--shadow-cast-y,4px) 3px rgb(15 12 8 / .24));--desk-lift-shadow:drop-shadow(var(--shadow-contact-x,1px) var(--shadow-contact-y,2px) 2px rgb(15 12 8 / .12)) drop-shadow(var(--shadow-lift-x,8px) var(--shadow-lift-y,16px) 10px rgb(15 12 8 / .26))}

.load-error{position:fixed;z-index:120;bottom:24px;left:24px;right:24px;margin:0;padding:16px;color:#f5ecd9;background:#1b1b1ae6;line-height:1.5}.load-error a{color:inherit;text-underline-offset:3px}
/* Camera correction acts on the original photographic plane, independently of
   the draggable object's natural two-dimensional desk rotation. */
.photographic-plane{display:block;position:absolute;left:0;top:0;transform-origin:0 0;background-size:100% 100%;background-repeat:no-repeat;pointer-events:auto}
.piece.rectified .surface{position:relative;clip-path:none;pointer-events:none}
.piece.rectified{pointer-events:none}
.contact-fallback{aspect-ratio:1}
.contact-fallback .sticky-surface{position:relative;background:none;clip-path:none;pointer-events:none}

.contact-fallback .sticky-surface{background:url('/desk/rectified/contact.png') center/100% 100% no-repeat}.contact-fallback{aspect-ratio:1476/1494}

/* A narrow paper edge around the untouched photograph. Contain preserves the
   complete frame and its aspect ratio, including in existing saved layouts. */
#object-mountain .photographic-plane {
  box-sizing: border-box;
  border: 6px solid #f5f2ea;
  background-color: #f5f2ea;
  background-size: contain;
  background-position: center;
  background-origin: padding-box;
  background-repeat: no-repeat;
}

.contact-copy-note{position:absolute;left:0;top:0;z-index:80;transform-origin:center;color-scheme:light;filter:drop-shadow(1px 2px 1px #0f0c0833) drop-shadow(3px 5px 4px #0f0c0845)}
.contact-copy-paper{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:grab;touch-action:none;user-select:none;outline:none}
.contact-copy-photo{display:block;width:100%;height:100%;background-repeat:no-repeat;clip-path:polygon(.5% .3%,99.5% 0,100% 99.5%,0 100%);filter:none}
.contact-copy-note.dragging{filter:drop-shadow(8px 14px 9px #0f0c0850)}.contact-copy-note.dragging .contact-copy-paper{cursor:grabbing}
.contact-copy-close{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:44px;height:44px;padding:9px;border:0;border-radius:0;background:none;color:#302d25;cursor:pointer;transition:transform 120ms ease}
.contact-copy-close svg{display:block;width:26px;height:26px}.contact-copy-close:hover{transform:rotate(-6deg) scale(1.08)}.contact-copy-close:active{transform:scale(.92)}
.contact-copy-paper{animation:contact-paper-in 220ms cubic-bezier(.2,.9,.3,1.15) both}
.contact-copy-note.closing{animation:contact-paper-out 140ms ease-in both;pointer-events:none}
@keyframes contact-paper-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes contact-paper-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.contact-copy-paper,.contact-copy-note.closing{animation:none}.contact-copy-close{transition:none}}
.contact-copy-note button:focus-visible{outline:2px solid #f7f0de;outline-offset:4px}
.contact-copy-manual{padding:24px;background:#f2eadb;color:#26241d;font:16px/1.5 system-ui;height:100%}.contact-copy-manual label{display:block;margin-bottom:10px}
.contact-copy-manual input{display:block;width:100%;font:inherit;padding:10px;background:#fff;color:#26241d;border:1px solid #777}.contact-copy-retry{margin-top:12px;padding:10px 14px}
.contact-copy-note [hidden]{display:none!important}
#scene.contact-selected #selection-ring{display:none!important}
#object-contact:focus-visible{outline:2px solid #f5ecce;outline-offset:5px}