*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
:root { --c-bg: #ffffff; --c-surface: #f8f9fa; --c-border: #e2e6ea; --c-text: #1a1d23; --c-muted: #6b7280; --c-accent: #0d6efd; --c-ok-bg: #ecfdf5; --c-ok-bd: #6ee7b7; --c-ok-tx: #065f46; --c-err-bg: #fff1f2; --c-err-bd: #fda4af; --c-err-tx: #9f1239; --c-code-bg: #f3f4f6; --c-code-bd: #d1d5db; --c-blue-bg: #eff6ff; --c-blue-bd: #bfdbfe; --c-blue-tx: #1e40af; --radius: 10px; --font: 'Helvetica Neue',Helvetica,Arial,sans-serif; --mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; }
html { font-size: 16px; }
body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; line-height: 1.6; }
.card { width: 100%; max-width: 560px; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px; }
.card-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: 18px 24px; display: flex; align-items: center; gap: 12px; }
.icon-main { font-size: 28px; line-height: 1; flex-shrink: 0; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); display: block; margin-bottom: 2px; }
.card-header h1 { font-size: 17px; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.card-body { padding: 24px; }
.message { font-size: 14px; color: var(--c-text); margin-bottom: 8px; }
.hint { font-size: 13px; color: var(--c-muted); margin-top: 12px; }
.info-box { margin: 18px 0px; padding: 14px 16px; border-radius: var(--radius); background: var(--c-blue-bg); border: 1px solid var(--c-blue-bd); color: var(--c-blue-tx); font-size: 13px; }
.info-box strong { display: block; margin-bottom: 4px; font-size: 14px; }
.steps { margin: 18px 0px; counter-reset: step 0; }
.step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 13px; }
.step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.step-text { color: var(--c-text); }
.diag-box { position: relative; margin-top: 20px; background: var(--c-code-bg); border: 1px solid var(--c-code-bd); border-radius: var(--radius); padding: 14px 42px 14px 14px; }
.diag-box pre { font-family: var(--mono); font-size: 11px; color: var(--c-muted); white-space: pre-wrap; word-break: break-all; line-height: 1.7; }
.copy-btn { position: absolute; top: 8px; right: 8px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--c-muted); transition: background 0.15s ease 0s; }
.copy-btn:hover { background: var(--c-surface); }
.copy-btn.copied { background: var(--c-ok-bg); border-color: var(--c-ok-bd); color: var(--c-ok-tx); }
.card-footer { padding: 12px 24px; border-top: 1px solid var(--c-border); background: var(--c-surface); font-size: 11px; color: var(--c-muted); text-align: center; }
.card-footer a { color: var(--c-accent); text-decoration: none; }
.card-footer a:hover { text-decoration: underline; }

* { box-sizing: border-box; margin: 0px; padding: 0px; }
body { font-family: system-ui, -apple-system, sans-serif; background: rgb(255, 255, 255); color: rgb(26, 26, 26); min-height: 100vh; }
.page-wrap { padding: 40px 32px; max-width: 520px; }
.logo-text { font-size: 13px; font-weight: 600; color: rgb(85, 85, 85); letter-spacing: 0.05em; margin-bottom: 32px; }
h1 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
h2 { font-size: 14px; font-weight: 400; color: rgb(85, 85, 85); margin-bottom: 24px; }
footer { margin-top: 48px; font-size: 11px; color: rgb(170, 170, 170); line-height: 1.7; border-top: 1px solid rgb(238, 238, 238); padding-top: 16px; }

altcha-widget { display: none; }
.spinner { width: 20px; height: 20px; border-width: 2px; border-style: solid; border-color: rgb(51, 51, 51) rgb(221, 221, 221) rgb(221, 221, 221); border-image: initial; border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; display: inline-block; margin-bottom: 16px; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}

