/* The staging sign-in, from the owner's "Staging C · Oven timer" design. Inter is self-hosted (up to 700, so the
   wordmark is a little lighter than the design's 900), and the system monospace stands in for IBM Plex Mono: the
   sites load nothing from other hosts. */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }

body { margin: 0; background: #18181B; }
[hidden] { display: none !important; }
.bk { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 900; letter-spacing: -.065em; line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; }
.bk i { display: block; width: .17em; height: .17em; margin-left: .075em; background: #FF5A1F; flex: none; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #FF5A1F; outline-offset: 2px; }

.ring circle.run { stroke-dasharray: 100; animation: sweep 4s infinite cubic-bezier(.45, 0, .55, 1); }
.ring.fast circle.run { animation-duration: 1s; }
.ring.full circle.run { animation: none; stroke-dashoffset: 0; }
@keyframes sweep { 0% { stroke-dashoffset: 100; } 80%, 100% { stroke-dashoffset: 0; } }
.tick { animation: tick 4s infinite; }
@keyframes tick { 0%, 78% { transform: scale(1); } 84% { transform: scale(1.5); } 92%, 100% { transform: scale(1); } }
.dots span:not(#sub) { animation: blink 1.4s infinite both; }
.dots span:nth-child(3) { animation-delay: .2s; }
.dots span:nth-child(4) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.in { animation: in .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.shakeA { animation: shakeA .42s; }
.shakeB { animation: shakeB .42s; }
@keyframes shakeA { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes shakeB { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.ding { animation: ding .6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes ding { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

.page { min-height: 100vh; background: #18181B; color: #FFFFFF; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; flex-wrap: wrap; gap: 12px; }
.wordmark { font-size: 26px; letter-spacing: -.045em; }
.wordmark i { width: .15em; height: .15em; margin-left: .06em; }
.badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid #FF5A1F; color: #FF5A1F; padding: 5px 10px; }

.main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 24px 20px 64px; }
.ring { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 240px; height: 240px; }
.monogram { font-size: 96px; color: #FFFFFF; }

.form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.heading { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.heading h1, .done h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.heading p { margin: 0; font-size: 13px; color: #A1A1AA; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #E4E4E7; }
.field input { font: 15px Inter, sans-serif; min-height: 46px; padding: 0 14px; border: 1px solid #3A3A40; border-radius: 8px; background: #222226; color: #FFFFFF; }
.error { margin: 0; color: #FF8A80; font-size: 14px; font-weight: 500; }
.submit { min-height: 50px; border: 0; border-radius: 10px; background: #FF5A1F; color: #18181B; font: 700 16px Inter, sans-serif; cursor: pointer; }
.submit:disabled { cursor: progress; }
.forgot { align-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: #FF8A5B; font: 600 13px Inter, sans-serif; cursor: pointer; }
.forgot:hover { color: #FFB79C; }
.reset { margin: 0; text-align: center; font-size: 13px; color: #A1A1AA; }

.done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.done p { margin: 0; color: #A1A1AA; }
.done .ding { width: 14px; height: 14px; background: #FF5A1F; }