:root{color-scheme:dark;--blue:#526fff;--muted:#9ca4b6;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;padding:24px 16px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 25%,#526fff16,transparent 62%),#090c11;color:#f1f3f8;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #a7b4ff;outline-offset:5px}h1:focus{outline:none}p,h1,h2{margin:0}[hidden]{display:none!important}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.setup-card{position:relative;width:min(100%,460px);height:520px;padding:28px 30px 0;border:1px solid #323848;border-radius:34px;background:radial-gradient(ellipse at 50% 0,#526fff0c,transparent 55%),linear-gradient(145deg,#181d27,#11151c 80%);box-shadow:0 30px 90px #0005,inset 0 1px 0 #ffffff08;display:flex;flex-direction:column;animation:card-in .6s var(--ease) both}
.setup-card:before{content:"";position:absolute;top:-1px;left:17%;right:17%;height:1px;background:linear-gradient(90deg,transparent,#8b9fff65,transparent);pointer-events:none}
.card-header{display:flex;align-items:center;justify-content:space-between;height:34px;flex-shrink:0}.brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;letter-spacing:0;line-height:1}.brand img{width:24px;height:24px;clip-path:circle(47%);border:0;box-shadow:none}.brand-bot{color:#9dafff;font-weight:500}.card-header>span{font-size:10px;color:#a0acc7;font-variant-numeric:tabular-nums;padding:6px 10px;background:#232a3b88;border:1px solid #8098d018;border-radius:20px}
.progress{display:flex;gap:7px;margin-top:23px;flex-shrink:0}.progress span{position:relative;height:3px;flex:1;background:#2c3140;border-radius:3px;overflow:hidden}.progress span:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#526fff,#8b9fff);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}.progress .on:after{transform:scaleX(1)}
.step-stage{flex:1;min-height:0;padding-top:29px}.step{height:100%;display:flex;flex-direction:column;text-align:center}.step.active .step-heading{animation:step-in .38s var(--ease) both}.step.active .step-content{animation:step-in .45s .06s var(--ease) both}.step-heading{flex-shrink:0;height:86px}h1{font-size:28px;line-height:1.25;letter-spacing:0;font-weight:550}.step-heading p{margin:11px auto 0;font-size:12px;line-height:1.7;color:var(--muted);max-width:340px}
.step-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 0 24px}.shortcut{width:100%;padding:25px 18px 18px;border:1px solid #758bd51e;border-radius:23px;background:radial-gradient(ellipse at 50% 0,#526fff16,transparent 85%),#151c2760;box-shadow:inset 0 1px 0 #ffffff04;transition:border-color .3s,box-shadow .3s}.shortcut:hover{border-color:#8298ee3a;box-shadow:inset 0 1px 0 #ffffff08,0 8px 30px #0001}
.keys{display:flex;align-items:center;justify-content:center;gap:13px}.keys>span{font-size:12px;color:#65708a}kbd{min-width:53px;height:46px;padding:0 14px;display:grid;place-items:center;border:1px solid #46516a;border-bottom:3px solid #4a5873;border-radius:12px;background:linear-gradient(145deg,#353e52,#242c3c);box-shadow:0 4px 0 #0c101b,0 8px 16px #0003,inset 0 1px 0 #ffffff0a;color:#e3eaff;font:500 14px Inter,sans-serif;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;user-select:none}kbd:hover{transform:translateY(-3px);border-color:#8397d4;box-shadow:0 7px 0 #0c101b,0 12px 24px #0004}kbd:active{transform:translateY(3px);box-shadow:0 1px 0 #0c101b,0 3px 8px #0003}
.primary{position:relative;overflow:hidden;isolation:isolate;height:49px;flex-shrink:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #9bacff35;border-radius:50px;background:var(--blue);box-shadow:0 5px 20px #526fff22,inset 0 1px 0 #ffffff20;font-size:12px;font-weight:500;transition:transform .2s var(--ease),filter .2s,box-shadow .2s}.primary:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff20 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s var(--ease);pointer-events:none}.primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 28px #526fff38}.primary:hover:before{transform:translateX(110%)}.primary:active{transform:translateY(1px) scale(.985);filter:brightness(.98);box-shadow:0 2px 8px #526fff22}.primary .icon{width:16px;height:16px;transition:transform .25s var(--ease)}.primary:hover .icon{transform:translateX(4px)}.ripple{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:#ffffff35;pointer-events:none;animation:ripple .6s ease-out forwards}
.bookmark-action{width:100%;padding:15px 12px 11px;border:1px dashed #7185c34a;border-radius:23px;background:radial-gradient(ellipse at 50% 65%,#526fff15,transparent 80%),#14192566;transition:border-color .25s,background .25s,box-shadow .25s}.bookmark-action:hover,.bookmark-action.dragging{border-color:#91a5f890;background-color:#1b254c55;box-shadow:inset 0 0 35px #526fff08}.drag-arrow{display:block;margin:0 auto 11px;transform:rotate(-90deg);color:#8c9ee0;width:19px;height:19px}.bookmark-action:hover .drag-arrow{animation:drag-up .9s var(--ease) 2}.tool-button{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(140deg,#fff,#e1e7f5);color:#171b29;padding:14px 22px;border:1px solid #fff8;border-radius:50px;font-size:13px;font-weight:600;cursor:grab;box-shadow:0 4px 0 #a4b2cf25,0 9px 25px #0003;transition:transform .25s var(--ease),box-shadow .25s}.tool-button:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 #a4b2cf25,0 14px 30px #0004}.tool-button:active{cursor:grabbing;transform:translateY(1px) scale(.97)}.tool-button img{border-radius:50%;pointer-events:none;-webkit-user-drag:none}.grip{font-size:19px;color:#929eb6;pointer-events:none}.hint{font-size:10px;line-height:1.6;color:#98a5c0;margin:14px auto 0;max-width:310px;min-height:32px}
.card-footer{height:64px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center}.text-button{font-size:11px;color:#98a5be;background:none;padding:8px 4px;transition:color .2s,transform .2s}.text-button:hover{color:#dce5ff;transform:translateY(-1px)}.text-button:active{transform:scale(.96)}.text-button:disabled{visibility:hidden;pointer-events:none}
dialog{width:min(540px,calc(100% - 32px));padding:24px;border:1px solid #3b4660;border-radius:28px;background:#151c27;color:#f1f3f8;box-shadow:0 30px 100px #000a}dialog[open]{animation:card-in .35s var(--ease)}dialog::backdrop{background:#03050bd9;backdrop-filter:blur(8px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}h2{font-size:18px;letter-spacing:0;font-weight:500}.close-button{width:32px;height:32px;border:1px solid #3b465d;border-radius:50%;display:grid;place-items:center;background:#ffffff04;transition:background .2s,transform .2s}.close-button:hover{background:#ffffff10;transform:rotate(90deg)}.close-button:active{transform:rotate(90deg) scale(.9)}video{display:block;width:100%;max-height:65svh;border-radius:17px;background:#000}
@keyframes card-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes step-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes drag-up{0%,100%{transform:translateY(0) rotate(-90deg)}45%{transform:translateY(-5px) rotate(-90deg)}}
@keyframes ripple{to{opacity:0;transform:scale(65)}}

/* Optical depth is confined to the small controls, not the outer card. */
.glass{--light-x:28%;--light-y:0%;position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 42%,rgba(160,181,230,.035));border:1px solid rgba(195,211,250,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 1px 0 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(187,207,255,.055),0 12px 32px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(20px) saturate(155%);backdrop-filter:blur(20px) saturate(155%)}
.glass:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),rgba(213,229,255,.095),transparent 64%);opacity:.7;transition:opacity .35s}
.glass:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(135deg,#e5edff35,transparent 28%,transparent 68%,#b7ccff20);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass:hover:before{opacity:1}.shortcut:hover{border-color:#b2c5f22b;box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #c2d6ff10,0 14px 34px #0003}
.shortcut{padding:25px 18px 18px}
.os-toggle{display:flex;align-items:center;justify-content:center;gap:13px;width:max-content;min-width:108px;margin:22px auto 0;padding:8px 14px;border-radius:30px;font-size:11px;letter-spacing:.1px;color:#c9d1e3;transition:box-shadow .25s,transform .2s,color .2s}
.os-toggle>span:last-child{color:#7c8aa6;font-size:14px;line-height:1}.os-toggle:hover{color:#fff;box-shadow:inset 0 1px 0 #ffffff30,0 4px 16px #0003}.os-toggle:active{transform:scale(.96)}
kbd{background:linear-gradient(145deg,#ffffff12,#ffffff04);border:1px solid #b8cafa30;border-bottom:2px solid #a3b6df36;box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #ffffff08,0 3px 0 #0d111e,0 8px 18px #0004;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:13px;font-weight:500;letter-spacing:.15px}
kbd:hover{border-color:#b4c5f260;box-shadow:inset 0 1px 0 #ffffff40,0 6px 0 #0d111e,0 10px 25px #0004}
.bookmark-action{border-style:solid}.bookmark-action:hover,.bookmark-action.dragging{border-color:#b2c5f244;background-color:#a9c0ff05;box-shadow:inset 0 1px 0 #ffffff25,inset 0 -1px 0 #c2d6ff10,0 14px 34px #0003}
.tool-button{font-weight:500;letter-spacing:.1px;box-shadow:inset 0 1px 0 #fff,0 3px 0 #a4b2cf20,0 9px 25px #0003}.tool-rocket{font-size:14px;line-height:1;pointer-events:none}.tool-button:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 6px 0 #a4b2cf20,0 13px 30px #0004}
/* The resting glass stays fixed; only a low-opacity overlay follows the pointer. */
.pointer-surface.glass:before,.pointer-surface.glass:hover:before,.os-toggle.glass:before,.finish-instructions.glass:before{opacity:.7}
.pointer-surface.glass:hover,.pointer-surface.glass.dragging{border-color:rgba(195,211,250,.12);background-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 1px 0 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(187,207,255,.055),0 12px 32px rgba(0,0,0,.14)}
.pointer-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 145px 100px at var(--pointer-x,50%) var(--pointer-y,50%),rgba(212,228,255,.035),transparent 80%);opacity:0;transition:opacity .3s ease}
.pointer-lit>.pointer-glow{opacity:1}
kbd{position:relative;overflow:hidden;transform-origin:center 80%;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
kbd:after{content:"";position:absolute;inset:-30%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff12 50%,transparent 65%);transform:translateX(-100%);transition:transform .6s var(--ease)}
kbd:hover{transform:perspective(350px) rotateX(8deg) translateY(-2px);border-color:#9aafff55;box-shadow:inset 0 1px 0 #ffffff32,inset 0 -1px 0 #526fff18,0 5px 0 #0d111e,0 11px 20px #0004}
kbd:hover:after{transform:translateX(100%)}
kbd:active{transform:perspective(350px) rotateX(-3deg) translateY(3px);box-shadow:inset 0 1px 4px #0003,0 1px 0 #0d111e,0 3px 7px #0003;border-color:#91a6ff70}
.finish-instructions{width:100%;border-radius:23px;padding:25px 27px;text-align:left}
.finish-instructions p{font-size:13px;line-height:1.8;letter-spacing:0;color:#a8b5c9;text-wrap:pretty}
.finish-instructions .finish-title{font-size:15px;font-weight:500;color:#e8eef8;margin-bottom:9px;line-height:1.5}
@supports not (backdrop-filter:blur(1px)){.glass{background:linear-gradient(135deg,#2c3343,#1b202d)}}

@media(max-width:420px){.setup-card{padding:25px 22px 0;height:520px;border-radius:30px}h1{font-size:26px}.step-heading p{font-size:11px}.step-stage{padding-top:28px}.primary{font-size:11px}.finish-instructions{padding:23px}.finish-instructions p{font-size:12px}.finish-instructions .finish-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.primary:hover,.primary:active,.tool-button:hover,.tool-button:active,kbd:hover,kbd:active,.text-button:hover,.text-button:active{transform:none}}

@media(prefers-reduced-motion:reduce){.pointer-glow{display:none}kbd:after{display:none}}

#openTutorial{display:inline-flex;align-items:center;gap:3px}#openTutorial .icon{width:14px;height:14px;stroke-width:1.6}

/* Two distinct actions, with quiet tutorial help on the final step. */
#step3 .step-content{padding:0 0 12px}
.finish-instructions{padding:18px 22px}
.next-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;color:#a8b5c9;font-size:12px;line-height:1.65}
.next-steps li{position:relative;padding-left:17px}
.next-steps li:before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;background:#8297ff;box-shadow:0 0 0 3px #526fff16}
.tutorial-help{display:flex;align-items:center;gap:8px}

@media(max-width:420px){.finish-instructions{padding:16px 18px}.next-steps{font-size:12px;gap:12px}.tutorial-help{gap:5px}}