/* Quillwright — industrial precision. Source: docs/design/frontend-core-workspace.md */ @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@700;800;900&family=Inter:wght@400;700&family=JetBrains+Mono:wght@500&family=Material+Symbols+Outlined&display=swap"); :root { --ff-primary: #964900; --ff-accent: #f57c00; --ff-log-bg: #10191e; --ff-log-border: #1c2931; --ff-ok: #22c55e; } .ff-title { font-family: "Hanken Grotesk"; font-weight: 900; color: var(--ff-primary); font-size: 24px; letter-spacing: -0.01em; } .ff-log { background: var(--ff-log-bg); color: #cdd6db; font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 24px; min-height: 420px; border-radius: 8px; } .ff-step { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; } .ff-step-body p { color: #fff; opacity: 0.92; margin: 0; } .ff-badge { display: inline-block; margin-top: 4px; color: var(--ff-accent); font-size: 11px; } .ff-ok { color: var(--ff-ok); font-variation-settings: "FILL" 1; } .ff-err { color: #ba1a1a; } .ff-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ff-accent); display: inline-block; margin-top: 6px; animation: ff-pulse 2s infinite; } .ff-wait { color: #546e7a; } .terminal-cursor { display: inline-block; width: 8px; height: 16px; background: var(--ff-accent); margin-left: 4px; vertical-align: middle; animation: ff-blink 1s step-end infinite; } @keyframes ff-blink { 50% { opacity: 0; } } @keyframes ff-pulse { 50% { opacity: 0.4; transform: scale(1.15); } } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-size: 20px; vertical-align: middle; } .ff-pane-head { font-family: "Hanken Grotesk"; font-weight: 700; }