:root{color-scheme:dark;--bg:#101019;--card:#191923;--line:#32323f;--muted:#adadbf;--purple:#ae93ff;--mint:#9ef1d2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 40%,#23203866,transparent 55%),var(--bg);color:#f5f4fa;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}button,input,select{font:inherit}a{color:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:4px}[hidden]{display:none!important}.shell{max-width:1160px;padding:30px 36px 22px;margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-weight:800;letter-spacing:3px;font-size:19px}.brand small{display:block;font-size:8px;letter-spacing:2px;color:var(--muted)}.logo{width:40px;height:42px;display:grid;place-items:center;font-size:32px;letter-spacing:-2px;color:var(--purple);position:relative}.logo span{position:absolute;background:var(--mint);height:4px;width:19px;bottom:10px;transform:rotate(-28deg)}select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#191923;color:#ddd;max-width:150px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;margin:65px 0 48px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--mint);display:flex;gap:8px;align-items:center}.eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--mint)}h1{font-size:clamp(40px,5.4vw,66px);letter-spacing:-3px;line-height:1.05;margin:25px 0}h1>span{color:var(--purple)}.intro>p{color:var(--muted);font-size:16px;max-width:340px}.features{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.features span{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:#cac8db}.orbit{position:relative;width:290px;height:170px;margin-top:30px}.ring{position:absolute;left:15px;top:38px;width:240px;height:82px;border:1px solid #ae93ff44;border-radius:50%}.r1{transform:rotate(-25deg)}.r2{transform:rotate(28deg);border-color:#9ef1d233}.core{position:absolute;left:107px;top:32px;font-weight:800;font-size:63px;color:var(--purple);text-shadow:0 0 50px #9774ff66}.spark{position:absolute;width:9px;height:9px;border-radius:50%;box-shadow:0 0 15px currentColor}.s1{background:var(--mint);color:var(--mint);left:31px;top:112px}.s2{background:var(--purple);color:var(--purple);left:234px;top:65px}.card{background:linear-gradient(140deg,#20202b,#171720);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 20px 70px #0003;min-width:0}.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.tag{font-size:9px;letter-spacing:1px;font-weight:700;border:1px solid #ae93ff44;color:var(--purple);padding:5px 8px;border-radius:5px}.step{font-size:9px;color:#9a98ac;letter-spacing:1px}h2{font-size:23px;letter-spacing:-.7px;margin:23px 0 10px;line-height:1.25}.subtitle{font-size:13px;color:var(--muted);margin:0 0 25px}label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.language{margin:0}.input-wrap{display:flex;align-items:center;gap:10px;padding:0 14px;background:#111119;border:1px solid #434252;border-radius:11px}.input-wrap:focus-within{border-color:var(--purple)}.input-wrap>span{color:var(--mint);font-size:22px}input{border:0;background:transparent;width:100%;min-width:0;padding:15px 0;color:#fff;font-size:16px;outline:none!important;direction:ltr}input::placeholder{color:#79788c}.hint{color:#9896ac;font-size:10px;margin:8px 0 20px}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:11px;padding:14px 17px;background:var(--purple);color:#161021;font-size:13px;font-weight:800;cursor:pointer;min-height:50px;transition:background .2s,transform .2s}.primary:hover{background:#c3afff;transform:translateY(-1px)}button:disabled{opacity:.6;cursor:wait;transform:none}.primary.loading #submitIcon{width:16px;height:16px;border:2px solid #35244755;border-top-color:#352447;border-radius:50%;font-size:0;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#pair{margin-top:15px;padding:11px 13px;border-radius:9px;font-size:12px;background:#ae93ff12;border:1px solid #ae93ff33;overflow-wrap:anywhere}#pair.error{color:#ffbdc3;border-color:#ff778344;background:#ff77830b}#pair.success{color:var(--mint);border-color:#9ef1d233}.code-panel{text-align:center;border:1px solid #9ef1d244;background:#9ef1d207;border-radius:12px;margin-top:15px;padding:18px}.code-panel>span{display:block;color:var(--muted);font-size:12px}.code-panel output{display:block;font-family:ui-monospace,monospace;font-size:clamp(23px,6vw,33px);font-weight:800;letter-spacing:3px;margin:9px 0;color:var(--mint);overflow-wrap:anywhere}.copy{background:transparent;border:1px solid #9ef1d266;color:var(--mint);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12px}.code-panel small{display:block;color:var(--muted);font-size:10px;margin-top:14px}.instructions{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:24px;padding:15px 0;color:#d7d5e5;font-size:12px}summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.instructions[open] summary>span{transform:rotate(45deg)}ol{padding-inline-start:20px;color:var(--muted)}li{margin:9px 0}.instructions a{color:var(--purple)}.note{font-size:11px;line-height:1.7;color:var(--muted);margin:17px 0}.alternatives{display:grid;grid-template-columns:1fr 1fr;gap:9px}.alternatives a{display:flex;align-items:center;gap:7px;justify-content:center;text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:11px 7px;font-size:10px;min-height:45px}.alternatives a:hover{border-color:var(--purple);background:#ae93ff0a}.alternatives a>span:first-child{font-size:17px;color:var(--purple)}.privacy{font-size:9px;color:#9592a7;margin:17px 0 0;line-height:1.6}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px;font-size:9px;letter-spacing:1px;color:#9c98b0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Shared sizing: CSS pixels also respond to browser zoom. */
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-block:1.5rem}
body{min-block-size:100svh;overflow-wrap:break-word}
.shell{width:100%;max-width:1280px;padding:clamp(20px,3vw,44px);padding-bottom:max(24px,env(safe-area-inset-bottom));}
.header{gap:16px;min-width:0}.brand{min-width:0;letter-spacing:2px}.brand small{font-size:12px;letter-spacing:.8px;line-height:1.5}.logo{flex-shrink:0}
select{min-height:44px;max-width:160px;font-size:14px;width:100%;padding:10px 12px}
.layout{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,76px);margin:clamp(28px,5vh,64px) 0 36px}
.intro{min-width:0}.intro>p{font-size:16px;max-width:390px}.eyebrow{font-size:12px;letter-spacing:1px;flex-wrap:wrap}.features span{font-size:12px}
h1{font-size:clamp(40px,4.8vw,66px);letter-spacing:-2px;line-height:1.12}
.card{width:100%;max-width:640px;padding:clamp(24px,2.6vw,40px)}
.card-top{flex-wrap:wrap;gap:8px}.tag,.step{font-size:12px;letter-spacing:.6px}
h2{font-size:clamp(23px,2.2vw,30px);overflow-wrap:anywhere;letter-spacing:-.5px;margin-block:22px 12px}
.subtitle{font-size:16px;line-height:1.6;margin-bottom:24px}
label{font-size:14px}.input-wrap{min-height:56px}input{font-size:16px;min-height:54px;padding:14px 0}
.hint{font-size:12px;line-height:1.6}.primary{min-height:54px;font-size:16px;gap:12px}.primary>span:first-child{min-width:0;overflow-wrap:anywhere}.primary>span:last-child{flex-shrink:0}
#pair{font-size:14px;line-height:1.6}.code-panel>span{font-size:14px}.code-panel output{font-size:clamp(24px,3vw,36px);letter-spacing:2px;direction:ltr;unicode-bidi:isolate}
.copy{min-height:44px;font-size:14px}.code-panel small{font-size:12px;line-height:1.6}.instructions{font-size:14px}.instructions summary{min-height:32px;align-items:center;gap:12px}.instructions summary>span{flex-shrink:0}
.note{font-size:14px;line-height:1.7}.alternatives{grid-template-columns:1fr;gap:10px}.alternatives a{min-height:48px;font-size:14px;padding:12px 16px}.alternatives a span{min-width:0;overflow-wrap:anywhere;text-align:center}.privacy{font-size:12px;line-height:1.7}footer{font-size:12px;letter-spacing:.3px;flex-wrap:wrap;line-height:1.6}
/* Phones and portrait tablets: put the pairing form first. */
@media(max-width:899px){
 .shell{max-width:720px;padding:24px}.layout{display:block;margin:28px 0}.intro{display:none}.card{max-width:none;padding:32px;border-radius:22px}.brand{font-size:18px}.alternatives{grid-template-columns:repeat(2,minmax(0,1fr))}h2{font-size:28px}
}
/* Standard phones: edge-to-edge space without sacrificing touch sizes. */
@media(max-width:599px){
 .shell{padding:18px 16px;padding-top:max(18px,env(safe-area-inset-top));padding-inline-start:max(16px,env(safe-area-inset-left));padding-inline-end:max(16px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .header{gap:12px;align-items:center}.brand{gap:8px;font-size:17px}.brand small{font-size:12px;letter-spacing:0}.logo{width:30px;height:36px;font-size:28px}.logo span{width:16px;bottom:9px}.language{flex-shrink:0;width:112px}select{max-width:none;padding:10px 8px}
 .layout{margin:22px 0}.card{padding:24px 20px;border-radius:18px}.card-top{gap:10px}.tag{font-size:12px}.step{display:none}h2{font-size:clamp(23px,6vw,29px);margin-top:18px}.subtitle{margin-bottom:20px}.alternatives{grid-template-columns:1fr}.code-panel{padding:16px}.code-panel output{font-size:clamp(24px,7vw,32px)}footer{gap:6px;justify-content:center;text-align:center}
}
/* Very narrow phones and highly zoomed windows. */
@media(max-width:359px){
 .shell{padding-inline:12px}.header{flex-wrap:wrap;gap:12px}.brand{flex:1}.language{width:100%;max-width:none}.layout{margin-top:16px}.card{padding:20px 16px;border-radius:15px}h2{font-size:23px}.code-panel output{letter-spacing:1px}footer{flex-direction:column;align-items:center}
}
/* Landscape phones and short laptop windows: reduce decorative height. */
@media(max-height:600px) and (min-width:600px){
 .shell{padding-block:18px}.layout{margin-block:20px}.orbit{display:none}.card{padding-block:24px}h1{font-size:clamp(36px,4vw,52px)}
}
/* Landscape tablets and small laptops. */
@media(min-width:900px) and (max-width:1199px){
 .layout{gap:30px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.card{padding:28px}.eyebrow{line-height:1.7}.orbit{width:265px}.intro h1{font-size:clamp(40px,4.5vw,52px)}
}
/* Wide desktops: expand the composition, keep form lines readable. */
@media(min-width:1600px){
 .shell{max-width:1440px;padding:48px 60px}.layout{gap:100px;margin-block:70px 48px}.intro h1{font-size:76px}.intro>p{font-size:18px;max-width:430px}.card{padding:44px;justify-self:end}.features span{font-size:14px}.orbit{margin-top:40px}
}
/* Hover decoration only on devices that can actually hover. */
@media(hover:none){.primary:hover{background:var(--purple);transform:none}.alternatives a:hover{border-color:var(--line);background:transparent}}
@media(pointer:coarse){select,.copy,.alternatives a{min-height:48px}.primary{min-height:56px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* Blue ATOMIC background and raised / inset neumorphic surfaces. */
:root{--bg:#172b43;--card:#1c324c;--line:#ffffff18;--muted:#c0d0e2;--purple:#85c4ff;--mint:#aae1ff}
body{position:relative;isolation:isolate;background:#10243d;color:#f1f7ff}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url('/project-atomic.png') center center/cover no-repeat;filter:blur(2px) hue-rotate(-32deg) saturate(.85);transform:scale(1.015);pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(8,26,47,.9),rgba(15,57,95,.58) 50%,rgba(8,27,49,.86)),radial-gradient(ellipse at 60% 15%,rgba(47,136,255,.22),transparent 65%);pointer-events:none}
.shell{position:relative}.header{padding:14px 18px;border-radius:20px;background:linear-gradient(135deg,#223b55ed,#192e46ed);box-shadow:8px 8px 22px #06142199,-5px -5px 17px #5b86ad22;border:1px solid #ffffff0d}
.brand-logo{display:block;width:64px;height:64px;object-fit:contain;flex-shrink:0;border-radius:14px;background:#08111d;box-shadow:inset 3px 3px 7px #0009,inset -2px -2px 6px #6e9ec22b}
.brand small{color:#c0d0e2}.eyebrow{color:#aad9ff}.eyebrow span{background:#8dcbff}.intro h1{font-size:clamp(40px,4.7vw,64px);text-shadow:0 4px 24px #0008}.intro h1>span{color:#97ceff}.intro>p{color:#d2e0ef;text-shadow:0 2px 10px #0008}.features span{background:#1c334cd9;border-color:#ffffff14;color:#d3e3f5;box-shadow:3px 3px 8px #04132380,-2px -2px 6px #769fc21c}
.card{background:linear-gradient(140deg,#213b57f5,#192e47f5);border:1px solid #ffffff12;border-radius:26px;box-shadow:16px 16px 42px #030e1ca8,-9px -9px 30px #6c9cc322,inset 1px 1px 1px #ffffff18}
.tag{background:#1b3149;border-color:#ffffff0d;color:#a8d6ff;box-shadow:inset 2px 2px 5px #08172680,inset -2px -2px 5px #52789e24}.step{color:#bdcee0}
select{background:#1b314b;border-color:#ffffff10;box-shadow:4px 4px 10px #06152470,-3px -3px 8px #638bb12b;color:#edf6ff;border-radius:12px}
.input-wrap{background:#1a3049;border-color:#ffffff0a;border-radius:14px;box-shadow:inset 5px 5px 11px #07172799,inset -4px -4px 10px #5e85ac29}.input-wrap:focus-within{border-color:#86c7ff;box-shadow:inset 4px 4px 10px #07172799,inset -3px -3px 8px #5e85ac29,0 0 0 3px #71bcff1f}input{color:#f5f9ff}input::placeholder{color:#a0b5cd}.hint{color:#b7cbe0}
.primary{background:linear-gradient(135deg,#93ceff,#68acf0);color:#102c47;border:1px solid #c6e6ff5c;border-radius:14px;box-shadow:6px 6px 15px #05152399,-4px -4px 12px #739ac533,inset 1px 1px 1px #ffffff6b;transition:box-shadow .2s,background .2s}
.primary:hover{background:linear-gradient(135deg,#aedbff,#80bdfa);transform:none}.primary:active:not(:disabled){box-shadow:inset 3px 3px 8px #24558266,inset -2px -2px 7px #d4eaff4d}.primary:disabled{opacity:.7}
#pair{background:#162c43;border-color:#7fc5ff33;color:#d9edff;box-shadow:inset 3px 3px 8px #06142466,inset -2px -2px 6px #557eab1f}#pair.success{color:#c2edff;border-color:#9ddfff44;background:#18354a}#pair.error{color:#ffd1d7;background:#392c40;border-color:#ff9caf55}
.code-panel{background:#1a3048;border-color:#8bceff24;box-shadow:inset 5px 5px 11px #07182780,inset -4px -4px 10px #6b92b51f}.code-panel output{color:#b3e5ff;text-shadow:0 0 18px #49aaff33}
.copy,.alternatives a{background:linear-gradient(135deg,#233e5b,#1b3049);border:1px solid #ffffff0f;border-radius:12px;color:#e4f1ff;box-shadow:5px 5px 12px #06152380,-3px -3px 9px #6b94b72b}.copy:hover,.alternatives a:hover{background:#284866;border-color:#94cfff44}.copy:active,.alternatives a:active{box-shadow:inset 3px 3px 8px #06152380,inset -2px -2px 6px #6b94b729}.alternatives a>span:first-child{color:#abd9ff}
.instructions{border-color:#b4d9ff1c;color:#e2edfa}.instructions a{color:#acd9ff}.privacy{color:#b7c8dc}footer{border-color:#b4d9ff26;color:#d1e2f3;text-shadow:0 2px 8px #0009}
@media(max-width:899px){.intro{display:none}.layout{margin-top:26px}.card{border-radius:24px}}
@media(max-width:599px){.header{padding:10px 12px;border-radius:16px}.brand-logo{width:46px;height:46px;border-radius:10px}.brand{gap:8px}.brand>span{font-size:16px}.brand small{font-size:11px}.language{width:100px}.card{padding:24px 20px;border-radius:22px;box-shadow:10px 10px 27px #030e1ca1,-5px -5px 19px #6c9cc322}.layout{margin-top:22px}body::before{background-position:55% center;filter:blur(1px) hue-rotate(-32deg) saturate(.8)}body::after{background:linear-gradient(180deg,rgba(8,29,51,.7),rgba(12,39,66,.84) 50%,rgba(8,25,45,.91))}}
@media(max-width:359px){.header{padding:12px}.card{padding:20px 16px}.brand-logo{width:44px;height:44px}}
@media(hover:none){.primary:hover{background:linear-gradient(135deg,#93ceff,#68acf0)}.alternatives a:hover{background:linear-gradient(135deg,#233e5b,#1b3049);border-color:#ffffff0f}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.mobile-options{display:none}
/* Mobile-first pairing: remove the marked branding and repeated headings. */
@media(max-width:899px){
 .shell{max-width:560px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .header{justify-content:flex-end;flex-wrap:nowrap;min-height:44px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
 .header .brand{display:none}.language{width:120px;max-width:120px}.language select{min-height:44px;font-size:14px}
 .layout{margin:12px 0 0}.card{padding:22px 20px;border-radius:20px}.card-top,.subtitle{display:none}
 .card h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .input-wrap{min-height:54px}.hint{margin:8px 0 16px;font-size:12px}.primary{min-height:52px}
 #pair{margin-top:12px;padding:10px 12px}.code-panel{margin-top:12px;padding:16px 12px;scroll-margin-block:16px}.code-panel output{font-size:clamp(26px,8vw,36px);margin-block:10px}.copy{width:100%;min-height:48px;font-weight:600}
 .instructions{margin-top:18px;padding:12px 0}.instructions summary{min-height:32px}
 .note,.alternatives,footer{display:none}
 .mobile-options{display:block;margin-top:12px;color:#e2edfa;font-size:14px}.mobile-options summary{min-height:44px;align-items:center;gap:8px}.mobile-options summary>span{flex-shrink:0}.mobile-options[open] summary>span{transform:rotate(45deg)}
 .mobile-option-links{display:grid;gap:10px;margin-top:10px}.mobile-option-links a{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;min-height:48px;border:1px solid #b4d9ff26;border-radius:10px;color:#e4f1ff;text-decoration:none;background:#1b3049}
 .privacy{margin-top:12px;font-size:12px;line-height:1.5}
}
@media(max-width:359px){.shell{padding-inline:12px}.header{padding:0}.card{padding:18px 16px;border-radius:16px}.layout{margin-top:10px}}