@charset "UTF-8";
:root{
color-scheme:light dark;
--desktop-top:#eceef2;
--desktop-bottom:#d5d8de;
--surface:rgba(250,250,252,.95);
--card:rgba(118,118,128,.08);
--text:#1d1d1f;
--secondary:#6e6e73;
--line:rgba(60,60,67,.16);
--blue:#007aff;
--blue-hover:#1686f8;
--green:#34c759;
--shadow:0 26px 70px rgba(20,24,31,.22),0 3px 12px rgba(20,24,31,.1);
--radius:14px;
--control-radius:7px;
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Helvetica,Arial,sans-serif}
*{
box-sizing:border-box}
html,body{
min-height:100%}
body{
margin:0;
color:var(--text);
font-family:var(--font);
font-size:13px;
-webkit-font-smoothing:antialiased}
button{
font:inherit}
.desktop{
min-height:100vh;
display:grid;
place-items:center;
padding:32px;
background:radial-gradient(circle at 68% 8%,rgba(255,255,255,.82),transparent 34%),linear-gradient(145deg,var(--desktop-top),var(--desktop-bottom))}
.system-dialog{
width:min(590px,100%);
overflow:hidden;
background:var(--surface);
border:1px solid rgba(255,255,255,.78);
border-radius:var(--radius);
box-shadow:var(--shadow);
backdrop-filter:blur(30px) saturate(1.2);
-webkit-backdrop-filter:blur(30px) saturate(1.2)}
.dialog-content{
padding:34px 36px 30px}
.dialog-copy{
min-width:0}
h1{
margin:1px 0 8px;
font-size:22px;
line-height:1.23;
font-weight:650;
letter-spacing:-.026em}
.intro{
margin:0;
color:var(--secondary);
font-size:14px;
line-height:1.48}
.feature-list{
display:grid;
gap:0;
margin:24px 0 23px;
padding:0;
overflow:hidden;
list-style:none;
background:var(--card);
border:1px solid var(--line);
border-radius:10px}
.feature-list li{
display:flex;
align-items:center;
gap:11px;
min-height:44px;
padding:10px 14px;
font-size:13px;
line-height:1.35}
.feature-list li+li{
border-top:1px solid var(--line)}
.feature-check{
width:19px;
height:19px;
flex:0 0 auto;
display:grid;
place-items:center;
color:#fff;
background:var(--green);
border-radius:50%;
font-size:11px;
font-weight:700}
.disclaimer{
margin:0;
color:var(--secondary);
font-size:11px;
line-height:1.48}
.disclaimer a{
color:var(--blue);
text-decoration:none}
.disclaimer a:hover{
text-decoration:underline}
.disclaimer a:focus-visible{
outline:2px solid color-mix(in srgb,var(--blue) 35%,transparent);
outline-offset:2px;
border-radius:2px}
.actions{
display:flex;
justify-content:flex-end;
margin-top:22px}
.primary-button{
min-width:96px;
height:32px;
padding:0 18px;
border:0;
border-radius:var(--control-radius);
color:#fff;
background:var(--blue);
box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.12);
cursor:pointer;
font-weight:500}
.primary-button:hover{
background:var(--blue-hover)}
.primary-button:active{
filter:brightness(.94);
transform:translateY(1px)}
.primary-button:focus-visible,.human-check:focus-visible{
outline:3px solid color-mix(in srgb,var(--blue) 28%,transparent);
outline-offset:2px}
.human-gate{
position:fixed;
inset:0;
z-index:10;
display:grid;
place-items:center;
padding:24px;
background:radial-gradient(circle at 68% 8%,rgba(255,255,255,.82),transparent 34%),linear-gradient(145deg,var(--desktop-top),var(--desktop-bottom));
transition:opacity .3s ease,visibility .3s ease}
.human-gate.verified{
opacity:0;
visibility:hidden;
pointer-events:none}
.human-card{
width:min(430px,100%);
padding:30px;
background:var(--surface);
border:1px solid rgba(255,255,255,.78);
border-radius:var(--radius);
box-shadow:var(--shadow)}
.human-symbol{
width:44px;
height:44px;
display:grid;
place-items:center;
margin-bottom:18px;
color:var(--blue);
background:color-mix(in srgb,var(--blue) 12%,transparent);
border-radius:12px}
.human-symbol svg{
width:27px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round}
.human-card h1{
margin-bottom:6px}
.human-card>p{
margin:0;
color:var(--secondary);
font-size:13px;
line-height:1.45}
.human-check{
width:100%;
height:58px;
display:flex;
align-items:center;
gap:13px;
margin-top:22px;
padding:0 16px;
color:var(--text);
background:var(--card);
border:1px solid var(--line);
border-radius:10px;
cursor:pointer;
text-align:left;
font-weight:550}
.human-check:hover{
border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
background:color-mix(in srgb,var(--blue) 6%,var(--card))}
.human-check:disabled{
cursor:default}
.check-control{
width:25px;
height:25px;
display:grid;
place-items:center;
flex:0 0 auto;
border:2px solid color-mix(in srgb,var(--secondary) 65%,transparent);
border-radius:6px}
.check-spinner,.check-success{
display:none}
.human-check.checking .check-control{
border-color:transparent}
.human-check.checking .check-spinner{
display:block;
width:22px;
height:22px;
border:2px solid color-mix(in srgb,var(--blue) 20%,transparent);
border-top-color:var(--blue);
border-radius:50%;
animation:spin .75s linear infinite}
.human-check.success .check-control{
border-color:var(--green);
background:var(--green)}
.human-check.success .check-success{
display:block;
width:18px;
fill:none;
stroke:#fff;
stroke-width:2.3;
stroke-linecap:round;
stroke-linejoin:round}
.human-note{
margin-top:13px!important;
font-size:10.5px!important}
@keyframes spin{
to{
transform:rotate(360deg)}
}
html[data-os="windows"]{
--desktop-top:#e8f1fb;
--desktop-bottom:#cddceb;
--surface:rgba(249,251,253,.96);
--card:rgba(0,0,0,.035);
--text:#1b1b1b;
--secondary:#5e5e5e;
--line:rgba(0,0,0,.12);
--blue:#0067c0;
--blue-hover:#1975c5;
--green:#0f7b0f;
--shadow:0 24px 56px rgba(42,58,72,.22),0 2px 8px rgba(42,58,72,.12);
--radius:8px;
--control-radius:4px;
--font:"Segoe UI Variable","Segoe UI",Tahoma,Arial,sans-serif}
html[data-os="windows"] .system-dialog,html[data-os="windows"] .human-card{
border-color:rgba(0,0,0,.1)}
html[data-os="windows"] .dialog-content{
padding:36px 38px 32px}
html[data-os="windows"] .feature-list,html[data-os="windows"] .human-check{
border-radius:6px}
html[data-os="windows"] .human-symbol{
border-radius:6px}
@media(prefers-color-scheme:dark){
:root{
--desktop-top:#292b30;
--desktop-bottom:#111216;
--surface:rgba(39,39,42,.96);
--card:rgba(118,118,128,.14);
--text:#f5f5f7;
--secondary:#ababaf;
--line:rgba(255,255,255,.12);
--blue:#0a84ff;
--blue-hover:#218fff}
.system-dialog,.human-card{
border-color:rgba(255,255,255,.13)}
html[data-os="windows"]{
--desktop-top:#202427;
--desktop-bottom:#111315;
--surface:rgba(32,32,32,.97);
--card:rgba(255,255,255,.06);
--text:#fff;
--secondary:#c6c6c6;
--line:rgba(255,255,255,.12);
--blue:#60cdff;
--blue-hover:#75d3ff;
--green:#6ccb5f}
html[data-os="windows"] .primary-button{
color:#00344f}
}
@media(max-width:560px){
.desktop{
display:block;
min-height:100vh;
padding:0;
background:var(--surface)}
.system-dialog{
min-height:100vh;
border:0;
border-radius:0;
box-shadow:none}
.dialog-content{
padding:42px 24px 28px!important}
h1{
font-size:21px}
.feature-list{
margin-top:24px}
.actions{
margin-top:26px}
.primary-button{
width:100%;
height:38px}
.human-gate{
padding:18px}
.human-card{
padding:25px}
}
@media(prefers-reduced-motion:reduce){
.human-gate{
transition:none}
.check-spinner{
animation-duration:1.5s!important}
}