@font-face{font-family:Inter;src:url('assets/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:InterItalic;src:url('assets/inter-italic.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Voyage;src:url('assets/voyage.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Han;src:url('assets/han-serif.woff2') format('woff2');font-weight:700;font-display:swap}
:root{font-family:Inter,'PingFang TC',sans-serif;color:#dddcd6;background:#151718;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 34%,#343338 0%,#1f2124 37%,#151718 74%);overflow-x:hidden}
header,footer{display:flex;justify-content:space-between;align-items:center;padding:28px 42px}
.brand{font-family:Voyage,serif;font-size:29px;line-height:1.05}.brand span{font-family:'PingFang TC',sans-serif;font-size:11px;letter-spacing:.28em;display:block;margin-top:9px;color:#7b7c80}
.edition,footer{font-size:10px;letter-spacing:.2em;color:#797b81}header{position:absolute;inset:0 0 auto;z-index:2}
main{min-height:100svh;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:100px 24px 50px}
.stage{position:relative;perspective:1800px;width:var(--card-w,386px);height:calc(var(--card-w,386px)*1.4);margin:0 0 28px;touch-action:none}
.card{all:unset;display:block;position:relative;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;outline-offset:12px;border-radius:calc(var(--card-w)/22.5);-webkit-tap-highlight-color:transparent}
.card:focus-visible{outline:1px solid #d9cfae}.rotor{position:absolute;inset:0;display:block;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;display:block;border-radius:calc(var(--card-w)/22.5);overflow:clip;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 34px 52px -18px #000b,0 3px 7px #0009,0 0 0 1px #a6a6a666;background:#181919;transform:translateZ(1px)}
.face.back{transform:rotateY(180deg) translateZ(1px)}
.artboard{position:absolute;inset:0;width:1080px;height:1512px;transform:scale(var(--scale));transform-origin:0 0;border-radius:48px;overflow:hidden;isolation:isolate;display:block}
.layer{position:absolute;inset:0;display:block;pointer-events:none}
.slot{position:absolute;display:block;max-width:none}
.slot img{display:block;max-width:none}
.video{position:absolute;left:-60px;top:-88px;width:1200px;height:1600px;object-fit:contain;display:block;will-change:transform}
.blur{position:absolute;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.blur.top{left:32px;top:32px;width:1016px;height:134px;background:rgba(0,0,0,.3);mask:url('assets/d148c.svg') -32px -32px/1080px 1512px no-repeat;mask-mode:luminance}
.blur.bottom{left:38px;top:1227px;width:1003px;height:247px;background:rgba(0,0,0,.5);mask:url('assets/d148c.svg') -38px -1227px/1080px 1512px no-repeat;mask-mode:luminance}
.circle-base{position:absolute;left:18px;top:18px;width:174px;height:174px;border-radius:50%;background:linear-gradient(#845653,#270f13)}
.diamond-base{position:absolute;left:922.72px;top:53.66px;width:107.566px;height:107.566px;background:#6f2424;border-radius:19px;transform:rotate(45deg)}
.material canvas{display:block;width:100%;height:100%}
.surface-light{position:absolute;inset:0;background:radial-gradient(ellipse at var(--hx,50%) var(--hy,50%),#ffffff27 0%,#ffffff09 35%,transparent 67%),linear-gradient(120deg,transparent 25%,#ffffff14 40%,transparent 57%);mix-blend-mode:screen;pointer-events:none}
.holo-text{background:linear-gradient(125deg,#e7e9df 25%,#a9b9b5 38%,#ddd5dd 45%,#f5edd8 51%,#bdced1 65%,#e7e9df 80%);background-size:210% 210%;background-position:var(--mx,50%) var(--my,50%);background-clip:text;-webkit-background-clip:text;color:transparent}
.text{position:absolute;display:flex;align-items:center;white-space:nowrap;color:white}
.voyage{font-family:Voyage,serif;font-weight:700}.han{font-family:Han,serif;font-weight:700}
.letter{left:46px;top:14px;width:119px;height:182px;justify-content:center;font-size:128px}
.name{left:198px;top:39px;width:210px;height:92px;justify-content:center;font-size:72px}
.cn{left:84px;top:1233px;width:324px;height:171px;font-size:96px;line-height:1}
.category{left:638px;top:51px;width:234px;height:92px;font-size:36px;font-weight:700;justify-content:flex-end}
.quote{left:358px;top:1244px;width:931px;height:171px;font-family:Voyage,Han,serif;font-weight:700;font-size:24px;line-height:1.72;letter-spacing:9.84px}
.credits{font-family:InterItalic,Inter,sans-serif;font-style:italic;font-size:24px;line-height:normal}
.credits.serial{left:84px;top:1394px;width:476px;height:68px}.credits.brandline{left:268px;top:1393px;width:244px;height:68px}.credits.artist{left:494px;top:1393px;width:511px;height:68px;justify-content:flex-end}
.material{background:linear-gradient(118deg,#646a6b,#f9f5e9 34%,#989da2 51%,#f7f7ef 68%,#70747b);background-size:200% 200%;background-position:var(--mx,50%) var(--my,50%);mask-mode:luminance;mask-repeat:no-repeat;position:absolute}
.foil-text{background:linear-gradient(118deg,#b4b9bb,#fffdf5 36%,#9eabb4 52%,#f4f2e6 65%,#d7dad8);background-size:200% 200%;background-position:var(--mx,50%) var(--my,50%);background-clip:text;-webkit-background-clip:text;color:transparent}
.caption{display:flex;align-items:center;gap:30px}.identity{font-family:Han,serif;font-size:22px;letter-spacing:.05em}.identity span{font:11px Inter,sans-serif;letter-spacing:.16em;margin-left:8px;color:#9e9eaa}.caption i{font-style:normal;color:#74737b;margin:0 4px}.attribute{font-size:11px;color:#9e9ba7;letter-spacing:.12em}
.controls{margin-top:20px;display:flex;align-items:center;gap:18px}.controls button{font:12px Inter,'PingFang TC',sans-serif;color:#d7d6d1;border:1px solid #ffffff25;border-radius:22px;background:#ffffff05;padding:10px 18px;cursor:pointer;transition:background .2s,border-color .2s}.controls button:hover{background:#ffffff0e;border-color:#ffffff55}.controls button span{font-size:17px;margin-right:5px}.hint{font-size:11px;color:#777a83}.status{font-size:10px;letter-spacing:.13em;color:#737781;margin:15px 0 0}
footer{position:absolute;inset:auto 0 0;padding-block:24px}
@media(max-width:600px){header{padding:22px 24px}.brand{font-size:25px}.edition{display:none}main{padding-top:115px;padding-bottom:50px}.caption{gap:20px}.identity{font-size:20px}.attribute{font-size:10px}.controls{gap:14px}.hint{font-size:11px}footer{padding:20px 24px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.card,.rotor,.video{will-change:auto}}
/* Coating relief uses the freshly exported motifs. The top laminate covers both faces. */
.foil{filter:drop-shadow(var(--bevel-x,0px) var(--bevel-y,0px) 1px #080d14a6);transform:translateZ(2px)}
.holo{filter:drop-shadow(calc(var(--bevel-x,0px)*-.35) calc(var(--bevel-y,0px)*-.35) .55px #14172066)}
.film{border-radius:48px;overflow:hidden;mix-blend-mode:screen;box-shadow:inset 0 0 0 2px #ffffff24,inset -3px -3px 4px #ffffff12}
.film-material{background:linear-gradient(116deg,transparent 26%,#ffffff14 37%,transparent 49%);mask:none}
.film-material:has(canvas){background:none}
/* Refined coatings: shallow foil shoulders, finely filtered Holo, clear PET. */
.foil{filter:drop-shadow(calc(var(--bevel-x,0px)*.22) calc(var(--bevel-y,0px)*.22) .35px #080d1429);transform:translateZ(.4px)}
.holo{filter:none}
.film{box-shadow:inset 0 0 0 1px #ffffff0d}
.film-material{background:linear-gradient(116deg,transparent 12%,#ffffff08 42%,transparent 77%)}
.film-material:has(canvas){background:none}
.special-glyph,.special-letter{filter:drop-shadow(0 0 2.5px #eff7ff28)}
.special-icon{background:linear-gradient(130deg,#a1bcc2,#eee7f0 42%,#b7adbf 65%,#dbe5cc)}

.emissive{background:#eff3f6}


/* Keep the Figma screen tint inside its Common group during 3D rotation. */
.back [data-layer="common"]{isolation:isolate}
.back .film{mix-blend-mode:normal}

/* A quiet paper core becomes visible only along tilted edges. */
.rotor{--card-depth:calc(var(--card-w)*.0081)}
.face{transform:translateZ(calc(var(--card-depth)*.5))}
.face.back{transform:rotateY(180deg) translateZ(calc(var(--card-depth)*.5))}
.card-stock{position:absolute;inset:0;display:block;transform-style:preserve-3d;pointer-events:none}
.stock-sheet{position:absolute;inset:0;border-radius:calc(var(--card-w)/22.5);background:var(--stock-tone);transform:translateZ(calc(var(--card-depth)*var(--stock-depth)));box-shadow:inset 0 0 0 .35px #777674;display:block}
.name-legibility{background:#fff;opacity:.30}
.special-glyph,.special-letter{filter:drop-shadow(0 0 .8px #eff7ff0c)}
.special-icon{will-change:transform}
.foil-letter{background:linear-gradient(118deg,#888f94,#f6f7ed 34%,#64777f 58%,#cdd0cc)}
.holo-glyph{background:linear-gradient(130deg,#a1bcc2,#eee7f0 42%,#b7adbf 65%,#dbe5cc)}
@media(prefers-reduced-motion:reduce){.special-icon{will-change:auto}}

/* The laminate reflects both bright area lights and the dim environment. */
.film{mix-blend-mode:normal}
.foil-letter{background-image:linear-gradient(#ffffff80,#ffffff80),linear-gradient(118deg,#888f94,#f6f7ed 34%,#64777f 58%,#cdd0cc)}
.holo-glyph{background-image:linear-gradient(#ffffff80,#ffffff80),linear-gradient(130deg,#a1bcc2,#eee7f0 42%,#b7adbf 65%,#dbe5cc)}