/* ppuzzl.dev */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1e1e2e; color: #cdd6f4; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; }
.init { padding: 4rem 1.5rem 2rem; max-width: 560px; margin: 0 auto; }
.terminal { background: #302d41; border: 1px solid #45475a; border-radius: 8px; padding: 1.5rem; font-family: 'Fira Code', monospace; font-size: 0.8rem; margin-bottom: 1rem; }
.terminal-bar { display: flex; gap: 6px; margin-bottom: 1rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #f38ba8; }
.dot.yellow { background: #f9e2af; }
.dot.green { background: #a6e3a1; }
.dot.inline { width: 6px; height: 6px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.brand { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.3rem; }
.version { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: #45475a; border: 1px solid #45475a; padding: 0.1rem 0.4rem; border-radius: 9999px; }
.command-block { margin-top: 1.5rem; }
.line { margin-bottom: 0.3rem; }
.prompt { color: #a6e3a1; }
.keyword { color: #cba6f7; }
.fn { color: #89b4fa; }
.string { color: #fab387; }
.output { color: #a6e3a1; }
.cursor { display: inline-block; width: 8px; height: 14px; background: #a6e3a1; animation: blink 1s step-end infinite; vertical-align: middle; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.api { max-width: 560px; margin: 0 auto; padding: 2rem 1.5rem; }
.section-label { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.75rem; color: #cba6f7; letter-spacing: 0.1em; margin-bottom: 1rem; text-transform: uppercase; }
.sdk { max-width: 560px; margin: 0 auto; padding: 2rem 1.5rem; }
.lang-tabs { display: flex; gap: 0; margin-bottom: -1px; }
.tab { font-family: 'Fira Code', monospace; font-size: 0.7rem; padding: 0.3rem 0.8rem; border: 1px solid #45475a; border-bottom: none; border-radius: 4px 4px 0 0; color: #6c7086; cursor: pointer; }
.tab.active { color: #cdd6f4; background: #1e1e2e; }
.deploy { max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.status-bar { font-family: 'Fira Code', monospace; font-size: 0.7rem; display: flex; flex-wrap: wrap; gap: 1.5rem; color: #a6e3a1; }
.status-item { white-space: nowrap; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }