:root{font-family:Arial,'Noto Sans KR',sans-serif;color:#202c5c;background:#f5f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 80% 90%,#f9fafc,transparent 65%)}header{height:80px;padding:25px 42px;display:flex;justify-content:flex-end}.brand{font-size:19px;letter-spacing:-1px;font-weight:900;color:inherit;text-decoration:none;font-style:italic}main{max-width:920px;margin:clamp(60px,16vh,180px) auto 64px;padding:0 28px}#landing{text-align:center}.connect{border:2px solid #202858;border-radius:60px;padding:16px 48px;min-height:60px;background:transparent;color:#202858;font-size:26px;font-weight:700;box-shadow:0 0 14px #27345a40;cursor:pointer;transition:background-color .24s ease,color .24s ease,box-shadow .24s ease}.connect:hover:not(:disabled),.connect:focus-visible:not(:disabled){background:#202858;color:#fff;box-shadow:0 0 18px #27345a55}.connect:disabled{opacity:.65;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #24b8d6;outline-offset:5px}#status{font-size:14px;min-height:20px;margin:12px 0 4px;color:#586077}.guide{position:relative;height:495px;background:#e7e9ef;border-radius:28px;padding:35px 20px;text-align:left;overflow:hidden;isolation:isolate}.example-url{border-radius:40px;background:#f9fafb;width:50%;padding:9px 13px;font-size:14px;color:#808080;margin-bottom:14px}.dialog-example{position:relative;width:50%;height:363px;background:linear-gradient(white 35%,#e7e9ef);border:2px solid #bbb;border-bottom:0;border-radius:16px;padding:12px 17px;color:#808080;z-index:2;mask-image:linear-gradient(black 65%,transparent)}.dialog-example p{font-size:14px;margin:0 0 10px}.device-list{height:262px;border:2px solid #ddd;border-radius:15px;overflow:hidden}.device-list>div{position:relative;background:#b8b8b8;color:white;padding:9px 12px;font-size:14px}.step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#38d5ed;color:white;font-size:14px;font-weight:400}.device-list .step{position:absolute;top:57px;left:51%}.example-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:15px}.example-actions span{padding:7px 21px;border:2px solid #ddd;border-radius:8px;font-size:14px}.example-actions span:first-child{background:#b8b8b8}.zoom{position:absolute;right:14px;top:142px;width:49%;height:233px;border:2px solid #c9c9c9;border-radius:16px;background:linear-gradient(130deg,#e7e9ef 25%,white);mask-image:linear-gradient(90deg,transparent,black 32%);padding:0 32px 30px}.zoom-empty{height:108px;border:2px solid #dcdde1;border-top:0;border-radius:0 0 16px 16px}.zoom-actions{display:flex;justify-content:flex-end;gap:22px;padding-top:23px}.zoom-actions>span{position:relative;text-align:center;padding:15px 28px;color:#aaa;border-radius:15px;border:2px solid #d7d7da;font-size:20px}.zoom-actions>span:first-child{background:#b8b8b8;color:#888}.zoom-actions .step{position:absolute;bottom:-36px;right:8px}#driver{text-align:center;padding:50px 20px;background:#fff8;border-radius:28px;box-shadow:0 10px 60px #202c5c08}.eyebrow{font-size:14px;letter-spacing:3px}h1{font-size:48px;margin:18px 0}#device-name{font-size:20px}#driver-status{color:#586077;font-size:16px}#driver-content{margin:40px 0;color:#586077}.secondary{padding:12px 24px;background:white;border:1px solid #ccd0de;border-radius:28px;color:inherit;font-size:16px;cursor:pointer}[hidden]{display:none!important}@media(max-width:650px){header{padding:22px 24px}main{margin-top:70px;padding:0 20px}.connect{font-size:23px}.guide{height:390px;padding:24px 16px}.example-url,.dialog-example{width:100%}.dialog-example{height:320px}.device-list{height:205px}.zoom{display:none}.example-actions span:first-child{color:#555}.dialog-example{mask-image:none}.device-list .step{top:42px}h1{font-size:36px}}
:root body.driver-active{margin:0;overflow:hidden;background:#212020}body.driver-active main{display:none}#legacy-driver{position:fixed;inset:0;width:100%;height:100%;border:0;background:#212020}


/* Planning reference: separate outlined logo image and connection layout. */
header{align-items:flex-start;padding-top:28px}
.brand{display:block;width:135px;line-height:0;font-style:normal}
.brand img{display:block;width:100%;height:auto}
main{width:900px;max-width:100%;margin-top:clamp(80px,16.76vh,181px)}
.connect{width:264px;height:62px;padding:0 24px}
.guide{height:495px;border-radius:28px}
.device-list .step::before,.zoom-actions .step::before{content:"";position:absolute;width:23px;height:29px;left:-25px;top:-24px;background:url('./assets/pointer.svg') center/contain no-repeat;filter:drop-shadow(0 1px 2px #202c5c55)}
@media(min-width:1440px){main{transform:translateX(-56px)}}
@media(max-width:650px){
  header{padding:24px}.brand{width:135px}
  main{margin-top:70px;padding:0 20px}
  .connect{width:240px;height:60px}
  .guide{height:390px}
}

@media(max-width:650px){.guide{height:auto;min-height:390px;padding-bottom:24px}.dialog-example{height:auto;min-height:320px;padding-bottom:16px}}


@media(prefers-reduced-motion:reduce){.connect{transition:none}}