/* Shared with the portfolio: the same palette, type, and generous rhythm. */
@import url('./style.css?v=project-apps-9');
.app-shell { width: min(1200px, calc(100% - 64px)); margin: auto; }
.app-nav { min-height: 88px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); font-size: 12px; }
.app-nav .wordmark { margin-right: auto; }
.app-nav a { text-decoration: none; }
.app-nav button { background: none; border: 0; padding: 8px 0; color: var(--muted); font-size: 12px; }
.app-intro { padding: 64px 0 40px; }
.app-intro h1 { font-size: clamp(40px, 5vw, 64px); margin: 12px 0 20px; }
.app-eyebrow { font-size: 12px; color: var(--muted); }
.app-intro p { max-width: 620px; color: var(--muted); }
.app-footer { padding: 32px 0; border-top: 1px solid var(--line); margin-top: 64px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-button { display: inline-block; border: 1px solid var(--line); border-radius: 0; background: transparent; padding: 10px 18px; font: inherit; color: var(--text); cursor: pointer; text-decoration: none; }
.app-button:hover { border-color: var(--text); }
.app-button.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 0; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width: 600px) { .app-shell { width: calc(100% - 36px); } .app-nav { gap: 16px; flex-wrap: wrap; padding: 20px 0; } .app-nav .wordmark { width: 100%; } .app-intro { padding: 40px 0 32px; } }