.qk {
    --qk-a: #8b5cf6;
    --qk-b: #ec4899;
    --qk-bg: #140b25;
    --qk-bg2: #231240;
    --qk-ink: #f6f1ff;
    --qk-mute: #b8accf;
    --qk-card: rgba(255, 255, 255, 0.08);
    --qk-line: rgba(255, 255, 255, 0.16);
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    min-height: 560px;
    color: var(--qk-ink);
    background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--qk-a) 38%, transparent), transparent 60%), radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--qk-b) 34%, transparent), transparent 60%), linear-gradient(160deg, var(--qk-bg), var(--qk-bg2));
    border-radius: 24px;
    overflow: hidden;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    box-shadow: 0 18px 44px rgba(20, 11, 37, 0.35);
}
.qk, .qk * { box-sizing: border-box; }
.qk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.qk-badge { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qk-mute); }
.qk-actions { display: flex; gap: 8px; }
.qk-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--qk-line); background: var(--qk-card); color: var(--qk-ink); font-size: 18px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.qk-icon:hover { background: rgba(255, 255, 255, 0.16); }
.qk button:focus-visible, .qk input:focus-visible, .qk select:focus-visible, .qk a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.qk-stage { padding: 12px clamp(16px, 4vw, 36px) 28px; min-height: 480px; animation: qk-in 0.32s ease both; }
@keyframes qk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qk-hero { text-align: center; padding: 18px 0 8px; }
.qk-orb { width: 108px; height: 108px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 54px; line-height: 1; background: linear-gradient(135deg, var(--qk-a), var(--qk-b)); box-shadow: 0 10px 34px color-mix(in srgb, var(--qk-a) 55%, transparent), inset 0 0 0 3px rgba(255, 255, 255, 0.25); }
.qk-title { margin: 0; font-size: clamp(28px, 7vw, 46px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.qk-hook { margin: 12px auto 0; max-width: 34em; font-size: clamp(15px, 3.6vw, 18px); line-height: 1.5; color: var(--qk-mute); }
.qk-points { list-style: none; margin: 20px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qk-points li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--qk-line); background: var(--qk-card); font-size: 13px; font-weight: 700; color: var(--qk-ink); }
.qk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--qk-a), var(--qk-b)); box-shadow: 0 8px 24px color-mix(in srgb, var(--qk-a) 45%, transparent); text-decoration: none; transition: transform 0.12s ease, filter 0.12s ease; }
.qk-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.qk-btn:active { transform: scale(0.98); }
.qk-btn[disabled] { opacity: 0.5; cursor: default; transform: none; }
.qk-btn-ghost { background: var(--qk-card); border: 1px solid var(--qk-line); box-shadow: none; color: var(--qk-ink); }
.qk-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.qk-prog { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.qk-prog-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.qk-prog-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--qk-a), var(--qk-b)); transition: width 0.3s ease; }
.qk-prog-n { font-size: 13px; font-weight: 800; color: var(--qk-mute); min-width: 4.5em; text-align: right; }
.qk-back { min-height: 44px; min-width: 44px; border-radius: 12px; border: 1px solid var(--qk-line); background: var(--qk-card); color: var(--qk-ink); font-size: 18px; font-weight: 800; cursor: pointer; }
.qk-back[disabled] { opacity: 0.35; cursor: default; }
.qk-q { text-align: left; margin: 8px 0 18px; font-size: clamp(21px, 5.2vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.qk-opts { display: grid; gap: 10px; }
.qk-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; text-align: left; border-radius: 16px; border: 1px solid var(--qk-line); background: var(--qk-card); color: var(--qk-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease; }
.qk-opt:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); }
.qk-opt-k { flex: none; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, 0.14); }
.qk-opt-on { background: linear-gradient(135deg, color-mix(in srgb, var(--qk-a) 70%, transparent), color-mix(in srgb, var(--qk-b) 70%, transparent)); border-color: #fff; transform: scale(1.01); }
.qk-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qk-scale .qk-opt { flex-direction: column; justify-content: center; text-align: center; min-height: 72px; padding: 8px 4px; font-size: 13px; }
.qk-scale .qk-opt-k { width: 32px; height: 32px; font-size: 15px; }
.qk-form { text-align: left; display: grid; gap: 16px; margin-top: 8px; }
.qk-field { display: grid; gap: 6px; }
.qk-field > label, .qk-field > .qk-lab { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qk-mute); }
.qk-input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--qk-line); background: rgba(0, 0, 0, 0.28); color: var(--qk-ink); font: inherit; font-size: 17px; color-scheme: dark; }
.qk-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.qk-hint { font-size: 12px; color: var(--qk-mute); }
.qk-err { min-height: 18px; font-size: 13px; font-weight: 700; color: #ffb4b4; }
.qk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qk-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qk-line); background: var(--qk-card); color: var(--qk-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.qk-chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--qk-a), var(--qk-b)); border-color: #fff; }
.qk-load { text-align: center; padding: 70px 0; }
.qk-spin { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.16); border-top-color: var(--qk-b); border-right-color: var(--qk-a); animation: qk-spin 0.9s linear infinite; }
@keyframes qk-spin { to { transform: rotate(360deg); } }
.qk-load p { margin: 0; font-size: 18px; font-weight: 700; }
.qk-load small { display: block; margin-top: 8px; color: var(--qk-mute); font-size: 13px; }
.qk-res-hero { text-align: center; padding: 10px 0 4px; }
.qk-kick { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qk-mute); margin: 0 0 12px; }
.qk-big { margin: 6px 0 0; font-size: clamp(54px, 16vw, 96px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--qk-b) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qk-tag { margin: 12px auto 0; max-width: 32em; font-size: clamp(16px, 4vw, 20px); line-height: 1.4; font-style: italic; color: #e9defa; }
.qk-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.qk-chiprow li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 700; }
.qk-meters { display: grid; gap: 12px; margin: 22px 0 0; }
.qk-meter-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.qk-meter-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.qk-meter-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--qk-a), var(--qk-b)); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qk-secs { display: grid; gap: 12px; margin-top: 22px; }
.qk-sec { text-align: left; padding: 16px 18px; border-radius: 18px; background: var(--qk-card); border: 1px solid var(--qk-line); }
.qk-sec h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.qk-sec p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; color: #eadffc; }
.qk-sec p:last-child { margin-bottom: 0; }
.qk-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: #eadffc; }
.qk-extra { margin-top: 20px; }
.qk-actrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; }
.qk-more { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--qk-line); }
.qk-more h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qk-mute); }
.qk-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qk-more-a { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 12px; border-radius: 14px; background: var(--qk-card); border: 1px solid var(--qk-line); color: var(--qk-ink); text-decoration: none; font-size: 14px; font-weight: 800; line-height: 1.25; }
.qk-more-a span { font-size: 22px; }
.qk-more-a:hover { background: rgba(255, 255, 255, 0.16); }
.qk-disc { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--qk-mute); }
.qk-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 4, 16, 0.78); }
.qk-modal-card { text-align: left; width: 100%; max-width: 480px; max-height: 100%; overflow: auto; padding: 22px; border-radius: 20px; background: #1d1033; border: 1px solid var(--qk-line); }
.qk-modal-card h2 { margin: 0 0 10px; font-size: 22px; }
.qk-modal-card p { margin: 0 0 10px; line-height: 1.55; color: #e5dbf5; font-size: 15px; }
.qk-photo { display: grid; justify-items: center; gap: 12px; }
.qk-photo canvas, .qk-photo img, .qk-photo video { max-width: min(100%, 360px); width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 3px solid rgba(255, 255, 255, 0.3); background: #000; }
@media (max-width: 480px) {
    .qk { border-radius: 18px; min-height: 520px; }
    .qk-opt { min-height: 58px; font-size: 15px; }
    .qk-scale .qk-opt { font-size: 11.5px; }
    .qk-btn { width: 100%; }
    .qk-cta .qk-btn, .qk-actrow .qk-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .qk-stage, .qk-spin, .qk-meter-bar i, .qk-prog-bar i { animation: none; transition: none; }
}