html.tw-onboarding-open { overflow: hidden; }

.tw-onboarding-backdrop {
    position: fixed;
    z-index: 2147482000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    opacity: 0;
    color: #f6f7ff;
    background: rgba(5, 7, 16, .9);
    transition: opacity 180ms cubic-bezier(.22, 1, .36, 1);
}

.tw-onboarding-backdrop.is-visible { opacity: 1; }

.tw-onboarding-card {
    position: relative;
    width: min(100%, 390px);
    padding: 24px;
    overflow: hidden;
    border: 1px solid #46517f;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(180deg, #20294f, #171c36 46%);
    box-shadow: 0 8px 0 #070912, 0 22px 48px rgba(0, 0, 0, .5);
    opacity: .68;
    filter: blur(3px);
    transform: translateY(12px) scale(.97);
    transition: opacity 280ms cubic-bezier(.22, 1, .36, 1), filter 280ms cubic-bezier(.22, 1, .36, 1), transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.is-visible .tw-onboarding-card { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }

.tw-onboarding-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #46517f;
    border-radius: 11px;
    color: #dce2ff;
    background: #21294d;
    font: 700 22px/1 "Segoe UI", sans-serif;
    cursor: pointer;
}

.tw-onboarding-brand { display: grid; place-items: center; min-height: 46px; margin: 0 46px 15px; }
.tw-onboarding-brand img { display: block; max-width: 170px; max-height: 54px; object-fit: contain; }
.tw-onboarding-brand span { font: 900 1.35rem/1 Bahnschrift, "Segoe UI", sans-serif; letter-spacing: -.025em; }

.tw-onboarding-piece {
    display: grid;
    grid-template-columns: repeat(3, 17px);
    grid-template-rows: repeat(2, 17px);
    justify-content: center;
    gap: 3px;
    margin: 0 auto 15px;
}

.tw-onboarding-piece i { border-radius: 3px; background: #00e5a8; box-shadow: inset 2px 2px rgba(255,255,255,.36), inset -2px -2px rgba(0,0,0,.24); }
.tw-onboarding-piece i:first-child { grid-column: 2; }
.tw-onboarding-kicker { margin: 0 0 6px; color: #72ffda; font: 850 10px/1.3 Bahnschrift, "Segoe UI", sans-serif; letter-spacing: .08em; }
.tw-onboarding-card h2 { margin: 0 0 9px; color: #fff; font: 900 clamp(1.45rem, 7vw, 1.8rem)/1.1 Bahnschrift, "Segoe UI", sans-serif; letter-spacing: -.025em; }
.tw-onboarding-card > p:not(.tw-onboarding-kicker) { max-width: 37ch; margin: 0 auto; color: #c4ccec; font: 500 14px/1.52 "Segoe UI", system-ui, sans-serif; }

.tw-onboarding-audio {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0;
    padding: 11px 12px;
    border-radius: 12px;
    color: #dce2ff;
    background: #10162e;
    font: 650 12px/1.4 "Segoe UI", system-ui, sans-serif;
    text-align: left;
}

.tw-onboarding-audio > span:first-child { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; color: #071a15; background: #00e5a8; font-weight: 900; }
.tw-onboarding-actions { display: grid; gap: 9px; }
.tw-onboarding-actions button { min-height: 48px; border-radius: 12px; font: 850 12px/1 Bahnschrift, "Segoe UI", sans-serif; cursor: pointer; }
.tw-onboarding-start { border: 0; color: #fff; background: #7c5cff; box-shadow: 0 5px 0 #452cba; }
.tw-onboarding-skip { border: 1px solid #46517f; color: #f6f7ff; background: #21294d; }
.tw-onboarding-card > small { display: block; margin-top: 13px; color: #9da8d1; font: 500 11px/1.4 "Segoe UI", system-ui, sans-serif; }
.tw-onboarding-card button:active { transform: scale(.97); }
.tw-onboarding-card button:focus-visible { outline: 3px solid #00e5a8; outline-offset: 3px; }

.panel-card .panel-tutorial-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid rgba(139, 154, 218, .42);
    border-radius: 12px;
    color: #e7ebff;
    background: #20284a;
    font: 850 11px/1 Bahnschrift, "Segoe UI", sans-serif;
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(.22, 1, .36, 1), transform 90ms cubic-bezier(.22, 1, .36, 1);
}

.panel-card .panel-tutorial-link::before { color: #72ffda; content: "▶"; font-size: 9px; }
.panel-card .panel-tutorial-link:hover { background: #283258; }
.panel-card .panel-tutorial-link:active { transform: scale(.98); }
.panel-card .panel-tutorial-link:focus-visible { outline: 3px solid #00e5a8; outline-offset: 3px; }

@media (max-width: 420px) {
    .tw-onboarding-card { padding: 21px 18px; }
    .tw-onboarding-card > p:not(.tw-onboarding-kicker) { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .tw-onboarding-backdrop,
    .tw-onboarding-card { transition-duration: .01ms !important; }
    .tw-onboarding-card button:active,
    .panel-card .panel-tutorial-link:active { transform: none; }
}