:root{color-scheme:dark;--accent:#76cfc9;--ink:#eeefeb;--muted:#929b9b;--surface:#101415;--card-width:min(69vw,360px,calc((100svh - 450px)/1.375));font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Noto Sans CJK SC",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);overflow-x:hidden;-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}a{color:var(--accent);text-underline-offset:4px}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 34%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 55%);transition:background 1s}.ambient:after{content:"";position:absolute;inset:0;opacity:.035;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.app{position:relative;min-height:100svh;max-width:1060px;margin:auto;display:flex;flex-direction:column;padding:calc(19px + env(safe-area-inset-top)) 24px calc(17px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;z-index:3}.brand{display:flex;gap:11px;align-items:center;font-size:15px;font-weight:560;letter-spacing:.08em}.brand>svg{width:30px;height:30px;color:var(--accent)}.brand small{display:block;color:#7e8989;font-size:9px;letter-spacing:.17em;margin-top:5px;font-weight:450}.top-actions{display:flex;gap:3px}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:#b8c1bf}.icon-button:hover{background:#ffffff0b;color:#fff}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:0;padding:20px 0 16px}.edition{width:var(--card-width);display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;color:#94a3a1;min-width:200px}.edition-label{font-size:12px;letter-spacing:.22em}.counter{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#727d7c}.counter b{font-weight:500;color:var(--accent);font-size:16px}.counter i{font-style:normal;margin:0 10px;color:#465352}.card-space{perspective:1300px;position:relative;display:grid;place-items:center;isolation:isolate;width:100%;min-height:calc(var(--card-width)*1.375)}.card-space:after{content:"";position:absolute;z-index:-1;width:calc(var(--card-width)*.7);height:30px;bottom:-19px;background:#000;opacity:.58;filter:blur(20px);border-radius:50%;pointer-events:none}.card{width:var(--card-width);aspect-ratio:600/825;position:relative;transform-style:preserve-3d;will-change:transform;cursor:grab;touch-action:none;outline:none;border-radius:calc(var(--card-width)*.045)}.card:active{cursor:grabbing}.card:focus-visible{outline:2px solid var(--accent);outline-offset:12px}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;pointer-events:none}.face>img{width:100%;height:100%;display:block;object-fit:fill;border-radius:inherit}.front{transform:translateZ(.2px);filter:drop-shadow(0 12px 24px #0008)}.front{overflow:hidden;isolation:isolate}.face>img[hidden]{display:none}.foil,.glare,.card-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.foil{opacity:0;mix-blend-mode:color-dodge;background-image:repeating-linear-gradient(116deg,#ecbdec 0%,#9edce8 8%,#eeddb4 16%,#dbb7e7 24%,#aeead3 32%,#edc4b2 40%,#ecbdec 48%);background-size:300% 300%;background-position:var(--foil-x,50%) var(--foil-y,50%);filter:saturate(.85) contrast(1.1);mask-image:linear-gradient(125deg,transparent 2%,#0009 35%,#000 55%,#0005 90%)}.foil:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#fff4 2px 3px);mix-blend-mode:overlay;opacity:.22}.glare{opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,38%),#ffffffd9 0%,#d8e8ff3d 24%,#ffffff00 68%);mix-blend-mode:screen}.card-edge{box-shadow:inset 0 0 0 1px #ffffff26,inset 0 0 0 2px #0b17262b}.front:not(.ready) .foil,.front:not(.ready) .glare{visibility:hidden}.back{transform:rotateY(180deg) translateZ(.2px);visibility:hidden}.loading{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:24px;background:#091010d9;color:#d1dfdb;font-size:12px;white-space:nowrap;backdrop-filter:blur(14px)}.loading[hidden]{display:none}.spinner{width:12px;height:12px;border:1.5px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.caption{text-align:center;margin-top:29px;z-index:1}.title-line{display:flex;align-items:center;justify-content:center;gap:10px}h1{font-size:25px;font-weight:550;letter-spacing:.08em;margin:0}.title-line>span{font-size:10px;border:1px solid #a8c3bd30;padding:3px 6px;border-radius:4px;letter-spacing:.05em;color:var(--accent)}.caption p{font-size:12px;margin:9px 0 0;color:var(--muted);letter-spacing:.025em}.divider{margin:0 10px;color:#58615f}.gesture-hint{font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px;color:#6f7e7a;margin-top:19px}.gesture-hint svg{width:15px;height:15px}.dock{width:100%;max-width:470px;margin:0 auto;z-index:2}.thumbnails{display:flex;gap:10px;justify-content:center;overflow:auto;padding:10px 5px 15px;scrollbar-width:none}.thumbnails::-webkit-scrollbar{display:none}.thumb{width:48px;min-width:34px;padding:0;flex:1;max-width:54px;aspect-ratio:600/825;border-radius:6px;position:relative;border:0;outline:1px solid #ffffff15;background:#1a2221;opacity:.5;transition:opacity .25s,transform .25s,outline-color .25s;overflow:visible}.thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}.thumb:hover{opacity:.85}.thumb[aria-current=true]{opacity:1;outline:1.5px solid var(--accent);outline-offset:4px;transform:translateY(-3px)}.thumb[aria-current=true]:after{content:"";position:absolute;bottom:-12px;left:calc(50% - 2px);height:3px;width:4px;border-radius:2px;background:var(--accent)}.dock-actions{display:flex;align-items:center;justify-content:center;border-top:1px solid #ffffff0c;margin-top:9px;padding-top:9px;gap:14px}.text-button{border:0;background:transparent;display:flex;gap:7px;align-items:center;padding:10px 0;font-size:14px;color:#a6b2ad;white-space:nowrap;min-height:44px}.text-button svg{width:18px;height:18px}.text-button[aria-pressed=true]{color:var(--accent)}.dock-separator{height:12px;width:1px;background:#ffffff18}.qr-button{width:44px;height:44px;margin-left:0}.qr-button svg{width:19px;height:19px}.toast{position:fixed;bottom:calc(165px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,8px);max-width:calc(100% - 40px);width:max-content;background:#263330f5;border:1px solid #ffffff10;color:#d9e6df;border-radius:12px;padding:12px 18px;font-size:14px;z-index:15;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.sheet{border:1px solid #ffffff12;background:#17201f;color:var(--ink);border-radius:24px 24px 0 0;max-width:500px;width:100%;padding:10px 26px calc(28px + env(safe-area-inset-bottom));margin:auto auto 0;max-height:85svh;box-shadow:0 -15px 70px #0005}.sheet::backdrop{background:#050b0ba8;backdrop-filter:blur(6px)}.sheet-handle{width:32px;height:3px;border-radius:3px;background:#53645c;margin:0 auto 15px}.sheet-heading{display:flex;align-items:center;justify-content:space-between}.sheet-heading h2{font-size:21px;font-weight:530;letter-spacing:.03em;margin:0}.sheet-heading .close{margin-right:-10px}.sheet-note{font-size:14px;color:#a1b2aa;line-height:1.7;margin:3px 0 26px}.slider-label{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-top:25px}.slider-label small{font-size:12px;color:#859990;margin-left:6px}.slider-label output{font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:32px;background:transparent;cursor:pointer;margin:10px 0 0;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:8px;background:#40534b}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:20px;width:20px;margin-top:-8.5px;border-radius:50%;background:#dcece2;box-shadow:0 1px 8px #0005}input[type=range]::-moz-range-track{height:3px;background:#40534b}input[type=range]::-moz-range-thumb{height:20px;width:20px;border:0;border-radius:50%;background:#dcece2}.range-labels{display:flex;justify-content:space-between;font-size:12px;color:#7c9186}.wide-button{display:block;width:100%;border:1px solid #b7d7c528;background:#24352e;padding:14px;border-radius:12px;margin-top:30px;font-size:14px}.detail-name{font-size:26px;margin:18px 0 4px;font-weight:550}.detail-en{font-size:14px;color:#9cb2a6;margin:0 0 22px}.detail-row{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #ffffff0c;padding:13px 0;font-size:14px}.detail-row span{color:#8fa297}.source-links{display:flex;flex-wrap:wrap;gap:18px;margin:23px 0;font-size:14px}.credit{font-size:12px;color:#7e9286;line-height:1.8;margin:18px 0 0}.share-sheet{text-align:center}.share-sheet .sheet-heading{text-align:left}.share-sheet #qr-image{display:block;width:220px;height:220px;margin:25px auto 16px;border-radius:12px;background:#fff;border:12px solid #fff}.share-sheet .sheet-note{margin-bottom:16px}.share-sheet>a{font-size:14px}#exit-immersive{display:none;position:fixed;right:20px;top:calc(15px + env(safe-area-inset-top));z-index:10;background:#17201f7a}.immersive .topbar,.immersive .edition,.immersive .caption,.immersive .gesture-hint,.immersive .dock{visibility:hidden;pointer-events:none}.immersive #exit-immersive{display:flex}.immersive .card-space{position:fixed;inset:0;min-height:100svh;perspective:1300px}.immersive .card{width:min(78vw,480px,calc(74svh/1.375))}.immersive .card-space:after{display:none}
@media(min-width:700px){:root{--card-width:min(32vw,370px,calc((100svh - 440px)/1.375))}.app{padding:27px 42px 17px}.brand{font-size:16px}.brand small{font-size:10px}.stage{padding-top:16px}.edition{margin-bottom:23px}.caption{margin-top:25px}.caption h1{font-size:28px}.dock{max-width:420px}.thumbnails{gap:15px}.thumb{max-width:45px}.dock-actions{gap:25px}.sheet{margin:auto;border-radius:24px}.sheet-handle{display:none}.sheet{padding:24px 30px 30px}}
@media(max-height:740px) and (max-width:699px){:root{--card-width:min(66vw,calc((100svh - 360px)/1.375))}.app{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.stage{padding:10px 0}.edition{margin-bottom:15px}.caption{margin-top:18px}.caption h1{font-size:22px}.gesture-hint{margin-top:12px}.thumb{max-width:42px}.thumbnails{padding-bottom:13px}.dock-actions{padding-top:4px;margin-top:4px}.caption p{margin-top:6px}.brand small{display:none}}
@media(max-width:380px){.app{padding-left:18px;padding-right:18px}.thumbnails{gap:9px}.dock-actions{gap:10px}.text-button{font-size:12px}}
@media(orientation:landscape) and (max-height:740px){:root{--card-width:calc((100svh - 88px)/1.375)}.app{display:grid;grid-template-columns:1fr 220px;grid-template-rows:44px 1fr;padding:8px 20px;gap:0 30px}.topbar{grid-column:1/-1}.stage{grid-column:1;grid-row:2;padding:4px 0}.edition,.caption,.gesture-hint{display:none}.dock{grid-column:2;grid-row:2;align-self:center}.thumbnails{display:grid;grid-template-columns:repeat(3,44px);gap:15px 16px;overflow:visible}.thumb{width:44px}.dock-actions{flex-wrap:wrap;gap:5px 14px}.text-button{font-size:12px}.sheet{max-height:94svh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.spinner{border-top-color:var(--accent)}}

/* Native layered preview: the oversized transparent canvas allows positive depth. */
.front{overflow:visible;isolation:auto}.front canvas{position:absolute;top:-30%;left:-30%;width:160%;height:160%;opacity:0;pointer-events:none}.front.ready canvas{opacity:1}.front.ready>img{visibility:hidden}

[hidden]{display:none!important}

html{overflow-x:clip}.app{overflow-x:clip}

/* Adjustments stay in the layout so the card remains visible and interactive. */
.adjust-panel{flex:none;width:100%;max-width:470px;margin:8px auto 0;padding:10px 18px 14px;border:1px solid #ffffff16;border-radius:20px;background:#17201ff2;box-shadow:0 10px 40px #0002}
.adjust-panel .sheet-handle,.adjust-panel .sheet-note,.adjust-panel .range-labels{display:none}
.adjust-panel .sheet-heading{height:36px}.adjust-panel .sheet-heading h2{font-size:17px}
.adjust-panel .slider-label{margin-top:8px;font-size:14px}.adjust-panel .slider-label small{font-size:11px}
.adjust-panel input[type=range]{height:30px;margin:3px 0 0;touch-action:none}
.adjust-panel .wide-button{min-height:40px;margin-top:8px;padding:9px;font-size:13px}
.settings-open .app{height:100svh}.settings-open .dock,.settings-open .edition,.settings-open .gesture-hint{display:none}
.settings-open .stage{padding:14px 0}.settings-open .caption{margin-top:12px}
.settings-open .caption h1{font-size:22px}.settings-open .caption p{display:none}
.settings-open{--card-width:min(70vw,360px,calc((100svh - 385px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/1.375))}
@media(min-width:850px),(orientation:landscape) and (max-height:740px){
  .settings-open{--card-width:min(40vw,390px,calc((100svh - 130px)/1.375))}
  .settings-open .app{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:44px minmax(0,1fr);column-gap:30px}
  .settings-open .topbar{grid-column:1/-1;grid-row:1}.settings-open .stage{grid-column:1;grid-row:2;padding:8px 0}
  .settings-open .adjust-panel{grid-column:2;grid-row:2;align-self:center;margin:0;max-width:300px}
  .settings-open .caption{display:none}
}
@media(orientation:landscape) and (max-height:500px){
  .settings-open .app{grid-template-columns:minmax(0,1fr) 260px;column-gap:20px;padding:8px 18px}
  .settings-open{--card-width:calc((100svh - 106px)/1.375)}
  .adjust-panel{padding:6px 14px 10px}.adjust-panel .sheet-heading{height:32px}.adjust-panel .slider-label{margin-top:5px}
}

/* Back-first horizontal collection; touch panning belongs to the rail. */
:root{--card-width:min(72vw,390px,calc((100svh - 350px)/1.7))}
.stage{min-width:0}.card-space{width:calc(100% + 48px);min-height:0}
.carousel{position:relative;display:flex;align-items:center;gap:28px;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:calc(var(--card-width)*.16) calc((100% - var(--card-width))/2);touch-action:pan-x;scroll-behavior:auto}
.carousel::-webkit-scrollbar{display:none}.card-slot{position:relative;flex:0 0 var(--card-width);height:calc(var(--card-width)*1.375);display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always;perspective:1300px}
.card{touch-action:pan-x;user-select:none;-webkit-user-select:none}.card[data-face=back] .front{visibility:hidden}.card[data-face=back] .back{visibility:visible}
.card-standin{display:block;width:100%;aspect-ratio:600/825;border:0;padding:0;background:transparent;border-radius:calc(var(--card-width)*.045);opacity:.75;transform:scale(.94);cursor:grab}
.card-standin img{display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none;user-select:none;-webkit-user-drag:none}.thumbnails{display:none}
.back{overflow:hidden;isolation:isolate;box-shadow:0 15px 36px #0006}.back:before,.back:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.back:before{background:repeating-linear-gradient(118deg,#d0b0ff 0%,#72ddec 14%,#ffe6a9 28%,#e6a3d0 42%,#d0b0ff 56%);background-size:260% 260%;background-position:var(--back-foil-x,50%) 50%;mix-blend-mode:color-dodge;opacity:.18}
.back:after{background:radial-gradient(ellipse at var(--back-light-x,50%) var(--back-light-y,45%),#ffffff55,transparent 65%);mix-blend-mode:screen;opacity:.35}
.settings-open{--card-width:min(66vw,330px,calc((100svh - 385px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/1.7))}
.immersive .card-space{position:fixed;inset:0;display:grid;align-items:center;width:100%;min-height:100svh}.immersive .card{width:var(--card-width)}.immersive{--card-width:min(72vw,480px,calc(76svh/1.7))}
@media(min-width:850px),(orientation:landscape) and (max-height:740px){.settings-open{--card-width:min(35vw,390px,calc((100svh - 130px)/1.7))}.card-space,.settings-open .card-space{width:100%}}
@media(orientation:landscape) and (max-height:740px){:root{--card-width:min(38vw,calc((100svh - 90px)/1.7))}.settings-open{--card-width:calc((100svh - 100px)/1.7)}}