:root{color-scheme:light;--ink:#1c1c1c;--muted:#777;--line:#ebebeb;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--serif:"Songti SC","STSong",serif}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}button:focus-visible,a:focus-visible,.card-stack:focus-visible{outline:2px solid #9a6a19;outline-offset:5px}button:active,.download-button:active{transform:scale(.96)}h1,h2,p{margin:0}.page-width{width:min(1320px,calc(100% - 96px));margin-inline:auto}.site-header{height:88px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.brand{font-family:var(--serif);font-size:29px;font-weight:900;display:inline-flex;align-items:center;gap:8px}.brand-dot{height:6px;width:6px;border-radius:50%;background:#f3bd4a;align-self:flex-end;margin-bottom:7px}.contact-link{font-size:13px;color:#555}.contact-link:hover,.site-footer a:hover{color:#111;text-decoration:underline;text-underline-offset:4px}.hero{flex:1;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center;padding:20px 38px 20px}.hero-copy{padding-bottom:12px}h1{font-family:var(--serif);font-weight:900;font-size:clamp(35px,3.85vw,57px);line-height:1.45;letter-spacing:-1.8px;text-wrap:balance}.hero-description{max-width:450px;font-size:17px;line-height:1.95;color:#737373;margin-top:28px}.download-button{display:inline-flex;align-items:center;gap:40px;background:#1c1c1c;color:white;padding:15px 23px;border-radius:7px;font-size:15px;margin-top:34px;transition:background .15s,transform .15s}.download-button:hover{background:#363636}.platform-note{font-size:11px;color:#929292;margin-top:13px}
.album{width:min(100%,340px,calc((100svh - 275px)*.65));justify-self:center;min-width:0;container-type:inline-size}
.album-header{display:flex;align-items:center;justify-content:space-between;padding:0 3px 14px;gap:12px}
.album-header h2{font-size:14px;font-weight:600;line-height:24px}.demo-label{font-size:10px;color:#999}
.card-stack{position:relative;aspect-ratio:1/1.52;perspective:1400px;isolation:isolate}
.album-card{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease-out}
.album-card[data-active="true"]{opacity:1;pointer-events:auto;z-index:1}
.flip-card{position:relative;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;outline:none}
.flip-card:focus-visible{outline:2px solid #9a6a19;outline-offset:7px;border-radius:20px}
.card-face{position:absolute;inset:0;background:white;border-radius:20px;overflow:hidden;box-shadow:0 2px 5px #00000006,0 12px 35px #0000000d,0 0 0 1px #00000006;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .46s cubic-bezier(.32,0,.12,1);transform-origin:center}
.card-front{transform:rotateY(0deg)}.card-back{transform:rotateY(180deg)}
.album-card[data-side="back"] .card-front{transform:rotateY(-180deg)}.album-card[data-side="back"] .card-back{transform:rotateY(0deg)}
.photo-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#f5f5f4}
.photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;outline:1px solid #0000001a;outline-offset:-1px}
.album-card:nth-child(1) img{object-position:45% center}.album-card:nth-child(2) img{object-position:center 72%}.album-card:nth-child(3) img{width:105.2%;margin-left:-2.6%;object-position:center 68%;transform:scale(1.06)}
.favorite-mark{position:absolute;right:12px;top:12px;width:33px;height:33px;display:grid;place-items:center;background:#fffffff5;border-radius:50%;box-shadow:0 3px 10px #00000012}.favorite-mark svg{width:18px;height:18px}
.photo-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:6px;background:#0008;color:white;padding:7px 10px;border-radius:20px;font-size:10px;pointer-events:none}.photo-hint svg,.back-hint svg{width:13px;height:13px;flex-shrink:0}
.sentence{padding:16px 20px 14px}.scenario{font-size:11px;font-weight:600;color:#888;margin-bottom:8px}
.sentence>p[lang]{font-family:"Avenir Next",var(--sans);font-size:clamp(16px,6.4cqw,23px);line-height:1.35;font-weight:600;letter-spacing:-.35px}
.translation{font-size:clamp(10px,3.9cqw,13px);line-height:1.5;color:#7b7b75;margin-top:8px}
.card-back{padding:20px;display:flex;flex-direction:column;gap:18px}.dialogue-heading h3{font-size:17px;font-weight:600;margin:0 0 6px}.dialogue-heading>p{font-size:10px;color:#888}
.dialogue-lines{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto}.dialogue-line{display:flex;align-items:flex-start;gap:9px;background:#f5f5f2;border-radius:16px;padding:13px 12px}.dialogue-line.is-highlighted{background:#fcf0e5}
.speaker{font-size:11px;font-weight:600;line-height:1.6;color:#808078;flex-shrink:0}.dialogue-line p[lang]{font-family:"Avenir Next",var(--sans);font-size:clamp(13px,5cqw,17px);font-weight:600;line-height:1.4;letter-spacing:-.2px}.dialogue-line .translation{font-size:clamp(10px,3.6cqw,12px);margin-top:6px}.back-hint{display:flex;justify-content:center;align-items:center;gap:6px;font-size:10px;color:#999;margin-top:auto;padding-top:3px}
.album-controls{display:flex;justify-content:center;margin-top:11px}.pagination{display:flex;align-items:center}.pagination button{width:44px;height:36px;background:none;padding:0}.pagination button:after{content:"";display:block;margin:auto;width:5px;height:5px;border-radius:50%;background:#d5d5d5}.pagination button[aria-current="true"]:after{background:#333}
.site-footer{min-height:66px;flex-shrink:0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#999;font-size:10px;line-height:1.6}.site-footer nav{display:flex;gap:22px;flex-wrap:wrap}.skip-link{position:fixed;top:-100px;left:10px;z-index:10;background:#111;color:#fff;padding:10px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1500px){.hero{gap:140px}}
@media(max-width:1050px){.page-width{width:calc(100% - 56px)}.hero{padding-inline:0;gap:32px;grid-template-columns:1.2fr 1fr}h1{font-size:clamp(31px,3.85vw,42px);letter-spacing:-1.3px}.hero-description{font-size:15px}.site-footer nav{gap:14px}}
@media(max-width:700px){.page-width{width:calc(100% - 40px)}.site-header{height:54px}.brand{font-size:23px}.contact-link{font-size:11px}.hero{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:8px 0 12px;flex:1}.hero-copy{width:100%;padding:0}h1{font-size:clamp(27px,6.8vw,38px);line-height:1.35;letter-spacing:-1px}h1 br{display:none}.hero-description{font-size:12px;line-height:1.8;margin-top:10px;max-width:440px}.download-button{font-size:12px;min-height:39px;margin-top:12px;padding:10px 17px;gap:24px}.platform-note{display:inline;margin-left:10px;font-size:10px}.album{width:min(100%,270px,calc((100svh - 350px)*.62))}.album-header{padding-bottom:8px}.album-header h2{font-size:12px;line-height:20px}.demo-label{font-size:9px}.card-face{border-radius:15px}.sentence{padding:11px 13px}.scenario{font-size:9px;margin-bottom:5px}.sentence>p[lang]{font-size:clamp(13px,6.4cqw,18px)}.translation{margin-top:5px}.photo-hint{font-size:8px;padding:5px 8px;bottom:9px}.favorite-mark{width:27px;height:27px;right:9px;top:9px}.favorite-mark svg{width:15px;height:15px}.card-back{padding:13px;gap:11px}.dialogue-heading h3{font-size:14px}.dialogue-heading>p{font-size:9px}.dialogue-lines{gap:8px}.dialogue-line{padding:9px 8px;gap:6px;border-radius:11px}.dialogue-line p[lang]{font-size:clamp(11px,5.2cqw,14px)}.dialogue-line .translation{font-size:clamp(9px,3.8cqw,11px)}.speaker{font-size:9px}.back-hint{font-size:8px}.album-controls{margin-top:3px}.pagination button{height:32px}.site-footer{padding-block:10px;min-height:60px;flex-direction:column;justify-content:center;gap:4px;font-size:9px}.site-footer nav{gap:15px}}
@media(prefers-reduced-motion:reduce){.album-card{transition:none}.card-face{transform:none!important;transition:opacity .16s ease-out}.card-back{opacity:0}.album-card[data-side="back"] .card-front{opacity:0}.album-card[data-side="back"] .card-back{opacity:1}}
@media(max-width:700px) and (max-height:700px){.card-back{gap:8px}.dialogue-heading h3{margin-bottom:4px}.dialogue-lines{gap:6px}.dialogue-line{padding-block:6px}.dialogue-line .translation{margin-top:3px}.back-hint{padding-top:0}}

.photo-navigation{position:absolute;inset:0 0 auto;height:100cqw;z-index:2;pointer-events:none}.photo-navigation[hidden]{display:none}.photo-arrow{position:absolute;top:calc(50% - 22px);width:44px;height:44px;padding:0;display:grid;place-items:center;background:transparent;pointer-events:auto;border-radius:50%;transition:transform .15s ease}.photo-arrow:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fffffff0;box-shadow:0 2px 9px #0002;transition:background .15s ease}.photo-arrow:hover:before{background:#fff}.photo-arrow svg{position:relative;width:20px;height:20px}.photo-prev{left:6px}.photo-next{right:6px}