html, body { min-height: 100%; }
body.otv-entry { display: flex; padding: 0; align-items: stretch; justify-content: stretch; background: #fff; color: #17233a; min-height: 100vh; }
.entry-rail { width: 30%; min-width: 330px; min-height: 100vh; background: linear-gradient(155deg, #192943, #101a2d); color: #fff; padding: 56px 44px 34px; display: flex; flex-direction: column; }
.entry-logo { display: flex; align-items: center; gap: 14px; }
.entry-logo img { width: 64px; height: 64px; }
.entry-logo b { font-size: 31px; letter-spacing: .04em; display: block; }
.entry-logo small { font-size: 11px; color: #a8b9d2; letter-spacing: .08em; }
.entry-rail h2 { margin: 84px 0 20px; font-size: clamp(32px, 3vw, 54px); line-height: 1.22; letter-spacing: -.04em; }
.entry-rail p { color: #b5c3d8; font-size: 15px; line-height: 1.8; max-width: 330px; }
.entry-steps { list-style: none; margin: 42px 0 0; padding: 0 0 0 20px; border-left: 2px solid #435676; }
.entry-steps li { position: relative; font-size: 14px; font-weight: 650; margin: 0 0 24px; }
.entry-steps li::before { content: ''; position: absolute; left: -29px; top: 4px; width: 14px; height: 14px; border: 2px solid #628dec; background: #1c3458; border-radius: 50%; }
.entry-rail-foot { margin-top: auto; color: #8196b4; font-size: 11px; letter-spacing: .2em; }
.entry-main { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 60px clamp(28px, 6vw, 100px); overflow: hidden; }
.entry-main::before { content: 'O'; position: absolute; right: -7vw; top: 14%; font-size: min(60vw, 750px); line-height: 1; color: #edf3ff; font-weight: 900; pointer-events: none; z-index: 0; }
.entry-version { position: absolute; top: 30px; right: 40px; color: #61718b; border: 1px solid #d6e0ee; border-radius: 18px; padding: 6px 16px; font-size: 12px; z-index: 1; }
body.otv-entry .card { position: relative; z-index: 1; width: min(100%, 660px); max-width: none; background: rgba(255,255,255,.95); border: 0; box-shadow: none; padding: 10px 0; }
.entry-intro { margin-bottom: 28px; }
.entry-intro span { color: #4168b9; font-size: 10px; font-weight: 800; letter-spacing: .27em; }
.entry-intro h1 { margin: 14px 0 7px; color: #14213a; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.2; letter-spacing: -.04em; }
.entry-intro p { color: #677792; font-size: 15px; margin: 0; }
body.otv-entry .card section h1 { font-size: 25px; color: #17233a; margin: 10px 0; }
body.otv-entry .sub { color: #61718b; font-size: 14px; }
body.otv-entry .spinner { border-color: #dce6f5; border-top-color: #2463e9; }
body.otv-entry .steps { background: #f6f9fd; border-color: #dce5f1; color: #17233a; }
body.otv-entry .steps li { color: #34435c; }
body.otv-entry .btn { border-radius: 10px; min-height: 48px; background: #2463e9; color: #fff; }
body.otv-entry .btn:hover { background: #1854d4; }
body.otv-entry .btn.sec { background: #fff; color: #263950; border-color: #c9d6e8; }
body.otv-entry .btn.sec:hover { background: #f0f5fc; }
body.otv-entry .btn.green { background: #0b9d79; }
body.otv-entry .btn.red { background: #c9434c; }
body.otv-entry .dot.on { background: #0b9d79; }
@media (max-width: 900px) { .entry-rail { min-width: 260px; padding: 32px 25px; }.entry-rail h2 { margin-top: 56px; }.entry-main { padding: 50px 30px; } }
@media (max-width: 660px) { body.otv-entry { display: block; }.entry-rail { width: 100%; min-width: 0; min-height: auto; padding: 18px 22px; }.entry-logo img { width: 44px; height: 44px; }.entry-logo b { font-size: 22px; }.entry-rail h2, .entry-rail p, .entry-steps, .entry-rail-foot { display: none; }.entry-main { min-height: calc(100vh - 85px); padding: 60px 22px 30px; }.entry-version { top: 18px; right: 22px; } }