
:root{--bg:#0b1735;--ink:#fff9f7;--muted:#c9d2eb;--pink:#ffd5e6;--accent:#e49bc9;--gold:#f8dcaa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.8}a{color:inherit}img,video{max-width:100%;display:block}.wrap{width:min(1120px,calc(100% - 36px));margin:auto}.nav{position:sticky;top:0;z-index:20;background:#0a1535e8;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff26}.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.brand{font-size:1.4rem;letter-spacing:.18em;font-weight:700;text-decoration:none}.brand span{color:#b6e28e}.navlinks{display:flex;gap:18px;font-size:.85rem}.navlinks a{text-decoration:none;color:#e4e9fa}.hero{min-height:690px;position:relative;display:grid;align-items:center;overflow:hidden;background:linear-gradient(95deg,#0b1736d9,#192f63a0)}.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;filter:saturate(1.24) contrast(1.12) brightness(1.08)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,32,.66) 0%,rgba(7,17,42,.38) 47%,rgba(7,17,42,.08) 100%)}.hero .wrap{position:relative;z-index:1;padding:86px 0}.eyebrow{color:var(--gold);font-size:.85rem;letter-spacing:.14em;font-weight:700}.hero h1{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(2.25rem,5vw,4.7rem);line-height:1.45;font-weight:500;max-width:780px;margin:20px 0}.hero p{max-width:660px;color:#e8eafa;font-size:clamp(1rem,1.7vw,1.2rem)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{display:inline-block;border-radius:100px;background:linear-gradient(120deg,#f4c9dd,#dba2da);color:#22264a;text-decoration:none;font-weight:750;padding:13px 25px;border:0;cursor:pointer}.btn.outline{background:transparent;color:#fff;border:1px solid #ffffff88}.section{padding:90px 0}.section.alt{background:linear-gradient(145deg,#172a55,#101c3e)}.section h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:500;line-height:1.45;margin:10px 0 20px}.lead{color:var(--muted);max-width:780px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.intro img{width:100%;max-height:600px;object-fit:contain;border-radius:24px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.feature{border:1px solid #ffffff29;border-radius:20px;background:#ffffff0b;padding:24px}.feature strong{display:block;color:var(--pink);font-size:1.12rem}.feature p{color:var(--muted);font-size:.93rem;margin-bottom:0}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}.gallery figure{margin:0}.gallery img{aspect-ratio:9/17;object-fit:cover;border-radius:18px;border:1px solid #ffffff22;width:100%}.gallery figcaption{font-size:1.16rem;font-weight:700;line-height:1.5;text-align:center;margin-top:13px;color:#fff;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.3)}.video{width:100%;max-height:620px;object-fit:contain;border-radius:22px;background:#050b20;border:1px solid #ffffff33}.codegrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}.codecard{background:#f8f4fb;color:#252544;padding:28px;border-radius:22px}.codecard h3{margin-top:0;font-size:1.45rem}.codecard ol{padding-left:22px}.codecard li{margin:10px 0}.codecard small{color:#4b506b}.pending{background:#eee5f5;color:#6e487c;display:inline-block;padding:3px 10px;border-radius:30px;font-size:.78rem}.request{background:linear-gradient(120deg,#3a2e69,#643a76);border-radius:28px;padding:45px}.request p{color:#e4dcec}.request .note{font-size:.88rem}.footer{padding:45px 0;border-top:1px solid #ffffff25;color:#b7c1df;font-size:.9rem}.footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.notice{font-size:.85rem;color:#b9c5e4}.sr-only{position:absolute;left:-9999px}@media(max-width:800px){.navlinks{gap:10px;font-size:.72rem}.hero{min-height:580px}.hero .wrap{padding:80px 0}.intro{grid-template-columns:1fr;gap:18px}.intro img{max-height:450px}.features{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.codegrid{grid-template-columns:1fr}.section{padding:65px 0}}@media(max-width:480px){.navlinks a:first-child{display:none}.hero h1{font-size:2.2rem}.features{grid-template-columns:1fr}.request{padding:28px 20px}.codecard{padding:22px}.navlinks{gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.release-banner{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;border:1px solid #ffe5ae99;border-radius:15px;background:#101a3cdb;box-shadow:0 8px 28px #0005;color:#fff;font-weight:700}.release-banner strong{font-size:clamp(1.2rem,2.7vw,1.85rem);color:#ffe3a7}.release-banner .chip{background:#f8d8e8;color:#272047;border-radius:30px;padding:4px 12px;font-size:.82rem}.hero-offer{margin-top:23px;max-width:700px;padding:22px 25px;background:#101b43e8;border:1px solid #f7d3e18c;border-radius:20px;box-shadow:0 12px 35px #0007}.hero-offer h2{font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.4;margin:0 0 7px;color:#fff;font-weight:800}.hero-offer p{margin:0;color:#f7e9f2}.hero .actions{margin-top:18px}.hero .btn:first-child{font-size:1.06rem;box-shadow:0 6px 25px #dca3c977}.release-strip{background:linear-gradient(100deg,#342552,#624078);border-top:1px solid #f4d5e56b;border-bottom:1px solid #f4d5e56b}.release-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0}.release-strip strong{font-size:clamp(1.1rem,2.2vw,1.5rem)}.release-strip p{margin:2px 0;color:#f3e6f3}@media(max-width:650px){.release-strip .wrap{flex-direction:column;align-items:flex-start}.release-banner{gap:7px;padding:10px 12px}.hero-offer{padding:18px}.hero .wrap{padding:55px 0}}

/* Hero: place press invitation on the right, away from the phone in the video */
.hero .hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:clamp(24px,4vw,65px);align-items:center;min-height:690px}
.hero .hero-copy{min-width:0}
.hero .hero-copy h1{font-size:clamp(2.1rem,4.1vw,4rem)}
.hero .hero-offer{width:100%;max-width:none;margin:0;justify-self:end;background:rgba(9,21,52,.92);backdrop-filter:blur(8px);padding:26px}
.hero .hero-offer h2{font-size:clamp(1.4rem,2.2vw,1.95rem)}
.hero .hero-offer .actions{display:flex;flex-direction:column;align-items:stretch}
.hero .hero-offer .btn{text-align:center}
@media(max-width:800px){.hero .hero-layout{grid-template-columns:1fr;min-height:0;gap:30px}.hero .hero-offer{max-width:500px;justify-self:end;margin-left:auto}.hero .hero-copy h1{font-size:clamp(2rem,6vw,3.1rem)}}
@media(max-width:480px){.hero .hero-layout{gap:22px}.hero .hero-offer{max-width:92%;margin-left:auto;padding:18px}.hero .hero-offer h2{font-size:1.35rem}.hero .hero-offer p{font-size:.92rem}}

