-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
451 lines (447 loc) · 26.5 KB
/
Copy pathindex.html
File metadata and controls
451 lines (447 loc) · 26.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html class="scroll-smooth" lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>M-Step | Arm TrustZone-M Single-Stepping Framework</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.hero-gradient {
background: radial-gradient(circle at center, #1a365d 0%, #0F172A 100%);
}
.bento-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.1);
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-fixed-dim": "#00daf3",
"electric-cyan": "#00D2FF",
"secondary-container": "#00e3fd",
"primary": "#002045",
"alert-amber": "#F59E0B",
"deep-navy": "#0F172A",
"tertiary-container": "#30363c",
"on-background": "#191c1e",
"primary-container": "#1a365d",
"success-green": "#10B981",
"outline-variant": "#c4c6cf",
"on-primary": "#ffffff",
"tertiary": "#1b2127",
"background": "#f7f9fb",
"surface-container": "#eceef0",
"surface": "#f7f9fb",
"on-surface": "#191c1e",
"on-surface-variant": "#43474e"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"margin-desktop": "64px",
"margin-mobile": "16px",
"unit": "4px",
"max-width": "1280px",
"gutter": "24px"
},
"fontFamily": {
"code-sm": ["JetBrains Mono"],
"headline-md": ["Inter"],
"display-lg": ["Inter"],
"body-lg": ["Inter"],
"label-caps": ["Inter"],
"headline-lg": ["Inter"]
},
"fontSize": {
"code-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-surface font-body-md selection:bg-electric-cyan/30" id="top">
<!-- Top Navigation Bar -->
<header class="bg-primary fixed top-0 w-full z-50 shadow-md">
<div class="flex justify-between items-center px-margin-desktop h-16 w-full max-w-max-width mx-auto">
<div class="font-headline-lg text-headline-lg font-bold text-on-primary tracking-tight">M-Step</div>
<nav class="hidden md:flex gap-8">
<a class="text-on-primary/80 hover:text-electric-cyan font-label-caps text-label-caps transition-all" href="#top">Home</a>
<a class="text-on-primary/80 hover:text-electric-cyan font-label-caps text-label-caps transition-all" href="#research">Research</a>
<a class="text-on-primary/80 hover:text-electric-cyan font-label-caps text-label-caps transition-all" href="#challenges">Challenges</a>
<a class="text-on-primary/80 hover:text-electric-cyan font-label-caps text-label-caps transition-all" href="#use-cases">Use Cases</a>
<a class="text-on-primary/80 hover:text-electric-cyan font-label-caps text-label-caps transition-all" href="#qa">Q&A</a>
</nav>
<a class="bg-on-primary text-primary px-6 py-2 font-label-caps text-label-caps font-bold rounded-lg hover:bg-electric-cyan transition-all transform active:scale-95" href="https://github.com">GitHub</a>
</div>
</header>
<main>
<!-- Hero Section (Full Viewport Constraint) -->
<section class="hero-gradient text-on-primary h-screen flex flex-col justify-center relative overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="grid grid-cols-12 h-full w-full">
<div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div><div class="border-r border-on-primary/20 h-full"></div>
</div>
</div>
<div class="max-w-max-width mx-auto px-margin-desktop text-center relative z-10 w-full">
<div class="mb-8 flex justify-center">
<img alt="M-Step Logo" class="w-48 h-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVVBwDjhuXWAoaQaekHzTio5ihJ2ZeCFo97DoKMX9A-yd8pofF3HfNgCMYg0xU_By-m27tPav3PWfKq2UouBwN9l-7vecvm5QM95JHIQS7Yx87yVpm9bKJ5Fbh-Px6ia9ijwqpQ3Bgr7CAiEOHvhMngGR7fiSWK8ssJsFSHcstjIS3OiWCQLs248b6gOqzm4aoEyh8glGMAJT8dka3OUHIWrMPUzFGMMk33DVztie3pyPrioPjDRWkSuUK3S_dW1OXE27Z-KCJaiCtbvQ" style="filter: brightness(0) invert(1);">
</div>
<h1 class="font-display-lg text-display-lg mb-4">M-Step</h1>
<p class="font-body-lg text-body-lg max-w-2xl mx-auto opacity-90 mb-12">
A Single-Stepping Framework for Side-Channel Analysis on Arm TrustZone-M
</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="bg-on-primary text-deep-navy px-8 py-3 rounded-lg font-bold flex items-center gap-2 hover:bg-electric-cyan transition-all">
<span class="material-symbols-outlined">download</span>
Read the Paper
</button>
<button class="border border-on-primary text-on-primary px-8 py-3 rounded-lg font-bold flex items-center gap-2 hover:bg-on-primary/10 transition-all">
<span class="material-symbols-outlined">format_quote</span>
Cite
</button>
<button class="border border-on-primary text-on-primary px-8 py-3 rounded-lg font-bold flex items-center gap-2 hover:bg-on-primary/10 transition-all">
<span class="material-symbols-outlined">code</span>
GitHub
</button>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce opacity-60">
<span class="text-[10px] font-label-caps uppercase tracking-widest">Scroll to explore</span>
<span class="material-symbols-outlined">keyboard_double_arrow_down</span>
</div>
</section>
<!-- Recognition Badges Bar -->
<section class="bg-surface-container py-6">
<div class="max-w-max-width mx-auto px-margin-desktop flex flex-wrap items-center justify-center gap-6">
<div class="flex flex-wrap gap-3">
<span class="bg-deep-navy text-on-primary px-4 py-1 rounded-full text-xs font-bold">USENIX Security '26</span>
<span class="bg-success-green/10 text-success-green border border-success-green/20 px-4 py-1 rounded-full text-xs font-bold">AE: Available</span>
<span class="bg-success-green/10 text-success-green border border-success-green/20 px-4 py-1 rounded-full text-xs font-bold">AE: Functional</span>
<span class="bg-success-green/10 text-success-green border border-success-green/20 px-4 py-1 rounded-full text-xs font-bold">AE: Reproduced</span><span class="bg-alert-amber text-deep-navy px-4 py-1 rounded-full text-xs font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-sm">star</span>
Black Hat USA '26 — Accepted
</span>
</div>
</div>
</section>
<!-- Framework Explanation -->
<section class="py-24 bg-white" id="research">
<div class="max-w-max-width mx-auto px-margin-desktop">
<div class="grid md:grid-cols-2 gap-16 items-start">
<div>
<h2 class="font-headline-lg text-headline-lg text-primary mb-6">The First Single-Stepping Framework for Arm TrustZone-M</h2>
<div class="space-y-4 text-on-surface-variant font-body-md">
<p class="">M-Step is the first framework enabling <em class="italic">single-stepping</em> — instruction-granular observation — inside TrustZone-M's Secure World.</p>
<p class="">By carefully profiling previously undocumented Cortex-M interrupt-handling behavior, M-Step allows an attacker controlling the untrusted operating system to <strong>pause secure-world execution one instruction at a time</strong> and measure tiny timing differences that reveal what the secret code is doing.</p>
<p class="">This technique, previously limited to high-end server processors via frameworks like <span class="text-primary font-bold">SGX-Step</span>, is now brought to the billions of microcontrollers powering the Internet of Things.</p>
</div>
</div>
<div class="grid grid-cols-1 gap-6">
<div class="bento-card bg-surface-container-low p-6 border border-outline-variant rounded-xl border-l-4 border-l-primary">
<div class="flex items-center gap-3 mb-3">
<span class="material-symbols-outlined text-primary">lock_open</span>
<h3 class="font-bold text-primary">Atomic Instructions</h3>
</div>
<p class="text-sm text-on-surface-variant">Cannot be interrupted during execution. M-Step schedules the interrupt immediately afterwards to advance exactly one instruction.</p>
</div>
<div class="bento-card bg-surface-container-low p-6 border border-outline-variant rounded-xl border-l-4 border-l-electric-cyan">
<div class="flex items-center gap-3 mb-3">
<span class="material-symbols-outlined text-electric-cyan">pause_circle</span>
<h3 class="font-bold text-primary">Resumable Instructions</h3>
</div>
<p class="text-sm text-on-surface-variant">Can be interrupted mid-execution and then resumed. M-Step exploits this to achieve precise intra-instruction observations.</p>
</div>
<div class="bento-card bg-surface-container-low p-6 border border-outline-variant rounded-xl border-l-4 border-l-alert-amber">
<div class="flex items-center gap-3 mb-3">
<span class="material-symbols-outlined text-alert-amber">refresh</span>
<h3 class="font-bold text-primary">Restartable Instructions</h3>
</div>
<p class="text-sm text-on-surface-variant">Are restarted from scratch when interrupted. M-Step times its interrupt to the final execution cycle for deterministic progress.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Challenges Section -->
<section class="py-24 bg-surface" id="challenges">
<div class="max-w-max-width mx-auto px-margin-desktop">
<div class="max-w-3xl">
<h2 class="font-headline-lg text-headline-lg text-primary mb-8">Technical Deep-Dive: Interrupt Complexity</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12">
The core challenge on Cortex-M is that the interrupt-handling mechanism is highly optimized for real-time responsiveness. Unlike large cores, multi-cycle instructions may be abandoned or paused mid-execution.
</p>
</div>
<div class="bg-white p-8 rounded-2xl border border-outline-variant shadow-sm overflow-hidden">
<div class="flex flex-col md:flex-row gap-8">
<div class="flex-1">
<h4 class="font-label-caps text-label-caps text-on-surface-variant mb-6 uppercase tracking-widest">Instruction Lifecycle Diagram</h4>
<div class="space-y-8 font-code-sm text-xs">
<div class="flex items-center gap-4">
<span class="w-24 font-bold text-primary">Atomic</span>
<div class="flex gap-1 items-center">
<div class="w-12 h-6 bg-primary-container rounded"></div>
<div class="w-12 h-6 bg-primary-container rounded"></div>
<div class="h-8 w-1 bg-error mx-1"></div>
<div class="w-8 h-6 bg-alert-amber rounded"></div>
<div class="w-8 h-6 bg-alert-amber rounded"></div>
<span class="ml-4 text-on-surface-variant italic">deferred — completes first</span>
</div>
</div>
<div class="flex items-center gap-4">
<span class="w-24 font-bold text-primary">Resumable</span>
<div class="flex gap-1 items-center">
<div class="w-12 h-6 bg-primary-container rounded"></div>
<div class="h-8 w-1 bg-error mx-1"></div>
<div class="w-8 h-6 bg-alert-amber rounded"></div>
<div class="w-12 h-6 bg-electric-cyan rounded"></div>
<span class="ml-4 text-on-surface-variant italic">suspended, then resumed</span>
</div>
</div>
<div class="flex items-center gap-4">
<span class="w-24 font-bold text-primary">Restartable</span>
<div class="flex gap-1 items-center">
<div class="w-12 h-6 bg-primary-container rounded"></div>
<div class="h-8 w-1 bg-error mx-1"></div>
<div class="w-12 h-6 bg-primary-container rounded border-2 border-primary-container border-dashed bg-transparent"></div>
<div class="w-12 h-6 bg-primary-container rounded"></div>
<span class="ml-4 text-on-surface-variant italic">abandoned & restarted</span>
</div>
</div>
</div>
</div>
<div class="md:w-1/3 bg-surface-container p-6 rounded-xl">
<h4 class="font-bold text-primary mb-4 flex items-center gap-2">
<span class="material-symbols-outlined">info</span>
Deterministic Advance
</h4>
<p class="text-sm text-on-surface-variant">
By dynamically adapting interrupt timing to whichever instruction type the victim is executing, M-Step achieves reliable, deterministic single-stepping of production code without prior knowledge of the victim binary.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Use Cases / Interactive Demo -->
<section class="py-24 bg-white" id="use-cases">
<div class="max-w-max-width mx-auto px-margin-desktop">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<h2 class="font-headline-lg text-headline-lg text-primary mb-6">Breaking Real-World Cryptography</h2>
<div class="space-y-6 text-on-surface-variant">
<p class="">We demonstrate a single-trace attack that recovers a full <strong class="text-deep-navy">RSA private key</strong> from a <em class="italic">single execution</em> of Mbed TLS on an Arm Cortex-M33 microcontroller.</p>
<div class="bg-primary-container/10 p-4 border-l-4 border-primary rounded-r-lg">
<span class="bg-primary text-on-primary px-3 py-1 text-xs font-bold rounded mr-2">CVE-2025-54764</span>
<p class="text-sm mt-2">Vulnerability identified in the Binary Extended Euclidean Algorithm (BEEA) used in modular arithmetic.</p>
</div>
<p class="">This affects billions of devices where Mbed TLS acts as the cryptographic backbone for Trusted Firmware-M (TF-M).</p>
</div>
</div>
<!-- Interactive Demo Representation -->
<div class="bg-deep-navy p-6 rounded-2xl shadow-xl">
<div class="flex justify-between items-center mb-6">
<span class="text-electric-cyan text-xs font-code-sm tracking-widest uppercase">Interactive Analysis Demo</span>
<div class="flex gap-2">
<div class="w-2 h-2 rounded-full bg-error"></div>
<div class="w-2 h-2 rounded-full bg-alert-amber"></div>
<div class="w-2 h-2 rounded-full bg-success-green"></div>
</div>
</div>
<div class="grid grid-cols-12 gap-4">
<!-- Keypad -->
<div class="col-span-4 bg-surface/5 p-4 rounded-xl border border-on-primary/10">
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="h-1 bg-success-green/40 rounded"></div>
<div class="h-1 bg-success-green/40 rounded"></div>
<div class="h-1 bg-success-green/40 rounded"></div>
</div>
<div class="grid grid-cols-3 gap-2">
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">1</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">2</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">3</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">4</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">5</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">6</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">7</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">8</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">9</div>
<div class="aspect-square bg-error/20 rounded flex items-center justify-center text-on-primary text-[10px] uppercase font-bold">CLR</div>
<div class="aspect-square bg-on-primary/10 rounded flex items-center justify-center text-on-primary text-xs cursor-pointer hover:bg-on-primary/20">0</div>
<div class="aspect-square bg-success-green/20 rounded flex items-center justify-center text-on-primary text-[10px] uppercase font-bold">OK</div>
</div>
</div>
<!-- Trace Visualizer -->
<div class="col-span-8 bg-surface/5 p-4 rounded-xl border border-on-primary/10 relative overflow-hidden">
<div class="text-[10px] text-electric-cyan font-code-sm mb-2">M-STEP INTERRUPT-LATENCY TRACE</div>
<div class="h-32 border-l border-b border-on-primary/20 relative flex items-end px-2">
<div class="flex-1 flex items-end gap-1 h-full pb-1">
<div class="w-1 bg-electric-cyan/40 h-[20%]"></div>
<div class="w-1 bg-electric-cyan/60 h-[45%]"></div>
<div class="w-1 bg-electric-cyan/80 h-[10%]"></div>
<div class="w-1 bg-electric-cyan h-[80%] animate-pulse"></div>
<div class="w-1 bg-electric-cyan/40 h-[30%]"></div>
<div class="w-1 bg-electric-cyan/60 h-[55%]"></div>
<div class="w-1 bg-electric-cyan/30 h-[15%]"></div>
<div class="w-1 bg-electric-cyan/70 h-[90%]"></div>
<div class="w-1 bg-electric-cyan/50 h-[40%]"></div>
</div>
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<span class="text-[10px] text-on-primary/20 font-code-sm">Capturing Trace...</span>
</div>
</div>
<div class="flex justify-between text-[8px] text-on-primary/40 mt-1 uppercase">
<span class="">Instructions</span>
<span class="">Cycles</span>
</div>
</div>
</div>
<p class="text-[11px] text-on-primary/60 mt-4 italic">
Try it: press any key on the simulated secure keypad. M-Step measures the interrupt latency of each instruction executed inside the TrustZone-M secure world.
</p>
</div>
</div>
</div>
</section>
<!-- Q&A Accordion Section -->
<section class="py-24 bg-surface" id="qa">
<div class="max-w-max-width mx-auto px-margin-desktop">
<h2 class="font-headline-lg text-headline-lg text-primary mb-12">Questions and Answers</h2>
<div class="max-w-3xl mx-auto space-y-2">
<!-- Q&A Item 1 -->
<div class="group border border-outline-variant bg-white rounded-lg overflow-hidden transition-all">
<button class="w-full flex justify-between items-center p-6 text-left hover:bg-surface-container transition-all" onclick="toggleAccordion(this)">
<span class="font-bold text-primary">Who conducted this research?</span>
<span class="material-symbols-outlined transition-transform group-[.active]:rotate-180">expand_more</span>
</button>
<div class="hidden px-6 pb-6 text-on-surface-variant text-sm">
<p class="mb-4">The research was conducted by a team of four researchers from <strong>Universidade do Minho</strong> and <strong>KU Leuven</strong>:</p>
<ul class="list-disc ml-5 space-y-1">
<li class="">Cristiano Rodrigues (Centro ALGORITMI, Universidade do Minho)</li>
<li class="">Marton Bognar (DistriNet, KU Leuven)</li>
<li class="">Sandro Pinto (Centro ALGORITMI, Universidade do Minho)</li>
<li class="">Jo Van Bulck (DistriNet, KU Leuven)</li>
</ul>
</div>
</div>
<!-- Q&A Item 2 -->
<div class="group border border-outline-variant bg-white rounded-lg overflow-hidden transition-all">
<button class="w-full flex justify-between items-center p-6 text-left hover:bg-surface-container transition-all" onclick="toggleAccordion(this)">
<span class="font-bold text-primary">Is the M-Step code available?</span>
<span class="material-symbols-outlined transition-transform">expand_more</span>
</button>
<div class="hidden px-6 pb-6 text-on-surface-variant text-sm">
<p class="">Yes, all framework code, attack scripts, and evaluation data are available on our GitHub repository. We encourage researchers to build upon our findings.</p>
</div>
</div>
<!-- Q&A Item 3 -->
<div class="group border border-outline-variant bg-white rounded-lg overflow-hidden transition-all">
<button class="w-full flex justify-between items-center p-6 text-left hover:bg-surface-container transition-all" onclick="toggleAccordion(this)">
<span class="font-bold text-primary">Where can I learn more?</span>
<span class="material-symbols-outlined transition-transform">expand_more</span>
</button>
<div class="hidden px-6 pb-6 text-on-surface-variant text-sm">
<ul class="list-disc ml-5 space-y-2">
<li class=""><a class="text-primary hover:underline" href="#">Research paper</a> — full technical details (USENIX Security '26)</li>
<li class=""><a class="text-primary hover:underline" href="#">GitHub repository</a> — open-source framework and attack code</li>
<li class=""><a class="text-primary hover:underline" href="#">Mbed TLS security advisory</a> — CVE-2025-54764</li>
<li class=""><a class="text-primary hover:underline" href="#">Black Hat USA '26 talk</a> — "Tiny Chips, Big Leaks: Breaking TrustZone-M with Single-Stepping Attacks"</li>
</ul>
</div>
</div>
<!-- Q&A Item 4 -->
<div class="group border border-outline-variant bg-white rounded-lg overflow-hidden transition-all">
<button class="w-full flex justify-between items-center p-6 text-left hover:bg-surface-container transition-all" onclick="toggleAccordion(this)">
<span class="font-bold text-primary">What is the potential impact of M-Step?</span>
<span class="material-symbols-outlined transition-transform">expand_more</span>
</button>
<div class="hidden px-6 pb-6 text-on-surface-variant text-sm">
<p class="">M-Step fundamentally shifts the security assumptions for low-power embedded devices. It proves that software-only side-channel attacks, once thought to be the domain of high-end cloud systems, are now a critical threat to the billions of microcontrollers used in industrial, medical, and consumer IoT.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-container border-t border-outline-variant">
<div class="max-w-max-width mx-auto px-margin-desktop py-16">
<div class="flex flex-col md:flex-row justify-between items-start gap-12">
<div class="max-w-md">
<div class="font-headline-md text-headline-md font-bold text-primary mb-4">M-Step</div>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">
A research project focused on exposing architectural side-channels in modern microcontrollers. Conducted at Centro ALGORITMI & DistriNet.
</p>
<div class="text-[10px] font-label-caps text-on-surface-variant/60 uppercase tracking-widest">
© 2024 M-Step Research Project. Conducted at Centro ALGORITMI & DistriNet.
</div>
</div>
<div class="grid grid-cols-2 gap-12">
<div>
<h5 class="font-label-caps text-label-caps text-primary mb-4">RESOURCES</h5>
<ul class="space-y-3">
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">Research Paper</a></li>
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">GitHub Repository</a></li>
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">CVE-2025-54764</a></li>
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">USENIX Security '26</a></li>
</ul>
</div>
<div>
<h5 class="font-label-caps text-label-caps text-primary mb-4">COLLABORATION</h5>
<ul class="space-y-3">
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">U. Minho</a></li>
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">KU Leuven</a></li>
<li class=""><a class="text-on-surface-variant text-sm hover:text-secondary transition-colors" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
function toggleAccordion(button) {
const group = button.closest('.group');
const content = button.nextElementSibling;
const icon = button.querySelector('.material-symbols-outlined');
const isActive = group.classList.contains('active');
if (!isActive) {
group.classList.add('active');
content.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
group.classList.remove('active');
content.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
}
}
document.querySelectorAll('.aspect-square.cursor-pointer').forEach(btn => {
btn.addEventListener('click', () => {
btn.style.transform = 'scale(0.9)';
setTimeout(() => btn.style.transform = 'scale(1)', 100);
});
});
</script>
</body></html>