* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.navbar {
background: #2c3e50;
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand a {
color: white;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
.nav-links a:hover {
text-decoration: underline;
}
.hero {
background: #1a1a2e;
color: white;
padding: 4rem 2rem;
text-align: center;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.card {
background: white;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: #667eea;
color: white;
text-decoration: none;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
background: #5568d3;
}
footer {
text-align: center;
padding: 2rem;
color: #666;
}
code {
background: #f4f4f4;
padding: 0.2rem 0.4rem;
font-family: 'Courier New', monospace;
}
.hrml-wasm-window {
position: relative;
display: block;
min-height: 160px;
margin: 1rem 0;
border: 1px solid #0f172a;
background: #0f172a;
color: #e2e8f0;
overflow: hidden;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}
.hrml-wasm-window::before {
content: "WASM Window";
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #cbd5e1;
background: rgba(15, 23, 42, 0.75);
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.hrml-wasm-canvas {
padding: 2.25rem 1rem 1rem;
}
.hrml-wasm-error {
margin: 0;
padding: 2.25rem 1rem 1rem;
color: #fecaca;
white-space: pre-wrap;
}