@charset "UTF-8";
:root{--ink:#343032;--muted:#80777b;--pink:#d9547b;--paper:#faf7f3;--line:#e7dedc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pink);outline-offset:6px}img{max-width:100%;display:block}.header{height:100px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.logo{display:flex;align-items:center;flex-direction:column;line-height:1}.logo>span{font-size:42px;font-weight:900;letter-spacing:-5px}.logo-kanji{font-size:35px}.logo i{font-size:22px;color:var(--pink);font-style:normal;vertical-align:top;letter-spacing:0}.logo small{font-size:9px;letter-spacing:5px;margin-top:7px}.header nav{display:flex;gap:35px;font-size:12px;font-weight:700}.header nav a:hover{color:var(--pink)}.header-cta{font-size:12px;background:var(--ink);color:white;border-radius:4px;padding:16px 23px}.header-cta span{margin-left:25px}.hero{max-width:1440px;margin:auto;min-height:690px;height:calc(100svh - 145px);max-height:850px;position:relative;overflow:hidden;display:flex;align-items:center;padding:35px 8% 85px}.hero-copy{position:relative;z-index:1;width:55%}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:700;color:var(--pink);display:flex;align-items:center;gap:9px}.eyebrow>span{width:7px;height:7px;background:var(--pink);border-radius:50%}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(38px,4.1vw,65px);line-height:1.55;letter-spacing:.03em;margin:29px 0 20px;font-weight:700}h1 span{color:var(--pink)}.hero-description{font-size:13px;line-height:2.25;letter-spacing:.07em}.button{display:inline-flex;align-items:center;gap:60px;background:var(--pink);color:white;padding:21px 28px;border-radius:4px;font-size:13px;font-weight:700;margin-top:24px;box-shadow:0 8px 22px #d9547b20;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:#bf3e65}.hero-note{font-size:10px;letter-spacing:.05em;color:var(--muted);margin-top:16px}.hero-art{position:absolute;right:2%;top:0;width:53%;height:100%}.hero-art>img{position:absolute;width:87%;height:100%;object-fit:cover;object-position:center 12%;right:3%;z-index:1;mask-image:linear-gradient(to bottom,#000 86%,transparent)}.art-circle{position:absolute;inset:9% -3% 4% 0;background:#f4dce2;border-radius:50% 50% 43% 47%;transform:rotate(-12deg);border:15px solid #f8e9eb}.art-word{position:absolute;top:9%;left:0;font-size:115px;font-weight:900;letter-spacing:8px;color:#fff8;writing-mode:vertical-rl}.art-caption{position:absolute;bottom:13%;right:3%;z-index:2;background:#fffc;backdrop-filter:blur(12px);padding:16px 23px;border:1px solid white;transform:rotate(-4deg)}.art-caption small{font-size:8px;letter-spacing:2px;display:block;color:var(--pink);margin-bottom:8px}.art-caption>span{font-size:20px;font-weight:700}.art-caption b{color:var(--pink);margin-left:24px}.hero-flower{position:absolute;color:var(--pink);z-index:2}.flower-one{font-size:52px;top:10%;right:3%;transform:rotate(17deg)}.flower-two{font-size:27px;bottom:28%;left:1%}.scroll{position:absolute;bottom:30px;font-size:8px;letter-spacing:2px;display:flex;align-items:center;gap:20px}.scroll span{font-size:20px;color:var(--pink)}.hero-side{position:absolute;right:2%;top:25%;writing-mode:vertical-rl;font-size:10px;letter-spacing:4px}.ribbon{display:flex;justify-content:space-around;gap:40px;white-space:nowrap;overflow:hidden;border-block:1px solid var(--line);padding:20px 0;color:#95868b;font-size:10px;letter-spacing:3px}.ribbon b{color:var(--pink)}.section{max-width:1180px;margin:auto;padding:100px 45px}.section-heading h2{font-family:"Yu Mincho",serif;font-size:36px;line-height:1.65;letter-spacing:.06em;margin:17px 0}.section-heading>p:last-child{font-size:12px;line-height:2.1;color:var(--muted)}.about-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:60px;align-items:center;margin-top:40px}.game-screen{margin:0;transform:rotate(-2deg);background:white;border:1px solid var(--line);padding:10px;box-shadow:0 15px 30px #4c24300b}.game-screen img{aspect-ratio:16/9;object-fit:cover}.game-screen figcaption{padding:15px 5px 6px;font-size:10px;display:flex;justify-content:space-between}.game-screen figcaption span{font-size:8px;letter-spacing:1px;color:var(--pink)}.features article{display:flex;gap:22px;padding:21px 0;border-bottom:1px solid var(--line)}.features article>span{color:var(--pink);font-size:12px;padding-top:4px}.features h3,.steps h3{font-size:17px;margin:0 0 10px}.features p,.steps p{font-size:12px;line-height:2;color:var(--muted);margin:0}.characters{max-width:none;background:#f3e9e8;padding-bottom:0;overflow:hidden}.characters>.section-heading{max-width:1090px;margin:auto}.character-stage{max-width:1000px;margin:25px auto 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.character-image{position:relative;height:490px;overflow:hidden}.character-image>span{position:absolute;top:28px;font-size:85px;letter-spacing:6px;font-weight:900;color:#fff9}.character-image>img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top;mask-image:linear-gradient(#000 85%,transparent)}.character-info{padding:30px 0 60px}.character-info h3{font-family:"Yu Mincho",serif;font-size:42px;margin:22px 0}.character-info>p:not(.eyebrow){font-size:12px;color:var(--muted)}.character-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:35px 0 17px}.character-picker button{padding:0;border:2px solid transparent;border-radius:50%;aspect-ratio:1;background:#fffa;cursor:pointer;overflow:hidden;transition:transform .2s,border-color .2s}.character-picker button[aria-pressed=true]{border-color:var(--pink);transform:translateY(-5px);box-shadow:0 4px 0 #d9547b20}.character-picker button:hover{transform:translateY(-5px)}.character-picker img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transform:scale(1.55);transform-origin:50% 20%}.character-info>small{font-size:9px;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:40px 0 60px}.steps article{border-top:1px solid var(--line);padding-top:24px}.steps article>span{font-size:9px;color:var(--pink);letter-spacing:2px}.steps h3{margin-top:20px}.faq{max-width:800px;margin:auto}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;padding:23px 0;list-style:none;display:flex;justify-content:space-between;font-size:13px;gap:20px}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--pink)}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{font-size:12px;color:var(--muted);line-height:2;padding:0 20px 20px 0;margin:0}.download{text-align:center;padding:80px 20px;background:radial-gradient(ellipse at center,#f9e8eb,var(--paper));border-top:1px solid var(--line)}.download .eyebrow{justify-content:center}.download h2{font-family:"Yu Mincho",serif;font-size:38px;letter-spacing:.07em;margin:22px 0}.download>p:not(.eyebrow){font-size:12px;color:var(--muted)}.availability{display:inline-flex;align-items:center;gap:20px;border:1px solid #dac8cc;background:#fff8;border-radius:5px;margin:25px 0 5px;padding:18px 30px;text-align:left}.platform-icon{font-size:30px;color:var(--pink)}.availability small{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}.availability strong{font-size:14px}.download .download-note{font-size:10px}footer{max-width:1300px;margin:auto;padding:35px 5%;display:flex;align-items:center;gap:35px;border-top:1px solid var(--line)}footer .logo>span{font-size:30px}footer .logo-kanji{font-size:26px}footer .logo small{font-size:7px}footer>p{font-size:10px;color:var(--muted)}footer>small{margin-left:auto;font-size:9px;color:var(--muted)}.back-top{border:1px solid var(--line);padding:10px 15px}.skip{position:fixed;top:-100px;left:20px;background:white;padding:15px;z-index:10}.skip:focus{top:10px}@media(min-width:1500px){.hero{padding-left:115px}}@media(max-width:900px){.header{height:85px}.header nav{gap:18px;font-size:11px}.header-cta{padding:14px}.header-cta span{margin-left:10px}.hero{min-height:610px;height:680px;padding-left:6%}.hero-art{right:-8%;width:62%;opacity:.92}.hero-copy{width:65%}h1{font-size:43px}.hero-side{display:none}.about-grid{gap:30px}.character-stage{gap:25px}.character-picker{gap:6px}.section{padding:70px 30px}.characters{padding-bottom:0}.character-info h3{font-size:33px}.character-image{height:440px}}@media(max-width:600px){html{scroll-padding-top:20px}.header{height:80px;padding:0 6%}.logo>span{font-size:34px}.logo-kanji{font-size:29px}.header nav{display:none}.header-cta{font-size:10px}.hero{height:auto;min-height:850px;display:block;padding:30px 7% 420px}.hero-copy{width:100%}h1{font-size:39px;line-height:1.5;margin-top:20px}.hero-description{font-size:12px}.hero .button{padding:17px 24px;margin-top:14px}.hero-note{font-size:9px}.hero-art{top:auto;bottom:0;right:-5%;width:92%;height:445px}.hero-art>img{width:82%;object-position:center 20%}.art-circle{inset:5% 0 -10% 5%}.art-word{font-size:75px}.art-caption{bottom:15%;right:8%;padding:12px 17px}.art-caption>span{font-size:16px}.flower-one{right:9%;font-size:35px}.scroll{bottom:22px;z-index:2;font-size:7px;gap:10px}.ribbon{padding:16px 0;font-size:8px;gap:24px}.section{padding:58px 7%}.section-heading h2{font-size:28px}.section-heading>p:last-child{font-size:11px}.about-grid{grid-template-columns:1fr;gap:20px;margin-top:28px}.features h3{font-size:16px}.characters{padding-bottom:0}.character-stage{display:flex;flex-direction:column-reverse;gap:0;margin-top:10px}.character-info{width:100%;padding:5px 0 10px}.character-info h3{font-size:32px;margin:12px 0}.character-picker{margin:25px 0 12px;gap:10px;max-width:360px}.character-image{height:400px;width:100%;max-width:370px}.character-info .eyebrow{font-size:8px}.steps{grid-template-columns:1fr;gap:25px;margin:25px 0 35px}.steps article{padding-top:20px}.steps h3{margin-top:12px}.faq summary{font-size:12px}.download{padding:60px 7%}.download h2{font-size:27px}.availability{padding:16px 22px}footer{gap:18px;flex-wrap:wrap;padding:28px 7%}footer>p{display:none}footer>small{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.store-link:hover{border-color:var(--pink);background:#fff}.store-link strong span{margin-left:12px;color:var(--pink)}
.availability-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:18px;margin:25px 0 5px}
.availability-row .availability{margin:0}
.web-link:hover{border-color:var(--pink);background:#fff}.web-link strong span{margin-left:12px;color:var(--pink)}
@media(max-width:600px){.availability-row{flex-direction:column;align-items:center;gap:14px}.availability-row .availability{width:100%;max-width:340px;justify-content:center}}
.screenshot-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:65px;padding-top:45px;border-top:1px solid var(--line)}
.screenshot-feature{margin:0;min-width:0}
.screenshot-zoom{position:relative;display:block;border:1px solid var(--line);padding:7px;background:white;border-radius:5px}
.screenshot-zoom:hover{border-color:var(--pink)}
.screenshot-feature img{width:100%;height:auto;border-radius:2px}
.image-expand{display:block;text-align:right;padding:9px 5px 3px;font-size:10px;color:var(--pink)}
.screenshot-feature figcaption{padding:12px 5px 0}
.screenshot-feature h3{font-size:20px;margin:12px 0}
.screenshot-feature figcaption>p:last-child{font-size:12px;line-height:2;color:var(--muted);margin-bottom:0}
@media(max-width:700px){.screenshot-gallery{grid-template-columns:1fr;gap:35px;margin-top:40px;padding-top:30px}.screenshot-feature h3{font-size:18px}}
.screenshot-zoom{width:100%;text-align:left;cursor:zoom-in;color:inherit}
body.image-viewer-open{overflow:hidden}
.image-viewer{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:white;cursor:zoom-out}
.image-viewer::backdrop{background:rgba(15,12,17,.9)}
.image-viewer-close{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;padding:24px;border:0;background:transparent;color:inherit;cursor:zoom-out}
.image-viewer-close img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 100px);object-fit:contain;box-shadow:0 15px 60px #0006}
.image-viewer-close span{font-size:12px;line-height:1.6}
.image-viewer-close:focus-visible{outline:2px solid white;outline-offset:-8px}
@media(max-width:600px){.image-viewer-close{padding:12px;gap:14px}.image-viewer-close span{font-size:10px}}
.beginner{padding-bottom:65px}
.beginner-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:45px;align-items:center;margin-top:35px}
.beginner-copy h3{font-family:"Yu Mincho",serif;font-size:25px;line-height:1.6;margin:0 0 18px}
.beginner-copy p,.beginner-copy dd,.beginner .screenshot-feature figcaption{font-size:12px;line-height:2;color:var(--muted)}
.beginner-copy dl{margin:22px 0 0}
.beginner-copy dl>div{border-top:1px solid var(--line);padding:14px 0}
.beginner-copy dt{font-size:13px;font-weight:700;color:var(--pink);margin-bottom:5px}
.beginner-copy dd{margin:0}
.beginner+.about{border-top:1px solid var(--line)}
.winning-gallery{grid-template-columns:1fr}
.winning-gallery .screenshot-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:45px;align-items:center}
@media(max-width:900px){.header nav{gap:12px}.beginner-grid,.winning-gallery .screenshot-feature{gap:25px}.beginner-copy h3{font-size:21px}}
@media(max-width:700px){.beginner-grid,.winning-gallery .screenshot-feature{grid-template-columns:1fr}.beginner{padding-bottom:45px}.beginner .section-heading h2{font-size:clamp(23px,5.5vw,28px)}}
.winning-showcase{margin-top:65px;padding-top:45px;border-top:1px solid var(--line)}
.winning-showcase>.section-heading h3{font-family:"Yu Mincho",serif;font-size:28px;line-height:1.6;margin:18px 0}
.winning-showcase .winning-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 30px;border:0;padding:0;margin-top:30px}
.winning-showcase .screenshot-feature{display:block}
.winning-showcase .screenshot-feature h4{font-size:18px;line-height:1.7;margin:8px 0}
@media(max-width:700px){.winning-showcase{margin-top:40px;padding-top:30px}.winning-showcase>.section-heading h3{font-size:24px}.winning-showcase .winning-gallery{grid-template-columns:1fr}}
.server-info{max-width:1090px;margin:0 auto;padding:40px 0;display:flex;align-items:center;gap:35px;border-top:1px solid var(--line)}
.server-info h2{font-size:18px;margin:14px 0}
.server-info p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted);margin-bottom:0}
.server-info p a{text-decoration:underline;text-underline-offset:3px;color:var(--pink)}
.server-repo{flex-shrink:0;border:1px solid var(--line);border-radius:4px;padding:16px 20px;font-size:12px;margin-left:auto}
.server-repo span{margin-left:16px;color:var(--pink)}
.server-repo:hover{border-color:var(--pink);background:white}
@media(max-width:1180px){.server-info{margin-inline:7%}}
@media(max-width:700px){.server-info{flex-direction:column;align-items:flex-start;gap:22px}.server-repo{margin-left:0}}
.character-picker{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:600px){.character-picker{grid-template-columns:repeat(4,minmax(0,1fr));max-width:280px}}

