@charset "UTF-8";
/* Role Player — a light-filled photo journal. All assets are local. */
html,body{overflow-x:clip}h1,h2,h3,.hero h1,.photo-sticker strong{letter-spacing:0!important}
:root{color-scheme:light;--cream:#fdfbf7;--mint:#e6f4f1;--pink:#ffd1dc;--lemon:#fff2cc;--coral:#ff6f61;--rose:#e9576c;--gold:#f4c430;--ink:#283a34;--muted:#62736a;--line:#dfe6df;--white:#fff;--wrap:1200px;--radius:20px;--shadow:0 14px 46px #344e3b0b;--body:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:106px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{color:inherit}a,button{touch-action:manipulation}button{cursor:pointer}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3,dl,dd{margin:0}ul,ol{margin:0;padding:0}svg{flex-shrink:0}.wrap{width:min(var(--wrap),calc(100% - 88px));margin-inline:auto}.section{padding-block:104px}section[id]{scroll-margin-top:100px}h1,h2,h3{font-weight:750;line-height:1.45;letter-spacing:-.035em}h2{font-size:clamp(27px,2.5vw,36px)}h3{font-size:20px}p{overflow-wrap:break-word}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #25816b;outline-offset:5px}::selection{background:var(--pink);color:var(--ink)}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:10px;z-index:100;transform:translateY(-170%);background:var(--ink);color:white;padding:8px 18px;border-radius:8px}.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid #e9e9e1;background:#fdfbf7f5;transition:box-shadow .2s}.site-header.scrolled{box-shadow:0 4px 20px #243b2d08}.header-inner{height:88px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand img{width:43px;height:43px;object-fit:cover;object-position:50% 15%;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #ead3d3}.brand-type{font-size:17px;font-weight:850;line-height:1.25;letter-spacing:.035em}.brand-type>span,.footer-brand>span{display:block;font-weight:400;font-size:10px;letter-spacing:.13em;margin-top:5px;color:var(--muted)}.main-nav{display:flex;gap:24px;align-items:center;margin-left:auto;font-size:13px;white-space:nowrap}.main-nav a{position:relative;padding-block:10px}.main-nav a:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--coral);transform:scaleX(0);transition:transform .2s}.main-nav a:hover:after,.main-nav a[aria-current=true]:after{transform:scaleX(1)}.header-actions{display:flex;align-items:center;gap:18px}.language-switch{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.language-switch a{padding:4px 2px;min-height:32px;display:inline-flex;align-items:center}.language-switch a[aria-current=page]{color:var(--ink);font-weight:750;border-bottom:1px solid var(--ink)}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--coral);border:1px solid var(--coral);color:#382c27;border-radius:8px;padding:14px 26px;font-size:15px;line-height:1.5;font-weight:750;min-height:52px;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}.button:hover{background:#ff8276;border-color:#ff8276;transform:translateY(-2px);box-shadow:0 8px 20px #ff6f6130}.button-small{min-height:40px;padding:9px 14px;gap:12px;font-size:12px;border-radius:7px}.button svg{width:17px;height:17px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:.86fr 1.14fr;gap:54px;align-items:center;min-height:683px;padding-block:76px 86px}.eyebrow,.section-kicker{font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--muted);line-height:1.6}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:25px}.sun-dot{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px #ff6f6110}.hero h1{font-size:clamp(32px,3.6vw,49px);line-height:1.4;letter-spacing:-.055em}.hero h1 .en-title{display:block;font-family:"Arial Black","Segoe UI",sans-serif;font-size:.7em;font-weight:900;letter-spacing:.045em;line-height:1.2;margin-bottom:12px}.hero h1 .accent{color:#c64e4f}.hero-tagline{font-size:17px;font-weight:600;letter-spacing:.045em;margin-top:22px}.hero-description{font-size:14px;line-height:2.05;color:var(--muted);max-width:390px;margin-top:12px}.hero-buttons{display:flex;align-items:center;gap:30px;margin-top:28px}.text-link{display:inline-flex;gap:20px;font-size:13px;align-items:center}.text-link:hover,.inline-link:hover{color:#b13e3b}.text-link>span{font-size:20px}.hero-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;margin-top:24px;letter-spacing:.06em}.hero-note svg{width:16px;height:16px}.hero-art{position:relative;min-width:0;padding:12px 2px 86px 10px;isolation:isolate}.hero-art:before{content:"";position:absolute;z-index:-1;inset:-38px -10px 8px -16px;border-radius:45% 55% 48% 40%;background:radial-gradient(circle at 70% 30%,#fff2cc60,transparent 68%),var(--mint);transform:rotate(-9deg)}.hero-art:after{content:"";position:absolute;right:17px;top:-14px;width:56px;height:19px;background:#f4c43055;transform:rotate(24deg);z-index:2}.photo{background:var(--white);padding:12px;box-shadow:0 9px 27px #263e3020;border:1px solid #eaeee6}.photo-main{transform:rotate(2deg);position:relative;z-index:1}.photo-main>img{width:100%;aspect-ratio:16/9;object-fit:cover}.photo-topline{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.15em;color:var(--muted);height:24px;padding-bottom:8px}.photo-topline svg{width:16px;height:16px;color:#b59c3a}.photo figcaption{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:13px 5px 3px;letter-spacing:.08em}.photo-number{font-size:9px;color:var(--muted)}.photo-small{position:absolute;right:-6px;bottom:3px;width:38%;transform:rotate(-7deg);z-index:3;padding:8px}.photo-small img{aspect-ratio:16/9;object-fit:cover;object-position:center 35%;width:100%}.photo-small figcaption{font-size:9px;padding:8px 3px 2px}.photo-sticker{position:absolute;left:-23px;bottom:38px;z-index:4;background:var(--lemon);width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);font-size:12px;line-height:1.5;border:1px dashed #dbc677;outline:5px solid var(--lemon)}.photo-sticker strong{font-size:18px;letter-spacing:-.04em}.photo-sticker span{font-family:Georgia,serif;font-size:10px;font-style:italic;margin-top:5px}.hero-caption{position:absolute;bottom:-16px;left:33%;font-family:Georgia,serif;font-style:italic;font-size:18px;color:#6d7e72;transform:rotate(-5deg)}.orbit{position:absolute;width:17px;height:17px;border:1px solid #c7d9cf;border-radius:50%;z-index:-1}.orbit-one{top:-42px;left:12%}.orbit-two{right:-19px;bottom:54px;width:10px;height:10px;background:var(--pink);border:0}.facts-bar{border-block:1px solid var(--line);background:#f7f8f1}.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:25px}.fact{display:grid;grid-template-columns:35px 1fr;align-items:center;column-gap:13px;padding-left:37px;border-right:1px solid #dfe5da}.fact:first-child{padding-left:0}.fact:last-child{border-right:0}.fact svg{width:27px;height:27px;grid-row:1/3;color:#75897c}.fact dt{font-size:10px;color:var(--muted);line-height:1.5;letter-spacing:.12em}.fact dd{font-size:14px;font-weight:650;line-height:1.7}.section-kicker{margin-bottom:14px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:40px}.section-description{max-width:360px;font-size:13px;color:var(--muted);line-height:1.9}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}.intro-visual{position:relative;padding:15px 0 10px 8px}.intro-visual:before{content:"";position:absolute;inset:-10px 22px 12px -16px;background:var(--pink);opacity:.42;transform:rotate(-4deg);border-radius:4px}.intro-photo{position:relative;transform:rotate(-2deg)}.intro-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:48% 30%}.intro-photo figcaption{font-size:8px}.image-note{position:absolute;bottom:-7px;right:-15px;background:var(--lemon);font-size:11px;padding:7px 16px;box-shadow:0 3px 12px #8b7c3b15;transform:rotate(-4deg);letter-spacing:.05em}.prose p{font-size:14px;color:var(--muted);line-height:2.05;margin-top:20px}.inline-link{display:inline-flex;align-items:center;gap:16px;font-size:12px;font-weight:650;margin-top:24px;border-bottom:1px solid #bdcabc;padding-bottom:5px}.inline-link svg{width:16px;height:16px}.content-section{background:#eff7f2;border-block:1px solid #e1ebe2}.character-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:stretch}.character-image{position:relative;min-height:355px}.character-image img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:16px}.image-chip{position:absolute;bottom:18px;left:18px;padding:5px 12px;border:1px solid #ffffff80;background:#fdfbf7f0;font-size:10px;border-radius:5px;letter-spacing:.1em}.character-profiles{display:grid;gap:18px}.character-card{border:1px solid #dde9df;background:#fdfbf7d9;border-radius:14px;padding:25px 29px;position:relative;overflow:hidden}.character-card:nth-child(2){background:#fff9ec}.character-label{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#9a6f70;letter-spacing:.08em}.character-card h3{font-size:24px;margin:2px 0 10px}.character-card p{font-size:13px;color:var(--muted);line-height:1.9}.character-index{position:absolute;right:22px;top:12px;font-family:Georgia,serif;font-size:42px;color:#d5e5d9;font-style:italic}.character-card:nth-child(2) .character-index{color:#ebdfbb}.character-tags{display:flex;gap:6px;margin-top:13px;flex-wrap:wrap}.character-tags span{font-size:10px;line-height:1.5;padding:4px 9px;border:1px solid #d9e2d5;border-radius:4px}.gallery-heading{display:flex;align-items:center;justify-content:space-between;margin:42px 0 20px;gap:25px}.gallery-heading h3{font-size:17px}.gallery-heading p{font-size:11px;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.gallery-card{border:1px solid #dce6db;background:var(--cream);border-radius:12px;overflow:hidden}.gallery-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.gallery-card figcaption{padding:15px 19px 17px}.gallery-card h3{font-size:14px;letter-spacing:0}.gallery-card p{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.8}.guide-tabs{display:none;gap:10px;margin-bottom:27px;border-bottom:1px solid var(--line);padding-bottom:17px}.js .guide-tabs{display:flex}.guide-tab{border:1px solid var(--line);background:transparent;font-size:13px;padding:10px 22px;border-radius:7px;min-height:44px;transition:background .15s}.guide-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:white}.guide-tab:hover{border-color:var(--ink)}.guide-panel+.guide-panel{margin-top:34px}.js .guide-panel+.guide-panel{margin-top:0}.guide-panel-title{font-size:18px;margin-bottom:20px}.js .guide-panel-title{display:none}.guide-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide-step{padding:26px 24px;border:1px solid var(--line);border-radius:12px;background:#fffefb}.step-number{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;background:var(--mint);font-size:12px;font-weight:700;margin-bottom:20px}.guide-step h3{font-size:16px;letter-spacing:0;margin-bottom:11px}.guide-step p{font-size:12px;line-height:1.95;color:var(--muted)}.guide-callout{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;margin-top:22px;background:#fff7e0;border-radius:8px}.guide-callout svg{width:18px;height:18px;color:#8c7336;margin-top:3px}.guide-callout p{font-size:11px;line-height:1.9;color:#77684a}.feature-section{background:#f9eee9;border-block:1px solid #efe3dc}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 42px}.feature-card{padding:28px 0;border-bottom:1px solid #e7dcd5}.feature-card:nth-last-child(-n+3){border-bottom:0}.feature-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#fdfbf7;margin-bottom:16px;color:#8c655c}.feature-icon svg{width:21px;height:21px}.feature-card h3{font-size:16px;letter-spacing:0}.feature-card p{font-size:12px;color:#726c62;line-height:1.95;margin-top:9px}.updates-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:45px}.update-item{display:grid;grid-template-columns:33px 1fr;column-gap:16px;padding:24px 0;border-top:1px solid var(--line)}.update-index{font-family:Georgia,serif;color:#9aa99c;font-style:italic;font-size:19px;line-height:1.6}.update-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}.update-title h3{font-size:15px;letter-spacing:0}.update-type{font-size:9px;font-weight:600;line-height:1.6;padding:3px 7px;background:var(--mint);border-radius:3px;color:#496858;white-space:nowrap}.update-type.fix{background:var(--lemon);color:#796635}.update-type.extra{background:#ffe7eb;color:#995c68}.update-item p{font-size:12px;line-height:1.95;color:var(--muted)}.faq-section{background:#f1f5ed;border-block:1px solid #e5e9dd}.faq-tools{display:none;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}.js .faq-tools{display:flex}.faq-search{display:flex;align-items:center;gap:12px;width:400px;border:1px solid #dbe3d4;background:var(--cream);padding:11px 15px;border-radius:7px}.faq-search svg{width:18px;height:18px;color:var(--muted)}.faq-search input{border:0;background:transparent;outline:0;min-width:0;width:100%;font-size:12px;color:var(--ink);height:24px}.faq-search:focus-within{outline:2px solid #25816b;outline-offset:3px}.faq-search input:focus-visible{outline:0}.faq-count{font-size:11px;color:var(--muted)}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start}.faq-item{border-top:1px solid #dbe3d4;align-self:start}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-size:13px;font-weight:600;padding:20px 0;line-height:1.7}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:21px;font-weight:350;color:#718472;line-height:1;flex-shrink:0}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 24px 21px 0;font-size:12px;line-height:1.95;color:var(--muted)}.faq-answer a{border-bottom:1px solid #a7bbac}.faq-empty{padding:32px;text-align:center;color:var(--muted);font-size:14px}.closing-section{padding-block:75px}.closing-card{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;background:var(--mint);border:1px solid #dceae1;border-radius:18px;padding:46px 52px;position:relative;overflow:hidden}.closing-card:before{content:"";position:absolute;width:230px;height:230px;right:-60px;top:-70px;border:1px solid #d0e2d7;border-radius:50%;pointer-events:none}.closing-copy h2{font-size:29px;max-width:440px}.closing-copy p:not(.section-kicker){font-size:12px;max-width:420px;line-height:1.9;color:var(--muted);margin-top:16px}.closing-copy .button{margin-top:24px;min-height:45px;padding:11px 20px;font-size:13px}.closing-art{padding:8px 8px 0;background:white;transform:rotate(3deg);box-shadow:0 7px 22px #53694c18;position:relative;max-width:370px;justify-self:end}.closing-art img{width:100%;aspect-ratio:616/353;object-fit:cover}.closing-art figcaption{font-size:8px;letter-spacing:.1em;padding:10px}.site-footer{padding-block:22px 26px;border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;gap:30px;padding-bottom:24px}.footer-brand{font-weight:850;font-size:16px;line-height:1.3;letter-spacing:.04em}.footer-brand>span{font-size:9px}.footer-sources{display:flex;gap:22px;margin-left:auto;font-size:11px;color:var(--muted)}.footer-sources a:hover{text-decoration:underline}.back-top{display:flex;align-items:center;gap:12px;font-size:10px}.back-top span{border:1px solid #dce4d9;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px}.footer-bottom{display:flex;justify-content:space-between;gap:22px;border-top:1px solid var(--line);padding-top:19px;color:var(--muted);font-size:9px}.footer-bottom .language-switch{font-size:10px}.standalone{min-height:80vh;display:grid;place-items:center;text-align:center;padding:70px 24px}.standalone>div{max-width:620px}.standalone .error-code{font-family:Georgia,serif;font-size:100px;line-height:1;color:#a7c7b8;margin-bottom:30px}.standalone p{color:var(--muted);margin:20px 0 28px}.standalone h1{font-size:34px}
@media(min-width:1440px){.hero{min-height:716px}.hero-art{padding-top:20px}.hero-description{max-width:420px}}
@media(max-width:1199px){.wrap{width:calc(100% - 60px)}.header-inner{gap:19px}.main-nav{gap:16px;font-size:12px}.header-actions{gap:12px}.header-actions>.language-switch{display:none}.hero{gap:32px;padding-block:68px 74px;min-height:650px}.hero h1{font-size:41px}.hero-art{padding-bottom:100px}.photo-sticker{width:126px;height:126px;left:-12px;bottom:42px}.photo-sticker strong{font-size:16px}.photo-sticker span{font-size:9px}.section-intro{gap:52px}.fact{padding-left:22px;column-gap:9px}.fact dd{font-size:13px}.character-card{padding:22px}.feature-grid{column-gap:30px}.closing-card{padding:40px}}
@media(max-width:900px){.wrap{width:calc(100% - 44px)}.header-inner{height:76px;gap:18px}.main-nav{gap:15px}.brand-type{font-size:15px}.brand img{width:38px;height:38px}.brand-type>span{font-size:8px}.header-actions>.button{display:none}.hero{gap:25px;min-height:600px;padding-block:60px}.hero h1{font-size:35px}.hero-description{font-size:13px}.hero-tagline{font-size:14px}.hero-buttons{gap:19px}.hero-buttons .button{padding:12px 20px;min-height:48px}.hero-art{padding-bottom:80px}.photo-sticker{width:108px;height:108px;bottom:23px;left:-5px;font-size:10px}.photo-sticker strong{font-size:14px}.photo-sticker span{font-size:8px}.photo-small{width:43%;bottom:4px;right:-5px}.photo figcaption{font-size:9px}.hero-caption{font-size:14px;left:23%}.section{padding-block:76px}.section-heading{gap:28px;align-items:flex-start}.section-description{max-width:300px;font-size:12px}.section-intro{gap:36px}.intro-copy h2{font-size:27px}.prose p{font-size:13px}.fact{padding-left:14px;grid-template-columns:25px 1fr;column-gap:7px}.fact svg{width:22px;height:22px}.fact dt{font-size:9px}.fact dd{font-size:12px}.character-layout{gap:23px;grid-template-columns:1fr 1fr}.character-card{padding:18px}.character-card h3{font-size:22px}.character-card p{font-size:12px}.character-index{right:15px;top:9px;font-size:35px}.gallery-grid{gap:15px}.gallery-card figcaption{padding:13px}.gallery-card h3{font-size:13px}.guide-step{padding:22px 18px}.guide-step h3{font-size:14px}.guide-tabs{gap:8px}.guide-tab{padding:9px 18px}.feature-grid{column-gap:28px}.updates-grid{column-gap:30px}.update-title{gap:8px}.faq-grid{gap:0 28px}.closing-card{padding:34px;gap:28px}.closing-copy h2{font-size:25px}.footer-sources{gap:15px}.footer-top{gap:20px}}
@media(max-width:720px){html{scroll-padding-top:85px}.wrap{width:calc(100% - 40px)}.header-inner{height:70px;justify-content:space-between;gap:14px}.brand img{width:37px;height:37px}.brand-type{font-size:15px}.header-actions{display:none}.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:42px;height:42px;background:transparent;border:1px solid #dfe5da;border-radius:8px;margin-left:auto;position:relative;z-index:42}.js .menu-toggle{display:flex}.menu-toggle span{width:18px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.main-nav{position:static;display:flex;flex-wrap:wrap;gap:3px 18px;font-size:11px;white-space:normal}.header-inner{height:auto;min-height:70px;flex-wrap:wrap;padding-block:14px}.main-nav{width:100%;padding-bottom:5px}.js .header-inner{height:70px;padding-block:0;flex-wrap:nowrap}.js .main-nav{position:absolute;top:69px;left:0;right:0;background:var(--cream);padding:18px 22px 22px;display:none;border-bottom:1px solid var(--line);box-shadow:0 12px 18px #25382b08;gap:0}.js .main-nav.open{display:grid;grid-template-columns:1fr 1fr}.main-nav a{padding:11px 12px;min-height:44px}.main-nav a:after{left:12px;right:12px;bottom:5px}.hero{grid-template-columns:1fr;gap:43px;padding-block:42px 53px;min-height:0}.hero-copy{max-width:580px}.eyebrow{font-size:9px;margin-bottom:22px;letter-spacing:.13em}.hero h1{font-size:clamp(31px,7.7vw,48px);line-height:1.35}.hero h1 .en-title{font-size:.63em;margin-bottom:10px}.hero-tagline{font-size:15px;margin-top:20px}.hero-description{font-size:13px;max-width:460px;margin-top:10px}.hero-buttons{margin-top:24px;gap:28px}.hero-note{font-size:9px;margin-top:20px}.hero-art{padding:12px 6px 78px 8px;margin:0 9px 10px}.hero-art:before{inset:-17px -8px 0}.hero-art:after{top:-6px;right:15px}.photo-main{padding:9px}.photo-topline{font-size:7px}.photo figcaption{padding-top:10px;font-size:9px}.photo-small{width:35%;bottom:-2px;right:0}.photo-sticker{width:112px;height:112px;left:-6px;bottom:14px}.hero-caption{bottom:-20px;left:34%;font-size:14px}.facts-grid{grid-template-columns:1fr 1fr;padding-block:6px}.fact{padding:18px 14px;grid-template-columns:26px 1fr;gap:0 13px}.fact:first-child{padding-left:14px}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}.fact svg{width:24px;height:24px}.fact dt{font-size:9px}.fact dd{font-size:13px}.section{padding-block:60px}.section-heading{display:block;margin-bottom:29px}.section-description{max-width:100%;margin-top:16px;font-size:12px}.section-kicker{font-size:10px;margin-bottom:12px}h2{font-size:27px}.section-intro{grid-template-columns:1fr;gap:42px}.intro-visual{max-width:580px;margin-inline:12px}.intro-photo img{aspect-ratio:16/9}.intro-photo figcaption{font-size:8px}.image-note{font-size:10px;right:-4px;bottom:-4px}.intro-copy h2{font-size:27px}.prose p{font-size:13px;margin-top:16px}.inline-link{margin-top:18px}.character-layout{grid-template-columns:1fr;gap:22px}.character-image{min-height:0}.character-image img{height:auto;aspect-ratio:16/9;object-position:center}.character-profiles{grid-template-columns:1fr 1fr;gap:14px}.character-card{padding:19px 17px}.character-label{font-size:10px}.character-card h3{font-size:23px}.character-card p{font-size:11px}.character-index{font-size:31px;right:12px;top:8px}.character-tags{gap:5px}.character-tags span{font-size:9px;padding:3px 6px}.gallery-heading{margin:32px 0 17px;display:block}.gallery-heading p{margin-top:8px}.gallery-grid{grid-template-columns:1fr;gap:17px}.gallery-card{display:grid;grid-template-columns:44% 56%;align-items:stretch}.gallery-card img{height:100%;aspect-ratio:auto;min-height:125px;object-position:center}.gallery-card figcaption{padding:17px}.gallery-card h3{font-size:14px}.gallery-card p{font-size:11px;line-height:1.8}.guide-tabs{gap:7px;overflow-x:auto;padding:3px 1px 17px;scrollbar-width:thin}.guide-tab{font-size:11px;white-space:nowrap;flex-shrink:0;padding:9px 15px;min-height:42px}.guide-steps{grid-template-columns:1fr;gap:13px}.guide-step{position:relative;padding:21px 20px 21px 68px}.step-number{position:absolute;top:22px;left:20px;width:29px;height:29px;font-size:10px;margin:0}.guide-step h3{font-size:15px;margin-bottom:7px}.guide-step p{font-size:12px;line-height:1.95}.guide-callout{padding:15px;gap:9px}.guide-callout p{font-size:10px}.feature-grid{grid-template-columns:1fr 1fr;gap:0 23px}.feature-card{padding-block:24px}.feature-card:nth-last-child(-n+3){border-bottom:1px solid #e7dcd5}.feature-card:last-child{border-bottom:0}.feature-icon{margin-bottom:13px}.feature-card h3{font-size:14px}.feature-card p{font-size:11px}.updates-grid{grid-template-columns:1fr}.update-item{padding-block:21px;grid-template-columns:28px 1fr;column-gap:12px}.update-title h3{font-size:14px}.update-item p{font-size:12px}.faq-tools{gap:12px;align-items:flex-start;flex-direction:column}.faq-search{width:100%;padding:10px 13px}.faq-count{font-size:10px}.faq-grid{grid-template-columns:1fr}.faq-item summary{font-size:13px;padding-block:18px}.faq-answer{font-size:12px}.closing-section{padding-block:46px}.closing-card{grid-template-columns:1fr;padding:30px 26px 34px;gap:36px}.closing-copy h2{font-size:25px}.closing-copy p:not(.section-kicker){font-size:12px}.closing-art{max-width:340px;justify-self:center;transform:rotate(2deg);width:100%;margin-bottom:5px}.footer-top{align-items:flex-start;flex-wrap:wrap;padding-block:7px 20px;gap:20px}.footer-brand{font-size:15px}.footer-sources{margin-left:0;order:3;width:100%;gap:20px;flex-wrap:wrap;font-size:10px}.back-top{margin-left:auto}.footer-bottom{display:block;font-size:9px;line-height:1.8}.footer-bottom .language-switch{margin-top:14px}.site-footer{padding-bottom:24px}html[lang=en] .hero h1{font-size:39px}html[lang=en] .hero h1 .en-title{font-size:21px}html[lang=en] .character-card h3{font-size:19px}html[lang=en] .feature-grid{column-gap:20px}html[lang=en] .feature-card h3{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}.button:hover{transform:none}}
@media print{.site-header,.hero-buttons,.hero-note,.guide-tabs,.faq-tools,.closing-section,.footer-sources,.back-top,.language-switch,.skip-link{display:none!important}body{color:black;background:white;font-size:11pt}.wrap{width:100%;max-width:none}.section{padding-block:25px}.hero{padding-block:10px;min-height:0}.guide-panel[hidden],.faq-item[hidden]{display:block!important}.faq-item>div{display:block!important}.faq-item summary:after{display:none}.photo{box-shadow:none}.feature-section,.content-section,.faq-section{background:white}.section-heading,.character-card,.guide-step,.faq-item,.update-item{break-inside:avoid}.guide-steps{grid-template-columns:1fr 1fr}.photo-small,.photo-sticker{display:none}}

/* Content-title, icon and single-column card refinements. */
.hero h1{font-size:43px}.hero h1,.section h2{width:fit-content;max-width:100%;background:linear-gradient(105deg,#283a34 0%,#b43f55 52%,#a87300 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.hero h1 .accent{color:transparent}.section h2{font-size:29px;line-height:1.55;overflow-wrap:anywhere}.main-nav a{display:inline-flex;align-items:center;gap:6px}.main-nav a svg{width:15px;height:15px;stroke-width:1.7}.guide-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px}.guide-tab svg{width:17px;height:17px}.button svg,.floating-detail svg{stroke-width:1.8}
#updates .section-heading,#faq .section-heading{display:block;margin-bottom:34px}#updates .section-description,#faq .section-description{max-width:760px;margin-top:13px}.updates-grid{display:grid;grid-template-columns:1fr;gap:16px}.update-item{display:block;padding:25px 28px 27px;border:1px solid #dce6df;border-radius:8px;background:#fffefb;box-shadow:0 7px 22px #344e3b08}.update-title{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 0 13px;padding-bottom:13px;border-bottom:1px solid #e6ece6}.update-title h3{font-size:17px;line-height:1.55}.update-index{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:var(--mint);font-family:Georgia,serif;color:#597064;font-size:15px;line-height:1}.update-item p{font-size:13px;line-height:2;color:var(--muted)}
.faq-grid{display:grid;grid-template-columns:1fr;gap:13px}.faq-item{border:1px solid #d9e4d8;border-radius:8px;background:var(--cream);overflow:hidden;box-shadow:0 6px 20px #344e3b07}.faq-item summary{justify-content:flex-start;padding:20px 22px;font-size:14px;line-height:1.75}.faq-item summary:after{margin-left:auto}.faq-question-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--mint);color:#557366;flex:0 0 30px}.faq-question-icon svg{width:17px;height:17px}.faq-item[open] summary{border-bottom:1px solid #dfe7db;background:#fffefb}.faq-answer{padding:18px 22px 21px 64px;font-size:13px;line-height:2}
.floating-detail{position:fixed;right:24px;bottom:24px;z-index:45;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 17px;border:1px solid #d95047;border-radius:8px;background:var(--coral);color:#382c27;font-size:13px;font-weight:750;box-shadow:0 12px 28px #7f302a38;transition:transform .2s,background .2s,box-shadow .2s}.floating-detail:hover{background:#ff8276;transform:translateY(-3px);box-shadow:0 16px 34px #7f302a42}.floating-detail:focus-visible{outline:3px solid #25816b;outline-offset:4px}.floating-detail svg{width:17px;height:17px}.site-footer{padding-bottom:90px}
@media(max-width:1199px){.hero h1{font-size:39px}.section h2{font-size:28px}.main-nav{gap:13px}.main-nav a{gap:4px}.main-nav a svg{width:14px;height:14px}}
@media(max-width:900px){.hero h1{font-size:35px}.section h2{font-size:27px}.main-nav a svg{display:none}}
@media(max-width:720px){.hero h1{font-size:31px}.section h2{font-size:24px;line-height:1.6}.main-nav a svg{display:block;width:16px;height:16px}.js .main-nav.open a{display:flex;gap:9px}.update-item{padding:20px 18px 22px}.update-title{grid-template-columns:34px minmax(0,1fr);gap:10px}.update-title h3{font-size:15px}.update-type{grid-column:2;justify-self:start}.update-item p{font-size:12px;line-height:1.95}.faq-item summary{padding:17px 16px;font-size:13px;gap:11px}.faq-answer{padding:16px 18px 19px;font-size:12px}.faq-question-icon{width:28px;height:28px;flex-basis:28px}.floating-detail{right:14px;bottom:14px;min-height:48px;padding:10px 14px;font-size:12px}.floating-detail svg{width:15px;height:15px}.site-footer{padding-bottom:82px}}
@media(max-width:380px){.hero h1{font-size:29px}.section h2{font-size:22px}.floating-detail{gap:7px}.floating-detail>svg:first-child{display:none}}
@media print{.floating-detail{display:none!important}.hero h1,.section h2{background:none;color:black;-webkit-text-fill-color:initial}.site-footer{padding-bottom:24px}}

/* Unified corner system: modules 16px, images 12px, tags 4px, actions pill-shaped. */
.photo,.character-card,.gallery-card,.guide-step,.guide-callout,.update-item,.faq-item,.faq-search,.closing-card{border-radius:16px}
.intro-visual:before{border-radius:16px}
.photo img,.character-image img,.gallery-card img,.closing-art img{border-radius:12px}
.image-chip,.image-note,.character-tags span,.update-type{border-radius:4px}
.button,.button-small,.guide-tab,.menu-toggle,.floating-detail,.skip-link{border-radius:999px}

/* Mouse hover system: 0.3s transitions without changing the base layout. */
.photo,.character-card,.gallery-card,.guide-step,.guide-callout,.feature-card,.update-item,.faq-item{transition:transform .3s ease,translate .3s ease,box-shadow .3s ease,border-color .3s ease,background-color .3s ease}
.button,.button-small,.guide-tab,.menu-toggle,.floating-detail,.skip-link,.text-link,.inline-link,.back-top{transition:transform .3s ease,filter .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
.photo img,.character-image img,.gallery-card img,.closing-art img,.brand img{transition:transform .3s ease}
.photo,.character-image,.gallery-card,.closing-art{overflow:hidden}
.main-nav a:after{transform-origin:left center;transition:transform .3s ease}

@media(hover:hover) and (pointer:fine){
  .character-card:hover,.gallery-card:hover,.guide-step:hover,.guide-callout:hover,.feature-card:hover,.update-item:hover,.faq-item:hover{transform:translateY(-6px);border-color:#efaaa6;box-shadow:0 16px 36px #c7526030,0 0 22px #ffd1dc8c;background-color:#fffefb}
  .photo:hover{translate:0 -6px;box-shadow:0 16px 36px #c7526030,0 0 22px #ffd1dc8c}
  .button:hover,.button-small:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.08)}
  .floating-detail:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.08)}
  .guide-tab:hover,.menu-toggle:hover,.skip-link:hover,.text-link:hover,.inline-link:hover,.back-top:hover{transform:scale(1.04);filter:brightness(1.08)}
  .photo:hover img,.character-image:hover img,.gallery-card:hover img,.closing-art:hover img,.brand:hover img{transform:scale(1.05)}
  .main-nav a:hover:after,.main-nav a[aria-current=true]:after{transform:scaleX(1)}
}

/* High-contrast detail calls to action. */
.detail-button{position:relative;isolation:isolate;overflow:hidden;min-height:58px;padding:15px 30px;gap:14px;border:1px solid #ffffff52;border-radius:999px;background:linear-gradient(135deg,#4e183f 0%,#941d52 48%,#c43d46 100%);color:#fff;font-size:16px;font-weight:800;letter-spacing:.035em;text-shadow:0 1px 2px #2f102280;box-shadow:0 12px 28px #771c493d,0 0 0 1px #ffb4bd38,0 0 24px #ff6f6152;transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease,box-shadow .3s ease,border-color .3s ease}
.detail-button:before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(105deg,transparent 18%,#ffffff4d 46%,transparent 72%);transform:translateX(-135%);transition:transform .3s ease;pointer-events:none}
.detail-button-label,.detail-button svg{position:relative;z-index:1}.detail-button svg{width:19px;height:19px;transition:transform .3s ease}.detail-button-header{min-height:48px;padding:12px 22px;font-size:14px}.detail-button-primary,.detail-button-floating{min-height:60px;padding:16px 32px;font-size:16px}
.floating-detail.detail-button-floating{position:fixed}
@media(hover:hover) and (pointer:fine){.detail-button:hover{background:linear-gradient(135deg,#591a48 0%,#a5215d 48%,#d4494f 100%);color:#fff;filter:brightness(1.09) saturate(1.08);transform:translateY(-3px) scale(1.045);box-shadow:0 17px 38px #771c4952,0 0 0 1px #ffd6da70,0 0 32px #ff6f6173}.detail-button:hover:before{transform:translateX(135%)}.detail-button:hover svg:last-of-type{transform:translateX(4px)}}
.detail-button:active{transform:scale(.97);filter:brightness(.96);box-shadow:0 7px 18px #771c493d,0 0 18px #ff6f6145;transition-duration:.08s}.detail-button:focus-visible{outline:3px solid #25816b;outline-offset:4px}
@media(max-width:720px){.detail-button-primary{min-height:56px;padding:14px 25px;font-size:15px}.floating-detail.detail-button-floating{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;min-height:60px;padding:15px 24px;font-size:16px;justify-content:center;box-shadow:0 15px 36px #771c495c,0 0 0 1px #ffd6da70,0 0 30px #ff6f6166}.site-footer{padding-bottom:112px}}

/* Animated rainbow border for detail buttons; the inner background remains unchanged. */
@property --detail-border-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes detail-border-flow{to{--detail-border-angle:360deg}}
.detail-button:after{content:"";position:absolute;z-index:2;inset:0;padding:2px;border-radius:inherit;background:conic-gradient(from var(--detail-border-angle),#ff3158,#ff9d19,#ffe34d,#48e28a,#28c7ff,#735cff,#e44dff,#ff3158);opacity:0;pointer-events:none;animation:detail-border-flow 1.35s linear infinite;animation-play-state:paused;transition:opacity .3s ease;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.detail-button-label,.detail-button svg{z-index:3}
@media(hover:hover) and (pointer:fine){.detail-button:hover{background:linear-gradient(135deg,#4e183f 0%,#941d52 48%,#c43d46 100%);color:#fff;filter:none;transform:none;border-color:#ffffff75;box-shadow:0 12px 28px #771c493d,0 0 0 1px #ffffff38,0 0 26px #9d63ff66}.detail-button:hover:before{transform:translateX(-135%)}.detail-button:hover:after{opacity:1;animation-play-state:running}.detail-button:hover svg:last-of-type{transform:none}.detail-button:hover:active{transform:scale(.97);transition-duration:.08s}}

/* Non-interactive game tags with transparent fills and highlighted gradient outlines. */
.hero-tags{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px}
.game-tag{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 14px;border-radius:999px;background:transparent;font-size:12px;font-weight:750;line-height:1.5;white-space:nowrap}
.game-tag:before{content:"";position:absolute;z-index:-1;inset:0;padding:1.5px;border-radius:inherit;background:linear-gradient(115deg,#ff3158 0%,#ff9d19 28%,#25c997 56%,#4f7cff 78%,#d748ff 100%);pointer-events:none;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.game-tag>span{color:#c52f60;background:linear-gradient(115deg,#e82258 0%,#d87000 30%,#168d70 58%,#3f5fe0 80%,#b326d0 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:720px){.hero-tags{gap:8px;margin-top:20px}.game-tag{min-height:32px;padding:5px 12px;font-size:11px}}
@media print{.game-tag{border:1px solid #555}.game-tag:before{display:none}.game-tag>span{background:none;color:#333;-webkit-text-fill-color:initial}}

.friend-links{background:var(--mint);border-block:1px solid #d9e8df}
.friend-links-inner{padding-block:15px 20px;border-inline:1px solid #d9e8df;text-align:center}
.friend-links h2{margin:0 0 10px;font-size:21px;line-height:1.5;color:var(--rose)}
.friend-links nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 10px}
.friend-links nav a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 18px;border:1px solid #eab8c1;border-radius:999px;background:#fffdfc;color:#473a50;font-size:13px;font-weight:650;line-height:1.5;transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.friend-links nav a:hover{background:#fff4f6;border-color:var(--rose);color:#a93453;transform:translateY(-2px);box-shadow:0 5px 14px #c94e6a20}
@media(max-width:720px){.friend-links-inner{padding:15px 12px 18px}.friend-links h2{font-size:19px}.friend-links nav{gap:8px}.friend-links nav a{min-height:38px;padding:6px 14px;font-size:12px}}

.screenshots-section{background:#202725;color:#f8f4ed;border-block:1px solid #343e3a}
.screenshots-section .section-heading{margin-bottom:30px}
.screenshots-section .section-kicker{color:#b5c5bd}
.screenshots-section h2{background:linear-gradient(100deg,#fff7e9,#ffc5d2 55%,#a7ded1);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-size:29px}
.screenshots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.screenshot-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;border:1px solid #64726b;border-radius:12px;background:#141917;cursor:zoom-in}
.screenshot-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;transition:transform .3s ease}
@media(hover:hover) and (pointer:fine){.screenshot-thumb:hover img{transform:scale(1.05)}.screenshot-thumb:hover{border-color:#ffc5d2}}
.screenshot-thumb:focus-visible{outline:3px solid #ffc5d2;outline-offset:4px}
.screenshot-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:48px 88px;border:0;background:#090d0cf2;color:#fff;overflow:hidden}
.screenshot-lightbox[open]{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:18px}
.screenshot-lightbox::backdrop{background:#090d0cf2}
.screenshot-lightbox figure{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:14px;width:100%;height:100%;min-height:0;align-content:center}
.lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:12px;box-shadow:0 20px 70px #0009}
.lightbox-caption{color:#f6f0e7;font-size:14px;text-align:center;line-height:1.6}
.lightbox-nav,.lightbox-close{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;background:#ffffff12;color:#fff;font:400 34px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.lightbox-nav:hover,.lightbox-close:hover{background:#ffffff2b;border-color:#fff;transform:scale(1.06)}
.lightbox-prev{grid-column:1;grid-row:1}.lightbox-next{grid-column:3;grid-row:1}
.lightbox-close{position:absolute;top:20px;right:24px;font-size:30px}
.lightbox-count{grid-column:2;grid-row:2;color:#d4d8d4;font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:720px){.screenshots-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.screenshots-section .section-heading{margin-bottom:22px}.screenshots-section h2{font-size:24px}.screenshot-lightbox{padding:56px 14px 28px}.screenshot-lightbox[open]{grid-template-columns:42px minmax(0,1fr) 42px;grid-template-rows:minmax(0,1fr) auto;gap:7px}.lightbox-nav{width:40px;height:40px;font-size:28px}.lightbox-close{top:12px;right:14px;width:42px;height:42px}.lightbox-image{max-height:calc(100vh - 150px)}.lightbox-caption{font-size:12px}}
@media(max-width:380px){.screenshots-grid{gap:8px}}