:root{color-scheme:dark;font-family:Georgia,"Times New Roman","Songti SC","SimSun",serif;background:#101216;color:#e7e1d7}*{box-sizing:border-box}body{margin:0;overflow-x:hidden;background:radial-gradient(ellipse at 50% 41%,#27292a 0,#16191c 44%,#0c1014 100%);min-height:100svh}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:max(22px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));overflow:hidden}header{text-align:center;flex:0 0 auto;position:relative;z-index:3;pointer-events:none}.edition{font:10px/1.3 system-ui,sans-serif;letter-spacing:3px;color:#a99d86;margin:0 0 12px}.edition span{margin-left:15px;letter-spacing:1px;color:#7c7b78}h1{font-size:25px;font-weight:400;letter-spacing:7px;margin:0;padding-left:7px}.subtitle{font-size:9px;letter-spacing:4px;color:#a3a2a0;margin:10px 0 0}.stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:24px 0 22px;perspective:1100px}.aura{position:absolute;inset:0;background:radial-gradient(ellipse at 53% 46%,#c17d5930,transparent 55%);opacity:.45;pointer-events:none}.card-wrap{position:relative;width:min(82vw,calc((100svh - 234px)*.666667),430px);aspect-ratio:2/3;transform:scale(var(--zoom,1));transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:2}.card{position:relative;width:100%;height:100%;border-radius:7px;overflow:hidden;transform-style:preserve-3d;will-change:transform;touch-action:none;cursor:grab;box-shadow:0 24px 50px #0009,0 2px 4px #000b;outline:none;background:#15181c}.card:active{cursor:grabbing}.card:focus-visible{outline:1px solid #c8b792;outline-offset:7px}.original,#surface{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#surface{opacity:0;transition:opacity .6s}.card.ready #surface{opacity:1}.rim{position:absolute;inset:0;border-radius:7px;border:1px solid #b8a98c50;box-shadow:inset 0 0 0 1px #0008;pointer-events:none}footer{text-align:center;position:relative;z-index:4;flex:0 0 auto;width:100%}.hint{font:11px/1.4 system-ui,sans-serif;letter-spacing:1px;color:#b6b4b0;margin:0 0 15px}nav{display:flex;gap:0;justify-content:center;border:1px solid #756b584f;background:linear-gradient(#272a2b,#171b1e);box-shadow:0 1px 0 #a1937319 inset,0 5px 16px #0003;border-radius:25px;max-width:340px;margin:auto;overflow:hidden}button{min-height:44px;padding:0 16px;border:0;color:#d4ccbf;background:none;font:12px system-ui,sans-serif;flex:1;white-space:nowrap;cursor:pointer}button+button{border-left:1px solid #8d7f6536}button:focus-visible{outline:1px solid #c4b18c;outline-offset:-4px}button:active{background:#ffffff0c}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#bbaa7c;margin-left:6px;vertical-align:middle;box-shadow:0 0 5px #bbaa7c50}button[aria-pressed=false] .dot{background:#687077;box-shadow:none}.plus{margin-left:4px;font-size:15px;color:#a89775}.caption{font:9px system-ui,sans-serif;letter-spacing:1px;color:#6f7477;margin:14px 0 0}body.inspect .card-wrap{--zoom:1.36}body.inspect .hint{color:#cdbf9f}@media(max-height:650px){main{padding-top:14px;padding-bottom:14px}.edition{display:none}h1{font-size:20px}.subtitle{margin-top:5px}.stage{padding:15px 0}.card-wrap{width:min(70vw,calc((100svh - 172px)*.666667),430px)}.hint{margin-bottom:8px}.caption{margin-top:7px}}@media(prefers-reduced-motion:reduce){.card-wrap,#surface{transition:none}}
header{transition:opacity .35s}body.inspect header{opacity:0}body.inspect footer{background:linear-gradient(transparent,#101417 22%);padding-top:12px}
