.login-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-inline:auto;max-width:28rem;padding:4rem 1rem;> .intro { text-align: center; margin-bottom: 2rem; > .title { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; } > .subtitle { color: var(--text-muted); } } > .login-form { display: flex; flex-direction: column; gap: 1rem; > .title { font-size: 1.125rem; } > .field { display: flex; flex-direction: column; gap: 0.5rem; > actor-typeahead { > .input { width: 100%; } } > .hint { font-size: 0.75rem; color: var(--text-muted); } } > .error-box { display: flex; flex-direction: column; margin-block: 1rem; padding: 1rem; border: 1px solid var(--red); border-radius: 0.5rem; background-color: var(--light-red); color: var(--red); > .header { display: flex; align-items: center; gap: 0.25rem; > svg { width: 1rem; height: 1rem; } > .title { font-weight: 500; } } > .message { font-size: 0.875rem; } } } > .guest-link { margin-top: 2rem; text-align: center; > a { font-size: 0.875rem; color: var(--text-muted); text-decoration: underline; &:hover { text-decoration: none; } } }}.login-modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;padding:1rem 1rem 2rem;background-color:rgb(0 0 0/.2);@media(min-width:40rem){align-items: center;}@media(min-width:64rem){padding: 2rem;}> .sheet { width: 100%; max-width: 28rem; border-radius: 1rem; background-color: var(--bg-light); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); overflow: hidden; > .header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--bg-dark); > .title { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } > .close { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; transition: background-color 0.15s ease; &:hover { background-color: var(--bg-dark); } > svg { width: 1rem; height: 1rem; } } } > .body { padding: 1.25rem 1.5rem; overflow-y: auto; @media (min-width: 40rem) { height: 18rem; } > .slide { display: flex; flex-direction: column; gap: 1rem; > .slide-header { display: flex; align-items: center; gap: 0.75rem; > .icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px; background-color: var(--primary-surface); > svg { width: 1.25rem; height: 1.25rem; } } > .title { font-size: 1rem; font-weight: 700; } } > .text { font-size: 0.875rem; color: var(--text-muted); } > .slide-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; > li { display: flex; align-items: flex-start; gap: 0.5rem; > .bullet { color: var(--primary-text); font-weight: 700; line-height: 1.25rem; } } } > .providers { display: flex; flex-direction: column; gap: 0.25rem; > li > .provider-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: background-color 0.15s ease; &:hover { background-color: var(--bg); } > .favicon { width: 1rem; height: 1rem; border-radius: 0.125rem; object-fit: contain; } > .name { font-size: 0.875rem; font-weight: 500; } > .domain { font-size: 0.75rem; color: var(--text-muted); } > .external-icon { width: 0.75rem; height: 0.75rem; color: var(--text-muted); margin-left: auto; } } } } } > .footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-top: 1px solid var(--bg-dark); > .nav-button { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--bg-dark); transition: background-color 0.15s ease; &:hover { background-color: var(--bg); } > svg { width: 1rem; height: 1rem; } } > .dots { display: flex; align-items: center; gap: 0.5rem; > .dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background-color: var(--bg-dark); transition: all 0.2s ease; &.-active { background-color: var(--text); } } } } }}.code-chip{padding:.125rem .375rem;border-radius:.25rem;background-color:var(--bg);font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace}