/* Signed-out homepage. Dashboard and extension styling remain independent. */
#login { padding: 32px max(28px, calc((100vw - 1360px) / 2)); background: radial-gradient(ellipse at 83% 22%, #27302b55, transparent 43%), #141619; }
.home-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-header > p { color: #949b99; font-size: 12px; }
.home-hero { display: grid; grid-template-columns: .8fr 1.25fr; gap: 42px; align-items: center; padding: 80px 0 65px; }
#login .login-content { max-width: none; padding: 0; margin: 0; }
#login .home-eyebrow { color: #e4a18c; font-size: 11px; letter-spacing: .14em; font-weight: 500; text-transform: uppercase; margin: 0 0 24px; }
#login h1 { font-size: clamp(48px, 5.2vw, 76px); letter-spacing: -.055em; line-height: 1.04; font-weight: 500; margin: 0; }
#login h1 em { color: #eda28a; font-style: normal; }
#login .home-description { max-width: 440px; color: #b1b7b5; font-size: 16px; line-height: 1.8; margin: 25px 0 29px; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
#login .home-actions .button { margin: 0; padding: 13px 21px; min-height: 48px; font-size: 14px; }
.home-actions .button svg { width: 17px; height: 17px; }
.home-tour { color: #c0c7c3; font-size: 12px; text-underline-offset: 5px; }
#login #login-note { margin: 17px 0 0; font-size: 11px; line-height: 1.6; max-width: 440px; color: #8f9993; }
#login #login-error { margin: 16px 0 0; color: #ffac9e; font-size: 13px; }
#login #twitch-login { background: #9146ff; color: #fff; border-color: #9146ff; }
#login #twitch-login:hover { background: #772ce8; border-color: #772ce8; }
#login #twitch-login:focus-visible { outline-color: #bf94ff; }
.home-previews { min-width: 0; }
.home-product { margin: 0; overflow: hidden; border: 1px solid #3b413d; border-radius: 10px; background: #1b1f20; box-shadow: 0 24px 70px #0003; }
.home-product > a { display: block; }
.home-product img { display: block; width: 100%; height: auto; }
.home-product figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 16px; font-size: 12px; }
.home-product figcaption strong { font-weight: 500; color: #edf1e8; }
.home-product figcaption span { font-size: 10px; color: #949f94; }
.home-mod-preview { margin-top: 17px; }
.home-mod-preview summary { width: fit-content; cursor: pointer; color: #b9c3bb; font-size: 12px; padding: 8px 0; }
.home-mod-preview summary:focus-visible { outline: 2px solid #eda28a; outline-offset: 4px; }
.home-mod-preview[open] summary { margin-bottom: 9px; }
.home-features { border-top: 1px solid #333936; padding: 32px 0 44px; scroll-margin-top: 28px; }
.home-features > h2 { font-size: 12px; font-weight: 400; color: #a4aca5; margin: 0 0 26px; }
.home-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.home-feature-icon { display: block; color: #e6a48f; height: 24px; margin-bottom: 13px; }
.home-feature-icon svg { width: 21px; height: 21px; }
.home-feature-grid h3 { font-size: 17px; font-weight: 500; letter-spacing: -.025em; margin: 0 0 10px; }
.home-feature-grid p { color: #a2aba6; font-size: 13px; line-height: 1.8; margin: 0; max-width: 340px; }
#login footer { margin-top: auto; padding: 20px 0 0; border-top: 1px solid #333936; gap: 18px; }
#login footer nav { display: flex; gap: 18px; }
#login a:focus-visible { outline: 2px solid #eda28a; outline-offset: 5px; }
@media (min-width: 1700px) { .home-hero { padding-top: 100px; padding-bottom: 90px; } }
@media (max-width: 1000px) { .home-hero { gap: 30px; padding-top: 65px; } .home-feature-grid { gap: 24px; } #login h1 { font-size: 57px; } }
@media (max-width: 730px) { #login { padding: 25px 24px; } .home-header > p { max-width: 110px; text-align: right; line-height: 1.6; font-size: 10px; } .home-hero { grid-template-columns: 1fr; padding: 47px 0 38px; gap: 37px; } #login h1 { font-size: 57px; } #login .home-description { font-size: 15px; max-width: 470px; margin-top: 23px; } .home-feature-grid { grid-template-columns: 1fr; gap: 28px; } .home-feature-grid article { padding-left: 38px; position: relative; } .home-feature-icon { position: absolute; left: 0; top: 0; } .home-feature-grid h3 { font-size: 17px; } .home-feature-grid p { max-width: 480px; } .home-features { padding: 28px 0 34px; } #login footer { flex-wrap: wrap; font-size: 11px; } #login footer span { max-width: none; text-align: left; } }
@media (max-width: 380px) { #login { padding: 22px 18px; } #login h1 { font-size: 50px; } .home-actions { gap: 16px; } }