PageSourceSearch

https://www.miraitech.city/

html miraitech.city collected 2026-10-05 07:55:45 UTC 102,822 bytes, 1,567 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1" />
6<title>Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit</title>
7<meta name="description" content="Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17–18 · Summit II Oct 24–25. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." />
8<link rel="canonical" href="https://mirai-tech-city.vercel.app/" />
9<link rel="alternate" hreflang="en" href="https://mirai-tech-city.vercel.app/" />
10<link rel="alternate" hreflang="ja" href="https://mirai-tech-city.vercel.app/jp/" />
11<link rel="alternate" hreflang="x-default" href="https://mirai-tech-city.vercel.app/" />
12<meta property="og:site_name" content="Mirai Tech City" />
13<meta property="og:locale" content="en_US" />
14<meta property="og:type" content="website" />
15<meta property="og:title" content="Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit" />
16<meta property="og:description" content="Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17–18 · Summit II Oct 24–25. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." />
17<meta property="og:image" content="https://mirai-tech-city.vercel.app/live_city_poster.jpg" />
18<meta property="og:url" content="https://mirai-tech-city.vercel.app/" />
19<meta name="twitter:card" content="summary_large_image" />
20<meta name="twitter:title" content="Mirai Tech City Kobe 2026 · Japan Longevity & Biomedical Summit" />
21<meta name="twitter:description" content="Japan's premier longevity biomedical popup city in Kobe. Featuring Aubrey de Grey, Brian Kennedy, Motoshi Hayano, and 40+ leading experts." />
22<meta name="twitter:image" content="https://mirai-tech-city.vercel.app/live_city_poster.jpg" />
23<meta name="theme-color" content="#050506" />
24<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23050506'/%3E%3Ctext x='50' y='72' font-size='62' font-family='Georgia' font-weight='bold' fill='%239be8f0' text-anchor='middle'%3E未%3C/text%3E%3C/svg%3E" />
25<link rel="preload" href="kobe_harbor_night_poster.jpg" as="image" fetchpriority="high" />
26<link rel="preconnect" href="https://fonts.googleapis.com" />
27<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
28<link rel="preconnect" href="https://api.fontshare.com" />
29<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin />
30<!-- Font CSS loads without blocking render; both use display=swap so system
31     fallbacks paint first either way. noscript keeps fonts for no-JS visitors. -->
32<link href="https://api.fontshare.com/v2/css?f[]=switzer@400,700,800,900&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.media='all'" />
33<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.media='all'" />
34<noscript>
35  <link href="https://api.fontshare.com/v2/css?f[]=switzer@400,700,800,900&display=swap" rel="stylesheet" />
36  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
37</noscript>
38<script>window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };</script>
vendor: 1 bytes, line 38
38
39<script defer src="/_vercel/insights/script.js"></script>
vendor: 1 bytes, line 39
39
40<script>
41  // Launch control: change to true when the Summit + Hotel package is ready for the public landing page.
42  // showFashionShow — false hides the fashion show everywhere EXCEPT the agenda finale row: the section,
43  // the FAQ item, the package ledger line ([data-fashion] elements), and the copy variants in copy.js.
44  // To bring it back: flip to true AND restore "Fashion Show Oct 26" in the two meta descriptions above
45  // plus the Frontier Human Fashion Show subEvent in the JSON-LD below.
46  window.MIRAI_FLAGS = Object.freeze({ showSummitPackage: true, showFashionShow: false });
47  if (!window.MIRAI_FLAGS.showSummitPackage) document.documentElement.classList.add('package-promo-hidden');
48  if (!window.MIRAI_FLAGS.showFashionShow) document.documentElement.classList.add('fashion-hidden');
49  // Kobe University logo use approval #3182: usage window ends Dec 15 2026.
50  // The [data-kobe-permit] block self-hides on Dec 15 JST — do NOT remove this
51  // gate or the logos without checking the approval notice first.
52  if (Date.now() >= new Date('2026-12-15T00:00:00+09:00').getTime()) document.documentElement.classList.add('kobe-permit-over');
53</script>
vendor: 1 bytes, line 53
53
54<script src="copy.js"></script>
vendor: 1 bytes, line 54
54
55<script defer src="/posthog.js"></script>
vendor: 1 bytes, line 55
55
56<script defer src="/analytics.js"></script>
vendor: 1 bytes, line 56
56
57<script type="application/ld+json">
58{
59  "@context": "https://schema.org",
60  "@graph": [
61    {
62      "@type": "EventSeries",
63      "@id": "https://mirai-tech-city.vercel.app/#event",
64      "name": "Mirai Tech City 2026",
65      "description": "Japan's premier longevity biomedical popup city in Kobe. Summit I Oct 17–18 · Summit II Oct 24–25 · Residency Oct 1–31.",
66      "url": "https://mirai-tech-city.vercel.app",
67      "startDate": "2026-10-01",
68      "endDate": "2026-10-31",
69      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
70      "eventStatus": "https://schema.org/EventScheduled",
71      "location": {
72        "@type": "Place",
73        "name": "Port Island, Kobe Biomedical Innovation Cluster (KBIC)",
74        "address": {
75          "@type": "PostalAddress",
76          "addressLocality": "Kobe",
77          "addressRegion": "Hyogo",
78          "addressCountry": "JP"
79        }
80      },
81      "organizer": {
82        "@type": "Organization",
83        "name": "Mirai Tech City",
84        "url": "https://mirai-tech-city.vercel.app"
85      },
86      "subEvent": [
87        {
88          "@type": "BusinessEvent",
89          "name": "Summit I: Eradicate Disease",
90          "startDate": "2026-10-17",
91          "endDate": "2026-10-18",
92          "description": "The Science & Tech Augmenting Life: therapeutics, longevity biotech, and disease eradication."
93        },
94        {
95          "@type": "BusinessEvent",
96          "name": "Summit II: Extend the Healthspan",
97          "startDate": "2026-10-24",
98          "endDate": "2026-10-25",
99          "description": "Bridging East & West in longevity science, biomarkers, and rejuvenation biotechnology."
100        }
101      ],
102      "performer": [
103        {
104          "@type": "Person",
105          "name": "Aubrey de Grey",
106          "jobTitle": "Biogerontologist & President",
107          "worksFor": { "@type": "Organization", "name": "LEV Foundation" },
108          "knowsAbout": ["Longevity Biotechnology", "Rejuvenation Therapy", "SENS"]
109        },
110        {
111          "@type": "Person",
112          "name": "Brian Kennedy",
113          "jobTitle": "Distinguished Professor & Director",
114          "worksFor": { "@type": "Organization", "name": "Centre for Healthy Longevity, NUS" },
115          "knowsAbout": ["Aging Science", "Translational Longevity Research", "Biochemistry"]
116        },
117        {
118          "@type": "Person",
119          "name": "Motoshi Hayano",
120          "jobTitle": "Associate Professor",
121          "worksFor": { "@type": "Organization", "name": "Keio University School of Medicine" },
122          "knowsAbout": ["Epigenetic Reprogramming", "Ocular Gene Therapy", "Aging Mechanics"]
123        },
124        {
125          "@type": "Person",
126          "name": "José Cordeiro",
127          "jobTitle": "Vice-Chair & Author",
128          "worksFor": { "@type": "Organization", "name": "Humanity+" },
129          "knowsAbout": ["Transhumanism", "Life Extension", "The Death of Death"]
130        },
131        {
132          "@type": "Person",
133          "name": "Sebastian Brunemeier",
134          "jobTitle": "Managing Partner",
135          "worksFor": { "@type": "Organization", "name": "Healthspan Capital" },
136          "knowsAbout": ["Longevity Biotech Venture Capital", "Therapeutics"]
137        },
138        {
139          "@type": "Person",
140          "name": "Irit Rappley, PhD",
141          "jobTitle": "VP of Research",
142          "knowsAbout": ["Molecular Biology", "Biomedical Longevity Research"]
143        },
144        {
145          "@type": "Person",
146          "name": "Yuri Deigin",
147          "jobTitle": "CEO & Founder",
148          "worksFor": { "@type": "Organization", "name": "YouthBio Therapeutics" },
149          "knowsAbout": ["Epigenetic Rejuvenation", "Gene Therapy"]
150        },
151        {
152          "@type": "Person",
153          "name": "Yuki Hanyu",
154          "jobTitle": "Founder",
155          "worksFor": { "@type": "Organization", "name": "Shojinmeat Project / Cellular Agriculture Institute" },
156          "knowsAbout": ["Cellular Agriculture", "Biotechnology"]
157        }
158      ]
159    }
160  ]
161}
162</script>
162
163<link rel="stylesheet" href="/nav.css" />
164<style>
165  /* Metric-matched fallback while Switzer loads async: Arial scaled to
166     Switzer's measured advance widths (~0.976) so the swap doesn't reflow
167     the display headlines (CLS). */
168  @font-face {
169    font-family: 'Switzer-fallback';
170    src: local('Arial'), local('Helvetica Neue');
171    size-adjust: 97.6%;
172    ascent-override: 100%;
173    descent-override: 25%;
174    line-gap-override: 0%;
175  }
176  :root {
177    --bg: #050506;
178    --ink: #f4f3f0;
179    --dim: rgba(244,243,240,.62);
180    --faint: rgba(244,243,240,.48);
181    --line: rgba(244,243,240,.14);
182    --accent: #9be8f0;
183    --accent-rgb: 155, 232, 240;
184    --font: 'Switzer', 'Switzer-fallback', 'Inter', -apple-system, sans-serif;
185    --mono: 'IBM Plex Mono', monospace;
186  }
187  * { margin: 0; padding: 0; box-sizing: border-box; }
188  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
189  /* Paint the root too: mobile browsers reveal the html canvas when the
190     URL bar retracts, and an unset html background flashes white. */
191  html { background: var(--bg); }
192  body { background: var(--bg); color: var(--ink); font-family: var(--font); overflow-x: hidden; }
193  .package-promo-fallback { display: none !important; }
194  html.package-promo-hidden [data-package-promo] { display: none !important; }
195  html.package-promo-hidden .package-promo-fallback { display: inline-block !important; }
196  html.fashion-hidden [data-fashion] { display: none !important; }
197  ::selection { background: var(--accent); color: #000; }
198  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
199  .skip { position: fixed; top: 12px; left: 4vw; z-index: 70; background: var(--bg); color: var(--accent);
200    font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
201    text-decoration: none; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 3px; padding: 12px 16px;
202    transform: translateY(-200%); }
203  .skip:focus { transform: none; }
204
205  .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
206  .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
207  section { position: relative; padding: 110px 6vw; max-width: 1440px; margin: 0 auto; }
208  h2.big { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
209    font-size: clamp(34px, 5.2vw, 76px); line-height: .98; margin: 18px 0 10px; }
210  .rule { border: 0; border-top: 1px solid var(--line); max-width: calc(1440px - 12vw); margin: 0 auto; }
211  a { color: inherit; }
212
213  /* reveal-on-scroll */
214  .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
215  .rv.in { opacity: 1; transform: none; }
216  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
217
218  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
219    background: var(--ink); color: #0a0a0c !important; text-decoration: none;
220    padding: 12px 26px; border-radius: 3px; font-family: var(--mono); font-size: 11px;
221    letter-spacing: .2em; text-transform: uppercase; font-weight: 500; white-space: nowrap;
222    transition: transform .2s, box-shadow .2s; }
223  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(244,243,240,.22); }
224  .btn.accent { background: var(--accent); }
225  .btn.ghost { background: transparent; color: var(--ink) !important; border: 1px solid rgba(244,243,240,.4); }
226  .btn.ghost:hover { border-color: var(--ink); }
227  .daruma { height: 24px; width: auto; vertical-align: middle; opacity: .55; transition: opacity .3s, transform .3s; cursor: help; }
228  .daruma:hover { opacity: 1; transform: translateY(-1px); }
229  .daruma.foot { height: 46px; opacity: .6; cursor: pointer; }
230  @keyframes okiagari { 0% { transform: rotate(0) } 22% { transform: rotate(-16deg) } 48% { transform: rotate(11deg) } 70% { transform: rotate(-6deg) } 88% { transform: rotate(2deg) } 100% { transform: rotate(0) } }
231  .daruma.wobble { animation: okiagari 1s ease-out; transform-origin: 50% 88%; }
232  @media (prefers-reduced-motion: reduce) { .daruma.wobble { animation: none; } }
233
234  /* ── hero offer ── */
235  .hero { position: relative; height: calc(100svh - 48px); min-height: 620px; overflow: hidden; max-width: none; padding: 0; }
236  .heroMedia, .heroPoster, .heroVideo { position: absolute; inset: 0; width: 100%; height: 100%; }
237  .heroPoster, .heroVideo { object-fit: cover; object-position: center 42%; }
238  .heroVideo { opacity: 0; transition: opacity .45s ease; }
239  .heroVideo.playing { opacity: 1; }
240  .heroVeil { position: absolute; inset: 0; pointer-events: none;
241    background: linear-gradient(rgba(5,5,6,.24), rgba(5,5,6,.24)),
242                linear-gradient(to top, rgba(5,5,6,.88), rgba(5,5,6,.12) 62%
242),
243                linear-gradient(105deg, rgba(5,5,6,.68) 0%, transparent 58%); }
244  .heroContent { position: absolute; left: 6vw; right: 6vw; bottom: clamp(76px, 9vh, 96px); z-index: 2; max-width: 1120px; }
245  /* Size so the longest rotating line ("of augmentation" + caret, ~10em)
246     stays on one line inside .heroContent (88vw, max 1120px); otherwise the
247     h1 grows a line for the long words and the hero jumps between words. */
248  .heroContent h1 { font-weight: 900; text-transform: uppercase; letter-spacing: -.015em;
249    font-size: clamp(55px, 8.2vw, 110px); line-height: .88; color: var(--ink); max-width: none; }
250  .heroContent h1 span { display: block; }
251  /* Rotating word: accent color, block cursor at the end of the line. The
252     cursor is solid while typing/deleting and blinks only while a word holds. */
253  .heroRot, .heroDot { font-style: normal; }
254  .heroRot { color: var(--accent); }
255  .heroDot { transition: opacity .2s; }
256  .heroLine::after { content: ''; display: inline-block; width: .42em; height: .72em; margin-left: .08em;
257    vertical-align: -.03em; background: var(--accent); box-shadow: 0 0 18px rgba(155,232,240,.45);
258    animation: heroCaret 1.06s steps(1, end) infinite; }
259  .heroLine.typing::after { animation: none; }
260  .heroLine.typing .heroDot { opacity: 0; }
261  @keyframes heroCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
262  @media (prefers-reduced-motion: reduce) { .heroLine::after { display: none; } }
263  .heroLead { max-width: 68ch; margin-top: 22px; color: rgba(244,243,240,.92);
264    font-size: clamp(16px, 1.45vw, 19px); line-height: 1.5; text-shadow: 0 1px 18px rgba(0,0,0,.7); }
265  .heroWhere { margin-top: 22px; color: var(--ink); font-size: clamp(17px, 1.6vw, 22px); font-weight: 500;
266    letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; text-shadow: 0 1px 18px rgba(0,0,0,.7); }
267  .heroWhere b { color: var(--accent); font-weight: 500; }
268  .heroActions { display: flex; align-items: flex-start; margin-top: 28px; }
269  .heroActions .btn { min-width: 210px; padding: 16px 40px; font-family: var(--font); font-size: 14px;
270    font-weight: 800; letter-spacing: .14em; text-align: center; }
271  .heroJpRow { margin-top: 14px; }
272  .heroJp { display: inline-block; padding: 6px 0; color: rgba(244,243,240,.86); font-size: 14px; font-weight: 500;
273    letter-spacing: .04em; text-decoration: none; text-shadow: 0 1px 14px rgba(0,0,0,.8); border-bottom: 1px solid rgba(244,243,240,.35); }
274  .heroJp:hover, .heroJp:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
275  .heroContinue { position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 3;
276    min-height: 44px; display: inline-flex; align-items: center; transform: translateX(-50%);
277    font-size: 28px; font-weight: 300; line-height: 1; color: rgba(244,243,240,.82); text-decoration: none;
278    text-shadow: 0 1px 8px rgba(0,0,0,.8); animation: heroContinueBob 2.4s ease-in-out 3; }
279  .heroContinue:hover { color: var(--accent); }
280  @keyframes heroContinueBob {
281    0%, 100% { transform: translate(-50%, 0); }
282    50% { transform: translate(-50%, 4px); }
283  }
284  @media (prefers-reduced-motion: reduce) { .heroContinue { animation: none; } }
285  @media (max-width: 760px) {
286    .hero { min-height: 560px; }
287    .heroContent { bottom: 62px; }
288    .heroContent h1 { font-size: clamp(28px, 8.6vw, 60px); letter-spacing: -.025em; }
289    .heroLead { max-width: 39ch; margin-top: 14px; font-size: 15px; line-height: 1.42; }
290    .heroWhere { margin-top: 14px; font-size: 14px; letter-spacing: .1em; }
291    .heroActions { margin-top: 18px; }
292    .heroActions .btn { min-width: 0; padding: 14px 24px; font-size: 13px; }
293    .heroJpRow { margin-top: 8px; }
294    .heroJp { font-size: 13px; }
295  }
296  @media (max-width: 420px) {
297    .heroContent { left: 5vw; right: 5vw; }
298    .heroActions .btn { width: 100%; }
299  }
300  @media (max-width: 380px) and (max-height: 640px) {
301    .hero { height: 568px; min-height: 568px; }
302    .heroContent { top: 80px; bottom: auto; }
303    .heroContent h1 { font-size: 34px; line-height: .86; }
304    .heroLead { margin-top: 10px; font-size: 13px; line-height: 1.34; }
305    .heroWhere { margin-top: 10px; font-size: 12px; }
306    .heroActions { margin-top: 12px; }
307    .heroJpRow { margin-top: 6px; }
308    .heroContinue { font-size: 22px; }
309  }
310  @media (max-height: 540px) and (min-width: 560px) {
311    .hero { height: 100svh; min-height: 375px; }
312    .heroContent { top: 92px; bottom: auto; }
313    .heroContent h1 { max-width: none; font-size: clamp(42px, 6.4vw, 58px); line-height: .86; white-space: nowrap; }
314    .heroLead { max-width: 78ch; margin-top: 10px; font-size: 12px; line-height: 1.35; }
315    .heroWhere { margin-top: 8px; font-size: 12px; }
316    .heroActions { margin-top: 10px; }
317    .heroJpRow { margin-top: 6px; }
318    .heroContinue { display: none; }
319  }
320
321  /* ── intro + pillars: Accelerate / Inspire / Live ("Drift Gauge") ──
322     Giant titles ride over slow-drifting outlined-kanji marquee bands.
323     The bands are 100vw and absolutely centered, so #pillars clips them
324     with overflow:hidden — do not remove it or the smoke test's
325     horizontal-overflow assertion fails. Kanji renders from system JP
326     fonts; the letter-split entrance is wired after applyCopy(). */
327  #pillars { padding-bottom: 40px; overflow: hidden; }
328  /* intro statement: "Brodovitch Cascade" — five-line lockup, spans from copy.js.
329     Lines rise staggered when the page's .rv observer adds .in to the <p>. */
330  .msl-lockup { max-width: 1100px; margin: 0 0 76px; display: flex; flex-direction: column; }
331  .msl-line { opacity: 0; transform: translateY(22px);
332    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
333  .msl-lockup.in .msl-line { opacity: 1; transform: none; }
334  .msl-line:nth-child(2) { transition-delay: .08s; }
335  .msl-line:nth-child(3) { transition-delay: .16s; }
336  .msl-line:nth-child(4) { transition-delay: .24s; }
337  .msl-line:nth-child(5) { transition-delay: .32s; }
338  .msl-mono { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 400;
339    letter-spacing: .38em; text-transform: uppercase; color: var(--faint); margin-bottom: clamp(.6rem, 1.4vh, 1.1rem); }
340  .msl-subject { font-size: clamp(34px, 7.5vw, 84px); font-weight: 900; text-transform: uppercase;
341    letter-spacing: -.03em; line-height: .92; margin-left: -.06em; }
342  .msl-bridge { font-size: clamp(17px, 2.3vw, 26px); font-weight: 500; line-height: 1.35; color: var(--dim);
343    max-width: 26ch; padding-left: clamp(1.5rem, 11vw, 10rem); margin: clamp(.9rem, 2.2vh, 1.6rem) 0; }
344  .msl-bridge em { font-style: normal; font-weight: 300; color: var(--faint); }
345  .msl-payoff { font-size: clamp(27px, 9vw, 100px); font-weight: 900; text-transform: uppercase;
346    letter-spacing: -.035em; line-height: .92; margin-left: -.06em; color: var(--accent); white-space: nowrap; }
347  .msl-payoff--shift { margin-left: clamp(.75rem, 12vw, 12rem); }
348  @media (max-width: 380px) { .msl-payoff { white-space: normal; letter-spacing: -.02em; } }
349  /* Below ~1180px the shifted payoff line would run past the viewport edge and
350     be clipped by the section; let it wrap inside the column instead. */
351  @media (max-width: 1180px) { .msl-payoff.msl-payoff--shift { white-space: normal;
352    max-width: calc(100% - clamp(.75rem, 12vw, 12rem)); } }
353  /* Moji-mado: after the ink entrance, the payoff lines drain and the
354     Fuji-dawn plate floods the letterforms (background-clip: text). The
355     image is declared only in the .in state so it never loads above the
356     fold; engines without clip support keep the flat accent fill. */
357  .msl-payoff { width: max-content; max-width: 100%; -webkit-text-fill-color: var(--accent); }
358  .msl-line.msl-payoff { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1),
359      color 1.4s ease, -webkit-text-fill-color 1.4s ease, filter .5s ease;
360    transition-delay: .24s, .24s, 1.25s, 1.25s, 0s; }
361  .msl-line.msl-payoff--shift { transition-delay: .32s, .32s, 1.4s, 1.4s, 0s; }
362  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
363    .msl-lockup.in .msl-payoff {
364      background-image: linear-gradient(rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.04)), url("img/pillar-fuji-dawn.webp");
365      background-size: cover; background-position: center 52%;
366      -webkit-background-clip: text; background-clip: text;
367      color: transparent; -webkit-text-fill-color: transparent;
368      filter: saturate(.95) contrast(1.1) brightness(1.34); }
369    .msl-lockup.in .msl-payoff--shift { background-position: center 66%; }
370  }
371  .knt-pillar { position: relative; border-top: 1px solid var(--line); padding: 30px 0 44px; }
372  .knt-meta { display: flex; gap: 16px; align-items: baseline; font-family: var(--mono);
373    font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
374  .knt-num { color: var(--accent); }
375  .knt-gloss { color: var(--faint); }
376  .knt-p2 .knt-meta { justify-content: flex-end; }
377  .knt-stage { position: relative; margin-top: 12px; }
378  .knt-band { position: absolute; top: 50%; left: 50%; width: 100vw; transform: translate(-50%,-50%);
379    overflow: hidden; pointer-events: none; user-select: none; }
380  .knt-track { display: flex; width: max-content; animation: kntDrift 70s linear infinite; }
381  .knt-band span { display: block; white-space: nowrap; font-weight: 800; line-height: 1;
382    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
383    font-size: clamp(56px, 13vw, 190px); color: transparent; -webkit-text-stroke: 1px rgba(244,243,240,.13); }
384  .knt-band i { font-style: normal; margin-right: .5em; }
385  .knt-band i:nth-child(4n) { -webkit-text-stroke-color: rgba(var(--accent-rgb),.22); }
386  @keyframes kntDrift { to { transform: translateX(-50%); } }
387  .knt-p2 .knt-track { animation-duration: 90s; animation-direction: reverse; }
388  .knt-p3 .knt-track { animation-duration: 60s; }
389  .knt-pillar:hover .knt-track, .knt-pillar:focus-within .knt-track { animation-play-state: paused; }
390  .knt-title { position: relative; margin: 0; overflow: hidden; padding: .05em 0;
391    font-weight: 900; text-transform: uppercase; letter-spacing: -.03em;
392    font-size: clamp(52px, 10.5vw, 150px); line-height: .92; }
393  .knt-p2 .knt-title { text-align: right; }
394  .knt-title i { font-style: normal; display: inline-block; transform: translateY(115%);
395    transition: transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i)*45ms); }
396  .knt-pillar.in .knt-title i { transform: none; }
397  .knt-list { list-style: none; margin: 24px 0 0; padding: 0; max-width: 56ch; }
398  .knt-p1 .knt-list, .knt-p3 .knt-list { margin-left: auto; }
399  /* Harimaze prints: mounted photos pasted into the ledger's empty corner.
400     In-flow grid (no absolute pinning) so overlap is impossible at any
401     width; the pinned look comes from rotation, mounts, and tape. */
402  .knt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56ch);
403    gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 24px; }
404  .knt-row .knt-list { margin-top: 0; }
405  .knt-p2 .knt-row { grid-template-columns: minmax(0, 56ch) minmax(0, 1fr); }
406  .knt-p2 .knt-chips { order: 2; justify-content: flex-end; }
407  .knt-p2 .knt-row .knt-list { order: 1; }
408  .knt-chips { display: flex; gap: 20px; align-items: flex-start; padding-top: 8px; }
409  .knt-chip { position: relative; margin: 0; flex: none; width: clamp(140px, 17vw, 230px);
410    background: #0c0c0e; border: 1px solid var(--line); padding: 7px 7px 0;
411    box-shadow: 0 24px 48px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4); transform: rotate(var(--r)); }
412  .knt-p2 .knt-chip { width: clamp(180px, 20vw, 260px); }
413  .knt-chip img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
414    filter: saturate(.75) contrast(1.08); opacity: .9; border: 1px solid rgba(244,243,240,.07); }
415  .knt-chip--wide img { aspect-ratio: 3/2; }
416  .knt-chip--tall img { aspect-ratio: 3/4; }
417  .knt-chip figcaption { font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
418    text-transform: uppercase; color: var(--faint); padding: 8px 2px 9px; white-space: nowrap;
419    overflow: hidden; text-overflow: ellipsis; }
420  .knt-chip figcaption b { font-weight: 400; color: var(--accent); margin-right: .7em; }
421  .knt-chip--tape::before { content: ''; position: absolute; top: -9px; left: 50%;
422    width: 56px; height: 17px; transform: translateX(-50%) rotate(-2deg);
423    background: rgba(244,243,240,.08); border: 1px solid rgba(244,243,240,.05); }
424  .knt-chips .knt-chip:nth-child(2) { margin-top: 30px; margin-left: -26px; }
425  .knt-pillar .knt-chip { opacity: 0; transform: translateY(18px) rotate(calc(var(--r) * 2.4));
426    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
427  .knt-pillar .knt-chip:nth-child(2) { transition-delay: .14s; }
428  .knt-pillar.in .knt-chip { opacity: 1; transform: rotate(var(--r)); transition-delay: .5s; }
429  .knt-pillar.in .knt-chip:nth-child(2) { transition-delay: .64s; }
430  .knt-list li { position: relative; padding: 14px 0 14px 28px; color: var(--dim);
431    font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }
432  .knt-list li::before { content: '→'; position: absolute; left: 0; top: 14px;
433    font-family: var(--mono); font-size: 14px; color: var(--accent); }
434  .knt-list li + li { border-top: 1px solid var(--line); }
435  .knt-list b { color: var(--ink); font-weight: 650; }
436  .knt-list a { color: var(--ink); font-weight: 650; text-decoration: underline;
437    text-decoration-color: var(--accent); text-underline-offset: 4px; }
438  .knt-list a:hover { color: var(--accent); }
439  .knt-list a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
440  @media (max-width: 700px) {
441    .msl-lockup { margin-bottom: 52px; }
442    .knt-pillar { padding: 24px 0 34px; }
443    .knt-p2 .knt-meta { justify-content: flex-start; }
444    .knt-title, .knt-p2 .knt-title { text-align: left; letter-spacing: -.035em;
445      font-size: clamp(38px, 13.5vw, 64px); }
446    .knt-band span { font-size: clamp(48px, 20vw, 90px); }
447    .knt-list, .knt-p1 .knt-list, .knt-p3 .knt-list { margin-left: 0; max-width: none; }
448    .knt-row, .knt-p2 .knt-row { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; }
449    .knt-chips, .knt-p2 .knt-chips { order: 2; gap: 14px; padding-top: 20px; justify-content: flex-start; }
450    .knt-row .knt-list, .knt-p2 .knt-row .knt-list { order: 1; }
451    .knt-chip, .knt-p2 .knt-chip { width: 47%; }
452    .knt-chips .knt-chip:nth-child(2) { margin: 18px 0 0 0; }
453    .knt-list li { padding: 12px 0 12px 24px; font-size: 15px; }
454    .knt-list li::before { top: 12px; }
455  }
456  @media (prefers-reduced-motion: reduce) {
457    .knt-track { animation: none; }
458    .knt-title i { transform: none; transition: none; }
459    .msl-line { opacity: 1; transform: none; transition: none; }
460    .knt-pillar .knt-chip { opacity: 1; transform: rotate(var(--r)); transition: none; }
461  }
462
463  /* ── why japan: "Kessai-ran" approval record ──
464     The proof band as a stamped ringi-sho document: PMDA / AMED / KBIC
465     press vermilion hanko onto the numbers they certify. Vermilion
466     (--verm) is reserved for the seals — never reuse it elsewhere.
467     Entrance keys off the section's own .rv → .in from the page observer. */
468  .hkb { --verm: #d0442c; }
469  .hkb-doc { max-width: 1180px; margin: 0 auto; }
470  .hkb-head { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
471    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
472    padding: 10px 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
473    text-transform: uppercase; color: var(--faint); }
474  .hkb-head b { font-weight: 400; color: var(--dim); }
475  .hkb-claim { margin: clamp(26px, 3.6vh, 40px) 0 10px; font-weight: 900; text-transform: uppercase;
476    letter-spacing: -.03em; line-height: .95; font-size: clamp(30px, 5.4vw, 72px); }
477  .hkb-cl { display: block; margin-left: -.05em; }
478  .hkb-cl2 { margin-left: clamp(.75rem, 7vw, 7rem); }
479  .hkb-gloss { font-family: var(--mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: .3em;
480    color: var(--faint); margin: 0 0 clamp(22px, 3.4vh, 36px) clamp(.85rem, 7.1vw, 7.1rem); }
481  .hkb-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
482    border: 1px solid var(--line); }
483  .hkb-cell { position: relative; padding: 18px 20px 22px; min-height: clamp(150px, 20vh, 190px); }
484  .hkb-cell + .hkb-cell { border-left: 1px solid var(--line); }
485  .hkb-mach { margin: 0; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .18em;
486    text-transform: uppercase; color: var(--faint); line-height: 1.7;
487    max-width: calc(100% - clamp(58px, 6vw, 80px)); }
488  .hkb-mach b { font-weight: 400; color: var(--dim); }
489  .hkb-stat { margin-top: 14px; font-size: clamp(38px, 3.8vw, 56px); font-weight: 900;
490    letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
491  .hkb-qual { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
492  .hkb-fact { margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
493  .hkb-seal { position: absolute; top: 34px; right: 16px; width: clamp(58px, 6vw, 80px);
494    color: var(--verm); pointer-events: none; user-select: none; }
495  .hkb-seal svg { display: block; width: 100%; height: auto; }
496  .hkb-foot { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
497    border-top: 1px solid var(--line); margin-top: clamp(20px, 3vh, 30px); padding-top: 16px; }
498  .hkb-foot > span:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
499    text-transform: uppercase; color: var(--faint); }
500  .hkb-link { color: var(--ink); font-weight: 700; font-size: clamp(16px, 1.6vw, 20px);
501    text-decoration: none; letter-spacing: -.01em; }
502  .hkb-link em { font-style: normal;
502 color: var(--accent); }
503  .hkb-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
504  .hkb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
505  .hkb .hkb-cl, .hkb .hkb-gloss, .hkb .hkb-head, .hkb .hkb-foot { opacity: 0; transform: translateY(16px);
506    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
507  .hkb .hkb-cell { opacity: 0; transform: translateY(14px);
508    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
509  .hkb.in .hkb-head, .hkb.in .hkb-cl, .hkb.in .hkb-gloss, .hkb.in .hkb-cell, .hkb.in .hkb-foot {
510    opacity: 1; transform: none; }
511  .hkb.in .hkb-cl2 { transition-delay: .07s; }
512  .hkb.in .hkb-gloss { transition-delay: .14s; }
513  .hkb.in .hkb-c1 { transition-delay: .16s; }
514  .hkb.in .hkb-c2 { transition-delay: .26s; }
515  .hkb.in .hkb-c3 { transition-delay: .36s; }
516  .hkb.in .hkb-foot { transition-delay: .5s; }
517  .hkb .hkb-seal { opacity: 0; transform: rotate(calc(var(--rot) + 8deg)) scale(1.55);
518    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .18s ease-out; }
519  .hkb.in .hkb-seal { opacity: .92; transform: rotate(var(--rot)) scale(1); }
520  .hkb.in .hkb-c1 .hkb-seal { transition-delay: .62s; }
521  .hkb.in .hkb-c2 .hkb-seal { transition-delay: .86s; }
522  .hkb.in .hkb-c3 .hkb-seal { transition-delay: 1.1s; }
523  @media (max-width: 760px) {
524    .hkb-strip { grid-template-columns: 1fr; }
525    .hkb-cell { min-height: 0; padding: 16px 16px 20px; }
526    .hkb-cell + .hkb-cell { border-left: 0; border-top: 1px solid var(--line); }
527    .hkb-seal { top: 14px; width: 58px; }
528    .hkb-mach { max-width: calc(100% - 70px); }
529    .hkb-cl2 { margin-left: 1.25rem; }
530    .hkb-gloss { margin-left: 1.35rem; }
531  }
532  @media (prefers-reduced-motion: reduce) {
533    .hkb .hkb-head, .hkb .hkb-cl, .hkb .hkb-gloss, .hkb .hkb-cell, .hkb .hkb-foot {
534      opacity: 1; transform: none; transition: none; }
535    .hkb .hkb-seal { opacity: .92;
535 transform: rotate(var(--rot, 0deg)); transition: none; }
536  }
537
538  .resline { display: inline-block; margin-top: 40px; font-weight: 600; font-size: clamp(10.5px, 2.7vw, 34px);
539    letter-spacing: -.005em; text-decoration: none; white-space: nowrap; }
540  .resline em { font-style: normal; color: var(--accent); }
541  .resline:hover em { text-decoration: underline; text-underline-offset: 6px; }
542  @media (max-width: 860px) {
543    .resline { white-space: normal; font-size: clamp(19px, 3.4vw, 30px); line-height: 1.4; }
544  }
545
546  /* ── summit + hotel package ── */
547  .bundle-feature__promise { max-width: 58ch; color: var(--dim); font-size: 16px; line-height: 1.65; }
548  .bundle-feature__promise strong { color: var(--ink); font-weight: 650; }
549  .bundle-feature__price { font-size: clamp(38px, 4.5vw, 58px); line-height: .9; font-weight: 850; letter-spacing: -.025em;
550    font-variant-numeric: tabular-nums; }
551  .bundle-feature__price span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 9px; font-weight: 400;
552    letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
553  .bundle-feature__checkout { min-width: 250px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
554  .bundle-feature__friction { margin-top: 16px; font-family: var(--mono); font-size: 10px; line-height: 1.6;
555    letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
556  .bundle-feature__links { display: flex; gap: 22px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
557  .bundle-feature__details { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
558    color: var(--accent); text-underline-offset: 4px; }
559
560  /* ── bundle card: third card in the summits grid ── */
561  .summit .card.pkg { grid-column: 1 / -1; gap: 0; padding: 32px 36px 30px;
562    border-color: rgba(var(--accent-rgb), .5);
563    background: linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.015) 62%); }
564  .pkg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
565  .pkg-top .num { color: var(--accent); }
566  .pkg-top .eyebrow { margin: 0; }
567  .pkg-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
568    gap: 24px 48px; margin-top: 20px; align-items: start; }
569  .pkg-pitch { display: flex; flex-direction: column; height: 100%; }
570  .pkg-pitch h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.04; text-transform: uppercase;
571    font-weight: 900; letter-spacing: -.01em; margin-bottom: 12px; }
572  .pkg-pitch .bundle-feature__promise { font-size: 15px; }
573  .pkg-foot { margin-top: auto; padding-top: 20px; }
574  .pkg-foot .bundle-feature__friction { margin-top: 0; }
575  .pkg-ledger { border-top: 1px solid var(--line); }
576  .pkg-ledger > div { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 4px 14px;
577    align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line);
578    font-size: 13px; line-height: 1.4; color: var(--dim); }
579  .pkg-ledger b { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em;
580    text-transform: uppercase; color: var(--accent); }
581  .pkg-ledger i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); }
582  .pkg-ledger .pkg-sub { grid-template-columns: minmax(0,1fr) auto; font-family: var(--mono);
583    font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
584  .pkg-ledger .pkg-sub i { color: var(--faint); font-size: 13px; letter-spacing: 0; }
585  .pkg-ledger .pkg-add b { color: var(--ink); }
586  .pkg-buy .bundle-feature__price { margin-top: 18px; font-size: clamp(34px, 3.4vw, 46px); }
587  .pkg-buy .bundle-feature__checkout { margin-top: 16px; width: 100%; min-width: 0; }
588  @media (max-width: 860px) {
589    .summit .card.pkg { padding: 24px 20px 20px; }
590    .pkg-top { gap: 4px 14px; }
591    .pkg-top .eyebrow { font-size: 9px; letter-spacing: .14em; }
592    .pkg-grid { grid-template-columns: 1fr; gap: 12px; }
593    .pkg-pitch h3 { margin-bottom: 8px; }
594    .pkg-pitch .bundle-feature__promise { font-size: 14px; line-height: 1.5; }
595    /* friction + details drop below the CTA so the pitch runs straight into the ledger */
596    .pkg-pitch { display: contents; }
597    .pkg-foot { order: 3; margin-top: 0; padding-top: 16px; }
598    .pkg-foot .bundle-feature__friction { font-size: 9px; line-height: 1.5; }
599    .pkg-ledger > div { grid-template-columns: 88px minmax(0,1fr) auto; gap: 12px; padding: 6px 0; font-size: 12px; }
600    .pkg-ledger .pkg-sub { grid-template-columns: minmax(0,1fr) auto; }
601    .pkg-buy .bundle-feature__price { margin-top: 14px; }
602    .pkg-buy .bundle-feature__checkout { margin-top: 12px; }
603  }
604
605  /* ── summits ── */
606  .summit { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 44px; }
607  .summit .card { position: relative; overflow: hidden; }
608  .summit .card .cardBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
609    object-position: center top; filter: saturate(.75); transition: transform .6s ease; }
610  .summit .card:hover .cardBg { transform: scale(1.04); }
611  .summit .card .cardVeil { position: absolute; inset: 0;
612    background: linear-gradient(180deg, rgba(5,5,6,.32) 0%, rgba(5,5,6,.72) 44%, var(--bg) 76%); }
613  .summit .card > :not(.cardBg):not(.cardVeil) { position: relative; z-index: 1; }
614  .summit .card { border: 1px solid var(--line); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px;
615    background: linear-gradient(160deg, rgba(var(--accent-rgb),.045), transparent 55%); }
616  .summit .num { font-family: var(--mono); color: var(--faint); font-size: 12px; letter-spacing: .3em; }
617  .summit h3 { font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; }
618  .summit .date { font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.8vw, 38px); color: var(--accent); letter-spacing: -.01em; }
619  .summit p { color: var(--dim); font-size: 15px; line-height: 1.65; flex: 1; }
620  .summit .fine { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
621  .summit .topics { display: flex; flex-wrap: wrap; gap: 8px; }
622  .summit .topics span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--accent);
623    border: 1px solid rgba(var(--accent-rgb),.3); padding: 6px 11px; border-radius: 2px; text-transform: uppercase; }
624  .summit .priceRow { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px;
625    display: flex; align-items: baseline; gap: 14px; }
626  .summit .priceVal { font-weight: 800; font-size: 32px; letter-spacing: -.01em; line-height: 1;
627    font-variant-numeric: tabular-nums; }
628  .summit .priceKey { font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
629    text-transform: uppercase; color: var(--dim); }
630  .summit .tiein { font-size: 14px; color: var(--ink); font-weight: 500; }
631  .summit .tiein a { color: var(--accent); text-decoration: none; }
632  .summit .tiein a:hover { text-decoration: underline; text-underline-offset: 4px; }
633  .voicesbar { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
634  .voicesbar .faces { display: flex; }
635  .voicesbar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
636    border: 2px solid var(--bg); outline: 1px solid var(--line); margin-left: -12px; }
637  .voicesbar img:first-child { margin-left: 0; }
638  .voicesbar .who { font-size: 14px; color: var(--dim); }
639  .voicesbar .who b { color: var(--ink); font-weight: 600; }
640  .voicesbar a.more { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
641    color: var(--accent); text-decoration: none; }
642  .voicesbar a.more:hover { text-decoration: underline; text-underline-offset: 4px; }
643  @media (max-width: 860px) {
644    .summit { grid-template-columns: 1fr; }
645    /* stacked cards are taller — bring the solid fade up so body copy stays on ink */
646    .summit .card .cardVeil { background: linear-gradient(180deg, rgba(5,5,6,.36) 0%, rgba(5,5,6,.8) 32%, var(--bg) 58%); }
647  }
648
649  /* ── speakers ── */
650  .headliners { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 44px; }
651  .headliners .hcard { position: relative; border: 1px solid var(--line); overflow: hidden; }
652  .headliners .hcard img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
653    filter: grayscale(28%) contrast(1.04); transition: filter .3s, transform .5s; }
654  .headliners .hcard:hover img { filter: grayscale(0%); transform: scale(1.025); }
655  .headliners .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
656    background: linear-gradient(to top, rgba(5,5,6,.92), transparent); }
657  .headliners .nm { font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.6vw, 22px); letter-spacing: -.005em; line-height: 1.05; }
658  .headliners .og { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
659  @media (max-width: 860px) { .headliners { grid-template-columns: repeat(3, 1fr); }
660    .headliners .hcard:nth-child(n+4) { display: none; } }
661  @media (max-width: 640px) { .headliners { grid-template-columns: 1fr 1fr; }
662    .headliners .hcard:nth-child(4) { display: block; } }
663  .alsoline { margin-top: 34px; color: var(--dim); font-size: 15px; line-height: 1.8; max-width: 900px; }
664  .alsoline b { color: var(--ink); font-weight: 600; }
665  .followline { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
666    text-transform: uppercase; }
667  .followline a, .voicesbar a.more, footer .cdlabel a { display: inline-block; padding: 8px 2px; }
668  .followline a { color: var(--accent); text-decoration: none; }
669  .followline a:hover { text-decoration: underline; text-underline-offset: 4px; }
670
671  /* ── ecosystem ── */
672  .ecoHead { margin-top: 96px; }
673  .majorPartners { display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; margin-top: 30px; }
674  /* Hover glow sits BEHIND each logo (radial pseudo-element) so it reads the
675     same for the alpha-transparent Kobe mark and the screen-blended MIC box —
676     a drop-shadow would trace the MIC file's rectangular canvas instead. */
677  .majorPartners a { display: block; position: relative; }
678  .majorPartners a::before { content: ""; position: absolute; inset: -28px;
679    background: radial-gradient(closest-side, rgba(var(--accent-rgb),.16), transparent 70%);
680    opacity: 0; transition: opacity .3s ease; pointer-events: none; }
681  .majorPartners a:hover::before { opacity: 1; }
682  .majorPartners img { height: 118px; width: auto; display: block; }
683  /* LEV Foundation's official mark is a serif wordmark; rendered typographically
684     (as the carousel already did) since no dark-background asset exists. */
685  .levWordmark { text-align: center; color: var(--ink); text-decoration: none;
686    font-family: Georgia, 'Times New Roman', serif; }
687  .levWordmark .lev { display: block; font-size: 58px; line-height: 1; letter-spacing: .04em; }
688  .levWordmark .found { display: block; font-size: 21px; margin-top: 7px; letter-spacing: .01em; }
689  /* The MIC PNG ships white-on-solid-black; screen-blending melts its black
690     canvas into the page without altering the file (approval terms). */
691  .majorPartners .micLogo { mix-blend-mode: screen; height: 112px; }
692  /* Broken Symmetry Capital rendered typographically (the only supplied logo
693     file is a 120×120 JPG, too small for this row) — serif, same approach
694     as the LEV Foundation mark. */
695  .bscWordmark { text-align: center; color: var(--ink); text-decoration: none;
696    font-family: Georgia, 'Times New Roman', serif; }
697  .bscWordmark .bsym { display: block; font-size: 31px; line-height: 1.1; letter-spacing: .04em; }
698  .bscWordmark .bcap { display: block; font-size: 15px; margin-top: 7px;
699    letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; }
700  @media (max-width: 640px) { .majorPartners { gap: 36px; } .majorPartners img,
701    .majorPartners .micLogo { height: 76px; }
702    .levWordmark .lev { font-size: 40px; } .levWordmark .found { font-size: 15px; }
703    .bscWordmark .bsym { font-size: 22px; } .bscWordmark .bcap { font-size: 11px; margin-top: 5px; } }
704  html.kobe-permit-over [data-kobe-permit] { display: none !important; }
705  .ecoWall { position: relative; overflow: hidden; margin-top: 34px; background: var(--bg);
706    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
707  .ecoWall::before, .ecoWall::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
708  .ecoWall::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
709  .ecoWall::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
710  .ecoTrack { display: flex; width: max-content; animation: ecoScroll 48s linear infinite; }
711  .ecoWall:hover .ecoTrack, .ecoWall:focus-within .ecoTrack { animation-play-state: paused; }
712  @keyframes ecoScroll { to { transform: translateX(-50%); } }
713  .ecoSeq { display: flex; align-items: center; gap: 70px; padding: 28px 35px; }
714  .ecoCell { display: flex; align-items: center; height: 40px; text-decoration: none; }
715  .ecoCell img { height: 32px; width: auto; max-width: 150px; object-fit: contain; display: block; }
716  .ecoCell.plate img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.3); mix-blend-mode: screen; transition: filter .3s; }
717  .ecoCell.stamp img { filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s; }
718  .ecoCell.luma img { filter: grayscale(1) contrast(1.7) brightness(1.6); mix-blend-mode: screen; transition: filter .3s; }
719  .ecoCell.plate:hover img { filter: grayscale(1) invert(1) brightness(1.2) contrast(1.35); }
720  .ecoCell.stamp:hover img { opacity: 1; }
721  .ecoCell.luma:hover img { filter: grayscale(1) contrast(1.7) brightness(1.9); }
722  .ecoWord { font-weight: 700; font-size: 17px; letter-spacing: .02em; color: rgba(244,243,240,.85); white-space: nowrap; }
723  .ecoCell:hover .ecoWord { color: var(--ink); }
724  @media (max-width: 760px) { .ecoSeq { gap: 44px; padding: 22px; }
724 .ecoCell img { height: 26px; } }
725  @media (prefers-reduced-motion: reduce) {
726    .ecoWall::before, .ecoWall::after { display: none; }
727    .ecoTrack { animation: none; width: auto; }
728    .ecoSeq { flex-wrap: wrap; justify-content: center; }
729    .ecoSeq[aria-hidden="true"] { display: none; }
730  }
731
732  /* ── fashion show ── */
733  .fashion { max-width: none; padding: 0; position: relative; overflow: hidden; }
734  .fashion video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
735  .fashion .veil { position: absolute; inset: 0;
736    background: linear-gradient(100deg, rgba(5,5,6,.88) 32%, rgba(5,5,6,.5) 68%, rgba(5,5,6,.3)); }
737  .fashion .content { position: relative; padding: 120px 6vw 110px; max-width: 1440px; margin: 0 auto; width: 100%; }
738  .fashion p { color: var(--dim); max-width: 56ch; font-size: 15px; line-height: 1.7; margin: 14px 0 22px; }
739  .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
740  .kanji { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
741  .kanji span { cursor: pointer; display: inline-block; border: 1px solid rgba(var(--accent-rgb),.3);
742    border-radius: 2px; padding: 7px 11px; color: var(--accent); font-size: 13px; line-height: 1;
743    min-width: 31px; text-align: center; }
744  .tags span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--accent);
745    border: 1px solid rgba(var(--accent-rgb),.3); padding: 7px 13px; border-radius: 2px; text-transform: uppercase; }
746
747  /* ── japan strip ── */
748  .stripwrap { max-width: none; padding: 0; }
749  .stripwrap .cap { text-align: center; padding: 26px 6vw 18px; }
750  .strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
751  .strip figure { position: relative; overflow: hidden; }
752  .strip img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
753    filter: contrast(1.02); transition: transform .6s ease; }
754  .strip figure:hover img { transform: scale(1.04); }
755  .strip figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--mono);
756    font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,243,240,.8);
757    text-shadow: 0 1px 8px rgba(0,0,0,.8); }
758  @media (max-width: 860px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip figure:nth-child(2) { display: none; } }
759
760  /* ── agenda · day rail ── */
761  .ag-rail { display: grid; grid-template-columns: 1.12fr 1.12fr .84fr; margin-top: 84px; }
762  .ag-stop { position: relative; border-top: 1px solid rgba(var(--accent-rgb),.26);
763    padding: 52px 3.2rem 0 0; margin-top: 44px; }
764  .ag-stop:last-child { padding-right: 0; }
765  .ag-stop::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
766    background: var(--bg); border: 1px solid var(--accent); }
767  .ag-stop::after { content: ""; position: absolute; top: 4px; left: 3px; width: 1px; height: 36px;
768    background: rgba(var(--accent-rgb),.32); }
769  .ag-date { position: absolute; top: -40px; left: 0; font-size: 11px; font-weight: 500;
770    letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
771  .ag-date .ag-code { color: var(--faint); margin-right: 1.1em; }
772  .ag-tag { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
773    color: var(--faint); margin-bottom: 12px; }
774  .ag-title { font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em;
775    margin-bottom: 28px; max-width: 24ch; }
776  .ag-sessions { list-style: none; }
777  .ag-sessions li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
778    border-top: 1px solid var(--line); padding: 13px 0; }
779  .ag-sessions li:last-child { border-bottom: 1px solid var(--line); }
780  .ag-num { font-size: 10px; letter-spacing: .1em; color: var(--faint); }
781  .ag-t { font-weight: 700; font-size: 14.5px; line-height: 1.35; letter-spacing: -.005em; }
782  .ag-sub { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.45;
783    color: var(--dim); margin-top: 3px; }
784  .ag-stop--finale { border-top-color: var(--accent); }
785  .ag-stop--finale::before { background: var(--accent); border-color: var(--accent);
786    box-shadow: 0 0 22px rgba(var(--accent-rgb),.85), 0 0 60px rgba(var(--accent-rgb),.35); }
787  .ag-stop--finale::after { background: rgba(var(--accent-rgb),.55); }
788  .ag-stop--finale .ag-date { color: var(--accent); }
789  .ag-stop--finale .ag-date .ag-code { color: rgba(var(--accent-rgb),.55); }
790  .ag-finale { border: 1px solid rgba(var(--accent-rgb),.3);
791    background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.015) 70%);
792    box-shadow: 0 0 44px rgba(var(--accent-rgb),.07) inset, 0 0 60px rgba(var(--accent-rgb),.05);
793    padding: 26px 24px 28px; }
794  .ag-finale .ag-tag { color: rgba(var(--accent-rgb),.75); }
795  .ag-finale-title { font-weight: 900; font-size: 23px; line-height: 1.14; letter-spacing: -.015em;
796    margin-bottom: 14px; }
797  .ag-finale-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
798  .ag-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem;
799    border-top: 1px solid var(--line); margin-top: 72px; padding-top: 34px; }
800  .ag-note { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
801  @media (max-width: 860px) {
802    .ag-rail { display: block; border-left: 1px solid rgba(var(--accent-rgb),.26);
803      padding-left: 30px; margin-top: 60px; }
804    .ag-stop { border-top: none; padding: 0 0 52px 0; margin-top: 0; }
805    .ag-stop::before { top: 2px; left: -34px; }
806    .ag-stop::after { top: 5px; left: -30px; width: 22px; height: 1px; }
807    .ag-date { position: static; display: block; margin-bottom: 16px; }
808    .ag-stop--finale { padding-bottom: 0; }
809    .ag-cta { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
810  }
811
812  /* ── faq · ticket stubs ── */
813  @supports (interpolate-size: allow-keywords) {
814    :root { interpolate-size: allow-keywords; }
815    .faqItem::details-content { height: 0; overflow: clip;
816      transition: height .32s cubic-bezier(.4,0,.2,1), content-visibility .32s allow-discrete; }
817    .faqItem[open]::details-content { height: auto; }
818  }
819  .fq-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
820    gap: 64px 88px; align-items: start; }
821  .fq-head { position: sticky; top: 48px; }
822  .fq-head .big { margin-bottom: 36px; }
823  .fq-tick { color: var(--accent); }
824  .fq-meta { border-top: 1px solid var(--line); padding-top: 20px; font-size: 10px;
825    letter-spacing: .2em; text-transform: uppercase; color: var(--faint); line-height: 2.2; }
826  .fq-meta strong { color: var(--dim); font-weight: 500; }
827  .fq-stubs { display: flex; flex-direction: column; gap: 12px; }
828  .faqItem { position: relative; border: 1px solid var(--line);
829    background: linear-gradient(180deg, rgba(244,243,240,.015), rgba(244,243,240,0));
830    transition: border-color .25s ease, box-shadow .25s ease; }
831  .faqItem::before { content: attr(data-index); position: absolute; top: 0; bottom: 0; left: 0;
832    width: 56px; border-right: 1px dashed var(--line); display: grid; place-items: center;
833    writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px; font-weight: 500;
834    letter-spacing: .28em; text-transform: uppercase; color: var(--faint);
835    transition: color .25s ease, background .25s ease, border-color .25s ease; }
836  .faqItem:hover { border-color: rgba(var(--accent-rgb),.38);
837    box-shadow: 0 0 34px -10px rgba(var(--accent-rgb),.28), inset 0 0 24px -18px rgba(var(--accent-rgb),.35); }
838  .faqItem:hover::before { color: rgba(var(--accent-rgb),.85); }
839  .faqItem[open] { border-left-color: rgba(var(--accent-rgb),.6); }
840  .faqItem[open]::before { color: var(--accent); background: rgba(var(--accent-rgb),.05);
841    border-right-color: rgba(var(--accent-rgb),.3); }
842  .faqItem summary { list-style: none; cursor: pointer; display: flex; align-items: center;
843    gap: 24px; min-height: 64px; padding: 14px 24px 14px 84px; user-select: none; }
844  .faqItem summary::-webkit-details-marker { display: none; }
845  .faqItem summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
846  .fq-q { flex: 1; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; }
847  .fq-barcode { flex: 0 0 44px; height: 20px; opacity: .45; transition: opacity .25s ease;
848    background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px,
849      var(--faint) 3px 5px, transparent 5px 7px, var(--faint) 7px 8px, transparent 8px 11px); }
850  .faqItem:hover .fq-barcode { opacity: .7; }
851  .faqItem[open] .fq-barcode { opacity: .8;
852    background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.7) 0 1px, transparent 1px 3px,
853      rgba(var(--accent-rgb),.7) 3px 5px, transparent 5px 7px, rgba(var(--accent-rgb),.7) 7px 8px, transparent 8px 11px); }
854  .fq-toggle { flex: 0 0 auto; font-size: 13px; color: var(--faint); width: 24px;
855    text-align: center; transition: color .2s ease; }
856  .fq-toggle::before { content: "[+]"; }
857  .faqItem[open] .fq-toggle::before { content: "[–]"; }
858  .faqItem[open] .fq-toggle, .faqItem:hover .fq-toggle { color: var(--accent); }
859  .fq-body { padding: 2px 96px 26px 84px; }
860  .fq-body p { max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--dim);
861    border-top: 1px solid var(--line); padding-top: 18px; }
862  .fq-foot { margin-top: 22px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
863    color: var(--faint); display: flex; align-items: center; gap: 14px; }
864  .fq-foot::before { content: ""; flex: 0 0 24px; height: 1px; background: rgba(var(--accent-rgb),.4); }
865  @media (max-width: 1100px) {
866    .fq-grid { grid-template-columns: 1fr; gap: 56px; }
867    .fq-head { position: static; }
868  }
869  @media (max-width: 860px) {
870    .faqItem::before { writing-mode: horizontal-tb; top: 0; left: 0; right: 0; bottom: auto;
871      width: auto; height: 28px; border-right: none; border-bottom: 1px dashed var(--line);
872      place-items: center start; padding-left: 20px; }
873    .faqItem[open]::before { border-bottom-color: rgba(var(--accent-rgb),.3); border-right-color: var(--line); }
874    .faqItem summary { min-height: 0; padding: 44px 20px 16px 20px; gap: 16px; }
875    .fq-barcode { display: none; }
876    .fq-body { padding: 0 20px 22px 20px; }
877  }
878
879  /* ── apply ── */
880  .applywrap { max-width: none; padding: 0; position: relative; overflow: hidden; }
881  .applywrap .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
882  .applywrap .veil { position: absolute; inset: 0;
883    background: linear-gradient(to bottom, rgba(5,5,6,.92) 0%, rgba(5,5,6,.55) 45%, rgba(5,5,6,.88) 100%); }
884  .apply { position: relative; text-align: center; padding: 150px 6vw 150px; max-width: 1440px; margin: 0 auto; }
885  .apply h2 { font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 7vw, 104px); letter-spacing: -.015em; line-height: .95; margin: 16px 0 18px;
886    text-shadow: 0 2px 50px rgba(0,0,0,.6); }
887  .apply p.sub { color: rgba(244,243,240,.78); font-size: 16px; margin-bottom: 40px; text-shadow: 0 1px 20px rgba(0,0,0,.7); }
888  .apply .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
889  .apply .row .btn { min-width: 200px; text-align: center; }
890  .apply .fine a { color: var(--accent); text-decoration: none; }
891  .apply .fine a:hover { text-decoration: underline; text-underline-offset: 4px; }
892  .apply .apply-jp { margin-top: 26px; max-width: 72ch; margin-left: auto; margin-right: auto; text-transform: none; letter-spacing: .06em; font-size: 11px; line-height: 1.8; color: rgba(244,243,240,.7); }
893  .apply .fine { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,243,240,.6); }
894
895  /* ── footer ── */
896  footer { border-top: 1px solid var(--line); padding: 70px 6vw 60px; text-align: center; }
897  footer .see { font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3vw, 40px); letter-spacing: .02em; }
898  footer .date { font-family: var(--mono); color: var(--accent); letter-spacing: .4em; margin-top: 10px; font-size: 14px; }
899  #count { display: flex; gap: 34px; justify-content: center; margin-top: 30px; }
900  #count div { min-width: 64px; }
901  #count .v { font-weight: 800; font-size: clamp(26px, 4vw, 46px); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
902  #count .k { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--faint); text-transform: uppercase; margin-top: 4px; }
903  @media (max-width: 380px) { #count { gap: 18px; } #count div { min-width: 56px; } }
904  footer .cdlabel { margin-top: 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
905  footer .jst { margin-top: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
906  footer .jst b { color: var(--accent); font-weight: 500; }
907  footer .doors { display: flex; gap: 30px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
908  footer .doors a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-decoration: none; display: inline-block; min-width: 150px; text-align: center; padding: 12px 8px; }
909  footer .doors a:hover { color: var(--ink); }
910
911  @media (prefers-reduced-motion: reduce) { .heroVideo { display: none; transition: none; } }
912</style>
913<noscript><style>.rv{opacity:1;transform:none}</style></noscript>
914</head>
915<body data-analytics-offer="mirai_city">
916
917<a class="skip" href="#speakers" data-copy="menu.skipLink"></a>
918
919<div role="status" aria-live="polite" id="srStatus" style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)"></div>
920<script src="/nav.js"></script>
920
921
922<!-- ═══ HERO OFFER ═══ -->
923<section class="hero" id="top" data-track-section="hero" data-track-position="1">
924  <div class="heroMedia">
925    <!-- Video: Kobe Harborland at night, Pexels (pexels.com/video/35145859), Pexels license.
926         Re-encoded as a seamless crossfade loop (last 1.5s blends into the first). -->
927    <img class="heroPoster" src="kobe_harbor_night_poster.jpg" alt="" fetchpriority="high" decoding="async" />
928    <video class="heroVideo" muted loop playsinline preload="none" aria-hidden="true">
929      <source data-src="kobe_harbor_night.mp4" type="video/mp4" />
930    </video>
931    <div class="heroVeil"></div>
932  </div>
933  <div class="heroContent">
934    <h1 data-copy="hero.headline"></h1>
935    <p class="heroLead" data-copy="hero.lead"></p>
936    <p class="heroWhere" data-copy="hero.where"></p>
937    <div class="heroActions" data-copy="hero.buttons"></div>
938    <p class="heroJpRow" data-copy="hero.jpLink"></p>
939  </div>
940  <a class="heroContinue" href="#pillars" aria-label="Scroll to the next section" data-copy="hero.scrollHint"></a>
941</section>
942
943<!-- ═══ INTRO + PILLARS: ACCELERATE / INSPIRE / LIVE ═══ -->
944<section id="pillars" data-track-section="pillars" data-track-position="2">
945  <p class="msl-lockup rv" data-copy="pillars.statement"
946     aria-label="Month-long popup city, for scientists, founders, and builders to experience Japan's Frontier Tech Renaissance."></p>
947  <article class="knt-pillar knt-p1 rv">
948    <div class="knt-meta"><span class="knt-num" data-copy="pillars.num1"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss1"></span></div>
949    <div class="knt-stage">
950      <div class="knt-band" aria-hidden="true"><div class="knt-track">
951        <span><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i></span>
952        <span><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i><i>加速</i></span>
953      </div></div>
954      <h2 class="knt-title" data-copy="pillars.title1"></h2>
955    </div>
956    <div class="knt-row">
957      <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints1"></aside>
958      <ul class="knt-list" data-copy="pillars.items1"></ul>
959    </div>
960  </article>
961  <article class="knt-pillar knt-p2 rv">
962    <div class="knt-meta"><span class="knt-num" data-copy="pillars.num2"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss2"></span></div>
963    <div class="knt-stage">
964      <div class="knt-band" aria-hidden="true"><div class="knt-track">
965        <span><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i></span>
966        <span><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i><i>刺激</i></span>
967      </div></div>
968      <h2 class="knt-title" data-copy="pillars.title2"></h2>
969    </div>
970    <div class="knt-row">
971      <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints2"></aside>
972      <ul class="knt-list" data-copy="pillars.items2"></ul>
973    </div>
974  </article>
975  <article class="knt-pillar knt-p3 rv">
976    <div class="knt-meta"><span class="knt-num" data-copy="pillars.num3"></span><span class="knt-gloss" aria-hidden="true" data-copy="pillars.gloss3"></span></div>
977    <div class="knt-stage">
978      <div class="knt-band" aria-hidden="true"><div class="knt-track">
979        <span><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i></span>
980        <span><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i><i>暮らし</i></span>
981      </div></div>
982      <h2 class="knt-title" data-copy="pillars.title3"></h2>
983    </div>
984    <div class="knt-row">
985      <aside class="knt-chips" aria-hidden="true" data-copy="pillars.prints3"></aside>
986      <ul class="knt-list" data-copy="pillars.items3"></ul>
987    </div>
988  </article>
989</section>
990
991
992<!-- ═══ PROOF: SPEAKERS + ECOSYSTEM ═══ -->
993<section id="speakers" data-track-section="proof" data-track-position="3">
994  <div class="eyebrow rv" data-copy="speakers.eyebrow"></div>
995  <h2 class="big rv" data-copy="speakers.headline"></h2>
996  <div class="headliners">
997    <div class="hcard rv"><img src="img/aubrey.jpg" alt="Aubrey de Grey" loading="lazy" decoding="async" />
998      <div class="meta"><div class="nm" data-copy="speakers.name"></div><div class="og" data-copy="speakers.org"></div></div></div>
999    <div class="hcard rv"><img src="img/kennedy.jpg" alt="Brian Kennedy" loading="lazy" decoding="async" />
1000      <div class="meta"><div class="nm" data-copy="speakers.name5"></div><div class="og" data-copy="speakers.org5"></div></div></div>
1001    <div class="hcard rv"><img src="img/hayano.jpg" alt="Motoshi Hayano" loading="lazy" decoding="async" />
1002      <div class="meta"><div class="nm" data-copy="speakers.name2"></div><div class="og" data-copy="speakers.org2"></div></div></div>
1003    <div class="hcard rv"><img src="img/yuki.jpg" alt="Yuki Hanyu" loading="lazy" decoding="async" />
1004      <div class="meta"><div class="nm" data-copy="speakers.name3"></div><div class="og" data-copy="speakers.org3"></div></div></div>
1005    <div class="hcard rv"><img src="img/adam.jpg" alt="Adam Gries" loading="lazy" decoding="async" />
1006      <div class="meta"><div class="nm" data-copy="speakers.name4"></div><div class="og" data-copy="speakers.org4"></div></div></div>
1007  </div>
1008  <p class="alsoline rv" data-copy="speakers.alsoLine"></p>
1009  <div class="followline rv" data-copy="speakers.followLine"></div>
1010
1011  <!-- Major partners · The two Kobe logos carry use approval #3182 (window: Aug 19 – Dec 15 2026)
1012       and self-hide via [data-kobe-permit]; the label and LEV Foundation stay. Kobe logo files are
1013       used verbatim per the approval terms — never edit, recompress, or recolor them. -->
1014  <div class="eyebrow rv ecoHead" data-copy="ecosystem.majorLabel"></div>
1015  <div class="majorPartners rv">
1016    <a class="levWordmark" href="https://www.levf.org/" target="_blank" rel="noopener" title="LEV Foundation"><span class="lev">LEV</span><span class="found">Foundation</span></a>
1017    <a data-kobe-permit href="https://www.hosp.kobe-u.ac.jp/ikoujiso/en/" target="_blank" rel="noopener" title="Kobe University"><img src="img/partners/kobe-university.png" alt="Kobe University" loading="lazy" decoding="async" /></a>
1018    <a data-kobe-permit href="https://www.med.kobe-u.ac.jp/mic/en/" target="_blank" rel="noopener" title="MedTech Innovation Center, Kobe University"><img class="micLogo" src="img/partners/mic-kobe-university.png" alt="MIC — MedTech Innovation Center, Kobe University" loading="lazy" decoding="async" /></a>
1019    <a class="bscWordmark" href="https://brokensymmetry.capital/" target="_blank" rel="noopener" title="Broken Symmetry Capital"><span class="bsym">Broken Symmetry</span><span class="bcap">Capital</span></a>
1020  </div>
1021
1022  <div class="eyebrow rv ecoHead" data-copy="ecosystem.headline"></div>
1023  <div class="ecoWall rv" aria-label="Supporting organizations">
1024    <div class="ecoTrack">
1025      <div class="ecoSeq">
1026      <a class="ecoCell plate" href="https://viva.city/" target="_blank" rel="noopener" title="Viva City"><img src="img/partners/viva-city.avif" alt="Viva City" loading="lazy" decoding="async" /></a>
1027      <a class="ecoCell stamp" href="https://www.fbri-kobe.org/kbic/english/" target="_blank" rel="noopener" title="KBIC"><img src="img/partners/kbic.svg" alt="KBIC" loading="lazy" decoding="async" /></a>
1028      <a class="ecoCell plate" href="https://www.learninglayer.ai/" target="_blank" rel="noopener" title="Learning Layer Labs"><img src="img/partners/learning-layer-labs.jpg" alt="Learning Layer Labs" loading="lazy" decoding="async" /></a>
1029      <a class="ecoCell plate" href="https://haus.fund/" target="_blank" rel="noopener" title="Biopunk"><img src="img/partners/biopunk.png" alt="Biopunk" loading="lazy" decoding="async" /></a>
1030      <a class="ecoCell luma" href="https://aevitashouse.bio/" target="_blank" rel="noopener" title="Aevitas"><img src="img/partners/aevitas.png" alt="Aevitas" loading="lazy" decoding="async" /></a>
1031      <a class="ecoCell plate" href="https://vibecodingnights.com/" target="_blank" rel="noopener" title="Vibe Coding Nights"><img src="img/partners/vibe-coding-nights.png" alt="Vibe Coding Nights" loading="lazy" decoding="async" /></a>
1032      <a class="ecoCell plate" href="https://alv.vc/" target="_blank" rel="noopener" title="Asagi Labs Ventures"><img src="img/partners/asagi-labs.jpg" alt="Asagi Labs Ventures" loading="lazy" decoding="async" /></a>
1033      <a class="ecoCell plate" href="https://zucity.org/en/market-homes" target="_blank" rel="noopener" title="ZuCity Japan"><img src="img/partners/zucity.svg" alt="ZuCity Japan" loading="lazy" decoding="async" /></a>
1034      <a class="ecoCell" href="https://ch-ange.de/" target="_blank" rel="noopener" title="CHANGE"><span class="ecoWord">CHANGE</span></a>
1035      <a class="ecoCell stamp" href="https://www.heka.bio/" target="_blank" rel="noopener" title="HekaBio"><img src="img/partners/hekabio.avif" alt="HekaBio" loading="lazy" decoding="async" /></a>
1036      <a class="ecoCell stamp" href="https://augmentationlab.org/" target="_blank" rel="noopener" title="Augmentation Lab"><img src="img/partners/augmentation-lab.png" alt="Augmentation Lab" loading="lazy" decoding="async" /></a>
1037      <a class="ecoCell plate" href="https://vitalistbay.com/" target="_blank" rel="noopener" title="Vitalist Bay"><img src="img/partners/vitalist-bay.png" alt="Vitalist Bay" loading="lazy" decoding="async" /></a>
1038      <a class="ecoCell stamp" href="https://the-mu.xyz/" target="_blank" rel="noopener" title="The MU"><img src="img/partners/the-mu.png" alt="The MU" loading="lazy" decoding="async" /></a>
1039      <a class="ecoCell stamp" href="https://www.greyrigge.com/" target="_blank" rel="noopener" title="GreyRigge Associates"><img src="img/partners/greyrigge.png" alt="GreyRigge Associates" loading="lazy" decoding="async" /></a>
1040      </div>
1041      <div class="ecoSeq" aria-hidden="true">
1042      <a class="ecoCell plate" href="https://viva.city/" target="_blank" rel="noopener" title="Viva City" tabindex="-1"><img src="img/partners/viva-city.avif" alt="Viva City" loading="lazy" decoding="async" /></a>
1043      <a class="ecoCell stamp" href="https://www.fbri-kobe.org/kbic/english/" target="_blank" rel="noopener" title="KBIC" tabindex="-1"><img src="img/partners/kbic.svg" alt="KBIC" loading="lazy" decoding="async" /></a>
1044      <a class="ecoCell plate" href="https://www.learninglayer.ai/" target="_blank" rel="noopener" title="Learning Layer Labs" tabindex="-1"><img src="img/partners/learning-layer-labs.jpg" alt="Learning Layer Labs" loading="lazy" decoding="async" /></a>
1045      <a class="ecoCell plate" href="https://haus.fund/" target="_blank" rel="noopener" title="Biopunk" tabindex="-1"><img src="img/partners/biopunk.png" alt="Biopunk" loading="lazy" decoding="async" /></a>
1046      <a class="ecoCell luma" href="https://aevitashouse.bio/" target="_blank" rel="noopener" title="Aevitas" tabindex="-1"><img src="img/partners/aevitas.png" alt="Aevitas" loading="lazy" decoding="async" /></a>
1047      <a class="ecoCell plate" href="https://vibecodingnights.com/" target="_blank" rel="noopener" title="Vibe Coding Nights" tabindex="-1"><img src="img/partners/vibe-coding-nights.png" alt="Vibe Coding Nights" loading="lazy" decoding="async" /></a>
1048      <a class="ecoCell plate" href="https://alv.vc/" target="_blank" rel="noopener" title="Asagi Labs Ventures" tabindex="-1"><img src="img/partners/asagi-labs.jpg" alt="Asagi Labs Ventures" loading="lazy" decoding="async" /></a>
1049      <a class="ecoCell plate" href="https://zucity.org/en/market-homes" target="_blank" rel="noopener" title="ZuCity Japan" tabindex="-1"><img src="img/partners/zucity.svg" alt="ZuCity Japan" loading="lazy" decoding="async" /></a>
1050      <a class="ecoCell" href="https://ch-ange.de/" target="_blank" rel="noopener" title="CHANGE" tabindex="-1"><span class="ecoWord">CHANGE</span></a>
1051      <a class="ecoCell stamp" href="https://www.heka.bio/" target="_blank" rel="noopener" title="HekaBio" tabindex="-1"><img src="img/partners/hekabio.avif" alt="HekaBio" loading="lazy" decoding="async" /></a>
1052      <a class="ecoCell stamp" href="https://augmentationlab.org/" target="_blank" rel="noopener" title="Augmentation Lab" tabindex="-1"><img src="img/partners/augmentation-lab.png" alt="Augmentation Lab" loading="lazy" decoding="async" /></a>
1053      <a class="ecoCell plate" href="https://vitalistbay.com/" target="_blank" rel="noopener" title="Vitalist Bay" tabindex="-1"><img src="img/partners/vitalist-bay.png" alt="Vitalist Bay" loading="lazy" decoding="async" /></a>
1054      <a class="ecoCell stamp" href="https://the-mu.xyz/" target="_blank" rel="noopener" title="The MU" tabindex="-1"><img src="img/partners/the-mu.png" alt="The MU" loading="lazy" decoding="async" /></a>
1055      <a class="ecoCell stamp" href="https://www.greyrigge.com/" target="_blank" rel="noopener" title="GreyRigge Associates" tabindex="-1"><img src="img/partners/greyrigge.png" alt="GreyRigge Associates" loading="lazy" decoding="async" /></a>
1056      </div>
1057    </div>
1058  </div>
1059</section>
1060
1061<!-- ═══ WHY JAPAN: THE APPROVAL RECORD (Kessai-ran) ═══ -->
1062<section id="whyjapan" class="hkb rv" data-track-section="whyjapan" data-track-position="4">
1063  <div class="hkb-doc">
1064    <div class="hkb-head">
1065      <span data-copy="whyjapan.head1"></span>
1066      <span data-copy="whyjapan.head2"></span>
1067    </div>
1068
1069    <h2 class="hkb-claim" data-copy="whyjapan.claim"></h2>
1070    <p class="hkb-gloss" aria-hidden="true" data-copy="whyjapan.gloss"></p>
1071
1072    <ul class="hkb-strip">
1073      <li class="hkb-cell hkb-c1">
1074        <h3 class="hkb-mach" data-copy="whyjapan.mach1"></h3>
1075        <div class="hkb-stat" data-copy="whyjapan.stat1"></div>
1076        <div class="hkb-qual" data-copy="whyjapan.qual1"></div>
1077        <p class="hkb-fact" data-copy="whyjapan.fact1"></p>
1078        <span class="hkb-seal" style="--rot:-7deg" aria-hidden="true">
1079          <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
1080            <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/>
1081            <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/>
1082            <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">承</text>
1083            <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">認</text>
1084          </svg>
1085        </span>
1086      </li>
1087      <li class="hkb-cell hkb-c2">
1088        <h3 class="hkb-mach" data-copy="whyjapan.mach2"></h3>
1089        <div class="hkb-stat" data-copy="whyjapan.stat2"></div>
1090        <div class="hkb-qual" data-copy="whyjapan.qual2"></div>
1091        <p class="hkb-fact" data-copy="whyjapan.fact2"></p>
1092        <span class="hkb-seal" style="--rot:4deg" aria-hidden="true">
1093          <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
1094            <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/>
1095            <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/>
1096            <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">助</text>
1097            <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">成</text>
1098          </svg>
1099        </span>
1100      </li>
1101      <li class="hkb-cell hkb-c3">
1102        <h3 class="hkb-mach" data-copy="whyjapan.mach3"></h3>
1103        <div class="hkb-stat" data-copy="whyjapan.stat3"></div>
1104        <div class="hkb-qual" data-copy="whyjapan.qual3"></div>
1105        <p class="hkb-fact" data-copy="whyjapan.fact3"></p>
1106        <span class="hkb-seal" style="--rot:-3deg" aria-hidden="true">
1107          <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
1108            <circle cx="48" cy="48" r="44" fill="none" stroke="currentColor" stroke-width="3"/>
1109            <circle cx="48" cy="48" r="39" fill="none" stroke="currentColor" stroke-width=".8" opacity=".55"/>
1110            <text x="48" y="44" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">集</text>
1111            <text x="48" y="80" text-anchor="middle" font-size="29" font-weight="600" fill="currentColor" font-family="'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif">積</text>
1112          </svg>
1113        </span>
1114      </li>
1115    </ul>
1116
1117    <div class="hkb-foot">
1118      <span data-copy="whyjapan.footLabel"></span>
1119      <span data-copy="whyjapan.footLink"></span>
1120    </div>
1121  </div>
1122</section>
1123
1124<hr class="rule" />
1125
1126<!-- ═══ SUMMITS ═══ -->
1127<section id="summits" data-track-section="summits" data-track-position="5">
1128  <div class="eyebrow rv" data-copy="summits.eyebrow"></div>
1129  <h2 class="big rv" data-copy="summits.headline"></h2>
1130  <div class="summit">
1131    <div class="card rv">
1132      <!-- Photo: National Cancer Institute on Unsplash (unsplash.com/photos/ct10qdGv1hQ, Unsplash license) -->
1133      <img class="cardBg" src="img/summit-pathologist.jpg" alt="" loading="lazy" decoding="async" style="object-position: center 32%" />
1134      <div class="cardVeil" aria-hidden="true"></div>
1135      <div class="num" data-copy="summits.label"></div>
1136      <div class="date" data-copy="summits.date"></div>
1137      <h3 data-copy="summits.title"></h3>
1138      <p data-copy="summits.body"></p>
1139      <div class="topics" data-copy="summits.topics"></div>
1140      <div class="priceRow" data-copy="summits.priceRow"></div>
1141      <div data-copy="summits.block"></div>
1142      <div class="fine" data-copy="summits.footnote"></div>
1143    </div>
1144    <div class="card rv">
1145      <img class="cardBg" src="img/early-bird-bridge.jpg" alt="" loading="lazy" decoding="async" style="object-position: center bottom" />
1146      <div class="cardVeil" aria-hidden="true"></div>
1147      <div class="num" data-copy="summits.label2"></div>
1148      <div class="date" data-copy="summits.date2"></div>
1149      <h3 data-copy="summits.title2"></h3>
1150      <p data-copy="summits.body2"></p>
1151      <div class="topics" data-copy="summits.topics2"></div>
1152      <div class="tiein" data-copy="summits.tieIn"></div>
1153      <div class="priceRow" data-copy="summits.priceRow2"></div>
1154      <div data-copy="summits.block2"></div>
1155      <div class="fine" data-copy="summits.footnote2"></div>
1156    </div>
1157    <div class="card pkg rv" id="summit-package" data-package-promo data-track-section="summit_package" data-track-position="6">
1158      <div class="pkg-top">
1159        <div class="num" data-copy="package.name"></div>
1160        <div class="eyebrow" data-copy="package.eyebrow"></div>
1161      </div>
1162      <div class="pkg-grid">
1163        <div class="pkg-pitch">
1164          <h3 data-copy="package.headline"></h3>
1165          <p class="bundle-feature__promise" data-copy="package.promise"></p>
1166          <div class="pkg-foot">
1167            <p class="bundle-feature__friction" data-copy="package.friction"></p>
1168            <div class="bundle-feature__links" data-copy="package.detailsLink"></div>
1169          </div>
1170        </div>
1171        <div class="pkg-buy">
1172          <div class="pkg-ledger">
1173            <div data-copy="package.fact"></div>
1174            <div data-copy="package.fact2"></div>
1175            <div class="pkg-sub" data-copy="package.subtotal"></div>
1176            <div class="pkg-add" data-copy="package.fact3"></div>
1177            <div class="pkg-add" data-fashion data-copy="package.fact4"></div>
1178          </div>
1179          <div class="bundle-feature__price" data-copy="package.price"></div>
1180          <a class="btn accent bundle-feature__checkout bundle-checkout" href="https://luma.com/an4zotn9?coupon=SFSH&amp;utm_source=mirai-site&amp;utm_campaign=summit-hotel-package" data-luma-action="checkout" data-luma-event-id="evt-OUCqVyqoZI5Jeg4" data-luma-ticket-type="ttype-0BjQv0xV4yY5P0l" data-luma-coupon="SFSH" data-luma-utm-source="mirai-site" data-analytics-action="checkout" data-analytics-location="summit_package" data-analytics-target="summit_hotel" data-copy="package.button"></a>
1181        </div>
1182      </div>
1183    </div>
1184  </div>
1185  <div class="voicesbar rv">
1186    <div class="faces">
1187      <img src="img/aubrey.jpg" alt="Aubrey de Grey" loading="lazy" decoding="async" /><img src="img/hayano.jpg" alt="Motoshi Hayano" loading="lazy" decoding="async" /><img src="img/yuki.jpg" alt="Yuki Hanyu" loading="lazy" decoding="async" /><img src="img/adam.jpg" alt="Adam Gries" loading="lazy" decoding="async" />
1188    </div>
1189    <div class="who" data-copy="summits.line"></div>
1190    <a class="more" href="#speakers" data-copy="summits.link"></a>
1191    <a class="more" href="/pricing/" data-analytics-action="site_navigation" data-analytics-location="summits" data-analytics-target="pricing" data-copy="summits.pricingLink"></a>
1192    <a class="more" href="/jp/" lang="ja" hreflang="ja" data-analytics-action="site_navigation" data-analytics-location="summits" data-analytics-target="japan" data-copy="summits.jpLink"></a>
1193  </div>
1194</section>
1195
1196<hr class="rule" />
1197
1198<!-- ═══ FASHION SHOW ═══ -->
1199<section class="fashion" id="fashion" data-fashion data-track-section="fashion" data-track-position="7">
1200  <video muted loop playsinline preload="none" loading="lazy" poster="augment_poster.jpg" aria-hidden="true">
1201    <source data-src="augment.mp4" type="video/mp4" /></video>
1202  <div class="veil"></div>
1203  <div class="content">
1204    <div class="eyebrow" data-copy="fashion.eyebrow"></div>
1205    <h2 class="big" data-copy="fashion.headline"></h2>
1206    <p data-copy="fashion.body"></p>
1207    <div class="tags" data-copy="fashion.tags"></div>
1208    <div class="mono" style="margin-bottom:26px; color:var(--faint)" data-copy="fashion.block"></div>
1209    <div style="display:flex; gap:14px; flex-wrap:wrap" data-copy="fashion.block2"></div>
1210  </div>
1211</section>
1212
1213<!-- ═══ JAPAN STRIP ═══ -->
1214<section class="stripwrap" aria-label="One evening in Kobe" data-track-section="
1214kobe_evening" data-track-position="8">
1215  <div class="cap mono rv" data-copy="kobe.caption"></div>
1216  <div class="strip">
1217    <figure><img src="img/harbor-golden-hour.jpg" alt="Kobe harbor at golden hour" loading="lazy" /><figcaption data-copy="kobe.caption2"></figcaption></figure>
1218    <figure><img src="img/izakaya-counter.jpg" alt="Izakaya counter seat" loading="lazy" /><figcaption data-copy="kobe.caption3"></figcaption></figure>
1219    <figure><img src="img/lanterns.jpg" alt="Lantern night" loading="lazy" /><figcaption data-copy="kobe.caption4"></figcaption></figure>
1220    <figure><img src="img/port-tower-night.jpg" alt="Port Tower at night" loading="lazy" /><figcaption data-copy="kobe.caption5"></figcaption></figure>
1221    <figure><img src="img/rokko-night.jpg" alt="Mt. Rokko night view" loading="lazy" /><figcaption data-copy="kobe.caption6"></figcaption></figure>
1222  </div>
1223</section>
1224
1225<!-- ═══ AGENDA · DAY RAIL (the stashed "Full Program" section lives in ../retreat/full-program-section.html) ═══ -->
1226<section id="agenda" data-track-section="agenda" data-track-position="9">
1227  <div class="eyebrow rv" data-copy="agenda.eyebrow"></div>
1228  <h2 class="big rv" data-copy="agenda.headline"></h2>
1229
1230  <div class="ag-rail">
1231    <div class="ag-stop rv">
1232      <div class="ag-date mono" data-copy="agenda.stn1"></div>
1233      <div class="ag-tag mono" data-copy="agenda.tag1"></div>
1234      <div class="ag-title" data-copy="agenda.summit1"></div>
1235      <ul class="ag-sessions">
1236        <li><span class="ag-num mono">01</span><span class="ag-t"><span data-copy="agenda.t1"></span><span class="ag-sub" data-copy="agenda.p1"></span></span></li>
1237        <li><span class="ag-num mono">02</span><span class="ag-t" data-copy="agenda.t2"></span></li>
1238        <li><span class="ag-num mono">03</span><span class="ag-t" data-copy="agenda.t3"></span></li>
1239        <li><span class="ag-num mono">04</span><span class="ag-t"><span data-copy="agenda.t4"></span><span class="ag-sub" data-copy="agenda.p4"></span></span></li>
1240        <li><span class="ag-num mono">05</span><span class="ag-t" data-copy="agenda.t5"></span></li>
1241      </ul>
1242    </div>
1243
1244    <div class="ag-stop rv">
1245      <div class="ag-date mono" data-copy="agenda.stn2"></div>
1246      <div class="ag-tag mono" data-copy="agenda.tag2"></div>
1247      <div class="ag-title" data-copy="agenda.summit2"></div>
1248      <ul class="ag-sessions">
1249        <li><span class="ag-num mono">01</span><span class="ag-t"><span data-copy="agenda.t6"></span><span class="ag-sub" data-copy="agenda.p6"></span></span></li>
1250        <li><span class="ag-num mono">02</span><span class="ag-t"><span data-copy="agenda.t7"></span><span class="ag-sub" data-copy="agenda.p7"></span></span></li>
1251        <li><span class="ag-num mono">03</span><span class="ag-t"><span data-copy="agenda.t8"></span><span class="ag-sub" data-copy="agenda.p8"></span></span></li>
1252        <li><span class="ag-num mono">04</span><span class="ag-t" data-copy="agenda.t9"></span></li>
1253      </ul>
1254    </div>
1255
1256    <div class="ag-stop ag-stop--finale rv">
1257      <div class="ag-date mono" data-copy="agenda.stn3"></div>
1258      <div class="ag-finale">
1259        <div class="ag-tag mono" data-copy="agenda.tag3"></div>
1260        <div class="ag-finale-title" data-copy="agenda.t10"></div>
1261        <div class="ag-finale-sub mono" data-copy="agenda.p10"></div>
1262      </div>
1263    </div>
1264  </div>
1265
1266  <div class="ag-cta rv">
1267    <div class="ag-note mono" data-copy="agenda.ctaNote"></div>
1268    <div data-copy="agenda.cta"></div>
1269  </div>
1270</section>
1271
1272
1273<!-- ═══ FAQ · TICKET STUBS ═══ -->
1274<section id="faq" data-track-section="faq" data-track-position="10">
1275  <div class="fq-grid">
1276    <header class="fq-head rv">
1277      <div class="eyebrow" data-copy="faq.eyebrow"></div>
1278      <h2 class="big" data-copy="faq.headline"></h2>
1279      <div class="fq-meta mono" data-copy="faq.meta"></div>
1280    </header>
1281
1282    <div class="fq-stubs rv">
1283      <details class="faqItem" data-index="Q·01" data-track-faq="What is a popup city?" data-track-position="1" open>
1284        <summary><span class="fq-q" data-copy="faq.q1"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1285        <div class="fq-body"><p data-copy="faq.a1"></p></div>
1286      </details>
1287      <details class="faqItem" data-index="Q·02" data-track-faq="Where exactly in Kobe?" data-track-position="2">
1288        <summary><span class="fq-q" data-copy="faq.q2"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1289        <div class="fq-body"><p data-copy="faq.a2"></p></div>
1290      </details>
1291      <details class="faqItem" data-index="Q·03" data-track-faq="Do I have to stay the whole month?" data-track-position="3">
1292        <summary><span class="fq-q" data-copy="faq.q3"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1293        <div class="fq-body"><p data-copy="faq.a3"></p></div>
1294      </details>
1295      <details class="faqItem" data-index="Q·04" data-track-faq="Where do I stay?" data-track-position="4">
1296        <summary><span class="fq-q" data-copy="faq.q4"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1297        <div class="fq-body"><p data-copy="faq.a4"></p></div>
1298      </details>
1299      <details class="faqItem" data-index="Q·05" data-track-faq="How do tickets and applications work?" data-track-position="5">
1300        <summary><span class="fq-q" data-copy="faq.q6"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1301        <div class="fq-body"><p data-copy="faq.a6"></p></div>
1302      </details>
1303      <!-- Hidden while showFashionShow is off; numbered last so Q·01–05 stay contiguous -->
1304      <details class="faqItem" data-index="Q·06" data-fashion data-track-faq="What is the Frontier Human Fashion Show?" data-track-position="6">
1305        <summary><span class="fq-q" data-copy="faq.q5"></span><span class="fq-barcode" aria-hidden="true"></span><span class="fq-toggle mono" aria-hidden="true"></span></summary>
1306        <div class="fq-body"><p data-copy="faq.a5"></p></div>
1307      </details>
1308      <p class="fq-foot mono" data-copy="faq.foot"></p>
1309    </div>
1310  </div>
1311</section>
1312
1313<!-- ═══ APPLY ═══ -->
1314<div class="applywrap" id="apply" data-track-section="apply" data-track-position="11">
1315  <img class="bg" src="img/future-city-1440.webp"
1316    srcset="img/future-city-960.webp 960w, img/future-city-1440.webp 1440w, img/future-city-1792.webp 1792w"
1317    sizes="100vw" alt="" aria-hidden="true" loading="lazy" decoding="async" />
1318  <div class="veil"></div>
1319  <section class="apply">
1320    <div class="eyebrow rv" data-copy="apply.eyebrow"></div>
1321    <h2 class="rv" data-copy="apply.headline"></h2>
1322    <p class="sub rv" data-copy="apply.buttons"></p>
1323    <div class="row rv" data-copy="apply.buttons2"></div>
1324    <div class="fine rv" data-copy="apply.footnote"></div>
1325    <div class="fine rv" style="margin-top:10px" data-copy="apply.footnote2"></div>
1326    <div class="fine rv apply-jp" data-copy="apply.footnote3"></div>
1327  </section>
1328</div>
1329
1330<!-- ═══ FOOTER ═══ -->
1331<footer>
1332  <div class="see" data-copy="footer.signoff"></div>
1333  <div class="date" data-copy="footer.date"></div>
1334  <div id="count">
1335    <div><div class="v" id="cd">—</div><div class="k" data-copy="footer.statLabel"></div></div>
1336    <div><div class="v" id="ch">—</div><div class="k" data-copy="footer.statLabel2"></div></div>
1337    <div><div class="v" id="cm">—</div><div class="k" data-copy="footer.statLabel3"></div></div>
1338    <div><div class="v" id="cs">—</div><div class="k" data-copy="footer.statLabel4"></div></div>
1339  </div>
1340  <div class="cdlabel" data-copy="footer.countdownLabel"></div>
1341  <div class="jst" data-copy="footer.jst"></div>
1342  <div class="doors" id="doors" data-copy="footer.links"></div>
1343  <div style="margin-top:36px">
1344    <img class="daruma foot" id="darumaFoot" src="img/daruma.png" alt="Daruma" title="One eye at the start. The other on October 1." />
1345  </div>
1346  <div class="mono" style="margin-top:18px; font-size:9px; letter-spacing:.14em; color:var(--faint)" data-copy="footer.block"></div>
1347</footer>
1348
1349<script>applyCopy();
1350/* Hero word cycle: backspace "frontier tech" and retype the next word from
1351   data-words. Accelerating delete, decelerating type with a little jitter,
1352   a light scramble on alternate letters, 2.4s hold. Pauses when the tab is
1353   hidden or the hero is scrolled away. Off under prefers-reduced-motion. */
1354(function () {
1355  var el = document.querySelector('.heroRot');
1356  if (!el || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1357  var line = el.parentNode, h1 = el.closest('h1');
1358  h1.setAttribute('aria-label', h1.textContent.trim());
1359  var words = el.getAttribute('data-words').split('|');
1360  var pool = words.join('').replace(/\s/g, '');
1361  var wi = 0, n = words[0].length, del = true, inView = true, timer = 0;
1362  function ease(t) { return 1 - Math.pow(1 - t, 3); }
1363  function go(ms) { clearTimeout(timer); timer = setTimeout(tick, ms); }
1364  function tick() {
1365    if (document.hidden || !inView) { timer = null; return; }
1366    var w = words[wi % words.length];
1367    if (del) {
1368      n--; el.textContent = w.slice(0, n); line.classList.add('typing');
1369      if (n === 0) { del = false; wi++; go(220); }
1370      else go(26 + 29 * (n / w.length));
1371      return;
1372    }
1373    n++;
1374    var shown = w.slice(0, n);
1375    if (n < w.length && n % 2 === 0 && w[n - 1] !== ' ') {
1376      el.textContent = shown.slice(0, -1) + pool[Math.floor(Math.random() * pool.length)];
1377      setTimeout(function () { el.textContent = shown; }, 34);
1378    } else el.textContent = shown;
1379    if (n === w.length) { del = true; line.classList.remove('typing'); go(2400); }
1380    else go(92 - 46 * ease(n / w.length) + Math.random() * 26 + (n === 1 ? 90 : 0));
1381  }
1382  function resume() { if (timer === null) go(220); }
1383  document.addEventListener('visibilitychange', resume);
1384  new IntersectionObserver(function (e) { inView = e[0].isIntersecting; resume(); }).observe(h1);
1385  (document.fonts ? document.fonts.ready : Promise.resolve()).then(function () { go(1600); });
1386})();
1387/* Split pillar titles into letters for the staggered rise (runs after
1388   copy hydration; titles stay plain strings in copy.js). */
1389document.querySelectorAll('.knt-title').forEach(function (h) {
1390  var t = h.textContent;
1391  h.setAttribute('aria-label', t);
1392  h.innerHTML = '<span aria-hidden="true">' + t.split('').map(function (c, i) {
1393    return c === ' ' ? ' ' : '<i style="--i:' + i + '">' + c + '</i>';
1394  }).join('') + '</span>';
1395});</script>
1395
1396
1397<script id="luma-checkout"></script>
vendor: 1 bytes, line 1397
1397
1398<script>
1399  const noMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
1400
1401  // The package keeps a normal Luma href as its resilient fallback. Load the
1402  // enhanced overlay only when the package is near view or a pointer/focus
1403  // indicates intent, so its script and stylesheet do not compete with LCP.
1404  const lumaScript = document.getElementById('luma-checkout');
1405  function loadLumaCheckout() {
1406    if (lumaScript.src) return;
1407    lumaScript.src = 'https://embed.lu.ma/checkout-button.js';
1408    lumaScript.async = true;
1409  }
1410  document.querySelectorAll('[data-luma-action="checkout"]').forEach(link => {
1411    link.addEventListener('pointerenter', loadLumaCheckout, { once: true });
1412    link.addEventListener('focus', loadLumaCheckout, { once: true });
1413  });
1414  const packageSection = document.getElementById('summit-package');
1415  if (packageSection) {
1416    const lumaObserver = new IntersectionObserver(entries => {
1417      if (!entries.some(entry => entry.isIntersecting)) return;
1418      loadLumaCheckout();
1419      lumaObserver.disconnect();
1420    }, { rootMargin: '600px 0px' });
1421    lumaObserver.observe(packageSection);
1422  }
1423
1424  // summit + hotel package is capped by spots, not by a date: set
1425  // MIRAI_COPY.js.packageSpotsLeft in copy.js. At 0 it falls back to standard pricing.
1426  if (MIRAI_COPY.js.packageSpotsLeft <= 0) {
1427    const offerLabel = document.querySelector('#summit-package .eyebrow');
1428    const offerPrice = document.querySelector('.bundle-feature__price');
1429    const total = MIRAI_COPY.js.packageSpotsTotal;
1430    if (offerLabel) offerLabel.textContent = MIRAI_COPY.js.packageSoldOutLabel;
1431    if (offerPrice) offerPrice.innerHTML =
1432      MIRAI_COPY.js.packageSoldOutPrice.replace(/\{spotsTotal\}/g, total);
1433    document.querySelectorAll('.bundle-checkout').forEach(a => {
1434      a.textContent = MIRAI_COPY.js.packageSoldOutCta;
1435      a.href = 'https://luma.com/an4zotn9?coupon=SFSH&utm_source=post-hotel-package&utm_campaign=post-hotel-package';
1436      a.dataset.lumaUtmSource = 'post-hotel-package';
1437    });
1438  }
1439
1440  // early-bird window closes Aug 31 (JST): page self-heals to standard pricing
1441  const EB_END = new Date('2026-09-01T00:00:00+09:00').getTime();
1442  if (Date.now() >= EB_END) {
1443    document.documentElement.classList.add('ebOver');
1444    document.querySelectorAll('.ebTag, .left, .ebClock').forEach(el => el.remove());
1445    document.querySelectorAll('.ebPrice, .tracks .t .price').forEach(el => {
1446      const s = el.querySelector('s');
1447      if (s) el.textContent = s.textContent;
1448    });
1449  }
1450
1451  // The poster is the only eager hero asset. Desktop video starts after the
1452  // poster has rendered and the main thread is idle; mobile/data-saver stays static.
1453  const hero = document.querySelector('.hero');
1454  const heroPoster = hero.querySelector('.heroPoster');
1455  const heroVideo = hero.querySelector('.heroVideo');
1456  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
1457  const slowConnection = connection && /(^|-)2g$/.test(connection.effectiveType || '');
1458  const canPlayHeroVideo = !noMotion && matchMedia('(min-width: 761px)').matches &&
1459    !connection?.saveData && !slowConnection;
1460
1461  function loadHeroVideo() {
1462    const source = heroVideo.querySelector('source[data-src]');
1463    if (!source || source.src) return;
1464    source.src = source.dataset.src;
1465    heroVideo.load();
1466    heroVideo.play().then(() => heroVideo.classList.add('playing')).catch(() => {});
1467  }
1468
1469  function scheduleHeroVideo() {
1470    const start = () => loadHeroVideo();
1471    if ('requestIdleCallback' in window) requestIdleCallback(start, { timeout: 2500 });
1472    else setTimeout(start, 1200);
1473  }
1474
1475  if (canPlayHeroVideo) {
1476    if (heroPoster.complete) scheduleHeroVideo();
1477    else heroPoster.addEventListener('load', scheduleHeroVideo, { once: true });
1478  }
1479
1480  new IntersectionObserver(es => es.forEach(e => {
1481    if (!heroVideo.currentSrc) return;
1482    if (e.isIntersecting) heroVideo.play().catch(() => {});
1483    else heroVideo.pause();
1484  }), { threshold: .05 }).observe(hero);
1485
1486  // Fashion-show video gets a source only when its section approaches view.
1487  const fv = document.querySelector('.fashion video');
1488  new IntersectionObserver(es =>
1488 es.forEach(e => {
1489    if (e.isIntersecting) {
1490      const source = fv.querySelector('source[data-src]');
1491      if (source && !source.src) {
1492        source.src = source.dataset.src;
1493        fv.load();
1494      }
1495      if (!noMotion && !connection?.saveData) fv.play().catch(() => {});
1496    } else fv.pause();
1497  }), { rootMargin: '200px 0px', threshold: .01 }).observe(fv);
1498
1499  // reveal-on-scroll
1500  const ro = new IntersectionObserver(es => es.forEach(e => {
1501    if (e.isIntersecting) { e.target.classList.add('in'); ro.unobserve(e.target); }
1502  }), { threshold: .12 });
1503  document.querySelectorAll('.rv').forEach(el => ro.observe(el));
1504
1505  // kanji tap-to-reveal (touch has no title tooltips)
1506  document.querySelectorAll('.kanji span').forEach(k => {
1507    k.setAttribute('tabindex', '0');
1508    k.setAttribute('role', 'button');
1509    k.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); k.click(); } });
1510    k.addEventListener('click', () => {
1511      if (k._orig) return;
1512      k._orig = k.textContent;
1513      k.textContent = k.getAttribute('title').split(' — ')[0];
1514      setTimeout(() => { k.textContent = k._orig; k._orig = null; }, 1500);
1515    });
1516  });
1517
1518  // placeholder links: never navigate, flash an honest note
1519  document.querySelectorAll('a[href="#"]').forEach(a => {
1520    a.addEventListener('click', e => {
1521      e.preventDefault();
1522      if (a._flash) return;
1523      a._flash = a.textContent;
1524      a.textContent = MIRAI_COPY.js.placeholderLink;
1525      const sr = document.getElementById('srStatus');
1526      sr.textContent = '';
1527      requestAnimationFrame(() => { sr.textContent = MIRAI_COPY.js.placeholderLink; });
1528      setTimeout(() => { a.textContent = a._flash; a._flash = null; }, 1400);
1529    });
1530  });
1531
1532  // daruma: knock him over, he rights himself
1533  const df = document.getElementById('darumaFoot');
1534  df.addEventListener('click', () => {
1535    df.classList.remove('wobble');
1536    void df.offsetWidth;
1537    df.classList.add('wobble');
1538  });
1539
1540  // countdown to Oct 1 2026 JST + live JST clock
1541  const t0 = new Date('2026-10-01T00:00:00+09:00').getTime();
1542  const JST_FMT = new Intl.DateTimeFormat('en-GB', {
1543    timeZone: 'Asia/Tokyo', weekday: 'short', hour: '2-digit', minute: '2-digit' });
1544  const pad = n => String(n).padStart(2, '0');
1545  const ebClocks = [...document.querySelectorAll('.ebc')];
1546  function tick() {
1547    if (ebClocks.length) {
1548      let e = Math.max(0, EB_END - Date.now());
1549      const ed = Math.floor(e / 864e5), eh = Math.floor(e % 864e5 / 36e5),
1550            em = Math.floor(e % 36e5 / 6e4), es = Math.floor(e % 6e4 / 1e3);
1551      const t = pad(ed) + 'D · ' + pad(eh) + 'H · ' + pad(em) + 'M · ' + pad(es) + 'S';
1552      ebClocks.forEach(el => { el.textContent = t; });
1553    }
1554    let d = Math.max(0, t0 - Date.now());
1555    if (d === 0) document.getElementById('cdtext').textContent = MIRAI_COPY.js.countdownOpen;
1556    const day = Math.floor(d / 864e5); d -= day * 864e5;
1557    const hr = Math.floor(d / 36e5); d -= hr * 36e5;
1558    const mn = Math.floor(d / 6e4); d -= mn * 6e4;
1559    const sc = Math.floor(d / 1e3);
1560    cd.textContent = day; ch.textContent = pad(hr); cm.textContent = pad(mn); cs.textContent = pad(sc);
1561    jst.textContent = JST_FMT.format(new Date());
1562  }
1563  tick(); setInterval(tick, 1000);
1564</script>
1564
1565
1566</body>
1567</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.