:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#082c25;color:#f2eacb;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 50% 26%,#174d37 0,transparent 58%),#082c25}
.connection{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(40px,env(safe-area-inset-top)) 24px max(36px,env(safe-area-inset-bottom))}
.logo{display:block;width:180px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:24px;filter:drop-shadow(0 12px 28px #001c1866);margin-bottom:28px}
h1{max-width:670px;margin:0;font-size:clamp(30px,4.4vw,48px);font-weight:600;line-height:1.12;letter-spacing:-1.5px;text-wrap:balance}.intro{margin:16px 0 34px;color:#b7c5ab;font-size:16px;line-height:1.5;letter-spacing:.1px}
.connect{position:relative;isolation:isolate;overflow:hidden;width:min(100%,350px);min-height:174px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:25px 20px;border:1px solid #c6a756;border-radius:20px;background:linear-gradient(145deg,#164631,#103a2c);box-shadow:0 14px 40px #001d1955,inset 0 1px #e6d18b12;color:#ecd18c;cursor:pointer;font:inherit;transition:transform .18s,box-shadow .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.connect span,.connect svg{position:relative;z-index:1}.connect span{font-size:22px;font-weight:550;line-height:1.25;letter-spacing:-.3px}.connect svg{display:block;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}.connect:hover:not(:disabled){transform:translateY(-2px);border-color:#f3dc98;box-shadow:0 16px 42px #001d1980,0 0 22px #d9b55a0c}.connect:active:not(:disabled){transform:translateY(0)}.connect:focus-visible{outline:3px solid #fff0b0;outline-offset:7px}.connect:disabled{cursor:default}.connect[aria-busy="true"]{cursor:wait}
.connect[data-state="pending"]{animation:waiting 2.5s ease-in-out infinite}.connect[data-state="connected"]{border-color:#ead08a;box-shadow:0 14px 40px #001d1955,0 0 28px #d6af451c}.connect[data-state="connected"]::before{content:"";position:absolute;inset:-120%;background:linear-gradient(110deg,transparent 43%,#f5d98d12 49%,#ffe4a326 50%,#f5d98d12 51%,transparent 57%);animation:shimmer 6s ease-in-out infinite;pointer-events:none}
.hint{min-height:42px;width:min(100%,360px);margin:20px 0 0;color:#a9bba4;font-size:13px;line-height:1.6;text-wrap:balance}.message{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:14px 18px;margin:0;border:1px solid #6c7548;border-radius:12px;background:#173e30;color:#f2eacb;font-size:14px;line-height:1.5;text-align:center;box-shadow:0 10px 25px #001d1950}
@keyframes waiting{0%,100%{border-color:#a58b48;box-shadow:0 14px 40px #001d1955,0 0 0 #e2be6100}50%{border-color:#efcf7c;box-shadow:0 14px 40px #001d1955,0 0 26px #e2be6126}}@keyframes shimmer{0%,20%{transform:translateX(-30%)}65%,100%{transform:translateX(30%)}}
[hidden]{display:none!important}@media(max-width:650px){.logo{width:145px;margin-bottom:25px}h1{max-width:370px;letter-spacing:-.9px}.intro{font-size:14px;margin:14px 0 28px}.connect{width:min(100%,320px);min-height:164px;border-radius:18px}.connect span{font-size:20px}.hint{max-width:310px}}@media(max-height:680px){.connection{padding-top:24px;padding-bottom:24px}.logo{width:104px;margin-bottom:20px}h1{font-size:30px;max-width:540px}.intro{margin:12px 0 24px}.connect{min-height:140px;gap:14px}.connect svg{width:36px;height:36px}.hint{margin-top:16px}}@media(prefers-reduced-motion:reduce){.connect{transition:none}.connect[data-state="pending"],.connect[data-state="connected"]::before{animation:none}.connect[data-state="pending"]{border-color:#e6c77a;box-shadow:0 0 20px #d6af4514}.connect[data-state="connected"]::before{display:none}}