*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#24323a;color:#e5f6f6;font:16px system-ui,-apple-system,sans-serif}button,select{font:inherit;color:inherit;background:#1b3039e8;border:1px solid #61818c88;border-radius:6px;padding:10px 14px;cursor:pointer}button:hover,button[aria-pressed=true]{background:#35616c;border-color:#9bd5dc}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #d5ffff;outline-offset:3px}#viewer,#canvas,#landmarks{position:absolute;inset:0}#canvas canvas{display:block;touch-action:none;outline-offset:-4px;cursor:grab}#canvas canvas:active{cursor:grabbing}#landmarks{pointer-events:none}header{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:16px}header button{pointer-events:auto}h1{font-size:26px;letter-spacing:.06em;margin:0 0 8px}h1 span{font-size:16px;font-weight:400;letter-spacing:.08em;margin-left:12px}header p{font-size:14px;color:#adcad1;margin:0}nav{position:absolute;left:28px;top:120px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:calc(100% - 56px)}.modes{display:flex;gap:4px}.labels{background:#1b3039df;border-radius:6px;padding:11px;font-size:14px;display:flex;align-items:center;gap:6px}aside{position:absolute;right:28px;top:120px;width:226px;background:#182e37e8;padding:14px;border:1px solid #61818c55;border-radius:8px}aside label{display:block;color:#adcbd0;font-size:14px;margin-bottom:8px}select{width:100%;font-size:14px}h2{font-size:17px;margin:16px 0 8px}#detail p{font-size:14px;line-height:1.7;color:#c1d6da}#focus{font-size:14px;width:100%}footer{position:absolute;bottom:18px;left:28px;right:28px;pointer-events:none;color:#b6cbd1;text-shadow:0 1px 4px #10242d}footer p{font-size:14px;margin:0 0 10px}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-bottom:9px}.legend span:before{content:'';display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;background:var(--swatch)}footer small{font-size:12px}footer a{color:inherit;pointer-events:auto}.touch{display:none}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px 30px;background:#162b34ef;border:1px solid #63838d66;border-radius:8px;text-align:center;min-width:250px}#loading strong,#loading span{display:block}#loading span{margin-top:12px;font-size:14px;color:#adcbd0}#loading[hidden]{display:none}.yc-landmarks button{font-size:14px!important}
@media(max-width:700px){header{top:16px;left:16px;right:16px}h1{font-size:23px}h1 span{display:block;font-size:14px;margin:5px 0 0}header p{display:none}header button{font-size:14px;padding:9px}nav{top:93px;left:16px;max-width:calc(100% - 32px);gap:5px}nav button{padding:9px 11px;font-size:14px}aside{top:auto;bottom:116px;right:16px;width:190px;padding:10px}aside label{display:none}#detail p{max-height:90px;overflow:auto}footer{left:16px;right:16px;bottom:12px}.legend{gap:12px}#help{display:none}.touch{display:block}footer small{font-size:12px}.labels{padding:10px 7px;font-size:13px}}

header h1,header p{color:#effcff;text-shadow:0 1px 5px #102734,0 2px 12px #102734}footer{background:#17313bbc;border-radius:8px;padding:10px 14px;max-width:830px}header{z-index:2}nav,aside{z-index:3}

html,body{background:#030a16}header h1{font-weight:500;letter-spacing:.13em}header p{color:#78a8bd}button,select{background:#07172ae8;border-color:#24516e;border-radius:3px}button:hover,button[aria-pressed=true]{background:#11394e;border-color:#57ceeb}aside{background:#071528e8;border-color:#21445d;border-radius:4px}.labels{background:#07172ae8;border-radius:3px}footer{background:#071426c9;border:1px solid #19374f;border-radius:3px}#loading{background:#071426f5;border-color:#28708a}.yc-landmarks button{background:#07182ddd!important;border-color:#35708b!important;color:#b7f3ff!important;box-shadow:0 0 9px #20bfff1a}.yc-landmarks button[aria-pressed=true]{background:#10425bed!important;border-color:#87eaff!important}

@media(max-width:700px){aside{bottom:182px}footer{max-width:calc(100% - 32px)}header h1{font-size:20px}.yc-landmarks button{font-size:12px!important;padding:4px 6px!important}}

#inputDevice{width:auto;max-width:125px}.yc-landmarks button{font-size:10px!important;padding:3px 6px!important;min-height:23px}nav{max-width:calc(100% - 300px)}@media(max-width:700px){nav{max-width:calc(100% - 32px)}.yc-landmarks button{font-size:10px!important}}