:root{--ink:#202224;--paper:#f0f0ef;--muted:#777d84;--blue:#7690a4;--accent:#a63435;--serif:"Iowan Old Style","Baskerville","Times New Roman","Noto Serif SC","Songti SC",serif;--sans:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#dedfdf;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:2px solid #a44142;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:linear-gradient(130deg,#e5e7e7,#f4f3f1 25%,#dee0e0 78%,#ededed)}
.site-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 168px,rgba(28,34,39,.09) 169px,transparent 170px 340px)}
.site-shell::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.1;filter:contrast(180%);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.topbar,.bottom-bar{z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;padding-inline:clamp(20px,3.3vw,55px)}
.topbar{height:61px;border-bottom:1px solid rgba(49,55,59,.12)}
.identity,.topbar-center,.tiny-button,.bottom-bar{font-family:var(--serif);letter-spacing:.18em;font-size:10px}
.identity{display:flex;align-items:center;gap:12px;color:#25282a}
.identity-square{height:8px;width:8px;background:#aa393d;transform:rotate(45deg)}
.identity-slash{color:#8995a0;margin-inline:5px}
.topbar-center{opacity:.55}
.tiny-button{border:0;background:transparent;padding:12px 0;color:var(--ink)}
.tiny-button span{font-size:17px;margin-left:8px;vertical-align:-1px}
.desk-area{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:7px 26px 10px}
main{display:flex;flex:1;flex-direction:column;min-height:0}
.scene{--mx:50%;--my:50%;position:relative;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 124px);aspect-ratio:2048 / 1433;box-shadow:0 18px 45px rgba(25,30,37,.16),0 1px 5px rgba(34,37,42,.13);overflow:hidden;animation:scene-enter 1.15s both cubic-bezier(.2,.75,.2,1);background:#efefef}
@supports (height: min(1px, 1px)){.scene{width:min(calc((100dvh - 132px)*2048/1433),calc(100vw - 52px));max-height:none}}
.scene-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.scene-glow{position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:screen;transition:opacity .3s;background:radial-gradient(circle 140px at var(--mx) var(--my),rgba(255,255,255,.7),transparent 90%)}
.scene:hover .scene-glow{opacity:.58}
@keyframes scene-enter{from{opacity:0;transform:translateY(15px) scale(.987);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:none}}
.hotspot{position:absolute;padding:0;margin:0;background:transparent;border:1px solid transparent;border-radius:1px;isolation:isolate;transition:border-color .25s,background-color .25s,box-shadow .25s}
.hotspot:hover,.hotspot:focus-visible{border-color:rgba(208,225,241,.9);background:rgba(214,236,251,.08);box-shadow:inset 0 0 22px rgba(255,255,255,.1),0 0 0 1px rgba(38,61,78,.23)}
.hotspot>span{position:absolute;left:50%;top:-15px;transform:translate(-50%,6px);white-space:nowrap;opacity:0;pointer-events:none;transition:transform .22s,opacity .22s;padding:8px 11px;background:#1a2028;color:#e6e8e7;font:10px var(--serif);letter-spacing:.12em;box-shadow:0 3px 12px #0003}
.hotspot:hover>span,.hotspot:focus-visible>span{opacity:1;transform:translate(-50%,0)}
.left-art{left:15%;top:15%;width:32%;height:66%;clip-path:polygon(0 5%,95% 0,100% 96%,15% 100%)}
.right-art{left:73%;top:13%;width:24%;height:43%;transform:rotate(8deg)}
.profile-hotspot{left:53%;top:18%;width:22%;height:28%;transform:rotate(5deg)}
.notice-hotspot{left:48%;top:50%;width:45%;height:22%;transform:rotate(-3deg)}
.qr-1{left:51%;top:75%;width:11%;height:16%;transform:rotate(-5deg)}
.qr-2{left:65%;top:73%;width:11%;height:16%;transform:rotate(-5deg)}
.qr-3{left:78%;top:70%;width:11%;height:16%;transform:rotate(-5deg)}
.scene-hint{position:absolute;left:clamp(24px,4vw,62px);bottom:18px;pointer-events:none;font-size:11px;letter-spacing:.16em;color:#747f86;writing-mode:initial}
.hint-dash{display:inline-block;width:23px;height:1px;background:#a3383d;vertical-align:middle;margin-right:10px}
.hint-dim{opacity:.75;font-family:var(--serif);font-size:9px}
.bottom-bar{height:58px;border-top:1px solid rgba(49,55,59,.14)}
.footer-label{white-space:nowrap;color:#666e74}.footer-dot{color:#9a3c3e;margin-inline:5px}
.quick-nav{display:flex;align-items:center;gap:19px;font-family:var(--sans);letter-spacing:.15em}
.quick-nav button,.footer-view{background:transparent;border:0;color:#4a5156;padding:12px 0;font-size:11px;transition:color .2s}
.quick-nav button:hover,.footer-view:hover{color:#ad3a40}
.quick-nav span{opacity:.25}
.footer-view{font-family:var(--serif);letter-spacing:.13em;font-size:10px;white-space:nowrap}
.footer-view span{font-size:14px;margin-left:6px}
.mobile-content{display:none}
/* Detail reader */
dialog{border:0;padding:0;width:min(92vw,640px);max-height:min(90dvh,850px);background:#ececeb;color:#202328;box-shadow:0 35px 110px rgba(13,16,18,.4);overflow:auto;overscroll-behavior:contain;animation:dialog-enter .25s ease both}
dialog::backdrop{background:rgba(16,22,29,.68);backdrop-filter:blur(9px)}
@keyframes dialog-enter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.dialog-shell{background:radial-gradient(ellipse at 20% 3%,#fff9,transparent 42%),repeating-linear-gradient(0deg,#0000 0 3px,#20242a02 4px 5px),#eeefed;min-height:365px}
.dialog-top,.dialog-foot{display:flex;align-items:center;justify-content:space-between;font:10px var(--serif);letter-spacing:.14em;color:#747c81}
.dialog-top{height:58px;border-bottom:1px solid #c6c8c7;padding:0 27px}
.dialog-close{background:transparent;border:0;font-size:30px;font-family:var(--serif);font-weight:300;color:#272b30;line-height:1;padding:8px}
.dialog-body{padding:34px clamp(24px,5vw,52px) 46px}
.dialog-foot{padding:19px 27px 20px;border-top:1px solid #c6c8c7;font-size:9px}
.dialog-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:.02em;margin:0 0 10px}
.dialog-sub{font:10px var(--serif);letter-spacing:.25em;color:#888d91;margin:0 0 34px}
.dialog-line{border-top:1px solid #bbc0c2;display:grid;grid-template-columns:120px 1fr;padding:20px 0;gap:16px;align-items:start}
.dialog-line>span{color:#747e84;font-family:var(--serif);font-size:12px;letter-spacing:.09em}
.dialog-line>strong{font-size:18px;font-weight:400;line-height:1.85;letter-spacing:.09em}
.dialog-line .dialog-copy{background:transparent;border:0;color:#20394e;text-align:left;font-size:18px;padding:0;line-height:1.8}
.dialog-copy small{font-size:10px;margin-left:13px;color:#8393a1}
.dialog-footnote{font-family:var(--serif);color:#858c8f;font-style:italic;font-size:11px;line-height:1.8;margin:28px 0 0}
.dialog-list{list-style:none;counter-reset:item;margin:0;padding:0}
.dialog-list li{counter-increment:item;position:relative;padding:20px 0 20px 52px;border-top:1px solid #bbc0c2;font-size:17px;letter-spacing:.06em;line-height:1.75}
.dialog-list li::before{content:counter(item,decimal-leading-zero);position:absolute;left:3px;top:24px;color:#a44d4d;font:15px var(--serif)}
.dialog-qr-wrap{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.dialog-qr-card{padding:18px;background:#fff;box-shadow:0 4px 13px #00000012}
.dialog-qr-card img{display:block;width:min(55vw,240px);height:auto;image-rendering:auto}
.dialog-qr-text{min-width:160px;text-align:left}
.dialog-qr-text h3{font:18px var(--serif);letter-spacing:.1em;margin:0 0 12px}
.dialog-qr-text p{font-size:13px;color:#747d80;line-height:1.9;margin:0 0 24px}
.dialog-qr-text button,.dialog-action{background:#21262b;color:#fff;border:0;padding:12px 17px;letter-spacing:.08em;font-size:11px}
.qr-warning{font-size:12px;color:#777;margin:26px 0 0;line-height:1.8}
.dialog-visual{display:block;max-width:100%;width:auto;max-height:64dvh;margin:0 auto;object-fit:contain;box-shadow:0 7px 25px rgba(20,20,20,.17)}
.dialog-original{display:block;width:100%;height:auto;margin:auto;box-shadow:0 7px 25px rgba(20,20,20,.17)}
.dialog-about{font-size:14px;line-height:2;letter-spacing:.03em;color:#555e62}
.dialog-about strong{font-size:16px;font-weight:500;color:#303941}
.toast{position:fixed;z-index:1000;bottom:82px;left:50%;transform:translate(-50%,12px);background:#1c242b;color:#f5f5f5;padding:11px 18px;font-size:12px;letter-spacing:.07em;box-shadow:0 7px 25px #0005;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px) and (min-width:701px){.footer-label{display:none}.scene-hint{font-size:10px}.topbar-center{display:none}}
@media(max-width:700px){
  .site-shell{display:block;min-height:100dvh;overflow:visible;background:linear-gradient(135deg,#eeeeed,#e3e5e5)}
  .topbar{height:55px;padding:0 19px}.topbar-center{display:none}
  main{display:block}
  .desk-area{display:block;padding:0;margin:0}.scene{width:100%;max-width:none;max-height:none;aspect-ratio:2048/1433;box-shadow:0 7px 17px #0002;animation-duration:.75s}.scene-glow,.hotspot,.scene-hint{display:none}
  .mobile-content{display:block;padding:0 19px 40px;max-width:530px;margin:auto}
  .mobile-heading{padding:43px 4px 32px;text-align:left}
  .mobile-heading>span,.mobile-heading p{font:10px var(--serif);letter-spacing:.16em;color:#858e94}
  .mobile-heading h2{font:400 23px/1.6 var(--serif);letter-spacing:.05em;margin:15px 0 16px;color:#2c3337}
  .mobile-heading p{margin:0}
  .mobile-paper{position:relative;box-shadow:0 15px 26px #1417181c;margin-bottom:27px;padding:25px 22px 24px}
  .mobile-paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
  .profile-paper{background:#f6f6f4;color:#25292a;transform:rotate(-.7deg)}
  .paper-title{font:20px var(--serif);letter-spacing:.09em;margin-bottom:27px;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .paper-title em{font:italic 10px var(--serif);color:#8b9195;letter-spacing:.02em;margin-left:4px}
  .paper-marker{display:inline-block;height:10px;width:10px;background:#9e4348;transform:rotate(-8deg)}
  .detail-row{display:grid;grid-template-columns:87px 1fr;gap:8px;padding:14px 0;border-top:1px solid #cbd0cf}
  .detail-row>span{font:12px var(--serif);letter-spacing:.08em;color:#788088}
  .detail-row strong,.copy-inline{font-size:15px;line-height:1.7;font-weight:400;letter-spacing:.06em}
  .copy-inline{background:transparent;border:0;text-align:left;padding:0;color:inherit}.copy-inline span{font-size:12px;color:#8b9ca8}
  .paper-end{font:italic 9px var(--serif);letter-spacing:.06em;color:#91979a;margin:25px 0 0}
  .notice-paper{background:#1c2022;color:#f1f1f1;transform:rotate(.8deg);padding-bottom:28px}
  .notice-paper .paper-title em{color:#99a0a3}
  .notice-paper ol{margin:0;padding:0;list-style:none;counter-reset:item}
  .notice-paper li{counter-increment:item;padding:17px 0 17px 31px;border-top:1px solid #555b5e;position:relative;font:15px/1.8 var(--serif);letter-spacing:.03em}
  .notice-paper li::before{content:counter(item)'.';position:absolute;left:0;color:#b0bcc3}
  .mobile-qr-section{margin-top:42px}.mobile-qr-header{display:flex;justify-content:space-between;letter-spacing:.15em;color:#646f75;font:10px var(--serif);padding:0 2px 14px;border-bottom:1px solid #a5aeaf}
  .mobile-qr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
  .mobile-qr-grid button{padding:9px 6px 12px;background:#202426;border:0;min-width:0;color:#f2f2f1;box-shadow:0 7px 14px #0002}
  .mobile-qr-grid button img{width:100%;display:block;aspect-ratio:1;object-fit:contain;background:#fff}
  .mobile-qr-grid button span{display:block;margin-top:11px;font:clamp(7px,2.1vw,11px) var(--serif);letter-spacing:.02em;white-space:nowrap}
  .mobile-qr-section>p{font-size:11px;color:#7a8388;line-height:1.8;margin:15px 0 0}
  .bottom-bar{min-height:85px;gap:10px;padding:17px 19px;flex-wrap:wrap}.footer-label{display:none}.quick-nav{width:100%;justify-content:center;gap:13px}.quick-nav button{font-size:12px;padding:5px}.footer-view{display:none}
  dialog{width:min(93vw,550px);max-height:85dvh}.dialog-top{padding:0 20px}.dialog-body{padding:30px 22px 37px}.dialog-foot{padding:15px 20px;font-size:8px;gap:20px}
  .dialog-line{grid-template-columns:84px 1fr;gap:8px}.dialog-line>strong,.dialog-line .dialog-copy{font-size:16px}
  .dialog-qr-wrap{gap:19px}.dialog-qr-text{text-align:center}.dialog-qr-text p{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}