:root{--ink:#171717;--muted:#676767;--line:#dedede;--paper:#f9f9f8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.8 'DM Sans','Noto Sans JP',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #7060bb;outline-offset:5px}header{height:100px;padding:0 4.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#f9f9f8ed;position:relative;z-index:5}.brand{font-size:28px;letter-spacing:-1.5px;font-weight:700;line-height:1}.brand span{display:block;font-size:12px;font-weight:400;letter-spacing:.1em;margin-top:8px}nav{display:flex;gap:36px;align-items:center;font-size:14px}nav a:hover{opacity:.55}.contact-link{border:1px solid #bbb;border-radius:30px;padding:10px 24px}.contact-link span{margin-left:20px}.hero{min-height:760px;height:calc(100svh - 100px);max-height:1100px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 53% 49%,#ececee 0%,#f8f8f7 61%)}.hero-top{position:absolute;top:30px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em}.hero h1{position:absolute;inset:9% 5% auto;font-size:clamp(100px,15.5vw,250px);line-height:.92;font-weight:500;letter-spacing:-.085em;margin:0;pointer-events:none}.hero h1 span{display:block}.hero .magic-word{text-align:right;margin-top:.36em}.hero #stage{position:absolute;inset:0 16%;z-index:1;cursor:pointer;touch-action:pan-y}#stage canvas{display:block;width:100%;height:100%}.fallback{position:absolute;width:100%;height:94%;object-fit:contain;top:0;pointer-events:none}#stage.ready .fallback{display:none}#load-status{position:absolute;bottom:23%;left:0;right:0;text-align:center;font-size:13px;color:#555}.hero-bottom{position:absolute;bottom:75px;left:4.5%;right:4.5%;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.hero-bottom>*{pointer-events:auto}.hero-bottom p{font-size:24px;line-height:1.6;letter-spacing:.1em;margin:0}#touch-aya{background:#ffffffd9;border:1px solid #c8c8c8;border-radius:60px;padding:12px 26px;font-size:14px;backdrop-filter:blur(8px)}#touch-aya span{display:block;font-size:10px;letter-spacing:.12em}.scroll{font-size:11px;letter-spacing:.09em}.scroll span{margin-left:22px;font-size:28px}.hero-index{position:absolute;bottom:22px;left:4.5%;font-size:10px;letter-spacing:.15em;color:#666}.spark{border:0;background:none;font-size:90px;position:absolute;z-index:3;line-height:1;color:#444;transition:transform .7s}.spark:hover{transform:rotate(120deg) scale(1.2)}.star-one{left:12%;top:46%}.star-two{right:14%;top:16%;font-size:65px;color:#85858c}.particle{position:fixed;width:7px;height:7px;background:#b7a5e0;pointer-events:none;z-index:50;animation:burst .85s forwards;border-radius:1px}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(200deg);opacity:0}}.wrap{width:91%;max-width:1600px;margin-inline:auto}.intro{display:grid;grid-template-columns:1fr 2fr;padding:130px 0 150px}.eyebrow{font-size:12px;letter-spacing:.13em;margin:0 0 30px;color:#666}.intro h2{font-size:clamp(25px,3vw,43px);font-weight:500;line-height:1.7;letter-spacing:.04em;margin:0 0 30px}.intro p:not(.eyebrow){font-size:15px;color:#555}.en{color:#777;font-size:14px;line-height:1.8}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;gap:30px}.section-heading h2,.maka-copy h2{font-size:clamp(46px,6vw,94px);line-height:1.03;letter-spacing:-.065em;font-weight:400;margin:0}i{font-family:Georgia,serif;font-weight:400}.section-heading>p{font-size:14px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:36px}.filters button{background:transparent;border:1px solid #ccc;border-radius:40px;padding:9px 20px;font-size:13px}.filters .active{background:#1d1d1d;color:#fff;border-color:#1d1d1d}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 32px}.work-card:first-child{grid-column:1/-1}.work-media{display:block;width:100%;position:relative;overflow:hidden;border:0;padding:0;background:#e9e9e9;aspect-ratio:16/10;text-align:left}.work-card:first-child .work-media{aspect-ratio:2/1}.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.work-media:hover img{transform:scale(1.035)}.play{position:absolute;right:25px;bottom:25px;border:1px solid #ffffffb0;background:#17171750;backdrop-filter:blur(15px);color:#fff;border-radius:50%;height:62px;width:62px;display:grid;place-items:center}.work-info{display:flex;justify-content:space-between;gap:20px;margin-top:17px}.work-info h3{font-size:23px;font-weight:500;margin:0;line-height:1.4;letter-spacing:-.03em}.work-info p{margin:5px 0 0;font-size:13px;color:#666}.work-info>span{font-size:12px;color:#666;white-space:nowrap}.link-art{display:grid;place-content:center;height:100%;padding:35px;background:linear-gradient(135deg,#dddde0,#f3f3f2);font-size:clamp(25px,3vw,50px);line-height:1.2;letter-spacing:-.04em}.works{padding-bottom:140px}.awards{padding:105px 0 120px;background:#ededed}.award-star{font-size:140px;line-height:1}.award-row{padding:27px 0;display:grid;grid-template-columns:80px 1fr auto;gap:24px;border-top:1px solid #c8c8c8;align-items:center}.award-row:last-child{border-bottom:1px solid #c8c8c8}.award-row h3{font-size:20px;font-weight:500;margin:0}.award-row p{font-size:13px;color:#666;margin:4px 0 0}.award-row>span{font-size:13px}.award-row strong{font-weight:400;font-size:16px}.makaroni{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center;padding:140px 0}.maka-image{position:relative;background:#eaeaea;overflow:hidden}.maka-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.maka-image>span{position:absolute;bottom:20px;left:20px;background:#fff;padding:6px 14px;font-size:10px;letter-spacing:.08em}.maka-copy h3{font-size:19px;font-weight:500;margin-top:36px}.maka-copy p{font-size:14px}.socials{display:flex;flex-wrap:wrap;gap:20px;font-size:13px}.maka-copy .socials{margin-top:35px}.socials a{border-bottom:1px solid #aaa}.contact{background:#1c1c1c;color:#f4f4f4;padding:90px 0}.contact .eyebrow{color:#aaa}.contact h2{font-size:clamp(65px,10vw,160px);line-height:1.05;letter-spacing:-.06em;font-weight:400;position:relative;margin:0 0 50px}.contact h2>span{position:absolute;right:0;top:0;font-weight:400}.contact-intro{display:flex;justify-content:space-between;gap:25px;font-size:14px}.contact .en{color:#aaa}details{margin-top:40px;border-top:1px solid #666;border-bottom:1px solid #666}summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{font-size:26px}details iframe{width:100%;height:850px;border:0;background:white}details>p{font-size:14px}footer{display:flex;justify-content:space-between;align-items:center;padding:50px 0;gap:30px}footer small{font-size:12px;color:#777}dialog{width:min(1100px,94vw);border:0;padding:45px 20px 20px;background:#111;color:white}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}#close-player{position:absolute;right:8px;top:0;border:0;background:none;font-size:32px;color:#fff}#player iframe{width:100%;aspect-ratio:16/9;border:0}#player-content>a{display:block;margin-top:12px}.skip{position:fixed;top:-70px;background:white;padding:10px;z-index:100}.skip:focus{top:0}
@media(max-width:800px){header{height:85px}nav{gap:17px}.contact-link{padding:6px 12px}.contact-link span{display:none}.hero{height:calc(90svh - 85px);min-height:660px}.hero h1{top:14%;font-size:19vw}.hero .magic-word{margin-top:1.2em} .hero #stage{inset:0 0 4%}.hero-bottom p{font-size:18px}.hero-bottom{bottom:60px}.scroll{font-size:10px}.scroll span{margin-left:8px}.hero-top span:last-child{display:none}.star-one{left:4%;top:43%;font-size:60px}.star-two{right:8%;font-size:44px}.intro{padding:80px 0;grid-template-columns:1fr;gap:10px}.section-heading{align-items:flex-start;flex-direction:column}.work-grid{gap:40px 20px}.works{padding-bottom:80px}.awards{padding:65px 0}.award-star{display:none}.award-row{grid-template-columns:45px 1fr;gap:12px}.award-row strong{grid-column:2}.makaroni{padding:80px 0;gap:35px}.maka-copy h2{font-size:55px}.contact{padding:70px 0}.contact-intro{display:block}footer{flex-wrap:wrap}.hero-index{font-size:10px}}
@media(max-width:520px){.brand{font-size:24px}nav{gap:14px;font-size:12px}nav>a:nth-child(3){display:none}.contact-link{border:0;padding:0}.hero{min-height:620px}.hero-top{font-size:10px}.hero h1{top:18%;font-size:22vw}.hero .magic-word{margin-top:1.6em}.hero-bottom{align-items:center;bottom:52px;gap:12px}.hero-bottom p{font-size:16px}#touch-aya{padding:9px 17px;font-size:12px}.scroll{position:absolute;right:0;bottom:-38px}.hero-index{bottom:20px}.hero #stage{inset:4% -17% 8%}.work-grid{grid-template-columns:1fr}.work-card:first-child .work-media{aspect-ratio:16/10}.work-info h3{font-size:20px}.section-heading h2{font-size:53px}.filters{gap:7px}.filters button{padding:7px 12px;font-size:12px}.award-row h3{font-size:17px}.makaroni{grid-template-columns:1fr}.maka-copy h2{font-size:66px}.contact h2{font-size:16vw}.contact h2>span{font-size:45px}footer .socials{gap:17px}footer small{width:100%}.intro h2{font-size:25px}.intro p br{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
#player iframe.tweet-frame{height:70vh;aspect-ratio:auto;background:white}.work-card{transition:opacity .7s ease,transform .7s ease}.work-card.pending{opacity:0;transform:translateY(35px)}.work-card.shown{opacity:1;transform:translateY(0)}@media(max-width:520px){.hero h1{top:6%;font-size:19vw}.hero .magic-word{margin-top:3.5em}.maka-image img{object-position:50% 22%}}

.gallery-bar{margin-bottom:35px}.gallery-bar .filters{margin-bottom:13px}.filters sup{font-size:10px;margin-left:7px;opacity:.65}#work-count{font-size:11px;letter-spacing:.12em;color:#666}.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}.work-card:first-child{grid-column:1/-1}.work-card:first-child .work-media{aspect-ratio:2.5/1}.work-grid.filtered .work-card:first-child{grid-column:auto}.work-grid.filtered .work-card:first-child .work-media{aspect-ratio:16/10}.work-info h3{font-size:20px;line-height:1.55}.work-info p{line-height:1.7}.work-meta{font-size:11px;letter-spacing:.04em;color:#666;margin:9px 0 0}.work-badge{position:absolute;top:16px;left:16px;background:#fff;color:#151515;padding:5px 13px;border-radius:20px;font-size:12px}.play{width:48px;height:48px;font-size:12px;right:16px;bottom:16px}.player-title{font-size:20px;font-weight:500;line-height:1.5;margin:5px 0 17px}#player video{width:100%;max-height:72vh;display:block;background:black}.playback-note{font-size:13px;color:#ccc}@media(max-width:1000px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.work-grid{grid-template-columns:1fr}.work-card:first-child .work-media{aspect-ratio:16/10}.filters button{font-size:12px}.work-grid{gap:38px}.work-info h3{font-size:21px}}

/* Character play: three generous touch targets, clear but quiet instructions. */
.star-three{right:9%;top:57%;font-size:55px;color:#99939e}.spark{min-width:48px;min-height:48px;touch-action:manipulation}.spark:disabled{cursor:wait;opacity:.4}.spark:active{transform:scale(.85) rotate(30deg)}.hero-hint{position:absolute;left:4.5%;bottom:160px;z-index:2;margin:0;color:#666;font-size:10px;line-height:1.8;pointer-events:none}.hero-hint span{display:block;font-size:9px;letter-spacing:.11em;color:#888}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#stage:focus-visible{outline:1px dashed #b9b0c3;outline-offset:-8px;border-radius:40%}.particle{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);width:11px;height:11px}
@media(max-width:800px){.star-three{right:4%;top:60%;font-size:39px}.hero-hint{bottom:137px;font-size:9px;max-width:150px}.hero-hint span{font-size:8px}}
@media(max-width:520px){.star-one{left:1%;top:42%}.star-two{right:3%;top:16%}.star-three{right:2%;top:61%;font-size:34px}.hero-hint{bottom:123px;max-width:130px}}

/* Latest news sits directly below the opening visual. */
.news{padding:78px 0 20px}.news-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.news-heading .eyebrow{margin:0 0 12px}.news h2{font-size:64px;line-height:1;letter-spacing:-.06em;font-weight:400;margin:0}.news h2 span{font-size:12px;letter-spacing:.03em;margin-left:30px;color:#666}.news-mark{font-size:66px;line-height:1}.news-row{display:grid;grid-template-columns:110px 90px 1fr 30px;align-items:start;gap:22px;border-top:1px solid var(--line);padding:25px 0}.news-row:last-child{border-bottom:1px solid var(--line)}.news-row[hidden]{display:none}.news-date,.news-kind{font-size:11px;letter-spacing:.05em;padding-top:4px;color:#777}.news-kind{color:#555}.news-copy h3{font-size:17px;line-height:1.7;font-weight:500;margin:0}.news-copy p{font-size:12px;color:#777;margin:5px 0 0}.news-arrow{font-size:22px;transition:transform .25s}.news-row:hover .news-arrow{transform:translate(3px,-3px)}#more-news{display:block;margin:24px 0 0 auto;border:0;border-bottom:1px solid #aaa;background:none;font-size:12px;padding:8px 0}#more-news[hidden]{display:none}#more-news span{margin-left:24px}
.makaroni{display:block}.maka-intro{display:grid;grid-template-columns:1.45fr 1fr;gap:6%;align-items:center}.maka-image{background:#f5f4f2}.maka-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.maka-image>span{position:static;display:block;background:transparent;margin:0;padding:16px 20px;font-size:9px;letter-spacing:.12em;text-align:center;color:#777}.maka-works-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:78px 0 28px}.maka-works-heading .eyebrow{margin-bottom:10px}.maka-works-heading h3{font-size:40px;letter-spacing:-.045em;font-weight:400;line-height:1.2;margin:0}.maka-works-heading>span{font-size:10px;letter-spacing:.12em;color:#777}.maka-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}.maka-grid .work-card:first-child{grid-column:auto}.maka-grid .work-media,.maka-grid .work-card:first-child .work-media{aspect-ratio:16/9}.maka-grid .work-info h3{font-size:19px}.maka-grid .work-meta{margin-top:6px}
@media(max-width:800px){.news{padding-top:55px}.news h2{font-size:50px}.news-row{grid-template-columns:85px 65px 1fr 24px;gap:12px}.news-copy h3{font-size:15px}.maka-intro{grid-template-columns:1fr}.maka-image{margin-bottom:35px}.maka-copy h2{font-size:68px}.maka-works-heading{margin-top:55px}nav{gap:18px}}
@media(max-width:520px){.news-nav{display:none}nav>a:nth-child(3){display:block}nav>a[href="#makaroni"]{display:none}.news h2 span{font-size:10px;margin-left:20px}.news-mark{font-size:45px}.news-row{grid-template-columns:85px 1fr 20px;gap:5px 12px}.news-copy{grid-column:1/3;grid-row:2}.news-arrow{grid-column:3;grid-row:1/3;align-self:center}.news-copy p{font-size:11px}.maka-grid{grid-template-columns:1fr}.maka-works-heading h3{font-size:32px}.maka-works-heading>span{font-size:9px}.maka-works-heading .eyebrow{font-size:10px}}

/* Archive and work details share the portfolio's quiet typography. */
#more-news{width:fit-content}.archive-page{padding-top:50px;padding-bottom:100px;min-height:70vh}.archive-back{display:inline-block;font-size:12px;color:#666;margin-bottom:62px}.archive-page h1{font-size:clamp(74px,10vw,138px);font-weight:400;letter-spacing:-.075em;line-height:1;margin:0}.archive-subtitle{font-size:13px;color:#666;margin-top:22px}.archive-filters{display:flex;align-items:end;gap:22px;margin:45px 0 30px}.archive-filters label{display:grid;gap:9px;font-size:11px;letter-spacing:.05em;color:#666}.archive-filters select{font:inherit;color:#222;background:transparent;border:0;border-bottom:1px solid #aaa;padding:10px 26px 10px 0;border-radius:0;min-width:145px}#news-count{margin-left:auto;font-size:11px;letter-spacing:.1em;padding-bottom:11px}.archive-bottom{margin:40px 0 0}.player-image{display:block;width:100%;max-height:65vh;object-fit:contain}.player-description{font-size:14px;line-height:1.9;margin:24px 0 16px}.player-credit-title{font-size:11px;letter-spacing:.1em;margin:24px 0 8px}.player-credits{white-space:pre-line;font-size:12px;line-height:1.8;color:#bbb}.player-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px}.player-links a{font-size:13px;text-decoration:underline;text-underline-offset:5px}@media(max-width:520px){.archive-filters{gap:16px;flex-wrap:wrap}.archive-filters select{min-width:125px}.archive-page{padding-top:30px}.archive-back{margin-bottom:42px}.archive-subtitle{font-size:12px}.archive-bottom{margin-top:30px}nav>a[href="index.html#makaroni"]{display:none}}

/* Makaroni world: motto, duo, everyday rails. Pastel accents borrowed from the character art, kept quiet. */
.makaroni{--maka-blue:#a2cddf;--maka-blue-soft:#e6f1f6;--maka-pink-soft:#fbe4ee;--maka-cream:#fdfbe6;--rail-gap:20px}
.maka-sticker{display:inline-block;margin-left:14px;padding:3px 12px;border:1px solid var(--ink);border-radius:999px;background:var(--maka-pink-soft);font-size:11px;font-weight:500;letter-spacing:.05em;line-height:1.7;vertical-align:3px;transform:rotate(-4deg)}
.maka-motto{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:center;margin-top:120px;padding:74px 6% 70px;background:var(--maka-blue-soft)}
.maka-motto::before,.maka-motto::after{content:"";position:absolute;top:-26px;width:58px;height:58px;border-radius:50%;background:var(--maka-cream);border:1px solid var(--ink)}
.maka-motto::before{right:calc(6% + 66px)}.maka-motto::after{right:6%}
.maka-motto .maka-sticker{margin:0;background:#fff;transform:rotate(-3deg)}
.motto{display:block;margin-top:22px;font-weight:400;font-size:clamp(50px,7vw,112px);line-height:1;letter-spacing:-.055em}
.maka-motto-copy p{margin:0 0 14px;font-size:13px;line-height:2;color:#555}
.maka-motto-copy .maka-message{margin-bottom:22px;font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.85;color:var(--ink)}
.maka-works-heading>span{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.maka-works-heading>span b{font-weight:400;margin-left:6px}
.maka-more{font-size:12px;letter-spacing:.02em;color:var(--ink);border-bottom:1px solid #aaa;white-space:nowrap}
.maka-characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.maka-char{display:flex;align-items:stretch;background:var(--maka-blue);overflow:hidden}
.maka-char-art{flex:0 0 44%;display:flex;align-items:flex-end;justify-content:center}
.maka-char-art img{display:block;width:100%;height:auto;aspect-ratio:670/1200;object-fit:contain}
.maka-char-text{align-self:flex-end;padding:32px 32px 34px 8px}
.maka-char-text h4{margin:0 0 14px;font-size:clamp(24px,2.3vw,34px);font-weight:500;line-height:1.3;letter-spacing:-.02em}
.maka-char-text h4 i{display:block;font-size:.55em;letter-spacing:0;margin-top:2px}
.maka-char-text p{margin:0;font-size:14px;line-height:1.95}
.maka-rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail-w);gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:#bbb transparent}
.maka-rail>*{scroll-snap-align:start;min-width:0}
.maka-rail:focus-visible{outline:2px solid #7060bb;outline-offset:6px}
.maka-gallery{--rail-w:clamp(220px,22vw,320px)}
.maka-music{--rail-w:clamp(260px,28vw,400px);gap:36px 24px}
.maka-music .work-card,.maka-music .work-card:first-child{grid-column:auto}.maka-music .work-media,.maka-music .work-card:first-child .work-media{aspect-ratio:16/9}
.maka-games{--rail-w:max(240px,calc((100% - 3 * var(--rail-gap)) / 4))}
.maka-games .work-card:first-child{grid-column:auto}
.maka-games .work-media,.maka-games .work-card:first-child .work-media{aspect-ratio:16/9}
.maka-games .work-info h3,.maka-music .work-info h3{font-size:18px}
.maka-snap{margin:0}
.maka-snap-media{display:block;width:100%;padding:0;border:0;background:#e9e9e9;overflow:hidden;aspect-ratio:4/5}
.maka-snap-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.maka-snap-media:hover img{transform:scale(1.035)}
.maka-snap-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;aspect-ratio:4/5;background:var(--maka-blue-soft);border:1px dashed #9fb9c6;text-align:center;padding:20px}
.maka-snap-word{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:.04em}
.maka-snap-z{font-family:Georgia,serif;font-style:italic;font-size:clamp(46px,4.5vw,68px);line-height:1;letter-spacing:.02em;color:#5f8aa0;transform:rotate(-6deg)}
.maka-snap figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;font-size:14px;line-height:1.6}
.maka-world{flex:none;font-size:9px;letter-spacing:.12em;padding:3px 9px;border-radius:999px;border:1px solid #bbb;color:#555}
.maka-world.is-anime{background:var(--maka-blue-soft)}.maka-world.is-real{background:var(--maka-pink-soft)}
.maka-shorts-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px;align-items:end;margin-top:78px}
.maka-shorts-copy .eyebrow{margin-bottom:10px}
.maka-shorts-copy h3{font-size:40px;letter-spacing:-.045em;font-weight:400;line-height:1.2;margin:0 0 22px}
.maka-shorts-copy p:not(.eyebrow){font-size:14px;color:#555;margin:0 0 22px}
.maka-shorts{--rail-w:max(150px,calc((100% - 3 * var(--rail-gap)) / 4))}
.maka-short{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--maka-blue)}
.maka-short img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.maka-short:hover img{transform:scale(1.035)}
.maka-short-label{position:absolute;left:12px;bottom:12px;background:#fff;padding:6px 13px;border-radius:20px;font-size:13px;line-height:1.3}
.maka-short-label b{font-weight:500}.maka-short-label i{display:block;font-size:10px;color:#777}
.maka-short .play{right:12px;bottom:12px;width:38px;height:38px;font-size:12px}
@media(max-width:1000px){.maka-games{--rail-w:max(240px,calc((100% - var(--rail-gap)) / 2))}.maka-shorts-wrap{grid-template-columns:1fr;gap:26px}.maka-shorts{--rail-w:max(150px,calc((100% - 3 * var(--rail-gap)) / 4))}}
@media(max-width:800px){.maka-motto{grid-template-columns:1fr;gap:26px;margin-top:80px;padding:56px 7% 44px}.maka-characters{grid-template-columns:1fr}.maka-shorts-wrap{margin-top:55px}.maka-works-heading{align-items:flex-start;flex-direction:column;gap:12px}.maka-works-heading>span{justify-content:flex-start}}
@media(max-width:520px){.makaroni{--rail-gap:14px}.maka-sticker{margin-left:8px;font-size:10px;padding:2px 10px}.maka-motto::before,.maka-motto::after{width:44px;height:44px;top:-20px}.maka-motto::before{right:calc(7% + 50px)}.motto{font-size:15vw}.maka-char-art{flex-basis:40%}.maka-char-text{padding:22px 18px 24px 4px}.maka-char-text p{font-size:13px;line-height:1.85}.maka-gallery{--rail-w:62vw}.maka-music{--rail-w:78vw}.maka-games{--rail-w:78vw}.maka-shorts{--rail-w:42vw}.maka-shorts-copy h3{font-size:32px}.maka-snap figcaption{font-size:13px}}
/* うしろの文字：1文字ずつ（hero2.js が .ch に分ける）。登場→ふわふわ、カーソルでぷるん、アーヤの反応で跳ねる */
.hero h1.split .ch{display:inline-block;transform-origin:50% 90%;animation:ch-in .95s cubic-bezier(.2,1.5,.35,1) calc(var(--i)*55ms) both,ch-float 5.5s ease-in-out calc(1s + var(--i)*.23s) infinite}
.hero h1.split .ch.sp{animation:none}
.hero h1.split.landed .ch{animation:ch-float 5.5s ease-in-out calc(1s + var(--i)*.23s) infinite}.hero h1.split.landed .ch.sp{animation:none}
.hero h1.split .ch.wobble,.hero h1.split.landed .ch.wobble{animation:ch-wobble .55s ease-out,ch-float 5.5s ease-in-out calc(1s + var(--i)*.23s) infinite}
.hero h1.split .ch.hop,.hero h1.split.landed .ch.hop{animation:ch-hop .6s cubic-bezier(.3,1.4,.5,1),ch-float 5.5s ease-in-out calc(1s + var(--i)*.23s) infinite}
.hero h1.split .ch.shake,.hero h1.split.landed .ch.shake{animation:ch-shake .5s ease-in-out,ch-float 5.5s ease-in-out calc(1s + var(--i)*.23s) infinite}
@keyframes ch-in{0%{transform:translateY(-.55em) rotate(-14deg) scale(.6);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes ch-float{0%,100%{translate:0 0}50%{translate:0 -.035em}}
@keyframes ch-wobble{0%{transform:none}30%{transform:scale(1.04,.96) rotate(-1.5deg)}60%{transform:scale(.98,1.03) rotate(1deg)}100%{transform:none}}
@keyframes ch-hop{0%{transform:none}40%{transform:translateY(-.07em)}100%{transform:none}}
@keyframes ch-shake{0%,100%{transform:none}25%{transform:rotate(-2.5deg)}50%{transform:rotate(2deg)}75%{transform:rotate(-1deg)}}
.hero-actions{display:flex;align-items:center;gap:26px}
.sound-toggle{background:none;border:1px solid #c8c8c8;border-radius:30px;padding:6px 14px;font-size:10px;letter-spacing:.12em;color:#555}
.sound-toggle[aria-pressed="false"]{color:#999;border-style:dashed}
@media (prefers-reduced-motion:reduce){.hero h1.split .ch,.hero h1.split.landed .ch,.hero h1.split .ch.wobble,.hero h1.split.landed .ch.wobble,.hero h1.split.landed .ch.hop,.hero h1.split.landed .ch.shake,.hero h1.split .ch.hop,.hero h1.split .ch.shake,.hero h1.split.landed .ch.shake{animation:none}}
@media(max-width:520px){.hero-actions{gap:12px}.sound-toggle{padding:5px 10px}}

/* ロゴ（A案・SVG。文字は周りの色、キラキラはうす紫） */
.brand-logo{display:block;height:34px;width:auto;overflow:visible}.brand-spark{fill:#8f7ad8}
.contact .brand-spark,footer .brand-spark{fill:#8f7ad8}
@media(max-width:520px){.brand-logo{height:27px}}
/* ニュースのサムネイル（任意・content.json の image） */
.news-row.has-thumb .news-copy{display:flex;gap:18px;align-items:flex-start}
.news-thumb{width:168px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;flex:none;background:#eee}
.news-words{min-width:0}
@media(max-width:520px){.news-row.has-thumb .news-copy{flex-direction:column;gap:10px}.news-thumb{width:100%}}
/* 最初の画面：アーヤは左。右に「A little magic.」1行 → 「創造に、ひとさじの魔法を。」を大きく1行 → 自己紹介（見出し行のライン＋左：リード／右：経歴）。星はアーヤのまわり（2026-09-25） */
.hero #stage{inset:0 auto 0 0;width:48%}
.hero{background:radial-gradient(ellipse at 25% 50%,#ececee 0%,#f8f8f7 58%)}
.hero-copy{position:absolute;left:46%;right:4.5%;top:64px;bottom:130px;z-index:2;display:flex;flex-direction:column;justify-content:center}
.hero .hero-copy h1{position:static;inset:auto;margin:0;white-space:nowrap;font-size:clamp(52px,6.6vw,128px);line-height:1;font-weight:500;letter-spacing:-.03em;pointer-events:none}
.hero .hero-copy h1>span{display:inline;font-size:inherit}
.hero .hero-copy h1 .magic-word{margin-top:0;text-align:left}
.hero-catch{margin:.55em 0 0;white-space:nowrap;font-size:clamp(26px,2.95vw,54px);line-height:1.3;letter-spacing:.08em;font-weight:500}
html[data-lang="en"] .hero-catch,html[data-lang="zh"] .hero-catch{font-size:clamp(22px,2.3vw,42px);letter-spacing:.02em}
.hero-about{margin-top:clamp(30px,3.6vw,56px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,3vw,56px);row-gap:18px;align-items:start}
.hero-about p{margin:0}
.hi-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.16em;color:#555}
.hi-eyebrow::after{content:'';flex:1;height:1px;background:#cfcfcf}
.hi-lead{font-size:clamp(16px,1.25vw,20px);line-height:1.75;letter-spacing:.05em;font-weight:500;white-space:nowrap}
.hi-text p+p{margin-top:10px}
.hi-body{font-size:15px;line-height:1.9;color:#444}
.hi-en{font-size:13.5px;line-height:1.7;color:#777}
.hero-bottom{justify-content:flex-end}
.hero .star-one{left:7%;top:20%;font-size:62px}
.hero .star-two{left:39%;right:auto;top:18%;font-size:54px}
.hero .star-three{left:40%;right:auto;top:66%;font-size:44px}
@media(max-width:1200px){.hi-en{display:none}}
@media(max-width:1000px){.hero-copy{left:44%}.hero #stage{width:46%}.hero-about{grid-template-columns:1fr}.hero .star-two{left:36%}.hero .star-three{left:37%}}
@media(max-width:720px){
  .hero{height:auto;max-height:none;min-height:0;padding-bottom:120px}
  .hero #stage{position:relative;inset:auto;width:100%;height:62svh;min-height:420px}
  .hero-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:0 5.5%;display:block}
  .hero .hero-copy h1{font-size:12.2vw}
  .hero-catch{font-size:5.6vw;letter-spacing:.04em}
  html[data-lang="en"] .hero-catch,html[data-lang="zh"] .hero-catch{font-size:4.6vw;white-space:normal}
  .hero-about{grid-template-columns:1fr;margin-top:26px;row-gap:12px}
  .hi-lead{white-space:normal;font-size:16px}.hi-body{font-size:14px}
  .hero .star-one{left:6%;top:9%;font-size:44px}.hero .star-two{left:auto;right:8%;top:7%}.hero .star-three{left:auto;right:10%;top:40%}
}
/* 言語切替（i18n.js がヘッダーのメニューに差し込む） */
.lang-switch{display:flex;border:1px solid #cfcfcf;border-radius:30px;overflow:hidden;margin-left:4px}
.lang-switch button{border:0;background:transparent;padding:7px 12px;font-size:11px;letter-spacing:.06em;color:#555;cursor:pointer;line-height:1}
.lang-switch button[aria-pressed="true"]{background:#171717;color:#fff}
.lang-switch button:hover:not([aria-pressed="true"]){background:#ececec}
/* 英語・中国語のときは、日本語の下に添えていた英語の行を出さない（本文がその言語になるので重複する） */
html[data-lang="en"] .en,html[data-lang="zh"] .en{display:none}
html[data-lang="zh"] body{font-family:'DM Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
@media(max-width:520px){.lang-switch button{padding:6px 7px;font-size:9.5px;letter-spacing:0}.lang-switch{margin-left:0}header nav{gap:12px}header nav>a[href$="#awards"]{display:none}.contact-link{white-space:nowrap}}
/* 「いつでもご機嫌」：傾いたシールをやめて、サイトの他のボタンと同じ細い線のラベルに（先頭に小さなキラキラ） */
.maka-copy h3 .maka-sticker{transform:none;background:transparent;border:1px solid #cfcfcf;color:#555;font-size:11px;font-weight:400;letter-spacing:.08em;padding:3px 13px 3px 11px;margin-left:12px;vertical-align:2px}
.maka-copy h3 .maka-sticker::before{content:'✦';color:#e79ac0;margin-right:6px;font-size:10px}
/* メニュー：英語＋小さく日本語（中国語のときは中国語、英語のときは下の段を出さない） */
header nav>a{display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.nav-en{font-size:14px}
.nav-ja{font-size:10px;letter-spacing:.08em;color:#777;margin-top:4px}
html[data-lang="en"] .nav-ja{display:none}
.contact-link{flex-direction:row!important;gap:8px;padding:9px 20px!important;align-items:baseline!important}
.contact-link .nav-ja{margin-top:0}
@media(max-width:520px){.nav-en{font-size:12px}.nav-ja{font-size:9px;margin-top:2px}.contact-link{padding:7px 12px!important;gap:5px}.contact-link .nav-ja{display:none}}
/* メニューの文字をいまどきのサイズに（英語16px・日本語11.5px） */
.nav-en{font-size:16px;font-weight:500;letter-spacing:.01em}
.nav-ja{font-size:11.5px;margin-top:5px}
header nav{gap:34px}
.contact-link{padding:11px 22px!important}
.lang-switch button{font-size:12.5px;padding:8px 13px}
@media(max-width:1200px){header nav{gap:24px}}
@media(max-width:520px){.nav-en{font-size:13px}.nav-ja{font-size:9.5px}header nav{gap:12px}.contact-link{padding:7px 12px!important}.lang-switch button{font-size:10px;padding:6px 7px}}
/* 古い「↗ を隠す」指定（.contact-link span）が新しいラベルまで消していたので戻す */
@media(max-width:800px){.contact-link span.nav-en,.contact-link span.nav-ja{display:inline}}
@media(max-width:520px){.contact-link span.nav-ja{display:none}}
/* スマホのヘッダー：ロゴ・お問い合わせ・言語切替だけ（ほかはスクロールで届く） */
.lang-switch button{white-space:nowrap}
@media(max-width:520px){header nav>a[href$="#works"]{display:none}.contact-link{border:1px solid #bbb!important;border-radius:30px;padding:7px 14px!important}header nav{gap:10px}}
/* ── ロゴ（打ち文字）：fairy＝Fraunces 太字イタリック、AYA＝DM Sans 太字。i の点はキラキラ（2026-09-25） ── */
.brand-word{display:flex;align-items:baseline;gap:.2em;line-height:1;font-size:34px;color:var(--ink);letter-spacing:0}
.bw-fairy{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;letter-spacing:-.015em}
.bw-i{position:relative}
.bw-i::before{content:'✦';position:absolute;left:50%;top:-.16em;transform:translateX(-38%);font-size:.4em;font-style:normal;color:#8f7ad8;transition:transform .5s cubic-bezier(.2,1.6,.4,1),color .3s}
.bw-aya{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.74em;letter-spacing:.07em}
.brand:hover .bw-i::before{transform:translateX(-38%) rotate(180deg) scale(1.35);color:#ef92bf}
.brand span[data-i18n-skip]{margin-top:7px}
/* ── メニュー：英語が下から入れ替わる＋グラデーションの下線が中央から伸びる ── */
header nav>a:not(.contact-link){position:relative;transition:opacity .2s}
header nav>a:not(.contact-link):hover{opacity:1}
header nav>a:not(.contact-link)::after{content:'';position:absolute;left:50%;right:50%;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9f86e8,#ef92bf);transition:left .4s cubic-bezier(.2,.8,.2,1),right .4s cubic-bezier(.2,.8,.2,1)}
header nav>a:not(.contact-link):hover::after{left:8%;right:8%}
.nav-en .roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;line-height:1.2}
.nav-en .roll::after{content:attr(data-t);position:absolute;left:0;top:100%;width:100%}
.nav-en .roll{transition:none}
header nav>a:hover .nav-en .roll{text-shadow:none}
.nav-en .roll{background:none}
header nav>a .nav-en .roll{transform:translateY(0)}
header nav>a .nav-en{display:inline-block;height:1.2em;overflow:hidden}
header nav>a .nav-en .roll{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
header nav>a:hover .nav-en .roll{transform:translateY(-100%)}
.nav-ja{transition:color .3s}
header nav>a:hover .nav-ja{color:#8f7ad8}
/* ── お問い合わせ：黒いピル＋白い丸の矢印。ホバーでグラデーションが流れ込み、文字が入れ替わり、矢印が回る ── */
.contact-link{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:6px 6px 6px 22px!important;border:0!important;border-radius:999px!important;background:#171717;color:#fff!important;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.contact-link::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(100deg,#9f86e8 0%,#ef92bf 55%,#f3c36a 100%);transform:translateX(-101%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.contact-link:hover::before{transform:translateX(0)}
.contact-link:hover{box-shadow:0 10px 26px -10px rgba(159,134,232,.75)}
.cta-roll{display:inline-block;height:1.3em;overflow:hidden;line-height:1.3;font-size:15px;font-weight:500;letter-spacing:.02em}
.cta-roll>span{display:block;text-align:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.contact-link:hover .cta-roll>span{transform:translateY(-100%)}
.cta-alt{font-size:13.5px;letter-spacing:.06em}
.cta-arrow{display:inline-grid!important;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#171717;font-size:15px;line-height:1;transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.contact-link:hover .cta-arrow{transform:rotate(45deg) scale(1.06)}
.cta-spark{width:8px!important;height:8px!important;border-radius:0!important;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@media(max-width:800px){.contact-link .cta-roll{display:inline-block}.contact-link .cta-roll>span{display:block}.contact-link .cta-arrow{display:inline-grid!important}}
@media(max-width:520px){.brand-word{font-size:27px}.contact-link{gap:8px!important;padding:4px 4px 4px 14px!important}.cta-roll{font-size:13px}.cta-arrow{width:28px;height:28px;font-size:13px}}
@media(prefers-reduced-motion:reduce){header nav>a .nav-en .roll,.cta-roll>span,.contact-link::before,.cta-arrow{transition:none}}
.contact-link span{margin-left:0}
header nav a:hover{opacity:1}
/* 古い「.brand span＝小さい段」の指定がロゴの文字に当たらないように */
.brand .brand-word{display:flex;margin:0;font-size:34px;letter-spacing:0;font-weight:400}
.brand .brand-word span{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
.brand .brand-word .bw-fairy{letter-spacing:-.015em}
.brand .brand-word .bw-aya{font-size:.74em;letter-spacing:.07em}
@media(max-width:520px){.brand .brand-word{font-size:27px}}
.brand .brand-word .bw-fairy{font-weight:700;font-style:italic}
.brand .brand-word .bw-aya{font-weight:700}
header nav>a .nav-en .roll{overflow:visible}
@media(max-width:520px){.brand .brand-word{font-size:24px}.contact-link{gap:6px!important;padding:3px 3px 3px 12px!important}.cta-roll{font-size:12px}.cta-alt{font-size:11px}.cta-arrow{width:24px;height:24px;font-size:11px}header nav{gap:8px}}