body.login { background: var(--bg0); color: var(--ink); font-family: var(--font); }
.split { display: grid; grid-template-columns: 1.1fr 1fr; height: 100vh; min-height: 560px; }
.art { min-height: 0; overflow: hidden; background: var(--bg1); border-right: 1px solid var(--line); color: var(--ink); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.art .brand { color: var(--ink); font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.art .brand svg { width: 34px; height: 34px; border-radius: 22%; }
.art .loomwrap { height: clamp(150px, 11vw, 230px); margin: 22px -56px 0; overflow: hidden; }
.art .col { flex: 1; min-height: 0; margin: 22px -56px 36px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; transition: opacity .4s; }
.art .col .mq { display: flex; gap: 10px; width: max-content; padding-right: 10px; flex: none; animation: mqleft linear infinite; }
.art .col .mq.rev { animation-name: mqright; }
.art .col .mq img { width: var(--s); height: var(--s); object-fit: cover; border-radius: 12px; flex: none; }
@keyframes mqleft { to { transform: translateX(-50%); } }
@keyframes mqright { from { transform: translateX(-50%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .art .col .mq { animation: none; } }
.art p { margin: 0; font-family: var(--head); font-size: 30px; line-height: 1.15; max-width: 520px; font-weight: 700; letter-spacing: -.02em; }
.formside { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; gap: 8px; }
.formside .authbox { margin: 0; width: 100%; max-width: 400px; background: none; border: 0; padding: 0; }
.formside .legal { font-size: 13px; color: var(--mute); margin-top: 18px; }
.formside .legal a { color: var(--mute); }
@media (min-width: 1800px) { .formside .authbox, .formside .legal { zoom: 1.3; } .art p { font-size: 38px; max-width: 640px; } .art .brand { font-size: 30px; } }
@media (min-width: 861px) and (max-height: 600px) { .split { height: auto; min-height: 100vh; } .art .col { display: none; } .art p { margin-top: 22px; } }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; } .art { padding: 28px; } .art .loomwrap { height: 130px; margin: 18px -28px 0; } .art .col { display: none; } .art p { font-size: 22px; margin-top: 18px; } }