.tw { --tw-ink: #17212d; --tw-sub: #536171; --tw-mute: #6b7889; --tw-line: #e1e6ec; --tw-field: #a3b1c2; --tw-navy: #0f2140; --tw-blue: #0866db; --tw-tint: #e8f1fd; --tw-err: #b42318;
  position: relative; background: #fff; color: var(--tw-ink); border-radius: 22px; padding: 18px; text-align: left;
  box-shadow: 0 0 0 1px rgba(15, 33, 64, .06), 0 2px 4px rgba(15, 33, 64, .04), 0 18px 48px rgba(15, 33, 64, .16); }
.tw [hidden] { display: none !important; }
.tw-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.005em; margin: 0 2px 8px; }
.tw-field { position: relative; }
.tw-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--tw-mute); pointer-events: none; }
.tw-field input { display: block; width: 100%; min-height: 58px; margin: 0; padding: 12px 16px 12px 46px; border: 1px solid var(--tw-field); border-radius: 15px; background: #fff; color: var(--tw-ink);
  font: inherit; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.tw-field input::placeholder { color: #8b97a6; }
.tw-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tw-field input:hover { border-color: #7d8da1; }
.tw-field input:focus { outline: none; border-color: var(--tw-blue); box-shadow: 0 0 0 4px rgba(8, 102, 219, .16); }
.tw-hint { margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--tw-mute); }
.tw-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.tw-opt { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 12px; border-radius: 13px; cursor: pointer; transition: background-color .12s; -webkit-tap-highlight-color: transparent; }
.tw-opt:hover, .tw-opt[aria-selected="true"] { background: var(--tw-tint); }
.tw-opt:active { background: #d9e8fb; }
.tw-opt strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-opt span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.35; color: var(--tw-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-opt svg { width: 18px; height: 18px; color: #9aa6b4; }
.tw-opt mark { background: none; color: inherit; font-weight: 680; }
.tw-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; margin-top: 8px; padding: 10px 12px; border: 0; border-top: 1px solid var(--tw-line); border-radius: 0 0 12px 12px; background: none;
  font: inherit; font-size: 14.5px; color: var(--tw-sub); text-align: left; cursor: pointer; }
.tw-alt b { color: var(--tw-blue); font-weight: 600; white-space: nowrap; }
.tw-alt:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tw-empty { margin: 14px 2px 4px; font-size: 15px; line-height: 1.45; color: var(--tw-sub); }
.tw-empty strong { color: var(--tw-ink); font-weight: 600; }
.tw-picked { display: flex; align-items: flex-start; gap: 12px; padding: 4px 2px 0; }
.tw-picked > div { min-width: 0; flex: 1; }
.tw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-blue); }
.tw-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tw-picked h3 { margin: 6px 0 0; font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tw-picked p { margin: 4px 0 0; font-size: 14.5px; color: var(--tw-sub); }
.tw-picked h3:focus { outline: none; }
.tw-link { flex-shrink: 0; min-height: 40px; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--tw-blue); cursor: pointer; }
.tw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 18px 0 0; padding: 14px; border-radius: 14px; background: #f4f7fb; font-size: 15px; line-height: 1.4; cursor: pointer; }
.tw-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--tw-navy); cursor: pointer; }
.tw-check.tw-bad { box-shadow: inset 0 0 0 1.5px var(--tw-err); }
.tw-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 14px; padding: 12px 20px; border: 0; border-radius: 16px; background: var(--tw-navy); color: #fff;
  font: inherit; font-size: 17.5px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; transition: transform .12s, background-color .15s; touch-action: manipulation; }
.tw-go:hover { background: #18315c; }
.tw-go:active { transform: scale(.98); }
.tw-go:disabled { background: #8a97aa; cursor: default; transform: none; }
.tw-go svg { width: 18px; height: 18px; }
.tw-fine { margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: var(--tw-mute); text-align: center; text-wrap: balance; }
.tw-err { margin: 10px 2px 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--tw-err); }
.tw-more { margin-top: 12px; font-size: 14px; color: var(--tw-sub); }
.tw-more summary { cursor: pointer; min-height: 44px; padding: 12px 2px; }
.tw-form { display: grid; gap: 12px; margin-top: 14px; }
.tw-form label > span { display: block; margin: 0 2px 6px; font-size: 13.5px; font-weight: 550; color: var(--tw-sub); }
.tw-form input, .tw-form select { display: block; width: 100%; min-height: 52px; margin: 0; padding: 10px 14px; border: 1px solid var(--tw-field); border-radius: 13px; background: #fff; color: var(--tw-ink); font: inherit; font-size: 16.5px; -webkit-appearance: none; appearance: none; }
.tw-form select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7889' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.tw-form input:focus, .tw-form select:focus { outline: none; border-color: var(--tw-blue); box-shadow: 0 0 0 4px rgba(8, 102, 219, .16); }
.tw-form input[aria-invalid="true"], .tw-form select[aria-invalid="true"] { border-color: var(--tw-err); }
.tw-note { margin: 2px; padding: 12px 14px; border-radius: 13px; background: #fff6e5; color: #6b4b00; font-size: 14.5px; line-height: 1.45; }
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tw-head h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.tw-load { padding: 6px 2px 2px; }
.tw-load h3 { margin: 6px 0 0; font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tw-bar { position: relative; height: 6px; margin: 18px 0 16px; overflow: hidden; border-radius: 99px; background: #e8edf4; }
.tw-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--tw-blue); transform: scaleX(.04); transform-origin: left; transition: transform 9s cubic-bezier(.15, .7, .3, 1); }
.tw-bar.tw-run i { transform: scaleX(.92); }
.tw-bar.tw-done i { transform: scaleX(1); transition-duration: .25s; }
.tw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tw-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; color: var(--tw-mute); transition: color .2s; }
.tw-steps li::before { content: ""; width: 18px; height: 18px; margin: 2px; border-radius: 50%; box-sizing: border-box; border: 2px solid #cfd8e3; transition: border-color .2s, background-color .2s; }
.tw-steps li.tw-now { color: var(--tw-ink); }
.tw-steps li.tw-now::before { border-color: var(--tw-blue); border-right-color: transparent; animation: tw-spin .8s linear infinite; }
.tw-steps li.tw-ok { color: var(--tw-ink); }
.tw-steps li.tw-ok::before { border-color: var(--tw-blue); background: var(--tw-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) { .tw { padding: 14px; border-radius: 20px; } .tw-picked h3, .tw-load h3 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .tw *, .tw *::before { transition: none !important; animation-duration: 2s !important; } .tw-go:active { transform: none; } }