/* Background, hero sizing, label and body copy reuse character.css directly. */
*,*::before,*::after{box-sizing:border-box}
body.project-page{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;font-size:14px;font-weight:350;line-height:1.6}
.project-page .static-page-header a,.project-page .static-page-footer a,.project-page .static-offcanvas a{text-decoration:none}
.project-main{width:90%;margin:0 auto}.project-main a{color:color-mix(in srgb,var(--character-accent) 65%,#33434d);text-underline-offset:3px}.project-main [id]{scroll-margin-top:95px}
.project-heading h1{flex-wrap:wrap}.project-banner{margin:28px 0}.project-banner img{display:block;width:100%;height:auto}
.project-character-divider{display:grid;grid-template-columns:max-content minmax(24px,1fr);gap:24px;align-items:center;margin:38px 0 28px;isolation:isolate}
.project-character-divider h2{position:relative;isolation:isolate;margin:0;padding:2px 24px 2px 0;display:flex;gap:20px;align-items:center;color:white;font:300 italic 32px/1.4 "Avenir Next","Century Gothic","Segoe UI Light",sans-serif;letter-spacing:.075em}
.project-character-divider h2 small{font:400 17px/1.2 "Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.12em}
.project-character-divider h2::before{content:"";position:absolute;inset:0 0 0 -24px;z-index:-1;background:var(--character-accent);clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%);mask-image:linear-gradient(#000,#000);mask-repeat:no-repeat;mask-size:100% 100%;mask-position:left center}
.project-character-divider::after{content:"";height:1px;width:100%;background:var(--character-accent);transform-origin:left}.project-character-divider.reveal-pending h2::before{mask-size:0% 100%}.project-character-divider.reveal-pending::after{transform:scaleX(0)}.project-character-divider.is-visible h2::before{animation:project-heading-reveal 650ms ease-out both}.project-character-divider.is-visible::after{animation:project-divider-reveal 650ms ease-out both}@keyframes project-heading-reveal{from{mask-size:0% 100%}to{mask-size:100% 100%}}@keyframes project-divider-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[hidden]{display:none!important}
.character-picker{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(140px,16vw,210px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:5px 4px 14px;margin:0 -4px 34px;scrollbar-width:thin}
.character-picker button{position:relative;isolation:isolate;scroll-snap-align:start;padding:0;border:3px solid color-mix(in srgb,var(--accent) 70%,white);border-radius:4px;overflow:hidden;background:white;cursor:pointer;font:400 16px/1.4 "Yu Gothic UI","Noto Sans JP",sans-serif;color:#fff}
.character-picker img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#eff3f4}
.picker-name{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 8px;text-align:left;background:linear-gradient(transparent,#172530ce)}.picker-name small{display:block;font-size:10px;letter-spacing:.07em}
.picker-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:color-mix(in srgb,var(--accent) 74%,transparent);opacity:0;clip-path:inset(0 100% 0 0);transition:opacity 180ms ease,clip-path 260ms ease;color:#fff;font-size:14px;letter-spacing:.06em}
.character-picker button:hover .picker-overlay,.character-picker button:focus-visible .picker-overlay{opacity:1;clip-path:inset(0)}.character-picker button[aria-selected=true]{outline:none}
.project-character-section{margin-bottom:50px}.project-page .character-name h2{margin:0;color:rgba(49,48,55,.78);font:300 48px/1.08 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.075em}.project-page .character-name::after{display:none}.project-page .character-description p{margin:0 0 18px}.project-page .character-description{font-size:14px;font-weight:350;line-height:1.6;letter-spacing:.035em;color:#55535a}
.character-design{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:38px;align-items:center;margin:44px 0}.design-sheet{position:relative;margin:0;padding:24px 24px 46px;background:#ffffffb8;border:1px solid color-mix(in srgb,var(--character-accent) 35%,#dce4e7);border-radius:5px}.design-sheet img{display:block;width:100%;height:auto}.design-sheet figcaption{position:absolute;bottom:14px;left:24px;font:400 12px/1.4 "Avenir Next","Segoe UI",sans-serif;letter-spacing:.12em;color:#66747c}.design-sheet figcaption span{margin-left:16px;font-size:11px;letter-spacing:.04em}
.character-design:has(.source-copy:empty){grid-template-columns:1fr}.character-design:has(.source-copy:empty) .design-sheet{width:min(100%,1100px);justify-self:center}
.character-materials{margin-top:48px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--character-accent) 35%,#dce4e7)}.character-materials>h3,.project-bottom>h2{font:300 26px/1.4 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.075em;margin:0 0 24px;color:rgba(49,48,55,.78)}
.asset-gallery{display:block}.asset-stage{position:relative;width:100%;margin:0;padding:18px 0 12px;background:linear-gradient(145deg,color-mix(in srgb,var(--character-accent-soft) 28%,transparent),#ffffff60);border-radius:5px}.asset-stage>a:first-child{display:flex;align-items:center;justify-content:center;height:min(850px,85vh);min-height:420px}.asset-stage img{display:block;width:100%;height:100%;max-width:1100px;object-fit:contain}.asset-stage>p{margin:16px 0 0;text-align:center;font-size:13px;color:#55535a}
.project-main .asset-download{position:absolute;right:16px;top:14px;display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--character-accent) 65%,#bbcbd0);border-radius:50%;background:#ffffffdf;color:color-mix(in srgb,var(--character-accent) 70%,#33434d)}.asset-download svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.asset-download:hover{background:var(--character-accent-soft)}
.visual-switch{display:flex;gap:24px;align-items:center;margin-top:20px;padding:22px 18px;background:color-mix(in srgb,var(--character-accent) 14%,#fff);border-top:1px solid color-mix(in srgb,var(--character-accent) 40%,#dce4e7);border-bottom:1px solid color-mix(in srgb,var(--character-accent) 40%,#dce4e7)}.visual-switch-label{flex:0 0 95px;margin:0;color:color-mix(in srgb,var(--character-accent) 70%,#34414c);font:500 italic 14px/1.35 "Avenir Next","Segoe UI",sans-serif}.visual-switch-label span{display:block;font-size:25px}
.asset-list{display:grid;grid-auto-flow:column;grid-auto-columns:110px;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;padding:5px 4px 10px;min-width:0;flex:1}.asset-list button{padding:0;border:0;background:none;font:400 11px/1.4 "Yu Gothic UI","Noto Sans JP",sans-serif;color:#55535a;cursor:pointer;scroll-snap-align:start}.asset-list img{display:block;width:100px;height:100px;object-fit:contain;background:#fff;border:2px solid color-mix(in srgb,var(--character-accent) 40%,#dce4e7);border-radius:5px;margin:0 auto 8px}.asset-list span{display:block;min-height:34px;padding:3px 5px;background:color-mix(in srgb,var(--character-accent) 25%,white)}.asset-list button[aria-pressed=true] img{outline:2px solid var(--character-accent);outline-offset:2px}.asset-list button[aria-pressed=true] span{background:var(--character-accent);color:#fff}.asset-list button:hover img{border-color:var(--character-accent)}.source-notes{margin:22px 0 0;text-align:left}.source-notes p{margin:0 0 16px}
.project-bottom{margin-top:60px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--character-accent) 35%,#dce4e7)}.guidelines{margin:24px 0;padding:24px;background:#ffffff80;border:1px solid #c7dade}.source-copy,.source-notes{color:#55535a;font-size:14px;font-weight:350;line-height:1.6;letter-spacing:.035em}.source-copy p{margin:0 0 18px}.source-copy h3{font-size:19px;font-weight:400;line-height:1.5;margin:24px 0 16px}.source-copy ul,.source-copy ol{padding-left:24px}.source-copy li{margin:6px 0}.source-copy strong{font-weight:450}
.project-main a:focus-visible,.project-main button:focus-visible{outline:2px solid #498d9e;outline-offset:3px}
@media(max-width:1023px){.character-design{gap:24px;grid-template-columns:.8fr 1.2fr}}
@media(max-width:767px){.project-main{width:calc(100% - 40px)}.project-page .character-visual{width:calc(100% + 40px);margin-left:-20px}.project-page .character-name h2{font-size:35px}.project-page .character-heading{margin-bottom:24px}.project-character-divider{gap:16px}.project-character-divider h2{font-size:26px;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 16px 9px 0;line-height:1.05}.project-character-divider h2::before{left:-20px}.project-character-divider h2 small{font-size:14px}.character-picker{grid-auto-columns:132px;gap:12px}.character-design{grid-template-columns:1fr}.design-sheet{order:-1;padding:14px 14px 52px}.design-sheet figcaption{left:14px;font-size:10px}.design-sheet figcaption span{margin-left:8px}.asset-stage>a:first-child{height:540px;min-height:0}.asset-stage>p{padding-right:55px;text-align:left;font-size:12px}.visual-switch{gap:10px;padding:16px 10px}.visual-switch-label{flex-basis:65px;font-size:11px}.asset-list{grid-auto-columns:86px;gap:12px}.asset-list img{width:80px;height:80px}.character-materials>h3,.project-bottom>h2{font-size:23px}.guidelines{padding:18px}.source-copy h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.project-character-divider.is-visible h2::before,.project-character-divider.is-visible::after{animation:none}.picker-overlay{transition:none}}

/* Page-length-independent background and selection details. */
.project-page .character-content::after{top:0;height:100%;background:repeating-linear-gradient(169deg,transparent 0 360px,color-mix(in srgb,var(--character-accent) 20%,transparent) 360px 540px,transparent 540px 1000px);}
.project-page .character-content{background-size:100% 1200px;background-repeat:repeat-y}
.character-picker{padding-bottom:30px}.character-picker button{overflow:visible;border:0;background:transparent}.character-picker img{border:3px solid color-mix(in srgb,var(--accent) 70%,white);border-radius:4px;transition:transform .3s ease;clip-path:inset(0 round 4px)}
.character-picker button::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;z-index:1;pointer-events:none;transition:opacity .3s ease;border-radius:4px}.character-picker button:is(:hover,:focus-visible)::before{opacity:.86}
.picker-overlay{background:none;z-index:2;font:400 18px "Avenir Next","Segoe UI",sans-serif;transition:clip-path .35s ease,opacity .25s ease;pointer-events:none}.character-picker button:is(:hover,:focus-visible) img{transform:scale(1.08)}
.picker-current{position:absolute;top:calc(100% + 5px);left:15%;width:70%;display:none;align-items:center;gap:8px;color:var(--character-accent);font-size:12px;line-height:16px}.picker-current::before,.picker-current::after{content:"";height:1px;flex:1;background:currentColor;opacity:.45}.character-picker button[aria-selected=true] .picker-current{display:flex}
.visual-switch{position:relative;display:block;padding:20px 30px}.asset-list{position:relative;scrollbar-width:none}.asset-list::-webkit-scrollbar{display:none}.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:28px;height:28px;border:1px solid var(--character-line);border-radius:50%;background:#fffffff0;color:#68747b;font:24px/1 sans-serif;cursor:pointer}.gallery-arrow.previous{left:0}.gallery-arrow.next{right:0}.asset-list .character-selector__item{width:110px;min-width:0;margin:0;list-style:none}
.project-main a:focus-visible,.project-main button:focus-visible{outline-color:var(--character-accent)}.guidelines{border-color:color-mix(in srgb,var(--character-accent) 35%,#dce4e7)}
@media(max-width:767px){.picker-overlay{font-size:12px}.asset-list .character-selector__item{width:86px}}

.picker-reel{position:relative}.character-picker{position:relative;scrollbar-width:none}.character-picker::-webkit-scrollbar{display:none}.picker-reel>.gallery-arrow{top:calc(50% - 16px)}.picker-reel>.previous{left:-14px}.picker-reel>.next{right:-14px}

/* Three independent bands; no page-height based positioning. */
.project-page .character-content::after{background:linear-gradient(169deg,transparent 0 378px,color-mix(in srgb,var(--character-accent) 17%,transparent) 378px 522px,transparent 522px 1342px,color-mix(in srgb,var(--character-accent-soft) 65%,transparent) 1342px 1558px,transparent 1558px),linear-gradient(200deg,transparent 0 700px,color-mix(in srgb,var(--character-accent) 4%,transparent) 700px 1000px,transparent 1000px);background-size:100% 2200px;background-repeat:repeat-y}
.character-picker{justify-content:safe center}.picker-image{position:relative;display:block;overflow:hidden;border:1px solid var(--accent);border-radius:4px;aspect-ratio:1}.character-picker img{border:0;border-radius:0;clip-path:none;width:100%;height:100%;object-fit:contain}.character-picker button::before{display:none}.picker-image::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;z-index:1;transition:opacity .3s ease;pointer-events:none}.character-picker button:is(:hover,:focus-visible) .picker-image::before{opacity:.86}
.picker-current{left:0;width:100%;gap:8px}.picker-current svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.45;flex:none}.picker-current::before{background:linear-gradient(90deg,transparent,currentColor)}.picker-current::after{background:linear-gradient(90deg,currentColor,transparent)}
.design-sheet{padding-bottom:24px}
.visual-switch{padding:20px 30px}.asset-list{grid-auto-columns:140px;gap:18px}.asset-list .character-selector__item{width:140px}.asset-list .thumb-image{position:relative;display:block;width:132px;height:132px;margin:0 auto;padding:0;min-height:0;background:white;border-radius:5px;overflow:hidden}.asset-list .thumb-image img{width:100%;height:100%;border:0;border-radius:0;margin:0;outline:none;transition:transform .3s ease}.asset-list .thumb-image::after{content:"";position:absolute;inset:0;background:var(--character-accent);opacity:0;transition:opacity .3s ease}.asset-list button[aria-pressed=true] .thumb-image::after{opacity:.3}.asset-list button:hover .thumb-image::after{opacity:.45}.asset-list button:hover img{transform:scale(1.08)}.asset-list button[aria-pressed=true] img{outline:none}.asset-list .thumb-caption{position:relative;display:flex;justify-content:center;align-items:center;height:40px;min-height:40px;margin:-3px 0 0;padding:2px 12px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:var(--character-accent);color:white;line-height:16px;font-size:11px}
.gallery-arrow{border-color:rgba(117,126,132,.28);background:rgba(255,255,255,.98);color:#879198;transition:border-color 150ms ease,background-color 150ms ease,color 150ms ease,transform 150ms ease}.gallery-arrow:hover,.gallery-arrow:focus-visible{border-color:rgba(102,110,116,.38);background:white;color:#5f676c;transform:translateY(-50%) scale(1.14)}.picker-reel>.gallery-arrow,.visual-switch>.gallery-arrow{top:var(--arrow-center,50%)}
@media(max-width:767px){.asset-list{grid-auto-columns:116px}.asset-list .character-selector__item{width:116px}.asset-list .thumb-image{width:108px;height:108px}.design-sheet{padding-bottom:14px}}

.asset-stage{background:rgba(249,251,252,.8)}
.gallery-arrow{display:grid;place-items:center;padding:0}.gallery-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.asset-list .thumb-caption{width:132px;margin:-4px auto 0}@media(max-width:767px){.asset-list .thumb-caption{width:108px}}

.asset-list .thumb-caption,.asset-list button[aria-pressed=true] .thumb-caption{clip-path:none;background:transparent;isolation:isolate}.asset-list .thumb-caption::before{content:"";position:absolute;inset:0 0 0 -8px;z-index:-1;background:var(--character-accent);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);pointer-events:none}

.asset-list{padding-left:12px;padding-right:12px;scroll-padding-inline:12px}.image-note{position:absolute;left:24px;right:24px;bottom:56px;z-index:2;padding:16px 20px;background:rgba(250,252,253,.94);color:#55535a;font-size:14px;line-height:1.6;border-radius:4px}.image-note p{margin:0}.image-note a{color:inherit}.project-bottom>.project-character-divider{margin-top:0}

#guidelines{border-top:0}.image-note{left:50%;right:auto;width:min(800px,calc(100% - 48px));transform:translateX(-50%);bottom:80px}

.project-page .character-profile{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.028em}

/* Match visible CHARACTER row spacing without legacy clearfix grid items. */
.project-page .character-profile__row{padding-block:18px}@media(max-width:1023px){.project-page .character-profile__row{padding-block:15px}}@media(max-width:767px){.project-page .character-profile__row{padding-block:13px}}

.project-page .guidelines{padding:0;border:0;background:none;margin:24px 0}.guideline-item{border-bottom:1px solid var(--character-line);margin:0 0 12px}.guideline-item summary{position:relative;display:block;cursor:pointer;list-style:none;padding:16px 48px 16px 16px;color:#55565c;font:400 14px/1.7 "Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;letter-spacing:.02em}.guideline-item summary::-webkit-details-marker{display:none}.guideline-item summary::after{content:"";position:absolute;right:20px;top:calc(50% - 6px);width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}.guideline-item[open]>summary::after{transform:rotate(225deg);top:calc(50% - 2px)}.guideline-item summary:hover,.guideline-item summary:focus-visible{background:color-mix(in srgb,var(--character-accent) 9%,transparent)}.guideline-item summary:focus-visible{outline:2px solid var(--character-accent);outline-offset:-2px}.guideline-answer{padding:20px 24px 20px 56px;color:#55565c;font:400 14px/1.75 "Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;letter-spacing:normal}.guideline-answer p,.guideline-answer li{font:inherit;color:inherit}@media(max-width:767px){.guideline-answer{padding:16px 16px 20px 56px}}

#commons{border-top:0}.support-section{margin-top:28px}.support-section h3{font-size:19px;font-weight:400;line-height:1.5;margin:0 0 12px}.support-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;list-style:none;padding:0!important;margin:16px 0}.support-links li{margin:0}.support-links a,.support-pending,.support-fanbox{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px;font-size:13px;line-height:1.5}.support-links a,.support-fanbox{border:1px solid var(--character-line);border-radius:2px;background:#ffffff70;text-decoration:none}.support-links a:hover,.support-fanbox:hover{background:#ffffffbd}.support-links img{flex:none;object-fit:contain;filter:brightness(.45)}.support-fanbox{width:fit-content}.support-fanbox img{object-fit:contain}.support-pending{color:#77747c}.support-pending img{opacity:.65}@media(max-width:767px){.support-links{grid-template-columns:1fr}}

.guideline-item{border:0;margin-bottom:16px}.guideline-item summary{background:color-mix(in srgb,var(--character-accent) 22%,#f8fafb);border-radius:2px;padding:17px 52px 17px 20px}.guideline-item summary:hover,.guideline-item summary:focus-visible,.guideline-item[open]>summary{background:color-mix(in srgb,var(--character-accent) 30%,#f8fafb)}.community-actions{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.028em}.project-main .community-actions a{color:#55565c;text-decoration:none}.community-actions img{width:16px;height:16px;object-fit:contain;filter:grayscale(1) brightness(.55)}@media(max-width:767px){#commons .project-character-divider h2{font-size:23px;letter-spacing:.04em}}

.community-actions .character-button{gap:8px}.community-actions img[src$="account-pixiv.svg"]{filter:none}

#logo{border-top:0}@media(max-width:767px){#commons .project-character-divider h2,#logo .project-character-divider h2{font-size:clamp(17px,4.7vw,23px);letter-spacing:.04em}}