:root{--ink:#10110d;--paper:#f3f2e9;--accent:#FCBA03;--accent-light:#FCBA03;--accent-dark:#E33503;--line:#ffffff24;--muted:#9b9d91;--side:clamp(22px,5vw,88px);--ease:cubic-bezier(.2,.75,.25,1);color-scheme:dark;font-family:'Noto Sans JP',sans-serif;background:var(--ink);color:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled,select:disabled{cursor:wait;opacity:.55}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{color:var(--ink);background:var(--accent)}img{max-width:100%;display:block}canvas{display:block;width:100%;height:100%}.mono{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.1em}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--accent);color:var(--ink);padding:15px}.skip-link:focus{top:12px}.site-header{height:86px;padding:0 var(--side);display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line);background:#10110df2;position:relative;z-index:20}.wordmark{font-family:Arial,sans-serif;display:inline-flex;align-items:center;gap:12px;font-size:23px;letter-spacing:.12em;font-weight:700;white-space:nowrap}.brand-period{font-size:13px;align-self:flex-start;color:var(--accent);margin-left:-6px}.brand-icon{width:33px;height:33px;object-fit:contain;flex:0 0 auto}.site-header nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:12px}.site-header nav>a{transition:color .2s}.site-header nav>a:hover{color:var(--accent)}.nav-get{border-bottom:1px solid #ffffff65;padding:10px 0}.nav-get span{margin-left:25px}.motion-toggle{height:33px;width:33px;background:none;border:1px solid #ffffff45;border-radius:50%;display:grid;place-items:center;font-size:13px}.motion-toggle:hover{background:var(--accent);color:var(--ink)}
.hero{position:relative;min-height:0;height:calc(100svh - 86px);max-height:none;padding:28px var(--side) 0;overflow:hidden;isolation:isolate;background:var(--ink)}.hero-topline{display:flex;justify-content:space-between;color:#e0e1d4;position:relative;z-index:4}.live-dot{display:inline-block;background:var(--accent);width:6px;height:6px;border-radius:50%;margin-right:8px;box-shadow:0 0 8px #FCBA0355;animation:breathe 2s infinite}.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}/* 全面の映像に暗幕と静かな罫線を重ね、明るいテーマでも本文を読めるようにする。 */
.hero:before,.hero:after{content:'';position:absolute;inset:0;pointer-events:none}
.hero:before{z-index:1;background:linear-gradient(90deg,#10110dd6 0%,#10110db3 38%,#10110d52 76%,#10110d66 100%),linear-gradient(0deg,#10110de6 0%,transparent 25%,transparent 78%,#10110d55 100%)}
.hero:after{z-index:2;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#00000024 3px 4px),linear-gradient(#f3f2e90a 1px,transparent 1px),linear-gradient(90deg,#f3f2e90a 1px,transparent 1px);background-size:100% 4px,96px 96px,96px 96px}
.motion-surface{position:relative;overflow:hidden;background:#10110d}.hero .motion-surface{position:absolute;background:transparent}.motion-surface canvas{position:absolute;inset:0;opacity:0;transition:opacity .45s}.motion-surface.is-ready canvas{opacity:1}.poster{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;transition:opacity .45s}.motion-surface.is-ready .poster{opacity:0;pointer-events:none}.hero-art-caption{position:absolute;bottom:102px;right:var(--side);z-index:4;display:flex;align-items:center;gap:25px;color:#d4d6c4;text-shadow:0 2px 12px #10110d}.crosshair{color:var(--accent);font-size:30px;line-height:8px}.hero-copy{position:relative;z-index:5;pointer-events:none;padding-top:clamp(56px,13svh,190px);max-width:750px;text-shadow:0 2px 18px #10110d99}.hero-copy a{pointer-events:auto}.eyebrow{font-size:12px;letter-spacing:.14em;color:#d8d9cc;margin:0 0 26px}.hero h1{font-size:clamp(64px,7.2vw,122px);font-weight:900;line-height:1.28;letter-spacing:-.065em;margin:0;position:relative;text-shadow:0 2px 2px #10110d66,0 8px 40px #10110dcc}.hero h1>span:first-child{color:var(--accent)}.title-star{font-size:51px;display:inline-block;vertical-align:top;color:var(--accent);margin:20px 0 0 13px;position:relative;top:-30px;animation:star-turn 9s linear infinite}.hero-english{font-family:Georgia,serif;font-style:italic;font-size:clamp(23px,2.1vw,34px);letter-spacing:-.02em;margin:25px 0 36px}.hero-actions{display:flex;gap:32px;align-items:center}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:56px;padding:17px 25px;font-size:13px;font-weight:700;border:0;transition:background .2s,transform .3s var(--ease)}.button:hover{transform:translateY(-3px)}.button-yellow{background:var(--accent);color:var(--ink)}.button-yellow:hover{background:var(--accent-light)}.button>span:last-child{font-size:22px}.text-link{font-size:12px;border-bottom:1px solid #ffffff80;padding:12px 0}.text-link span{margin-left:14px}.ticker{overflow:hidden;background:var(--accent);color:var(--ink);padding:13px 0;font-family:Arial,sans-serif;font-weight:800;font-size:22px;letter-spacing:.02em;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-1.52vw) rotate(-1.3deg) scale(1.01);position:relative;z-index:6}.ticker>div{width:max-content;animation:ticker 34s linear infinite}.ticker span{margin:0 38px;font-size:26px}
.section-pad{padding:110px var(--side)}.section-heading{position:relative;margin-bottom:48px}.section-index{color:var(--muted);margin:0 0 30px}.section-heading h2,.formats h2{font-size:clamp(36px,4.4vw,70px);line-height:1.5;font-weight:700;letter-spacing:-.05em;margin:0}.section-note{font-size:12px;letter-spacing:.08em;color:var(--muted);margin:18px 0 0}.stage-meta{position:absolute;bottom:24px;left:26px;right:26px;display:flex;justify-content:space-between;gap:18px;font-size:12px;z-index:3;pointer-events:none}.surface-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:clamp(30px,5vw,84px);font-weight:900;letter-spacing:-.06em;margin:0;pointer-events:none;line-height:1.5}.is-ready .surface-fallback{display:none}
.playground{background-color:var(--paper);background-image:linear-gradient(#10110d0a 1px,transparent 1px),linear-gradient(90deg,#10110d0a 1px,transparent 1px);background-size:64px 64px;color:var(--ink)}.playground .section-index,.playground .section-note{color:#6a6c60}.playground .section-heading h2{font-size:clamp(36px,4.4vw,65px)}.play-workspace{display:grid;grid-template-columns:minmax(260px,.85fr) 1.6fr;gap:50px;align-items:stretch}.play-controls{position:relative;display:flex;flex-direction:column}.field-label{font-size:12px;display:flex;justify-content:space-between;padding:5px 0 16px}.field-label span{font-size:23px;line-height:10px}textarea{width:100%;resize:vertical;border:0;border-bottom:1px solid #10110d60;background:transparent;color:var(--ink);font-size:clamp(23px,2vw,30px);font-weight:700;line-height:1.9;letter-spacing:-.035em;border-radius:0;min-height:140px;padding:12px 0 15px}textarea:focus{outline:none;border-bottom-color:#10110d}textarea:focus-visible{box-shadow:0 2px var(--ink)}.input-count{text-align:right;color:#77786f;font-size:12px;margin:11px 0 26px}.shuffle-button{background:var(--ink);color:var(--paper);margin-top:25px;gap:10px;transition:background-color .14s ease,transform .14s ease}.shuffle-button:hover{background:#36392a}.shuffle-button>span:last-child{font-size:30px;line-height:10px}.small-note{font-size:12px;color:#737569;line-height:1.9;margin:17px 0 0}.play-screen{min-height:400px;border:1px solid #10110d30;color:var(--paper)}.play-screen .stage-meta{bottom:20px}.engine-message{font-size:12px;color:#57594e;min-height:18px;margin:18px 0 0}.engine-message:empty{margin:0;min-height:0}.playground input:focus-visible,.playground select:focus-visible{outline-color:var(--ink)}.big-number{font-family:Arial,sans-serif;font-size:clamp(80px,12vw,180px);font-weight:800;letter-spacing:-.08em;line-height:1;color:var(--accent);margin-right:22px;display:inline-block;vertical-align:-.05em}
.media-section{background:#fff2fe;color:#2f261e}.media-section .section-index,.media-section .section-note{color:#796f60}.media-stage{aspect-ratio:16/9;min-height:240px;color:#7A2BB8;background:#FFDDEB}.media-stage .stage-meta{color:#f9edcf}.media-controls{display:flex;justify-content:center;gap:8px;margin-top:24px;flex-wrap:wrap}.media-controls button{background:transparent;border:1px solid #2f261e40;color:#2f261e;padding:12px 22px;font-size:12px}.media-controls button[aria-pressed=true]{background:#2f261e;color:#fff4e1}.media-section button:focus-visible{outline-color:#2f261e}.formats{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;min-height:640px}.formats h2{font-size:clamp(32px,3.7vw,58px)}.format-tabs{display:flex;gap:9px;margin-top:36px}.format-tabs button{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:none;padding:14px 20px;font-size:12px}.format-tabs button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}.ratio-icon{display:inline-block;border:1px solid currentColor;width:22px;height:13px}.ratio-icon.tall{width:12px;height:20px}.ratio-icon.square{width:17px;height:17px}.format-output{font-size:12px;letter-spacing:.04em;display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);margin-top:28px}.format-output span{color:var(--accent)}.format-display{height:420px;display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:35px}.format-stage{aspect-ratio:16/9;width:100%;max-width:100%;border:1px solid #ffffff40;box-shadow:12px 12px 0 #ffffff08;transition:width .6s var(--ease),height .6s var(--ease),aspect-ratio .6s var(--ease);background:var(--accent);color:var(--ink)}.format-stage[data-aspect='9:16']{width:210px;aspect-ratio:9/16}.format-stage[data-aspect='1:1']{width:350px;aspect-ratio:1}.format-caption{position:absolute;bottom:0;font-size:12px;white-space:nowrap;color:var(--muted)}
.download{position:relative;text-align:center;overflow:hidden;border-top:1px solid var(--line);padding-top:90px;padding-bottom:85px;background:var(--accent);color:var(--ink)}.download .section-index{position:relative;z-index:1;color:#2F261E;margin-bottom:38px}.app-icon{border-radius:21px;width:72px;height:72px;margin:0 auto 24px;box-shadow:0 10px 35px #2b2d101f}.download h2{position:relative;z-index:1;font-size:clamp(60px,9.7vw,150px);font-weight:900;line-height:1.25;letter-spacing:-.07em;margin:0 0 27px}.download h2 i{font-size:.4em;position:absolute;top:15%;margin-left:25px;font-style:normal;animation:star-turn 20s linear infinite}.download>p:not(.section-index){font-size:12px}.download>p .mono{font-size:12px}.end-orbit{position:absolute;width:120%;height:280px;border:1px solid #10110d26;border-radius:50%;left:-10%;top:30%;transform:rotate(-20deg)}.end-orbit:after{content:'';width:100%;height:100%;border:1px solid #10110d12;position:absolute;inset:10%;border-radius:50%;transform:rotate(20deg)}.store-buttons{position:relative;display:flex;justify-content:center;gap:12px;margin-top:36px}.download a:focus-visible{outline-color:var(--ink)}.faq{padding-top:65px;padding-bottom:70px;max-width:1200px;margin:auto}.faq details{border-bottom:1px solid var(--line)}.faq summary{display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:16px;color:#fff;cursor:pointer;list-style:none;transition:background-color .18s ease}.faq summary::-webkit-details-marker{display:none}.faq summary>span[aria-hidden="true"]{color:var(--accent);font-size:19px;line-height:1}.faq details[open] summary>span[aria-hidden="true"]{transform:rotate(45deg)}.faq details p{font-size:12px;line-height:2.2;color:var(--muted);margin:0 0 25px}.site-footer{border-top:1px solid var(--line);padding:35px var(--side) 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.site-footer>.wordmark{font-size:21px}.site-footer>div{display:flex;flex-wrap:wrap;max-width:100%;gap:24px;margin-left:auto;font-size:12px;color:#b2b4a6}.site-footer>p{display:flex;justify-content:space-between;width:100%;font-size:12px;color:#73776a;margin-top:30px}.noscript-message{padding:15px var(--side);font-size:12px;color:var(--paper);border-top:1px solid var(--line)}
/* OSの設定と手動停止のどちらでも、ページ全体の装飾を停止する。 */
html[data-paused=true] *,html[data-paused=true] *:before,html[data-paused=true] *:after{animation-play-state:paused!important;scroll-behavior:auto!important}html[data-paused=true] .live-dot{box-shadow:none}html[data-paused=true] .motion-toggle{background:var(--accent);color:var(--ink)}
@keyframes ticker{to{transform:translateX(-33.333%)}}@keyframes star-turn{to{transform:rotate(360deg)}}@keyframes arrow-down{50%{transform:translateY(5px)}}@keyframes breathe{50%{opacity:.35}}
@media(min-width:1700px){.section-pad{padding-left:max(var(--side),calc((100vw - 1600px)/2));padding-right:max(var(--side),calc((100vw - 1600px)/2))}}
@media(max-width:1100px){.hero-copy{padding-top:clamp(56px,13svh,170px)}.hero h1{font-size:85px}.hero-art-caption{display:none}.hero-actions{gap:20px}.site-header nav{gap:20px}.play-workspace{gap:30px;grid-template-columns:.9fr 1.2fr}.formats{gap:30px}.format-display{height:380px}.section-pad{padding-top:85px;padding-bottom:85px}}
@media(max-width:760px){:root{--side:22px}.site-header{height:72px;gap:15px}.wordmark{font-size:19px;gap:9px;letter-spacing:.1em}.brand-icon{width:29px;height:29px}.site-header nav{gap:0}.site-header nav>a:not(.nav-get){display:none}.site-header .nav-get{font-size:12px;border:0}.nav-get span{margin-left:7px}.motion-toggle{width:29px;height:29px;flex-shrink:0}.hero{height:calc(90svh - 76px);min-height:0;max-height:none;padding-top:24px}.hero:before{background:linear-gradient(0deg,#10110de6 0%,#10110dbd 28%,#10110db3 62%,#10110d66 100%)}.hero:after{background-size:100% 4px,64px 64px,64px 64px}.hero-topline{font-size:12px}.hero-topline>span:last-child{display:none}.hero-copy{padding-top:clamp(48px,16svh,160px);max-width:none}.hero h1{font-size:clamp(55px,11vw,85px);line-height:1.33}.title-star{font-size:28px;margin:13px 0 0 7px}.eyebrow{font-size:12px;letter-spacing:.06em;margin-bottom:20px}.hero-english{font-size:25px;margin:24px 0 28px}.hero-actions{gap:20px;flex-wrap:wrap}.button{font-size:12px;min-height:53px;padding:15px 19px;gap:27px}.text-link{font-size:12px}.ticker{font-size:17px;padding:12px 0}.ticker span{margin:0 24px;font-size:21px}.section-pad{padding-top:65px;padding-bottom:65px}.section-index{font-size:12px;margin-bottom:23px}.section-heading{margin-bottom:30px}.section-heading h2,.formats h2{font-size:37px;line-height:1.6;letter-spacing:-.055em}.section-note{font-size:12px;letter-spacing:.02em;line-height:1.9}.stage-meta{bottom:17px;left:16px;right:16px;font-size:12px;letter-spacing:.05em}.play-workspace{grid-template-columns:1fr;gap:27px}.playground .section-heading h2{font-size:36px}.play-controls{order:1}.play-screen{min-height:0;aspect-ratio:1;order:0}.field-label{padding-bottom:8px}textarea{font-size:24px;min-height:120px}.input-count{margin-bottom:12px}.shuffle-button{margin-top:23px}.big-number{font-size:96px;margin-right:15px}.media-stage{aspect-ratio:1;min-height:0}.media-stage .stage-meta>span:last-child{display:none}.media-controls{gap:6px;margin-top:18px}.media-controls button{padding:12px 10px;font-size:12px}.formats{grid-template-columns:1fr;gap:35px}.format-display{height:380px}.format-tabs{margin-top:25px}.format-tabs button{font-size:12px;padding:13px 19px}.format-output{font-size:12px;margin-top:23px}.format-stage[data-aspect='9:16']{width:180px}.format-stage[data-aspect='1:1']{width:310px}.download{padding-top:60px;padding-bottom:60px}.download h2{font-size:clamp(56px,13.5vw,90px)}.download h2 i{margin-left:10px}.app-icon{width:60px;height:60px;border-radius:16px}.store-buttons{gap:10px;margin-top:26px}.faq{padding-top:40px;padding-bottom:45px}.faq summary{font-size:16px;padding:22px 0}.faq details p{font-size:12px}.site-footer{gap:25px;padding-top:30px}.site-footer>.wordmark{font-size:19px}.site-footer>div{gap:19px;font-size:12px;margin-left:0}.site-footer>p{font-size:12px;margin-top:8px;line-height:1.8;gap:15px}.format-caption{font-size:12px}}
@media(max-width:370px){.site-header{gap:10px}.wordmark{font-size:17px}.site-header .nav-get{font-size:12px}.hero h1{font-size:53px}.hero-actions{gap:14px}.text-link{font-size:12px}.section-heading h2,.formats h2{font-size:32px}.big-number{font-size:82px}.download h2{font-size:52px}}
@media(prefers-reduced-motion:reduce){html:not([data-paused=false]){scroll-behavior:auto}html:not([data-paused=false]) *,html:not([data-paused=false]) *:before,html:not([data-paused=false]) *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* 補助ページは本文の読みやすさを優先する。 */
.document-page{max-width:900px;margin:0 auto;padding:70px var(--side) 100px}.document-page h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.04em;margin:20px 0 40px}.document-page h2{font-size:19px;margin:45px 0 16px}.document-page p,.document-page li{font-size:13px;line-height:2.2;color:#c1c5b4}.document-page a:not(.button){text-decoration:underline;text-underline-offset:4px}.document-page ul{padding-left:20px}.document-page .button{margin-top:20px}.document-page .date{font-size:12px;color:var(--muted)}.document-page code{color:var(--accent)}
.hero h1>span:not(.title-star){color:var(--accent)}
body{overflow-x:hidden}@supports(overflow:clip){body{overflow-x:clip}}.formats .text-link{display:inline-block;margin-top:20px}

/* 帯をラッパーの水平端で切らず、ヒーローと次のセクションの境界に重ねる。 */
.ticker-wrap{position:relative;z-index:7;isolation:isolate;overflow:visible;width:100%;background:var(--paper)}
.download .finale-art{position:absolute;inset:-15% -15%;background:transparent;opacity:.14;pointer-events:none}.download>.app-icon,.download>p,.download>.store-buttons{position:relative;z-index:2}

.formats-copy,.format-display{min-width:0}@media(max-width:760px){.formats{grid-template-columns:minmax(0,1fr)}.format-tabs{gap:8px}.format-tabs button{flex:1;min-width:0;justify-content:center;padding:13px 12px}}
.site-header{position:sticky;top:0;backdrop-filter:blur(16px)}

/* ストアへの行き先をページ内で明確にし、FAQの開閉を読みやすく補間する。 */
.site-header nav{gap:0}.site-header .nav-get{font-weight:700;border-bottom-color:var(--accent)}
.hero-copy{max-width:920px}.hero h1{font-size:clamp(64px,7.2vw,112px)}
.section-action{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin:16px 0 0;color:#686a60;font-size:12px}.section-action .text-link,.section-link{display:inline-block;color:inherit}.section-action .text-link{border-bottom-color:#10110d65}.section-link{margin-top:22px;border-bottom-color:#ffffff70}
.collection .section-heading{width:min(100%,1100px)}
.download{padding-top:58px;padding-bottom:58px}.download h2{font-size:clamp(36px,4.2vw,67.5px);line-height:1.2}.download>p:not(.section-index){line-height:2}
.faq>h2{font-size:clamp(36px,4.4vw,64px);line-height:1.35;letter-spacing:-.05em;margin:0 0 30px}.faq details{overflow:hidden}.faq summary{min-height:68px;align-items:center}.faq summary>span[aria-hidden="true"]{transition:transform .28s cubic-bezier(.16,1,.3,1)}.faq-answer{height:auto;overflow:hidden;opacity:1;transition:height .38s cubic-bezier(.16,1,.3,1),opacity .24s ease-out}.faq-answer>p{margin:0 0 24px}
@media(max-width:1100px){.hero-copy{max-width:820px}.hero h1{font-size:clamp(64px,8vw,100px)}}
@media(max-width:760px){.site-header nav{margin-left:auto}.hero h1{font-size:clamp(42px,11vw,60px)}.title-star{font-size:21px;margin:9px 0 0 4px}.section-heading h2,.formats h2{font-size:clamp(31px,8vw,37px);line-height:1.45}.section-action{justify-content:space-between;flex-wrap:wrap;gap:8px 15px;margin-top:12px}.section-link{margin-top:17px}.collection .section-heading{width:100%}.download{padding-top:60px;padding-bottom:60px}.download h2{font-size:clamp(34.5px,9.75vw,51px)}.faq>h2{font-size:37px}.faq summary{min-height:64px}}
@media(max-width:380px){.title-star{display:inline-block;font-size:16px;margin:7px 0 0 3px}.hero h1{font-size:clamp(36px,11vw,42px)}.download h2{font-size:clamp(28.5px,9.75vw,36px)}.store-buttons{display:grid;grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto}.section-action{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.faq-answer,.faq summary>span[aria-hidden="true"]{transition:none}}
@supports(overflow:clip){.ticker-wrap{overflow-x:clip;overflow-y:visible}}

/* 入力体験は言葉とランダム切替に絞る。 */
.play-workspace{grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:clamp(30px,5vw,80px)}
.play-controls textarea{font-size:clamp(20px,1.7vw,26px);line-height:1.7;min-height:320px;padding:16px;background:#fff;border:1px solid #d7d8d1;border-radius:3px;box-shadow:0 8px 24px #10110d0a}
.play-controls .input-count{margin-bottom:0}.shuffle-button{margin-top:24px}.play-screen{min-height:480px}.play-screen:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(#f3f2e910 1px,transparent 1px),linear-gradient(90deg,#f3f2e910 1px,transparent 1px);background-size:64px 64px}.play-screen .surface-fallback{z-index:2}
/* 実際のモーションを背景のタイルに並べ、見出しに視線を集める。 */
.collection{position:relative;isolation:isolate;min-height:780px;height:64vw;max-height:1000px;display:grid;place-items:center;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line)}
.collection-wall{position:absolute;inset:0;z-index:-3}.collection-wall canvas{transition:opacity .7s}.collection:after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#00000024 3px 4px),linear-gradient(#f3f2e90a 1px,transparent 1px),linear-gradient(90deg,#f3f2e90a 1px,transparent 1px);background-size:100% 4px,48px 48px,48px 48px}
.collection-fallback{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:5px;opacity:.7}
.collection-fallback span{display:grid;place-items:center;background:var(--accent);color:#202513;font-size:clamp(30px,5vw,80px);font-weight:900}
.collection-fallback span:nth-child(3n){background:#e6d5bd;font-family:serif}.collection-fallback span:nth-child(3n+1){background:#29233e;color:#ffb9e1}
.collection-wall.is-ready .collection-fallback{display:none}
.collection-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10110dd6 0%,#10110db3 38%,#10110d52 76%,#10110d66 100%),linear-gradient(0deg,#10110de6 0%,transparent 25%,transparent 78%,#10110d55 100%);pointer-events:none}
.collection .section-heading{margin:0;text-align:center;max-width:100%}
.collection .section-index{color:#e3e4d0;margin-bottom:32px}
.collection h2{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.3vw,16px);margin:0;font-size:clamp(26px,3.2vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.2;text-shadow:none}
.collection-stats{display:flex;align-items:baseline;justify-content:center;gap:clamp(14px,3vw,42px);white-space:nowrap}
.collection-stat{display:inline-flex;align-items:baseline;gap:.12em;white-space:nowrap}
.collection-stat-label{font-size:clamp(18px,2.1vw,32px);letter-spacing:-.04em}
.collection .big-number{font-family:Arial,sans-serif;font-size:clamp(96px,9vw,150px);font-weight:800;letter-spacing:-.08em;line-height:.9;color:var(--accent);margin:0;text-shadow:none}
.collection-closing{display:flex;align-items:center;justify-content:center;gap:.35em;font-size:clamp(27px,3vw,46px);letter-spacing:-.045em;line-height:1.3}
@media(max-width:760px){.collection:after{background-size:100% 4px,32px 32px,32px 32px}.play-workspace{grid-template-columns:minmax(0,1fr);gap:27px}.play-screen{min-height:0}.play-controls textarea{font-size:23px;min-height:330px}.collection{height:920px;min-height:0;max-height:none;padding-left:16px;padding-right:16px}.collection-fallback{grid-template-columns:repeat(2,1fr);gap:6px}.collection-fallback span:nth-child(n+9){display:none}.collection .section-index{font-size:12px;margin-bottom:30px}.collection h2{gap:5px}.collection-stats{flex-direction:column;align-items:center;gap:0}.collection-stat{gap:.14em}.collection-stat-label{font-size:clamp(15px,4.5vw,20px)}.collection .big-number{font-size:clamp(80px,23vw,110px)}.collection-closing{flex-direction:column;gap:0;font-size:clamp(24px,6.2vw,36px)}}

/* 追加した画面比は既存の三列にそろえ、プレビュー枠内に収める。 */
.format-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.format-tabs button{justify-content:center;min-width:0;padding-left:12px;padding-right:12px}
.ratio-icon.four-three{width:20px;height:15px}.ratio-icon.three-four{width:15px;height:20px}.ratio-icon.cinema{width:24px;height:10px}
.format-stage[data-aspect='4:3']{width:min(100%,480px);aspect-ratio:4/3}.format-stage[data-aspect='3:4']{width:260px;aspect-ratio:3/4}.format-stage[data-aspect='21:9']{width:100%;aspect-ratio:21/9}
.collection-fallback span{min-width:0;overflow:hidden;word-break:break-all}
@media(max-width:760px){.format-stage[data-aspect='3:4']{width:240px}}

/* 初回表示も人物を拡大し、足先をフレーム外へ隠す。 */
.media-poster{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 57px,#7A2BB81A 57px 59px,transparent 59px 60px),#FFDDEB}
.media-poster>span{position:absolute;inset:0;display:grid;place-items:center;color:#7A2BB8;font-size:clamp(24px,3.7vw,60px);font-weight:900;white-space:nowrap;text-shadow:2px 2px #fff,-2px -2px #fff}
.media-poster>img{position:absolute;left:50%;bottom:-39%;width:auto;height:132%;max-width:none;object-fit:contain;transform:translateX(-50%)}

/* モーションと見出しを左右に分け、狭い画面では見出しを先に読む。 */
.media-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px;min-height:640px}.media-preview,.media-copy{min-width:0}.media-section .media-copy{margin:0}.media-section .media-copy h2{font-size:clamp(32px,3.7vw,58px)}.media-stage{min-height:0}
@media(max-width:1100px){.media-section{gap:30px}}
@media(max-width:760px){.media-section{grid-template-columns:minmax(0,1fr);gap:30px;min-height:0}.media-copy{order:-1}.media-section .media-copy h2{font-size:37px}}
@media(max-width:370px){.media-section .media-copy h2{font-size:32px}}

@media(max-height:700px){.hero{padding-top:18px}.hero-copy{padding-top:clamp(24px,5svh,52px)}.hero h1{font-size:clamp(48px,6.2vw,82px);line-height:1.15}.eyebrow{margin-bottom:12px}.hero-english{font-size:clamp(20px,2vw,26px);margin:14px 0 18px}.hero-actions{gap:14px}.button{min-height:46px;padding:12px 16px;gap:20px}}
/* ストア公式バッジは同じ高さで表示し、比率を保って収める。 */
.store-buttons{align-items:center}.store-badge-link{display:inline-flex;align-items:center;justify-content:center;height:64px;flex-shrink:0;transition:transform .2s}.store-badge-link:hover{transform:translateY(-4px)}.store-badge-link img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
@media(max-width:760px){.store-badge-link{height:52px}}
@media(max-width:380px){.store-badge-link{width:100%}}
.hero-copy .hero-store-buttons{justify-content:flex-start;gap:16px;margin-top:0}
@media(max-width:760px){.hero-copy .hero-store-buttons{flex-direction:column;align-items:flex-start;gap:24px}}
/* ヒーローのストアリンク下に対応端末を表示する。 */
.hero-copy .hero-platforms{margin:12px 0 0;color:#d8d9cc;font-size:12px}

/* ヒーローを画面高に合わせつつ、縦方向の上限を1024pxに保つ。 */
.hero{max-height:1024px}
.hero h1{color:var(--accent)}
/* 大きな数字の字間を広げ、見出し内の2つの訴求語を連続して見せる。 */
.collection-stats{gap:0}
.collection .big-number{letter-spacing:-.035em}
/* ヒーローの格子は従来の半分にし、大見出しは黄色の輪郭だけを残す。 */
.hero:after{background-size:100% 4px,48px 48px,48px 48px}
.hero h1{width:fit-content;max-width:100%;letter-spacing:1.2px;background:none;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.8px var(--accent);color:var(--accent);text-shadow:none}
/* ヒーローとダウンロード欄のコピーは同じ書体・表記で見せる。 */
.hero .site-tagline,.download .site-tagline{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
@media(max-width:760px){.hero:after{background-size:100% 4px,32px 32px,32px 32px}}
/* セクションの格子は残し、ライブプレビューのフレームには重ねない。 */
.play-screen:after{display:none}
h1,h2,h3,h4,h5,h6{font-family:'Noto Sans JP',sans-serif}.heading-bold{font-weight:700}.download h2>span{font-weight:900}

/* 言語ごとに字形と折り返しを整え、共通のサイト構成を保つ。 */
:root{--site-font:'Noto Sans JP',sans-serif;font-family:var(--site-font)}
:root:lang(en),:root:lang(id),:root:lang(vi){--site-font:'Noto Sans',sans-serif}
:root:lang(zh-Hans){--site-font:'Noto Sans SC',sans-serif}
:root:lang(zh-Hant){--site-font:'Noto Sans TC',sans-serif}
:root:lang(ko){--site-font:'Noto Sans KR',sans-serif}
h1,h2,h3,h4,h5,h6{font-family:var(--site-font)}
.hero .site-tagline,.download .site-tagline{font-family:Georgia,'Times New Roman',var(--site-font);max-width:100%;overflow-wrap:break-word}
:root:lang(ja) .site-tagline,:root:lang(zh) .site-tagline,:root:lang(ko) .site-tagline{font-family:var(--site-font);font-style:normal}
.language-menu{position:relative;flex-shrink:0;font-family:var(--site-font);font-size:12px}
.language-menu summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:12px 10px;border:1px solid var(--line);border-radius:4px;white-space:nowrap}
.language-icon{position:relative;top:1px;display:block;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu summary:focus-visible,.language-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.language-menu ul{list-style:none;position:absolute;right:0;top:100%;margin:8px 0 0;padding:8px;min-width:185px;border:1px solid var(--line);background:var(--ink);box-shadow:0 10px 30px #0008;z-index:50}
.language-menu li a{display:block;padding:10px 14px;white-space:nowrap}
.language-menu a:hover,.language-menu a[aria-current=true]{background:var(--accent);color:var(--ink)}
.language-status{position:relative;z-index:15;margin:0;padding:0 var(--side);color:var(--accent);background:var(--ink);font-size:12px}
.language-status:not(:empty){padding-top:12px;padding-bottom:12px}
.site-header nav{min-width:0}.site-header{gap:18px}.site-header .nav-get{white-space:normal}
.ticker [data-l10n]{font-size:inherit;margin:0}
.section-heading h2,.formats h2,.media-section .media-copy h2{overflow-wrap:break-word}
#collection-title{display:block;line-height:1.6;max-width:100%;overflow-wrap:break-word}
#collection-title .big-number{font-size:clamp(72px,9vw,140px);vertical-align:baseline;margin:0 .1em;letter-spacing:-.035em}
/* 各言語の見出し最終行だけを下げ、白い文字同士の視覚的な間隔をそろえる。 */
#collection-title strong:last-of-type{display:block;position:relative;top:clamp(24px,4.2vw,40px)}
.shuffle-button [data-l10n]{font-size:13px;line-height:1.6}
.store-badge-link img{width:auto;max-width:100%;object-fit:contain}

.media-poster>span{white-space:normal;padding:20px;overflow-wrap:break-word}
.document-page{overflow-wrap:break-word}
@media(max-width:760px){
 .site-header{gap:10px;height:auto;min-height:76px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
 .site-header .wordmark{font-size:18px;gap:5px;letter-spacing:.06em}.site-header .brand-icon{width:24px;height:24px}.site-header .brand-period{position:relative;left:4px;top:-4px}
 .site-header nav{margin-left:auto;font-size:12px}.nav-get span:last-child{margin-left:3px}
 .language-menu{margin-left:auto;font-size:12px}.language-menu summary{padding:9px 7px}
 .motion-toggle{width:30px;height:30px;flex-shrink:0}
 #collection-title{font-size:clamp(21px,5vw,32px);line-height:1.65}
 #collection-title .big-number{font-size:clamp(68px,19vw,110px)}
 .format-tabs{flex-wrap:wrap}.format-tabs button{padding:11px 12px}
 .hero .hero-english{font-size:clamp(20px,5.7vw,28px)}
 .site-footer>div{flex-wrap:wrap;gap:14px}
}
@media(max-width:420px){.site-header nav{display:none}.site-header{gap:8px}.hero-copy{max-width:100%}.hero h1{font-size:clamp(34px,10vw,48px)}}
@media(max-width:380px){.language-menu summary{max-width:96px;overflow:hidden;text-overflow:ellipsis}.language-menu .current-language{min-width:0;overflow:hidden;text-overflow:ellipsis}}
.nav-get>[data-l10n]{margin-left:0}
.field-label [data-l10n]{font-size:inherit;line-height:inherit}

/* ダウンロード欄のコピーを太字にする。 */
.download .site-tagline{font-weight:900}
/* ヒーローと同じ走査線・格子をダウンロード欄の背景へ重ねる。 */
.download:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#10110d18 3px 4px),linear-gradient(#10110d14 1px,transparent 1px),linear-gradient(90deg,#10110d14 1px,transparent 1px);background-size:100% 4px,48px 48px,48px 48px}
@media(max-width:760px){.download:after{background-size:100% 4px,32px 32px,32px 32px}}
/* ロゴには全言語共通の書体を使う。 */
.wordmark{font-family:'Outfit',sans-serif;font-weight:600}
/* 帯の上下に3pxの枠線を外側へ描画する。 */
.ticker{border:0;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink)}
/* 03セクション全体の薄い背景へ白い水玉を重ねる。 */
.media-section{background-image:radial-gradient(circle,#ffffffcc 3px,transparent 3.2px);background-size:28px 28px}
/* Google Play画像の透明余白を除いた見た目の高さをAppleと揃える。 */
.store-badge-link img[data-locale-asset=google]{height:130.21%;max-width:none}
html[data-locale=en] .store-badge-link img[data-locale-asset=google]{height:100%;max-width:none}

.hero-copy>.hero-english{margin:0 0 32px;font-weight:700;mix-blend-mode:color-dodge}
/* 見出し直下の余白をなくす。 */
.hero h1{line-height:1}

/* モバイルでは固定ダウンロード導線を表示し、フッターの下端を確保する。 */
.header-spacer{flex:1}
.mobile-download-nav{display:none}
@media(max-width:760px){.mobile-download-nav{display:block;position:fixed;z-index:25;right:0;bottom:0;left:0;padding:8px var(--side) calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#10110df2;backdrop-filter:blur(14px)}.mobile-download-nav a{display:flex;align-items:center;justify-content:center;min-height:46px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:700}body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}.play-controls textarea{height:200px;min-height:200px}#collection-title strong{display:block}}
#collection-title strong{font-weight:inherit}

/* スマートフォンではプレビューと画面比キャプションの間隔を16pxに揃える。 */
@media(max-width:760px){.format-display{height:auto;min-height:0;flex-direction:column;gap:16px;padding:0}.format-caption{position:static}}
/* 英語版の02見出しは句読点を含む1文として自然に折り返す。 */
html[data-locale=en] .collection h2{display:block;text-align:center}

/* 狭いスマートフォンで縦並びになるダウンロード欄も24px空ける。 */
@media(max-width:380px){.store-buttons{row-gap:24px}}

/* 「作成できるファイル」と歌詞入力見出しの行間を揃える。 */
#formats-title,#play-title{line-height:1.1}

.title-star svg{display:block;width:.62em;height:.62em;fill:currentColor}

/* ランダム生成の操作に見出しと同じ星形と短い回転を添える。 */
.shuffle-button .shuffle-icon{display:inline-flex;flex:0 0 26px;width:26px;height:26px;align-items:center;justify-content:center;color:var(--accent);line-height:1;animation:star-turn 9s linear infinite}
.shuffle-button .shuffle-icon svg{display:block;width:100%;height:100%;fill:currentColor;transform-box:view-box;transform-origin:center}
.shuffle-button .shuffle-icon.is-spinning svg{animation:shuffle-spin .66s cubic-bezier(.16,1,.3,1) both}
@keyframes shuffle-spin{to{transform:rotate(1440deg)}}

/* モバイルWebKitのGrid内aspect-ratio依存を避け、プレビュー高さを確保する。 */
@media(max-width:760px){.hero-copy .title-star{top:-16px}.play-screen{height:calc(100vw - var(--side) - var(--side));min-height:240px;aspect-ratio:auto}}
/* 狭い画面で中央揃えになるストア画像と案内テキストの位置を揃える。 */
@media(max-width:380px){.hero-copy .hero-platforms{text-align:center}}
/* 300px以上スクロールした後、スクロール量に合わせて追従CTAを画面外へ移動する。 */
@media(max-width:760px){.mobile-download-nav{transform:translateY(var(--mobile-nav-offset,100%));will-change:transform}.mobile-download-nav.is-hidden{pointer-events:none}}
/* スマートフォンでは歌詞入力をライブプレビューより先に表示する。 */
@media(max-width:760px){.play-controls{order:0}.play-screen{order:1}}
/* 404では通常のランダム生成と同じ演出で案内文を動かす。 */
/* 同梱した翻訳を反映するまで、初期の英語を表示・読み上げしない。 */
html[data-not-found-loading="true"] .not-found-page{visibility:hidden}
.not-found-page{padding-top:40px}.not-found-tools{display:flex;justify-content:flex-end;margin-bottom:14px}.not-found-motion{width:min(100%,800px);aspect-ratio:16/9;margin:0 auto 28px;border:1px solid #ffffff24;background:#10110d;color:var(--paper)}.not-found-motion .surface-fallback{font-size:clamp(34px,8vw,84px);line-height:1.1;letter-spacing:-.04em}.not-found-page>ul{max-width:440px;margin:0 auto;line-height:2.2}.not-found-page>ul li{font-size:13px;color:#c1c5b4}
@media(max-width:600px){.not-found-page{padding-top:26px}.not-found-tools{margin-bottom:10px}.not-found-motion{margin-bottom:22px}}

@media(hover:hover) and (pointer:fine){.faq summary:hover{background-color:#ffffff0d}}
@media(hover:none) and (pointer:coarse){.shuffle-button:hover{background:var(--ink)}.shuffle-button:active{background:#36392a;transform:scale(.98)}}
.shuffle-button.is-touch-pressed{background:#36392a;transform:scale(.98)}

/* ヒーローロゴは透過した文字を使って配置し、SVGの縁取りと内側の光を重ねる。 */
.hero-copy{z-index:auto}
.hero-copy>*:not(h1){position:relative;z-index:5}
.hero h1>.hero-title-word{position:relative;z-index:5;display:inline-block;color:var(--accent);-webkit-text-fill-color:transparent;-webkit-text-stroke:0;mix-blend-mode:color-dodge}
.hero-copy .title-star{z-index:5;mix-blend-mode:color-dodge}
.hero-copy .title-star svg{color:#FCBA03}
.hero-title-layout{display:inline-block;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}
.hero-title-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-title-art text{font-family:var(--site-font);font-size:100px;font-weight:900;letter-spacing:1.2px}
.hero-title-border-layer,.hero-title-shine-layer{transform-box:fill-box}
.hero-title-border-layer{animation:hero-title-border-gradient 8s ease-in-out infinite alternate}
.hero-title-shine-layer{transform-origin:50% 50%;animation:hero-title-shine 7s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes hero-title-border-gradient{to{transform:translateX(-50%)}}
@keyframes hero-title-shine{0%,42%{transform:translateX(-60%) skewX(-30deg)}98%,100%{transform:translateX(60%) skewX(-30deg)}}

/* スマートフォンではヒーローコピーを文節ごとに改行する。 */
@media(max-width:760px){.hero-copy .hero-tagline-tail{display:block}}

/* 歌詞入力欄の文字サイズを全画面幅で18pxに固定する。 */
#lyric-input{font-size:18px}

/* 明るい入力欄でもフォーカス位置が背景に埋もれないようにする。 */
.playground :is(button,a,input,textarea,select,summary):focus-visible{outline-color:var(--accent-dark)}