/* mCard consumer shell — Teenage Engineering inspired: orange-cream, flat, monospace. */ :root { color-scheme: light; --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --bg: #ece7db; --panel: #f7f4ec; --panel2: #e6e0d1; --field: #fbf9f1; --text: #1a1714; --muted: #8c8576; --accent: #ff4f00; --accent-ink: #ffffff; --accent2: #ff7a3c; --danger: #d23a2a; --ok: #3f9e57; --line: #cdc6b4; --hair: #1a1714; --topbar-bg: rgba(247, 244, 236, 0.85); --radius: 10px; /* Motion tokens — expo-out for movement, a restrained spring for tactile bits. */ --dur-1: 120ms; /* press / hover */ --dur-2: 180ms; /* toggles, popover, modal */ --dur-3: 260ms; /* page / section enter */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--font); } /* Keep monospace where digits must stay crisp/aligned (stats, battery, versions, code). */ .dstat-kv b, .devbar-bat, .vid-meta, .cb-status, .trim, code, pre, .mono, textarea.mono { font-family: var(--font-mono); } /* Dark theme — same TE palette, inverted surfaces. Toggled via . */ [data-theme="dark"] { color-scheme: dark; --bg: #14110d; --panel: #1e1a15; --panel2: #2a251e; --field: #211d17; --text: #f3efe6; --muted: #9d9484; --accent: #ff5a1a; --accent-ink: #ffffff; --accent2: #ff7a3c; --danger: #ff6b5a; --ok: #5fbf78; --line: #38322a; --hair: #6a6253; --topbar-bg: rgba(30, 26, 21, 0.85); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } /* ── Shell layout (top bar) ───────────────────────────────── */ .app-frame { display: flex; flex-direction: column; min-height: 100dvh; } .app-frame--upload, .app-frame--studio { height: 100dvh; overflow: hidden; } /* editor caps to viewport — footer pinned, no page scroll */ .topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(12px); padding-top: env(safe-area-inset-top); /* clear the notch on viewport-fit=cover */ } .topbar-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 11px 22px; } .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; } .brand .logo { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); } .brand b { font-size: 15px; letter-spacing: 0.01em; } .brand small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .status-wrap { position: relative; } .topbar-status { position: relative; width: 38px; height: 38px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; color: var(--text); transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring); } .topbar-status:hover { border-color: var(--hair); color: var(--accent); } .topbar-status:active { transform: scale(0.92); } /* Language: globe icon over a transparent native