.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.examples button { padding: 8px 14px; border-radius: 45px; border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color .2s; }
.examples button:hover { border-color: var(--ink); }
.check-card { min-height: 898px; align-items: flex-start; }
.fcard-white { transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.check-card.wide .fcard-white { width: 1180px; }
.c-form { display: flex; align-items: flex-end; gap: 10px; }
.c-form .field { flex: 1; }
.c-form .btn { height: 44px; }
.c-out { margin-top: 24px; }
.c-win { border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.c-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #1b1b1b; color: #9a9a96; font: 400 12px/1 var(--mono); }
.c-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.c-bar span { margin-left: 12px; }
.c-screen { position: relative; height: 760px; overflow: hidden; }
.c-screen .ui-root { overflow-y: auto; }
.c-screen .ui-main { overflow: visible; }
@media (max-width: 1199.98px) { .check-card.wide .fcard-white { width: 100%; } .c-screen { height: 640px; } }
@media (max-width: 809.98px) { .c-form { flex-direction: column; align-items: stretch; } .c-screen { height: 520px; } .check-card { min-height: 0; } }