a:focus-visible,button:focus-visible{outline:3px solid #ffe3a7;outline-offset:4px}section[id]{scroll-margin-top:70px}
/* Reader giveaway emphasis and Japanese sound culture */
.reader-gift{margin:28px 0 24px;padding:26px 30px;border-radius:22px;background:linear-gradient(115deg,#ffe3ed,#f9d9b9);color:#24223c;box-shadow:0 10px 30px #0003}
.reader-gift-label{display:block;color:#6d365c;font-size:.82rem;font-weight:800;letter-spacing:.13em}
.reader-gift p{margin:10px 0 0;font-size:clamp(1.35rem,2.7vw,2rem);font-weight:800;line-height:1.55;letter-spacing:.015em}
.culture{background:linear-gradient(135deg,#162848,#283b57 60%,#192443)}
.culture-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
.culture-grid>div>p{font-size:1.08rem;color:#e6ebf5;line-height:2.05;margin:0 0 20px}
.culture-aside{border-left:3px solid #f6d7ac;padding:16px 0 16px 26px}
.culture-aside strong{font-size:1.35rem;color:#ffe2b6}
.culture-aside span{font-size:.75rem;letter-spacing:.12em;color:#cbd6e9;font-weight:700}
@media(max-width:800px){.culture-grid{grid-template-columns:1fr;gap:20px}.reader-gift{padding:22px}.desktop-only{display:none}}

/* Code redemption guide only; all other site design is unchanged. */
.codecard .guide-intro{line-height:1.75;margin:12px 0 18px}
.codecard .redeem-steps{margin:0 0 20px;padding-left:25px}
.codecard .redeem-steps li{padding-left:3px;margin:0 0 17px;line-height:1.65}
.codecard .redeem-steps li::marker{color:#88547b;font-weight:800}
.codecard .redeem-steps li>strong{display:block;font-size:1.04rem;color:#282345;margin-bottom:4px}
.codecard .redeem-steps li>span{display:block;font-size:.96rem}
.codecard a{color:#623f93;text-decoration:underline;text-underline-offset:3px}
.codecard a:hover{color:#a3487e}
.redeem-widget{background:#ede7f3;padding:17px;border-radius:15px;margin:18px 0}
.redeem-widget label{display:block;font-size:.95rem;font-weight:800;margin:0 0 10px}
.redeem-form-row{display:flex;flex-direction:column;gap:10px}
.redeem-form-row input{width:100%;min-width:0;border:1px solid #b8a9c8;border-radius:10px;padding:13px 14px;font:inherit;color:#202040;background:#fff}
.redeem-form-row button,.redeem-official-link{display:block;width:100%;box-sizing:border-box;border:0;border-radius:11px;padding:13px 16px;font:inherit;font-weight:800;text-align:center;background:#613e86;color:#fff!important;cursor:pointer;text-decoration:none!important}
.redeem-form-row button:hover,.redeem-official-link:hover{background:#8457a6;color:#fff!important}
.redeem-official-link{margin:12px 0 20px}
.code-status{color:#625779;font-size:.79rem;line-height:1.5;margin:10px 0 0}
.guide-qr{display:flex;align-items:center;gap:14px;border-top:1px solid #ded5e9;border-bottom:1px solid #ded5e9;padding:17px 0;margin-top:18px}
.guide-qr img{display:block;width:102px;height:102px;flex:0 0 102px;object-fit:contain;background:white;border:5px solid white;border-radius:5px}
.guide-qr strong{display:block;font-size:.9rem}
.guide-qr p{margin:4px 0 0;font-size:.83rem;line-height:1.55}
.guide-qr small{font-size:.75rem}
.guide-help{border-bottom:1px solid #ded5e9;margin-top:12px;padding:10px 0}
.guide-help summary{cursor:pointer;font-size:.91rem;font-weight:750;color:#583876;line-height:1.5}
.guide-help p,.guide-help ol{font-size:.84rem;line-height:1.7;color:#4b4b67}
.guide-help ol{margin:9px 0;padding-left:22px}
.guide-help li{margin:6px 0}
.guide-conditions{max-width:900px;font-size:.88rem;color:#cbd4ec;line-height:1.8;margin-top:22px}
@media(max-width:480px){.guide-qr{align-items:flex-start;gap:10px}.guide-qr img{width:84px;height:84px}.guide-qr p{font-size:.78rem}}

.code-highlight{margin:14px 0 18px;padding:16px 18px;border-radius:16px;background:#efe7f5;border:1px solid #d8c6e5}
.code-label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.08em;color:#6a4679;margin-bottom:8px}
.code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.code-string{display:inline-block;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #cdb7de;font-weight:800;font-size:1.08rem;letter-spacing:.03em;word-break:break-all}
.copy-code-btn{display:inline-block;border:0;border-radius:999px;background:#6a4679;color:#fff;padding:10px 16px;font-weight:800;cursor:pointer}
.copy-code-btn:hover{background:#8d5ca1}
.code-meta{margin:11px 0 0;color:#4c4e67;font-size:.9rem;line-height:1.7}
.mini-note{font-size:.88rem;color:#615a73;line-height:1.7;margin:10px 0 0}
.guide-help ol{padding-left:22px}
.guide-help li{margin:8px 0}


/* Android install QR: larger on desktop and mobile, other site styles unchanged. */
.guide-qr img.android-qr{width:144px;height:144px;flex:0 0 144px}
@media(max-width:480px){.guide-qr img.android-qr{width:120px;height:120px;flex:0 0 120px}}

/* Language switcher (multilingual edition) */
.lang{position:relative}.lang summary{list-style:none;cursor:pointer;border:1px solid #ffffff55;border-radius:30px;padding:5px 12px;font-size:.82rem;color:#e4e9fa;white-space:nowrap}.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;background:#0d1a40;border:1px solid #ffffff33;border-radius:14px;min-width:170px;box-shadow:0 10px 30px #0008;max-height:70vh;overflow:auto}
.lang li a{display:block;padding:7px 12px;border-radius:9px;text-decoration:none;font-size:.9rem;color:#e4e9fa}.lang li a:hover,.lang li a[aria-current]{background:#ffffff1a;color:#ffe3a7}
.navright{display:flex;align-items:center;gap:16px}
@media(max-width:800px){.navright{gap:10px}}
:lang(zh-CN) body,:lang(zh-CN){font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
:lang(ko){font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all}
/* QA fix 2026-11-12: prevent horizontal overflow on narrow screens (long redeem URL / codes in grid) */
.codegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.codecard{min-width:0;overflow-wrap:anywhere}
@media(max-width:800px){.codegrid{grid-template-columns:minmax(0,1fr)}}
/* QA fix: long translated nav labels must not push the language switcher off-screen */
.navright{min-width:0;flex:1 1 auto;justify-content:flex-end}.navlinks{min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.navlinks::-webkit-scrollbar{display:none}.lang{flex:0 0 auto}
/* QA fix: long single words in translated captions/headings (de, nl, ru …) */
.gallery figure{min-width:0}.gallery figcaption,.feature strong,.section h2,.hero h1,.codecard h3{overflow-wrap:break-word;hyphens:auto}
@media(max-width:480px){.gallery figcaption{font-size:1rem}}
