:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:#26272c;background:#f9f9f9;font-synthesis:none;--card-width:290px;--card-height:307px;--radius:28px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,.card-hit:focus-visible{outline:2px solid #e96648;outline-offset:7px}button:disabled{cursor:wait;opacity:.6}.page-header{display:flex;justify-content:space-between;align-items:center;padding:30px 42px;font-size:14px;z-index:1}.wordmark{display:flex;align-items:center;gap:10px;letter-spacing:.08em;font-weight:600}.wordmark i{width:13px;height:17px;border:1.5px solid #393940;border-radius:3px;transform:rotate(-12deg);box-shadow:3px 2px 0 #e6745c}.edition{font-size:12px;letter-spacing:.08em;color:#949498}main{flex:1;display:grid;place-items:center}.experience{width:100%;display:flex;flex-direction:column;align-items:center}.scene{display:grid;place-items:center;perspective:1150px;width:100%;min-height:440px;position:relative}.card-hit{position:relative;width:var(--card-width);height:var(--card-height);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;-webkit-tap-highlight-color:transparent}.card-hit.dragging{cursor:grabbing}.tilt,.rotor{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.rotor{--light-x:40%;--light-y:30%;--glow:.15}.face,.edge{position:absolute;inset:0;border-radius:var(--radius);backface-visibility:hidden;-webkit-backface-visibility:hidden}.face{transform-style:preserve-3d}.front{transform:translateZ(4px)}.back{transform:rotateY(180deg) translateZ(4px)}.edge{transform:translateZ(var(--z));background:linear-gradient(120deg,#d7d9ed,#888998 23%,#373741 64%,#19191d);backface-visibility:visible;-webkit-backface-visibility:visible;border:1px solid #62626d}.reference-texture{width:100%;height:100%;object-fit:fill;border-radius:var(--radius);pointer-events:none}.glare{position:absolute;inset:0;border-radius:var(--radius);background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff9,transparent 65%);opacity:var(--glow);pointer-events:none;transform:translateZ(.5px);mix-blend-mode:screen}.interaction{text-align:center;margin:21px 20px 0;max-width:calc(100% - 32px)}.hint{font-size:14px;line-height:1.65;min-height:24px;margin:0 0 22px;color:#8a8a8e;font-weight:400}.toolbar{display:flex;justify-content:center;align-items:center;gap:5px;padding:7px;border:1px solid #e6e6e8;background:#fff;border-radius:18px;box-shadow:0 4px 14px #23232905}.toolbar button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;padding:12px 14px;border-radius:11px;background:transparent;color:#74747b;font-size:14px;cursor:pointer;min-height:44px;transition:background .2s,color .2s}.toolbar button:hover{background:#f2f2f4;color:#26272c}.toolbar button[aria-pressed=true]{color:#22232a;background:#ededf0}.toolbar button.sensor{background:#28292f;color:white;padding:12px 16px}.toolbar button.sensor[aria-pressed=true]{background:#d95b3c}.toolbar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.divider{height:24px;width:1px;background:#e9e9ec;margin:0 3px}footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:30px 42px;font-size:12px;color:#ababaf;letter-spacing:.03em}.reference-credit{font-size:12px}
@media(max-width:600px){:root{--card-width:min(68vw,270px);--card-height:min(72vw,286px);--radius:25px}.page-header{padding:24px}.scene{min-height:360px;perspective:950px}.interaction{margin-top:15px}.toolbar{gap:0;padding:5px;border-radius:15px}.toolbar button{padding:11px 9px;gap:5px}.toolbar button.sensor{padding:11px 12px}.toolbar svg{width:16px;height:16px}.divider{margin:0 4px}.hint{font-size:13px;margin-bottom:18px;max-width:320px}footer{padding:28px 24px;font-size:12px}.reference-credit{display:none}}
@media(max-height:660px){.scene{min-height:330px}.interaction{margin-top:4px}.page-header{padding-top:20px;padding-bottom:14px}footer{padding-top:22px;padding-bottom:22px}}
@media(max-height:460px) and (orientation:landscape){.experience{flex-direction:row;justify-content:center;gap:40px}.scene{width:340px;min-height:310px}.interaction{margin:0;max-width:350px}.toolbar{flex-wrap:wrap}footer{display:none}.page-header{padding:16px 24px}:root{--card-width:225px;--card-height:238px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.toolbar button{transition:none}}
/* The cover and controls are independent planes, as in the reference. */
.scene{min-height:410px}
.face *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.shell{position:absolute;inset:0;border-radius:var(--radius);background:linear-gradient(133deg,#e2bcc1 0%,#9b747a 12%,#6e525a 39%,#222025 74%,#090a0c 100%);box-shadow:inset 0 1.5px 1.5px #ffffff9c,inset 1.5px 0 1.5px #ffffff57,inset -1.5px -1.5px 1.5px #020309b0;border:1px solid #ffffff4a}
.back .shell{background:linear-gradient(133deg,#c6d1ff 0%,#8b91a6 13%,#515969 47%,#1c202b 78%,#090b10 100%)}
.artwork{position:absolute;inset:3.2% 4.5% 31.5%;border-radius:calc(var(--radius)*.65);transform:translateZ(3px);background:#f4522e;box-shadow:0 0 1px #ffad9566;overflow:hidden}
.artwork img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.card-meta{position:absolute;top:8.5%;left:7.5%;right:7.5%;display:flex;gap:7px;align-items:center;transform:translateZ(26px);color:#f1edeb;pointer-events:none}
.track{display:flex;align-items:center;gap:5px;background:#29282a75;border-radius:22px;padding:3px 7px 3px 3px;margin-right:auto;height:31px;box-shadow:0 1px 2px #0001;min-width:0}
.track>img{width:25px;height:25px;border-radius:50%;object-fit:cover;border:1px solid #fff7}.track b{display:block;font-size:7px;white-space:nowrap;font-weight:500;letter-spacing:-.04px}.track small{display:block;font-size:5.5px;margin-top:2px;color:#ece8e4a8}
.round{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#25222766;box-shadow:inset 0 .5px .5px #ffffff35;color:#f1edeb;flex:none}
.face svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linejoin:round;stroke-linecap:round}
.progress-row{position:absolute;left:8%;right:8%;top:76.7%;display:flex;align-items:center;gap:11px;font-size:10px;color:#e0d9dd;transform:translateZ(11px);font-variant-numeric:tabular-nums;pointer-events:none}.progress-row i{display:block;flex:1;height:3px;border-radius:3px;background:#eeecf34f}.progress-row em{display:block;width:29%;height:100%;border-radius:3px;background:#f6f5f7;box-shadow:0 0 1px #fff}
.playback{position:absolute;top:86%;left:27%;right:27%;display:flex;justify-content:space-between;transform:translateZ(20px);color:#c4c0c8;pointer-events:none}.playback span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#17161d5e;box-shadow:inset 0 1px .5px #fff1}.playback svg{width:15px;height:15px;stroke-width:1.5}.glare{transform:translateZ(4px);opacity:calc(var(--glow)*.7)}
@media(max-width:600px){.scene{min-height:350px}.card-meta{gap:5px}.track{height:27px;padding-right:5px}.track>img{height:21px;width:21px}.round{width:28px;height:28px}.face svg{height:16px;width:16px}.track b{font-size:6px}.track small{font-size:5px}.progress-row{gap:8px;font-size:9px}.playback span{width:24px;height:24px}.playback svg{height:13px;width:13px}}
@media(max-width:350px){.toolbar button{padding-left:7px;padding-right:7px;font-size:13px}.toolbar button.sensor{padding-left:8px;padding-right:8px}.toolbar svg{width:14px}.round{height:25px;width:25px}}
@media(max-height:460px) and (orientation:landscape){.scene{min-height:270px}.track b{font-size:6px}.track small{font-size:5px}.round{height:25px;width:25px}.track{height:25px}.track>img{height:19px;width:19px}.progress-row{font-size:8px;gap:8px}.playback span{height:22px;width:22px}}
/* Physical-glass renderer. The DOM card remains the keyboard/touch surface. */
.glass-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.card-hit{z-index:1}
.glass-ready .tilt{visibility:hidden}
.edge{background:transparent;border-color:#ffffff32;box-shadow:inset .5px 0 1px #adc3d54d}
.shell{border-color:#ffffffaa;box-shadow:inset 0 2px 2px #ffffffb3,inset 2px 0 4px #ffffff73,inset -1px -1px 2px #02030966}
.glass-canvas{left:50%;right:auto;transform:translateX(-50%)}