:root {
  --red:#ed0015;
  --yellow:#ffd21a;
  --cyan:#19dbe8;
  --white:#fff;
  --black:#050505;
  --panel:#111;
  --muted:rgba(255,255,255,.68);
  --bar:54px;
  --display:"Bebas Neue","Impact",sans-serif;
  --en:"Oswald",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; color:#fff; background:#000; font-family:var(--jp); }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }
[hidden],.html-slide[hidden] { display:none !important; }
.html-deck { min-height:100%; background:#050505; }
.html-deck::after { content:""; position:fixed; z-index:15; inset:0; pointer-events:none; opacity:.035; background:repeating-linear-gradient(-62deg,transparent 0 4px,#fff 4px 5px); }
.html-header { position:fixed; z-index:30; top:0; right:0; left:0; display:flex; height:var(--bar); align-items:center; padding:0 clamp(14px,2.6vw,40px); background:rgba(0,0,0,.95); border-bottom:2px solid var(--red); }
.html-brand { display:flex; align-items:center; gap:9px; margin-right:auto; text-decoration:none; font:18px var(--display); letter-spacing:.1em; }
.html-brand>span:last-child>span { margin-left:3px; color:var(--red); font:900 10px var(--jp); }
.html-mark { display:flex; width:28px; height:28px; align-items:center; justify-content:center; gap:3px; background:var(--red); clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.html-mark i { width:2px; background:#fff; }
.html-mark i:nth-child(1){height:7px}.html-mark i:nth-child(2){height:13px}.html-mark i:nth-child(3){height:9px}
.html-header>p { margin:0 22px; color:var(--muted); font:700 10px var(--en); letter-spacing:.16em; }
.html-actions { display:flex; gap:7px; }
.html-actions button,.html-actions a { padding:7px 10px; background:transparent; border:1px solid rgba(255,255,255,.2); text-decoration:none; font-size:10px; font-weight:700; }
.html-actions button:hover,.html-actions a:hover { border-color:var(--red); background:rgba(237,0,21,.14); }
.html-slides { position:fixed; inset:var(--bar) 0; }
.html-slide { position:absolute; inset:0; padding:clamp(24px,4vw,62px) clamp(34px,6vw,100px); overflow:hidden; background:#050505; animation:slide-in .28s ease both; }
.html-slide::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(#000,transparent 88%); }
.slide-number { position:absolute; z-index:7; top:22px; right:clamp(34px,6vw,100px); color:rgba(255,255,255,.2); font:31px var(--display); letter-spacing:.08em; }
.corner-badge { position:absolute; z-index:6; top:20px; right:clamp(90px,12vw,190px); color:#fff; font:800 11px var(--en); letter-spacing:.1em; transform:skew(-8deg); }
.corner-badge span { display:block; color:var(--red); font-size:15px; }
.eyebrow { position:relative; z-index:4; display:flex; align-items:center; gap:10px; margin:0 0 2.3vh; color:var(--red); font:800 11px var(--en); letter-spacing:.18em; }
.eyebrow span { width:38px; height:4px; background:var(--red); }
h1,h2 { position:relative; z-index:4; margin:0; line-height:1.08; letter-spacing:-.045em; }
h1 { font-size:clamp(65px,10vw,156px); }
h2 { font-size:clamp(43px,6.3vw,96px); }
h1 em,h2 em { color:var(--red); font-style:normal; }
.section-word { position:relative; z-index:4; margin:0; color:var(--red); font:clamp(48px,7vw,104px)/.8 var(--display); letter-spacing:.01em; }

/* Cover */
.cover-slide { display:flex; align-items:center; }
.cover-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.72) 40%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 45%); }
.cover-content { position:relative; z-index:4; max-width:920px; }
.cover-content h1 { filter:drop-shadow(8px 9px 0 var(--red)); -webkit-text-stroke:3px #fff; color:#050505; transform:skew(-4deg) rotate(-1deg); }
.cover-content h1 em { color:#fff; font-style:normal; }
.cover-content>p:last-child { margin:3vh 0 0; color:#fff; font-size:clamp(17px,2vw,28px); font-weight:800; }
.cover-badge { position:absolute; z-index:6; top:7%; right:5%; display:grid; padding:14px 18px; background:#050505; border:3px solid #fff; box-shadow:6px 6px 0 var(--red); transform:rotate(-4deg); text-align:center; }
.cover-badge b { color:#fff; font:35px var(--display); }
.cover-badge span { color:var(--red); font-weight:900; }
.cover-badge small { color:var(--yellow); font:17px var(--display); }
.heartbeat { position:absolute; z-index:3; width:31%; height:3px; background:var(--red); box-shadow:0 0 14px var(--red); }
.heartbeat::before { content:""; position:absolute; left:43%; bottom:-20px; width:38px; height:38px; border-top:4px solid var(--red); border-right:4px solid var(--red); transform:rotate(-45deg) skew(15deg,15deg); }
.heartbeat--a { right:0; bottom:17%; }
.heartbeat--b { left:-7%; bottom:8%; transform:scale(.65); }

/* Problem and answer */
.statement-slide,.insight-slide { display:flex; flex-direction:column; justify-content:center; }
.statement-slide h2,.insight-slide h2 { max-width:1240px; }
.statement-slide h2 em,.insight-slide h2 em { display:inline-block; margin-top:.18em; }
.statement-copy,.insight-copy { position:relative; z-index:3; max-width:1150px; margin-top:5vh; padding-left:24px; border-left:8px solid var(--red); }
.statement-copy p,.insight-copy p { margin:0 0 1.3em; color:rgba(255,255,255,.84); font-size:clamp(16px,2vw,28px); font-weight:500; line-height:1.7; }
.insight-copy strong { display:block; margin:.2em 0 .7em; color:var(--red); font-size:clamp(22px,3vw,43px); line-height:1.45; }
.question-mark,.answer-mark { position:absolute; right:10%; bottom:5%; color:rgba(255,255,255,.13); font:clamp(260px,35vw,520px)/.7 var(--display); }
.answer-mark { color:rgba(237,0,21,.16); }

/* Flow */
.flow-slide { display:flex; flex-direction:column; justify-content:center; }
.flow-diagram { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:38px; align-items:center; margin:5vh 0 3vh; }
.flow-diagram article { position:relative; min-height:210px; padding:20px 15px; background:#090909; border:3px solid #fff; box-shadow:6px 6px 0 var(--red); text-align:center; }
.flow-diagram article small { color:var(--red); font:800 10px var(--en); letter-spacing:.16em; }
.flow-icon { display:grid; width:67px; height:67px; place-items:center; margin:18px auto; background:var(--red); font:27px var(--display); transform:rotate(-3deg); }
.flow-diagram h3 { margin:0; font-size:clamp(18px,2vw,29px); }
.flow-diagram p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.flow-diagram>i { position:absolute; top:43%; color:#fff; font-size:30px; font-style:normal; }
.flow-diagram>i:nth-of-type(1){left:23.8%}.flow-diagram>i:nth-of-type(2){left:49%}.flow-diagram>i:nth-of-type(3){left:74.2%}
.function-box { position:relative; z-index:3; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:15px 20px; border:2px solid var(--red); box-shadow:7px 7px 0 var(--red); }
.function-box b { color:var(--red); font:30px var(--display); }
.function-box p { margin:0; color:rgba(255,255,255,.86); font-size:13px; line-height:1.7; }

/* Sensors */
.sensor-slide { display:flex; flex-direction:column; justify-content:center; }
.sensor-slide h2 { margin:3vh 0 1vh; font-size:clamp(31px,4vw,61px); font-weight:500; }
.sensor-layout { position:relative; z-index:3; display:grid; grid-template-columns:1fr .78fr 1fr; gap:25px; align-items:center; margin-top:2vh; }
.sensor-list { display:grid; gap:22px; }
.sensor-list span { position:relative; padding:13px 10px 13px 68px; border-bottom:2px solid var(--red); font-size:clamp(16px,2vw,29px); font-weight:800; }
.sensor-list b { position:absolute; left:5px; color:var(--red); font:38px var(--display); }
.sensor-list--right span { padding-right:10px; }
.hand-visual { position:relative; height:min(49vh,480px); background:#050505; border:6px solid #fff; border-radius:46% 46% 18% 18% / 38% 38% 12% 12%; box-shadow:0 0 0 4px #050505,0 0 0 6px var(--red); clip-path:polygon(19% 100%,14% 53%,4% 31%,9% 23%,20% 45%,16% 7%,25% 2%,34% 39%,34% 2%,44% 0,50% 39%,54% 4%,64% 3%,64% 42%,71% 10%,81% 14%,77% 51%,92% 27%,100% 36%,86% 65%,82% 100%); }
.hand-visual span { position:absolute; right:0; bottom:12%; left:0; color:rgba(255,255,255,.22); font:46px var(--display); text-align:center; }

/* System */
.system-slide { display:flex; flex-direction:column; justify-content:center; }
.system-zones { position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; margin:3vh 0 12px; color:var(--cyan); font:800 12px var(--en); letter-spacing:.14em; text-align:center; }
.system-zones span:last-child { color:#6fa6ff; }
.system-flow { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.system-card { position:relative; min-height:225px; padding:25px 18px; background:#eefcff; color:#052a31; border:4px solid #168a97; box-shadow:7px 7px 0 rgba(25,219,232,.35); }
.system-card small { font:800 9px var(--en); letter-spacing:.14em; }
.system-card h3 { margin:45px 0 8px; color:#0a6471; font-size:clamp(18px,2vw,27px); }
.system-card p { margin:0; font-size:12px; font-weight:700; line-height:1.55; }
.card--debug { border-color:#7348c4; color:#28184b; box-shadow:7px 7px 0 rgba(115,72,196,.34); }
.card--debug h3 { color:#6132aa; }
.card--api,.card--view { border-color:#2874d0; color:#082e5d; box-shadow:7px 7px 0 rgba(40,116,208,.34); }
.card--api h3,.card--view h3 { color:#135fae; }
.system-flow>i { position:absolute; top:43%; color:#fff; font-size:27px; font-style:normal; }
.system-flow>i:nth-of-type(1){left:23.8%}.system-flow>i:nth-of-type(2){left:49%}.system-flow>i:nth-of-type(3){left:74.2%}
.system-note { position:relative; z-index:3; margin:3vh 0 0; padding:12px; border:2px solid var(--yellow); color:var(--yellow); font-size:13px; font-weight:700; text-align:center; }

/* Persona */
.persona-slide { display:flex; flex-direction:column; justify-content:center; }
.persona-intro { position:relative; z-index:3; margin:4vh 0 2vh; font-size:clamp(17px,2vw,28px); }
.persona-layout { position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; min-height:48vh; border:3px solid var(--red); box-shadow:8px 8px 0 var(--red); }
.persona-layout ul { display:grid; align-content:center; gap:13px; margin:0; padding:25px 36px 25px 68px; list-style:none; }
.persona-layout li { position:relative; font-size:clamp(16px,1.8vw,26px); }
.persona-layout li::before { content:""; position:absolute; top:.42em; left:-32px; width:18px; height:18px; background:var(--red); transform:rotate(45deg); }
.persona-visual { position:relative; display:grid; place-items:center; overflow:hidden; }
.persona-visual img { position:relative; z-index:2; width:min(78%,360px); max-height:45vh; object-fit:contain; mix-blend-mode:screen; filter:drop-shadow(0 12px 24px rgba(237,0,21,.4)); }
.persona-aura { position:absolute; width:65%; aspect-ratio:1; border:2px solid var(--red); border-radius:50%; box-shadow:0 0 40px rgba(237,0,21,.35),inset 0 0 40px rgba(237,0,21,.2); }

/* Challenges */
.challenge-slide { display:flex; flex-direction:column; justify-content:center; }
.challenge-slide h2 { font-size:clamp(45px,6vw,88px); }
.challenge-list { position:relative; z-index:3; display:grid; gap:13px; max-width:1120px; margin-top:4vh; }
.challenge-list article { display:grid; grid-template-columns:58px 1fr; gap:16px; padding:9px 16px; border-left:8px solid var(--red); background:linear-gradient(90deg,rgba(237,0,21,.12),transparent); }
.challenge-list b { color:var(--red); font:39px var(--display); }
.challenge-list h3 { margin:0 0 4px; color:var(--red); font-size:clamp(17px,1.7vw,25px); font-weight:500; }
.challenge-list p { margin:0; color:rgba(255,255,255,.86); font-size:clamp(13px,1.35vw,19px); line-height:1.55; }
.challenge-mascot { position:absolute; z-index:2; right:2%; bottom:-4%; width:min(33vw,430px); opacity:.48; filter:drop-shadow(0 0 25px rgba(255,255,255,.16)); }

/* End */
.try-slide { display:grid; place-items:center; align-content:center; text-align:center; }
.try-slide h2 { font:clamp(110px,19vw,290px)/.8 var(--display); letter-spacing:-.03em; }
.try-slide p { position:relative; z-index:3; margin:5vh 0 2.5vh; color:var(--muted); font-size:clamp(16px,2vw,28px); font-weight:700; }
.try-slide a { position:relative; z-index:3; padding:13px 20px; background:var(--red); border:3px solid #fff; box-shadow:7px 7px 0 #fff; font:800 13px var(--en); letter-spacing:.12em; text-decoration:none; }
.try-lines { position:absolute; inset:0; opacity:.35; background:conic-gradient(from 45deg at 50% 50%,transparent 0 5%,var(--red) 5% 7%,transparent 7% 13%,#fff 13% 14%,transparent 14% 27%,var(--red) 27% 30%,transparent 30% 100%); }

/* Controls and overview */
.html-controls { position:fixed; z-index:31; right:0; bottom:0; left:0; display:flex; height:var(--bar); align-items:center; justify-content:center; gap:15px; background:#000; border-top:1px solid rgba(255,255,255,.14); }
.html-controls button { width:38px; height:31px; background:transparent; border:1px solid rgba(255,255,255,.2); }
.html-controls button:hover { background:var(--red); border-color:var(--red); }
.html-controls button:disabled { opacity:.24; cursor:default; }
.html-progress { width:min(34vw,360px); height:3px; background:rgba(255,255,255,.14); }
.html-progress i { display:block; width:11.11%; height:100%; background:var(--red); transition:width .2s ease; }
.html-controls>span { font:12px var(--en); letter-spacing:.12em; }
.html-controls b { color:var(--red); font-size:16px; }
.html-hint { position:fixed; z-index:32; right:20px; bottom:18px; margin:0; color:rgba(255,255,255,.3); font:9px var(--en); letter-spacing:.1em; }
.overview { position:fixed; z-index:50; inset:0; overflow:auto; padding:24px; background:rgba(0,0,0,.98); }
.overview header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.overview header strong { font:20px var(--en); letter-spacing:.12em; }
.overview header button { padding:8px 12px; background:transparent; border:1px solid rgba(255,255,255,.25); }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1400px; margin:auto; }
.overview-card { position:relative; aspect-ratio:841.89/595.276; padding:18px; background:#111; border:2px solid rgba(255,255,255,.16); text-align:left; }
.overview-card:hover { border-color:var(--red); }
.overview-card b { display:block; color:var(--red); font:32px var(--display); }
.overview-card span { font-size:15px; font-weight:800; }
@keyframes slide-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

@media (max-width:900px) {
  .html-header>p,.html-actions [data-overview],.html-hint { display:none; }
  .html-slide { padding:24px; overflow:auto; }
  .slide-number { top:14px; right:24px; font-size:23px; }
  .corner-badge { display:none; }
  .flow-diagram,.system-flow { grid-template-columns:1fr 1fr; gap:12px; }
  .flow-diagram>i,.system-flow>i { display:none; }
  .flow-diagram article,.system-card { min-height:150px; }
  .sensor-layout { grid-template-columns:1fr 1fr; }
  .hand-visual { grid-row:1/3; grid-column:2; }
  .sensor-list--right { grid-column:1; }
  .challenge-mascot { opacity:.23; }
  .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .html-brand>span:last-child,.html-actions a { display:none; }
  .html-slide { padding:18px 15px; }
  h1 { font-size:58px; }
  h2 { font-size:39px; }
  .cover-badge { display:none; }
  .statement-copy,.insight-copy { margin-top:3vh; }
  .flow-diagram,.system-flow,.sensor-layout,.persona-layout { grid-template-columns:1fr; }
  .hand-visual { display:none; }
  .sensor-list--right { grid-column:auto; }
  .persona-layout ul { padding:22px 24px 22px 56px; }
  .persona-visual { min-height:260px; }
  .function-box { grid-template-columns:1fr; }
  .overview-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .html-slide { animation:none; }
  .html-progress i { transition:none; }
}