body.quiet .card { display: none; }
.quiet-spin { display: none; }
body.quiet .quiet-spin { display: block; width: 22px; height: 22px; border-width: 2px; border-style: solid; border-color: rgb(154, 154, 154) rgb(226, 226, 226) rgb(226, 226, 226); border-image: initial; border-radius: 50%; animation: 0.8s linear 0s infinite normal none running qspin; }
@keyframes qspin { 
  100% { transform: rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
  body.quiet { background: rgb(17, 18, 20); }
  body.quiet .quiet-spin { border-color: rgb(136, 136, 136) rgb(51, 51, 51) rgb(51, 51, 51); }
}

html body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: rgb(255, 255, 255); color: rgb(14, 22, 40); display: block; padding: 0px; min-height: 100vh; line-height: 1.55; }
html body header.wgp { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid rgb(229, 233, 241); }
html body header.wgp .lg { display: inline-flex; align-items: center; text-decoration: none; }
html body header.wgp .lgs { height: 28px; width: calc(279.468px); }
html body header.wgp .hr { font-size: 13px; color: rgb(84, 97, 121); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body header.wgp .hr b { color: rgb(14, 22, 40); }
html body .card { max-width: 640px; margin: 28px auto 0px; border: 0px; box-shadow: none; border-radius: 0px; overflow: visible; background: transparent; padding: 0px 16px; }
html body .card-header { background: transparent; border: 0px; flex-direction: column; justify-content: center; text-align: center; padding: 8px 0px 0px; gap: 0px; }
html body .card-header .icon-main { display: none; }
html body .card-header .badge { display: none; }
html body .wgp-ill { width: 104px; height: 104px; margin: 0px auto 14px; display: block; }
html body .card-header h1 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; color: rgb(14, 22, 40); font-weight: 700; }
html body .card-body { padding: 10px 0px 0px; text-align: center; }
html body .card-body .message { font-size: 15px; color: rgb(84, 97, 121); max-width: 52ch; margin: 4px auto; }
html body .card-body .hint { font-size: 13px; color: rgb(84, 97, 121); max-width: 60ch; margin: 10px auto 0px; }
html body .card-body .info-box { max-width: 520px; margin: 16px auto; text-align: left; background: rgb(239, 246, 255); border-color: rgb(219, 234, 254); color: rgb(30, 58, 138); border-radius: 12px; }
html body .card-body .steps { max-width: 520px; margin: 16px auto; text-align: left; }
html body .card-body .step-num { background: rgb(37, 99, 235); }
html body .card-body .page-wrap { margin: 14px auto; max-width: 520px; padding: 0px; display: flex; flex-direction: column; align-items: center; }
html body .diag-box { max-width: 640px; margin: 18px auto 0px; text-align: left; background: rgb(248, 250, 252); border: 1px solid rgb(229, 233, 241); border-radius: 12px; padding: 0px; }
html body .diag-box .dgh { display: flex; align-items: center; gap: 8px; padding: 9px 140px 9px 12px; font-size: 13px; font-weight: 600; color: rgb(14, 22, 40); cursor: pointer; user-select: none; }
html body .diag-box .dgh i { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgb(239, 246, 255); color: rgb(37, 99, 235); font: italic 700 12px / 20px Georgia, serif; text-align: center; }
html body .diag-box .dgh .tg { margin-left: auto; font-size: 12px; color: rgb(37, 99, 235); position: absolute; right: 92px; top: 11px; }
html body .diag-box .dgh .tg::after { content: " ▾"; }
html body .diag-box.open .dgh .tg::after { content: " ▴"; }
html body .diag-box pre { display: none; border-top: 1px solid rgb(229, 233, 241); padding: 12px 14px; margin: 0px; direction: ltr; text-align: left; }
html body .diag-box.open pre { display: block; }
html body .diag-box .copy-btn { top: 6px; right: 8px; font: 600 12px system-ui, sans-serif; color: rgb(37, 99, 235); background: rgb(255, 255, 255); border: 1px solid rgb(229, 233, 241); border-radius: 8px; padding: 5px 10px; }
html body .card-footer { background: rgb(248, 250, 252); border-top: 1px solid rgb(229, 233, 241); margin: 28px -16px 0px; padding: 14px 16px 10px; font-size: 12px; color: rgb(84, 97, 121); text-align: center; }
html body .card-footer a { color: var(--wn,#234f9f); font-weight: 600; text-decoration: none; }
html body .card-footer .cta { background: rgb(34, 191, 126); color: rgb(255, 255, 255); padding: 7px 12px; border-radius: 8px; margin-left: 10px; display: inline-block; }
html body .card-footer .op { margin-top: 8px; font-size: 11px; color: rgb(138, 148, 170); }
html body .wb { white-space: nowrap; }
html body .wi { height: 0.74em; width: calc(3.39512em); fill: rgb(35, 79, 159); vertical-align: -0.02em; }
html body .qlogo { display: none; }
html body.quiet header.wgp { display: none; }
html body.quiet .qlogo { display: block; position: fixed; left: 50%; top: calc(50% - 64px); transform: translateX(-50%); height: 30px; width: calc(299.43px); animation: 2.4s ease-in-out 0s infinite normal none running wgpblik; }
html body #kt canvas, html body #kt img, html body #kt #ktv, html body #kt .row { margin-left: auto; margin-right: auto; }
html body .wait-row { justify-content: center; }
html body.quiet .quiet-spin { position: fixed; left: 50%; top: 50%; margin: -11px 0px 0px -11px; }
@keyframes wgpblik { 
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (max-width: 520px) {
  html body header.wgp .hr { display: none; }
  html body .diag-box .dgh { padding-right: 100px; }
  html body .diag-box .dgh .tg { display: none; }
}

@keyframes overlay-slidein { 
  100% { opacity: 1; top: 50%; }
}
@keyframes altcha-spinner { 
  100% { transform: rotate(360deg); }
}
.altcha { background: var(--altcha-color-base, transparent); border: var(--altcha-border-width, 1px) solid var(--altcha-color-border, #a0a0a0); border-radius: var(--altcha-border-radius, 3px); color: var(--altcha-color-text, currentColor); display: flex; flex-direction: column; max-width: var(--altcha-max-width, 260px); position: relative; }
.altcha:focus-within { border-color: var(--altcha-color-border-focus, currentColor); }
.altcha[data-floating] { background: var(--altcha-color-base, white); display: none; filter: drop-shadow(rgba(0, 0, 0, 0.2) 3px 3px 6px); left: -100%; position: fixed; top: -100%; width: var(--altcha-max-width, 260px); z-index: 999999; }
.altcha[data-floating="top"] .altcha-anchor-arrow { border-bottom-color: transparent; border-top-color: var(--altcha-color-border, #a0a0a0); bottom: -12px; top: auto; }
.altcha[data-floating="bottom"]:focus-within::after { border-bottom-color: var(--altcha-color-border-focus, currentColor); }
.altcha[data-floating="top"]:focus-within::after { border-top-color: var(--altcha-color-border-focus, currentColor); }
.altcha[data-floating]:not([data-state="unverified"]) { display: block; }
.altcha-anchor-arrow { border-width: 6px; border-style: solid; border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; border-image: initial; border-bottom-color: var(--altcha-color-border, #a0a0a0); content: ""; height: 0px; left: 12px; position: absolute; top: -12px; width: 0px; }
.altcha-main { align-items: center; display: flex; gap: 0.4rem; padding: 0.7rem; position: relative; }
.altcha-code-challenge { background: var(--altcha-color-base, white); border: 1px solid var(--altcha-color-border-focus, currentColor); border-radius: var(--altcha-border-radius, 3px); filter: drop-shadow(rgba(0, 0, 0, 0.2) 3px 3px 6px); padding: 0.5rem; position: absolute; top: 2.5rem; z-index: 9999999; }
.altcha-code-challenge > form { display: flex; flex-direction: column; gap: 0.5rem; }
.altcha-code-challenge-input { border: 1px solid currentcolor; border-radius: 3px; box-sizing: border-box; outline: 0px; font-size: 16px; padding: 0.35rem; width: 220px; }
.altcha-code-challenge-input:focus { outline: 2px solid color-mix(in srgb,var(--altcha-color-active, #1D1DC9) 20%,transparent); }
.altcha-code-challenge-input:disabled { opacity: 0.7; }
.altcha-code-challenge-image { background-color: rgb(255, 255, 255); border: 1px solid currentcolor; border-radius: 3px; box-sizing: border-box; object-fit: contain; height: 50px; width: 220px; }
.altcha-code-challenge-audio, .altcha-code-challenge-reload { background: color-mix(in srgb,var(--altcha-color-text, currentColor) 10%,transparent); border: 0px; border-radius: 3px; color: var(--altcha-color-text, currentColor); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.35rem; }
.altcha-code-challenge-audio:disabled, .altcha-code-challenge-reload:disabled, .altcha-code-challenge-verify:disabled { opacity: 0.7; pointer-events: none; }
.altcha-code-challenge-audio > *, .altcha-code-challenge-reload > * { height: 20px; width: 20px; }
.altcha-code-challenge-buttons { display: flex; justify-content: space-between; }
.altcha-code-challenge-buttons-left { display: flex; gap: 0.25rem; }
.altcha-code-challenge-verify { align-items: center; background: var(--altcha-color-active, #1D1DC9); border: 0px; border-radius: 3px; color: rgb(255, 255, 255); cursor: pointer; display: flex; gap: 0.5rem; font-size: 100%; padding: 0.35rem 1rem; }
.altcha-code-challenge-arrow { border-width: 6px; border-style: solid; border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; border-image: initial; border-bottom-color: var(--altcha-color-border, currentColor); content: ""; height: 0px; left: 0.15rem; position: absolute; top: -12px; width: 0px; }
.altcha[data-floating="top"] .altcha-code-challenge { top: -150px; }
.altcha[data-floating="top"] .altcha-code-challenge-arrow { border-bottom-color: transparent; border-top-color: var(--altcha-color-border, currentColor); bottom: -12px; top: auto; }
.altcha-label { cursor: pointer; flex-grow: 1; }
.altcha-logo { color: currentcolor !important; opacity: 0.7; }
.altcha-footer:hover, .altcha-logo:hover { opacity: 1; }
.altcha-error { color: var(--altcha-color-error-text, #f23939); display: flex; font-size: 0.85rem; gap: 0.3rem; padding: 0px 0.7rem 0.7rem; }
.altcha-footer { align-items: center; background-color: var(--altcha-color-footer-bg, transparent); display: flex; font-size: 0.75rem; opacity: 0.7; justify-content: end; padding: 0.2rem 0.7rem; }
.altcha-footer a { color: currentcolor; }
.altcha-checkbox { display: flex; align-items: center; justify-content: center; height: 24px; position: relative; width: 24px; }
.altcha-checkbox .altcha-spinner { inset: 0px; position: absolute; }
.altcha-checkbox input { width: 18px; height: 18px; margin: 0px; }
.altcha-checkbox-verifying input { appearance: none; opacity: 0; pointer-events: none; }
.altcha-spinner { animation: 0.75s linear 0s infinite normal none running altcha-spinner; transform-origin: center center; }
.altcha-overlay { --altcha-color-base: #fff; --altcha-color-text: #000; animation: 0.5s ease 0s 1 normal forwards running overlay-slidein; display: flex; flex-direction: column; gap: 0.5rem; left: 50%; width: 260px; opacity: 0; position: fixed; top: 45%; transform: translate(-50%, -50%); }
.altcha-overlay-backdrop { background: rgba(0, 0, 0, 0.5); inset: 0px; display: none; position: fixed; z-index: 99999999; }
.altcha-overlay-close-button { align-self: flex-end; background: 0px 0px; border: 0px; padding: 0.25rem; cursor: pointer; color: currentcolor; font-size: 130%; line-height: 1; opacity: 0.7; }
@media (max-height: 450px) {
  .altcha-overlay { top: 10% !important; transform: translate(-50%, 0px); }
}