/* A walk up to the desk, not a card placed over the workroom. */
.focus-detail { position:fixed; inset:0; z-index:80; color:#43301e; isolation:isolate; }
.focus-detail[hidden], .focus-detail [hidden] { display:none!important; }
.focus-desk-scene { position:absolute; inset:0; overflow:hidden; outline:0; background:transparent; }
.desk-room-plate { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; user-select:none; }
.desk-scroll { position:absolute; inset:0; overflow:hidden; outline:0; overscroll-behavior:contain; }
.focus-desk { position:relative; min-height:100svh; width:100%; isolation:isolate; }
.desk-exit { position:fixed; top:max(22px,env(safe-area-inset-top)); left:max(30px,env(safe-area-inset-left)); z-index:40; border:0; background:none; padding:10px 8px; color:#45301f; font-family:'Kaiti SC','STKaiti','KaiTi',serif; font-size:20px; letter-spacing:.06em; text-shadow:0 1px 3px #fff8; }
.desk-exit span { font-family:Arial,sans-serif; margin-right:6px; }
.desk-exit:hover { color:#21170f; }
.desk-ip { position:absolute; left:-2%; top:26%; width:32%; padding:0; border:0; background:none; z-index:5; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.desk-ip img { display:block; width:100%; height:auto; user-select:none; pointer-events:none; filter:drop-shadow(0 12px 9px #6c3e2130); }
.desk-note { position:absolute; left:8%; top:65%; z-index:8; margin:0; padding:16px 24px; background:#fff0cc; color:#574128; box-shadow:0 7px 12px #69432235; font:20px/1.4 'Kaiti SC','STKaiti','KaiTi',serif; transform:rotate(-9deg); animation:desk-note-arrive 550ms ease both; pointer-events:none; }
.desk-empty-envelope { position:absolute; left:16%; top:66%; width:min(20vw,360px); height:auto; transform:rotate(-23deg); filter:drop-shadow(3px 8px 5px #61371b46); pointer-events:none; }
.desk-letter { position:absolute; left:28.5%; top:40%; width:clamp(390px,31vw,560px); min-height:0; padding:clamp(24px,2.4vw,34px) clamp(26px,3vw,40px) clamp(22px,2vw,30px); background-color:#fff3dd; background-image:linear-gradient(130deg,#ffffff1a,transparent 52%,#b28b5112),url('/assets/focus-paper-texture.png'); background-size:cover; box-shadow:8px 15px 12px #6d401b42,1px 2px 3px #5a361b50,inset 0 0 32px #d7b78020; border:1px solid #fff8e9bf; border-radius:1px 2px 14px 2px; --pickup-perspective:900px; --pickup-tilt:30deg; --pickup-angle:-5deg; transform:perspective(var(--pickup-perspective)) rotateX(var(--pickup-tilt)) rotateZ(var(--pickup-angle)); transform-origin:50% 50%; z-index:6; }
.desk-letter { cursor:pointer; touch-action:pan-y; -webkit-user-select:text; user-select:text; transition:transform 650ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms ease,filter 350ms ease; -webkit-tap-highlight-color:transparent; }
.desk-letter:after { content:''; position:absolute; right:0; bottom:0; width:28px; height:24px; background:linear-gradient(135deg,transparent 48%,#dbc39c50 50%,#fff4db 80%); border-radius:0 0 13px 0; pointer-events:none; }
.desk-letter-heading { display:flex; flex-wrap:wrap; align-items:center; gap:15px; border-bottom:2px solid #d5a754; padding-bottom:9px; width:fit-content; max-width:100%; }
.desk-letter h1 { margin:0; font:400 clamp(25px,2vw,31px)/1.3 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.15em; }
.desk-letter-heading>span { font-size:11px; color:#705a39; white-space:nowrap; letter-spacing:.05em; }
.desk-letter h2 { margin:23px 0 22px; font:400 clamp(23px,1.8vw,28px)/1.55 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.03em; }
.desk-letter p { margin:0; }
.desk-letter-lead { font:400 clamp(17px,1.22vw,19px)/1.9 'Kaiti SC','STKaiti','KaiTi',serif; }
.desk-letter-scenes { margin:13px 0!important; font-size:12px; line-height:1.7; color:#6e5639; letter-spacing:.06em; }
.desk-letter-body { font-size:clamp(14px,1.06vw,16px); line-height:1.9; color:#5d4930; }
.desk-letter-sign { margin-top:18px!important; text-align:right; font:400 clamp(17px,1.3vw,20px)/1.6 'Kaiti SC','STKaiti','KaiTi',serif; }
.desk-print-slot { position:absolute; top:39%; width:clamp(170px,min(16vw,calc((100svh - 360px)*.38)),250px); aspect-ratio:.404; z-index:10; }
.desk-print-home { left:60%; --print-angle:-8deg; }
.desk-print-timer { left:79%; top:41%; --print-angle:-12deg; }
.desk-print { display:block; position:relative; width:100%; height:auto; padding:11px 11px 0; border:1px solid #fff9edbf; border-radius:1px; background:#fcf3e5; color:#44301d; text-align:center; box-shadow:5px 12px 9px #5d351b4d,0 1px 2px #5d351b60; --pickup-perspective:1200px; --pickup-tilt:32deg; --pickup-angle:var(--print-angle); transform:perspective(var(--pickup-perspective)) rotateX(var(--pickup-tilt)) rotateZ(var(--pickup-angle)); transform-origin:center; transition:transform 650ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms ease,filter 350ms ease; touch-action:pan-y; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.desk-print img { display:block; width:100%; height:auto; pointer-events:none; user-select:none; }
.desk-print-caption { display:block; padding:14px 0 17px; font:400 clamp(17px,1.35vw,24px)/1.3 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.08em; }
.desk-photo-hint { position:absolute; right:5%; bottom:20px; margin:0; font:20px/1.2 'Kaiti SC','STKaiti','KaiTi',serif; transform:rotate(-6deg); color:#4c321c; pointer-events:none; }
.desk-photo-hint span { display:inline-block; padding-left:5px; font-size:29px; line-height:1; }
.desk-return { display:none; }
.desk-photo-controls { position:fixed; z-index:70; left:50%; bottom:max(17px,env(safe-area-inset-bottom)); transform:translateX(-50%); text-align:center; color:#382819; width:max-content; max-width:95vw; }
.desk-photo-controls p { margin:0 0 9px; font-size:12px; color:#3f2e1c; text-shadow:0 1px 4px #fff9ec; }
.desk-photo-controls>div { display:flex; align-items:center; justify-content:center; gap:10px; }
.desk-photo-controls button { min-height:44px; min-width:44px; border:1px solid #fff8e0b3; border-radius:50%; background:#fff0d5db; color:#48331f; box-shadow:0 4px 14px #613e2130; font-size:21px; }
#focus-zoom-close { padding:9px 22px; border-radius:25px; font:17px/1.4 'Kaiti SC','STKaiti','KaiTi',serif; }
.desk-print-slot.has-lifted-print { z-index:60; }
.photo-lifted .desk-print-slot:has(.is-lifted) { z-index:65; }
.desk-print.is-lifted { z-index:60; transform:translate3d(var(--lift-x),var(--lift-y),0) perspective(1200px) rotateX(0deg) rotateZ(var(--lift-rotate,0deg)) scale(var(--lift-scale)); box-shadow:0 24px 55px #41230d73,0 2px 5px #3c281940; cursor:zoom-out; touch-action:none; }
.object-lifted .desk-room-plate { filter:brightness(.88); transition:filter 500ms ease; }
.object-lifted .desk-letter:not(.is-lifted) { filter:brightness(.88); }
.object-lifted .desk-ip,.object-lifted .desk-empty-envelope,.object-lifted .desk-photo-hint,.object-lifted .desk-note { filter:brightness(.88); transition:filter 500ms ease; }
.object-lifted .desk-print:not(.is-lifted) { filter:brightness(.88); }
.object-lifted .desk-scroll { overflow:hidden!important; }
.is-reduced-motion .desk-print.is-lifted { position:fixed; left:var(--lift-left); top:var(--lift-top); width:var(--lift-width); height:var(--lift-height); transform:none!important; transition:none!important; animation:none!important; }
.is-reduced-motion .desk-print.is-lifted { display:flex; flex-direction:column; }
.is-reduced-motion .desk-print.is-lifted img { flex:1; min-height:0; width:100%; object-fit:contain; }
.is-reduced-motion .desk-print.is-lifted .desk-print-caption { flex-shrink:0; }
.focus-detail button:focus-visible,.desk-letter:focus-visible { outline:2px solid #6c7151; outline-offset:6px; }
.focus-detail .desk-exit:focus-visible { outline:none; filter:brightness(.8); text-shadow:0 1px 3px #fff8,0 0 6px #fff9; }
body.focus-detail-open .site-header,body.focus-detail-open .explore,body.focus-detail-open .signature,body.focus-detail-open .room-tools { opacity:0!important; visibility:hidden; pointer-events:none!important; }
body.focus-detail-open .room { pointer-events:none; }
/* The old room approaches the tabletop while its independently layered close view settles in. */
body.focus-detail-open .room { animation:room-walk-in 1050ms cubic-bezier(.2,.65,.25,1) both; transform-origin:45% 65%; }
.focus-detail.is-open .desk-room-plate { animation:desk-room-arrive 1050ms cubic-bezier(.2,.65,.25,1) both; }
.focus-detail.is-open .focus-desk { animation:desk-content-arrive 1050ms cubic-bezier(.2,.65,.25,1) both; }
.focus-detail.is-open .desk-exit { animation:desk-ui-arrive 1200ms ease both; }
@keyframes room-walk-in { from { transform:scale(1); } to { transform:scale(1.28); } }
@keyframes desk-room-arrive { 0% { opacity:0; transform:scale(.86) translateY(4%); } 24% { opacity:.25; } 100% { opacity:1; transform:none; } }
@keyframes desk-content-arrive { 0%,18% { opacity:0; transform:scale(.86) translateY(5%); } 100% { opacity:1; transform:none; } }
@keyframes desk-ui-arrive { 0%,60% { opacity:0; } 100% { opacity:1; } }
@keyframes desk-note-arrive { from { opacity:0; transform:translateY(-12px) rotate(-13deg); } to { opacity:1; transform:translateY(0) rotate(-9deg); } }
@media(min-width:851px) and (max-height:760px) {
 .desk-ip { top:23%; width:30%; }
 .desk-letter { top:37%; padding:22px 28px; width:32%; }
 .desk-letter h1 { font-size:25px; }
 .desk-letter h2 { margin:13px 0; font-size:23px; line-height:1.45; }
 .desk-letter-lead { font-size:16px; line-height:1.7; }
 .desk-letter-scenes { margin:8px 0!important; font-size:11px; }
 .desk-letter-body { font-size:13px; line-height:1.75; }
 .desk-letter-sign { margin-top:10px!important; font-size:17px; }
 .desk-print-slot { width:min(15vw,calc((100svh - 225px)/2.1)); top:35%; }
 .desk-print-timer { top:37%; }
 .desk-print-caption { padding:10px 0 13px; font-size:17px; }
 .desk-photo-hint { font-size:18px; bottom:1%; }
}
@media(max-width:1100px) and (min-width:851px) {
 .desk-letter { left:25%; width:35%; padding-left:25px; padding-right:25px; }
 .desk-letter h2 { font-size:24px; }
 .desk-print-home { left:61%; }
 .desk-print-timer { left:80%; }
 .desk-print-slot { width:17%; }
}
@media(max-width:850px) {
 .desk-room-plate { top:-48%; height:160%; object-position:48% center; }
 .desk-scroll { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
 .focus-desk { min-height:1250px; padding-top:1px; }
 .desk-exit { top:max(12px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); font-size:18px; background:#f7e5c385; border-radius:25px; backdrop-filter:blur(6px); padding:8px 14px; }
 .desk-ip { left:4%; top:90px; width:230px; max-width:58%; }
 .desk-empty-envelope { left:5%; top:570px; width:49%; }
 .desk-letter { position:relative; left:auto; top:auto; width:min(450px,83%); min-height:0; margin:260px auto 0; padding:30px 30px 28px; --pickup-perspective:1300px; --pickup-tilt:5deg; --pickup-angle:-3deg; }
 .desk-letter h1 { font-size:28px; }
 .desk-letter h2 { font-size:27px; margin:18px 0; }
 .desk-letter-lead { font-size:18px; line-height:1.8; }
 .desk-letter-body { font-size:15px; }
 .desk-letter-scenes { font-size:12px; margin:11px 0!important; }
 .desk-letter-sign { font-size:20px; margin-top:17px!important; }
 .desk-note { top:217px; left:39%; font-size:16px; padding:13px 16px; }
 .desk-print-slot { top:810px; width:36%; max-width:220px; }
 .desk-print-home { left:9%; --print-angle:-6deg; }
 .desk-print-timer { left:55%; top:830px; --print-angle:6deg; }
 .desk-print { padding:8px 8px 0; --pickup-perspective:1100px; --pickup-tilt:15deg; }
 .desk-print-caption { font-size:17px; padding:12px 0 15px; }
 .desk-photo-hint { top:755px; bottom:auto; right:10%; font-size:19px; }
 .desk-return { display:block; position:absolute; top:1210px; left:50%; transform:translateX(-50%); border:0; background:#fff1d49c; padding:10px 18px; border-radius:24px; color:#4b321d; font:18px/1.4 'Kaiti SC','STKaiti','KaiTi',serif; }
 .desk-photo-controls { bottom:max(14px,env(safe-area-inset-bottom)); }
 .object-lifted .desk-exit,.object-lifted .desk-return { opacity:0!important; visibility:hidden; }
 .desk-print-slot.has-lifted-print { z-index:60; }
.photo-lifted .desk-print-slot:has(.is-lifted) { z-index:65; }
}
@media(max-width:560px) {
 .focus-desk { min-height:1260px; }
 .desk-room-plate { object-position:51% center; }
 .desk-ip { top:130px; left:2%; width:240px; max-width:65%; }
 .desk-letter { width:85%; margin-top:310px; padding:27px 24px 25px; }
 .desk-letter h1 { font-size:26px; }
 .desk-letter h2 { font-size:24px; line-height:1.6; }
 .desk-letter-lead { font-size:17px; }
 .desk-letter-body { font-size:14px; line-height:1.9; }
 .desk-letter-scenes { font-size:11px; letter-spacing:.02em; }
 .desk-letter-sign { font-size:18px; }
 .desk-empty-envelope { top:620px; }
 .desk-print-slot { top:820px; width:37%; }
 .desk-print-timer { top:840px; }
 .desk-print-home { left:8%; }
 .desk-print-timer { left:54%; }
 .desk-print-caption { font-size:15px; padding:10px 0 13px; }
 .desk-photo-hint { top:771px; right:10%; font-size:18px; }
 .desk-return { top:1190px; font-size:17px; }
 .desk-note { top:253px; left:43%; font-size:14px; padding:10px 12px; }
}
@media(prefers-reduced-motion:reduce) {
 .focus-detail *,body.focus-detail-open .room { animation:none!important; transition:none!important; }
 .focus-detail.is-open .desk-room-plate,.focus-detail.is-open .focus-desk { transform:none!important; }
}

body.focus-detail-returning .room { animation:room-walk-out 650ms cubic-bezier(.2,.65,.25,1) both; transform-origin:45% 65%; }
@keyframes room-walk-out { from { transform:scale(1.28); } to { transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { body.focus-detail-returning .room { animation:none!important; } }

/* The actual article becomes the held paper. No detached surface or duplicate reading copy. */
.desk-letter.is-lifted { z-index:65; transform:translate3d(var(--lift-x),var(--lift-y),0) perspective(1200px) rotateX(0deg) rotateZ(var(--lift-rotate,0deg)) scale(var(--lift-scale)); box-shadow:0 24px 55px #41230d73,0 2px 5px #3c281940; cursor:text; touch-action:pinch-zoom; -webkit-user-select:text; user-select:text; }
.desk-letter.is-returning { z-index:60; }
.desk-letter.is-lifted * { -webkit-user-select:text; user-select:text; }
.is-reduced-motion .desk-letter.is-lifted { transition:none!important; animation:none!important; }
@media(max-width:850px) { .desk-letter.is-reading-letter .desk-letter-body { font-size:16px; } }
.desk-print.is-panning,.desk-letter.is-panning { transition:none!important; }
.photo-scrollable .desk-photo-controls p:after,.letter-scrollable .desk-photo-controls p:after { content:" · 上下滑动查看"; }

/* One pickup affordance for both kinds of paper; resting geometry stays breakpoint-specific. */
@media (hover:hover) and (pointer:fine) {
 .focus-detail:not(.object-lifted):not(.is-direct-input) :is(.desk-letter,.desk-print):not(.is-lifted):not(.is-returning):not([inert]):hover {
  box-shadow:6px 20px 18px #5d351b52,0 1px 2px #5d351b4d;
 }
}
.focus-detail:not(.object-lifted) :is(.desk-letter,.desk-print):not(.is-lifted):not(.is-returning):not([inert]):focus-visible {
 box-shadow:6px 20px 18px #5d351b52,0 1px 2px #5d351b4d;
}
@media (prefers-reduced-motion:no-preference) {
 .focus-detail:not(.object-lifted) :is(.desk-letter,.desk-print):not(.is-lifted):not(.is-returning):not([inert]):focus-visible {
  transform:perspective(var(--pickup-perspective)) translateY(-6px) rotateX(calc(var(--pickup-tilt) - 3deg)) rotateZ(var(--pickup-angle));
 }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .focus-detail:not(.object-lifted):not(.is-direct-input) :is(.desk-letter,.desk-print):not(.is-lifted):not(.is-returning):not([inert]):hover {
  transform:perspective(var(--pickup-perspective)) translateY(-6px) rotateX(calc(var(--pickup-tilt) - 3deg)) rotateZ(var(--pickup-angle));
 }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce) {
 .focus-detail:not(.object-lifted):not(.is-direct-input) :is(.desk-letter,.desk-print):not(.is-lifted):not(.is-returning):not([inert]):hover {
  outline:2px solid #6c7151; outline-offset:6px;
 }
}