
.light-table-page{background:#090909;color:#fff;overflow-x:hidden}
.light-table-trial{min-height:100svh;display:flex;flex-direction:column;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#23211f 0%,#111110 44%,#080808 78%)}
.table-heading{text-align:center;padding:89px 20px 14px;position:relative;z-index:2}
.table-kicker{font:9px/1.5 var(--sans);letter-spacing:.21em;color:rgba(255,255,255,.43);margin:0 0 12px}
.table-heading h1{font:italic 400 clamp(29px,3.3vw,44px)/1.2 var(--serif);margin:0 0 10px;color:#fff}
.table-heading>p[lang=zh]{font:italic 12px/1.8 "Songti SC",serif;letter-spacing:.1em;color:rgba(255,255,255,.42);margin:0}
.table-viewport{width:100%;overflow:hidden;touch-action:pan-y;flex:1;display:flex;align-items:center;padding:15px 0 0}
.table-track{display:flex;align-items:center;width:100%;transform:translateX(calc(var(--chapter,0) * -100%));transition:transform 1.05s cubic-bezier(.22,.75,.16,1)}
.table-chapter{width:100%;flex:0 0 100%;min-width:0;text-align:center;padding:0 7vw;box-sizing:border-box}
.table-perspective{perspective:1500px;margin:0 auto;width:min(100%,880px);padding:12px 0 24px}
.light-pad{position:relative;padding:clamp(14px,2.5vw,30px) clamp(18px,3vw,38px) 30px;background:radial-gradient(ellipse at 45% 42%,#d0cec4 0%,#b7b5ac 57%,#8f8d86 100%);border-radius:3px;transform:rotateX(15deg) rotateZ(-2deg);box-shadow:0 1px 0 #e0dcd0,0 4px 1px #3a3833,0 8px 4px #070707,0 30px 55px rgba(0,0,0,.8),0 0 42px rgba(216,208,182,.13);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.light-pad::before{content:"";position:absolute;inset:-28px;background:radial-gradient(ellipse,rgba(196,185,157,.07),transparent 70%);z-index:-1;pointer-events:none}
.contact-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.3vw,27px);text-decoration:none;align-items:center;outline:none}
.table-print{margin:0;position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;transform:translateY(0) rotate(var(--angle,0deg));transition:transform .8s cubic-bezier(.22,1,.36,1);z-index:1}
.table-print img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border:3px solid #d5d1c6;box-sizing:border-box;box-shadow:1px 3px 5px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.4);transition:box-shadow .8s ease}
.table-print figcaption{position:absolute;bottom:-13px;left:2px;color:#46443e;font:7px/1 var(--sans);letter-spacing:.12em}
.print-1{--angle:-1deg}.print-2{--angle:1deg}.print-3{--angle:-.4deg}.print-4{--angle:1deg}.print-5{--angle:-.7deg}.print-6{--angle:1.1deg}
.pad-inscription{position:absolute;bottom:9px;left:0;right:0;text-align:center;color:rgba(40,39,35,.63);font:7px/1.2 var(--sans);letter-spacing:.2em;pointer-events:none}
.table-story{position:relative;padding:8px 0 2px;z-index:3}
.table-date{font:9px/1.7 var(--sans);letter-spacing:.15em;color:rgba(255,255,255,.4);margin:0 0 9px}
.table-story h2{font:italic 400 clamp(27px,3vw,38px)/1.2 var(--serif);margin:0 0 11px;color:#fff}
.table-quote{font:italic 14px/1.7 var(--serif);color:rgba(255,255,255,.6);margin:0 0 11px}
.table-read{display:inline-block;font:italic 14px/1.5 var(--serif);color:#fff;text-decoration:none;padding:6px 12px;transition:text-shadow .6s ease}
.table-read span{margin-left:10px}.table-read:hover{text-shadow:0 0 15px rgba(255,255,255,.5)}
.table-footer{text-align:center;padding:15px 20px 23px;position:relative;z-index:3}
.table-controls{display:flex;align-items:center;justify-content:center;gap:30px}
.table-controls button{background:none;border:0;color:#fff;cursor:pointer;padding:8px 15px;font:20px/1 var(--serif);transition:opacity .3s}
.table-controls button:disabled{opacity:.2;cursor:default}.table-position{font:9px/1.8 var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.56)}
.table-hint{font:italic 11px/1.8 var(--serif);color:rgba(255,255,255,.34);margin:7px 0 12px}
.table-compare{display:flex;gap:22px;justify-content:center}.table-compare a{font:italic 11px/1.5 var(--serif);text-decoration:none;color:rgba(255,255,255,.45);padding:4px 0}.table-compare a:hover{color:#fff}
.table-read:focus-visible,.table-controls button:focus-visible,.table-compare a:focus-visible{outline:1px solid #aaa;outline-offset:5px}.contact-sheet:focus-visible{outline:1px solid #49443c;outline-offset:8px}
.empty-pad{aspect-ratio:2.15;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#9a978c,#77746b);box-sizing:border-box}
.waiting-paper{position:relative;width:38%;aspect-ratio:4/3;background:linear-gradient(130deg,#beb9ab,#a19b8e);transform:rotate(-4deg);box-shadow:2px 4px 8px #0005}
.waiting-paper::before{content:"";position:absolute;inset:0;transform:translate(8px,-6px) rotate(6deg);background:#b1ac9f;box-shadow:1px 2px 3px #0003;z-index:-1}
.waiting-paper span{font:italic 35px/1 var(--serif);color:#69645a;position:absolute;top:40%;left:0;right:0}
.chapter-empty .table-quote{font-family:"Songti SC",serif;font-size:12px;color:rgba(255,255,255,.4)}
.table-unwritten{display:inline-block;font:italic 12px/1.5 var(--serif);color:rgba(255,255,255,.32);padding:8px}
@media(hover:hover) and (pointer:fine){.contact-sheet:hover .table-print{transform:translateY(-3px) rotate(var(--angle,0deg))}.contact-sheet .table-print:hover{transform:translateY(-13px) rotate(0deg) scale(1.045);z-index:5}.table-print:hover img{box-shadow:4px 15px 20px rgba(0,0,0,.4)}.table-perspective:has(.contact-sheet:hover) .light-pad{transform:rotateX(11deg) rotateZ(-1deg)}}
@media(min-width:1400px){.table-perspective{width:min(70vw,1000px)}}
@media(max-width:600px){.table-heading{padding-top:81px;padding-bottom:8px}.table-heading h1{font-size:28px}.table-kicker{font-size:8px}.table-heading>p[lang=zh]{font-size:11px}.table-chapter{padding:0 8vw}.contact-sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 16px}.light-pad{padding:17px 18px 28px;transform:rotateX(9deg) rotateZ(-2deg)}.table-perspective{padding:8px 0 22px;width:min(100%,390px)}.table-print img{border-width:2px}.table-print figcaption{font-size:6px;bottom:-10px}.table-story{padding-top:5px}.table-story h2{font-size:27px}.table-quote{font-size:12px}.table-footer{padding-top:10px;padding-bottom:18px}.empty-pad{aspect-ratio:.98}.waiting-paper{width:57%}.pad-inscription{font-size:6px;letter-spacing:.1em}}
@media(max-height:680px) and (max-width:600px){.table-heading{padding-top:65px}.table-heading h1{font-size:24px}.table-heading>p[lang=zh]{display:none}.table-perspective{max-width:230px;padding-bottom:16px}.table-story h2{font-size:24px;margin-bottom:5px}.table-quote{margin-bottom:3px}.table-hint{margin:3px 0}.table-footer{padding-bottom:8px}.table-date{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.table-track,.light-pad,.table-print,.table-print img{transition:none!important}.light-pad{transform:none}.contact-sheet .table-print:hover{transform:none}}

@media(max-width:600px) and (min-height:681px){.table-perspective{max-width:min(100%,calc((100svh - 430px)*.8))}.table-heading{padding-top:76px}.table-footer{padding-top:4px}.table-hint{margin-top:3px;margin-bottom:7px}}
@media(prefers-reduced-motion:no-preference){.table-heading{animation:table-arrive 1.1s both}.table-perspective{animation:table-arrive 1.5s .12s both}.table-story{animation:table-arrive 1.2s .35s both}@keyframes table-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}}
