#contact-dialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#443d34;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
#contact-dialog::backdrop{background:transparent}
.contact-shade{position:absolute;inset:0;background:rgba(24,21,16,.08);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:0;pointer-events:none}
.contact-active #room-shortcuts,.contact-active #interaction-exit{visibility:hidden}
#contact-dialog button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#contact-dialog button:focus-visible{outline:1px solid #aa9676;outline-offset:5px}
#contact-dialog button:disabled{cursor:default}
#contact-dialog .contact-close{position:absolute;right:24px;top:22px;width:44px;height:44px;padding:10px;color:#fff8eb;background:transparent;border:0;z-index:10;filter:drop-shadow(0 1px 2px #0008)}
.contact-close svg{width:24px;height:24px}
.contact-flight{position:absolute;width:min(480px,84vw);height:470px;left:50%;top:50%;margin-left:calc(min(480px,84vw) / -2);margin-top:-235px;perspective:1400px;transform-origin:50% 50%}
.contact-envelope{position:absolute;left:6%;top:105px;width:88%;aspect-ratio:1.65;isolation:isolate;filter:drop-shadow(0 9px 12px #1c160927)}
.contact-envelope-back,.contact-envelope-front{position:absolute;inset:0;border-radius:2px;background:#e9e4d7;box-shadow:0 2px 0 #cdc4b3,0 3px 0 #e7e0d2,inset 0 0 0 1px #cabc9e38}
.contact-envelope-front{z-index:3;background:linear-gradient(31deg,transparent 49.8%,#cbbb9b45 50%,transparent 50.4%) left/50% 100% no-repeat,linear-gradient(-31deg,transparent 49.8%,#cbbb9b45 50%,transparent 50.4%) right/50% 100% no-repeat,#f1ede2;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%)}
.contact-flap{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,#f6f2e9,#eae5d9);clip-path:polygon(0 0,100% 0,51% 58%,49% 58%);transform-origin:50% 0;backface-visibility:visible}
#contact-dialog .contact-open{position:absolute;inset:0;z-index:5;width:100%;padding-top:26%;border:0;border-radius:2px;background:transparent;color:#675b49;font-size:16px;font-weight:400;letter-spacing:.16em}
.contact-open span{display:block}
#contact-dialog .contact-paper{box-sizing:border-box;position:absolute;top:0;left:0;z-index:6;width:100%;height:410px;padding:39px 42px;background:#f5f2e9;border-radius:2px;opacity:0;transform:translate3d(0,100px,0) scale(1);box-shadow:0 1px 0 #cec5b5,0 3px 0 #ebe5d8,0 13px 25px #21190d24;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
.contact-paper::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238a806e' filter='url(%23n)' opacity='.25' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#contact-dialog .contact-paper h1{font-family:inherit;font-weight:500;font-size:34px;letter-spacing:.08em;line-height:1.25;margin:0;color:#413a30}
#contact-dialog .contact-name{font-size:13px;line-height:1.6;letter-spacing:.16em;color:#897b66;margin:10px 0 0}
#contact-dialog .contact-details{margin-top:33px;display:grid;gap:26px}
.contact-details>div{position:relative}
#contact-dialog .contact-details p{font:10px/1.2 Arial,sans-serif;letter-spacing:.15em;color:#918169;margin:0 0 9px}
#contact-dialog .contact-value{display:block;font-family:Arial,'Helvetica Neue',sans-serif;font-size:22px;line-height:1.25;font-weight:400;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;user-select:text}
#contact-dialog [data-copy]{position:absolute;bottom:0;right:0;background:transparent;border:0;border-radius:0;box-shadow:none;padding:6px 0 5px 10px;color:#8a785b;font-size:11px;line-height:1.25;letter-spacing:.04em;min-width:57px;text-align:right}
#contact-dialog [data-copy]:hover{color:#453929}
#contact-dialog .contact-paper footer{margin-top:34px;color:#a0937f;font-size:12px;line-height:1.6;letter-spacing:.04em;font-style:normal}
.contact-copy-status{position:absolute;bottom:13px;left:42px;font-size:10px;color:#8a785b}
@media(max-width:600px){.contact-flight{width:86vw;margin-left:-43vw;height:460px;margin-top:-230px}.contact-envelope{top:135px;left:3%;width:94%}#contact-dialog .contact-paper{height:390px;padding:32px 27px}#contact-dialog .contact-paper h1{font-size:30px}#contact-dialog .contact-details{margin-top:30px;gap:25px}#contact-dialog .contact-value{font-size:20px}#contact-dialog [data-copy]{position:static;display:block;text-align:left;padding:7px 0 0;font-size:10px;min-height:27px}#contact-dialog .contact-paper footer{margin-top:25px;font-size:11px}.contact-copy-status{left:27px;bottom:10px}#contact-dialog .contact-open{font-size:14px}#contact-dialog .contact-close{right:12px;top:10px}}
@media(max-height:560px){.contact-flight{zoom:.8}}
.contact-physical-flight{position:absolute;inset:0;z-index:2;pointer-events:none}
.contact-flight{z-index:3}
#contact-dialog .contact-paper{height:360px;padding:42px;background:radial-gradient(ellipse at 45% 38%,#f5f0e3 20%,#eee6d3 100%);box-shadow:0 1px 0 #cfc1a8,0 3px 0 #ebe1cc,0 12px 22px #21190d24}
.contact-paper::before{opacity:.25}
#contact-dialog .contact-paper h1{font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;font-size:25px;font-weight:400;letter-spacing:.16em}
#contact-dialog .contact-name{font-size:12px;margin-top:9px}
#contact-dialog .contact-details{margin-top:36px;gap:30px}
#contact-dialog .contact-value{font-size:21px;font-variant-numeric:lining-nums tabular-nums}
#contact-dialog [data-copy]{position:absolute;bottom:-6px;right:-7px;padding:9px;min-width:0;width:36px;height:36px;color:#9c8969}
#contact-dialog [data-copy] svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.contact-envelope-back,.contact-envelope-front{background-color:#eee5d1}
.contact-flap{background:linear-gradient(180deg,#f1e9d9,#ebe1cd)}
.contact-envelope::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887855' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@media(max-width:600px){#contact-dialog .contact-paper{height:335px;padding:32px 27px}#contact-dialog .contact-paper h1{font-size:24px}#contact-dialog .contact-value{font-size:18px}#contact-dialog .contact-details{margin-top:32px;gap:27px}#contact-dialog [data-copy]{position:absolute;margin:0;bottom:-7px;right:-8px;width:34px;height:34px;padding:9px}.contact-flight{height:415px;margin-top:-207.5px}.contact-envelope{top:100px}}

/* Fine paper fibres and a shallow crease, without stains or decorative text. */
.contact-paper::before,.contact-envelope::after{opacity:.42;mix-blend-mode:multiply}
.contact-flap{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 49 58H51L100 0' fill='none' stroke='%23b6a689' stroke-opacity='.45' stroke-width='.45'/%3E%3C/svg%3E"),linear-gradient(180deg,#f1e9d9,#ebe1cd);background-size:100% 100%}

#contact-dialog .contact-paper{width:calc(88% - 12px);left:calc(6% + 6px);padding-left:34px;padding-right:34px}
@media(max-width:600px){#contact-dialog .contact-paper{width:calc(94% - 12px);left:calc(3% + 6px);padding-left:25px;padding-right:25px}}

/* Card-local navigation and restrained scene hover hint. */
#contact-dialog .contact-return{position:absolute;right:27px;top:34px;display:flex;align-items:center;gap:6px;padding:8px 3px;border:0;background:transparent;color:#8a785b;font:12px/1.4 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}
.contact-return svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
#contact-dialog .contact-return:hover{color:#443d34}
#contact-hover-tip{position:fixed;z-index:900;pointer-events:none;user-select:none;white-space:nowrap;padding:4px 7px;border:1px solid #f0e2c929;border-radius:4px;background:rgba(29,26,22,.89);color:#eee5d6;font:400 10px/1.4 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;letter-spacing:.04em;box-shadow:0 2px 8px #0002}
#contact-hover-tip[hidden]{display:none}
@media(max-width:600px){#contact-dialog .contact-return{right:22px;top:27px}}

/* Contact typography: one clean family, compact tracking, lining figures. */
#contact-dialog .contact-paper,#contact-dialog .contact-paper h1,#contact-dialog .contact-name,#contact-dialog .contact-value,#contact-dialog .contact-return{font-family:'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif}
#contact-dialog .contact-paper h1{font-size:20px;font-weight:500;letter-spacing:.035em;line-height:1.35}
#contact-dialog .contact-name{font-size:12px;font-weight:400;letter-spacing:.055em;margin-top:8px;color:#8b7d69}
#contact-dialog .contact-value{font-size:18px;font-weight:400;letter-spacing:.015em;font-variant-numeric:lining-nums tabular-nums;line-height:1.45}
#contact-dialog .contact-details p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.12em}
@media(max-width:600px){#contact-dialog .contact-paper h1{font-size:19px}#contact-dialog .contact-value{font-size:17px}}

/* Keep paper texture out of per-frame SVG filter rasterisation. */
.contact-paper::before,.contact-envelope::after{background-image:var(--contact-fibres);mix-blend-mode:normal}
.contact-envelope{filter:none;box-shadow:0 9px 12px #1c160927}
.contact-flight,.contact-paper,.contact-flap,.contact-shade{will-change:transform,opacity}

#contact-dialog{z-index:1200}

/* v100: tactile uncoated stock; texture is pre-rasterised once. */
.contact-paper::before,.contact-envelope::after{opacity:.72;background-size:256px 256px;mix-blend-mode:multiply}
#contact-dialog .contact-paper{background:radial-gradient(ellipse at 40% 30%,#f5f0e4,#eee6d5);box-shadow:inset 0 0 0 1px #cdbfa75c,inset 0 0 18px #baa5820d,0 1px 0 #cfc1a8,0 3px 0 #ebe1cc,0 12px 22px #21190d24}
.contact-paper::before{z-index:0}
.contact-paper> *{position:relative;z-index:1}
#contact-dialog .contact-return{z-index:2}
#contact-dialog .contact-return,#contact-dialog .contact-copy-status{position:absolute}