/* Face crops are shared with the game; do not zoom the portraits again. */
.character-picker img{object-fit:contain;object-position:center;transform:none}

/* Searchable roster with persistent, wrapping names. */
.character-info{min-width:0}
.character-search{margin-top:28px}
.character-search label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}
.character-search-controls{display:flex;gap:8px}
.character-search input{min-width:0;flex:1;width:100%;font:inherit;font-size:16px;border:1px solid #c9b8bd;border-radius:6px;padding:12px;background:#fff;color:var(--ink)}
.character-search input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.character-search-controls button{border:1px solid #c9b8bd;border-radius:6px;background:#fff;padding:10px 12px;cursor:pointer;font-size:12px}
#character-search-status,#character-search-empty{font-size:12px;color:var(--muted);line-height:1.8}
.character-picker{margin-top:16px;gap:12px 8px;align-items:start}
.character-picker button{display:flex;flex-direction:column;align-items:center;gap:7px;aspect-ratio:auto;min-width:0;padding:5px 2px 8px;border-radius:8px;background:transparent;overflow:visible}
.character-picker button[hidden]{display:none}
.character-picker img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:#fffa}
.character-picker-name{font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere;color:var(--ink);text-align:center}
@media(max-width:600px){.character-picker{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Registration entrances: top navigation, hero and roster callout. */
.header nav .nav-registration{color:#a72e54;border-bottom:2px solid #d9547b;padding-bottom:5px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.hero .hero-actions .button{margin:0;padding:18px 22px;gap:22px;justify-content:space-between;min-height:56px}
.hero .hero-play,.hero .hero-web{background:#fff;color:#a72e54;border:1px solid #c64169;box-shadow:none}
.hero .hero-play:hover,.hero .hero-web:hover{background:#fff0f4}
.hero-registration-note{font-size:11px;line-height:1.8;color:#9b3453;margin:14px 0 0}
.registration-invite{margin:40px auto;padding:36px 40px;border:2px solid #e9a5b8;border-radius:16px;background:#fff0f4;box-shadow:0 12px 32px #d9547b0d}
.registration-invite h2{font-size:25px}
.registration-invite .button{margin:0 0 0 auto;flex-shrink:0;gap:24px}
@media(max-width:1180px){.registration-invite{margin-inline:7%}.header nav{gap:16px}}
@media(max-width:700px){.registration-invite{padding:28px 24px}.registration-invite .button{margin:0;width:100%;justify-content:space-between}}
@media(max-width:600px){.hero{max-height:none}.hero-actions{flex-direction:column;max-width:360px}.hero .hero-actions .button{width:100%}.hero-registration-note{max-width:340px}.registration-invite h2{font-size:23px}}