@charset "UTF-8";
:root {
    color-scheme:dark;
    --bg:#091216;
    --mint:#a0f5d2;
    --text:#f0f1ec;
    --muted:#8b9b9f;
    --line:#26353a;
    --mono:"Cascadia Code",Consolas,monospace;
    --sans:Arial,Helvetica,sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:30px
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased
}
body:before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:950px;
    z-index:-1;
    background:radial-gradient(ellipse at 20% 44%,#163c322e,transparent 55%);
    pointer-events:none
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit
}
button,a,summary {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:2px solid var(--mint);
    outline-offset:6px
}
.shell {
    max-width:1480px;
    margin:auto;
    padding:0 64px
}
.mint {
    color:var(--mint)
}
.header {
    height:116px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:25px
}
.header-title {
    font:10px var(--mono);
    letter-spacing:1.3px;
    text-align:center;
    color:var(--mint)
}
.brand {
    font-size:25px;
    font-weight:800;
    letter-spacing:-1px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:5px
}
.brand-mark {
    font-size:38px;
    color:var(--mint);
    margin-right:9px
}
.header-caption {
    font-size:10px;
    letter-spacing:1.3px;
    color:var(--muted);
    margin-left:auto;
    text-align:right
}
.hero {
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:64px;
    align-items:center;
    padding:66px 0 76px;
    transition:grid-template-columns .8s ease, gap .8s ease, padding .8s ease
}
.scanner-scene {
    position:sticky;
    top:28px;
    align-self:start;
    min-width:0;
    padding:0 18px 0 0;
    isolation:isolate
}
.scanner-scene:before {
    content:"";
    position:absolute;
    inset:35px -20px;
    background-image:linear-gradient(#91f4ce06 1px,transparent 1px),linear-gradient(90deg,#91f4ce06 1px,transparent 1px);
    background-size:32px 32px;
    z-index:-2;
    mask-image:radial-gradient(ellipse,#000,transparent 72%)
}
.dot {
    width:6px;
    height:6px;
    display:inline-block;
    flex-shrink:0;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 10px #a0f5d255
}
.identity-card {
    position:relative;
    margin:0 10px 0 12px;
    border:1px solid #76b39c80;
    border-radius:19px;
    background:linear-gradient(125deg,#24483e82,#112329eb 50%,#1a3030b3);
    box-shadow:inset 0 0 25px #a0f5d209,0 30px 65px #0004;
    transform:rotate(0deg);
    transition:transform .8s ease;
    overflow:hidden
}
.scan-pending .identity-card,
.is-scanning .identity-card {
    transform:rotate(-4deg)
}
.card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 26px 0;
    font:10px var(--mono);
    letter-spacing:2px;
    color:#c7ddd4
}
.card-chip {
    font-size:29px;
    color:var(--mint);
    line-height:1
}
.portrait {
    position:relative;
    height:270px;
    width:78%;
    margin:12px auto 4px;
    transition:height .8s ease
}
.face {
    width:100%;
    height:100%;
    color:var(--mint);
    filter:drop-shadow(0 0 13px #8ef3c72c)
}
.bust {
    stroke:#87c8b1;
    stroke-width:1
}
.face-lines {
    stroke:#9aefcd;
    stroke-width:.8;
    opacity:.65
}
.face-nodes {
    opacity:.9
}
.portrait-axis {
    position:absolute;
    inset:0 50%;
    border-left:1px dashed #a0f5d21c
}
.corner {
    position:absolute;
    width:22px;
    height:22px;
    border-color:var(--mint);
    border-style:solid;
    opacity:.85
}
.tl {
    top:16px;
    left:6%;
    border-width:2px 0 0 2px
}
.tr {
    top:16px;
    right:6%;
    border-width:2px 2px 0 0
}
.bl {
    bottom:25px;
    left:6%;
    border-width:0 0 2px 2px
}
.br {
    bottom:25px;
    right:6%;
    border-width:0 2px 2px 0
}
.portrait-caption {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    font:7px var(--mono);
    letter-spacing:1px;
    color:#9bb7ad
}
.scan-line {
    position:absolute;
    left:-35%;
    width:170%;
    top:0;
    opacity:0;
    visibility:hidden;
    height:2px;
    background:#d1ffe9;
    box-shadow:0 0 8px #a0ffd0,0 0 22px #6cffbd,0 0 50px #4affc090
}
.scan-line:after {
    content:"";
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    background:linear-gradient(transparent,#80ffc51a)
}
.is-scanning .scan-line {
    visibility:visible;
    animation:scan 5.2s ease-in-out both
}
.card-person {
    padding:15px 26px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}
.micro {
    font:9px var(--mono);
    letter-spacing:1.4px;
    color:var(--muted)
}
.card-person h2 {
    font-size:23px;
    letter-spacing:-.8px;
    margin:8px 0 0
}
.human-number {
    font:10px var(--mono);
    color:#afc9bf;
    white-space:nowrap
}
.card-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:18px 26px;
    gap:18px;
    border-top:1px solid #8db8a528
}
.card-fields div {
    min-width:0
}
.card-fields span {
    display:block;
    font:8px var(--mono);
    letter-spacing:1px;
    color:#93ada3
}
.card-fields strong {
    font:12px var(--mono);
    display:block;
    margin-top:9px;
    overflow-wrap:anywhere
}
.card-bottom {
    padding:15px 26px;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    border-top:1px solid #8db8a528;
    color:var(--mint)
}
.barcode {
    height:17px;
    width:58px;
    margin-left:auto;
    background:repeating-linear-gradient(90deg,#9fcbb7 0 1px,transparent 1px 3px,#9fcbb7 3px 5px,transparent 5px 8px);
    opacity:.6
}
.orbit {
    position:absolute;
    border:1px solid #80f4c80a;
    border-radius:50%;
    z-index:-1;
    width:470px;
    height:470px;
    top:45px;
    left:-15px
}
.orbit-two {
    width:540px;
    height:540px;
    top:10px;
    left:-50px
}
.hero-copy {
    min-width:0;
    padding-bottom:8px
}
.eyebrow {
    font:9px var(--mono);
    letter-spacing:1.5px;
    color:var(--mint);
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 24px
}
h1 {
    position:relative;
    font-size:clamp(30px,3.5vw,50px);
    line-height:1.08;
    letter-spacing:-2px;
    margin:0;
    font-weight:600
}
.heading-pending {
    display:none;
    color:var(--mint)
}
.scan-pending .heading-pending,
.is-scanning .heading-pending {
    display:inline
}
.scan-pending .heading-complete,
.is-scanning .heading-complete {
    display:none
}
.heading-star {
    position:absolute;
    font-size:41px;
    top:4px;
    margin-left:30px;
    color:var(--mint);
    font-weight:400
}
.intro {
    font-size:14px;
    line-height:1.85;
    color:#a5b1b3;
    margin:25px 0 27px
}
.verdict {
    margin-top:24px;
    border-left:2px solid #a0f5d27a;
    padding-left:16px;
    min-height:65px
}
.verdict p {
    font-size:14px;
    line-height:1.6;
    color:#d7e5df;
    margin:9px 0 0;
    max-width:390px
}
.scan-button {
    margin-top:28px;
    width:100%;
    max-width:366px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border:0;
    border-radius:4px;
    background:var(--mint);
    color:#0e2620;
    font-size:13px;
    font-weight:700;
    padding:18px 21px;
    cursor:pointer;
    transition:background .2s,transform .2s
}
.scan-button[hidden] {
    display:none
}
.scan-button:hover {
    background:#c8ffe5;
    transform:translateY(-2px)
}
.scan-button:disabled {
    cursor:wait;
    opacity:.75;
    transform:none
}
.scan-button>span:last-child {
    font-size:23px;
    line-height:1
}
.button-note {
    font-size:9px;
    color:#70868a;
    margin-top:13px
}
.section-title {
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:18px 0;
    border-top:1px solid var(--line)
}
.section-title h2 {
    font-size:18px;
    font-weight:400;
    letter-spacing:-.4px;
    margin:0
}
.section-title>span {
    font:8px var(--mono);
    letter-spacing:1px;
    color:var(--muted)
}
.data-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--line)
}
.data-item {
    min-width:0;
    position:relative;
    padding:20px 18px 22px 0;
    border-bottom:1px solid var(--line)
}
.data-item:nth-child(even) {
    border-left:1px solid var(--line);
    padding-left:20px
}
.data-index {
    font:9px var(--mono);
    letter-spacing:1px;
    color:#839d94
}
.data-item h3 {
    font-size:22px;
    font-weight:400;
    letter-spacing:-.7px;
    margin:17px 0 10px;
    overflow-wrap:anywhere
}
.data-item p {
    font-size:11px;
    line-height:1.7;
    color:var(--muted);
    margin:0
}
.data-item .os-heading,
.data-item .browser-heading,
.data-item .country-heading {
    display:flex;
    align-items:center;
    gap:10px
}
.os-heading img,
.browser-heading img {
    width:26px;
    height:26px;
    flex-shrink:0;
    object-fit:contain
}
.country-heading img {
    width:28px;
    height:21px;
    flex-shrink:0;
    object-fit:contain;
    border-radius:2px;
    box-shadow:0 0 0 1px #ffffff1a
}
.country-heading img[hidden] {
    display:none
}
.country-location {
    margin-bottom:10px
}
.data-footnote,summary {
    display:inline-block;
    font:9px var(--mono);
    color:#718a81;
    margin-top:19px
}
.data-footnote:empty {
    display:none
}
.data-item details p {
    margin-top:12px;
    font:10px/1.7 var(--mono);
    overflow-wrap:anywhere
}
.data-item summary {
    cursor:pointer;
    color:#a9c6b8;
    list-style:none
}
.data-item summary:after {
    content:" +";
    color:var(--mint)
}
.data-item details[open] summary:after {
    content:" −"
}
.data-item summary::-webkit-details-marker {
    display:none
}
.capabilities {
    display:flex;
    flex-wrap:wrap;
    gap:20px
}
.capabilities>span {
    font-size:18px
}
.capabilities span span {
    color:var(--mint);
    font-size:15px
}
.notice {
    font-size:12px;
    line-height:1.7;
    color:var(--mint)
}
footer {
    border-top:1px solid var(--line);
    padding:26px 0 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    color:#7c9291;
    font-size:9px
}
footer>span:nth-child(2) {
    font:7px var(--mono);
    letter-spacing:1px
}
.footer-brand {
    font-size:17px;
    color:var(--text)
}
@keyframes scan {
    0% { top:0; opacity:0; }
    5% { opacity:1; }
    50% { top:100%; opacity:1; }
    95% { opacity:1; }
    100% { top:0; opacity:0; }
}
.scan-pending .data-grid,
.scan-pending .card-fields,
.scan-pending .verdict,
.is-scanning .data-grid,
.is-scanning .card-fields,
.is-scanning .verdict {
    visibility:hidden;
}
.data-item { --reveal-delay:0s; }
.data-item:nth-child(2) { --reveal-delay:.15s; }
.data-item:nth-child(3) { --reveal-delay:.3s; }
.data-item:nth-child(4) { --reveal-delay:.45s; }
.data-item:nth-child(5) { --reveal-delay:.6s; }
.data-item:nth-child(6) { --reveal-delay:.75s; }
.data-item:nth-child(7) { --reveal-delay:.9s; }
.data-item:nth-child(8) { --reveal-delay:1.05s; }
.data-item:nth-child(9) { --reveal-delay:1.2s; }
.data-item:nth-child(10) { --reveal-delay:1.35s; }
.data-item:nth-child(11) { --reveal-delay:1.5s; }
.data-item:nth-child(12) { --reveal-delay:1.65s; }
.is-revealing .data-item {
    animation:reveal 1s ease-out var(--reveal-delay) both;
}
.is-revealing .data-item:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:var(--mint);
    box-shadow:0 0 18px 5px #a0f5d266;
    pointer-events:none;
    animation:reveal-ray 1s ease-out var(--reveal-delay) both;
}
.is-revealing .card-fields {
    animation:reveal 1s ease-out both;
}
.is-revealing .verdict {
    animation:reveal .8s ease-out 2.4s both;
}
@keyframes reveal {
    from { opacity:0; filter:blur(5px); clip-path:inset(0 100% 0 0); }
    40% { opacity:1; filter:blur(1px); }
    to { opacity:1; filter:blur(0); clip-path:inset(0); }
}
@keyframes reveal-ray {
    0% { left:0; opacity:0; }
    15% { opacity:1; }
    85% { opacity:.8; }
    100% { left:100%; opacity:0; }
}
@media(min-width:1450px) {
    .hero {
        gap:80px
    }
    .portrait {
        height:300px
    }
}
@media(max-width:1100px) {
    .shell {
        padding:0 35px
    }
    .hero {
        gap:45px
    }
    h1 {
        letter-spacing:-3px
    }
    .heading-star {
        font-size:30px;
        margin-left:18px
    }
    .card-person h2 {
        font-size:19px
    }
    .portrait {
        height:240px
    }
    .card-top,.card-person,.card-fields,.card-bottom {
        padding-left:19px;
        padding-right:19px
    }
    .card-fields {
        gap:10px
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:.6px
    }
    .orbit {
        display:none
    }
    .intro {
        font-size:12px
    }
    .desktop-break {
        display:none
    }
}
@media(max-width:760px) {
    .has-results .scanner-scene {
        display:none
    }
    .shell {
        padding:0 22px
    }
    .header {
        height:auto;
        min-height:108px;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:14px;
        padding:18px 0
    }
    .header-title {
        grid-column:1 / -1;
        grid-row:2;
        font-size:9px
    }
    .brand {
        font-size:21px
    }
    .header .brand {
        font-size:clamp(13px,3.3vw,21px)
    }
    .brand-mark {
        font-size:30px
    }
    .header-caption {
        max-width:155px;
        font-size:8px;
        line-height:1.6;
        letter-spacing:.8px
    }
    .hero {
        grid-template-columns:1fr;
        gap:48px;
        padding:42px 0
    }
    .hero-copy {
        grid-row:auto
    }
    h1 {
        font-size:clamp(30px,7vw,45px);
        letter-spacing:-1.5px
    }
    .heading-star {
        font-size:33px;
        margin-left:32px
    }
    .intro {
        font-size:13px;
        margin:23px 0
    }
    .eyebrow {
        font-size:8px;
        margin-bottom:22px
    }
    .scan-button {
        max-width:none
    }
    .button-note {
        font-size:9px
    }
    .scanner-scene {
        position:relative;
        top:auto;
        width:100%;
        max-width:440px;
        justify-self:center;
        padding:0 12px
    }
    .portrait {
        height:265px
    }
    .identity-card {
        margin:0 8px
    }
    .card-person h2 {
        font-size:23px
    }
    .section-title {
        align-items:flex-start;
        flex-direction:column;
        gap:11px
    }
    .section-title h2 {
        font-size:20px
    }
    .data-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .data-item {
        padding:23px 15px 24px 0
    }
    .data-item:nth-child(even) {
        border-left:1px solid var(--line);
        padding-left:18px
    }
    .data-item h3 {
        font-size:20px
    }
    .data-item p {
        font-size:11px
    }
    .data-footnote,summary {
        font-size:8px;
        line-height:1.6
    }
    .capabilities {
        gap:10px
    }
    .capabilities>span {
        font-size:15px
    }
    .capabilities span span {
        font-size:12px
    }
    footer {
        flex-wrap:wrap;
        gap:18px
    }
    footer>span:nth-child(2) {
        order:3;
        width:100%;
        font-size:6px
    }
    footer>span:last-child {
        margin-left:auto;
        font-size:8px
    }
}
@media(min-width:761px) {
    .has-results .hero {
        grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
        gap:28px;
        padding:32px 0 40px
    }
    .has-results .scanner-scene {
        padding-right:0
    }
    .has-results .portrait {
        height:185px
    }
    .has-results .card-top,
    .has-results .card-person,
    .has-results .card-fields,
    .has-results .card-bottom {
        padding-left:16px;
        padding-right:16px
    }
    .has-results .card-person h2 {
        font-size:18px
    }
    .has-results .card-fields {
        gap:10px
    }
    .has-results h1 {
        font-size:clamp(28px,2.7vw,38px)
    }
    .has-results .section-title {
        padding:14px 0
    }
    .has-results .data-item {
        padding-top:14px;
        padding-bottom:16px
    }
    .has-results .data-item h3 {
        font-size:20px;
        margin:10px 0 8px
    }
    .has-results .data-footnote,
    .has-results summary {
        margin-top:12px
    }
}
@media(min-width:1101px) {
    .has-results .hero {
        grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr);
        gap:36px
    }
    .has-results .data-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .has-results .data-item {
        border-left:0;
        padding-left:0;
        padding-right:16px
    }
    .has-results .data-item:not(:nth-child(3n+1)) {
        border-left:1px solid var(--line);
        padding-left:16px
    }
}
@media(prefers-reduced-motion:reduce) {
    .is-scanning .scan-line,
    .is-revealing .data-item:after {
        display:none
    }
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}