/* Tujibebe: real campaign media, native scroll and an inspectable capsid. */
.tujibebe-page { --tj-blue:#6685ff; --tj-lilac:#c2b7ff; --tj-ink:#080a10; --tj-white:#eef1f9; background:var(--tj-ink); color:var(--tj-white); }
.tj-story { overflow:clip; }
.tj-story h1,.tj-story h2,.tj-story h3 { font-family:var(--body); font-weight:500; margin:0; letter-spacing:-.065em; line-height:1.04; }
.tj-story h2 { font-size:clamp(34px,5.3vw,88px); }
.tj-story h2 em { font-style:normal; color:var(--tj-lilac); }
.tj-story figure { margin:0; }
.tj-story p { margin:0; }
.tj-story button { cursor:pointer; }
.tj-story video { display:block; width:100%; background:#080a10; cursor:pointer; }
.tj-story button:disabled { cursor:wait; opacity:.5; }
.tj-label { display:block; font-size:11px; letter-spacing:.06em; line-height:1.5; color:#bcc3da; }
.tj-hero { position:relative; background:#111; }
.tj-hero video { width:100%; aspect-ratio:720/406; object-fit:contain; }
.tj-start { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:#fff; background:#0b1028bd; border:1px solid #ffffff60; border-radius:40px; padding:16px 25px; backdrop-filter:blur(16px); white-space:nowrap; }
.tj-start[hidden] { display:none; }
.tj-hero-start { width:60px; height:60px; padding:16px; display:grid; place-items:center; }
.tj-hero-start svg { width:26px; height:26px; }
.tj-scroll { position:relative; scroll-margin-top:-24px; }
.tj-pin { position:sticky; top:var(--header); height:calc(100svh - var(--header)); min-height:460px; }
.tj-future { height:350svh; background:#080a10; }
.tj-future-stage,.tj-making-stage,.tj-radio-stage { top:0; height:100svh; min-height:0; }
.tj-future,.tj-making,.tj-listen { scroll-margin-top:calc(0px - var(--header) - 24px); }
.tj-future-stage { overflow:hidden; }
.tj-future-copy { position:absolute; inset:0 auto 0 var(--edge); width:55%; z-index:2; display:grid; align-items:center; padding:var(--header) 0 5vh; pointer-events:none; }
.tj-future-beat { grid-area:1/1; opacity:0; transform:translateY(22px); transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.1,1); visibility:hidden; }
.tj-future-beat.is-active { opacity:1; transform:none; visibility:visible; }
.tj-future-beat h2 { font-size:clamp(38px,5.1vw,90px); }
.tj-future-support { display:block; font-size:.48em; line-height:1.3; letter-spacing:-.035em; margin-top:30px; color:#dbe0ef; }
.tj-model-wrap { position:absolute; inset:0; min-width:0; }
.tj-model { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; opacity:0; transition:opacity 1s; }
.tj-model[data-ready="true"] { opacity:1; }
.tj-model:active { cursor:grabbing; }
.tj-model-fallback { position:absolute; inset:18% 4% 12% 58%; display:flex; flex-direction:column; justify-content:center; gap:12px; font-size:12px; color:#a1aac0; }
.tj-model-fallback img { max-height:65%; object-fit:contain; border-radius:8px; }
.tj-model-fallback[hidden] { display:none; }
.tj-section-title { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:0 var(--edge); }
.tj-section-title>span { font-size:12px; color:#a1aac0; line-height:1.6; text-align:right; }
.tj-making { height:230svh; background:#101422; }
.tj-making-stage { display:grid; place-items:center; padding:calc(var(--header) + 5vh) var(--edge) 8vh; overflow:hidden; isolation:isolate; }
.tj-storyboard-wall { position:absolute; inset:-30px -30px 0; z-index:-2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; transform:rotate(-7deg) scale(1.12); }
.tj-board-column { display:flex; flex-direction:column; gap:18px; transform:translateY(calc(var(--boards-progress,0)*-600px)); will-change:transform; }
.tj-board-column:nth-child(even) { transform:translateY(calc(-600px + var(--boards-progress,0)*600px)); }
.tj-board-column img { flex-shrink:0; width:100%; height:auto; aspect-ratio:280/155; object-fit:cover; border-radius:3px; }
.tj-making-stage::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,#080a10ed 5%,#080a10b8 60%,#080a1080),linear-gradient(#080a10ab,transparent,#080a10ab); }
.tj-making-copy { text-align:center; max-width:1000px; }
.tj-making-copy h2 { font-size:clamp(42px,7.2vw,112px); }
.tj-making-copy p { margin-top:32px; font-size:clamp(15px,1.7vw,23px); color:#c1c8db; line-height:1.6; }
.tj-community { padding:110px 0 0; }
.tj-community .tj-section-title { padding-bottom:45px; }
.tj-community-film { position:relative; }
.tj-community-film video { aspect-ratio:16/9; object-fit:contain; }
.tj-social { height:570svh; background:#0b0d17; }
.tj-social-stage { display:flex; flex-direction:column; justify-content:space-between; padding:4vh 0 3vh; overflow:hidden; }
.tj-social .tj-section-title h2 { font-size:clamp(30px,3.5vw,58px); }
.tj-social-deck { position:relative; flex:1; width:100%; margin:3vh 0 2vh; min-height:0; perspective:1400px; }
.tj-social-card { position:absolute; top:50%; left:50%; height:100%; max-height:580px; aspect-ratio:9/16; transform:translate(-50%,-50%); transition:opacity .25s; will-change:transform; }
.tj-social-card video { height:100%; object-fit:contain; border-radius:16px; border:1px solid #ffffff26; box-shadow:0 18px 45px #0008; }
.tj-social-card:not(.is-active) video { pointer-events:none; }
.tj-social-card figcaption { position:absolute; inset:auto 0 0; padding:35px 16px 18px; background:linear-gradient(transparent,#000c); border-radius:0 0 16px 16px; display:flex; align-items:end; gap:12px; justify-content:space-between; font-size:11px; pointer-events:none; }
.tj-platforms { display:flex; gap:8px; flex-shrink:0; }
.tj-platforms svg { width:16px; height:16px; }
.tj-deck-progress { display:flex; gap:12px; align-items:center; justify-content:center; font-size:10px; color:#a1aac0; font-variant-numeric:tabular-nums; }
.tj-deck-progress>div { width:100px; height:2px; background:#ffffff20; }
.tj-deck-progress i { display:block; height:100%; background:var(--tj-lilac); width:var(--deck-progress,20%); transition:width .25s; }
.tj-listen { height:670svh; background:#070911; }
.tj-radio-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--header) + 25px) var(--edge) 55px; isolation:isolate; overflow:hidden; }
.tj-radio-background { position:absolute; z-index:-2; inset:-10%; width:120%; height:120%; object-fit:cover; filter:blur(50px) saturate(.7); opacity:.15; }
.tj-radio-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(#080a1080,transparent,#080a10c0); z-index:-1; }
.tj-radio-scene { position:relative; flex:1; min-height:130px; width:100%; display:grid; place-items:center; }
.tj-orb { width:clamp(230px,48svh,510px); aspect-ratio:1; }
.tj-orb canvas { width:100%; height:100%; display:block; }
.tj-radio-card { width:min(760px,100%); padding:20px 26px; background:#10142180; border:1px solid #c2b7ff20; border-radius:18px; backdrop-filter:blur(18px); transition:opacity .2s,transform .4s; }
.tj-radio-card.is-changing { opacity:0; transform:translateX(50px); }
.tj-radio-card h3 { font-size:17px; letter-spacing:-.025em; }
.tj-audio-controls { display:flex; align-items:center; gap:16px; margin:16px 0 0; font-size:11px; font-variant-numeric:tabular-nums; }
.tj-audio-controls button { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:0; flex-shrink:0; background:#e6e6ff; color:#111827; }
.tj-audio-controls svg { width:21px; height:21px; fill:currentColor; }
.tj-audio-controls input { min-width:20px; width:100%; accent-color:var(--tj-lilac); height:4px; cursor:pointer; }
.tj-audio-controls span { min-width:30px; }
.tj-audio-more { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:#080a10; z-index:3; }
.tj-audio-more[hidden] { display:none; }
.tj-pill { display:inline-flex; align-items:center; justify-content:space-between; gap:45px; padding:15px 22px; border-radius:40px; border:1px solid #d6ddff70; background:transparent; color:var(--tj-white); font-size:13px; transition:background .25s,color .25s; }
.tj-pill:hover { background:var(--tj-white); color:var(--tj-ink); }
.tj-conversation { position:relative; height:400svh; background:#0d1120; scroll-margin-top:calc(0px - var(--header) - 24px); }
.tj-conversation-stage { top:0; height:100svh; min-height:0; padding:calc(var(--header) + 25px) var(--edge) 35px; display:grid; place-items:center; isolation:isolate; }
.tj-conversation-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.10; filter:blur(38px) saturate(.6); z-index:-2; }
.tj-conversation-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(#080a10,#080a1099 40%,#080a10); z-index:-1; }
.tj-conversation-inner { width:min(880px,100%); text-align:center; }
.tj-topic-nav { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:26px; }
.tj-topic-nav button { border:1px solid #c2b7ff30; background:transparent; padding:11px 18px; border-radius:32px; font-size:12px; color:#b5bfd6; transition:background .25s,color .25s; }
.tj-topic-nav button[aria-pressed="true"] { background:#c2b7ff18; border-color:#c2b7ff88; color:#f3f0ff; }
.tj-conversation h2 { font-size:clamp(34px,5vw,72px); }
.tj-conversation-scene { position:relative; width:clamp(160px,26svh,250px); aspect-ratio:1; margin:12px auto 0; }
.tj-conversation-scene canvas { display:block; width:100%; height:100%; }
.tj-conversation-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:58px; height:58px; border:1px solid #d3ccff88; border-radius:50%; background:#111827a8; color:#eeeaff; display:grid; place-items:center; }
.tj-conversation-play svg { width:25px; height:25px; fill:currentColor; }
.tj-conversation-status { min-height:20px; color:#c3bddf; font-size:13px; margin:4px 0 14px!important; }
.tj-choices { display:grid; grid-template-columns:1fr 1fr; gap:18px; width:min(610px,100%); margin:0 auto; }
.tj-choices button { position:relative; display:flex; align-items:center; gap:16px; text-align:left; min-height:83px; padding:20px 23px; border:1px solid #bfc8ed42; border-radius:18px; background:#11182790; color:#e6e7f5; transition:border .25s,background .25s,transform .25s; }
.tj-choices button>span:first-child { font-size:32px; line-height:1; letter-spacing:-.05em; }
.tj-choices button>span:nth-child(2) { font-size:12px; max-width:10ch; }
.tj-choices button svg { display:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; margin-left:auto; }
.tj-choices button[aria-pressed="true"] { border-color:var(--tj-lilac); background:#776bc13d; }
.tj-choices button[aria-pressed="true"] svg { display:block; }
.tj-choices button:not(:disabled):hover { border-color:var(--tj-lilac); transform:translateY(-3px); }
.tj-choices button:disabled { opacity:.35; cursor:default; }
.tj-conversation-actions { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; margin-top:18px; min-height:30px; }
.tj-conversation-actions button { padding:8px 0; border:0; border-bottom:1px solid #c2b7ff55; background:none; color:#c7c2e7; font-size:12px; }
.tj-conversation-actions button[hidden] { display:none; }
.tj-conversation-actions span { margin-left:16px; }
.tj-print { padding:110px var(--edge) 70px; }
.tj-print .tj-section-title { padding:0 0 55px; }
.tj-poster-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
.tj-poster-grid figure:nth-child(even) { margin-top:85px; }
.tj-poster-grid figure:nth-child(2) { transition-delay:.1s; }
.tj-poster-grid figure:nth-child(3) { transition-delay:.2s; }
.tj-poster-grid figure:nth-child(4) { transition-delay:.3s; }
.tj-poster-grid img { width:100%; height:auto; border-radius:3px; }
.tj-poster-grid figcaption { font-size:11px; color:#a1aac0; margin-top:13px; }
.tj-brochure { height:260svh; background:#15275e; }
.tj-brochure-stage { display:flex; flex-direction:column; justify-content:space-between; padding:5vh 0 3vh; perspective:1800px; }
.tj-brochure .tj-section-title h2 { font-size:clamp(34px,4.5vw,68px); }
.tj-brochure .tj-section-title>span { color:#bbc9f5; }
.tj-book { position:relative; align-self:center; width:min(67vw,730px,68vh); aspect-ratio:1.42; transform-style:preserve-3d; transform:translateX(var(--book-shift,-25%)) rotateX(8deg) rotateZ(calc(-5deg + var(--book-open,0)*5deg)); }
.tj-book-page,.tj-book-cover { position:absolute; top:0; bottom:0; width:50%; box-shadow:0 12px 30px #0004; }
.tj-book img { width:100%; height:100%; object-fit:fill; }
.tj-book-left { left:0; opacity:calc(var(--book-open,0)*4); }
.tj-book-right { right:0; }
.tj-book-cover { left:50%; transform-origin:left; transform:rotateY(calc(var(--book-open,0)*-180deg)); backface-visibility:hidden; z-index:2; }
.tj-brochure-note { text-align:center; font-size:10px; color:#b7c5ee; }
.tj-ending { padding-top:0; }
.tj-ending>img { width:100%; max-height:85svh; object-fit:cover; object-position:50% 46%; }
.tj-end-copy { padding:80px var(--edge) 100px; display:flex; align-items:end; justify-content:space-between; gap:36px; }
.tj-end-copy h2 { font-size:clamp(38px,5.2vw,78px); }
.tj-end-copy p { font-size:12px; color:#a1aac0; margin-bottom:7px; }
.tj-end-copy .tj-pill { margin-top:24px; }
.tj-sound { position:fixed; z-index:80; right:24px; bottom:24px; display:grid; place-items:center; width:48px; height:48px; border:1px solid #e0eeee65; color:#fff; background:#080a10b3; border-radius:50%; backdrop-filter:blur(15px); cursor:pointer; }
.tj-sound svg { width:23px; height:23px; }
.tj-sound[hidden],.tj-sound .tj-sound-slash { display:none; }
.tj-sound.is-muted .tj-sound-slash { display:block; }
.tj-sound.is-muted .tj-sound-waves { display:none; }
.tujibebe-page #toTop { right:85px; }
.tujibebe-page[data-tj-immersive] #toTop { visibility:hidden; pointer-events:none; }
.tujibebe-page.menu-open .tj-sound { visibility:hidden; }
/* Without script, all actual campaign media and artwork remain in reading order. */
html:not(.tj-enhanced) .tj-scroll { height:auto!important; }
html:not(.tj-enhanced) .tj-pin { position:relative; top:0; height:auto; }
html:not(.tj-enhanced) .tj-model-wrap { min-height:400px; }
html:not(.tj-enhanced) .tj-future-stage { min-height:100svh; }
html:not(.tj-enhanced) .tj-making-stage,html:not(.tj-enhanced) .tj-radio-stage { min-height:100svh; }
html:not(.tj-enhanced) .tj-social-deck { display:flex; gap:20px; padding:20px; overflow:auto; }
html:not(.tj-enhanced) .tj-social-card { position:relative; top:auto; left:auto; height:450px; flex-shrink:0; transform:none; }
@media(max-width:700px) {
    .tj-future-copy { width:calc(100% - var(--edge)*2); height:55%; padding:calc(var(--header) + 5vh) 0 0; align-items:start; }
    .tj-future-beat h2 { font-size:clamp(31px,8.4vw,50px); }
    .tj-future-support { font-size:.58em; margin-top:20px; }
    .tj-model-fallback { inset:55% 15% 5%; }
    .tj-section-title { align-items:start; flex-direction:column; gap:15px; }
    .tj-section-title>span { text-align:left; font-size:10px; }
    .tj-storyboard-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .tj-board-column:nth-child(n+3) { display:none; }
    .tj-making-copy h2 { font-size:clamp(35px,10vw,60px); }
    .tj-community { padding-top:65px; }
    .tj-community .tj-section-title { padding-bottom:30px; }
    .tj-community .tj-section-title h2 { font-size:34px; }
    .tj-social-stage { padding-top:4vh; }
    .tj-social .tj-section-title { flex-direction:column; align-items:start; gap:10px; }
    .tj-social .tj-section-title h2 { font-size:clamp(28px,7vw,38px); }
    .tj-social-deck { margin:3vh 0; }
    .tj-social-card { max-height:min(65svh, calc(75vw * 16 / 9)); }
    .tj-social-card figcaption { font-size:10px; padding:30px 12px 15px; }
    .tj-radio-stage { padding:calc(var(--header) + 20px) var(--edge) 75px; }
    .tj-radio-card { padding:20px 17px; }
    .tj-audio-controls { gap:10px; }
    .tj-audio-controls button { width:39px; height:39px; }
    .tj-audio-controls span { font-size:9px; min-width:26px; }
    .tj-conversation-stage { padding:calc(var(--header) + 22px) var(--edge) 35px; }
    .tj-topic-nav { gap:7px; margin-bottom:20px; }
    .tj-topic-nav button { padding:9px 12px; font-size:10px; }
    .tj-conversation h2 { font-size:34px; }
    .tj-conversation[data-topic="2"] h2 { font-size:clamp(26px,7.5vw,34px); }
    .tj-conversation-scene { width:clamp(140px,24svh,185px); margin-top:8px; }
    .tj-conversation-status { margin:2px 0 16px!important; }
    .tj-choices { gap:12px; }
    .tj-choices button { padding:14px; gap:11px; min-height:72px; }
    .tj-choices button>span:nth-child(2) { font-size:10px; }
    .tj-print { padding:70px var(--edge); }
    .tj-poster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 15px; }
    .tj-poster-grid figure:nth-child(even) { margin-top:40px; }
    .tj-poster-grid figcaption { font-size:9px; }
    .tj-book { width:82vw; }
    .tj-brochure-stage { justify-content:center; gap:65px; }
    .tj-brochure .tj-section-title { align-self:stretch; }
    .tj-end-copy { align-items:start; flex-direction:column; padding:50px var(--edge) 70px; }
    .tj-sound { right:17px; bottom:18px; width:43px; height:43px; }
}
@media(prefers-reduced-motion:reduce) {
    .tj-story *, .tj-story *::before { scroll-behavior:auto!important; transition:none!important; }
    .tj-future,.tj-making,.tj-brochure { height:auto!important; }
    .tj-future-stage,.tj-making-stage,.tj-brochure-stage { position:relative; top:0; height:auto; min-height:0; padding-top:60px; padding-bottom:60px; }
    .tj-future-copy { position:relative; inset:auto; height:auto; width:100%; padding:0; display:block; }
    .tj-future-beat { position:relative; opacity:1; visibility:visible; transform:none; margin-bottom:40px; }
    .tj-future-stage { padding:60px var(--edge); }
    .tj-model-wrap { position:relative; inset:auto; height:420px; }
    .tj-storyboard-wall { --boards-progress:0!important; }
    .tj-conversation * { transition:none!important; }
    .tj-book { --book-open:1!important; margin:50px 0; transform:none; }
}